chore: organize folders again

Author: RylanBot

packages/theme-generator/src/Generator.vue

@@ -1,6 +1,6 @@
 <template>
-  <div id="theme-generator">
-    <dock
+  <div class="theme-generator">
+    <float-dock
       :drawerVisible="visible"
       :showSetting="showSetting"
       @click-setting="handleClickSetting"
@@ -11,25 +11,23 @@
 </template>
 
 <script>
-import { applyTokenFromLocal, initThemeStyleSheet, syncThemeToIframe, themeStore } from './common/themes';
-import { initGeneratorVars } from './common/utils';
+import {
+  applyTokenFromLocal,
+  initGeneratorVars,
+  initThemeStyleSheet,
+  syncModeToGenerator,
+  syncThemeToIframe,
+  themeStore,
+} from './common/themes';
 
-import Dock from './dock';
+import FloatDock from './float-dock';
 import PanelDrawer from './panel-drawer';
 
-const activeTabMap = {
-  color: 0,
-  font: 1,
-  radius: 2,
-  shadow: 3,
-  size: 4,
-};
-
 export default {
   name: 'ThemeGenerator',
   components: {
+    FloatDock,
     PanelDrawer,
-    Dock,
   },
   props: {
     propsTop: String,
@@ -48,9 +46,7 @@ export default {
   },
   data() {
     return {
-      activeTabMap,
       visible: 0,
-      activeTabIdx: activeTabMap.color,
     };
   },
   computed: {
@@ -59,6 +55,7 @@ export default {
     },
   },
   mounted() {
+    syncModeToGenerator();
     initGeneratorVars();
     initThemeStyleSheet(this.$theme.enName);
     applyTokenFromLocal();
@@ -70,10 +67,8 @@ export default {
     },
     handleDrawerVisible(v) {
       this.visible = v;
-      this.$emit('panel-drawer-visible', v);
     },
     handleClickSetting() {
-      this.$emit('click-setting');
       this.visible = false;
     },
   },
@@ -85,7 +80,7 @@ export default {
 @import './styles/tdesign.min.css';
 
 @media screen and (max-width: 960px) {
-  #theme-generator {
+  .theme-generator {
     display: none;
   }
 }

packages/theme-generator/src/color-panel/utils/const.js renamed to packages/theme-generator/src/color-panel/built-in/color-map.js

@@ -1,29 +1,10 @@
-import AgapanthusPurple from '!raw-loader!../assets/AgapanthusPurple'; // 百子莲紫
-import DavidiaGreen from '!raw-loader!../assets/DavidiaGreen'; // 珙桐绿
-import GovRed from '!raw-loader!../assets/GovRed'; // 政务红
-import HyacinthBlue from '!raw-loader!../assets/HyacinthBlue'; //风信子蓝
-import MarigoldOrange from '!raw-loader!../assets/MarigoldOrange'; // 万寿菊橙
-import MultifloraRed from '!raw-loader!../assets/MultifloraRed'; // 蔷薇红
-import PetelotiiYellow from '!raw-loader!../assets/PetelotiiYellow'; //金茶花黄
-import PlumbagoBlue from '!raw-loader!../assets/PlumbagoBlue'; // 花丹蓝
-import TaxusRed from '!raw-loader!../assets/TaxusRed'; // 豆衫红
-import TCloudBlack from '!raw-loader!../assets/TCloudBlack'; // 腾云黑
-import TencentBlue from '!raw-loader!../assets/TencentBlue'; //腾讯蓝
-import TourismPurple from '!raw-loader!../assets/TourismPurple'; // 文旅紫
-import ViridifloraGreen from '!raw-loader!../assets/ViridifloraGreen'; // 鸢尾绿
-import WeChatGreen from '!raw-loader!../assets/WeChatGreen'; //微信绿
-import YulaniaPink from '!raw-loader!../assets/YulaniaPink'; // 玉兰粉
-
-/* ============================== */
-
 export const DEFAULT_BRAND = '#0052D9';
 const DEFAULT_GRAY = '#ddd';
 const DEFAULT_SUCCESS = '#2ba471';
 const DEFAULT_ERROR = '#d54941';
 const DEFAULT_WARNING = '#e37318';
 
 export const DEFAULT_FUNCTION_COLORS = {
-  // TO FIX 腾讯云默认的功能色也不需要存入 local
   gray: DEFAULT_GRAY,
   success: DEFAULT_SUCCESS,
   error: DEFAULT_ERROR,
@@ -36,19 +17,16 @@ export const DEFAULT_COLORS = [
   {
     name: '腾讯蓝',
     enName: 'Tencent Blue',
-    subtitle: TencentBlue,
     value: DEFAULT_BRAND,
   },
   {
     name: '风信子蓝',
     enName: 'Hyacinth Blue',
-    subtitle: HyacinthBlue,
     value: '#0894FA',
   },
   {
     name: '金花茶黄',
     enName: 'Petelotii Yellow',
-    subtitle: PetelotiiYellow,
     value: '#F3B814',
   },
 ];
@@ -57,50 +35,41 @@ export const RECOMMEND_COLORS = [
   {
     name: '珙桐绿',
     enName: 'Davidia Green',
-    subtitle: DavidiaGreen,
     value: '#45C58B',
   },
   {
     name: '鸢尾绿',
     enName: 'Viridiflora Green',
-    subtitle: ViridifloraGreen,
     value: '#0ED6CA',
   },
   {
     name: '花丹蓝',
     enName: 'Plumbago Blue',
-    subtitle: PlumbagoBlue,
     value: '#53B1FD',
   },
   {
     name: '百子莲紫',
     enName: 'Agapanthus Purple',
-    subtitle: AgapanthusPurple,
     value: '#7A5AF8',
   },
   {
     name: '玉兰粉',
     enName: 'Yulania Pink',
-    subtitle: YulaniaPink,
     value: '#EF45B3',
   },
   {
     name: '豆衫红',
     enName: 'Taxus Red',
-    subtitle: TaxusRed,
     value: '#F54343',
   },
-
   {
     name: '蔷薇红',
     enName: 'Multiflora Red',
-    subtitle: MultifloraRed,
     value: '#FF5479',
   },
   {
     name: '万寿菊橙',
     enName: 'Marigold Orange',
-    subtitle: MarigoldOrange,
     value: '#FD853A',
   },
 ];
@@ -109,25 +78,21 @@ export const SCENE_COLORS = [
   {
     name: '微信绿',
     enName: 'WeChat Green',
-    subtitle: WeChatGreen,
     value: '#07C160',
   },
   {
     name: '腾云黑',
     enName: 'TCloud Black',
-    subtitle: TCloudBlack,
     value: '#262626',
   },
   {
     name: '文旅紫',
     enName: 'Tourism Purple',
-    subtitle: TourismPurple,
     value: '#623BFF',
   },
   {
     name: '政务红',
     enName: 'Government Red',
-    subtitle: GovRed,
     value: '#EE1C25',
   },
 ];
@@ -190,15 +155,3 @@ export const FUNCTION_TOKEN_MAPS = {
   error: ERROR_TOKEN_MAP,
   warning: WARNING_TOKEN_MAP,
 };
-
-/* ============================== */
-
-export const FONT_COLOR_TOKEN_MAP = [
-  { name: '--td-text-color-primary', from: '--td-font-gray-1' },
-  { name: '--td-text-color-secondary', from: '--td-font-gray-2' },
-  { name: '--td-text-color-placeholder', from: '--td-font-gray-3' },
-  { name: '--td-text-color-disabled', from: '--td-font-gray-4' },
-  { name: '--td-text-color-anti', value: '#fff' },
-  { name: '--td-text-color-brand', from: '--td-brand-color' },
-  { name: '--td-text-color-link', from: '--td-brand-color' },
-];

packages/theme-generator/src/color-panel/components/ColorCollapse/index.vue

@@ -79,10 +79,9 @@ import { Edit1Icon, FileCopyIcon } from 'tdesign-icons-vue';
 import { Popup as TPopup } from 'tdesign-vue';
 import ArrowIcon from 'tdesign-vue/es/common-components/fake-arrow';
 
-import ColorPicker from '../../../common/ColorPicker/index.vue';
-import langMixin from '../../../common/i18n/mixin';
-import { handleAttach } from '../../../common/utils';
-import { collapseAnimation } from '../../../common/utils/animation';
+import { ColorPicker } from '../../../common/components';
+import { langMixin } from '../../../common/i18n';
+import { collapseAnimation, handleAttach } from '../../../common/utils';
 
 export default {
   name: 'ColorCollapse',

packages/theme-generator/src/color-panel/components/ColorColumn/index.vue

@@ -84,8 +84,8 @@
 import { Edit1Icon, ErrorCircleIcon, LinkUnlinkIcon } from 'tdesign-icons-vue';
 import { Popup as TPopup } from 'tdesign-vue';
 
-import ColorPicker from '../../../common/ColorPicker/index.vue';
-import langMixin from '../../../common/i18n/mixin';
+import { ColorPicker } from '../../../common/components';
+import { langMixin } from '../../../common/i18n';
 import { CUSTOM_TOKEN_ID } from '../../../common/themes';
 import { getTokenValue, handleAttach } from '../../../common/utils';
 

packages/theme-generator/src/color-panel/index.vue

@@ -316,6 +316,7 @@
     </div>
   </div>
 </template>
+
 <script lang="jsx">
 import { Edit1Icon, FileCopyIcon, HelpCircleIcon } from 'tdesign-icons-vue';
 import {
@@ -327,8 +328,8 @@ import {
   Tooltip as TTooltip,
 } from 'tdesign-vue';
 
-import ColorPicker from '../common/ColorPicker/index.vue';
-import langMixin from '../common/i18n/mixin';
+import { ColorPicker } from '../common/components';
+import { langMixin } from '../common/i18n';
 import {
   covert2Hex,
   generateBrandPalette,
@@ -341,16 +342,16 @@ import {
   updateLocalOption,
   updateStyleSheetColor,
 } from '../common/themes';
-import { getThemeMode, getTokenValue, handleAttach, setUpThemeObserver } from '../common/utils';
-import { colorAnimation } from '../common/utils/animation';
+import { colorAnimation, getThemeMode, getTokenValue, handleAttach, setUpModeObserver } from '../common/utils';
+
 import {
   BRAND_TOKEN_MAP,
   DEFAULT_COLORS,
   DEFAULT_FUNCTION_COLORS,
   FUNCTION_TOKEN_MAPS,
   RECOMMEND_COLORS,
   SCENE_COLORS,
-} from './utils/const';
+} from './built-in/color-map';
 
 import ColorCollapse from './components/ColorCollapse';
 import ColorColumn from './components/ColorColumn';
@@ -433,7 +434,7 @@ export default {
       ['success', 'error', 'warning'].forEach((type) => {
         this.changeFunctionColor(this[`${type}MainColor`], type);
       });
-      setUpThemeObserver((theme) => {
+      setUpModeObserver((theme) => {
         this.updateBrandTokenMap();
         this.currentBrandIdx = this.brandIndexes[theme];
         this.$forceUpdate();
@@ -515,6 +516,7 @@ export default {
   },
 };
 </script>
+
 <style scoped lang="less">
 /deep/ .t-popup[data-popper-placement='bottom-end'] .t-popup__arrow {
   left: calc(100% - 16px * 2) !important;