Merge pull request #25 from Tencent/fix/custom-theme-mode

fix: copy custom config

src/App.vue

@@ -2,8 +2,9 @@
   <router-view :class="[mode]" />
 </template>
 <script lang="ts">
-import { defineComponent, computed } from 'vue';
+import { defineComponent, computed, onMounted } from 'vue';
 import { useStore } from 'vuex';
+import config from '@/config/style';
 
 export default defineComponent({
   setup() {
@@ -13,6 +14,9 @@ export default defineComponent({
       return store.getters['setting/mode'];
     });
 
+    onMounted(() => {
+      store.dispatch('setting/changeTheme', { ...config });
+    });
     return {
       mode,
     };

src/layouts/setting.vue

@@ -84,7 +84,7 @@
         </t-form-item>
       </t-form>
       <div class="setting-info">
-        <p>请复制后手动修改配置文件: /src/config/style.js</p>
+        <p>请复制后手动修改配置文件: /src/config/style.ts</p>
         <t-button theme="primary" variant="text" @click="handleCopy"> 复制配置项 </t-button>
       </div>
     </div>
@@ -96,6 +96,8 @@ import { useStore } from 'vuex';
 import { ColorPicker } from 'vue-color-kit';
 import { MessagePlugin, PopupVisibleChangeContext } from 'tdesign-vue-next';
 import { Color } from 'tvision-color';
+import useClipboard from 'vue-clipboard3';
+
 import 'vue-color-kit/dist/vue-color-kit.css';
 
 import STYLE_CONFIG from '@/config/style';
@@ -191,8 +193,17 @@ export default defineComponent({
     };
 
     const handleCopy = () => {
-      MessagePlugin.closeAll();
-      MessagePlugin.success('复制成功');
+      const text = JSON.stringify(formData.value, null, 4);
+      const { toClipboard } = useClipboard();
+      toClipboard(text)
+        .then(() => {
+          MessagePlugin.closeAll();
+          MessagePlugin.success('复制成功');
+        })
+        .catch(() => {
+          MessagePlugin.closeAll();
+          MessagePlugin.error('复制失败');
+        });
     };
     const getModeIcon = (mode: string) => {
       if (mode === 'light') {

src/store/modules/setting.ts

@@ -73,7 +73,7 @@ const actions = {
     dispatch('changeBrandTheme', payload);
     commit('update', payload);
   },
-  async changeMode({ commit, state }, payload: IStateType) {
+  async changeMode({ commit }, payload: IStateType) {
     let theme = payload.mode;
 
     if (payload.mode === 'auto') {
@@ -85,20 +85,15 @@ const actions = {
       }
     }
     const isDarkMode = theme === 'dark';
-    if (theme !== state.mode) {
-      document.documentElement.setAttribute('theme-mode', isDarkMode ? 'dark' : '');
-    }
+
+    document.documentElement.setAttribute('theme-mode', isDarkMode ? 'dark' : '');
 
     commit('changeChartColor', isDarkMode ? DARK_CHART_COLORS : LIGHT_CHART_COLORS);
   },
-  changeBrandTheme({ state }: { state: IStateType }, payload: IStateType) {
-    const { brandTheme, mode } = payload;
-    if (brandTheme !== state.brandTheme) {
-      document.documentElement.setAttribute(
-        'theme-color',
-        /^#([a-fA-F\d]{6}|[a-fA-F\d]{3})$/.test(brandTheme) && mode === 'dark' ? `${brandTheme}` : brandTheme,
-      );
-    }
+  changeBrandTheme(_: { state: IStateType }, payload: IStateType) {
+    const { brandTheme } = payload;
+
+    document.documentElement.setAttribute('theme-color', brandTheme);
   },
 };