feat: 新增主题颜色选择

src/components/ThemeColorSelect/index.ts

@@ -0,0 +1,3 @@
+import ThemeColorSelect from './index.vue';
+
+export { ThemeColorSelect };

src/components/ThemeColorSelect/index.vue

@@ -0,0 +1,215 @@
+<template>
+  <n-button quaternary @click="modelShow = true" title="颜色">
+    <n-icon size="20" :depth="1">
+      <ColorWandIcon />
+    </n-icon>
+  </n-button>
+  <n-modal v-model:show="modelShow">
+    <div class="go-system-color-setting">
+      <n-space justify="space-between">
+        <n-h3 class="title">主题颜色选择</n-h3>
+        <n-icon size="20" class="go-cursor-pointer" @click="modelShow = false">
+          <CloseIcon />
+        </n-icon>
+      </n-space>
+      <n-divider />
+      <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>
+          </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>
+            <div
+              v-if="appThemeDetail"
+              class="select-color"
+              :style="{ backgroundColor: designStore.appTheme }"
+            />
+          </div>
+          <img :src="themeColorLogo" />
+        </div>
+      </div>
+      <div class="model-footer">
+        中国色列表来自于：
+        <n-a href="http://zhongguose.com">
+          http://zhongguose.com
+        </n-a>
+      </div>
+    </div>
+  </n-modal>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+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'
+
+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
+})
+
+const colorSelectHandle = (color: AppThemeColorType) => {
+  designStore.setAppColor(color)
+}
+</script>
+
+<style lang="scss" scoped>
+$height: 85vh;
+@include go('system-color-setting') {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 90%;
+  min-width: 1000px;
+  padding: 20px 25px;
+  height: $height;
+  border-radius: 15px;
+  overflow: hidden;
+  @extend .go-background-filter;
+  @include hover-border-color('background-color5');
+  .title {
+    margin: 0;
+  }
+  .model-content {
+    flex: 1;
+    height: calc(#{$height} - 40px - 48px - 36px);
+    /* 左侧 */
+    .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;
+        }
+      }
+    }
+    /* 右侧 */
+    .content-right {
+      position: absolute;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      width: 300px;
+      height: 100%;
+      right: 50px;
+      top: 0px;
+      .color-name-detail {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-right: 40px;
+        .go-flex-items-center {
+          flex-direction: column;
+        }
+        .select-color {
+          margin-top: 20px;
+          width: 100px;
+          height: 20px;
+          border-radius: 3px;
+          background-image: url('~@/assets/images/exception/texture.png');
+        }
+        .color-name {
+          font-family: serif;
+          font-size: 80px;
+          color: #fff;
+          margin: 0 auto;
+          display: block;
+          width: 110px;
+          text-align: center;
+          background-position: center top;
+          background-repeat: no-repeat;
+        }
+        .color-name-Pinyin {
+          text-align: center;
+          font-family: Georgia;
+          font-size: 16px;
+        }
+      }
+    }
+  }
+  .model-footer {
+    text-align: end;
+  }
+}
+</style>

src/layout/components/Header/index.vue

@@ -14,6 +14,7 @@
           <slot name="ri-left"> </slot>
           <LangSelect />
           <ThemeSelect />
+          <ThemeColorSelect />
           <slot name="ri-right"> </slot>
         </n-space>
       </div>
@@ -24,6 +25,7 @@
 <script setup lang="ts">
 import { ThemeSelect } from '@/components/ThemeSelect'
 import { LangSelect } from '@/components/LangSelect'
+import { ThemeColorSelect } from '@/components/ThemeColorSelect'
 </script>
 
 <style lang="scss" scoped>

src/plugins/icon.ts

@@ -46,7 +46,8 @@ DesktopOutline as DesktopOutlineIcon,
   Cut as CutIcon,
   Square as SquareIcon,
   ColorPalette as ColorPaletteIcon,
-  Leaf as LeafIcon
+  Leaf as LeafIcon,
+  ColorWand as ColorWandIcon
 } from '@vicons/ionicons5'
 
 import {
@@ -167,7 +168,9 @@ const ionicons5 = {
   ColorPaletteIcon,
   ZAxisIcon,
   // 气球
-  LeafIcon
+  LeafIcon,
+  // 颜色
+  ColorWandIcon
 }
 
 const carbon = {

src/settings/designSetting.ts

@@ -1,35 +1,18 @@
 import { LangEnum } from '@/enums/styleEnum'
+import designColor from './designColor.json'
 
 // 默认语言
 export const lang = LangEnum.zh
 
 // 主体色
-export const appThemeList: string[] = [
-  '#2d8cf0',
-  '#0960bd',
-  '#0084f4',
-  '#009688',
-  '#536dfe',
-  '#ff5c93',
-  '#ee4f12',
-  '#0096c7',
-  '#9c27b0',
-  '#ff9800',
-  '#FF3D68',
-  '#00C1D4',
-  '#71EFA3',
-  '#171010',
-  '#78DEC7',
-  '#1768AC',
-  '#FB9300',
-  '#FC5404'
-]
+export const appThemeList = designColor
 
 export const theme = {
   // 默认是否开启深色主题
   darkTheme: true,
-  //系统主题色
+  //默认主题色
   appTheme: '#51d6a9',
+  appThemeDetail: null,
   //系统内置主题色列表
   appThemeList
 }

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

@@ -1,12 +1,21 @@
 import { ThemeEnum } from '@/enums/styleEnum'
 
+export type AppThemeColorType = {
+  CMYK: number[]
+  RGB: number[]
+  hex: string
+  name: string
+  pinyin: string
+}
+
 export interface DesignStateType {
   // 是否是深色主题
   darkTheme: boolean
   // 主题名称
   themeName: ThemeEnum
-  //系统风格
+  //色号
   appTheme: string
+  appThemeDetail: AppThemeColorType | null
   //系统内置风格
-  appThemeList: string[]
+  appThemeList: AppThemeColorType[]
 }

src/store/modules/designStore/designStore.ts

@@ -1,13 +1,13 @@
 import { defineStore } from 'pinia'
 import { theme } from '@/settings/designSetting'
-import { DesignStateType } from './designStore.d'
+import { DesignStateType, AppThemeColorType } from './designStore.d'
 import { setLocalStorage, getLocalStorage } from '@/utils'
 import { StorageEnum } from '@/enums/storageEnum'
 import { ThemeEnum } from '@/enums/styleEnum'
 
 const { GO_DESIGN_STORE } = StorageEnum
 
-const { darkTheme, appTheme, appThemeList } = theme
+const { darkTheme, appTheme, appThemeList, appThemeDetail } = theme
 
 const storageDesign = getLocalStorage(GO_DESIGN_STORE)
 
@@ -21,6 +21,7 @@ export const useDesignStore = defineStore({
       themeName: (darkTheme && ThemeEnum.dark) || ThemeEnum.light,
       // 颜色色号
       appTheme,
+      appThemeDetail,
       // 颜色列表
       appThemeList,
     },
@@ -31,15 +32,24 @@ export const useDesignStore = defineStore({
     getAppTheme(): string {
       return this.appTheme
     },
-    getAppThemeList(): string[] {
+    getAppThemeDetail(): AppThemeColorType | null {
+      return this.appThemeDetail
+    },
+    getAppThemeList(): AppThemeColorType[] {
       return this.appThemeList
     }
   },
   actions: {
+    // 切换主题
     changeTheme(): void {
       this.darkTheme = !this.darkTheme
       this.themeName = this.darkTheme ? ThemeEnum.dark : ThemeEnum.light
       setLocalStorage(GO_DESIGN_STORE, this.$state)
     },
+    // 设置颜色
+    setAppColor(color: AppThemeColorType): void {
+      this.appTheme = color.hex
+      this.appThemeDetail = color
+    }
   }
 })

src/styles/common/_dark.scss

@@ -17,6 +17,7 @@ $dark: (
     background-color5-shallow: $--color-dark-bg-5-shallow,
   // 毛玻璃背景
     filter-color: $--filter-color-login-dark,
+    filter-color-shallow: $--filter-color-login-dark-shallow,
   //渐变背景
     background-image:
     linear-gradient(120deg, $--color-dark-bg-1 0%, $--color-dark-bg-1 100%),

src/styles/common/_light.scss

@@ -19,6 +19,7 @@ $light: (
     background-color5-shallow: $--color-light-bg-5-shallow,
   // 毛玻璃背景
     filter-color: $--filter-color-login-light,
+    filter-color-shallow: $--filter-color-login-light-shallow,
   //渐变背景
     background-image:
     linear-gradient(120deg, $--color-light-bg 0%, $--color-light-bg 100%),

src/styles/common/style.scss

@@ -53,6 +53,13 @@
   box-shadow: $--border-shadow;
 }
 
+// 毛玻璃
+.go-background-filter-shallow {
+  backdrop-filter: $--filter-blur-base;
+  @include filter-bg-color('filter-color-shallow');
+  box-shadow: $--border-shadow;
+}
+
 // 边框圆角
 .go-border-radius {
   border-radius: $--border-radius-base;

src/styles/common/var.scss

@@ -54,7 +54,9 @@ $--footer-height: 50px;
 $--filter-blur-base: blur(20px);
 // 毛玻璃
 $--filter-color-login-dark: rgba(35,35,36, 0.7);
+$--filter-color-login-dark-shallow: rgba(35,35,36, 0.3);
 $--filter-color-login-light: rgba(240, 240, 240, 0.7);
+$--filter-color-login-light-shallow: rgba(240, 240, 240, 0.3);
 
 // 边框
 $--border-radius-base: 8px;