feat: 增加主题色功能

src/App.vue

@@ -6,8 +6,11 @@ import {
   getPlan,
   savePlan,
   getDefaultRecordValue,
-  saveDefaultRecordValue, getStats, saveStats
+  saveDefaultRecordValue, getStats, saveStats, getThemeColor, saveThemeColor
 } from "@/utils/profile";
+import { useAppStore } from "@/store/app";
+
+const appStore = useAppStore();
 
 onLaunch(() => {
   if (!getDefaultRecordValue()) {
@@ -30,6 +33,10 @@ onLaunch(() => {
   if (getStats().length === 0) {
     saveStats(['weight', 'sleep', 'sport', 'bloodPressure', 'bloodSugar', 'temperature'])
   }
+  if (!getThemeColor()) {
+    saveThemeColor('purple')
+  }
+  appStore.themeColor = getThemeColor();
   console.log("App Launch");
 });
 onShow(() => {
@@ -40,11 +47,3 @@ onHide(() => {
 });
 </script>
 
-<style lang="scss">
-page,
-.wd-root-portal {
-  --wot-primary-5: #8b5cf6;
-  --wot-primary-6: #7c3aed;
-  --wot-primary-7: #6d28d9;
-}
-</style>

src/components/Profile/OverviewPopup.vue

@@ -31,7 +31,6 @@
 
 <script lang="ts" setup>
 import { useProfileStore } from '@/store/profile'
-import { countRecordsByMonth, getTotalCount } from "@/utils/record";
 import { saveOverview } from "@/utils/profile";
 
 const profileStore = useProfileStore()

src/components/Profile/ThemePopup.vue

@@ -0,0 +1,49 @@
+<template>
+  <wd-popup
+      v-model="profileStore.showThemePopup"
+      position="bottom"
+      :safe-area-inset-bottom="true"
+      custom-style="border-radius: 32rpx 32rpx 0 0; padding: 40rpx 32rpx"
+  >
+    <view class="mb-4 text-center text-base text-gray-700 font-semibold">
+      主题色
+    </view>
+
+    <wd-radio-group v-model="profileStore.themeColor" type="dot" direction="horizontal"
+                    :checked-color="getThemePrimaryColor[profileStore.themeColor]">
+      <wd-radio value="purple">暮夜紫</wd-radio>
+      <wd-radio value="green">薄荷绿</wd-radio>
+      <wd-radio value="blue">极客蓝</wd-radio>
+      <wd-radio value="amber">落日橙</wd-radio>
+    </wd-radio-group>
+
+    <view class="mt-5 flex w-full items-center justify-evenly">
+      <wd-button type="info" @click="cancelClick">
+        取消
+      </wd-button>
+      <wd-button type="primary" @click="saveClick">
+        保存
+      </wd-button>
+    </view>
+  </wd-popup>
+</template>
+
+<script lang="ts" setup>
+import { useProfileStore } from '@/store/profile'
+import { useAppStore } from '@/store/app'
+import { getThemeColor, saveThemeColor } from "@/utils/profile";
+import { getThemePrimaryColor } from "@/utils/themes";
+
+const profileStore = useProfileStore()
+const appStore = useAppStore()
+
+function cancelClick() {
+  profileStore.showThemePopup = false
+}
+
+function saveClick() {
+  saveThemeColor(profileStore.themeColor)
+  appStore.themeColor = getThemeColor()
+  profileStore.showThemePopup = false
+}
+</script>

src/pages/index/index.vue

@@ -1,5 +1,6 @@
 <template>
-  <view class="min-h-screen flex flex-col bg-gradient-to-b from-[#a78bfa] to-[#f3e8ff]">
+  <wd-config-provider :theme-vars="getTheme(appStore.themeColor)">
+    <view class="min-h-screen flex flex-col" :style="getThemeStyle[appStore.themeColor]">
       <view class="self-center py-3 flex items-center gap-2 text-gray-800">
         <wd-img :width="40" :height="40" :src="imgURL" />
 
@@ -102,10 +103,12 @@
       <temperature-popup />
       <tip-popup />
 
-    <liu-drag-button v-if="recordStore.showFab" @clickBtn="handelFabClick">
+      <liu-drag-button v-if="recordStore.showFab" :background="getThemePrimaryColor[appStore.themeColor]"
+                       @clickBtn="handelFabClick">
         <wd-icon name="plus" size="24px"></wd-icon>
       </liu-drag-button>
     </view>
+  </wd-config-provider>
 </template>
 
 <script lang="ts" setup>
@@ -128,6 +131,7 @@ import type { IOverview, IPlan } from "@/type/profile";
 import { addSignInPoint } from "@/utils/points";
 import type { ITip } from "@/type";
 import TipPopup from "@/components/Home/TipPopup.vue";
+import { getTheme, getThemePrimaryColor, getThemeStyle } from "@/utils/themes";
 
 defineOptions({
   name: 'Home',

src/pages/record/index.vue

@@ -1,5 +1,6 @@
 <template>
-  <view class="min-h-screen flex flex-col bg-gradient-to-b from-[#a78bfa] to-[#f3e8ff]">
+  <wd-config-provider :theme-vars="getTheme(appStore.themeColor)">
+    <view class="min-h-screen flex flex-col" :style="getThemeStyle[appStore.themeColor]">
       <wd-segmented v-model:value="appStore.viewRecordType" :options="viewTypeSegmentList"
                     @change="handleChangeSegment"
                     custom-style="align-self: center; width: 60%; margin: 10px;">
@@ -9,7 +10,8 @@
       </wd-segmented>
 
       <wd-card v-if="appStore.viewRecordType === 'calendar'" custom-class="!mx-2 !mb-0">
-      <wu-calendar :date="selectDate" :selected="calendarSelect" :itemHeight="45" :insert="true" color="#8b5cf6"
+        <wu-calendar :date="selectDate" :selected="calendarSelect" :itemHeight="45" :insert="true"
+                     :color="getThemePrimaryColor[appStore.themeColor]"
                      @change="handleChangeDate" @monthSwitch="monthSwitch"/>
       </wd-card>
 
@@ -80,6 +82,7 @@
           @confirm="onDateConfirm"
       />
     </view>
+  </wd-config-provider>
 </template>
 
 <script lang="ts" setup>
@@ -96,6 +99,7 @@ import {
 import { onShow } from "@dcloudio/uni-app";
 import type { ICalendarSelect, IGroupHealthRecord, IHealthRecord } from "@/type/record";
 import { useAppStore } from "@/store/app";
+import { getTheme, getThemePrimaryColor, getThemeStyle } from "@/utils/themes";
 
 const currentDate = ref(Date.now())
 const currentRecordTypeSegment = ref('')

src/pages/stats/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="min-h-screen flex flex-col bg-gradient-to-b from-[#a78bfa] to-[#f3e8ff]">
+  <view class="min-h-screen flex flex-col" :style="getThemeStyle[appStore.themeColor]">
     <view class="self-center py-3 flex items-center gap-2 text-gray-800">
       <view class="flex min-w-0 flex-col">
         <text class="truncate text-lg text-white font-semibold">
@@ -92,9 +92,12 @@ import { ref } from 'vue'
 import { getRecentRecords } from '@/utils/record'
 import { onShow } from "@dcloudio/uni-app";
 import { useProfileStore } from '@/store/profile'
+import { useAppStore } from '@/store/app'
 import { getStats } from "@/utils/profile";
+import { getThemeStyle } from "@/utils/themes";
 
 const profileStore = useProfileStore()
+const appStore = useAppStore()
 
 const weightChartData = ref({
   categories: [] as string[],

src/pages/user/index.vue

@@ -1,8 +1,10 @@
 <template>
+  <wd-config-provider :theme-vars="getTheme(appStore.themeColor)">
     <view class="min-h-screen bg-[#f2f4f3] pb-10">
       <wd-card title="个人信息" type="rectangle">
         <view class="flex items-center gap-4">
-        <wd-avatar :text="profile.name ? profile.name.charAt(0).toUpperCase() : '我'" bg-color="#8b5cf6" />
+          <wd-avatar :text="profile.name ? profile.name.charAt(0).toUpperCase() : '我'"
+                     :bg-color="getThemePrimaryColor[appStore.themeColor]" />
 
           <view class="flex flex-col">
             <text class="text-lg text-gray-800 font-semibold">
@@ -43,6 +45,7 @@
         <wd-cell size="large" title="今日概览" is-link @click="openOverviewPopup"/>
         <wd-cell size="large" title="今日计划" is-link @click="openPlanPopup"/>
         <wd-cell size="large" title="数据统计" is-link @click="openStatsPopup"/>
+        <wd-cell size="large" title="主题色" is-link @click="openThemePopup"/>
         <wd-cell size="large" title="存储详情" is-link @click="openStoragePopup"/>
       </wd-cell-group>
 
@@ -61,7 +64,10 @@
       <default-popup />
 
       <point-popup />
+
+      <theme-popup />
     </view>
+  </wd-config-provider>
 </template>
 
 <script lang="ts" setup>
@@ -74,12 +80,13 @@ import { getDefaultRecordValue, getOverview, getPlan, getProfile, getStats } fro
 import { useProfileStore } from '@/store/profile'
 import { useAppStore } from "@/store/app";
 import type { IProfile } from "@/type/profile";
-import { countRecordsByMonth, getMaxRecord, getTotalCount } from "@/utils/record";
 import DefaultPopup from "@/components/Profile/DefaultPopup.vue";
 import { getAchievement, getPoints, getRecordCount } from "@/utils/points";
 import { onShow } from "@dcloudio/uni-app";
 import PointPopup from "@/components/Profile/PointPopup.vue";
 import StatsPopup from "@/components/Profile/StatsPopup.vue";
+import { getTheme, getThemePrimaryColor } from "@/utils/themes";
+import ThemePopup from "@/components/Profile/ThemePopup.vue";
 
 const profileStore = useProfileStore()
 const appStore = useAppStore()
@@ -131,6 +138,10 @@ function openStatsPopup() {
   profileStore.showStatsPopup = true
 }
 
+function openThemePopup() {
+  profileStore.showThemePopup = true
+}
+
 function openStoragePopup() {
   profileStore.refreshStorage()
   profileStore.showStoragePopup = true

src/store/app.ts

@@ -9,6 +9,7 @@ export const useAppStore = defineStore('app', {
     recordCount: 0,
     achievement: '',
     showTipPopup: false,
+    themeColor: 'purple',
     currentTip: {
       title: '',
       summary: '',

src/store/profile.ts

@@ -12,11 +12,13 @@ export const useProfileStore = defineStore('profile', {
     showStatsPopup: false,
     showDefaultRecordValuePopup: false,
     showPointPopup: false,
+    showThemePopup: false,
     profileForm: {
       gender: '',
       height: 0,
       name: '',
     } as IProfile,
+    themeColor: 'purple',
     defaultRecordValueForm: {
       weightValue: 70,
       sportDuration: 30,

src/uni_modules/liu-drag-button_1.0.5/components/liu-drag-button/liu-drag-button.vue

@@ -2,6 +2,7 @@
 	<view>
 		<movable-area class="movable-area" :scale-area="false">
 			<movable-view class="movable-view" :class="!isRemove?'animation-info':''" style="pointer-events: auto;"
+                    :style="{ background: background }"
 				@click="clickBtn" @touchstart="touchstart" @touchend="touchend" @change="onChange" direction="all"
 				inertia="true" :x="x" :y="y" :disabled="disabled" :out-of-bounds="true" :damping="200" :friction="100">
 				<slot></slot>
@@ -13,6 +14,10 @@
 <script>
 	export default {
 		props: {
+      background: {
+        type: String,
+        default: "#8b5cf6"
+      },
 			//是否禁用拖动
 			disabled: {
 				type: Boolean,
@@ -110,8 +115,7 @@
 	.movable-view {
 		width: 100rpx;
 		height: 100rpx;
-		background: #8b5cf6;
-    box-shadow: 0px 4rpx 12rpx 0px rgba(139, 92, 246, 0.4);
+    box-shadow: 0px 4rpx 12rpx 0px rgba(15, 23, 42, 0.08);
 		border-radius: 50rpx;
 		color: #FFFFFF;
 		font-size: 26rpx;

src/utils/profile.ts

@@ -4,6 +4,7 @@ const PROFILE_KEY = 'user_profile'
 const OVERVIEW_KEY = 'user_overview'
 const PLAN_KEY = 'user_plan'
 const STATS_KEY = 'user_stats'
+const THEME_KEY = 'user_theme'
 const DEFAULT_RECORD_VALUE_KEY = 'user_default_record_value'
 
 function getEmptyProfile(): IProfile {
@@ -54,3 +55,11 @@ export function saveStats(data: string[]) {
   wx.setStorageSync(STATS_KEY, data)
 }
 
+export function getThemeColor(): string {
+  return wx.getStorageSync(THEME_KEY) || ''
+}
+
+export function saveThemeColor(data: string) {
+  wx.setStorageSync(THEME_KEY, data)
+}
+

src/utils/themes.ts

@@ -0,0 +1,72 @@
+import type { ConfigProviderThemeVars } from "@wot-ui/ui";
+
+export type ThemeKey = 'purple' | 'green' | 'blue' | 'amber'
+
+interface ThemeMeta {
+  label: string;
+  vars: ConfigProviderThemeVars
+}
+
+const THEMES: Record<ThemeKey, ThemeMeta> = {
+  purple: {
+    label: '暮夜紫',
+    vars: {
+      primary1: '#f5f3ff', primary2: '#ede9fe', primary3: '#ddd6fe', primary4: '#c4b5fd',
+      primary5: '#8b5cf6', primary6: '#7c3aed', primary7: '#6d28d9',
+      primary8: '#5b21b6', primary9: '#4c1d95', primary10: '#3b1779'
+    }
+  },
+  green: {
+    label: '薄荷绿',
+    vars: {
+      primary1: '#ecfdf5', primary2: '#d1fae5', primary3: '#a7f3d0', primary4: '#6ee7b7',
+      primary5: '#34d399', primary6: '#059669', primary7: '#047857',
+      primary8: '#065f46', primary9: '#04472f', primary10: '#03301f'
+    }
+  },
+  blue: {
+    label: '极客蓝',
+    vars: {
+      primary1: '#eff6ff', primary2: '#dbeafe', primary3: '#bfdbfe', primary4: '#93c5fd',
+      primary5: '#60a5fa', primary6: '#2563eb', primary7: '#1d4ed8',
+      primary8: '#1e40af', primary9: '#1e3a8a', primary10: '#172554'
+    }
+  },
+  amber: {
+    label: '落日橙',
+    vars: {
+      primary1: '#fff7ed', primary2: '#ffedd5', primary3: '#fed7aa', primary4: '#fdba74',
+      primary5: '#fb923c', primary6: '#ea580c', primary7: '#c2410c',
+      primary8: '#9a3412', primary9: '#7c2d12', primary10: '#4a1d0b'
+    }
+  }
+}
+
+export const DEFAULT_THEME: ThemeKey = 'purple'
+
+export function getTheme(key?: string | ThemeKey | null): ConfigProviderThemeVars {
+  const safeKey = (key ?? DEFAULT_THEME) as ThemeKey
+  return THEMES[safeKey].vars ?? THEMES[DEFAULT_THEME].vars
+}
+
+export const getThemeStyle: Record<ThemeKey, { backgroundImage: string }> = {
+  purple: {
+    backgroundImage: 'linear-gradient(180deg, #7c3aed 0%, #a78bfa 42%, #ede9fe 100%)'
+  },
+  green: {
+    backgroundImage: 'linear-gradient(180deg, #059669 0%, #34d399 42%, #d1fae5 100%)'
+  },
+  blue: {
+    backgroundImage: 'linear-gradient(180deg, #2563eb 0%, #60a5fa 42%, #dbeafe 100%)'
+  },
+  amber: {
+    backgroundImage: 'linear-gradient(180deg, #c2410c 0%, #fb923c 42%, #ffedd5 100%)'
+  }
+}
+
+export const getThemePrimaryColor: Record<ThemeKey, string> = {
+  purple: '#6d28d9',
+  green:  '#047857',
+  blue:   '#1d4ed8',
+  amber:  '#b45309'
+}