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..855a4ba6 100644
--- a/packages/theme-generator/src/common/Themes/const.js
+++ b/packages/theme-generator/src/common/Themes/const.js
@@ -10,24 +10,34 @@ 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',
+  enName: 'TDesign',
   subtitle: TDesignOriginal,
-  subtitleText:'TDesign Original',
+  subtitleText: 'TDesign Original',
+  subBgColor: '#0052D9',
   value: "#0052D9",
 };
 
+/** 确保 id,title  唯一 */
 export const RECOMMEND_THEMES = [
   {
-    title: "官方推荐",
+    id: "OFFICIAL",
+    title: "officialRecommendation",
     options: [
       defaultTheme,
       {
         name: "腾讯云",
-        enName:'TCloud',
+        enName: 'TCloud',
         subtitle: TencentCloud,
-        subtitleText:'Tencent Cloud',
+        subtitleText: 'Tencent Cloud',
+        subBgColor: '#006EFF',
         value: "#006EFF",
       },
       // {
@@ -65,6 +75,18 @@ export const RECOMMEND_THEMES = [
     ],
   },
   // {
+  //   id: "CUSTOM",
+  //   title: "customUpload",
+  //   options: [
+  //     {
+  //       name: "自定义上传",
+  //       enName: 'Custom Upload',
+  //       subtitle: TencentSafe,
+  //       value: "#623BFF",
+  //     }
+  //   ]
+  // }
+  // {
   //   title: "业务推荐",
   //   options: [
   //     {
@@ -86,3 +108,17 @@ export const RECOMMEND_THEMES = [
   //   ],
   // },
 ];
+
+export const UPLOAD_THEMES = {
+  id: "CUSTOM",
+  title: "customUpload",
+  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 dd17cd3e..47ab111e 100644
--- a/packages/theme-generator/src/common/Themes/index.vue
+++ b/packages/theme-generator/src/common/Themes/index.vue
@@ -1,72 +1,214 @@
 <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(type.id)"
+        :style="{ 'font-weight': selectedThemeModelId === type.id ? '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 :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"
-            >
+            <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',
+            'width': '78px',
+            'white-space': 'nowrap',
+            'overflow': 'hidden',
+            'text-overflow': 'ellipsis',
+          }">
             {{ isEn ? theme.enName : theme.name }}
           </p>
         </div>
+
+        <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>
+          <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 { RECOMMEND_THEMES } from "./const";
-import { generateNewTheme } from "../utils";
+import { Upload as TUpload, MessagePlugin } from "tdesign-vue";
+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';
 
 export default {
   emit: ["changeTabTheme"],
   props: {
     currentTheme: Object,
   },
+  components: { PickedSvg, TUpload },
   mixins: [langMixin],
   data() {
     return {
-      recommendThemes: RECOMMEND_THEMES,
+      MessagePlugin,
+      recommendThemesConfig: RECOMMEND_THEMES,
+      uploadThemesConfig: UPLOAD_THEMES,
+      recommendThemes: [],
       isThemeTabVisible: false,
       isDrawerVisible: false,
+      selectedThemeModelId: 'OFFICIAL',
     };
   },
-  components: {
-    PickedSvg,
+  computed: {
+    recommendThemesOptions() {
+      return this.recommendThemesConfig.find(i => i.id === this.selectedThemeModelId)?.options;
+    },
+  },
+  mounted() {
+    this.createCacheCssLocal();
   },
   methods: {
+    createCacheCssLocal() {
+      const localCustomThemes = localStorage.getItem('customThemes');
+      const localThemesArr = JSON.parse(localCustomThemes) ?? [];
+
+      this.recommendThemesConfig.forEach((item) => {
+        const currentTypeIndex = localThemesArr.findIndex(type => type.id === item.id);
+
+        if (currentTypeIndex === -1) {
+
+          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, 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,
+          title,
+          options: []
+        });
+      }
+
+      const currentOption = localThemesArr[localThemesArr.length - 1].options;
+      const currentThemeIndex = currentOption.findIndex(item => item.value === option?.value);
+
+      if (currentThemeIndex === -1) {
+        currentOption.push(option);
+      } else {
+        currentOption[currentThemeIndex] = option;
+      }
+
+      this.recommendThemes = localThemesArr;
+      localStorage.setItem('customThemes', JSON.stringify(localThemesArr));
+    },
     generateNewTheme(theme) {
-      generateNewTheme(theme.value);
+      document.getElementById('custom-theme').innerText = theme.theme;
       this.$emit("changeTabTheme", theme);
     },
+    selectThemeModel(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(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;
+    },
   },
 };
 </script>
@@ -76,6 +218,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 +260,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 +286,7 @@ export default {
       border-radius: 12px;
       position: relative;
       overflow: hidden;
+
       &--active {
         position: absolute;
         right: 0px;
@@ -147,5 +295,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: "已下载当前主题配置文件",
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>