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
2025-05-31 07:42:27 +08:00
parent d1a90a8313
commit 82fae9ed4b
22 changed files with 308 additions and 546 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
README.md
View File

@@ -25,3 +25,34 @@ pnpm run dev:h5
```
访问 [http://localhost:4096](http://localhost:4096)
## 组件结构
项目组件分为以下几类：
- **基础组件**：`src/components` 下的通用组件
- **业务组件**：`src/components/business` 下的业务相关组件
- `WechatProfile.vue`: 微信小程序环境下的头像、昵称和性别选择组件
使用业务组件：
```vue
<template>
<WechatProfile v-model="profileData" @change="onProfileChange" />
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { WechatProfile } from "@/components/business";
const profileData = ref({
avatar: "",
nickname: "",
gender: 1,
});
const onProfileChange = (data) => {
console.log("个人资料变更:", data);
};
</script>
```

12
components.d.ts vendored
View File

@@ -19,18 +19,22 @@ declare module 'vue' {
QiunDataCharts: typeof import('./src/components/qiun-data-charts/qiun-data-charts.vue')['default']
QiunError: typeof import('./src/components/qiun-error/qiun-error.vue')['default']
QiunLoading: typeof import('./src/components/qiun-loading/qiun-loading.vue')['default']
TodoItem: typeof import('./src/components/todo/TodoItem.vue')['default']
TodoList: typeof import('./src/components/todo/TodoList.vue')['default']
TodoItem: (typeof import("./src/components/todo/TodoItem.vue"))["default"]
TodoList: (typeof import("./src/components/todo/TodoList.vue"))["default"]
WdButton: typeof import('wot-design-uni/components/wd-button/wd-button.vue')['default']
WdCard: typeof import('wot-design-uni/components/wd-card/wd-card.vue')['default']
WdCell: typeof import('wot-design-uni/components/wd-cell/wd-cell.vue')['default']
WdCellGroup: typeof import('wot-design-uni/components/wd-cell-group/wd-cell-group.vue')['default']
WdCollapse: (typeof import("wot-design-uni/components/wd-collapse/wd-collapse.vue"))["default"]
WdCollapseItem: (typeof import("wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue"))["default"]
WdConfigProvider: typeof import('wot-design-uni/components/wd-config-provider/wd-config-provider.vue')['default']
WdDivider: typeof import('wot-design-uni/components/wd-divider/wd-divider.vue')['default']
WdDivider: (typeof import("wot-design-uni/components/wd-divider/wd-divider.vue"))["default"]
WdForm: typeof import('wot-design-uni/components/wd-form/wd-form.vue')['default']
WdGrid: typeof import('wot-design-uni/components/wd-grid/wd-grid.vue')['default']
WdGridItem: typeof import('wot-design-uni/components/wd-grid-item/wd-grid-item.vue')['default']
WdIcon: typeof import('wot-design-uni/components/wd-icon/wd-icon.vue')['default']
WdImg: typeof import('wot-design-uni/components/wd-img/wd-img.vue')['default']
WdImgCropper: typeof import('wot-design-uni/components/wd-img-cropper/wd-img-cropper.vue')['default']
WdInput: typeof import('wot-design-uni/components/wd-input/wd-input.vue')['default']
WdMessageBox: typeof import('wot-design-uni/components/wd-message-box/wd-message-box.vue')['default']
WdNavbar: typeof import('wot-design-uni/components/wd-navbar/wd-navbar.vue')['default']
@@ -45,6 +49,6 @@ declare module 'vue' {
WdTabbarItem: typeof import('wot-design-uni/components/wd-tabbar-item/wd-tabbar-item.vue')['default']
WdTag: typeof import('wot-design-uni/components/wd-tag/wd-tag.vue')['default']
WdToast: typeof import('wot-design-uni/components/wd-toast/wd-toast.vue')['default']
WechatProfile: typeof import('./src/components/WechatProfile.vue')['default']
WechatProfile: typeof import('./src/components/business/WechatProfile.vue')['default']
}
}

5
pages.config.ts
View File

@@ -14,8 +14,11 @@ export default defineUniPages({
},
],
globalStyle: {
navigationStyle: "custom",
navigationBarTextStyle: "black",
navigationBarTitleText: "vue-uniapp-template",
navigationBarTitleText: "youlai-mall-app",
navigationBarBackgroundColor: "#F8F8F8",
backgroundColor: "#F8F8F8",
},
tabBar: {

6
src/App.vue
View File

@@ -2,7 +2,6 @@
import { onLaunch, onShow, onHide } from "@dcloudio/uni-app";
import { useTheme } from "@/composables/useTheme";
// 使用主题 composable
const { initTheme } = useTheme();
onLaunch(() => {
@@ -20,7 +19,4 @@ onHide(() => {
});
</script>
<style lang="scss">
/* 导入暗黑模式修复样式 */
@import "./styles/dark-mode-fix';";
</style>
<style lang="scss"></style>

41
src/components/WechatProfile.vue → src/components/business/WechatProfile.vue
View File

@@ -40,13 +40,28 @@
import { ref, watch } from "vue";
import FileAPI, { type FileInfo } from "@/api/file";
/**
* 微信小程序头像昵称组件
*
* @description 用于微信小程序环境下的头像、昵称和性别选择
* @component WechatProfile
* @example
* <WechatProfile v-model="profileData" @change="onProfileChange" />
*/
defineOptions({
name: "WechatProfile",
});
// Props
interface ProfileData {
avatar?: string;
nickname?: string;
gender?: number;
}
interface Props {
modelValue?: {
avatar?: string;
nickname?: string;
gender?: number;
};
modelValue?: ProfileData;
}
const props = withDefaults(defineProps<Props>(), {
@@ -59,8 +74,8 @@ const props = withDefaults(defineProps<Props>(), {
// Emits
const emit = defineEmits<{
"update:modelValue": [value: { avatar?: string; nickname?: string; gender?: number }];
change: [value: { avatar?: string; nickname?: string; gender?: number }];
"update:modelValue": [value: ProfileData];
change: [value: ProfileData];
}>();
// 响应式数据
@@ -134,7 +149,7 @@ watch(gender, () => {
margin-bottom: 20rpx;
font-size: 32rpx;
font-weight: 600;
color: #333;
color: var(--wot-color-text);
}
.avatar-section {
@@ -171,14 +186,14 @@ watch(gender, () => {
justify-content: center;
width: 100%;
height: 100%;
background: #f8f9fa;
border: 2rpx dashed #ddd;
background: var(--wot-color-bg-light);
border: 2rpx dashed var(--wot-color-border);
border-radius: 50%;
.placeholder-text {
margin-top: 10rpx;
font-size: 24rpx;
color: #999;
color: var(--wot-color-text-secondary);
}
}
}
@@ -192,8 +207,8 @@ watch(gender, () => {
height: 80rpx;
padding: 0 20rpx;
font-size: 28rpx;
background: #f8f9fa;
border: 1rpx solid #e9ecef;
background: var(--wot-color-bg-light);
border: 1rpx solid var(--wot-color-border);
border-radius: 12rpx;
}
}

11
src/components/business/index.ts Normal file
View File

@@ -0,0 +1,11 @@
/**
* 业务组件导出索引
*/
import WechatProfile from "./WechatProfile.vue";
export { WechatProfile };
// 用于批量注册组件
export default {
WechatProfile,
};

122
src/components/todo/TodoItem.vue
View File

@@ -1,122 +0,0 @@
<template>
<view :class="['todo-item', { completed: todo.completed }]" @tap="toggleCompleted">
<view class="status-icon">
<wd-icon v-if="todo.completed" name="check" color="#67C23A" size="20" />
<view v-else class="uncompleted-circle"></view>
</view>
<view class="todo-content">
<view class="todo-title">{{ todo.title }}</view>
<view v-if="todo.description" class="todo-description">
{{ todo.description }}
</view>
<view v-if="todo.deadline" class="todo-deadline">
<wd-icon name="time" size="14" color="#999999" style="margin-right: 4rpx" />
{{ formatDate(todo.deadline) }}
</view>
</view>
<view class="todo-actions">
<wd-icon
name="delete-filling"
color="#F56C6C"
size="18"
@tap.stop="$emit('delete', todo.id)"
/>
</view>
</view>
</template>
<script lang="ts" setup>
import { defineProps, defineEmits } from "vue";
import { Todo } from "@/types/todo";
const props = defineProps({
todo: {
type: Object as () => Todo,
required: true,
},
});
const emit = defineEmits(["update", "delete"]);
// 切换完成状态
const toggleCompleted = () => {
emit("update", {
...props.todo,
completed: !props.todo.completed,
});
};
// 格式化日期
const formatDate = (date: string) => {
const d = new Date(date);
const year = d.getFullYear();
const month = String(d.getMonth() + 1).padStart(2, "0");
const day = String(d.getDate()).padStart(2, "0");
return `${year}-${month}-${day}`;
};
</script>
<style lang="scss" scoped>
.todo-item {
display: flex;
align-items: flex-start;
padding: 24rpx;
margin-bottom: 16rpx;
background-color: #fff;
border-radius: 12rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
&.completed {
opacity: 0.7;
.todo-title {
color: #909399;
text-decoration: line-through;
}
}
.status-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40rpx;
height: 40rpx;
margin-right: 20rpx;
.uncompleted-circle {
width: 36rpx;
height: 36rpx;
border: 2rpx solid #dcdfe6;
border-radius: 50%;
}
}
.todo-content {
flex: 1;
.todo-title {
margin-bottom: 8rpx;
font-size: 30rpx;
font-weight: 500;
color: #303133;
}
.todo-description {
margin-bottom: 8rpx;
font-size: 26rpx;
color: #606266;
}
.todo-deadline {
display: flex;
align-items: center;
font-size: 24rpx;
color: #909399;
}
}
.todo-actions {
padding: 6rpx;
}
}
</style>

43
src/components/todo/TodoList.vue
View File

@@ -1,43 +0,0 @@
<template>
<view class="todo-list">
<wd-empty v-if="todos.length === 0" description="暂无待办事项" />
<TodoItem
v-for="todo in todos"
:key="todo.id"
:todo="todo"
@update="handleUpdate"
@delete="handleDelete"
/>
</view>
</template>
<script lang="ts" setup>
import { defineProps, defineEmits } from "vue";
import { Todo } from "@/types/todo";
import TodoItem from "@/components/todo/TodoItem.vue";
defineProps({
todos: {
type: Array as () => Todo[],
default: () => [],
},
});
const emit = defineEmits(["update", "delete"]);
// 处理更新待办事项
const handleUpdate = (todo: Todo) => {
emit("update", todo);
};
// 处理删除待办事项
const handleDelete = (id: string) => {
emit("delete", id);
};
</script>
<style lang="scss" scoped>
.todo-list {
padding: 20rpx 0;
}
</style>

28
src/composables/useTheme.ts
View File

@@ -3,18 +3,22 @@ import type { ConfigProviderThemeVars } from "wot-design-uni";
/* 默认的主题色列表 */
export const colorColumns = [
{ value: "#165DFF", label: "蓝色" },
{ value: "#0FC6C2", label: "青绿色" },
{ value: "#722ED1", label: "紫色" },
{ value: "#F5222D", label: "红色" },
{ value: "#FA8C16", label: "橙色" },
{ value: "#FADB14", label: "黄色" },
{ value: "#52C41A", label: "绿色" },
{ value: "#EB2F96", label: "粉色" },
{ value: "#13C2C2", label: "青色" },
{ value: "#1890FF", label: "天蓝色" },
{ value: "#CD5C5C", label: "经典红" },
{ value: "#228B22", label: "自然绿" },
{ value: "#165DFF", label: "海洋蓝" },
{ value: "#1677FF", label: "天空蓝" },
{ value: "#0081FF", label: "梦幻蓝" },
{ value: "#4080FF", label: "皇家蓝" },
{ value: "#4D74FF", label: "靛蓝" },
{ value: "#0FC6C2", label: "碧波绿" },
{ value: "#722ED1", label: "魔幻紫" },
{ value: "#F5222D", label: "热情红" },
{ value: "#FA8C16", label: "活力橙" },
{ value: "#FADB14", label: "阳光黄" },
{ value: "#52C41A", label: "生机绿" },
{ value: "#EB2F96", label: "浪漫粉" },
{ value: "#13C2C2", label: "清新青" },
{ value: "#36CFC9", label: "湖水蓝" },
{ value: "#CD5C5C", label: "复古红" },
{ value: "#228B22", label: "森林绿" },
];
/* 存储键名 */

68
src/layouts/default.vue
View File

@@ -1,7 +1,57 @@
<script lang="ts" setup>
import { useTheme } from "@/composables/useTheme";
import { onLoad } from "@dcloudio/uni-app";
const { theme, themeVars } = useTheme();
// 页面标题
const pageTitle = ref("");
// 是否显示返回按钮
const showBackButton = ref(false);
// 是否显示导航栏
const showNavbar = ref(true);
// 获取当前页面路由信息
const getCurrentPageRoute = () => {
const pages = getCurrentPages();
if (pages.length > 0) {
const currentPage = pages[pages.length - 1];
return currentPage.route || "";
}
return "";
};
// 处理返回按钮点击
const handleBack = () => {
uni.navigateBack({
fail: () => {
uni.switchTab({ url: "/pages/index/index" });
},
});
};
// 页面加载时处理导航栏配置
onLoad(() => {
const route = getCurrentPageRoute();
// 获取当前页面实例
const pages = getCurrentPages();
if (pages.length > 0) {
const currentPage = pages[pages.length - 1];
// 尝试获取页面的navigationBarTitleText
const navigationBarTitleText = currentPage.$page?.style?.navigationBarTitleText || "";
pageTitle.value = navigationBarTitleText;
// 如果是首页或tabbar页面，不显示返回按钮
showBackButton.value = pages.length > 1;
// 某些页面可能不需要显示导航栏
if (route.includes("/index/index") || route.includes("/login")) {
showNavbar.value = false;
}
}
});
</script>
<script lang="ts">
@@ -21,18 +71,20 @@ export default {
custom-style="background-color: #f5f5f5;min-height: 100vh"
:class="{ 'wot-theme-dark': theme === 'dark' }"
>
<!-- 顶部导航栏 -->
<wd-navbar :title="pageTitle" :border="false" @click-left="handleBack">
<template #left>
<wd-icon name="arrow-left" size="20" />
</template>
</wd-navbar>
<!-- 内容区域 -->
<slot />
<wd-notify />
<wd-toast />
<wd-message-box />
<privacy-popup />
</wd-config-provider>
</template>
<style lang="scss" scoped>
/* 暗黑模式样式 */
.wot-theme-dark {
color: #f5f5f5 !important;
background-color: #1a1a1a !important;
}
</style>
<style lang="scss" scoped></style>

28
src/layouts/tabbar.vue
View File

@@ -23,7 +23,7 @@ interface TabbarItem {
// 根据 pages.json 配置的 tabbar 项目
const tabbarItems = ref<TabbarItem[]>([
{ name: "index", value: null, active: true, title: "首页", icon: "home" },
{ name: "index", value: null, active: true, title: "首页123", icon: "home" },
{ name: "mine", value: null, active: false, title: "我的", icon: "user" },
]);
@@ -161,14 +161,6 @@ export default {
custom-style="min-height: 100vh"
:class="{ 'wot-theme-dark': theme === 'dark' }"
>
<wd-navbar
:title="activeTabbar.title"
safe-area-inset-top
placeholder
fixed
:bordered="false"
/>
<slot />
<wd-tabbar
:model-value="activeTabbar.name"
@@ -193,20 +185,4 @@ export default {
</wd-config-provider>
</template>
<style lang="scss" scoped>
/* 暗黑模式样式 */
.wot-theme-dark {
color: #f5f5f5;
background-color: #1a1a1a;
:deep(.wd-navbar) {
color: #f5f5f5;
background-color: #2a2a2a;
}
:deep(.wd-tabbar) {
background-color: #2a2a2a;
border-top-color: #404040;
}
}
</style>
<style lang="scss" scoped></style>

10
src/main.ts
View File

@@ -2,14 +2,22 @@ import { createSSRApp } from "vue";
import App from "./App.vue";
import "uno.css";
import "@/styles/theme.scss";
import "@/styles/index.scss";
import { setupStore } from "@/store";
// 可选：导入业务组件
// import BusinessComponents from '@/components/business';
export function createApp() {
const app = createSSRApp(App);
setupStore(app);
// 可选：全局注册业务组件
// Object.entries(BusinessComponents).forEach(([name, component]) => {
// app.component(name, component);
// });
return {
app,
};

5
src/pages.json
View File

@@ -74,8 +74,11 @@
}
],
"globalStyle": {
"navigationStyle": "custom",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "vue-uniapp-template"
"navigationBarTitleText": "youlai-mall-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"tabBar": {
"custom": true,

32
src/pages/index/index.vue
View File

@@ -1,6 +1,5 @@
<template>
<view style="width: 100%; height: var(--status-bar-height)" />
<view class="home">
<view class="app-container">
<wd-swiper
v-model:current="current"
:list="swiperList"
@@ -21,7 +20,7 @@
<view class="p-2">
<image class="w-72rpx h-72rpx rounded-8rpx" :src="item.icon" />
</view>
<view class="text">{{ item.title }}</view>
<view class="text-sm text-center">{{ item.title }}</view>
</wd-grid-item>
</wd-grid>
@@ -40,9 +39,9 @@
<!-- 数据统计 -->
<wd-grid :column="2" :gutter="2">
<wd-grid-item use-slot custom-class="custom-item">
<wd-grid-item use-slot custom-class="h-80px">
<view class="flex justify-start pl-5">
<view class="flex-center">
<view class="flex items-center">
<image class="w-80rpx h-80rpx rounded-8rpx" src="/static/icons/visitor.png" />
<view class="ml-5 text-left">
<view class="font-bold">访客数</view>
@@ -51,9 +50,9 @@
</view>
</view>
</wd-grid-item>
<wd-grid-item use-slot custom-class="custom-item">
<wd-grid-item use-slot custom-class="h-80px">
<view class="flex justify-start pl-5">
<view class="flex-center">
<view class="flex items-center">
<image class="w-80rpx h-80rpx rounded-8rpx" src="/static/icons/browser.png" />
<view class="ml-5 text-left">
<view class="font-bold">浏览量</view>
@@ -66,7 +65,7 @@
<wd-card>
<template #title>
<view class="flex-between">
<view class="flex justify-between items-center">
<view>访问趋势</view>
<view>
<wd-radio-group
@@ -82,7 +81,7 @@
</view>
</template>
<view class="charts-box">
<view class="w-full h-300px mb-40rpx">
<qiun-data-charts type="area" :chartData="chartData" :opts="chartOpts" />
</view>
</wd-card>
@@ -267,18 +266,5 @@ onShow(() => {
</script>
<style setup lang="scss">
.home {
padding: 10rpx 10rpx;
:deep(.custom-item) {
height: 80px !important;
}
:deep(.wd-card) {
margin: 10rpx 0 !important;
}
}
.charts-box {
width: 100%;
height: 300px;
}
/* 已全部使用UnoCSS替代，不需要额外的样式 */
</style>

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

@@ -1,12 +1,10 @@
<template>
<view class="login-container">
<view class="app-container">
<!-- 背景图 -->
<image src="/static/images/login-bg.svg" mode="aspectFill" class="login-bg" />
<!-- Logo和标题区域 -->
<view class="header"> <view class="header">
</view>
<view class="header"></view>
<view class="login-card">
<view class="form-wrap">
@@ -310,12 +308,13 @@ const navigateToPrivacy = () => {
</script>
<style lang="scss" scoped>
.login-container {
.app-container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
height: 100%;
min-height: 100vh;
overflow: hidden;
background-color: var(--wot-color-bg-container);
}

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

@@ -1,5 +1,5 @@
<template>
<view class="mine-container">
<view class="app-container">
<!-- 用户信息卡片 -->
<view class="user-profile">
<view class="blur-bg"></view>
@@ -143,8 +143,15 @@
</view>
</view>
<view v-if="isLogin" class="logout-btn-container">
<wd-button custom-class="logout-btn-unocss" @click="handleLogout">退出登录</wd-button>
<!-- 退出登录按钮 -->
<view v-if="isLogin" class="logout-btn-wrap">
<wd-button
class="w-full h-80rpx rounded-40rpx font-bold text-32rpx"
plain
@click="handleLogout"
>
退出登录
</wd-button>
</view>
<wd-toast />
@@ -243,13 +250,6 @@ onShow(() => {
</script>
<style lang="scss" scoped>
/* stylelint-disable declaration-property-value-no-unknown */
.mine-container {
min-height: 100vh;
padding-bottom: 100rpx;
background-color: var(--wot-color-bg-page);
}
// 用户信息卡片
.user-profile {
position: relative;
@@ -549,35 +549,7 @@ onShow(() => {
}
// 退出登录按钮
.logout-btn-container {
padding: 20rpx 30rpx;
}
</style>
<style>
/* 使用全局样式解决微信小程序组件样式问题 */
.logout-btn-unocss {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 80rpx !important;
font-size: 32rpx !important;
font-weight: bold !important;
color: #fff !important;
background-color: var(--wot-color-theme) !important;
border: none !important;
border-radius: 40rpx !important;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15) !important;
}
.btn-login {
width: 160rpx !important;
height: 60rpx !important;
font-size: 26rpx !important;
color: var(--wot-color-theme) !important;
background-color: #fff !important;
border: none !important;
border-radius: 30rpx !important;
.logout-btn-wrap {
padding: 30rpx;
}
</style>

2
src/pages/mine/profile/complete-profile.vue
View File

@@ -118,7 +118,7 @@ import { useToast } from "wot-design-uni";
import { useUserStore } from "@/store/modules/user.store";
import UserAPI, { type UserProfileForm } from "@/api/user";
import FileAPI, { type FileInfo } from "@/api/file";
import WechatProfile from "@/components/WechatProfile.vue";
import WechatProfile from "@/components/business/WechatProfile.vue";
const toast = useToast();
const userStore = useUserStore();

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

@@ -6,7 +6,7 @@
<wd-cell title="主题设置" icon="setting1" is-link @click="navigateToTheme" />
<wd-cell title="用户协议" icon="user" is-link @click="navigateToUserAgreement" />
<wd-cell title="隐私政策" icon="folder" is-link @click="navigateToPrivacy" />
<wd-cell title="关于我们" icon="info" is-link @click="navigateToAbout" />
<wd-cell title="关于我们" icon="info-circle" is-link @click="navigateToAbout" />
</wd-cell-group>
<wd-cell-group custom-style="margin-top:40rpx">
@@ -199,11 +199,6 @@ onLoad(() => {
</script>
<style lang="scss" scoped>
.settings-container {
min-height: 100vh;
padding: 20px;
color: var(--wot-color-text, #333);
background-color: var(--wot-color-bg-light, #f8f8f8);
// 强制 Wot 组件应用暗黑模式样式
:deep(.wd-cell-group) {
overflow: hidden;

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

@@ -1,91 +1,81 @@
<template>
<view class="theme-settings-container">
<!-- 页面标题 -->
<view class="page-header">
<text class="page-title">主题设置</text>
<text class="page-subtitle">个性化您的应用外观</text>
</view>
<!-- 暗黑模式设置 -->
<wd-card custom-class="setting-card">
<view class="setting-item">
<view class="setting-info">
<wd-icon name="moon" size="20" :color="currentThemeColor" />
<text class="setting-label">暗黑模式</text>
<view class="app-container">
<!-- 内容区域 -->
<view class="content-wrapper">
<!-- 页面标题 -->
<view class="page-header">
<text class="page-title">主题设置</text>
<text class="page-subtitle">个性化您的应用外观</text>
</view>
<!-- 暗黑模式设置 -->
<wd-card class="mb-3">
<view class="flex-between py-2">
<text>暗黑模式</text>
<wd-switch :model-value="theme === 'dark'" @change="toggleTheme" />
</view>
<wd-switch :model-value="theme === 'dark'" @change="toggleTheme" />
</view>
</wd-card>
<!-- 主题色选择 -->
<wd-card custom-class="setting-card">
<view class="setting-header">
<wd-icon name="palette" size="20" :color="currentThemeColor" />
<text class="setting-title">主题色</text>
</view>
<view class="color-grid">
<view
v-for="item in colorColumns"
:key="item.value"
class="color-item"
:class="{ active: currentThemeColor === item.value }"
@click="setThemeColor(item.value)"
>
<view class="color-box" :style="{ backgroundColor: item.value }">
<wd-icon v-if="currentThemeColor === item.value" name="check" size="16" color="#fff" />
</wd-card>
<!-- 主题色选择 -->
<wd-card title="主题色" class="mb-3">
<view class="color-grid">
<view
v-for="item in colorColumns"
:key="item.value"
class="color-item"
:class="{ active: currentThemeColor === item.value }"
@click="setThemeColor(item.value)"
>
<view class="color-box" :style="{ backgroundColor: item.value }">
<wd-icon
v-if="currentThemeColor === item.value"
name="check"
size="16"
color="#fff"
/>
</view>
<text class="color-label">{{ item.label }}</text>
</view>
<text class="color-label">{{ item.label }}</text>
</view>
</wd-card>
<!-- 自定义颜色 -->
<wd-card class="mb-3">
<view class="flex-between items-center py-2" @click="showCustomColorPopup = true">
<view class="flex-start gap-2 items-center">
<wd-icon name="edit" size="20" :color="currentThemeColor" />
<text>自定义颜色</text>
</view>
<view class="flex-start gap-2 items-center">
<view class="color-box small" :style="{ backgroundColor: currentThemeColor }"></view>
<text class="text-sm text-gray-500">{{ currentThemeColor }}</text>
<wd-icon name="arrow-right" size="14" color="#999" />
</view>
</view>
</wd-card>
<!-- 预览效果 -->
<wd-card title="预览效果" class="mb-3">
<view class="py-2">
<view class="flex-start gap-2">
<wd-button type="primary" size="small">主要按钮</wd-button>
<wd-button type="primary" plain size="small">次要按钮</wd-button>
<wd-tag type="primary">标签</wd-tag>
</view>
</view>
</wd-card>
<!-- 重置按钮 -->
<view class="mt-5 mx-3">
<wd-button plain block @click="handleReset">恢复默认</wd-button>
</view>
</wd-card>
<!-- 自定义颜色 -->
<wd-card custom-class="setting-card">
<view class="setting-item" @click="showCustomColorPopup = true">
<view class="setting-info">
<wd-icon name="edit" size="20" :color="currentThemeColor" />
<text class="setting-label">自定义颜色</text>
</view>
<view class="custom-color-preview">
<view class="color-box small" :style="{ backgroundColor: currentThemeColor }"></view>
<text class="color-value">{{ currentThemeColor }}</text>
<wd-icon name="arrow-right" size="14" color="#999" />
</view>
</view>
</wd-card>
<!-- 预览效果 -->
<wd-card custom-class="setting-card">
<view class="preview-section">
<text class="preview-title">预览效果</text>
<view class="preview-items">
<wd-button type="primary" size="small">主要按钮</wd-button>
<wd-button type="primary" plain size="small">次要按钮</wd-button>
<wd-tag type="primary">标签</wd-tag>
</view>
</view>
</wd-card>
<!-- 重置按钮 -->
<view class="action-buttons">
<wd-button block @click="handleReset">恢复默认</wd-button>
</view>
<!-- 自定义颜色弹窗 -->
<wd-popup v-model="showCustomColorPopup" position="bottom" closeable>
<view class="custom-color-popup">
<view class="popup-header">
<text class="popup-title">自定义主题色</text>
</view>
<view class="color-input-section">
<view class="text-center mb-5"><text class="text-lg font-bold">自定义主题色</text></view>
<view class="mb-5">
<view class="color-preview-large" :style="{ backgroundColor: customColor }"></view>
<wd-input v-model="customColor" placeholder="请输入颜色值，如 #FF6B6B" clearable />
<text class="input-tip">支持 HEX 格式颜色值</text>
</view>
<view class="popup-actions">
<view class="flex gap-2">
<wd-button type="info" block @click="showCustomColorPopup = false">取消</wd-button>
<wd-button type="primary" block @click="applyCustomColor">应用</wd-button>
</view>
@@ -93,9 +83,7 @@
</wd-popup>
</view>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { useTheme } from "@/composables/useTheme";
@@ -149,12 +137,9 @@ onShow(() => {
customColor.value = currentThemeColor.value;
});
</script>
<style lang="scss" scoped>
.theme-settings-container {
min-height: 100vh;
.content-wrapper {
padding: 20rpx;
background-color: var(--wot-color-bg-page);
}
.page-header {
@@ -178,58 +163,18 @@ onShow(() => {
}
}
.setting-card {
margin-bottom: 20rpx;
background-color: var(--wot-color-bg-container) !important;
border-radius: 16rpx !important;
:deep(.wd-card__body) {
padding: 30rpx !important;
}
}
.setting-item {
display: flex;
align-items: center;
justify-content: space-between;
.setting-info {
display: flex;
gap: 20rpx;
align-items: center;
}
.setting-label {
font-size: 30rpx;
color: var(--wot-color-text);
}
}
.setting-header {
display: flex;
gap: 20rpx;
align-items: center;
margin-bottom: 30rpx;
.setting-title {
font-size: 30rpx;
font-weight: 600;
color: var(--wot-color-text);
}
}
.color-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20rpx;
gap: 24rpx 20rpx;
}
.color-item {
display: flex;
flex-direction: column;
gap: 10rpx;
gap: 8rpx;
align-items: center;
padding: 10rpx;
padding: 8rpx;
cursor: pointer;
&.active .color-box {
@@ -255,79 +200,29 @@ onShow(() => {
.color-label {
font-size: 22rpx;
color: var(--wot-color-text-secondary);
text-align: center;
white-space: nowrap;
}
}
.custom-color-preview {
display: flex;
gap: 15rpx;
align-items: center;
.color-value {
font-size: 26rpx;
color: var(--wot-color-text-secondary);
}
}
.preview-section {
.preview-title {
display: block;
margin-bottom: 20rpx;
font-size: 28rpx;
color: var(--wot-color-text-secondary);
}
.preview-items {
display: flex;
flex-wrap: wrap;
gap: 20rpx;
align-items: center;
}
}
.action-buttons {
padding: 0 20rpx;
margin-top: 40rpx;
}
.custom-color-popup {
padding: 40rpx 30rpx;
background-color: var(--wot-color-bg-container);
.popup-header {
margin-bottom: 40rpx;
.color-preview-large {
width: 100%;
height: 120rpx;
margin-bottom: 30rpx;
border: 2rpx solid var(--wot-color-border);
border-radius: 16rpx;
}
.input-tip {
display: block;
margin-top: 15rpx;
font-size: 24rpx;
color: var(--wot-color-text-placeholder);
text-align: center;
.popup-title {
font-size: 32rpx;
font-weight: 600;
color: var(--wot-color-text);
}
}
.color-input-section {
margin-bottom: 40rpx;
.color-preview-large {
width: 100%;
height: 120rpx;
margin-bottom: 30rpx;
border: 2rpx solid var(--wot-color-border);
border-radius: 16rpx;
}
.input-tip {
display: block;
margin-top: 15rpx;
font-size: 24rpx;
color: var(--wot-color-text-placeholder);
text-align: center;
}
}
.popup-actions {
display: flex;
gap: 20rpx;
}
}
</style>

46
src/styles/dark-mode-fix.scss
View File

@@ -1,46 +0,0 @@
/**
* 暗黑模式输入框修复
* 强制所有输入框在暗黑模式下保持透明背景
*/
/* 暗黑模式下的输入框 */
.wot-theme-dark {
/* 通用输入框 */
input,
textarea,
[contenteditable="true"] {
color: var(--wot-color-text, #f5f5f5) !important;
background-color: transparent !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
/* 自动填充覆盖 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
background: none !important;
background-color: transparent !important;
-webkit-box-shadow: 0 0 0 1000px rgba(31, 31, 31, 0.95) inset !important;
transition: background-color 5000s;
-webkit-text-fill-color: var(--wot-color-text, #f5f5f5) !important;
}
/* 登录页特殊处理 */
.login-card {
input,
.form-input {
background-color: transparent !important;
}
}
}
/* 登录页面特别修复 */
.login-container {
input,
.form-input {
background-color: transparent !important;
border: none !important;
}
}

17
src/styles/index.scss Normal file
View File

@@ -0,0 +1,17 @@
@import "./theme";
html,
body,
#app {
height: 100%;
padding: 0;
margin: 0;
}
html {
font-size: 8px;
}
html.dark {
background: #121212;
}

6
unocss.config.ts
View File

@@ -16,6 +16,12 @@ export default {
"flex-start": "flex justify-start items-center",
"flex-end": "flex justify-end items-center",
"flex-between": "flex justify-between items-center",
"flex-around": "flex justify-around items-center",
"flex-evenly": "flex justify-evenly items-center",
"flex-stretch": "flex justify-stretch items-center",
"flex-baseline": "flex justify-baseline items-center",
"flex-column": "flex flex-col",
"flex-row": "flex flex-row",
},
],