fix: 抽离颜色列表组件

src/components/ThemeColorSelect/components/ColorList.vue

@@ -0,0 +1,75 @@
+<template>
+  <div
+    class="content-left-item go-transition-quick"
+    span="12 1000:6 1400:4 1800:4 2200:2"
+    v-for="(item, index) in designColor"
+    :key="index"
+    @click="colorSelectHandle(item)"
+  >
+    <n-space>
+      <div class="content-left-item-color" :style="{ backgroundColor: item.hex }" />
+      <n-space vertical>
+        <n-space>
+          <span :style="{ color: item.hex }">{{ item.name }}</span>
+          <span class="Pinyin-upper">{{ item.pinyin.toUpperCase() }}</span>
+        </n-space>
+        <n-text>
+          {{ item.hex }}
+          <n-divider vertical />
+          {{
+            `rgb(${item.RGB[0]}, ${item.RGB[0]}, ${item.RGB[0]})`
+          }}
+        </n-text>
+      </n-space>
+    </n-space>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { AppThemeColorType } from '@/store/modules/designStore/designStore.d'
+import designColor from '@/settings/designColor.json'
+
+const emits = defineEmits(['colorSelectHandle'])
+
+const colorSelectHandle = (color: AppThemeColorType) => {
+  emits('colorSelectHandle', color)
+}
+</script>
+
+<style lang="scss" scoped>
+.content-left-item {
+  position: relative;
+  display: flex;
+  margin-bottom: 20px;
+  margin-right: 20px;
+  padding: 10px 20px;
+  min-width: 300px;
+  border-radius: 5px;
+  cursor: pointer;
+  border: 1px solid rgba(0, 0, 0, 0);
+  &:hover {
+    @include hover-border-color("background-color5");
+  }
+  &::after {
+    content: "";
+    z-index: -1;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0.7;
+    overflow: hidden;
+    border-radius: 5px;
+    @extend .go-background-filter-shallow;
+  }
+  &-color {
+    width: 8px;
+    height: 40px;
+    border-radius: 2px;
+  }
+  .Pinyin-upper {
+    font-size: 8px;
+  }
+}
+</style>

src/components/ThemeColorSelect/index.vue

@@ -16,51 +16,17 @@
       <div class="model-content">
         <n-scrollbar>
           <div class="content-left">
-            <n-grid x-gap="12" cols="2 600:3 1150:4 1600: 5">
-              <n-gi
-                class="content-left-item go-transition-quick"
-                v-for="(item, index) in appThemeList"
-                :key="index"
-                @click="colorSelectHandle(item)"
-              >
-                <n-space>
-                  <div
-                    class="content-left-item-color"
-                    :style="{ backgroundColor: item.hex }"
-                  />
-                  <n-space vertical>
-                    <n-space>
-                      <span :style="{ color: item.hex }">
-                        {{ item.name }}
-                      </span>
-                      <span class="Pinyin-upper">
-                        {{ item.pinyin.toUpperCase() }}
-                      </span>
-                    </n-space>
-                    <n-text>
-                      {{ item.hex }}
-                      <n-divider vertical />
-                      {{
-                        `rgb(${item.RGB[0]}, ${item.RGB[0]}, ${item.RGB[0]})`
-                      }}
-                    </n-text>
-                  </n-space>
-                </n-space>
-              </n-gi>
-            </n-grid>
+            <ColorList @colorSelectHandle="colorSelectHandle" />
           </div>
         </n-scrollbar>
         <div class="content-right">
           <div class="color-name-detail">
-            <n-text v-if="appThemeDetail" class="color-name">
-              {{ appThemeDetail.name }}
-            </n-text>
-            <n-text v-else="appThemeDetail" class="color-name">
-              中国色
-            </n-text>
-            <n-text v-if="appThemeDetail" class="color-name-Pinyin">
-              {{ appThemeDetail.pinyin.toUpperCase() }}
-            </n-text>
+            <n-text v-if="appThemeDetail" class="color-name">{{ appThemeDetail.name }}</n-text>
+            <n-text v-else="appThemeDetail" class="color-name">中国色</n-text>
+            <n-text
+              v-if="appThemeDetail"
+              class="color-name-Pinyin"
+            >{{ appThemeDetail.pinyin.toUpperCase() }}</n-text>
             <div
               v-if="appThemeDetail"
               class="select-color"
@@ -72,9 +38,7 @@
       </div>
       <div class="model-footer">
         中国色列表来自于：
-        <n-a href="http://zhongguose.com">
-          http://zhongguose.com
-        </n-a>
+        <n-a href="http://zhongguose.com">http://zhongguose.com</n-a>
       </div>
     </div>
   </n-modal>
@@ -86,16 +50,17 @@ import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { AppThemeColorType } from '@/store/modules/designStore/designStore.d'
 import { icon } from '@/plugins'
 import themeColorLogo from '@/assets/images/exception/theme-color.png'
+import { loadAsyncComponent } from '@/utils'
 
+const ColorList = loadAsyncComponent(() =>
+  import('./components/ColorList.vue')
+)
 const { ColorWandIcon, CloseIcon } = icon.ionicons5
 
 const designStore = useDesignStore()
 const modelShow = ref(false)
 
-const { appThemeList } = designStore
-
 const appThemeDetail = computed(() => {
-  console.log(designStore.getAppThemeDetail)
   return designStore.getAppThemeDetail
 })
 
@@ -106,7 +71,7 @@ const colorSelectHandle = (color: AppThemeColorType) => {
 
 <style lang="scss" scoped>
 $height: 85vh;
-@include go('system-color-setting') {
+@include go("system-color-setting") {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -117,7 +82,7 @@ $height: 85vh;
   border-radius: 15px;
   overflow: hidden;
   @extend .go-background-filter;
-  @include hover-border-color('background-color5');
+  @include hover-border-color("background-color5");
   .title {
     margin: 0;
   }
@@ -128,41 +93,7 @@ $height: 85vh;
     .content-left {
       display: flex;
       flex-wrap: wrap;
-      margin-right: 300px;
-      /* 每个项 */
-      &-item {
-        position: relative;
-        display: flex;
-        margin-bottom: 20px;
-        padding: 10px 20px;
-        border-radius: 5px;
-        cursor: pointer;
-        border: 1px solid rgba(0, 0, 0, 0);
-        &:hover {
-          @include hover-border-color('background-color5');
-        }
-        &::after {
-          content: '';
-          z-index: -1;
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          opacity: 0.7;
-          overflow: hidden;
-          border-radius: 5px;
-          @extend .go-background-filter-shallow;
-        }
-        &-color {
-          width: 8px;
-          height: 40px;
-          border-radius: 2px;
-        }
-        .Pinyin-upper {
-          font-size: 8px;
-        }
-      }
+      margin-right: 200px;
     }
     /* 右侧 */
     .content-right {
@@ -187,7 +118,7 @@ $height: 85vh;
           width: 100px;
           height: 20px;
           border-radius: 3px;
-          background-image: url('~@/assets/images/exception/texture.png');
+          background-image: url("@/assets/images/exception/texture.png");
         }
         .color-name {
           font-family: serif;

src/hooks/theme.hook.ts

@@ -15,6 +15,10 @@ export const getThemeOverridesHook = () => {
       // 通用
       const commonObj = {
         common: {
+          primaryColor: getAppTheme.value,
+          primaryColorHover: toLight(getAppTheme.value, 6),
+          primaryColorPressed: toLight(getAppTheme.value, 6),
+          primaryColorSuppl: getAppTheme.value,
           borderRadius
         }
       }
@@ -27,10 +31,6 @@ export const getThemeOverridesHook = () => {
       // 暗色主题
       const dartObject = {
         common: {
-          primaryColor: getAppTheme.value,
-          primaryColorHover: toLight(getAppTheme.value, 6),
-          primaryColorPressed: toLight(getAppTheme.value, 6),
-          primaryColorSuppl: getAppTheme.value,
           ...commonObj.common
         },
         LoadingBar: {

src/settings/designSetting.ts

@@ -4,8 +4,6 @@ import designColor from './designColor.json'
 // 默认语言
 export const lang = LangEnum.zh
 
-// 主体色
-export const appThemeList = designColor
 
 export const theme = {
   // 默认是否开启深色主题
@@ -13,8 +11,6 @@ export const theme = {
   //默认主题色
   appTheme: '#51d6a9',
   appThemeDetail: null,
-  //系统内置主题色列表
-  appThemeList
 }
 
 // dialog 图标的大小

src/store/modules/designStore/designStore.d.ts

@@ -16,6 +16,4 @@ export interface DesignStateType {
   //色号
   appTheme: string
   appThemeDetail: AppThemeColorType | null
-  //系统内置风格
-  appThemeList: AppThemeColorType[]
 }

src/store/modules/designStore/designStore.ts

@@ -7,7 +7,7 @@ import { ThemeEnum } from '@/enums/styleEnum'
 
 const { GO_DESIGN_STORE } = StorageEnum
 
-const { darkTheme, appTheme, appThemeList, appThemeDetail } = theme
+const { darkTheme, appTheme, appThemeDetail } = theme
 
 const storageDesign = getLocalStorage(GO_DESIGN_STORE)
 
@@ -22,8 +22,6 @@ export const useDesignStore = defineStore({
       // 颜色色号
       appTheme,
       appThemeDetail,
-      // 颜色列表
-      appThemeList,
     },
   getters: {
     getDarkTheme(e): boolean {
@@ -34,9 +32,6 @@ export const useDesignStore = defineStore({
     },
     getAppThemeDetail(): AppThemeColorType | null {
       return this.appThemeDetail
-    },
-    getAppThemeList(): AppThemeColorType[] {
-      return this.appThemeList
     }
   },
   actions: {