From bc6512f668b2604619dc06ca1fdcfd765bc76178 Mon Sep 17 00:00:00 2001
From: Cxx0822 <1556464090@qq.com>
Date: Tue, 1 Sep 2026 11:15:00 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E8=89=B2=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |  17 +-
 src/components/Profile/OverviewPopup.vue      |   3 +-
 src/components/Profile/ThemePopup.vue         |  49 +++++
 src/pages/index/index.vue                     | 196 +++++++++---------
 src/pages/record/index.vue                    | 146 ++++++-------
 src/pages/stats/index.vue                     |   5 +-
 src/pages/user/index.vue                      | 107 +++++-----
 src/store/app.ts                              |   1 +
 src/store/profile.ts                          |   2 +
 .../liu-drag-button/liu-drag-button.vue       |   8 +-
 src/utils/profile.ts                          |   9 +
 src/utils/themes.ts                           |  72 +++++++
 12 files changed, 386 insertions(+), 229 deletions(-)
 create mode 100644 src/components/Profile/ThemePopup.vue
 create mode 100644 src/utils/themes.ts

diff --git a/src/App.vue b/src/App.vue
index f84973b..8b31b05 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/Profile/OverviewPopup.vue b/src/components/Profile/OverviewPopup.vue
index d662391..1e92aaa 100644
--- a/src/components/Profile/OverviewPopup.vue
+++ b/src/components/Profile/OverviewPopup.vue
@@ -31,8 +31,7 @@
 
 <script lang="ts" setup>
 import { useProfileStore } from '@/store/profile'
-import { countRecordsByMonth, getTotalCount } from "@/utils/record";
-import {saveOverview} from "@/utils/profile";
+import { saveOverview } from "@/utils/profile";
 
 const profileStore = useProfileStore()
 
diff --git a/src/components/Profile/ThemePopup.vue b/src/components/Profile/ThemePopup.vue
new file mode 100644
index 0000000..5817e66
--- /dev/null
+++ b/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>
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 3d75d92..864db6c 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -1,111 +1,114 @@
 <template>
-  <view class="min-h-screen flex flex-col bg-gradient-to-b from-[#a78bfa] to-[#f3e8ff]">
-    <view class="self-center py-3 flex items-center gap-2 text-gray-800">
-      <wd-img :width="40" :height="40" :src="imgURL" />
+  <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" />
 
-      <view class="flex min-w-0 flex-col">
-        <text class="truncate text-lg text-white font-semibold">
-          {{ greeting }}
-        </text>
-        <text class="mt-0.5 text-xs text-white/70">
-          {{ today }} · 记录每一次改变
-        </text>
+        <view class="flex min-w-0 flex-col">
+          <text class="truncate text-lg text-white font-semibold">
+            {{ greeting }}
+          </text>
+          <text class="mt-0.5 text-xs text-white/70">
+            {{ today }} · 记录每一次改变
+          </text>
+        </view>
+
+        <wd-button type="info" size="mini" :disabled="hasSignedToday" @click="handleSign">
+          {{ hasSignedToday ? '已签到' : '签到'}}
+        </wd-button>
       </view>
 
-      <wd-button type="info" size="mini" :disabled="hasSignedToday" @click="handleSign">
-        {{ hasSignedToday ? '已签到' : '签到'}}
-      </wd-button>
-    </view>
-
-    <wd-card title="📊 今日概览">
-      <view class="grid grid-cols-2 gap-3">
-        <view
-            v-for="item in overviewItems"
-            :key="item.label"
-            class="min-h-[80px] relative rounded-2xl bg-[#f8faf7] px-3.5 py-3 shadow-sm border border-[#eef0ef] flex flex-col justify-between"
-        >
-          <view class="flex items-center justify-between">
-            <view class="flex items-center gap-1.5">
-              <text class="text-lg">{{ item.icon }}</text>
-              <text class="text-sm text-gray-400 font-medium">{{ item.label }}</text>
+      <wd-card title="📊 今日概览">
+        <view class="grid grid-cols-2 gap-3">
+          <view
+              v-for="item in overviewItems"
+              :key="item.label"
+              class="min-h-[80px] relative rounded-2xl bg-[#f8faf7] px-3.5 py-3 shadow-sm border border-[#eef0ef] flex flex-col justify-between"
+          >
+            <view class="flex items-center justify-between">
+              <view class="flex items-center gap-1.5">
+                <text class="text-lg">{{ item.icon }}</text>
+                <text class="text-sm text-gray-400 font-medium">{{ item.label }}</text>
+              </view>
+              <wd-button v-if="item.value === '未记录'"
+                         size="mini" round icon="plus"
+                         :plain="true" type="primary"
+                         @click="addClick(item.type)"/>
             </view>
-            <wd-button v-if="item.value === '未记录'"
-                       size="mini" round icon="plus"
-                       :plain="true" type="primary"
-                       @click="addClick(item.type)"/>
+
+            <text class="mt-2 text-base text-gray-800 font-bold tracking-tight">
+              {{ item.value }}
+            </text>
+
+            <view class="mt-auto pt-1.5">
+              <text class="text-sm text-gray-400">{{ item.sub }}</text>
+            </view>
+          </view>
+        </view>
+      </wd-card>
+
+      <!-- 今日计划 -->
+      <wd-card title="🎯 今日计划">
+        <wd-empty v-if="plans.length === 0" icon="no-content" tip="暂无计划" />
+
+        <view v-for="(plan, idx) in plans" :key="idx">
+          <view class="flex items-center justify-between py-2.5">
+            <view class="flex items-center gap-2.5">
+              <text class="text-lg">{{ plan.icon }}</text>
+              <text class="text-sm">{{ plan.label }}</text>
+            </view>
+
+            <wd-tag v-if="plan.done" type="primary" round>
+              已完成
+            </wd-tag>
+            <wd-tag v-else type="danger" round>
+              未完成
+            </wd-tag>
+          </view>
+          <view v-if="idx < plans.length - 1" class="h-1px w-full bg-[#f2f4f3]" />
+        </view>
+      </wd-card>
+
+      <wd-card title="🔥 今日资讯">
+        <wd-empty v-if="tipList.length === 0" icon="no-content"
+                  :tip="errorMessage || '获取资讯失败，请检查网络连接或联系管理员'" />
+
+        <view
+            v-for="(item, index) in tipList"
+            :key="index"
+            class="content-text flex flex-col py-[20rpx] border-b border-[#f5f5f5] last:border-b-0"
+            @click="viewTipClick(item)"
+        >
+          <view class="flex items-center gap-[12rpx]">
+            <wd-tag type="primary" round>{{ item.category }}</wd-tag>
+            <text class="text-[30rpx] font-semibold text-[#333] truncate">
+              {{ item.title }}
+            </text>
+            <wd-icon name="caret-right" size="24px"></wd-icon>
           </view>
 
-          <text class="mt-2 text-base text-gray-800 font-bold tracking-tight">
-            {{ item.value }}
+          <text class="mt-[8rpx] text-[26rpx] text-[#999] leading-normal line-clamp-2">
+            {{ item.summary }}
           </text>
-
-          <view class="mt-auto pt-1.5">
-            <text class="text-sm text-gray-400">{{ item.sub }}</text>
-          </view>
         </view>
-      </view>
-    </wd-card>
+      </wd-card>
 
-    <!-- 今日计划 -->
-    <wd-card title="🎯 今日计划">
-      <wd-empty v-if="plans.length === 0" icon="no-content" tip="暂无计划" />
+      <record-popup />
 
-      <view v-for="(plan, idx) in plans" :key="idx">
-        <view class="flex items-center justify-between py-2.5">
-          <view class="flex items-center gap-2.5">
-            <text class="text-lg">{{ plan.icon }}</text>
-            <text class="text-sm">{{ plan.label }}</text>
-          </view>
+      <weight-popup />
+      <sleep-popup />
+      <sport-popup />
+      <blood-pressure-popup />
+      <blood-sugar-popup />
+      <temperature-popup />
+      <tip-popup />
 
-          <wd-tag v-if="plan.done" type="primary" round>
-            已完成
-          </wd-tag>
-          <wd-tag v-else type="danger" round>
-            未完成
-          </wd-tag>
-        </view>
-        <view v-if="idx < plans.length - 1" class="h-1px w-full bg-[#f2f4f3]" />
-      </view>
-    </wd-card>
-
-    <wd-card title="🔥 今日资讯">
-      <wd-empty v-if="tipList.length === 0" icon="no-content"
-                :tip="errorMessage || '获取资讯失败，请检查网络连接或联系管理员'" />
-
-      <view
-          v-for="(item, index) in tipList"
-          :key="index"
-          class="content-text flex flex-col py-[20rpx] border-b border-[#f5f5f5] last:border-b-0"
-          @click="viewTipClick(item)"
-      >
-        <view class="flex items-center gap-[12rpx]">
-          <wd-tag type="primary" round>{{ item.category }}</wd-tag>
-          <text class="text-[30rpx] font-semibold text-[#333] truncate">
-            {{ item.title }}
-          </text>
-          <wd-icon name="caret-right" size="24px"></wd-icon>
-        </view>
-
-        <text class="mt-[8rpx] text-[26rpx] text-[#999] leading-normal line-clamp-2">
-          {{ item.summary }}
-        </text>
-      </view>
-    </wd-card>
-
-    <record-popup />
-
-    <weight-popup />
-    <sleep-popup />
-    <sport-popup />
-    <blood-pressure-popup />
-    <blood-sugar-popup />
-    <temperature-popup />
-    <tip-popup />
-
-    <liu-drag-button v-if="recordStore.showFab" @clickBtn="handelFabClick">
-      <wd-icon name="plus" size="24px"></wd-icon>
-    </liu-drag-button>
-  </view>
+      <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',
diff --git a/src/pages/record/index.vue b/src/pages/record/index.vue
index ea9b478..f118926 100644
--- a/src/pages/record/index.vue
+++ b/src/pages/record/index.vue
@@ -1,85 +1,88 @@
 <template>
-  <view class="min-h-screen flex flex-col bg-gradient-to-b from-[#a78bfa] to-[#f3e8ff]">
-    <wd-segmented v-model:value="appStore.viewRecordType" :options="viewTypeSegmentList"
-                  @change="handleChangeSegment"
-                  custom-style="align-self: center; width: 60%; margin: 10px;">
-      <template #label="{ option }">
-        <view class="name">{{ option.payload }}</view>
-      </template>
-    </wd-segmented>
+  <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;">
+        <template #label="{ option }">
+          <view class="name">{{ option.payload }}</view>
+        </template>
+      </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"
-                   @change="handleChangeDate" @monthSwitch="monthSwitch"/>
-    </wd-card>
+      <wd-card v-if="appStore.viewRecordType === 'calendar'" custom-class="!mx-2 !mb-0">
+        <wu-calendar :date="selectDate" :selected="calendarSelect" :itemHeight="45" :insert="true"
+                     :color="getThemePrimaryColor[appStore.themeColor]"
+                     @change="handleChangeDate" @monthSwitch="monthSwitch"/>
+      </wd-card>
 
-    <wd-card v-if="appStore.viewRecordType === 'list'">
-      <view class="sticky top-0 z-10 flex flex-col gap-2 p-2">
-        <view class="flex items-center justify-evenly">
-          <wd-button icon="caret-left" type="primary" :round="true" size="small" @click="changeMonth(-1)" />
-          <view class="flex flex-col items-center" @click="openDatePicker">
-            <text class="text-base text-gray-800 font-semibold">{{ displayDate }}</text>
-          </view>
-          <wd-button icon="caret-right" type="primary" :round="true" size="small" @click="changeMonth(1)" />
-        </view>
-
-        <wd-segmented v-model:value="currentRecordTypeSegment"
-                      :options="recordTypeSegmentList"
-                      @change="handleChangeSegment">
-          <template #label="{ option }">
-            <view class="name">{{ option.payload }}</view>
-          </template>
-        </wd-segmented>
-      </view>
-    </wd-card>
-
-    <!-- 时间轴区域 -->
-    <wd-card>
-      <wd-empty v-if="grouped.length === 0" icon="no-content" tip="暂无记录" />
-
-      <view v-for="group in grouped" :key="group.date"
-            class="mb-2 p-1 rounded odd:bg-gray-100 even:bg-white">
-        <view class="mb-2 flex items-center gap-2">
-          <text class="text-sm text-gray-500 font-bold">{{ group.date }}</text>
-          <text class="text-sm text-gray-400">周{{ group.weekday }}</text>
-        </view>
-
-        <view
-            v-for="(item, idx) in group.items"
-            :key="item.id || idx"
-            class="mb-2 last:mb-0"
-            @longpress="deleteClick(item)"
-        >
-          <view class="flex items-center justify-between gap-1">
-            <text class="text-sm text-gray-400 font-mono">{{ item.time }}</text>
-            <wd-tag :type="getRecordStatus(item).type" round>
-              {{ getRecordStatus(item).label }}
-            </wd-tag>
+      <wd-card v-if="appStore.viewRecordType === 'list'">
+        <view class="sticky top-0 z-10 flex flex-col gap-2 p-2">
+          <view class="flex items-center justify-evenly">
+            <wd-button icon="caret-left" type="primary" :round="true" size="small" @click="changeMonth(-1)" />
+            <view class="flex flex-col items-center" @click="openDatePicker">
+              <text class="text-base text-gray-800 font-semibold">{{ displayDate }}</text>
+            </view>
+            <wd-button icon="caret-right" type="primary" :round="true" size="small" @click="changeMonth(1)" />
           </view>
 
-          <view class="mt-1.5 flex items-center gap-2">
-            <text>{{ getRecordMeta(item.type).icon }}</text>
-            <text class="text-gray-700 font-medium">{{ getRecordMeta(item.type).label }}</text>
+          <wd-segmented v-model:value="currentRecordTypeSegment"
+                        :options="recordTypeSegmentList"
+                        @change="handleChangeSegment">
+            <template #label="{ option }">
+              <view class="name">{{ option.payload }}</view>
+            </template>
+          </wd-segmented>
+        </view>
+      </wd-card>
+
+      <!-- 时间轴区域 -->
+      <wd-card>
+        <wd-empty v-if="grouped.length === 0" icon="no-content" tip="暂无记录" />
+
+        <view v-for="group in grouped" :key="group.date"
+              class="mb-2 p-1 rounded odd:bg-gray-100 even:bg-white">
+          <view class="mb-2 flex items-center gap-2">
+            <text class="text-sm text-gray-500 font-bold">{{ group.date }}</text>
+            <text class="text-sm text-gray-400">周{{ group.weekday }}</text>
           </view>
 
-          <text class="mt-1.5 block text-l text-gray-800 font-bold">{{ getRecordValue(item) }}</text>
+          <view
+              v-for="(item, idx) in group.items"
+              :key="item.id || idx"
+              class="mb-2 last:mb-0"
+              @longpress="deleteClick(item)"
+          >
+            <view class="flex items-center justify-between gap-1">
+              <text class="text-sm text-gray-400 font-mono">{{ item.time }}</text>
+              <wd-tag :type="getRecordStatus(item).type" round>
+                {{ getRecordStatus(item).label }}
+              </wd-tag>
+            </view>
 
-          <text class="mt-1.5 block text-sm text-gray-400 leading-relaxed">{{ item.note }}</text>
+            <view class="mt-1.5 flex items-center gap-2">
+              <text>{{ getRecordMeta(item.type).icon }}</text>
+              <text class="text-gray-700 font-medium">{{ getRecordMeta(item.type).label }}</text>
+            </view>
 
-          <view v-if="idx !== group.items.length - 1" class="mt-1.5 h-[1px] flex-1 bg-gray-200" />
+            <text class="mt-1.5 block text-l text-gray-800 font-bold">{{ getRecordValue(item) }}</text>
+
+            <text class="mt-1.5 block text-sm text-gray-400 leading-relaxed">{{ item.note }}</text>
+
+            <view v-if="idx !== group.items.length - 1" class="mt-1.5 h-[1px] flex-1 bg-gray-200" />
+          </view>
         </view>
-      </view>
-    </wd-card>
+      </wd-card>
 
-    <!-- 日期选择器 -->
-    <wd-datetime-picker
-      v-model="currentDate"
-      v-model:visible="showDatePicker"
-      type="year-month"
-      :max-date="Date.now()"
-      @confirm="onDateConfirm"
-    />
-  </view>
+      <!-- 日期选择器 -->
+      <wd-datetime-picker
+          v-model="currentDate"
+          v-model:visible="showDatePicker"
+          type="year-month"
+          :max-date="Date.now()"
+          @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('')
diff --git a/src/pages/stats/index.vue b/src/pages/stats/index.vue
index 2dab798..8caf543 100644
--- a/src/pages/stats/index.vue
+++ b/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[],
diff --git a/src/pages/user/index.vue b/src/pages/user/index.vue
index 5703e97..9c7e55e 100644
--- a/src/pages/user/index.vue
+++ b/src/pages/user/index.vue
@@ -1,67 +1,73 @@
 <template>
-  <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-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="getThemePrimaryColor[appStore.themeColor]" />
 
-        <view class="flex flex-col">
-          <text class="text-lg text-gray-800 font-semibold">
-            {{ profile.name || '未设置姓名' }}
-          </text>
-          <text class="mt-0.5 text-xs text-gray-400">
-            {{ genderText }} · {{ profile.height ? `${profile.height} cm` : '身高未填' }}
-          </text>
+          <view class="flex flex-col">
+            <text class="text-lg text-gray-800 font-semibold">
+              {{ profile.name || '未设置姓名' }}
+            </text>
+            <text class="mt-0.5 text-xs text-gray-400">
+              {{ genderText }} · {{ profile.height ? `${profile.height} cm` : '身高未填' }}
+            </text>
+          </view>
+          <view class="ml-auto">
+            <wd-button size="small" plain type="primary" @click="openProfile">
+              编辑
+            </wd-button>
+          </view>
         </view>
-        <view class="ml-auto">
-          <wd-button size="small" plain type="primary" @click="openProfile">
-            编辑
+      </wd-card>
+
+      <wd-card title="积分成就" type="rectangle">
+        <view class="flex items-center justify-between">
+          <view class="mt-2 space-y-1 text-gray-600">
+            <view>✨ 当前积分：{{ appStore.points }}分</view>
+            <view>📊 记录次数：{{ appStore.recordCount }}次</view>
+            <view>🏆 当前成就：{{ appStore.achievement }}</view>
+          </view>
+
+          <wd-button size="small" plain type="primary" @click="openPointPopup">
+            查看说明
           </wd-button>
         </view>
-      </view>
-    </wd-card>
 
-    <wd-card title="积分成就" type="rectangle">
-      <view class="flex items-center justify-between">
-        <view class="mt-2 space-y-1 text-gray-600">
-          <view>✨ 当前积分：{{ appStore.points }}分</view>
-          <view>📊 记录次数：{{ appStore.recordCount }}次</view>
-          <view>🏆 当前成就：{{ appStore.achievement }}</view>
+        <view class="mt-2 text-xs text-gray-400">
+          坚持记录健康数据，解锁更多成就
         </view>
+      </wd-card>
 
-        <wd-button size="small" plain type="primary" @click="openPointPopup">
-          查看说明
-        </wd-button>
-      </view>
+      <wd-cell-group>
+        <wd-cell size="large" title="记录默认值" is-link @click="openDefaultPopup"/>
+        <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>
 
-      <view class="mt-2 text-xs text-gray-400">
-        坚持记录健康数据，解锁更多成就
-      </view>
-    </wd-card>
+      <wd-text :text="`版本号：${appStore.version}`" custom-style="margin-top: 5px;display:block; text-align:center;"></wd-text>
 
-    <wd-cell-group>
-      <wd-cell size="large" title="记录默认值" is-link @click="openDefaultPopup"/>
-      <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="openStoragePopup"/>
-    </wd-cell-group>
+      <profile-popup />
 
-    <wd-text :text="`版本号：${appStore.version}`" custom-style="margin-top: 5px;display:block; text-align:center;"></wd-text>
+      <storage-popup />
 
-    <profile-popup />
+      <overview-popup />
 
-    <storage-popup />
+      <plan-popup />
 
-    <overview-popup />
+      <stats-popup />
 
-    <plan-popup />
+      <default-popup />
 
-    <stats-popup />
+      <point-popup />
 
-    <default-popup />
-
-    <point-popup />
-  </view>
+      <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
diff --git a/src/store/app.ts b/src/store/app.ts
index b94d655..e875c53 100644
--- a/src/store/app.ts
+++ b/src/store/app.ts
@@ -9,6 +9,7 @@ export const useAppStore = defineStore('app', {
     recordCount: 0,
     achievement: '',
     showTipPopup: false,
+    themeColor: 'purple',
     currentTip: {
       title: '',
       summary: '',
diff --git a/src/store/profile.ts b/src/store/profile.ts
index 269c0e2..05d085f 100644
--- a/src/store/profile.ts
+++ b/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,
diff --git a/src/uni_modules/liu-drag-button_1.0.5/components/liu-drag-button/liu-drag-button.vue b/src/uni_modules/liu-drag-button_1.0.5/components/liu-drag-button/liu-drag-button.vue
index d81d170..8b10e7c 100644
--- a/src/uni_modules/liu-drag-button_1.0.5/components/liu-drag-button/liu-drag-button.vue
+++ b/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;
diff --git a/src/utils/profile.ts b/src/utils/profile.ts
index 9ff6bd0..8bd0a87 100644
--- a/src/utils/profile.ts
+++ b/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)
+}
+
diff --git a/src/utils/themes.ts b/src/utils/themes.ts
new file mode 100644
index 0000000..ff2fdf4
--- /dev/null
+++ b/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'
+}