Merge branch 'develop' of github.com:Tencent/tdesign-vue-next-starter…

… into main

.env

@@ -1,2 +1,5 @@
 # 打包路径 根据项目不同按需配置
 VITE_BASE_URL = /
+VITE_IS_REQUEST_PROXY = true
+VITE_API_URL = https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com
+VITE_API_URL_PREFIX = /api

.env.development

@@ -1,2 +1,5 @@
 # 打包路径
 VITE_BASE_URL = /
+VITE_IS_REQUEST_PROXY = true
+VITE_API_URL = https://service-exndqyuk-1257786608.gz.apigw.tencentcs.com
+VITE_API_URL_PREFIX = /api

.env.site

@@ -1,2 +1,5 @@
 # 打包路径 根据项目不同按需配置
 VITE_BASE_URL = https://static.tdesign.tencent.com/starter/vue-next/
+VITE_IS_REQUEST_PROXY = true
+VITE_API_URL = https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com
+VITE_API_URL_PREFIX = /api

.env.test

@@ -0,0 +1,5 @@
+# 打包路径 根据项目不同按需配置
+VITE_BASE_URL = /
+VITE_IS_REQUEST_PROXY = true
+VITE_API_URL = https://service-exndqyuk-1257786608.gz.apigw.tencentcs.com
+VITE_API_URL_PREFIX = /api

.gitignore

@@ -21,3 +21,5 @@ yarn-error.log
 yarn.lock
 package-lock.json
 pnpm-lock.yaml
+.env.local
+.env.*.local

.vscode/settings.json

@@ -21,5 +21,14 @@
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "dbaeumer.vscode-eslint"
   },
-  "cSpell.words": ["tdesign", "tvision", "echarts", "nprogress", "commitlint", "stylelint", "pinia", "qrcode"]
+  "cSpell.words": [
+    "tdesign",
+    "tvision",
+    "echarts",
+    "nprogress",
+    "commitlint",
+    "stylelint",
+    "pinia",
+    "qrcode"
+  ],
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tdesign-vue-next-starter",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "scripts": {
     "dev:mock": "vite --open --mode mock",
     "dev": "vite --open --mode development",

src/layouts/setting.vue

@@ -95,7 +95,6 @@
 import { ref, computed, onMounted, watchEffect } from 'vue';
 import { MessagePlugin } from 'tdesign-vue-next';
 import type { PopupVisibleChangeContext } from 'tdesign-vue-next';
-import { Color } from 'tvision-color';
 import useClipboard from 'vue-clipboard3';
 
 import { useSettingStore } from '@/store';
@@ -104,7 +103,6 @@ import ColorContainer from '@/components/color/index.vue';
 
 import STYLE_CONFIG from '@/config/style';
 import { DEFAULT_COLOR_OPTIONS } from '@/config/color';
-import { insertThemeStylesheet, generateColorMap } from '@/utils/color';
 
 import SettingDarkIcon from '@/assets/assets-setting-dark.svg';
 import SettingLightIcon from '@/assets/assets-setting-light.svg';
@@ -150,19 +148,7 @@ const showSettingPanel = computed({
 });
 
 const changeColor = (hex: string) => {
-  const { colors: newPalette, primary: brandColorIndex } = Color.getColorGradations({
-    colors: [hex],
-    step: 10,
-    remainInput: false, // 是否保留输入 不保留会矫正不合适的主题色
-  })[0];
-  const { mode } = settingStore;
-
-  const colorMap = generateColorMap(hex, newPalette, mode as 'light' | 'dark', brandColorIndex);
-
-  settingStore.addColor({ [hex]: colorMap });
   formData.value.brandTheme = hex;
-  settingStore.updateConfig({ ...formData.value, brandTheme: hex });
-  insertThemeStylesheet(hex, colorMap, mode as 'light' | 'dark');
 };
 
 onMounted(() => {

src/router/index.ts

@@ -4,10 +4,10 @@ import uniq from 'lodash/uniq';
 const env = import.meta.env.MODE || 'development';
 
 // 导入homepage相关固定路由
-const homepageModules = import.meta.globEager('./modules/**/homepage.ts');
+const homepageModules = import.meta.glob('./modules/**/homepage.ts', { eager: true });
 
 // 导入modules非homepage相关固定路由
-const fixedModules = import.meta.globEager('./modules/**/!(homepage).ts');
+const fixedModules = import.meta.glob('./modules/**/!(homepage).ts', { eager: true });
 
 // 其他固定路由
 const defaultRouterList: Array<RouteRecordRaw> = [

src/store/modules/setting.ts

@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia';
 import { Color } from 'tvision-color';
 import keys from 'lodash/keys';
-import { LIGHT_CHART_COLORS, DARK_CHART_COLORS, TColorSeries } from '@/config/color';
+import { LIGHT_CHART_COLORS, DARK_CHART_COLORS } from '@/config/color';
 import { insertThemeStylesheet, generateColorMap } from '@/utils/color';
 import STYLE_CONFIG from '@/config/style';
 import { store } from '@/store';
@@ -51,21 +51,24 @@ export const useSettingStore = defineStore('setting', {
       this.chartColors = isDarkMode ? DARK_CHART_COLORS : LIGHT_CHART_COLORS;
     },
     changeBrandTheme(brandTheme: string) {
-      const { colors: newPalette, primary: brandColorIndex } = Color.getColorGradations({
-        colors: [brandTheme],
-        step: 10,
-        remainInput: false, // 是否保留输入 不保留会矫正不合适的主题色
-      })[0];
-      const { mode } = this;
-      const colorMap = generateColorMap(brandTheme, newPalette, mode as 'light' | 'dark', brandColorIndex);
-
+      const mode = this.displayMode;
+      // 以主题色加显示模式作为键
+      const colorKey = `${brandTheme}[${mode}]`;
+      let colorMap = this.colorList[colorKey];
+      // 如果不存在色阶，就需要计算
+      if (colorMap === undefined) {
+        const [{ colors: newPalette, primary: brandColorIndex }] = Color.getColorGradations({
+          colors: [brandTheme],
+          step: 10,
+          remainInput: false, // 是否保留输入 不保留会矫正不合适的主题色
+        });
+        colorMap = generateColorMap(brandTheme, newPalette, mode as 'light' | 'dark', brandColorIndex);
+        this.colorList[colorKey] = colorMap;
+      }
+      // TODO 需要解决不停切换时有反复插入 style 的问题
       insertThemeStylesheet(brandTheme, colorMap, mode as 'light' | 'dark');
-
       document.documentElement.setAttribute('theme-color', brandTheme);
     },
-    addColor(payload: TColorSeries) {
-      this.colorList = { ...this.colorList, ...payload };
-    },
     updateConfig(payload: Partial<TState>) {
       for (const key in payload) {
         if (payload[key] !== undefined) {

src/types/env.d.ts

@@ -0,0 +1,5 @@
+export interface ImportMetaEnv {
+  readonly VITE_IS_REQUEST_PROXY: string;
+  readonly VITE_API_URL: string;
+  readonly VITE_API_URL_PREFIX: string;
+}

src/utils/request/index.ts

@@ -4,15 +4,14 @@ import merge from 'lodash/merge';
 import type { InternalAxiosRequestConfig } from 'axios';
 import type { AxiosTransform, CreateAxiosOptions } from './AxiosTransform';
 import { VAxios } from './Axios';
-import proxy from '@/config/proxy';
 import { joinTimestamp, formatRequestDate, setObjToUrlParams } from './utils';
 import { TOKEN_NAME } from '@/config/global';
 import { ContentTypeEnum } from '@/constants';
 
 const env = import.meta.env.MODE || 'development';
 
 // 如果是mock模式 或 没启用直连代理 就不配置host 会走本地Mock拦截 或 Vite 代理
-const host = env === 'mock' || !proxy.isRequestProxy ? '' : proxy[env].host;
+const host = env === 'mock' || import.meta.env.VITE_IS_REQUEST_PROXY !== 'true' ? '' : import.meta.env.VITE_API_URL;
 
 // 数据处理，方便区分多种处理方式
 const transform: AxiosTransform = {
@@ -172,7 +171,7 @@ function createAxios(opt?: Partial<CreateAxiosOptions>) {
           // 接口前缀
           // 例如: https://www.baidu.com/api
           // urlPrefix: '/api'
-          urlPrefix: '/api',
+          urlPrefix: import.meta.env.VITE_API_URL_PREFIX,
           // 是否返回原生响应头 比如：需要获取响应头时使用该属性
           isReturnNativeResponse: false,
           // 需要对返回数据进行处理

stylelint.config.js

@@ -4,7 +4,7 @@ module.exports = {
   plugins: ['stylelint-less'],
   overrides: [
     {
-      files: ['**/*.vue'],
+      files: ['**/*.html', '**/*.vue'],
       customSyntax: 'postcss-html',
     },
     {

vite.config.ts

@@ -10,7 +10,7 @@ const CWD = process.cwd();
 
 // https://vitejs.dev/config/
 export default ({ mode }: ConfigEnv): UserConfig => {
-  const { VITE_BASE_URL } = loadEnv(mode, CWD);
+  const { VITE_BASE_URL, VITE_API_URL_PREFIX } = loadEnv(mode, CWD);
   return {
     base: VITE_BASE_URL,
     resolve: {
@@ -45,7 +45,7 @@ export default ({ mode }: ConfigEnv): UserConfig => {
       port: 3002,
       host: '0.0.0.0',
       proxy: {
-        '/api': 'http://127.0.0.1:3000/',
+        [VITE_API_URL_PREFIX]: 'http://127.0.0.1:3000/',
       },
     },
   };