1717 <div
1818 :class =" {
1919 'color-content__block': true,
20- 'is-active': $brandColor.toLocaleLowerCase () === color.value.toLocaleLowerCase () && !isMoreVisible,
20+ 'is-active': $brandColor.toLowerCase () === color.value.toLowerCase () && !isMoreVisible,
2121 }"
2222 :style =" { paddingBottom: '4px', color: 'var(--text-secondary)' }"
2323 >
2424 <div
2525 @click =" changeBrandColor(color.value)"
26- :class =" { 'is-active': $brandColor.toLocaleLowerCase () === color.value.toLocaleLowerCase () }"
26+ :class =" { 'is-active': $brandColor.toLowerCase () === color.value.toLowerCase () }"
2727 >
2828 <div
2929 :style =" {
159159 'background-color': 'var(--brand-main)',
160160 }"
161161 >
162- <p >hsv: {{ covert2Hex (brandDisplayedColor, 'hsv') }}</p >
163- <p >rgb: {{ covert2Hex (brandDisplayedColor, 'rgb') }}</p >
162+ <p >hsv: {{ convertFromHex (brandDisplayedColor, 'hsv') }}</p >
163+ <p >rgb: {{ convertFromHex (brandDisplayedColor, 'rgb') }}</p >
164164 </div >
165165 <div class =" color-content__custom-bottom"
166166 <div >
@@ -331,14 +331,17 @@ import { ColorPicker } from '../common/components';
331331import { langMixin } from '../common/i18n';
332332import {
333333 collectTokenIndexes,
334- covert2Hex ,
334+ convertFromHex ,
335335 generateBrandPalette,
336336 generateFunctionalPalette,
337337 generateNeutralPalette,
338338 getOptionFromLocal,
339+ isMobile,
339340 modifyToken,
340341 syncColorTokensToStyle,
341342 themeStore,
343+ updateLocalOption,
344+ updateLocalToken,
342345 updateStyleSheetColor,
343346} from '../common/themes';
344347import { colorAnimation, getThemeMode, getTokenValue, handleAttach, setUpModeObserver } from '../common/utils';
@@ -387,20 +390,23 @@ export default {
387390 dark: 8,
388391 },
389392 currentBrandIdx: 7,
390- brandTokenMap: ['' ], // `-td-brand-x` 系列的 token 映射需要根据 brandIdx 动态计算；其它功能色都是固定的
393+ brandTokenMap: [], // `-td-brand-x` 系列的 token 映射需要根据 brandIdx 动态计算；其它功能色都是固定的
391394 grayMainColor: getOptionFromLocal('gray') || getTokenValue('--td-bg-color-secondarycontainer-active'),
392395 successMainColor: getOptionFromLocal('success') || getTokenValue('--td-success-color'),
393396 errorMainColor: getOptionFromLocal('error') || getTokenValue('--td-error-color'),
394397 warningMainColor: getOptionFromLocal('warning') || getTokenValue('--td-warning-color'),
395- generationMode: ' remain',
396- isGrayRelatedToTheme: getOptionFromLocal('neutral') == true,
398+ generationMode: getOptionFromLocal('recommend') === 'true' ? 'recommend' : ' remain', // remain: 保留输入, recommend: 智能推荐
399+ isGrayRelatedToTheme: getOptionFromLocal('neutral') == ' true' ,
397400 isMoreVisible: false,
398401 };
399402 },
400403 computed: {
401404 $theme() {
402405 return themeStore.theme;
403406 },
407+ $device() {
408+ return themeStore.device;
409+ },
404410 isRemainMode() {
405411 return this.generationMode === 'remain';
406412 },
@@ -419,9 +425,6 @@ export default {
419425 },
420426 },
421427 watch: {
422- $theme(newTheme) {
423- this.changeBrandColor(newTheme.value);
424- },
425428 generationMode() {
426429 this.changeBrandColor(this.brandDisplayedColor);
427430 },
@@ -441,20 +444,20 @@ export default {
441444 },
442445 methods: {
443446 handleAttach,
444- covert2Hex ,
447+ convertFromHex ,
445448 generateBrandTokenMap(brandIdx) {
446449 const hoverIdx = brandIdx - 1;
447450 const activeIdx = brandIdx > 8 ? brandIdx : brandIdx + 1;
448451 return [
449- { name: '--td-brand-color-hover', idx: hoverIdx },
452+ ...(!isMobile(this.$device) ? [ { name: '--td-brand-color-hover', idx: hoverIdx }] : []) ,
450453 { name: '--td-brand-color', idx: brandIdx },
451454 { name: '--td-brand-color-active', idx: activeIdx },
452455 ];
453456 },
454457 updateBrandTokenMap() {
455458 const brandIdx = this.currentBrandIdx;
456- const extraTokens = this.generateBrandTokenMap(brandIdx);
457- this.brandTokenMap = BRAND_TOKEN_MAP.concat(extraTokens );
459+ const extraBrandTokens = this.generateBrandTokenMap(brandIdx);
460+ this.brandTokenMap = BRAND_TOKEN_MAP.concat(extraBrandTokens );
458461 },
459462 updateFunctionTokenMap() {
460463 Object.keys(FUNCTION_TOKENS).forEach((type) => {
@@ -474,43 +477,64 @@ export default {
474477 };
475478
476479 const newBrandColor = lightPalette[lightBrandIdx - 1].toUpperCase();
477- themeStore.setBrandColorState(newBrandColor);
478-
479- this.currentBrandIdx = this.brandIndexes[getThemeMode()];
480- updateStyleSheetColor('brand', lightPalette, darkPalette);
480+ themeStore.updateBrandColor(newBrandColor);
481+ updateLocalOption(
482+ 'color',
483+ newBrandColor.toLowerCase() !== this.$theme.value.toLowerCase() ? this.brandInputColor : null,
484+ );
485+ console.log(this.isRemainMode, this.generationMode);
486+ updateLocalOption('recommend', !this.isRemainMode ? 'true' : null);
481487
482488 const lightExtraTokens = this.generateBrandTokenMap(lightBrandIdx);
483489 const darkExtraTokens = this.generateBrandTokenMap(darkBrandIdx);
484- syncColorTokensToStyle(lightExtraTokens, darkExtraTokens);
490+
491+ this.currentBrandIdx = this.brandIndexes[getThemeMode()];
492+
493+ if (this.$brandColor != this.$theme.value) {
494+ // 只在用户手动修改主题色时同步 stylesheet，避免覆盖内置主题自身的逻辑
495+ updateStyleSheetColor('brand', lightPalette, darkPalette);
496+ syncColorTokensToStyle(lightExtraTokens, darkExtraTokens);
497+ this.changeNeutralColor(this.isGrayRelatedToTheme);
498+ }
485499
486500 this.updateBrandTokenMap();
487- this.changeNeutralColor(this.isGrayRelatedToTheme);
488501 },
489502 changeNeutralColor(related) {
490- // updateLocalOption('neutral', true, related);
491- // updateLocalOption('gray', this.grayMainColor, !related && this.grayMainColor !== DEFAULT_FUNCTION_COLORS['gray']);
503+ updateLocalOption('neutral', related ? 'true' : null);
492504 const inputHex = related ? this.$brandColor : this.grayMainColor;
493505 const palette = generateNeutralPalette(inputHex, related);
494506 updateStyleSheetColor('gray', palette, palette);
495- this.$nextTick(this.refreshAllTokens );
507+ this.$nextTick(this.refreshColorTokens );
496508 },
497509 changeFunctionColor(hex, type) {
498- this[`${type}MainColor`] = hex;
510+ const oldColor = getOptionFromLocal(type);
511+ updateLocalOption(type, oldColor !== hex ? hex : null);
512+
499513 if (type === 'gray') {
500514 this.changeNeutralColor(false);
501515 return;
502516 }
517+ this[`${type}MainColor`] = hex;
503518 const { lightPalette, darkPalette } = generateFunctionalPalette(hex);
504519 updateStyleSheetColor(type, lightPalette, darkPalette);
505- // updateLocalOption(type, hex, DEFAULT_FUNCTION_COLORS[type] !== hex);
506- this.$nextTick(this.refreshAllTokens);
520+ this.$nextTick(this.refreshColorTokens);
507521 },
508522 changeGradation(hex, idx, type, saveToLocal = true) {
509- const tokenName = `--td-${type}-color-${idx + 1 }`;
523+ const tokenName = `--td-${type}-color-${idx}`;
510524 modifyToken(tokenName, hex, saveToLocal);
511- this.$forceUpdate( );
525+ this.$nextTick(this.refreshColorTokens );
512526 },
513527 recoverGradation(type) {
528+ Array(14) // 最长的情况为 gray 的 14 个色阶（虽然理论上有些 token 用户无法直接在 UI 中修改）
529+ .fill(0)
530+ .forEach((_, idx) => {
531+ const tokenName = `--td-${type}-color-${idx + 1}`;
532+ updateLocalToken(tokenName, undefined, false); // 清空本地缓存值
533+ });
534+ if (type === 'brand') {
535+ this.changeBrandColor(this.brandInputColor);
536+ return;
537+ }
514538 this.changeFunctionColor(this[`${type}MainColor`], type);
515539 },
516540 refreshColorTokens() {
0 commit comments