From 25772fe6d35515110a346b5798d06340fe1dcc58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=98=BFCai?= <jimmyrss1102@gmail.com>
Date: Fri, 25 Oct 2024 19:46:52 +0800
Subject: [PATCH 1/4] feat(theme-generator): support uploading css style to
 previews

---
 packages/theme-generator/README.md            |   6 +-
 .../src/common/Themes/const.js                |  23 +-
 .../src/common/Themes/index.vue               | 198 ++++++++++++++----
 .../theme-generator/src/common/i18n/en-US.js  |   3 +-
 .../theme-generator/src/common/i18n/zh-CN.js  |   3 +-
 5 files changed, 181 insertions(+), 52 deletions(-)

diff --git a/packages/theme-generator/README.md b/packages/theme-generator/README.md
index 5005c029..5ca200b4 100644
--- a/packages/theme-generator/README.md
+++ b/packages/theme-generator/README.md
@@ -4,9 +4,11 @@
 
 ### 🏗️ Develop
 
-- `npm run dev`
-
+- `npm install`
+- `npm run build`
+- `npm link`
 - `npm run build:watch` execute `npm link` as well to preview in application project
+- Use `npm link tdesign-theme-generator` in the `site` branch of `tdesign-vue-next-starter`
 
 ### ⚙️ Build
 
diff --git a/packages/theme-generator/src/common/Themes/const.js b/packages/theme-generator/src/common/Themes/const.js
index b09b541c..7e0a4dc6 100644
--- a/packages/theme-generator/src/common/Themes/const.js
+++ b/packages/theme-generator/src/common/Themes/const.js
@@ -12,22 +12,23 @@ import TencentSafe from "!raw-loader!./svg/TencentSafe";
 
 export const defaultTheme = {
   name: "默认主题",
-  enName:'TDesign',
+  enName: 'TDesign',
   subtitle: TDesignOriginal,
-  subtitleText:'TDesign Original',
+  subtitleText: 'TDesign Original',
   value: "#0052D9",
 };
 
 export const RECOMMEND_THEMES = [
   {
-    title: "官方推荐",
+    id: "OFFICIAL",
+    title: "officialRecommendation",
     options: [
       defaultTheme,
       {
         name: "腾讯云",
-        enName:'TCloud',
+        enName: 'TCloud',
         subtitle: TencentCloud,
-        subtitleText:'Tencent Cloud',
+        subtitleText: 'Tencent Cloud',
         value: "#006EFF",
       },
       // {
@@ -64,6 +65,18 @@ export const RECOMMEND_THEMES = [
       // },
     ],
   },
+  {
+    id: "CUSTOM",
+    title: "customUpload",
+    options: [
+      {
+        name: "自定义上传",
+        enName: 'Custom Upload',
+        subtitle: GovService,
+        value: "#623BFF",
+      }
+    ]
+  }
   // {
   //   title: "业务推荐",
   //   options: [
diff --git a/packages/theme-generator/src/common/Themes/index.vue b/packages/theme-generator/src/common/Themes/index.vue
index dd17cd3e..d8c49ec3 100644
--- a/packages/theme-generator/src/common/Themes/index.vue
+++ b/packages/theme-generator/src/common/Themes/index.vue
@@ -1,48 +1,84 @@
 <template>
   <div class="recommend-theme">
-    <div :key="idx" v-for="(type, idx) in recommendThemes">
-      <div class="recommend-theme__title">
-        {{ lang.dock.recommendTitle }}
+    <div class="recommend-theme__title-group">
+      <div :key="idx" v-for="(type, idx) in recommendThemes" class="recommend-theme__title"
+        @click="selectThemeModel(idx)" :style="{ 'font-weight': selectedThemeModel === idx ? 'bold' : 'normal' }">
+        {{ lang.dock[type.title] }}
       </div>
-      <div class="recommend-theme__flex">
-        <div
-          v-for="(theme, themeIdx) in type.options"
-          :key="themeIdx"
-          @click="generateNewTheme(theme)"
-        >
-          <div
-            class="recommend-theme__flex-theme"
-            :style="{
-              'background-color': theme.value,
-            }"
-          >
+    </div>
+
+    <div class="recommend-theme__flex" v-if="recommendThemes[selectedThemeModel].id === 'CUSTOM'">
+      <div v-for="(theme, themeIdx) in recommendThemesOptions" :key="themeIdx">
+        <t-upload v-if="recommendThemesOptions.length - 1 === themeIdx" :request-method="requestMethod"
+          :show-upload-progress="false" :before-upload="uploadNewTheme">
+          <template #fileListDisplay>
+            <span />
+          </template>
+          <div class="recommend-theme__flex-theme" :style="{
+            'background-color': theme.value,
+          }">
             <div v-html="theme.subtitle" />
-            <div
-              v-if="currentTheme && currentTheme.value === theme.value"
-              class="recommend-theme__flex-theme--active"
-            >
+            <div v-if="currentTheme && currentTheme.value === theme.value" class="recommend-theme__flex-theme--active">
               <picked-svg />
             </div>
           </div>
-          <p
-            :style="{
-              margin: '4px 0',
-              'text-align': 'center',
-              'font-size': '12px',
-              'line-height': '20px',
-            }"
-          >
+          <p :style="{
+            margin: '4px 0',
+            'text-align': 'center',
+            'font-size': '12px',
+            'line-height': '20px',
+          }">
             {{ isEn ? theme.enName : theme.name }}
           </p>
+        </t-upload>
+        <div v-else>
+          <div class="recommend-theme__flex-theme" @click="generateNewTheme(theme)" :style="{
+            'background-color': theme.value,
+          }">
+            <div v-html="theme.subtitle" />
+            <div v-if="currentTheme && currentTheme.value === theme.value" class="recommend-theme__flex-theme--active">
+              <picked-svg />
+            </div>
+          </div>
+          <p :style="{
+            margin: '4px 0',
+            'text-align': 'center',
+            'font-size': '12px',
+            'line-height': '20px',
+          }">
+            {{ isEn ? theme.enName : theme.name }}
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <div class="recommend-theme__flex" v-else>
+      <div v-for="(theme, themeIdx) in recommendThemesOptions" :key="themeIdx" @click="generateNewTheme(theme)">
+        <div class="recommend-theme__flex-theme" :style="{
+          'background-color': theme.value,
+        }">
+          <div v-html="theme.subtitle" />
+          <div v-if="currentTheme && currentTheme.value === theme.value" class="recommend-theme__flex-theme--active">
+            <picked-svg />
+          </div>
         </div>
+        <p :style="{
+          margin: '4px 0',
+          'text-align': 'center',
+          'font-size': '12px',
+          'line-height': '20px',
+        }">
+          {{ isEn ? theme.enName : theme.name }}
+        </p>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import { Upload as TUpload, MessagePlugin } from "tdesign-vue";
 import { RECOMMEND_THEMES } from "./const";
-import { generateNewTheme } from "../utils";
+import { generateNewTheme, appendStyleSheet } from "../utils";
 import PickedSvg from "./PickedSvg.vue";
 import langMixin from "../i18n/mixin";
 
@@ -51,22 +87,93 @@ export default {
   props: {
     currentTheme: Object,
   },
+  components: { PickedSvg, TUpload },
   mixins: [langMixin],
   data() {
     return {
+      MessagePlugin,
       recommendThemes: RECOMMEND_THEMES,
       isThemeTabVisible: false,
       isDrawerVisible: false,
+      selectedThemeModel: 0,
+      uploadMethod: 'requestSuccessMethod',
+      uploadThemeFile: [],
+      customUploadTheme: [
+        {
+          name: "占位测试",
+          subtitle: null,
+          value: "#133BFF",
+        }
+      ],
     };
   },
-  components: {
-    PickedSvg,
+  computed: {
+    recommendThemesOptions() {
+      if (this.recommendThemes[this.selectedThemeModel].id === 'CUSTOM') {
+        return [...this.customUploadTheme, ...this.recommendThemes[this.selectedThemeModel].options];
+      }
+      return this.recommendThemes[this.selectedThemeModel].options;
+    },
+    requestMethod() {
+      return {
+        requestSuccessMethod: this.requestSuccessMethod,
+        requestFailMethod: this.requestFailMethod,
+      }[this.uploadMethod];
+    },
   },
   methods: {
+    // file 为等待上传的文件信息，用于提供给上传接口。file.raw 表示原始文件
+    requestSuccessMethod(file /** UploadFile */) {
+      return new Promise((resolve) => {
+        // 控制上传进度
+        //todo 这里要变成数组
+        MessagePlugin.success('上传成功');
+        this.uploadThemeFile.push(file);
+        resolve({ status: 'success', response: { files: [...this.uploadThemeFile, file] } });
+      });
+    },
+    requestFailMethod(file /** UploadFile */) {
+      console.log(file);
+      return new Promise((resolve) => {
+        // resolve 参数为关键代码
+        MessagePlugin.error('上传失败，请检查文件是否符合规范');
+        resolve({ status: 'fail', error: '上传失败，请检查文件是否符合规范' });
+      });
+    },
     generateNewTheme(theme) {
       generateNewTheme(theme.value);
       this.$emit("changeTabTheme", theme);
     },
+    selectThemeModel(idx) {
+      this.selectedThemeModel = idx;
+    },
+    uploadNewTheme(file) {
+      console.log('todo', file);
+      // 读取文件
+      const fileReader = new FileReader();
+      fileReader.readAsText(file.raw);
+      fileReader.onload = (e) => {
+        const theme = e.target.result;
+        console.log('文件内容');
+        const themeId = `custom-theme-${this.customUploadTheme.length}`;
+        const existSheet = document.getElementById(themeId);
+        if (!existSheet) {
+          const styleSheet = document.createElement('style');
+          styleSheet.id = themeId;
+          styleSheet.type = 'text/css';
+          styleSheet.textContent = theme;
+          document.head.appendChild(styleSheet);
+        }
+
+        document.documentElement.setAttribute('theme-color', themeId);
+
+      };
+      // todo上传多个文件
+      return false;
+    },
+  },
+  mounted() {
+    this.selectThemeModel(this.selectedThemeModel);
   },
 };
 </script>
@@ -76,6 +183,21 @@ export default {
   max-height: 376px;
   border-radius: 32px 32px 0px 0px;
 
+  &__title-group {
+    display: flex;
+  }
+
+  &__title {
+    color: var(--text-primary);
+    font-weight: 600;
+    font-size: 14px;
+    margin: 8px 0px 0px 12px;
+    line-height: 22px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+  }
+
   &__content {
     padding: 0;
     overflow: auto;
@@ -103,23 +225,13 @@ export default {
     padding: 12px 4px 16px 16px;
   }
 
-  &__title {
-    color: var(--text-primary);
-    font-weight: 600;
-    font-size: 14px;
-    margin: 8px 0px 0px 12px;
-    line-height: 22px;
-    display: flex;
-    align-items: center;
-  }
-
   &__flex {
     display: flex;
     flex-wrap: wrap;
     margin: 4px -4px;
     cursor: pointer;
 
-    > div {
+    >div {
       margin: 4px;
       padding: 6px 6px 0px 6px;
       color: var(--text-primary);
@@ -139,6 +251,7 @@ export default {
       border-radius: 12px;
       position: relative;
       overflow: hidden;
+
       &--active {
         position: absolute;
         right: 0px;
@@ -147,5 +260,4 @@ export default {
     }
   }
 }
-
-</style>
+</style>
\ No newline at end of file
diff --git a/packages/theme-generator/src/common/i18n/en-US.js b/packages/theme-generator/src/common/i18n/en-US.js
index bc97979e..c3c33366 100644
--- a/packages/theme-generator/src/common/i18n/en-US.js
+++ b/packages/theme-generator/src/common/i18n/en-US.js
@@ -1,7 +1,8 @@
 export default {
   copied: "copied",
   dock: {
-    recommendTitle: "Official recommendation",
+    officialRecommendation: "Official recommendation",
+    customUpload: "Custom upload",
     adjustText: "Variables",
     recoverConfirm: 'Are you sure to recover TDesign default theme?',
     downloadTips: 'current theme has been downloaded',
diff --git a/packages/theme-generator/src/common/i18n/zh-CN.js b/packages/theme-generator/src/common/i18n/zh-CN.js
index 1f8aa16b..6f9d8040 100644
--- a/packages/theme-generator/src/common/i18n/zh-CN.js
+++ b/packages/theme-generator/src/common/i18n/zh-CN.js
@@ -1,7 +1,8 @@
 export default {
   copied: "已复制",
   dock: {
-    recommendTitle: "官方推荐",
+    officialRecommendation: "官方推荐",
+    customUpload: "自定义上传",
     adjustText: "主参数调节",
     recoverConfirm: "你确定恢复 TDesign 的默认主题吗?",
     downloadTips: "已下载当前主题配置文件",

From dd5ba85a2bdc5430fa978ef3ec63b954e6c8a2c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=98=BFCai?= <jimmyrss1102@gmail.com>
Date: Tue, 29 Oct 2024 16:07:49 +0800
Subject: [PATCH 2/4] =?UTF-8?q?feat(theme-generator):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/common/Themes/const.js                |   2 +-
 .../src/common/Themes/index.vue               | 103 +++++++++---------
 2 files changed, 50 insertions(+), 55 deletions(-)

diff --git a/packages/theme-generator/src/common/Themes/const.js b/packages/theme-generator/src/common/Themes/const.js
index 7e0a4dc6..dab26194 100644
--- a/packages/theme-generator/src/common/Themes/const.js
+++ b/packages/theme-generator/src/common/Themes/const.js
@@ -72,7 +72,7 @@ export const RECOMMEND_THEMES = [
       {
         name: "自定义上传",
         enName: 'Custom Upload',
-        subtitle: GovService,
+        subtitle: TencentSafe,
         value: "#623BFF",
       }
     ]
diff --git a/packages/theme-generator/src/common/Themes/index.vue b/packages/theme-generator/src/common/Themes/index.vue
index d8c49ec3..d59b3e6a 100644
--- a/packages/theme-generator/src/common/Themes/index.vue
+++ b/packages/theme-generator/src/common/Themes/index.vue
@@ -8,14 +8,10 @@
     </div>
 
     <div class="recommend-theme__flex" v-if="recommendThemes[selectedThemeModel].id === 'CUSTOM'">
-      <div v-for="(theme, themeIdx) in recommendThemesOptions" :key="themeIdx">
-        <t-upload v-if="recommendThemesOptions.length - 1 === themeIdx" :request-method="requestMethod"
-          :show-upload-progress="false" :before-upload="uploadNewTheme">
-          <template #fileListDisplay>
-            <span />
-          </template>
-          <div class="recommend-theme__flex-theme" :style="{
-            'background-color': theme.value,
+      <div v-for="(theme, themeIdx) in customUploadTheme" :key="themeIdx">
+        <div>
+          <div class="recommend-theme__flex-theme" @click="generateUploadTheme(theme)" :style="{
+            'background-color': '#0052D9',
           }">
             <div v-html="theme.subtitle" />
             <div v-if="currentTheme && currentTheme.value === theme.value" class="recommend-theme__flex-theme--active">
@@ -23,33 +19,42 @@
             </div>
           </div>
           <p :style="{
-            margin: '4px 0',
+            'margin': '4px 0',
             'text-align': 'center',
             'font-size': '12px',
             'line-height': '20px',
+            'width': '78px',
+            'white-space': 'nowrap',
+            'overflow': 'hidden',
+            'text-overflow': 'ellipsis',
           }">
-            {{ isEn ? theme.enName : theme.name }}
-          </p>
-        </t-upload>
-        <div v-else>
-          <div class="recommend-theme__flex-theme" @click="generateNewTheme(theme)" :style="{
-            'background-color': theme.value,
-          }">
-            <div v-html="theme.subtitle" />
-            <div v-if="currentTheme && currentTheme.value === theme.value" class="recommend-theme__flex-theme--active">
-              <picked-svg />
-            </div>
-          </div>
-          <p :style="{
-            margin: '4px 0',
-            'text-align': 'center',
-            'font-size': '12px',
-            'line-height': '20px',
-          }">
-            {{ isEn ? theme.enName : theme.name }}
+            {{ theme.name }}
           </p>
         </div>
       </div>
+      <t-upload v-if="customUploadTheme.length < 4" :request-method="requestMethod" :show-upload-progress="false"
+        :before-upload="uploadNewTheme" accept="text/css">
+        <template #fileListDisplay>
+          <span />
+        </template>
+        <div class="recommend-theme__flex-theme" :style="{
+          'background-color': recommendThemesOptions[0].value,
+        }">
+          <div v-html="recommendThemesOptions[0].subtitle" />
+          <div v-if="currentTheme && currentTheme.value === recommendThemesOptions[0].value"
+            class="recommend-theme__flex-theme--active">
+            <picked-svg />
+          </div>
+        </div>
+        <p :style="{
+          margin: '4px 0',
+          'text-align': 'center',
+          'font-size': '12px',
+          'line-height': '20px',
+        }">
+          {{ isEn ? recommendThemesOptions[0].enName : recommendThemesOptions[0].name }}
+        </p>
+      </t-upload>
     </div>
 
     <div class="recommend-theme__flex" v-else>
@@ -78,7 +83,8 @@
 <script>
 import { Upload as TUpload, MessagePlugin } from "tdesign-vue";
 import { RECOMMEND_THEMES } from "./const";
-import { generateNewTheme, appendStyleSheet } from "../utils";
+import TencentSafe from "!raw-loader!./svg/TencentSafe";
+import { generateNewTheme } from "../utils";
 import PickedSvg from "./PickedSvg.vue";
 import langMixin from "../i18n/mixin";
 
@@ -98,20 +104,11 @@ export default {
       selectedThemeModel: 0,
       uploadMethod: 'requestSuccessMethod',
       uploadThemeFile: [],
-      customUploadTheme: [
-        {
-          name: "占位测试",
-          subtitle: null,
-          value: "#133BFF",
-        }
-      ],
+      customUploadTheme: [],
     };
   },
   computed: {
     recommendThemesOptions() {
-      if (this.recommendThemes[this.selectedThemeModel].id === 'CUSTOM') {
-        return [...this.customUploadTheme, ...this.recommendThemes[this.selectedThemeModel].options];
-      }
       return this.recommendThemes[this.selectedThemeModel].options;
     },
     requestMethod() {
@@ -144,31 +141,29 @@ export default {
       generateNewTheme(theme.value);
       this.$emit("changeTabTheme", theme);
     },
+    generateUploadTheme(theme) {
+      document.getElementById('custom-theme').innerText = theme.theme;
+      this.$emit("changeTabTheme", theme);
+    },
     selectThemeModel(idx) {
       this.selectedThemeModel = idx;
     },
     uploadNewTheme(file) {
-      console.log('todo', file);
-      // 读取文件
       const fileReader = new FileReader();
       fileReader.readAsText(file.raw);
       fileReader.onload = (e) => {
         const theme = e.target.result;
-        console.log('文件内容');
-        const themeId = `custom-theme-${this.customUploadTheme.length}`;
-        const existSheet = document.getElementById(themeId);
-        if (!existSheet) {
-          const styleSheet = document.createElement('style');
-          styleSheet.id = themeId;
-          styleSheet.type = 'text/css';
-          styleSheet.textContent = theme;
-          document.head.appendChild(styleSheet);
-        }
-
-        document.documentElement.setAttribute('theme-color', themeId);
+        const themeId = file.name.split('.')[0];
 
+        let themeMap = new Map(this.customUploadTheme.map(item => [item.name, item]));
+        themeMap.set(themeId, {
+          name: themeId,
+          value: themeId,
+          theme: theme,
+          subtitle: TencentSafe,
+        });
+        this.customUploadTheme = Array.from(themeMap.values());
       };
-      // todo上传多个文件
       return false;
     },
   },

From dda5145f2b54959576587fc59b88e5bf7effbaa0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=98=BFCai?= <jimmyrss1102@gmail.com>
Date: Wed, 30 Oct 2024 18:48:42 +0800
Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=E5=B0=9D=E8=AF=95=E7=BC=93?=
 =?UTF-8?q?=E5=AD=98theme?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/common/Themes/const.js                |  37 +++--
 .../src/common/Themes/index.vue               | 155 ++++++++++++------
 2 files changed, 129 insertions(+), 63 deletions(-)

diff --git a/packages/theme-generator/src/common/Themes/const.js b/packages/theme-generator/src/common/Themes/const.js
index dab26194..de03e99e 100644
--- a/packages/theme-generator/src/common/Themes/const.js
+++ b/packages/theme-generator/src/common/Themes/const.js
@@ -65,18 +65,18 @@ export const RECOMMEND_THEMES = [
       // },
     ],
   },
-  {
-    id: "CUSTOM",
-    title: "customUpload",
-    options: [
-      {
-        name: "自定义上传",
-        enName: 'Custom Upload',
-        subtitle: TencentSafe,
-        value: "#623BFF",
-      }
-    ]
-  }
+  // {
+  //   id: "CUSTOM",
+  //   title: "customUpload",
+  //   options: [
+  //     {
+  //       name: "自定义上传",
+  //       enName: 'Custom Upload',
+  //       subtitle: TencentSafe,
+  //       value: "#623BFF",
+  //     }
+  //   ]
+  // }
   // {
   //   title: "业务推荐",
   //   options: [
@@ -99,3 +99,16 @@ export const RECOMMEND_THEMES = [
   //   ],
   // },
 ];
+
+export const UPLOAD_THEMES = {
+  id: "CUSTOM",
+  title: "customUpload",
+  options: [
+    {
+      name: "自定义上传",
+      enName: 'Custom Upload',
+      subtitle: TencentSafe,
+      value: "#623BFF",
+    }
+  ]
+}
\ No newline at end of file
diff --git a/packages/theme-generator/src/common/Themes/index.vue b/packages/theme-generator/src/common/Themes/index.vue
index d59b3e6a..b21aba4a 100644
--- a/packages/theme-generator/src/common/Themes/index.vue
+++ b/packages/theme-generator/src/common/Themes/index.vue
@@ -1,13 +1,33 @@
 <template>
   <div class="recommend-theme">
     <div class="recommend-theme__title-group">
-      <div :key="idx" v-for="(type, idx) in recommendThemes" class="recommend-theme__title"
-        @click="selectThemeModel(idx)" :style="{ 'font-weight': selectedThemeModel === idx ? 'bold' : 'normal' }">
+      <div :key="idx" v-for="(type, idx) in [...recommendThemes, upload_themes]" class="recommend-theme__title"
+        @click="selectThemeModel(type.id)"
+        :style="{ 'font-weight': selectedThemeModel === type.id ? 'bold' : 'normal' }">
         {{ lang.dock[type.title] }}
       </div>
     </div>
-
-    <div class="recommend-theme__flex" v-if="recommendThemes[selectedThemeModel].id === 'CUSTOM'">
+    <div class="recommend-theme__flex" v-if="selectedThemeModel !== 'CUSTOM'">
+      <div v-for="(theme, themeIdx) in recommendThemesOptions" :key="themeIdx" @click="generateNewTheme(theme)">
+        <div class="recommend-theme__flex-theme" :style="{
+          'background-color': theme.value,
+        }">
+          <div v-html="theme.subtitle" />
+          <div v-if="currentTheme && currentTheme.value === theme.value" class="recommend-theme__flex-theme--active">
+            <picked-svg />
+          </div>
+        </div>
+        <p :style="{
+          margin: '4px 0',
+          'text-align': 'center',
+          'font-size': '12px',
+          'line-height': '20px',
+        }">
+          {{ isEn ? theme.enName : theme.name }}
+        </p>
+      </div>
+    </div>
+    <div class="recommend-theme__flex" v-else>
       <div v-for="(theme, themeIdx) in customUploadTheme" :key="themeIdx">
         <div>
           <div class="recommend-theme__flex-theme" @click="generateUploadTheme(theme)" :style="{
@@ -38,10 +58,10 @@
           <span />
         </template>
         <div class="recommend-theme__flex-theme" :style="{
-          'background-color': recommendThemesOptions[0].value,
+          'background-color': upload_themes.options[0].value,
         }">
-          <div v-html="recommendThemesOptions[0].subtitle" />
-          <div v-if="currentTheme && currentTheme.value === recommendThemesOptions[0].value"
+          <div v-html="upload_themes.options[0].subtitle" />
+          <div v-if="currentTheme && currentTheme.value === upload_themes.options[0].value"
             class="recommend-theme__flex-theme--active">
             <picked-svg />
           </div>
@@ -52,41 +72,21 @@
           'font-size': '12px',
           'line-height': '20px',
         }">
-          {{ isEn ? recommendThemesOptions[0].enName : recommendThemesOptions[0].name }}
+          {{ isEn ? upload_themes.options[0].enName : upload_themes.options[0].name }}
         </p>
       </t-upload>
     </div>
-
-    <div class="recommend-theme__flex" v-else>
-      <div v-for="(theme, themeIdx) in recommendThemesOptions" :key="themeIdx" @click="generateNewTheme(theme)">
-        <div class="recommend-theme__flex-theme" :style="{
-          'background-color': theme.value,
-        }">
-          <div v-html="theme.subtitle" />
-          <div v-if="currentTheme && currentTheme.value === theme.value" class="recommend-theme__flex-theme--active">
-            <picked-svg />
-          </div>
-        </div>
-        <p :style="{
-          margin: '4px 0',
-          'text-align': 'center',
-          'font-size': '12px',
-          'line-height': '20px',
-        }">
-          {{ isEn ? theme.enName : theme.name }}
-        </p>
-      </div>
-    </div>
   </div>
 </template>
 
 <script>
 import { Upload as TUpload, MessagePlugin } from "tdesign-vue";
-import { RECOMMEND_THEMES } from "./const";
+import { RECOMMEND_THEMES, UPLOAD_THEMES } from "./const";
 import TencentSafe from "!raw-loader!./svg/TencentSafe";
 import { generateNewTheme } from "../utils";
 import PickedSvg from "./PickedSvg.vue";
 import langMixin from "../i18n/mixin";
+import { builtInThemeMap } from '../built-in/theme-map';
 
 export default {
   emit: ["changeTabTheme"],
@@ -99,9 +99,10 @@ export default {
     return {
       MessagePlugin,
       recommendThemes: RECOMMEND_THEMES,
+      upload_themes: UPLOAD_THEMES,
       isThemeTabVisible: false,
       isDrawerVisible: false,
-      selectedThemeModel: 0,
+      selectedThemeModel: 'OFFICIAL',
       uploadMethod: 'requestSuccessMethod',
       uploadThemeFile: [],
       customUploadTheme: [],
@@ -109,7 +110,7 @@ export default {
   },
   computed: {
     recommendThemesOptions() {
-      return this.recommendThemes[this.selectedThemeModel].options;
+      return this.recommendThemes.find(i => i.id === this.selectedThemeModel)?.options;
     },
     requestMethod() {
       return {
@@ -118,19 +119,73 @@ export default {
       }[this.uploadMethod];
     },
   },
+  mounted() {
+    this.createCacheCssLocal();
+  },
   methods: {
-    // file 为等待上传的文件信息，用于提供给上传接口。file.raw 表示原始文件
-    requestSuccessMethod(file /** UploadFile */) {
+    createCacheCssLocal() {
+      const localCustomThemes = localStorage.getItem('customThemes');
+      const localThemesArr = JSON.parse(localCustomThemes) ?? [];
+
+      this.recommendThemes.forEach((item) => {
+        const currentTypeIndex = localThemesArr.findIndex(type => type.id === item.id);
+
+        if (currentTypeIndex !== -1) {
+          item.options.forEach((option) => {
+            const currentThemeIndex = localThemesArr[currentTypeIndex].options.findIndex(theme => theme.value === option.value);
+            const themeCss = builtInThemeMap[option.value];
+
+            if (currentThemeIndex !== -1) {
+              localThemesArr[currentTypeIndex].options[currentThemeIndex].theme = themeCss;
+            } else {
+              localThemesArr[currentTypeIndex].options.push({
+                value: option.value,
+                theme: themeCss,
+              });
+            }
+          });
+        } else {
+          const themes = item.options.map((option) => {
+            return {
+              value: option.value,
+              theme: builtInThemeMap[option.value],
+            }
+          });
+          localThemesArr.push({
+            id: item.id,
+            options: themes,
+          });
+        }
+      });
+      localStorage.setItem('customThemes', JSON.stringify(localThemesArr));
+    },
+    updateCacheCssLocal(id, value, theme) {
+      const localCustomThemes = localStorage.getItem('customThemes');
+      let localThemesArr = JSON.parse(localCustomThemes) ?? [];
+
+      const currentTypeIndex = localThemesArr?.findIndex(item => item.id === id);
+
+      if (currentTypeIndex === -1) {
+        localThemesArr.push({ id: id, options: [] });
+      }
+
+      const currentOption = localThemesArr[localThemesArr.length - 1].options;
+      const currentThemeIndex = currentOption.findIndex(item => item.value === value);
+      if (currentThemeIndex !== -1) {
+        currentOption[currentThemeIndex].theme = theme;
+      } else {
+        currentOption.push({ value: value, theme: theme });
+      }
+      localStorage.setItem('customThemes', JSON.stringify(localThemesArr));
+    },
+    requestSuccessMethod(file) {
       return new Promise((resolve) => {
-        // 控制上传进度
-        //todo 这里要变成数组
         MessagePlugin.success('上传成功');
         this.uploadThemeFile.push(file);
         resolve({ status: 'success', response: { files: [...this.uploadThemeFile, file] } });
       });
     },
-    requestFailMethod(file /** UploadFile */) {
-      console.log(file);
+    requestFailMethod(file) {
       return new Promise((resolve) => {
         // resolve 参数为关键代码
         MessagePlugin.error('上传失败，请检查文件是否符合规范');
@@ -145,8 +200,8 @@ export default {
       document.getElementById('custom-theme').innerText = theme.theme;
       this.$emit("changeTabTheme", theme);
     },
-    selectThemeModel(idx) {
-      this.selectedThemeModel = idx;
+    selectThemeModel(id) {
+      this.selectedThemeModel = id;
     },
     uploadNewTheme(file) {
       const fileReader = new FileReader();
@@ -154,22 +209,20 @@ export default {
       fileReader.onload = (e) => {
         const theme = e.target.result;
         const themeId = file.name.split('.')[0];
+        this.updateCacheCssLocal('CUSTOM', themeId, theme);
 
-        let themeMap = new Map(this.customUploadTheme.map(item => [item.name, item]));
-        themeMap.set(themeId, {
-          name: themeId,
-          value: themeId,
-          theme: theme,
-          subtitle: TencentSafe,
-        });
-        this.customUploadTheme = Array.from(themeMap.values());
+        // let themeMap = new Map(this.customUploadTheme.map(item => [item.name, item]));
+        // themeMap.set(themeId, {
+        //   name: themeId,
+        //   value: themeId,
+        //   theme: theme,
+        //   subtitle: TencentSafe,
+        // });
+        // this.customUploadTheme = Array.from(themeMap.values());
       };
       return false;
     },
   },
-  mounted() {
-    this.selectThemeModel(this.selectedThemeModel);
-  },
 };
 </script>
 

From ecba89b38f6a89ce55e5c755b3c6e7b01687083a Mon Sep 17 00:00:00 2001
From: v_sshuairen <v_sshuairen@tencent.com>
Date: Wed, 13 Nov 2024 14:58:06 +0800
Subject: [PATCH 4/4] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=AF=B9?=
 =?UTF-8?q?=E4=BA=8E=E7=BC=93=E5=AD=98css=E7=9A=84=E8=AF=BB=E5=8F=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/common/Themes/const.js                |  26 ++-
 .../src/common/Themes/index.vue               | 221 +++++++++---------
 .../theme-generator/src/common/utils/index.js |   1 +
 packages/theme-generator/src/dock/index.vue   |   2 +-
 4 files changed, 124 insertions(+), 126 deletions(-)

diff --git a/packages/theme-generator/src/common/Themes/const.js b/packages/theme-generator/src/common/Themes/const.js
index de03e99e..855a4ba6 100644
--- a/packages/theme-generator/src/common/Themes/const.js
+++ b/packages/theme-generator/src/common/Themes/const.js
@@ -10,14 +10,22 @@ import TencentHealthcare from "!raw-loader!./svg/TencentHealthcare";
 import TencentGames from "!raw-loader!./svg/TencentGames";
 import TencentSafe from "!raw-loader!./svg/TencentSafe";
 
+// export const UPLOAD_LIMIT_EXCEEDED_MESSAGE = {
+//   en: "Upload limit exceeded",
+//   zh: "超过上传数量"
+// };
+
 export const defaultTheme = {
+  id: "DEFAULT",
   name: "默认主题",
   enName: 'TDesign',
   subtitle: TDesignOriginal,
   subtitleText: 'TDesign Original',
+  subBgColor: '#0052D9',
   value: "#0052D9",
 };
 
+/** 确保 id,title  唯一 */
 export const RECOMMEND_THEMES = [
   {
     id: "OFFICIAL",
@@ -29,6 +37,7 @@ export const RECOMMEND_THEMES = [
         enName: 'TCloud',
         subtitle: TencentCloud,
         subtitleText: 'Tencent Cloud',
+        subBgColor: '#006EFF',
         value: "#006EFF",
       },
       // {
@@ -103,12 +112,13 @@ export const RECOMMEND_THEMES = [
 export const UPLOAD_THEMES = {
   id: "CUSTOM",
   title: "customUpload",
-  options: [
-    {
-      name: "自定义上传",
-      enName: 'Custom Upload',
-      subtitle: TencentSafe,
-      value: "#623BFF",
-    }
-  ]
+  options: {
+    id: "CUSTOM",
+    name: "自定义上传",
+    enName: 'Custom Upload',
+    subtitle: TencentSafe,
+    subtitleText: 'Tencent Cloud',
+    subBgColor: '#623BFF',
+    value: "#623BFF",
+  }
 }
\ No newline at end of file
diff --git a/packages/theme-generator/src/common/Themes/index.vue b/packages/theme-generator/src/common/Themes/index.vue
index b21aba4a..47ab111e 100644
--- a/packages/theme-generator/src/common/Themes/index.vue
+++ b/packages/theme-generator/src/common/Themes/index.vue
@@ -1,37 +1,19 @@
 <template>
   <div class="recommend-theme">
+
     <div class="recommend-theme__title-group">
-      <div :key="idx" v-for="(type, idx) in [...recommendThemes, upload_themes]" class="recommend-theme__title"
+      <div :key="idx" v-for="(type, idx) in recommendThemes" class="recommend-theme__title"
         @click="selectThemeModel(type.id)"
-        :style="{ 'font-weight': selectedThemeModel === type.id ? 'bold' : 'normal' }">
+        :style="{ 'font-weight': selectedThemeModelId === type.id ? 'bold' : 'normal' }">
         {{ lang.dock[type.title] }}
       </div>
     </div>
-    <div class="recommend-theme__flex" v-if="selectedThemeModel !== 'CUSTOM'">
-      <div v-for="(theme, themeIdx) in recommendThemesOptions" :key="themeIdx" @click="generateNewTheme(theme)">
-        <div class="recommend-theme__flex-theme" :style="{
-          'background-color': theme.value,
-        }">
-          <div v-html="theme.subtitle" />
-          <div v-if="currentTheme && currentTheme.value === theme.value" class="recommend-theme__flex-theme--active">
-            <picked-svg />
-          </div>
-        </div>
-        <p :style="{
-          margin: '4px 0',
-          'text-align': 'center',
-          'font-size': '12px',
-          'line-height': '20px',
-        }">
-          {{ isEn ? theme.enName : theme.name }}
-        </p>
-      </div>
-    </div>
-    <div class="recommend-theme__flex" v-else>
-      <div v-for="(theme, themeIdx) in customUploadTheme" :key="themeIdx">
-        <div>
-          <div class="recommend-theme__flex-theme" @click="generateUploadTheme(theme)" :style="{
-            'background-color': '#0052D9',
+
+    <div :key="idx" v-for="(type, idx) in recommendThemes">
+      <div class="recommend-theme__flex" v-if="type.id === selectedThemeModelId">
+        <div v-for="(theme, themeIdx) in type.options" :key="themeIdx" @click=" generateNewTheme(theme)">
+          <div class="recommend-theme__flex-theme" :style="{
+            'background-color': theme?.subBgColor || uploadThemesConfig.options.subBgColor,
           }">
             <div v-html="theme.subtitle" />
             <div v-if="currentTheme && currentTheme.value === theme.value" class="recommend-theme__flex-theme--active">
@@ -48,42 +30,37 @@
             'overflow': 'hidden',
             'text-overflow': 'ellipsis',
           }">
-            {{ theme.name }}
+            {{ isEn ? theme.enName : theme.name }}
           </p>
         </div>
-      </div>
-      <t-upload v-if="customUploadTheme.length < 4" :request-method="requestMethod" :show-upload-progress="false"
-        :before-upload="uploadNewTheme" accept="text/css">
-        <template #fileListDisplay>
-          <span />
-        </template>
-        <div class="recommend-theme__flex-theme" :style="{
-          'background-color': upload_themes.options[0].value,
-        }">
-          <div v-html="upload_themes.options[0].subtitle" />
-          <div v-if="currentTheme && currentTheme.value === upload_themes.options[0].value"
-            class="recommend-theme__flex-theme--active">
-            <picked-svg />
+
+        <t-upload v-if="type.id === uploadThemesConfig.id" :show-upload-progress="false" :before-upload="uploadNewTheme"
+          accept="text/css">
+          <template #fileListDisplay>
+            <span />
+          </template>
+          <div class="recommend-theme__flex-theme" :style="{
+            'background-color': '#0052D9',
+          }">
+            <div v-html="uploadThemesConfig.options.subtitle" />
           </div>
-        </div>
-        <p :style="{
-          margin: '4px 0',
-          'text-align': 'center',
-          'font-size': '12px',
-          'line-height': '20px',
-        }">
-          {{ isEn ? upload_themes.options[0].enName : upload_themes.options[0].name }}
-        </p>
-      </t-upload>
+          <p :style="{
+            margin: '4px 0',
+            'text-align': 'center',
+            'font-size': '12px',
+            'line-height': '20px',
+          }">
+            {{ isEn ? uploadThemesConfig.options.enName : uploadThemesConfig.options.name }}
+          </p>
+        </t-upload>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import { Upload as TUpload, MessagePlugin } from "tdesign-vue";
-import { RECOMMEND_THEMES, UPLOAD_THEMES } from "./const";
-import TencentSafe from "!raw-loader!./svg/TencentSafe";
-import { generateNewTheme } from "../utils";
+import { RECOMMEND_THEMES, UPLOAD_THEMES, UPLOAD_LIMIT_EXCEEDED_MESSAGE } from "./const";
 import PickedSvg from "./PickedSvg.vue";
 import langMixin from "../i18n/mixin";
 import { builtInThemeMap } from '../built-in/theme-map';
@@ -98,25 +75,17 @@ export default {
   data() {
     return {
       MessagePlugin,
-      recommendThemes: RECOMMEND_THEMES,
-      upload_themes: UPLOAD_THEMES,
+      recommendThemesConfig: RECOMMEND_THEMES,
+      uploadThemesConfig: UPLOAD_THEMES,
+      recommendThemes: [],
       isThemeTabVisible: false,
       isDrawerVisible: false,
-      selectedThemeModel: 'OFFICIAL',
-      uploadMethod: 'requestSuccessMethod',
-      uploadThemeFile: [],
-      customUploadTheme: [],
+      selectedThemeModelId: 'OFFICIAL',
     };
   },
   computed: {
     recommendThemesOptions() {
-      return this.recommendThemes.find(i => i.id === this.selectedThemeModel)?.options;
-    },
-    requestMethod() {
-      return {
-        requestSuccessMethod: this.requestSuccessMethod,
-        requestFailMethod: this.requestFailMethod,
-      }[this.uploadMethod];
+      return this.recommendThemesConfig.find(i => i.id === this.selectedThemeModelId)?.options;
     },
   },
   mounted() {
@@ -127,98 +96,116 @@ export default {
       const localCustomThemes = localStorage.getItem('customThemes');
       const localThemesArr = JSON.parse(localCustomThemes) ?? [];
 
-      this.recommendThemes.forEach((item) => {
+      this.recommendThemesConfig.forEach((item) => {
         const currentTypeIndex = localThemesArr.findIndex(type => type.id === item.id);
 
-        if (currentTypeIndex !== -1) {
-          item.options.forEach((option) => {
-            const currentThemeIndex = localThemesArr[currentTypeIndex].options.findIndex(theme => theme.value === option.value);
-            const themeCss = builtInThemeMap[option.value];
+        if (currentTypeIndex === -1) {
 
-            if (currentThemeIndex !== -1) {
-              localThemesArr[currentTypeIndex].options[currentThemeIndex].theme = themeCss;
-            } else {
-              localThemesArr[currentTypeIndex].options.push({
-                value: option.value,
-                theme: themeCss,
-              });
-            }
-          });
-        } else {
           const themes = item.options.map((option) => {
             return {
+              name: option.name,
+              enName: option.enName,
+              subtitle: option.subtitle,
+              subtitleText: option.subtitleText,
+              subBgColor: option.subBgColor,
               value: option.value,
               theme: builtInThemeMap[option.value],
             }
           });
           localThemesArr.push({
             id: item.id,
+            title: item.title,
             options: themes,
           });
+        } else {
+          item.options.forEach((option) => {
+            const currentThemeIndex = localThemesArr[currentTypeIndex].options.findIndex(theme => theme.value === option.value);
+            const themeCss = builtInThemeMap[option.value];
+            if (currentThemeIndex === -1) {
+              localThemesArr[currentTypeIndex].options.push({
+                name: option.name,
+                enName: option.enName,
+                subtitle: option.subtitle,
+                subBgColor: option.subBgColor,
+                subtitleText: option.subtitleText,
+                value: option.value,
+                theme: themeCss,
+              });
+            } else {
+              localThemesArr[currentTypeIndex].options[currentThemeIndex].theme = themeCss;
+            }
+          });
         }
       });
+
+      const uploadThemes = localThemesArr.find(item => item.id === this.uploadThemesConfig.id);
+      if (!uploadThemes) {
+        localThemesArr.push({
+          id: this.uploadThemesConfig.id,
+          title: this.uploadThemesConfig.title,
+          options: [],
+        });
+      }
+
+      // 初始化主题选择
+      this.recommendThemes = localThemesArr;
       localStorage.setItem('customThemes', JSON.stringify(localThemesArr));
     },
-    updateCacheCssLocal(id, value, theme) {
+    updateCacheCssLocal(id, title, option) {
       const localCustomThemes = localStorage.getItem('customThemes');
       let localThemesArr = JSON.parse(localCustomThemes) ?? [];
 
       const currentTypeIndex = localThemesArr?.findIndex(item => item.id === id);
 
       if (currentTypeIndex === -1) {
-        localThemesArr.push({ id: id, options: [] });
+        localThemesArr.push({
+          id,
+          title,
+          options: []
+        });
       }
 
       const currentOption = localThemesArr[localThemesArr.length - 1].options;
-      const currentThemeIndex = currentOption.findIndex(item => item.value === value);
-      if (currentThemeIndex !== -1) {
-        currentOption[currentThemeIndex].theme = theme;
+      const currentThemeIndex = currentOption.findIndex(item => item.value === option?.value);
+
+      if (currentThemeIndex === -1) {
+        currentOption.push(option);
       } else {
-        currentOption.push({ value: value, theme: theme });
+        currentOption[currentThemeIndex] = option;
       }
+
+      this.recommendThemes = localThemesArr;
       localStorage.setItem('customThemes', JSON.stringify(localThemesArr));
     },
-    requestSuccessMethod(file) {
-      return new Promise((resolve) => {
-        MessagePlugin.success('上传成功');
-        this.uploadThemeFile.push(file);
-        resolve({ status: 'success', response: { files: [...this.uploadThemeFile, file] } });
-      });
-    },
-    requestFailMethod(file) {
-      return new Promise((resolve) => {
-        // resolve 参数为关键代码
-        MessagePlugin.error('上传失败，请检查文件是否符合规范');
-        resolve({ status: 'fail', error: '上传失败，请检查文件是否符合规范' });
-      });
-    },
     generateNewTheme(theme) {
-      generateNewTheme(theme.value);
-      this.$emit("changeTabTheme", theme);
-    },
-    generateUploadTheme(theme) {
       document.getElementById('custom-theme').innerText = theme.theme;
       this.$emit("changeTabTheme", theme);
     },
     selectThemeModel(id) {
-      this.selectedThemeModel = id;
+      this.selectedThemeModelId = id;
     },
     uploadNewTheme(file) {
+      const uploadThemes = this.recommendThemes.find(item => item.id === this.uploadThemesConfig.id);
+      if (uploadThemes.options.length > 3) {
+        //后续改为横向 scroll 滚动展示,可以提高上传数量
+        MessagePlugin.success("超过上传数量限制,最大上传数量为3个");
+        return false;
+      }
+
       const fileReader = new FileReader();
       fileReader.readAsText(file.raw);
       fileReader.onload = (e) => {
         const theme = e.target.result;
         const themeId = file.name.split('.')[0];
-        this.updateCacheCssLocal('CUSTOM', themeId, theme);
-
-        // let themeMap = new Map(this.customUploadTheme.map(item => [item.name, item]));
-        // themeMap.set(themeId, {
-        //   name: themeId,
-        //   value: themeId,
-        //   theme: theme,
-        //   subtitle: TencentSafe,
-        // });
-        // this.customUploadTheme = Array.from(themeMap.values());
+        this.updateCacheCssLocal(this.uploadThemesConfig.id, this.uploadThemesConfig.title, {
+          name: themeId,
+          enName: themeId,
+          subtitle: this.uploadThemesConfig.options.subtitle,
+          subtitleText: this.uploadThemesConfig.options.subtitleText,
+          subBgColor: this.uploadThemesConfig.options.subBgColor,
+          value: themeId,
+          theme: theme,
+        });
       };
       return false;
     },
diff --git a/packages/theme-generator/src/common/utils/index.js b/packages/theme-generator/src/common/utils/index.js
index 65ae7ffd..c349dc1c 100644
--- a/packages/theme-generator/src/common/utils/index.js
+++ b/packages/theme-generator/src/common/utils/index.js
@@ -42,6 +42,7 @@ export function appendStyleSheet(themeId) {
 }
 
 // generator new theme variables and insert into document
+/** @deprecated */
 export function generateNewTheme(hex, remainInput = true) {
   // hex 主题色
   let styleSheet = appendStyleSheet(customTheme);
diff --git a/packages/theme-generator/src/dock/index.vue b/packages/theme-generator/src/dock/index.vue
index 963ef98d..0c791711 100644
--- a/packages/theme-generator/src/dock/index.vue
+++ b/packages/theme-generator/src/dock/index.vue
@@ -46,7 +46,7 @@
             <template #icon>
               <palette-svg />
             </template>
-            <div v-if="!isCustomizeDrawerVisible" style="margin-left: 8px">
+            <div v-if="!isCustomizeDrawerVisible" style="margin-left: 8px; width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
               {{ isEn ? currentTheme.enName : currentTheme.name }}
             </div>
           </t-button>