tt/youlai-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip: 临时提交

Browse Source
This commit is contained in:
Ray.Hao
2025-08-01 14:37:45 +08:00
parent a95fbd6a54
commit d48812821f
22 changed files with 355 additions and 649 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/login/index.vue
View File

@@ -126,7 +126,7 @@ import { type LoginData } from "@/api/auth";
import { useUserStore } from "@/store/modules/user.store";
import { useToast } from "wot-design-uni";
import { useWechat } from "@/composables/useWechat";
import { useThemeStore } from "@/composables/useTheme";
import { useThemeStore } from "@/composables/types/theme";
import { computed, onMounted } from "vue";
const loginFormRef = ref();

5
src/pages/mine/index.vue
View File

@@ -159,11 +159,8 @@
</template>
<script lang="ts" setup>
import { onShow } from "@dcloudio/uni-app";
import { useToast } from "wot-design-uni";
import { useUserStore } from "@/store/modules/user.store";
import { useThemeStore } from "@/composables/useTheme";
import { computed } from "vue";
import { useUserStore, useThemeStore } from "@/store";
const toast = useToast();
const userStore = useUserStore();

16
src/pages/mine/settings/agreement/index.vue
View File

@@ -1,12 +1,5 @@
<template>
<view class="app-container">
<wd-card>
<view class="flex-col-center py-4">
<text class="text-xl font-bold mb-2">用户协议</text>
<text class="text-sm text-gray-500">更新日期：2024年3月15日</text>
</view>
</wd-card>
<wd-collapse v-model="activeNames" accordion>
<wd-collapse-item
v-for="(section, index) in agreementContent"
@@ -74,4 +67,13 @@ const handleAgree = () => {
};
</script>
<route lang="json">
{
"name": "theme",
"style": {
"navigationBarTitleText": "用户协议"
}
}
</route>
<style lang="scss" scoped></style>

12
src/pages/mine/settings/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="app-container">
<view class="app-container dark-mode">
<wd-cell-group>
<wd-cell v-if="isLogin" title="个人资料" icon="user" is-link @click="navigateToProfile" />
<wd-cell
@@ -195,6 +195,16 @@ onLoad(() => {
getCacheSize();
});
</script>
<route lang="json">
{
"name": "settings",
"style": {
"navigationBarTitleText": "设置"
}
}
</route>
<style lang="scss" scoped>
.logout-section {
display: flex;

458
src/pages/mine/settings/theme/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="theme-settings-container">
<view class="app-container">
<!-- 页面标题 -->
<view class="page-header">
<text class="page-title">主题设置</text>
@@ -95,16 +95,6 @@
</wd-grid>
</wd-card>
<!-- 跟随系统设置 -->
<wd-card class="setting-section">
<wd-cell title="跟随系统主题" :value="followSystemActive ? '已开启' : '已关闭'">
<wd-switch :model-value="followSystemActive" @change="handleFollowSystemChange" />
</wd-cell>
<view class="follow-system-tip p-3 text-sm text-gray-500">
开启后，应用会自动适配系统的深色/浅色模式设置
</view>
</wd-card>
<!-- 操作按钮 -->
<wd-card class="action-section">
<wd-button type="info" size="large" block @click="handleResetTheme">重置为默认主题</wd-button>
@@ -146,17 +136,13 @@
</template>
<script lang="ts" setup>
import { useThemeStore } from "@/composables/useTheme";
import { themeColorOptions } from "@/composables/types/theme";
import { storeToRefs } from "pinia";
import { useTheme } from "@/composables/useTheme";
const themeStore = useThemeStore();
// 将store中的数据解构为响应式引用
const { themeVars } = storeToRefs(themeStore);
// 使用主题组合函数
const { isDark, themeVars, themeColorOptions, toggleTheme, setThemeColor } = useTheme();
// 创建响应式的计算属性来解决类型问题
const isDarkMode = computed(() => themeStore.theme === "dark");
const followSystemActive = computed(() => themeStore.followSystem);
// 创建响应式的计算属性
const isDarkMode = computed(() => isDark.value);
// 自定义颜色输入
const customColor = ref("");
@@ -169,7 +155,7 @@ const currentThemeColor = computed(() => {
// 选择预设颜色
const handleSelectColor = (color: (typeof themeColorOptions)[0]) => {
themeStore.setCurrentThemeColor(color);
setThemeColor(color);
customColor.value = color.primary;
// 提示
@@ -212,7 +198,7 @@ const applyCustomColor = () => {
primary: color,
};
themeStore.setCurrentThemeColor(customColorOption);
setCurrentThemeColor(customColorOption);
showCustomColorInput.value = false;
// 提示
@@ -230,7 +216,7 @@ const handleResetTheme = () => {
content: "确定要重置为默认主题吗？",
success: (res) => {
if (res.confirm) {
themeStore.setCurrentThemeColor(themeColorOptions[0]);
setThemeColor(themeColorOptions[0]);
customColor.value = themeColorOptions[0].primary;
uni.showToast({
@@ -245,7 +231,7 @@ const handleResetTheme = () => {
// 切换暗黑模式
const handleToggleDarkMode = () => {
themeStore.toggleTheme();
toggleTheme();
nextTick(() => {
uni.showToast({
title: `已切换到${isDarkMode.value ? "暗黑" : "浅色"}模式`,
@@ -255,126 +241,50 @@ const handleToggleDarkMode = () => {
});
};
// 处理跟随系统设置的变更
const handleFollowSystemChange = (value: boolean) => {
themeStore.setFollowSystem(value);
};
onLoad(() => {
// 初始化自定义颜色输入框
customColor.value = currentThemeColor.value;
});
onMounted(() => {
// 初始化自定义颜色输入框
customColor.value = currentThemeColor.value;
// 初始化主题
themeStore.initTheme();
});
// 页面显示时确保主题色同步
onShow(() => {
customColor.value = currentThemeColor.value;
console.log("主题设置页面显示，当前主题:", {
mode: isDarkMode.value ? "dark" : "light",
color: currentThemeColor.value,
});
});
</script>
<style lang="scss" scoped>
.theme-settings-container {
min-height: 100vh;
padding: 20rpx;
background-color: var(--wot-color-bg-light, #f8f9fa);
transition: background-color 0.3s ease;
// 强制 Wot 组件应用暗黑模式样式
:deep(.wd-card) {
background: var(--wot-card-bg-color, #fff);
border-radius: 16rpx;
box-shadow: var(--wot-card-shadow, 0 2rpx 12rpx rgba(0, 0, 0, 0.05));
transition: background-color 0.3s ease;
}
:deep(.wd-cell) {
color: var(--wot-color-text, #333);
background-color: var(--wot-card-bg-color, #fff);
.wd-cell__title {
color: var(--wot-color-text, #333) !important;
}
.wd-cell__value {
color: var(--wot-color-text-secondary, #666) !important;
}
.wd-cell__right-icon {
color: var(--wot-color-text-secondary, #999) !important;
}
}
:deep(.wd-grid-item) {
color: var(--wot-color-text, #333) !important;
background-color: var(--wot-card-bg-color, #fff) !important;
}
// 专门为颜色预览块重置背景色
:deep(.color-item) {
background-color: transparent !important;
.color-preview {
background-color: inherit !important;
}
}
:deep(.wd-button) {
&[type="primary"] {
color: #fff !important;
background-color: var(--wot-color-theme, #165dff) !important;
}
&[type="info"] {
color: #fff !important;
background-color: var(--wot-color-info, #909399) !important;
}
}
:deep(.wd-input) {
color: var(--wot-color-text, #333) !important;
background-color: var(--wot-card-bg-color, #fff) !important;
}
:deep(.wd-popup) {
background-color: var(--wot-popup-bg-color, #fff) !important;
}
.custom-color-popup {
padding: 40rpx 30rpx;
background: var(--wot-popup-bg-color, #fff);
border-radius: 20rpx 20rpx 0 0;
<route lang="json">
{
"name": "theme",
"style": {
"navigationBarTitleText": "主题设置"
}
}
</route>
<style lang="scss" scoped>
// 基础布局
.page-header {
padding: 40rpx 20rpx;
margin-bottom: 30rpx;
text-align: center;
background: linear-gradient(135deg, var(--wot-color-theme, #165dff) 0%, #667eea 100%);
border-radius: 16rpx;
}
.page-title {
display: block;
margin-bottom: 10rpx;
font-size: 36rpx;
font-weight: bold;
color: #fff;
}
.page-title {
display: block;
margin-bottom: 10rpx;
font-size: 36rpx;
font-weight: bold;
color: #fff;
}
.page-subtitle {
font-size: 26rpx;
color: rgba(255, 255, 255, 0.8);
.page-subtitle {
font-size: 26rpx;
color: rgba(255, 255, 255, 0.8);
}
}
.setting-section {
@@ -386,45 +296,43 @@ onShow(() => {
align-items: center;
padding: 30rpx 30rpx 20rpx;
border-bottom: 1rpx solid var(--wot-color-border, #f0f0f0);
.section-title {
margin-left: 12rpx;
font-size: 32rpx;
font-weight: 600;
color: var(--wot-color-text, #333);
}
}
.section-title {
margin-left: 12rpx;
font-size: 32rpx;
font-weight: 600;
color: var(--wot-color-text, #333);
}
// 颜色选择区域
.color-section {
padding: 30rpx;
}
.color-label {
margin-bottom: 20rpx;
font-size: 28rpx;
color: var(--wot-color-text-secondary, #666);
}
.color-label {
margin-bottom: 20rpx;
font-size: 28rpx;
color: var(--wot-color-text-secondary, #666);
}
.color-grid {
display: flex;
flex-wrap: wrap;
gap: 20rpx;
justify-content: space-between;
.color-grid {
display: flex;
flex-wrap: wrap;
gap: 20rpx;
justify-content: space-between;
}
}
.color-item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: calc(25% - 15rpx);
padding: 10rpx;
cursor: pointer;
transition: all 0.3s ease;
.color-preview {
position: relative;
display: flex;
align-items: center;
justify-content: center;
@@ -434,18 +342,17 @@ onShow(() => {
border-radius: 12rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.check-icon {
font-size: 24rpx;
font-weight: bold;
color: #fff;
text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.5);
.check-icon {
font-size: 24rpx;
font-weight: bold;
color: #fff;
text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.5);
}
}
.color-name {
font-size: 22rpx;
line-height: 1.2;
color: var(--wot-color-text-secondary, #666);
text-align: center;
}
@@ -460,39 +367,41 @@ onShow(() => {
}
}
// 当前主题色显示
.current-theme-section {
padding: 30rpx;
.current-theme-item {
display: flex;
align-items: center;
justify-content: space-between;
.current-theme-label {
font-size: 28rpx;
color: var(--wot-color-text-secondary, #666);
}
.current-theme-value {
display: flex;
align-items: center;
.current-color-preview {
width: 40rpx;
height: 40rpx;
border: 2rpx solid var(--wot-color-border, #f0f0f0);
border-radius: 8rpx;
}
.current-color-text {
margin-left: 10rpx;
font-size: 28rpx;
font-weight: 500;
}
}
}
}
.current-theme-item {
display: flex;
align-items: center;
justify-content: space-between;
}
.current-theme-label {
font-size: 28rpx;
color: var(--wot-color-text-secondary, #666);
}
.current-theme-value {
display: flex;
align-items: center;
}
.current-color-preview {
width: 40rpx;
height: 40rpx;
border: 2rpx solid var(--wot-color-border, #f0f0f0);
border-radius: 8rpx;
}
.current-color-text {
margin-left: 10rpx;
font-size: 28rpx;
font-weight: 500;
}
// 效果预览
.preview-text {
font-size: 28rpx;
font-weight: 500;
@@ -510,160 +419,63 @@ onShow(() => {
border-radius: 8rpx;
}
.action-section {
:deep(.wd-card) {
padding: 30rpx;
background: var(--wot-card-bg-color, #fff);
border-radius: 16rpx;
box-shadow: var(--wot-card-shadow, 0 2rpx 12rpx rgba(0, 0, 0, 0.05));
}
}
// 自定义颜色弹窗
.custom-color-popup {
padding: 40rpx 30rpx;
background: var(--wot-popup-bg-color, #fff);
border-radius: 20rpx 20rpx 0 0;
.popup-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 30rpx;
}
.popup-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 30rpx;
.popup-title {
font-size: 32rpx;
font-weight: 600;
color: var(--wot-color-text, #333);
}
.color-input-section {
margin-bottom: 40rpx;
}
.input-label {
margin-bottom: 20rpx;
font-size: 28rpx;
color: var(--wot-color-text-secondary, #666);
}
.input-container {
display: flex;
gap: 20rpx;
align-items: center;
margin-bottom: 10rpx;
}
.color-preview-small {
flex-shrink: 0;
width: 60rpx;
height: 60rpx;
border: 2rpx solid var(--wot-color-border, #f0f0f0);
border-radius: 8rpx;
}
.color-input {
flex: 1;
}
.input-tip {
margin-left: 80rpx;
font-size: 24rpx;
color: var(--wot-color-text-placeholder, #999);
}
.popup-actions {
display: flex;
gap: 20rpx;
}
/* 响应式布局 */
@media (max-width: 750rpx) {
.color-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 600rpx) {
.color-grid {
grid-template-columns: repeat(2, 1fr);
}
}
// 全局暗黑模式适配（针对当前页面）
:global([data-theme="dark"]) .theme-settings-container {
color: var(--wot-color-text, #fff) !important;
background-color: var(--wot-color-bg, #1a1a1a) !important;
.page-header {
background: linear-gradient(135deg, var(--wot-color-theme, #165dff) 0%, #4a5568 100%);
}
.section-title {
color: var(--wot-color-text, #fff) !important;
}
.color-label {
color: var(--wot-color-text-secondary, #d1d5db) !important;
}
.preview-text {
color: var(--wot-color-text, #fff) !important;
}
.preview-border {
color: var(--wot-color-text-secondary, #d1d5db) !important;
}
.popup-title {
color: var(--wot-color-text, #fff) !important;
}
.input-label {
color: var(--wot-color-text-secondary, #d1d5db) !important;
}
.input-tip {
color: var(--wot-color-text-placeholder, #9ca3af) !important;
}
:deep(.wd-card) {
background: var(--wot-card-bg-color, #2a2a2a) !important;
}
:deep(.wd-cell) {
color: var(--wot-color-text, #fff) !important;
background-color: var(--wot-card-bg-color, #2a2a2a) !important;
.wd-cell__title {
color: var(--wot-color-text, #fff) !important;
}
.wd-cell__value {
color: var(--wot-color-text-secondary, #d1d5db) !important;
}
.wd-cell__right-icon {
color: var(--wot-color-text-secondary, #9ca3af) !important;
.popup-title {
font-size: 32rpx;
font-weight: 600;
color: var(--wot-color-text, #333);
}
}
:deep(.wd-grid-item) {
color: var(--wot-color-text, #fff) !important;
background-color: var(--wot-card-bg-color, #2a2a2a) !important;
.color-input-section {
margin-bottom: 40rpx;
.input-label {
margin-bottom: 20rpx;
font-size: 28rpx;
color: var(--wot-color-text-secondary, #666);
}
.input-container {
display: flex;
gap: 20rpx;
align-items: center;
margin-bottom: 10rpx;
.color-preview-small {
flex-shrink: 0;
width: 60rpx;
height: 60rpx;
border: 2rpx solid var(--wot-color-border, #f0f0f0);
border-radius: 8rpx;
}
.color-input {
flex: 1;
}
}
.input-tip {
margin-left: 80rpx;
font-size: 24rpx;
color: var(--wot-color-text-placeholder, #999);
}
}
// 专门为颜色预览块重置背景色
:deep(.color-item) {
background-color: transparent !important;
}
:deep(.wd-input) {
color: var(--wot-color-text, #fff) !important;
background-color: var(--wot-card-bg-color, #2a2a2a) !important;
}
:deep(.wd-popup) {
background-color: var(--wot-popup-bg-color, #2a2a2a) !important;
}
.custom-color-popup {
background: var(--wot-popup-bg-color, #2a2a2a) !important;
.popup-actions {
display: flex;
gap: 20rpx;
}
}
</style>