refactor: 重构主题色配置功能 (#110)

* feat:更新Taro版本,新增page.config.ts文件

* refactor: 重构主题色配置功能

src/components/My/index.vue

@@ -61,7 +61,7 @@ const options = computed(() => {
   const data = [
     [
       { title: "绑定", url: "/pages/bind/index", badge: notificationState.my.bind },
-      { title: "实验室", url: "/pages/lab/index" }
+      { title: "主题", url: "/pages/lab/index" }
     ],
     [
       { title: "反馈", url: "/pages/connect/index" },

src/components/ThemeConfig/index.scss

@@ -30,6 +30,14 @@
   background-image: url('~@/assets/photos/background-pink.svg');
 }
 
+.theme.purple {
+  --wjh-color-primary-light: var(--wjh-color-purple-500);
+  --wjh-color-primary: var(--wjh-color-purple-600);
+  --wjh-color-primary-dark: var(--wjh-color-purple-700);
+
+  background-image: url('~@/assets/photos/background-purple.svg');
+}
+
 .background {
   position: fixed;
   display: flex;
@@ -41,4 +49,4 @@
   background-repeat: no-repeat;
   background-color: var(--wjh-color-background-page);
   color: var(--wjh-color-text);
-}
+}

src/page.config.ts

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  enablePageMeta: true,
+});

src/pages/lab/index.vue

@@ -1,6 +1,6 @@
 <template>
   <theme-config class="lab-view background">
-    <title-bar title="实验室" back-button />
+    <title-bar title="主题" back-button />
     <scroll-view :scroll-y="true">
       <view class="flex-column">
         <card class="lab-card">
@@ -12,30 +12,13 @@
           </view>
           <view class="theme-config">
             <view class="theme-config-title">主题色彩</view>
-              <view class="tab-bar">
+              <view class="tab-bar" >
                 <text
+                  v-for="item in hadThemeList"
                   class="tab"
-                  :class="currentTab === 'green' ? 'active' : undefined"
-                  @tap="() => handleTabClick('green')"
-                > 绿
-                </text>
-                <text
-                  class="tab"
-                  :class="currentTab === 'yellow' ? 'active' : undefined"
-                  @tap="() => handleTabClick('yellow')"
-                > 黄
-                </text>
-                <text
-                  class="tab"
-                  :class="currentTab === 'blue' ? 'active' : undefined"
-                  @tap="() => handleTabClick('blue')"
-                > 蓝
-                </text>
-                <text
-                  class="tab"
-                  :class="currentTab === 'pink' ? 'active' : undefined"
-                  @tap="() => handleTabClick('pink')"
-                > 粉
+                  :class="currentTab === item.name ? 'active' : undefined"
+                  @tap="() => handleTabClick(item.name)"
+                > {{ nameMap[item.name] }}
                 </text>
               </view>
           </view>
@@ -61,31 +44,85 @@ import { Card, TitleBar, ThemeConfig } from "@/components";
 import DarkModeToggle from "./features/DarkModeToggle.vue";
 import { labText } from "@/constants/copywriting";
 import { getCopyRight } from "@/utils";
-import { ref, computed,watch  } from "vue";
+import {ref, computed, watch, onMounted} from "vue";
 import { serviceStore } from "@/store";
 import store from "@/store";
 import "./index.scss";
+import {useRequest} from "@/hooks";
+import {UserService} from "@/services";
+import Taro from "@tarojs/taro";
 
+let activeTheme = ''
+let idMap = {}
+let nameMap = {
+  green: "绿",
+  yellow: "黄",
+  blue: "蓝",
+  purple: "紫",
+  pink: "粉"
+}
 const isEmpty = ref(false);
 
 const emptyText = computed(() => {
   return labText.empty;
 });
-
+const hadThemeList = computed(() => {
+  return serviceStore.theme.hadTheme;
+});
 const themeMode = ref(serviceStore.theme.themeMode);
 const currentTab = ref(themeMode);
 
+
+useRequest(UserService.getUserTheme, {
+  manual: false,
+  onSuccess: (res) => {
+    if(res.data.code === 1 && res.data.msg === "OK") {
+      store.commit("setHadTheme", res.data.data.theme_list);
+      res.data.data.theme_list.forEach((item:any) => {
+        idMap[item.name] = item.id;
+      })
+    } else {
+      Taro.showToast({
+        icon: "none",
+        title: res.data.msg
+      });
+    }
+  },
+  onError: (e:Error) =>{
+    return `失败\r\n${e.message || "网络错误"}`;
+  }
+})
+
+const { run } = useRequest(UserService.setTheme, {
+  manual: true,
+  onSuccess: (res) => {
+    if(res.data.code === 1 && res.data.msg === "OK") {
+      store.commit("setThemeMode", currentTab);
+      currentTab.value = activeTheme;
+      Taro.showToast({ title: "设置成功" });
+    } else {
+      Taro.showToast({
+        icon: "none",
+        title: res.data.msg
+      });
+    }
+  },
+  onError: (e:Error) =>{
+    return `失败\r\n${e.message || "网络错误"}`;
+  }
+})
+
 watch(() => serviceStore.theme.themeMode, (newValue) => {
   currentTab.value = newValue;
   themeMode.value = newValue;
 });
 
 const setThemeMode = (currentTab: string) => {
-  store.commit("setThemeMode", currentTab);
+  run({ id:idMap[currentTab]} )
 };
 
 const handleTabClick = (theme: string) => {
-  currentTab.value = theme;
   setThemeMode(theme);
+  activeTheme = theme;
 };
 </script>

src/services/api/apiList.ts

@@ -19,6 +19,10 @@ const api = {
         login: "/api/user/bind/yxy/login",
       }
     },
+    theme: {
+      get: "/api/func/theme/get",
+      set: "/api/func/theme/choose",
+    },
     logout: "/api/user/del",
     changePassword: "/api/user/repass",
   },

src/services/services/userService.ts

@@ -1,13 +1,44 @@
 import Taro from "@tarojs/taro";
 import store, {serviceStore} from "@/store";
 import { fetch, FetchResult } from "@/utils";
-import { api } from "../api/apiList";
+import { api } from "@/services";
 import { updateDateStateWithSession } from "../utils/updateDateState";
 import errCodeHandler from "../utils/errHandler";
 import { ServerCode } from "../api/codes";
 import request from "../request";
 
 export default class UserService {
+  static getUserTheme = () => {
+    return request<{
+      code: number,
+      msg: string,
+      theme_list: {
+          id?: number;
+          name?: string;
+          theme_config?: string;
+          type: string;
+      }[]
+    }>(
+      api.user.theme.get, {
+        method: "GET",
+        header: { "Cookie": serviceStore.sessionID },
+      }
+    );
+  }
+
+  static setTheme = (data: { id : number }) => {
+    return request<{
+      code: number,
+      msg: string,
+      data: null,
+    }>(
+      api.user.theme.set, {
+        method: "POST",
+        header: { "Cookie": serviceStore.sessionID },
+        data
+      }
+    );
+  }
   static logout = (data?: { iid: string, stuid: string }) => {
     return request<{
       code: number,

src/store/service/theme.ts

@@ -1,19 +1,30 @@
 import { DarkModeTheme, DarkModeOption } from "@/types/DarkMode";
+interface ThemeList {
+  id?: number;
+  name?: string;
+  theme_config?: string;
+  type: string;
+}
 
 export interface ThemeStoreType {
+  hadTheme: ThemeList
   themeMode: string;
   darkMode: DarkModeOption
 }
 
 export const ThemeStore = {
   state: {
+    hadTheme: [],
     themeMode: "green",
     darkMode: {
       mode: "light",
       isAdapted: false
     }
   },
   mutations: {
+    setHadTheme(state: ThemeStoreType, value: ThemeList) {
+      state.hadTheme = value;
+    },
     setThemeMode(state: ThemeStoreType, value: string) {
       state.themeMode = value;
     },

src/style/darkmode/light.scss

@@ -43,7 +43,10 @@
   --wjh-color-red-700: #{$red-700};
   --wjh-color-red-800: #{$red-800};
 
+  --wjh-color-purple-500: #{$purple-500};
   --wjh-color-purple-600: #{$purple-600};
+  --wjh-color-purple-700: #{$purple-700};
+
 
   --wjh-color-pink-500: #{$pink-500};
   --wjh-color-pink-600: #{$pink-600};

src/style/variables/color.scss

@@ -55,9 +55,14 @@ $red-dark-600: #da8484;
 $red-dark-700: #e8a8a8;
 $red-dark-800: #e8c1c0;
 
-$purple-600: #8191cf;
+$purple-500: #d2d7f6;
+$purple-600: #8f9de1;
+$purple-700: #6b76ad;
 
+$purple-dark-500: #afbdf5;
 $purple-dark-600: #8191cf;
+$purple-dark-700: #6379d3;
+
 
 $pink-500: #f9e5eb;
 $pink-600: #fdb1c7;