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

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>