feat: 更新主题色

This commit is contained in:
2026-08-21 17:02:39 +08:00
parent 33192361be
commit 2bb55368cd
10 changed files with 151 additions and 21 deletions

View File

@@ -48,5 +48,10 @@ onUnmounted(() => {
</script> </script>
<style lang="scss"> <style lang="scss">
page,
.wd-root-portal {
--wot-primary-5: #8b5cf6;
--wot-primary-6: #7c3aed;
--wot-primary-7: #6d28d9;
}
</style> </style>

View File

@@ -8,7 +8,7 @@
@close="handeClosePopup" @close="handeClosePopup"
> >
<view class="mb-5 text-center text-base text-gray-700 font-semibold"> <view class="mb-5 text-center text-base text-gray-700 font-semibold">
🩺 记录血压 记录血压
</view> </view>
<wd-form <wd-form
@@ -60,6 +60,16 @@
</view> </view>
</wd-form-item> </wd-form-item>
<!-- 记录时间 -->
<wd-form-item
title="时间"
prop="time"
is-link
:value="formatTime(recordStore.bpForm.time)"
placeholder="请选择记录时间"
@click="showTimePicker = true"
/>
<!-- 备注 --> <!-- 备注 -->
<wd-form-item title="备注" prop="note"> <wd-form-item title="备注" prop="note">
<wd-input <wd-input
@@ -70,15 +80,24 @@
/> />
</wd-form-item> </wd-form-item>
<wd-button type="success" class="mt-10 w-full" @click="saveBp"> <wd-button type="primary" class="mt-10 w-full" @click="saveBp">
保存 保存
</wd-button> </wd-button>
</wd-form> </wd-form>
</wd-popup> </wd-popup>
<wd-datetime-picker
v-model="recordStore.bpForm.time"
v-model:visible="showTimePicker"
placeholder="请选择记录时间"
/>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useRecordStore } from '@/store/record' import { useRecordStore } from '@/store/record'
import { formatTime } from '@/utils'
const showTimePicker = ref(false)
const recordStore = useRecordStore() const recordStore = useRecordStore()

View File

@@ -8,7 +8,7 @@
@close="handeClosePopup" @close="handeClosePopup"
> >
<view class="mb-5 text-center text-base text-gray-700 font-semibold"> <view class="mb-5 text-center text-base text-gray-700 font-semibold">
💉 记录血糖 🩸 记录血糖
</view> </view>
<wd-form <wd-form
@@ -46,6 +46,16 @@
</wd-radio-group> </wd-radio-group>
</wd-form-item> </wd-form-item>
<!-- 记录时间 -->
<wd-form-item
title="时间"
prop="time"
is-link
:value="formatTime(recordStore.glucoseForm.time)"
placeholder="请选择记录时间"
@click="showTimePicker = true"
/>
<!-- 备注 --> <!-- 备注 -->
<wd-form-item title="备注" prop="note"> <wd-form-item title="备注" prop="note">
<wd-input <wd-input
@@ -56,15 +66,24 @@
/> />
</wd-form-item> </wd-form-item>
<wd-button type="success" class="mt-10 w-full" @click="saveGlucose"> <wd-button type="primary" class="mt-10 w-full" @click="saveGlucose">
保存 保存
</wd-button> </wd-button>
</wd-form> </wd-form>
</wd-popup> </wd-popup>
<wd-datetime-picker
v-model="recordStore.glucoseForm.time"
v-model:visible="showTimePicker"
placeholder="请选择记录时间"
/>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useRecordStore } from '@/store/record' import { useRecordStore } from '@/store/record'
import { formatTime } from '@/utils'
const showTimePicker = ref(false)
const recordStore = useRecordStore() const recordStore = useRecordStore()

View File

@@ -8,7 +8,7 @@
@close="handeClosePopup" @close="handeClosePopup"
> >
<view class="mb-5 text-center text-base text-gray-700 font-semibold"> <view class="mb-5 text-center text-base text-gray-700 font-semibold">
💤 记录睡眠 😴 记录睡眠
</view> </view>
<wd-form <wd-form
@@ -43,6 +43,16 @@
</view> </view>
</wd-form-item> </wd-form-item>
<!-- 记录时间 -->
<wd-form-item
title="时间"
prop="time"
is-link
:value="formatTime(recordStore.sleepForm.time)"
placeholder="请选择记录时间"
@click="showTimePicker = true"
/>
<wd-form-item title="备注" prop="note"> <wd-form-item title="备注" prop="note">
<wd-input <wd-input
v-model="recordStore.sleepForm.note" v-model="recordStore.sleepForm.note"
@@ -52,7 +62,7 @@
/> />
</wd-form-item> </wd-form-item>
<wd-button type="success" class="mt-10 w-full" @click="saveSleep"> <wd-button type="primary" class="mt-10 w-full" @click="saveSleep">
保存 保存
</wd-button> </wd-button>
</wd-form> </wd-form>
@@ -71,6 +81,12 @@
v-model:visible="showEndPicker" v-model:visible="showEndPicker"
placeholder="请选择结束时间" placeholder="请选择结束时间"
/> />
<wd-datetime-picker
v-model="recordStore.sleepForm.time"
v-model:visible="showTimePicker"
placeholder="请选择记录时间"
/>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -80,6 +96,7 @@ import { computed, ref } from 'vue'
const recordStore = useRecordStore() const recordStore = useRecordStore()
const showTimePicker = ref(false)
const showStartPicker = ref(false) const showStartPicker = ref(false)
const showEndPicker = ref(false) const showEndPicker = ref(false)

View File

@@ -46,6 +46,16 @@
</view> </view>
</wd-form-item> </wd-form-item>
<!-- 记录时间 -->
<wd-form-item
title="时间"
prop="time"
is-link
:value="formatTime(recordStore.sportForm.time)"
placeholder="请选择记录时间"
@click="showTimePicker = true"
/>
<wd-form-item title="备注" prop="note"> <wd-form-item title="备注" prop="note">
<wd-input <wd-input
v-model="recordStore.sportForm.note" v-model="recordStore.sportForm.note"
@@ -55,15 +65,25 @@
/> />
</wd-form-item> </wd-form-item>
<wd-button type="success" class="mt-10 w-full" @click="saveSport"> <wd-button type="primary" class="mt-10 w-full" @click="saveSport">
保存 保存
</wd-button> </wd-button>
</wd-form> </wd-form>
</wd-popup> </wd-popup>
<wd-datetime-picker
v-model="recordStore.sportForm.time"
v-model:visible="showTimePicker"
placeholder="请选择记录时间"
/>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useRecordStore } from '@/store/record' import { useRecordStore } from '@/store/record'
import { formatTime } from '@/utils'
import { ref } from 'vue'
const showTimePicker = ref(false)
const recordStore = useRecordStore() const recordStore = useRecordStore()

View File

@@ -46,6 +46,16 @@
</wd-radio-group> </wd-radio-group>
</wd-form-item> </wd-form-item>
<!-- 记录时间 -->
<wd-form-item
title="时间"
prop="time"
is-link
:value="formatTime(recordStore.tempForm.time)"
placeholder="请选择记录时间"
@click="showTimePicker = true"
/>
<!-- 备注 --> <!-- 备注 -->
<wd-form-item title="备注" prop="note"> <wd-form-item title="备注" prop="note">
<wd-input <wd-input
@@ -56,15 +66,25 @@
/> />
</wd-form-item> </wd-form-item>
<wd-button type="success" class="mt-10 w-full" @click="saveTemp"> <wd-button type="primary" class="mt-10 w-full" @click="saveTemp">
保存 保存
</wd-button> </wd-button>
</wd-form> </wd-form>
</wd-popup> </wd-popup>
<wd-datetime-picker
v-model="recordStore.tempForm.time"
v-model:visible="showTimePicker"
placeholder="请选择记录时间"
/>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useRecordStore } from '@/store/record' import { useRecordStore } from '@/store/record'
import { formatTime } from '@/utils'
import { ref } from 'vue'
const showTimePicker = ref(false)
const recordStore = useRecordStore() const recordStore = useRecordStore()

View File

@@ -19,6 +19,16 @@
</view> </view>
</wd-form-item> </wd-form-item>
<!-- 记录时间 -->
<wd-form-item
title="时间"
prop="time"
is-link
:value="formatTime(recordStore.weightForm.time)"
placeholder="请选择记录时间"
@click="showTimePicker = true"
/>
<wd-form-item title="备注" prop="budget"> <wd-form-item title="备注" prop="budget">
<wd-input <wd-input
v-model="recordStore.weightForm.note" v-model="recordStore.weightForm.note"
@@ -27,15 +37,24 @@
placeholder="请输入备注信息" placeholder="请输入备注信息"
/> />
</wd-form-item> </wd-form-item>
<wd-button type="success" class="mt-10 w-full" @click="saveWeight"> <wd-button type="primary" class="mt-10 w-full" @click="saveWeight">
保存 保存
</wd-button> </wd-button>
</wd-form> </wd-form>
</wd-popup> </wd-popup>
<wd-datetime-picker
v-model="recordStore.weightForm.time"
v-model:visible="showTimePicker"
placeholder="请选择记录时间"
/>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useRecordStore } from '@/store/record' import { useRecordStore } from '@/store/record'
import { formatTime } from '@/utils'
const showTimePicker = ref(false)
const recordStore = useRecordStore() const recordStore = useRecordStore()

View File

@@ -73,7 +73,7 @@
<glucose-popup /> <glucose-popup />
<temp-popup /> <temp-popup />
<wd-fab v-if="recordStore.showFab" type="success" :gap="{ bottom: 60 }" :expandable="false" @click="handelFabClick" /> <wd-fab v-if="recordStore.showFab" type="primary" :gap="{ bottom: 60 }" :expandable="false" @click="handelFabClick" />
</view> </view>
</template> </template>

View File

@@ -1,17 +1,19 @@
<template> <template>
<view class="min-h-screen bg-[#f2f4f3]"> <view class="min-h-screen bg-[#f2f4f3]">
<view class="sticky top-0 z-10 bg-white p-2"> <view class="sticky top-0 z-10 flex flex-col gap-2 bg-white p-2">
<view class="flex items-center justify-evenly"> <view class="flex items-center justify-evenly">
<wd-button icon="caret-left" type="success" :round="true" size="small" @click="changeDay(-1)" /> <wd-button icon="caret-left" type="primary" :round="true" size="small" @click="changeMonth(-1)" />
<view class="flex flex-col items-center" @click="openDatePicker"> <view class="flex flex-col items-center" @click="openDatePicker">
<text class="text-base text-gray-800 font-semibold">{{ displayDate }}</text> <text class="text-base text-gray-800 font-semibold">{{ displayDate }}</text>
</view> </view>
<wd-button icon="caret-right" type="success" :round="true" size="small" @click="changeDay(1)" /> <wd-button icon="caret-right" type="primary" :round="true" size="small" @click="changeMonth(1)" />
<wd-button type="success" size="small" @click="goToday"> <wd-button type="primary" size="small" @click="goToday">
回到今天 回到今天
</wd-button> </wd-button>
</view> </view>
<wd-segmented v-model:value="current" :options="list" style="overflow: auto;" />
</view> </view>
<!-- 时间轴区域 --> <!-- 时间轴区域 -->
@@ -105,7 +107,7 @@
<wd-datetime-picker <wd-datetime-picker
v-model="currentDate" v-model="currentDate"
v-model:visible="showDatePicker" v-model:visible="showDatePicker"
type="date" type="year-month"
:max-date="Date.now()" :max-date="Date.now()"
@confirm="onDateConfirm" @confirm="onDateConfirm"
/> />
@@ -121,18 +123,19 @@ definePage({
}, },
}) })
// ===== 日期逻辑 =====
const currentDate = ref(Date.now()) const currentDate = ref(Date.now())
const showDatePicker = ref(false) const showDatePicker = ref(false)
const list = ref<string[]>(['所有', '体重', '睡眠', '运动', '血压', '血糖', '心率'])
const current = ref('所有')
const displayDate = computed(() => { const displayDate = computed(() => {
const d = new Date(currentDate.value) const d = new Date(currentDate.value)
return `${d.getFullYear()}${d.getMonth() + 1}${d.getDate()}` return `${d.getFullYear()}${d.getMonth() + 1}`
}) })
function changeDay(offset: number) { function changeMonth(offset: number) {
const d = new Date(currentDate.value) const d = new Date(currentDate.value)
d.setDate(d.getDate() + offset) d.setMonth(d.getMonth() + offset)
currentDate.value = d.getTime() currentDate.value = d.getTime()
} }
@@ -216,3 +219,11 @@ onMounted(() => {
// 这里可以接接口拉取当天的记录数据 // 这里可以接接口拉取当天的记录数据
}) })
</script> </script>
<style scoped lang="scss">
:deep(.wd-segmented__item) {
min-width: 60px;
flex-shrink: 0;
justify-content: center;
}
</style>

View File

@@ -88,7 +88,7 @@ onMounted(() => {
}) })
}) })
// #endif // #endif
const activeColor = 'var(--wot-color-theme, #07C160)' const activeColor = 'var(--wot-color-theme, #8b5cf6)'
const inactiveColor = '#666' const inactiveColor = '#666'
function getColorByIndex(index: number) { function getColorByIndex(index: number) {
return tabbarStore.curIdx === index ? activeColor : inactiveColor return tabbarStore.curIdx === index ? activeColor : inactiveColor