主题颜色

src/App.vue

@@ -8,24 +8,31 @@
 
 <script setup lang="ts">
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
-import { useRoute } from 'vue-router'
+let rgb_: any = '239, 87, 16'
+let rgbSub_: any = '239, 87, 16'
+if (localStorage.getItem('themeMainColor')) {
+  rgb_ = localStorage.getItem('themeMainColor')
+  rgbSub_ = localStorage.getItem('themeMainColor')
+}
+document.documentElement.style.setProperty(
+  '--czr-main-color',
+  `rgba(${rgb_}, 1)`,
+)
+document.documentElement.style.setProperty('--czr-main-color-rgb', rgb_)
+document.documentElement.style.setProperty(
+  '--czr-main-sub-color',
+  `rgba(${rgbSub_}, 1)`,
+)
+document.documentElement.style.setProperty('--czr-main-sub-color-rgb', rgbSub_)
 document.documentElement.style.setProperty(
   '--czr-quasar-color',
   'var(--czr-main-color)',
 )
-const route = useRoute()
 if (localStorage.getItem('vconsole') == 1) {
   import('vconsole').then((module) => {
     new module.default()
   })
 }
-// const baseSize = 16 // 基础大小，16px
-// const scale = document.documentElement.clientWidth / 1920 // 设计稿宽度
-//
-// document.documentElement.style.setProperty(
-//   '--czr-input-size',
-//   (baseSize / scale) * 0.5 + 'px',
-// )
 </script>
 
 <style lang="scss" scoped></style>

src/stores/modules/app.ts

@@ -9,6 +9,17 @@ export const useAppStore = defineStore('app', {
     studentInfo: null,
     categoryMenus: [],
     subjectMap: new Map(),
+    colors: [
+      '#EF5710',
+      '#b3d7ea',
+      '#7dc7e0',
+      '#714734',
+      '#f9f5ba',
+      '#d92f2f',
+      '#fcebe4',
+      '#9cd6ef',
+      '#338bcc',
+    ],
   }),
   getters: {},
   actions: {

src/style/czr.scss

@@ -3,20 +3,6 @@
   --czr-main-color-rgb: 239, 87, 16;
   --czr-main-sub-color: rgba(239, 87, 16, 1);
   --czr-main-sub-color-rgb: 239, 87, 16;
-  //--czr-main-sub-color: rgba(21, 103, 87, 1);
-  //--czr-main-sub-color-rgb: 21, 103, 87;
-  //--czr-chinese-color: rgba(211, 73, 71, 1); // 提香红
-  //--czr-chinese-color-rgb: 211, 73, 71;
-  //--czr-chinese-sub-color: rgba(2, 50, 112, 1);
-  //--czr-chinese-sub-color-rgb: 2, 50, 112;
-  //--czr-math-color: rgba(0, 62, 115, 1);  //  深灰绿
-  //--czr-math-color-rgb: 0, 62, 115;
-  //--czr-math-sub-color: rgba(184, 144, 118, 1);
-  //--czr-math-sub-color-rgb: 184, 144, 118;
-  //--czr-english-color: rgba(186, 91, 184, 1); //  紫蒲
-  //--czr-english-color-rgb: 186, 91, 184;
-  //--czr-english-sub-color: rgba(4, 35, 65, 1);
-  //--czr-english-sub-color-rgb: 4, 35, 65;
 }
 
 .__disabled {

src/utils/czr-util.ts

@@ -775,6 +775,16 @@ export const extractRgbFromRgba = (rgbaString) => {
       parseInt(match[3], 10),
     ]
   }
+  const match2 = rgbaString.match(
+    /^rgb?\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})(?:,\s*[\d.]+)?\)$/,
+  )
+  if (match2) {
+    return [
+      parseInt(match2[1], 10),
+      parseInt(match2[2], 10),
+      parseInt(match2[3], 10),
+    ]
+  }
   return [46, 129, 255]
 }
 

src/views/study/components/study-layout.vue

@@ -28,13 +28,13 @@
         <span>个人中心</span>
         <q-menu>
           <q-list>
-            <q-item clickable @click="onSwitchTheme">
+            <q-item clickable @click="state.showColor = true">
               <q-item-section>切换主题</q-item-section>
             </q-item>
             <q-item clickable v-close-popup>
-              <q-item-section @click="state.showInfo = true"
-                >个人信息</q-item-section
-              >
+              <q-item-section @click="state.showInfo = true">
+                个人信息
+              </q-item-section>
             </q-item>
             <q-item clickable v-close-popup>
               <q-item-section @click="onLogout">退出登录</q-item-section>
@@ -50,7 +50,15 @@
   <q-dialog v-model="state.showInfo">
     <q-card style="width: 60%; max-width: 60%">
       <q-card-section>
-        <div class="text-h6">个人信息</div>
+        <div class="text-h6 flex items-center">
+          个人信息
+          <SvgIcon
+            name="czr_close"
+            color="#000000"
+            class="ml-auto"
+            @click="state.showInfo = false"
+          />
+        </div>
       </q-card-section>
 
       <q-card-section class="q-pt-none">
@@ -110,11 +118,32 @@
           <!--          </div>-->
         </div>
       </q-card-section>
-
-      <q-card-actions align="right" class="text-teal bg-white">
-        <!--        <q-btn flat label="确定" v-close-popup />-->
-        <q-btn flat label="取消" v-close-popup />
-      </q-card-actions>
+    </q-card>
+  </q-dialog>
+  <q-dialog v-model="state.showColor">
+    <q-card style="width: 40%; max-width: 40%">
+      <q-card-section>
+        <div class="text-h6 flex items-center">
+          切换主题
+          <SvgIcon
+            name="czr_close"
+            color="#000000"
+            class="ml-auto"
+            @click="state.showColor = false"
+          />
+        </div>
+      </q-card-section>
+      <q-card-section class="q-pt-none">
+        <div class="grid grid-cols-3 gap-4">
+          <template v-for="item in AppStore.colors">
+            <div
+              :style="{ backgroundColor: item }"
+              class="col-span-1 h-20 rounded-xl"
+              @click="onSwitchTheme(item)"
+            />
+          </template>
+        </div>
+      </q-card-section>
     </q-card>
   </q-dialog>
 </template>
@@ -125,12 +154,14 @@ import { useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { authLogout } from '@/api/modules/global'
 import { useAppStore, useDictionaryStore } from '@/stores'
+import { extractRgbFromRgba, hexToOpaqueHex, hexToRgb } from '@/utils/czr-util'
 
 const AppStore = useAppStore()
 const DictionaryStore = useDictionaryStore()
 const router = useRouter()
 const state: any = reactive({
   showInfo: false,
+  showColor: false,
   avatar: '',
 })
 const infoCpt = computed(() => {
@@ -147,44 +178,23 @@ const infoCpt = computed(() => {
 const menusCpt = computed(() => {
   return router.getRoutes().filter((v) => v.meta?.isMenu)
 })
-const rgbs = [
-  { main: '239, 87, 16', sub: '239, 87, 16' },
-  { main: '175, 221, 224', sub: '86, 85, 154' },
-  { main: '117, 41, 46', sub: '248, 198, 181' },
-  { main: '193, 226, 207', sub: '165, 93, 81' },
-  { main: '253, 216, 118', sub: '191, 209, 178' },
-  { main: '181, 144, 107', sub: '229, 168, 75' },
-]
-const onSwitchTheme = () => {
-  const rgb = getComputedStyle(document.documentElement).getPropertyValue(
-    '--czr-main-color-rgb',
+const onSwitchTheme = (color) => {
+  const rgb_: string = extractRgbFromRgba(hexToRgb(color)).join(',')
+  const rgbSub_ = rgb_
+  document.documentElement.style.setProperty(
+    '--czr-main-color',
+    `rgba(${rgb_}, 1)`,
   )
-  const handle = (index) => {
-    const rgb_ = rgbs[index].main
-    const rgbSub_ = rgbs[index].main
-    document.documentElement.style.setProperty(
-      '--czr-main-color',
-      `rgba(${rgb_}, 1)`,
-    )
-    document.documentElement.style.setProperty('--czr-main-color-rgb', rgb_)
-    document.documentElement.style.setProperty(
-      '--czr-main-sub-color',
-      `rgba(${rgbSub_}, 1)`,
-    )
-    document.documentElement.style.setProperty(
-      '--czr-main-sub-color-rgb',
-      rgbSub_,
-    )
-  }
-  for (let i = 0; i < rgbs.length; i++) {
-    if (rgb === rgbs[i].main) {
-      if (i + 1 < rgbs.length) {
-        handle(i + 1)
-      } else {
-        handle(0)
-      }
-    }
-  }
+  document.documentElement.style.setProperty('--czr-main-color-rgb', rgb_)
+  document.documentElement.style.setProperty(
+    '--czr-main-sub-color',
+    `rgba(${rgbSub_}, 1)`,
+  )
+  document.documentElement.style.setProperty(
+    '--czr-main-sub-color-rgb',
+    rgbSub_,
+  )
+  localStorage.setItem('themeMainColor', rgb_)
 }
 const handleAvatarSuccess = (response, uploadFile) => {
   state.avatar = URL.createObjectURL(uploadFile.raw!)

src/views/study/home/index.vue

@@ -225,7 +225,7 @@
           <div class="bg-[var(--czr-main-sub-color)] px-4 py-3 text-white">
             <div class="flex items-center text-base font-bold">
               <i class="fas fa-chalkboard-teacher mr-2"></i>
-              教师简介
+              公告
             </div>
           </div>
           <div