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

refactor: 界面和样式优化

Browse Source
This commit is contained in:
Ray.Hao
2026-03-10 20:37:49 +08:00
parent 7ce897744a
commit 53c2985220
30 changed files with 670 additions and 707 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,6 @@
<template>
<view class="home-page">
<!-- 轮播图 -->
<!-- 頧格偘<EFBFBD>?-->
<view class="hero">
<wd-swiper
v-model:current="current"
@@ -30,13 +30,19 @@
</view>
<!-- <EFBFBD>𡁶䰻<EFBFBD>砍<EFBFBD> -->
<view class="section">
<view v-if="noticeList.length" class="section">
<view class="notice-bar" @click="handleNoticeClick">
<view class="notice-bar__icon">
<wd-icon name="check-outline" size="32rpx" color="#34D19D" />
</view>
<view class="notice-bar__content">
<text class="notice-bar__text">{{ noticeText || "暂无通知公告" }}</text>
<view v-if="isNoticeScrolling" class="notice-bar__marquee">
<view class="notice-bar__marquee-inner">
<text class="notice-bar__text">{{ noticeText }}</text>
<text class="notice-bar__text notice-bar__text--gap">{{ noticeText }}</text>
</view>
</view>
<text v-else class="notice-bar__text">{{ noticeText }}</text>
</view>
</view>
</view>
@@ -49,7 +55,7 @@
<view class="stat-card__icon stat-card__icon--user"></view>
</view>
<view class="stat-card__head">
<text class="stat-card__label">访客数</text>
<text class="stat-card__label">霈踹恥<EFBFBD>?/text>
<view class="stat-card__dot stat-card__dot--green"></view>
</view>
<text class="stat-card__num stat-card__num--green">
@@ -61,7 +67,7 @@
<view class="stat-card__icon stat-card__icon--eye"></view>
</view>
<view class="stat-card__head">
<text class="stat-card__label">浏览量</text>
<text class="stat-card__label">瘚讛<EFBFBD><EFBFBD>?/text>
<view class="stat-card__dot stat-card__dot--blue"></view>
</view>
<text class="stat-card__num stat-card__num--blue">
@@ -93,8 +99,8 @@
inline
@change="handleDataRangeChange"
>
<wd-radio :value="7">近7天</wd-radio>
<wd-radio :value="15">近15天</wd-radio>
<wd-radio :value="7">餈?憭?/wd-radio>
<wd-radio :value="15">餈?5憭?/wd-radio>
</wd-radio-group>
</view>
</template>
@@ -111,19 +117,15 @@
/**
* 擐㚚△
*
* 功能说明：
* - 自定义导航栏（搜索框）
* - 轮播图展示
* - 快捷导航入口
* <EFBFBD>蠘<EFBFBD>霂湔<EFBFBD>嚗? * - <20>芸<EFBFBD>銋匧紡<E58CA7>芣<EFBFBD>嚗<EFBFBD><E59A97>蝝Ｘ<E89D9D>嚗? * - 頧格偘<E6A0BC>曉<EFBFBD>蝷? * - 敹急㭘撖潸⏛<E6BDB8>亙藁
* - <20>𡁶䰻<F0A181B6>砍<EFBFBD>
* - <20>唳旿蝏蠘恣
* - 霈輸䔮頞见飵<E8A781>曇”
*
* <20><><EFBFBD>航<EFBFBD><E888AA>對<EFBFBD>
* - 使用 useNavbar 处理自定义导航栏高度和胶囊避让;
* - 雿輻鍂 useNavbar 憭<EFBFBD><EFBFBD><EFBFBD>芸<EFBFBD>銋匧紡<EFBFBD>芣<EFBFBD>擃睃漲<EFBFBD>諹<EFBFBD><EFBFBD>𢠃<EFBFBD>霈?
* - 雿輻鍂 BEM <20>賢<EFBFBD>閫<EFBFBD><E996AB>蝏<EFBFBD><E89D8F> CSS
* - 支持暗黑模式（通过 CSS 变量）
*/
* - <EFBFBD>舀<EFBFBD><EFBFBD>烾<EFBFBD>璅∪<EFBFBD>嚗<EFBFBD><EFBFBD>朞<EFBFBD> CSS <20>㗛<EFBFBD>嚗? */
import { computed, ref } from "vue";
import { onReady } from "@dcloudio/uni-app";
@@ -154,11 +156,9 @@ interface NavItem {
const router = useRouter();
const userStore = useUserStore();
// custom-navbar 组件内部已处理导航栏高度与胶囊避让
// ============================================================================
// 响应式数据
// custom-navbar 蝏<EFBFBD>辣<EFBFBD><EFBFBD><EFBFBD>撌脣<EFBFBD><EFBFBD><EFBFBD>紡<EFBFBD>芣<EFBFBD>擃睃漲銝舘<EFBFBD><EFBFBD>𢠃<EFBFBD>霈?
// ============================================================================
// <20>滚<EFBFBD>撘𤩺㺭<F0A4A9BA>?// ============================================================================
const current = ref(0);
const recentDaysRange = ref(7);
@@ -178,21 +178,19 @@ const appVersion = ref<string>("");
const noticeList = ref<NoticePageVO[]>([]);
const noticeText = computed(() => {
if (!noticeList.value.length) {
return "暂无通知";
}
const titles = noticeList.value
.map((n: NoticePageVO) => n.title)
.filter(Boolean)
.slice(0, 2) as string[];
return titles.length ? titles.join(" ") : "暂无通知";
.slice(0, 5) as string[];
return titles.length ? titles.join(" ") : "";
});
const isNoticeScrolling = computed(() => noticeList.value.length > 1);
// <20>冽<EFBFBD><E586BD><EFBFBD><EFBFBD><EFBFBD>𡑒”
const userPerms = computed(() => userStore.userInfo?.perms || []);
// 是否已登录
const isLogged = computed(() => isLoggedIn());
// <EFBFBD>臬炏撌脩蒈敶?const isLogged = computed(() => isLoggedIn());
// 璉<><E79289>交糓<E4BAA4>行<EFBFBD><E8A18C><EFBFBD><EFBFBD>
const hasPermission = (perm: string) => {
@@ -214,8 +212,7 @@ const defaultNavList = computed(() => {
return result;
});
// 快捷入口：已登录按权限过滤，未登录显示默认菜单
const quickNavList = computed(() => {
// 敹急㭘<EFBFBD>亙藁嚗𡁜歇<EFBFBD>餃<EFBFBD><EFBFBD>㗇<EFBFBD><EFBFBD>鞱<EFBFBD>皛歹<EFBFBD><EFBFBD>芰蒈敶閙遬蝷粹<EFBFBD>霈方<EFBFBD><EFBFBD>?const quickNavList = computed(() => {
if (!isLogged.value) {
return defaultNavList.value;
}
@@ -262,7 +259,6 @@ const chartOpts = ref({
function loadAppVersion() {
try {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const p: any = (globalThis as any).plus;
if (p?.runtime?.version) {
appVersion.value = `v${p.runtime.version}`;
@@ -279,7 +275,7 @@ async function loadNoticeData() {
return;
}
try {
const { list } = await NoticeAPI.getMyNoticePage({ pageNum: 1, pageSize: 2 });
const { list } = await NoticeAPI.getMyNoticePage({ pageNum: 1, pageSize: 5 });
noticeList.value = list || [];
} catch {
noticeList.value = [];
@@ -296,7 +292,9 @@ async function loadVisitStatsData() {
async function loadVisitTrendData() {
const endDate = dayjs().format("YYYY-MM-DD");
const startDate = dayjs().subtract(recentDaysRange.value - 1, "day").format("YYYY-MM-DD");
const startDate = dayjs()
.subtract(recentDaysRange.value - 1, "day")
.format("YYYY-MM-DD");
try {
const data: VisitTrendVO = await LogAPI.getVisitTrend({ startDate, endDate });
@@ -304,8 +302,8 @@ async function loadVisitTrendData() {
JSON.stringify({
categories: (data.dates || []).map((d) => dayjs(d).format("MM-DD")),
series: [
{ name: "访客数(UV)", data: data.uvList || [] },
{ name: "浏览量(PV)", data: data.pvList || [] },
{ name: "霈踹恥<EFBFBD>?UV)", data: data.uvList || [] },
{ name: "瘚讛<EFBFBD><EFBFBD>?PV)", data: data.pvList || [] },
],
})
);
@@ -319,8 +317,7 @@ async function loadVisitTrendData() {
// ============================================================================
function handleNavClick(item: NavItem) {
// 未登录时先检查登录状态并跳转登录页
if (!checkLogin()) {
// <EFBFBD>芰蒈敶閙𧒄<EFBFBD><EFBFBD><EFBFBD><EFBFBD>亦蒈敶閧𠶖<EFBFBD><EFBFBD>僎頝唾蓮<EFBFBD>餃<EFBFBD>憿? if (!checkLogin()) {
return;
}
router.push({ path: item.url });
@@ -376,29 +373,28 @@ onReady(() => {
.hero {
position: relative;
}
.hero::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
height: 120rpx;
pointer-events: none;
content: "";
background: linear-gradient(
to bottom,
rgba(245, 247, 250, 0) 0%,
rgba(245, 247, 250, 0.85) 60%,
rgba(245, 247, 250, 1) 100%
);
pointer-events: none;
z-index: 1;
}
:deep(.swiper-box) {
height: 420rpx;
overflow: hidden;
border-bottom-left-radius: 32rpx;
border-bottom-right-radius: 32rpx;
border-bottom-left-radius: 32rpx;
}
:deep(.swiper-box .wd-swiper__item),
@@ -407,8 +403,7 @@ onReady(() => {
}
// ============================================================================
// 导航栏
// ============================================================================
// 撖潸⏛<EFBFBD>?// ============================================================================
.navbar {
position: fixed;
@@ -461,16 +456,15 @@ onReady(() => {
.section--overlay {
position: relative;
z-index: 2;
margin-top: -140rpx;
padding: 18rpx 8rpx;
margin-top: -140rpx;
background: var(--color-bg);
border-radius: 24rpx;
box-shadow: 0 16rpx 36rpx rgba(0, 0, 0, 0.08);
}
// ============================================================================
// 快捷导航项
// ============================================================================
// 敹急㭘撖潸⏛憿?// ============================================================================
.nav-item {
display: flex;
@@ -492,28 +486,27 @@ onReady(() => {
}
// ============================================================================
// 通知栏
// ============================================================================
// <EFBFBD>𡁶䰻<EFBFBD>?// ============================================================================
.notice-bar {
display: flex;
align-items: center;
background: #fff;
border-radius: 16rpx;
padding: 24rpx 24rpx 24rpx 20rpx;
background: #fff;
border: 1rpx solid rgba(0, 0, 0, 0.04);
border-radius: 16rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
&__icon {
flex-shrink: 0;
width: 48rpx;
height: 48rpx;
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 48rpx;
height: 48rpx;
margin-right: 16rpx;
background: rgba(52, 209, 157, 0.1);
border-radius: 12rpx;
margin-right: 16rpx;
}
&__content {
@@ -523,14 +516,35 @@ onReady(() => {
&__text {
font-size: 26rpx;
color: #333;
font-weight: 500;
display: -webkit-box;
line-clamp: 1;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
color: #333;
white-space: nowrap;
}
&__text--gap {
padding-left: 48rpx;
}
&__marquee {
width: 100%;
overflow: hidden;
}
&__marquee-inner {
display: inline-flex;
align-items: center;
white-space: nowrap;
animation: notice-marquee 14s linear infinite;
}
}
@keyframes notice-marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
// ============================================================================
@@ -544,55 +558,49 @@ onReady(() => {
}
.stat-card {
background: #fff;
border-radius: 16rpx;
padding: 24rpx 20rpx;
position: relative;
display: flex;
flex-direction: column;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
border: 1rpx solid rgba(0, 0, 0, 0.04);
position: relative;
padding: 24rpx 20rpx;
overflow: hidden;
background: #fff;
border: 1rpx solid rgba(0, 0, 0, 0.04);
border-radius: 16rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
// 背景图标容器
&__bg {
position: absolute;
right: 12rpx;
bottom: 12rpx;
width: 70rpx;
height: 70rpx;
opacity: 0.08;
pointer-events: none;
opacity: 0.08;
}
// SVG 装饰图形
&__icon {
width: 100%;
height: 100%;
// 用户组图标 - 访客数
&--user {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%232ab789'%3E%3Ccircle cx='24' cy='16' r='8'/%3E%3Ccircle cx='10' cy='20' r='6'/%3E%3Ccircle cx='38' cy='20' r='6'/%3E%3Cpath d='M24 28c-8 0-14 4-14 8v6h28v-6c0-4-6-8-14-8z'/%3E%3Cpath d='M10 28c-4 0-8 2-8 5v5h8v-5c0-2 1-4 3-5-1 0-2 0-3 0z'/%3E%3Cpath d='M38 28c4 0 8 2 8 5v5h-8v-5c0-2-1-4-3-5 1 0 2 0 3 0z'/%3E%3C/svg%3E");
background-size: contain;
background-image: url("/static/icons/visitor.svg");
background-repeat: no-repeat;
background-size: contain;
}
// 图表图标 - 浏览量
&--eye {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%233a8ee6'%3E%3Crect x='4' y='24' width='8' height='20' rx='2'/%3E%3Crect x='16' y='14' width='8' height='30' rx='2'/%3E%3Crect x='28' y='20' width='8' height='24' rx='2'/%3E%3Crect x='40' y='8' width='8' height='36' rx='2'/%3E%3C/svg%3E");
background-size: contain;
background-image: url("/static/icons/browser.svg");
background-repeat: no-repeat;
background-size: contain;
}
// 盾牌徽章图标 - 版本
&--gear {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%23e8a838'%3E%3Cpath d='M24 4L8 10v12c0 11 8 18 16 22 8-4 16-11 16-22V10L24 4z'/%3E%3Cpath d='M20 24l4 4 8-8' stroke='white' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-size: contain;
background-image: url("/static/icons/setting.svg");
background-repeat: no-repeat;
background-size: contain;
}
}
// 彩色卡片变体
&--green {
background: linear-gradient(135deg, #f0fdf9 0%, #fff 100%);
}
@@ -606,18 +614,18 @@ onReady(() => {
}
&__head {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16rpx;
position: relative;
z-index: 1;
}
&__label {
font-size: 24rpx;
color: #999;
font-weight: 500;
color: #999;
}
&__dot {
@@ -642,12 +650,12 @@ onReady(() => {
}
&__num {
position: relative;
z-index: 1;
font-size: 48rpx;
font-weight: 700;
line-height: 1;
letter-spacing: -1rpx;
position: relative;
z-index: 1;
&--green {
color: #2ab789;
@@ -666,8 +674,8 @@ onReady(() => {
}
&--full {
grid-column: 1 / -1;
flex-direction: row;
grid-column: 1 / -1;
align-items: center;
justify-content: space-between;
padding: 20rpx 20rpx;
@@ -682,10 +690,10 @@ onReady(() => {
}
.stat-card__bg {
width: 50rpx;
height: 50rpx;
right: 16rpx;
bottom: 50%;
width: 50rpx;
height: 50rpx;
transform: translateY(50%);
}
}

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

@@ -9,14 +9,14 @@
<view class="login-nav" :style="{ paddingTop: `${statusBarHeight}px` }">
<view class="login-nav__bar" :style="{ height: `${navBarHeight}px` }">
<view class="login-nav__action" hover-class="login-nav__action--active" @click="handleBack">
<text class="login-nav__back-icon">‹</text>
<text class="login-nav__back-icon"><EFBFBD>?/text>
</view>
<view class="login-nav__title" />
<view class="login-nav__placeholder" />
</view>
</view>
<!-- 主内容 -->
<!-- 銝餃<EFBFBD>摰?-->
<view class="login-main" :style="{ paddingTop: `${statusBarHeight + navBarHeight + 4}px` }">
<!-- Logo -->
<view class="login-logo">
@@ -34,7 +34,7 @@
<!-- 銵典<EFBFBD><EFBFBD>箏<EFBFBD> -->
<view v-if="loginMode !== 'WECHAT'" class="form-area">
<!-- 用户名/手机号 -->
<!-- <EFBFBD>冽<EFBFBD><EFBFBD>?<EFBFBD>𧢲㦤<EFBFBD>?-->
<view class="input-box">
<wd-icon name="person" size="20" color="#9ca3af" />
<input
@@ -52,7 +52,7 @@
v-model="formData.password"
class="input-field"
:password="!showPassword"
placeholder="请输入密码"
placeholder="霂瑁<EFBFBD><EFBFBD>亙<EFBFBD><EFBFBD>?
:maxlength="50"
@confirm="handleLogin"
/>
@@ -80,7 +80,7 @@
/>
</view>
<!-- 验证码 -->
<!-- 撉諹<EFBFBD><EFBFBD>?-->
<view v-else class="input-box">
<wd-icon name="shield" size="20" color="#9ca3af" />
<input
@@ -96,7 +96,7 @@
:class="smsCountdown > 0 ? 'sms-btn-disabled' : 'sms-btn-active'"
@click="handleSendCode"
>
{{ smsCountdown > 0 ? `${smsCountdown}s` : "获取验证码" }}
{{ smsCountdown > 0 ? `${smsCountdown}s` : "<EFBFBD>瑕<EFBFBD>撉諹<EFBFBD><EFBFBD>? }}
</view>
</view>
@@ -112,16 +112,16 @@
:disabled="loading"
@click="handleLogin"
>
{{ loading ? "登录中..." : "登 录" }}
{{ loading ? "<EFBFBD>餃<EFBFBD>銝?.." : "<EFBFBD>?敶? }}
</button>
<!-- <EFBFBD><EFBFBD>揢<EFBFBD>餃<EFBFBD><EFBFBD>孵<EFBFBD> -->
<view class="switch-mode" @click="toggleLoginMode">
<text class="switch-text">
{{ loginMode === "PASSWORD" ? "忘记密码？" : "记得密码？" }}
{{ loginMode === "PASSWORD" ? "敹䁅扇撖<EFBFBD><EFBFBD>嚗? : "霈啣<EFBFBD>撖<EFBFBD><EFBFBD>嚗? }}
</text>
<text class="switch-link">
{{ loginMode === "PASSWORD" ? "验证码登录" : "密码登录" }}
{{ loginMode === "PASSWORD" ? "撉諹<EFBFBD><EFBFBD><EFBFBD>蒈敶? : "撖<EFBFBD><EFBFBD><EFBFBD>餃<EFBFBD>" }}
</text>
</view>
</view>
@@ -135,8 +135,7 @@
@getphonenumber="handleWechatPhoneLogin"
>
<image class="btn-wechat-icon" src="/static/icons/weixin.png" mode="aspectFit" />
微信一键登录
</button>
敺桐縑銝<EFBFBD><EFBFBD>桃蒈敶? </button>
<!-- <20>嗡<EFBFBD><E597A1>餃<EFBFBD><E9A483>孵<EFBFBD> -->
<view class="switch-mode" @click="loginMode = 'PASSWORD'">
@@ -147,7 +146,7 @@
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<!-- 分割线 -->
<!-- <20><>𠧧蝥?-->
<view v-if="loginMode !== 'WECHAT'" class="divider">
<view class="divider-line" />
<text class="divider-text"><3E>嗡<EFBFBD><E597A1>餃<EFBFBD><E9A483>孵<EFBFBD></text>
@@ -167,14 +166,10 @@
<view class="agreement">
<wd-checkbox v-model="isAgreePolicy" shape="square" size="16px">
<text class="agreement-text">
我已阅读并同意
<text class="agreement-link" @click.stop="navigateToAgreement('user')">
《用户协议》
</text>
与
<text class="agreement-link" @click.stop="navigateToAgreement('privacy')">
《隐私政策》
</text>
<EFBFBD>穃歇<EFBFBD><EFBFBD>粉撟嗅<EFBFBD><EFBFBD>? <text class="agreement-link" @click.stop="navigateToAgreement('user')">
<20>羓鍂<E7BE93>瑕<EFBFBD>霈柴<E99C88>? </text>
銝? <text class="agreement-link" @click.stop="navigateToAgreement('privacy')">
<EFBFBD>𢠃<EFBFBD>蝘<EFBFBD>錇蝑硔<EFBFBD>? </text>
</text>
</wd-checkbox>
</view>
@@ -182,7 +177,7 @@
</view>
</view>
<!-- 绑定手机号弹窗 -->
<!-- 蝏穃<E89D8F><E7A983>𧢲㦤<F0A7A2B2>瑕撕蝒?-->
<wd-popup
v-model="showBindMobilePopup"
position="bottom"
@@ -191,7 +186,7 @@
@close="resetBindForm"
>
<view class="bind-popup">
<text class="bind-title">绑定手机号</text>
<text class="bind-title">蝏穃<E89D8F><E7A983>𧢲㦤<F0A7A2B2>?/text>
<view class="form-area">
<view class="input-box">
@@ -219,7 +214,7 @@
:class="bindSmsCountdown > 0 ? 'sms-btn-disabled' : 'sms-btn-active'"
@click="handleSendBindCode"
>
{{ bindSmsCountdown > 0 ? `${bindSmsCountdown}s` : "获取验证码" }}
{{ bindSmsCountdown > 0 ? `${bindSmsCountdown}s` : "<EFBFBD>瑕<EFBFBD>撉諹<EFBFBD><EFBFBD>? }}
</view>
</view>
@@ -229,7 +224,7 @@
</view>
<button class="btn-bind" :disabled="bindLoading" @click="handleBindMobile">
{{ bindLoading ? "绑定中..." : "确认绑定" }}
{{ bindLoading ? "蝏穃<EFBFBD>銝?.." : "蝖株恕蝏穃<EFBFBD>" }}
</button>
</view>
</view>
@@ -238,9 +233,8 @@
<!-- <EFBFBD>讛悅蝖株恕撘寧<EFBFBD> -->
<wd-message-box selector="policy-box">
<view class="text-center text-sm text-gray-500 leading-relaxed">
请阅读并同意有来技术
<text class="text-blue-500" @click.stop="navigateToAgreement('user')">《用户协议》</text>
<text class="text-blue-500" @click.stop="navigateToAgreement('privacy')">《隐私政策》</text>
霂琿<EFBFBD>霂餃僎<EFBFBD>峕<EFBFBD><EFBFBD>㗇䔉<EFBFBD><EFBFBD><EFBFBD>? <text class="text-blue-500" @click.stop="navigateToAgreement('user')"><EFBFBD>羓鍂<EFBFBD>瑕<EFBFBD>霈柴<EFBFBD>?/text>
<text class="text-blue-500" @click.stop="navigateToAgreement('privacy')"><EFBFBD>𢠃<EFBFBD>蝘<EFBFBD>錇蝑硔<EFBFBD>?/text>
</view>
</wd-message-box>
@@ -268,8 +262,7 @@ const toast = useToast();
const message = useMessage("policy-box");
const userStore = useUserStore();
// 状态
const loading = ref(false);
// <EFBFBD>嗆<EFBFBD>?const loading = ref(false);
const showPassword = ref(false);
const isAgreePolicy = ref(false);
const loginMode = ref<"PASSWORD" | "SMS" | "WECHAT">("PASSWORD");
@@ -283,15 +276,13 @@ const formData = ref({
captchaCode: "",
});
// 图形验证码
const captchaId = ref("");
// <EFBFBD>曉耦撉諹<EFBFBD><EFBFBD>?const captchaId = ref("");
const captchaBase64 = ref("");
const captchaLoading = ref(false);
const redirect = ref("/pages/index/index");
// 绑定手机号相关
const showBindMobilePopup = ref(false);
// 蝏穃<EFBFBD><EFBFBD>𧢲㦤<EFBFBD>瑞㮾<EFBFBD>?const showBindMobilePopup = ref(false);
const bindLoading = ref(false);
const bindSmsCountdown = ref(0);
const bindSmsTimer = ref<ReturnType<typeof setInterval> | null>(null);
@@ -305,8 +296,7 @@ const bindMobileForm = ref({
const pendingLoginAction = ref<"FORM" | "WECHAT_PHONE" | null>(null);
const pendingWechatPhoneCode = ref<string>("");
// 获取图形验证码
const fetchCaptcha = async () => {
// <EFBFBD>瑕<EFBFBD><EFBFBD>曉耦撉諹<EFBFBD><EFBFBD>?const fetchCaptcha = async () => {
if (captchaLoading.value) return;
try {
captchaLoading.value = true;
@@ -315,17 +305,16 @@ const fetchCaptcha = async () => {
captchaId.value = res.captchaId;
captchaBase64.value = res.captchaBase64;
} catch (e) {
console.error("获取验证码失败", e);
console.error("<EFBFBD>瑕<EFBFBD>撉諹<EFBFBD><EFBFBD><EFBFBD>仃韐?, e);
} finally {
captchaLoading.value = false;
}
};
// 计算属性
const loginModeDesc = computed(() => {
// 霈∠<EFBFBD>撅墧<EFBFBD>?const loginModeDesc = computed(() => {
const modeMap = {
PASSWORD: "雿輻鍂韐血噡撖<EFBFBD><EFBFBD><EFBFBD>餃<EFBFBD>",
SMS: "使用手机验证码登录",
SMS: "雿輻鍂<EFBFBD>𧢲㦤撉諹<EFBFBD><EFBFBD><EFBFBD>蒈敶?,
WECHAT: "雿輻鍂敺桐縑敹急㭘<E680A5>餃<EFBFBD>",
};
return modeMap[loginMode.value];
@@ -362,13 +351,11 @@ onLoad((options: any) => {
// #endif
// #ifndef MP-WEIXIN
// 非微信环境强制使用密码登录
if (loginMode.value === "WECHAT") {
// <EFBFBD>𧼮凝靽∠㴓憓<EFBFBD>撩<EFBFBD>嗡蝙<EFBFBD>典<EFBFBD><EFBFBD><EFBFBD>蒈敶? if (loginMode.value === "WECHAT") {
loginMode.value = "PASSWORD";
}
// #endif
// 获取图形验证码
fetchCaptcha();
// <EFBFBD>瑕<EFBFBD><EFBFBD>曉耦撉諹<EFBFBD><EFBFBD>? fetchCaptcha();
});
onShow(() => {
@@ -425,9 +412,9 @@ const openPolicyDialog = (action: "FORM" | "WECHAT_PHONE", phoneCode: string = "
async function doFormLogin() {
if (!canSubmit.value) {
if (loginMode.value === "PASSWORD") {
toast.error("请输入用户名和密码");
toast.error("霂瑁<EFBFBD><EFBFBD>亦鍂<EFBFBD>瑕<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>?);
} else if (loginMode.value === "SMS") {
toast.error("请输入正确的手机号和验证码");
toast.error("霂瑁<EFBFBD><EFBFBD>交迤蝖桃<EFBFBD><EFBFBD>𧢲㦤<EFBFBD>瑕<EFBFBD>撉諹<EFBFBD><EFBFBD>?);
}
return;
}
@@ -456,8 +443,7 @@ async function doFormLogin() {
setTimeout(() => uni.reLaunch({ url: redirect.value }), 800);
} catch (error: any) {
toast.error(error?.message || "<22>餃<EFBFBD>憭梯揖");
// 登录失败刷新验证码
if (loginMode.value === "PASSWORD") {
// <EFBFBD>餃<EFBFBD>憭梯揖<EFBFBD>瑟鰵撉諹<EFBFBD><EFBFBD>? if (loginMode.value === "PASSWORD") {
fetchCaptcha();
}
} finally {
@@ -481,16 +467,16 @@ const handleSendCode = async () => {
return;
}
if (!isValidMobile(mobile)) {
toast.error("请输入正确的手机号");
toast.error("霂瑁<EFBFBD><EFBFBD>交迤蝖桃<EFBFBD><EFBFBD>𧢲㦤<EFBFBD>?);
return;
}
try {
await AuthAPI.sendSmsLoginCode(mobile);
toast.success("验证码已发送");
toast.success("撉諹<EFBFBD><EFBFBD><EFBFBD>歇<EFBFBD>煾<EFBFBD>?);
startSmsCountdown(smsCountdown, smsTimer);
} catch (error: any) {
toast.error(error?.message || "发送失败");
toast.error(error?.message || "<EFBFBD>煾<EFBFBD><EFBFBD>仃韐?);
}
};
@@ -574,16 +560,16 @@ const handleSendBindCode = async () => {
if (bindSmsCountdown.value > 0) return;
const mobile = bindMobileForm.value.mobile.trim();
if (!isValidMobile(mobile)) {
toast.error("请输入正确的手机号");
toast.error("霂瑁<EFBFBD><EFBFBD>交迤蝖桃<EFBFBD><EFBFBD>𧢲㦤<EFBFBD>?);
return;
}
try {
await AuthAPI.sendSmsLoginCode(mobile);
toast.success("验证码已发送");
toast.success("撉諹<EFBFBD><EFBFBD><EFBFBD>歇<EFBFBD>煾<EFBFBD>?);
startSmsCountdown(bindSmsCountdown, bindSmsTimer);
} catch (error: any) {
toast.error(error?.message || "发送失败");
toast.error(error?.message || "<EFBFBD>煾<EFBFBD><EFBFBD>仃韐?);
}
};
@@ -600,7 +586,7 @@ const handleBindMobile = async () => {
if (bindLoading.value) return;
const { mobile, code } = bindMobileForm.value;
if (!isValidMobile(mobile)) {
toast.error("请输入正确的手机号");
toast.error("霂瑁<EFBFBD><EFBFBD>交迤蝖桃<EFBFBD><EFBFBD>𧢲㦤<EFBFBD>?);
return;
}
if (!code.trim()) {
@@ -746,8 +732,7 @@ const handleBack = () => {
letter-spacing: 0.08em;
}
// 主内容
.login-main {
// 銝餃<EFBFBD>摰?.login-main {
position: relative;
z-index: 10;
display: flex;
@@ -834,8 +819,7 @@ const handleBack = () => {
}
}
// 输入框容器
.input-box {
// 颲枏<EFBFBD>獢<EFBFBD>捆<EFBFBD>?.input-box {
display: flex;
align-items: center;
height: 48px;
@@ -868,8 +852,7 @@ const handleBack = () => {
padding: 8px;
}
// 主按钮
.btn-primary {
// 銝餅<EFBFBD><EFBFBD>?.btn-primary {
position: relative;
display: flex;
align-items: center;
@@ -967,8 +950,7 @@ const handleBack = () => {
}
}
// 验证码按钮
.sms-btn {
// 撉諹<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>?.sms-btn {
display: flex;
align-items: center;
justify-content: center;
@@ -1035,8 +1017,7 @@ const handleBack = () => {
border-bottom-color: #60a5fa;
}
// 分割线
.divider {
// <EFBFBD><EFBFBD>𠧧蝥?.divider {
display: flex;
align-items: center;
margin-top: 24px;
@@ -1094,8 +1075,7 @@ const handleBack = () => {
color: #2563eb;
}
// 绑定手机号弹窗
.bind-popup {
// 蝏穃<EFBFBD><EFBFBD>𧢲㦤<EFBFBD>瑕撕蝒?.bind-popup {
padding: 24px;
}

2
src/pages/mine/about/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="page-container dark:text-[var(--wot-color-text)]">
<view class="page dark:text-[var(--wot-color-text)]">
<wd-card>
<view class="about-header">
<wd-img

2
src/pages/mine/account/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="page-container dark:text-[var(--wot-color-text)]">
<view class="page dark:text-[var(--wot-color-text)]">
<wd-card>
<wd-cell-group border>
<wd-cell

2
src/pages/mine/feedback/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="page-container dark:text-[var(--wot-color-text)]">
<view class="page dark:text-[var(--wot-color-text)]">
<wd-text size="small">选填，最多上传3张图片</wd-text>
<wd-form ref="formRef" :model="formData" :rules="rules">
<wd-form-item label="问题类型" prop="feedbackType">

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

@@ -1,5 +1,5 @@
<template>
<view class="page-container page-container--gradient dark:text-[var(--wot-color-text)]">
<view class="page dark:text-[var(--wot-color-text)]">
<view class="mine-hero" :style="{ paddingTop: `${navbar.totalHeight.value}px` }">
<!-- 蓝色背景 -->
<view class="mine-hero__bg" :style="{ background: headerBackground }" />
@@ -509,8 +509,8 @@ const helpItems = computed<ActionItem[]>(() => [
// ...
.mine-hero {
position: relative;
overflow: visible;
padding-bottom: 24rpx;
overflow: visible;
}
.mine-hero__bg {
@@ -558,13 +558,13 @@ const helpItems = computed<ActionItem[]>(() => [
padding: 28rpx 28rpx;
overflow: hidden;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.12) 100%);
backdrop-filter: blur(20px);
border: 1rpx solid rgba(255, 255, 255, 0.35);
border-radius: 28rpx;
box-shadow:
0 8rpx 32rpx rgba(0, 0, 0, 0.08),
0 2rpx 8rpx rgba(0, 0, 0, 0.04),
inset 0 1rpx 0 rgba(255, 255, 255, 0.25);
backdrop-filter: blur(20px);
}
.profile-card::before {
@@ -573,16 +573,16 @@ const helpItems = computed<ActionItem[]>(() => [
right: -20%;
width: 200rpx;
height: 200rpx;
pointer-events: none;
content: "";
background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.profile-card__header {
display: flex;
align-items: center;
gap: 28rpx;
align-items: center;
width: 100%;
}
@@ -592,11 +592,11 @@ const helpItems = computed<ActionItem[]>(() => [
}
.profile-card__avatar {
flex-shrink: 0;
width: 120rpx;
height: 120rpx;
border: 3rpx solid rgba(255, 255, 255, 0.9);
border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}
@@ -625,11 +625,11 @@ const helpItems = computed<ActionItem[]>(() => [
.profile-card__actions {
display: flex;
align-items: center;
gap: 10rpx;
flex-shrink: 0;
margin-left: auto;
gap: 10rpx;
align-items: center;
margin-right: -10rpx;
margin-left: auto;
}
.profile-card__action-btn {
@@ -640,15 +640,18 @@ const helpItems = computed<ActionItem[]>(() => [
width: 52rpx;
height: 52rpx;
background: rgba(255, 255, 255, 0.14);
backdrop-filter: blur(10px);
border: 1rpx solid rgba(255, 255, 255, 0.22);
border-radius: 999rpx;
backdrop-filter: blur(10px);
}
.profile-card__notify-badge {
position: absolute;
top: -8rpx;
right: -6rpx;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 30rpx;
height: 30rpx;
padding: 0 8rpx;
@@ -657,9 +660,6 @@ const helpItems = computed<ActionItem[]>(() => [
background: #ef4444;
border: 2rpx solid rgba(255, 255, 255, 0.95);
border-radius: 999rpx;
display: inline-flex;
align-items: center;
justify-content: center;
}
.gender-icon--male {
@@ -676,8 +676,8 @@ const helpItems = computed<ActionItem[]>(() => [
}
.profile-card__top {
align-items: center;
gap: 16rpx;
align-items: center;
margin-bottom: 18rpx;
}
@@ -703,14 +703,14 @@ const helpItems = computed<ActionItem[]>(() => [
.profile-card__desc {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-top: 12rpx;
overflow: hidden;
font-size: 24rpx;
line-height: 1.6;
color: rgba(255, 255, 255, 0.84);
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.profile-card__hint {
@@ -741,25 +741,25 @@ const helpItems = computed<ActionItem[]>(() => [
}
.quick-cards {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20rpx;
margin-top: 24rpx;
margin-bottom: 0;
position: relative;
z-index: 2;
}
.community-card {
position: relative;
display: flex;
align-items: center;
gap: 24rpx;
align-items: center;
padding: 36rpx;
overflow: hidden;
background: transparent;
border-radius: 32rpx;
box-shadow: 0 10rpx 30rpx rgba(15, 23, 42, 0.06);
overflow: hidden;
}
.community-card__bg {
@@ -768,8 +768,8 @@ const helpItems = computed<ActionItem[]>(() => [
z-index: 0;
width: 100%;
height: 100%;
opacity: 1;
pointer-events: none;
opacity: 1;
}
.community-card__mask {
@@ -799,13 +799,13 @@ const helpItems = computed<ActionItem[]>(() => [
.community-card__logo {
position: relative;
z-index: 2;
box-sizing: border-box;
width: 84rpx;
height: 84rpx;
padding: 10rpx;
box-sizing: border-box;
border-radius: 20rpx;
background: rgba(255, 255, 255, 0.96);
border: 1rpx solid rgba(148, 163, 184, 0.22);
border-radius: 20rpx;
box-shadow: 0 6rpx 18rpx rgba(15, 23, 42, 0.06);
}
@@ -830,8 +830,8 @@ const helpItems = computed<ActionItem[]>(() => [
.community-card__title-row {
display: flex;
align-items: center;
gap: 16rpx;
align-items: center;
}
.community-card__title {
@@ -849,15 +849,15 @@ const helpItems = computed<ActionItem[]>(() => [
.community-card__desc {
display: block;
margin-top: 10rpx;
font-size: 24rpx;
color: var(--wot-color-text-secondary, #64748b);
line-height: 1.55;
display: -webkit-box;
margin-top: 10rpx;
overflow: hidden;
font-size: 24rpx;
line-height: 1.55;
color: var(--wot-color-text-secondary, #64748b);
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.section-card {
@@ -873,16 +873,16 @@ const helpItems = computed<ActionItem[]>(() => [
.section-title {
display: block;
margin-bottom: 18rpx;
font-size: 26rpx;
font-weight: 600;
color: var(--wot-color-text, #2f3a4a);
margin-bottom: 18rpx;
}
.quick-card {
display: flex;
align-items: center;
gap: 20rpx;
align-items: center;
padding: 28rpx 24rpx;
background: var(--wot-color-white, #fff);
border-radius: 24rpx;
@@ -891,17 +891,17 @@ const helpItems = computed<ActionItem[]>(() => [
}
.quick-card:active {
transform: scale(0.96);
box-shadow: 0 4rpx 12rpx rgba(15, 23, 42, 0.06);
transform: scale(0.96);
}
.quick-card__icon {
width: 84rpx;
height: 84rpx;
border-radius: 22rpx;
display: flex;
align-items: center;
justify-content: center;
width: 84rpx;
height: 84rpx;
border-radius: 22rpx;
}
.quick-card__body {
@@ -911,22 +911,22 @@ const helpItems = computed<ActionItem[]>(() => [
.quick-card__title {
display: block;
overflow: hidden;
font-size: 28rpx;
font-weight: 500;
color: var(--wot-color-text, #2f3a4a);
line-height: 1.35;
overflow: hidden;
color: var(--wot-color-text, #2f3a4a);
text-overflow: ellipsis;
white-space: nowrap;
}
.quick-card__desc {
display: block;
font-size: 22rpx;
color: var(--wot-color-text-secondary, #64748b);
line-height: 1.6;
margin-top: 8rpx;
overflow: hidden;
font-size: 22rpx;
line-height: 1.6;
color: var(--wot-color-text-secondary, #64748b);
text-overflow: ellipsis;
white-space: nowrap;
}
@@ -943,33 +943,33 @@ const helpItems = computed<ActionItem[]>(() => [
.mine-body {
position: relative;
z-index: 0;
padding: 0 28rpx calc(env(safe-area-inset-bottom) + 40rpx);
margin-top: 0;
background: var(--wot-color-bg, #f8fafc);
border-top-left-radius: 48rpx;
border-top-right-radius: 48rpx;
padding: 0 28rpx calc(env(safe-area-inset-bottom) + 40rpx);
}
.menu-list {
margin-top: 24rpx;
padding: 0 28rpx;
margin-top: 24rpx;
overflow: hidden;
background: var(--wot-color-white, #fff);
border-radius: 32rpx;
box-shadow: 0 16rpx 40rpx rgba(15, 23, 42, 0.05);
overflow: hidden;
}
.menu-list--flat {
margin-top: 0;
padding: 0;
margin-top: 0;
background: transparent;
border-radius: 0;
box-shadow: none;
}
.menu-row {
align-items: center;
gap: 20rpx;
align-items: center;
padding: 24rpx 20rpx;
background: transparent;
}
@@ -979,9 +979,9 @@ const helpItems = computed<ActionItem[]>(() => [
}
.menu-row__icon {
flex-shrink: 0;
width: 76rpx;
height: 76rpx;
flex-shrink: 0;
}
.menu-row__main {

10
src/pages/mine/official/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="page-container dark:text-[var(--wot-color-text)]">
<view class="page dark:text-[var(--wot-color-text)]">
<view class="page-content">
<view class="header">
<image class="logo" src="/static/logo.png" mode="aspectFill" />
@@ -45,8 +45,8 @@
.header {
display: flex;
align-items: center;
gap: 20rpx;
align-items: center;
padding: 28rpx;
background: #fff;
border-radius: 20rpx;
@@ -77,8 +77,8 @@
}
.group-tip {
margin-top: 20rpx;
padding: 20rpx;
margin-top: 20rpx;
font-size: 26rpx;
line-height: 1.6;
color: #374151;
@@ -87,8 +87,8 @@
}
.qr-card {
margin-top: 24rpx;
padding: 28rpx;
margin-top: 24rpx;
background: #fff;
border-radius: 20rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
@@ -101,8 +101,8 @@
.qr-tip {
margin-top: 20rpx;
text-align: center;
font-size: 26rpx;
color: #6b7280;
text-align: center;
}
</style>

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

@@ -1,5 +1,5 @@
<template>
<view class="page-container dark:text-[var(--wot-color-text)]">
<view class="page dark:text-[var(--wot-color-text)]">
<!-- 头部标题 -->
<view class="header">
<view class="title">完善个人信息</view>

4
src/pages/mine/profile/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="page-container page-container--auto dark:text-[var(--wot-color-text)]">
<view class="page page--auto dark:text-[var(--wot-color-text)]">
<view class="profile-content">
<view class="pt-20rpx">
<wd-card v-if="userProfile">
@@ -184,8 +184,6 @@ function handleTouchMove(event: TouchEvent) {
}
</script>
<style lang="scss" scoped>
.avatar-cell {
:deep(.wd-cell__body) {
align-items: center;

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

@@ -1,5 +1,5 @@
<template>
<view class="page-container dark:text-[var(--wot-color-text)]">
<view class="page dark:text-[var(--wot-color-text)]">
<wd-collapse v-model="activeNames" accordion>
<wd-collapse-item
v-for="(section, index) in agreementContent"

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

@@ -1,5 +1,5 @@
<template>
<view class="page-container dark:text-[var(--wot-color-text)]">
<view class="page dark:text-[var(--wot-color-text)]">
<wd-cell-group>
<wd-cell title="主题设置" icon="setting1" is-link @click="navigateToTheme" />
<wd-cell title="用户协议" icon="user" is-link @click="navigateToUserAgreement" />

2
src/pages/mine/settings/network/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="page-container dark:text-[var(--wot-color-text)]">
<view class="page dark:text-[var(--wot-color-text)]">
<!-- 网络状态展示 -->
<wd-card>
<wd-cell-group border>

2
src/pages/mine/settings/privacy/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="page-container dark:text-[var(--wot-color-text)]">
<view class="page dark:text-[var(--wot-color-text)]">
<wd-collapse v-model="activeNames" accordion>
<wd-collapse-item
v-for="(section, index) in privacyContent"

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

@@ -1,5 +1,5 @@
<template>
<view class="page-container dark:text-[var(--wot-color-text)]">
<view class="page dark:text-[var(--wot-color-text)]">
<!-- 暗黑模式设置 -->
<wd-card custom-class="mx-30rpx my-20rpx">
<template #header>

2
src/pages/work/config/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="work">
<view class="page">
<!-- 筛选 -->
<wd-drop-menu close-on-click-modal class="mb-20rpx mr-20rpx ml-20rpx">
<wd-drop-menu-item ref="dropMenu" title="筛选" icon="filter" icon-size="18px">

424
src/pages/work/dept/index.vue
View File

@@ -1,5 +1,27 @@
<template>
<view class="dept-page">
<view class="page">
<!-- 统计卡片 -->
<view class="stats-row">
<view class="stat-card">
<view class="stat-card__icon stat-card__icon--primary">
<wd-icon name="organization" size="20" />
</view>
<view class="stat-card__content">
<text class="stat-card__value">{{ totalDepts }}</text>
<text class="stat-card__label">部门总数</text>
</view>
</view>
<view class="stat-card">
<view class="stat-card__icon stat-card__icon--success">
<wd-icon name="people" size="20" />
</view>
<view class="stat-card__content">
<text class="stat-card__value">{{ totalUsers }}</text>
<text class="stat-card__label">员工总数</text>
</view>
</view>
</view>
<!-- 搜索栏 -->
<view class="search-bar">
<wd-search
@@ -11,28 +33,39 @@
</view>
<!-- 部门列表 -->
<scroll-view class="dept-list" scroll-y>
<scroll-view
class="dept-list"
scroll-y
refresher-enabled
:refresher-triggered="isRefreshing"
@refresherrefresh="onRefresh"
>
<view v-if="filteredDeptList.length > 0" class="dept-tree">
<template v-for="dept in filteredDeptList" :key="dept.id">
<dept-item
:dept="dept"
:level="0"
@click="handleDeptClick"
@edit="handleEditDept"
@delete="handleDeleteDept"
/>
</template>
</view>
<!-- 空状态 -->
<view v-else class="empty-state">
<wd-icon name="folder-open" size="48" color="#d1d5db" />
<text class="empty-state__text">暂无部门数据</text>
<view class="empty-state__icon-wrap">
<wd-icon name="folder-open" size="64" color="var(--color-text-disabled)" />
</view>
<text class="empty-state__title">暂无部门</text>
<text class="empty-state__desc">点击底部按钮创建第一个部门</text>
</view>
</scroll-view>
<!-- 底部操作栏 -->
<view class="action-bar">
<wd-button type="primary" block @click="handleAddDept">
<wd-icon name="add" size="16" color="#fff" />
<wd-icon name="add" size="18" color="#fff" />
<text>新增部门</text>
</wd-button>
</view>
@@ -44,15 +77,18 @@
* 部门管理页面
*
* 功能说明：
* - 展示部门树形结构
* - 支持搜索部门
* - 新增/编辑/删除部门
* - 部门树形结构展示
* - 部门统计概览
* - 搜索过滤
* - 下拉刷新
* - 滑动操作（编辑/删除）
* - 新增部门
*
* 技术要点：
* - 使用 BEM 命名规范
* - 支持暗黑模式
* - 使用 CSS 变量
* - 递归组件实现树形结构
* - CSS 变量
* - 递归组件
*/
// ============================================================================
@@ -60,14 +96,14 @@
// ============================================================================
interface DeptNode {
id: string
label: string
userCount?: number
children?: DeptNode[]
id: string;;
label: string;;
userCount?: number;;
children?: DeptNode[];;
}
// ============================================================================
// 子组件 - 部门项（支持递归）
// 子组件 - 部门项（支持递归 + 滑动操作）
// ============================================================================
const DeptItem = defineComponent({
@@ -76,55 +112,91 @@ const DeptItem = defineComponent({
dept: { type: Object as PropType<DeptNode>, required: true },
level: { type: Number, default: 0 },
},
emits: ["click"],
emits: ["click", "edit", "delete"],
setup(props, { emit }) {
const isExpanded = ref(false)
const hasChildren = computed(() => props.dept.children && props.dept.children.length > 0)
const isExpanded = ref(false);;
const isSwipeOpen = ref(false);;
const hasChildren = computed(() => props.dept.children && props.dept.children.length > 0);;
function toggleExpand() {
if (hasChildren.value) {
isExpanded.value = !isExpanded.value
isExpanded.value = !isExpanded.value;;
}
}
function handleClick() {
emit("click", props.dept)
emit("click", props.dept);;
}
function handleEdit() {
emit("edit", props.dept);;
}
function handleDelete() {
emit("delete", props.dept);;
}
function closeSwipe() {
isSwipeOpen.value = false;;
}
return {
isExpanded,
isSwipeOpen,
hasChildren,
toggleExpand,
handleClick,
}
handleEdit,
handleDelete,
closeSwipe,
};;
},
template: `
<view class="dept-node">
<view
class="dept-node__item"
:class="{ 'dept-node__item--has-children': hasChildren }"
:style="{ paddingLeft: level * 32 + 16 + 'rpx' }"
>
<view class="dept-node__expand" @click="toggleExpand">
<wd-icon
v-if="hasChildren"
name="arrow-right"
size="14"
class="dept-node__arrow"
:class="{ 'dept-node__arrow--expanded': isExpanded }"
/>
<view class="dept-node__swipe-wrap">
<view class="dept-node__actions">
<view class="dept-node__action dept-node__action--edit" @click="handleEdit">
<wd-icon name="edit" size="16" color="#fff" />
<text>编辑</text>
</view>
<view class="dept-node__action dept-node__action--delete" @click="handleDelete">
<wd-icon name="delete" size="16" color="#fff" />
<text>删除</text>
</view>
</view>
<view class="dept-node__content" @click="handleClick">
<wd-icon
name="folder"
size="18"
:color="hasChildren ? 'var(--color-primary)' : 'var(--color-text-secondary)'"
/>
<text class="dept-node__name">{{ dept.label }}</text>
</view>
<view class="dept-node__meta" @click="handleClick">
<text class="dept-node__count">{{ dept.userCount || 0 }} 人</text>
<wd-icon name="arrow-right" size="14" color="var(--color-text-secondary)" />
<view
class="dept-node__item"
:class="{ 'dept-node__item--has-children': hasChildren }"
:style="{ paddingLeft: level * 24 + 16 + 'rpx' }"
@click="handleClick"
>
<view class="dept-node__expand" @click.stop="toggleExpand">
<wd-icon
v-if="hasChildren"
name="arrow-right"
size="14"
class="dept-node__arrow"
:class="{ 'dept-node__arrow--expanded': isExpanded }"
/>
</view>
<view class="dept-node__content">
<view
class="dept-node__icon"
:class="{ 'dept-node__icon--has-children': hasChildren }"
>
<wd-icon
:name="hasChildren ? 'folder' : 'folder-open'"
size="18"
/>
</view>
<view class="dept-node__info">
<text class="dept-node__name">{{ dept.label }}</text>
<text class="dept-node__count">{{ dept.userCount || 0 }} 人</text>
</view>
</view>
<view class="dept-node__chevron">
<wd-icon name="chevron-right" size="14" />
</view>
</view>
</view>
@@ -136,19 +208,22 @@ const DeptItem = defineComponent({
:dept="child"
:level="level + 1"
@click="$emit('click', $event)"
@edit="$emit('edit', $event)"
@delete="$emit('delete', $event)"
/>
</view>
</view>
`,
})
});;
// ============================================================================
// 响应式数据
// ============================================================================
const searchText = ref("")
const searchText = ref("");;
const isRefreshing = ref(false);;
// 部门树形数据（示例数据）
// 部门树形数据
const deptList = ref<DeptNode[]>([
{
id: "1",
@@ -186,47 +261,100 @@ const deptList = ref<DeptNode[]>([
},
],
},
])
]);;
// 过滤后的部门列表
const filteredDeptList = computed(() => {
if (!searchText.value) return deptList.value
// 统计数据
const totalDepts = computed(() => {
function countDepts(depts: DeptNode[]): number {
return depts.reduce(
;
(sum, dept) => sum + 1 + (dept.children ? countDepts(dept.children) : 0),
0;
; );
}
return countDepts(deptList.value);
});
;
const totalUsers = computed(() => {
function sumUsers(depts: DeptNo;de[]): number {
; return depts.reduce(
(sum, dept) => sum + (dept.userCount || 0) + (dept.children ? sumUsers(dept.children) : 0),
0
);
};
return sumUsers(deptList.value);
});
// 过滤后的部门列表;
const filteredDeptList = computed(() => {;
if (!searchText.value) return deptList.value;
function filterDepts(depts: DeptNode[]): DeptNode[] {
return depts.reduce<DeptNode[]>((acc, dept) => {
const matched = dept.label.toLowerCase().includes(searchText.value.toLowerCase())
const filteredChildren = dept.children ? filterDepts(dept.children) : []
const matched = dept.label.toLowerCase().includes(searchText.value.toLowerCase());
cons;t filteredChildren = dept.children ? filterDepts(dept.children) : [];
if (matched || filteredChildren.length > 0) {
acc.push({
if (matche;d || filteredChildren.length > 0) {
ac;c.push({
...dept,
children: filteredChildren.length > 0 ? filteredChildren : dept.children,
})
}
return acc
}, [])
});;
; }
return acc;
}, []);
}
return filterDepts(deptList.value)
})
return filterDepts(deptList.value);
});
// ============================================================================
// 事件处理
// ============================================================================
// ========================;====================================================
// 事件处理;
// =========================;===================================================
;
/** 下拉刷新 */
async function onRefresh() {
isRefreshing.value = true;
await new Promise((resolve) => setTimeout(resolve, 1000));
isRefreshing.value = false;;
uni.showToast({ title: "刷新成功", icon: "success" });
}
/** 搜索 */
function handleSearch() {
uni.showToast({ title: `搜索: ${searchText.value}`, icon: "none" })
function handleSearch() {;
uni.showToast({ title: `搜索: ${searchText.value}`, icon: "none" });
}
/** 部门点击 */
function handleDeptClick(dept: DeptNode) {
uni.showToast({ title: `点击: ${dept.label}`, icon: "none" })
function handleDeptClick(dept: DeptNode) {;
uni.showToast({ title: `查看: ${dept.label}`, icon: "none" });
}
/** 编辑部门 */
function handleEditDept(dept: DeptNode) {
uni.showToast({ title: `编辑: ${dept.label}`, icon: "none" });
}
/** 删除部门 */
function handleDeleteDept(dept: DeptNode) {;
uni.showModal({
title: "确认删除",
;content: `确定要删除部门"${dept.label}"吗？`,
success: (res) => {
if (res.confirm) {
uni.showToast({ title: "删除成功", icon: "success" });
}
},;
});
}
/** 新增部门 */
function handleAddDept() {
uni.showToast({ title: "新增部门", icon: "none" })
uni.showToast({ title: "新增部门", icon: "none" });
}
</script>
@@ -242,13 +370,70 @@ function handleAddDept() {
// 页面容器
// ============================================================================
.dept-page {
.page {
display: flex;
flex-direction: column;
min-height: 100vh;
background-color: var(--color-bg-secondary);
}
// ============================================================================
// 统计卡片
// ============================================================================
.stats-row {
display: flex;
gap: 24rpx;
padding: 24rpx;
background-color: var(--color-bg);
}
.stat-card {
display: flex;
flex: 1;
gap: 20rpx;
align-items: center;
padding: 28rpx;
background-color: var(--color-bg-secondary);
border-radius: 16rpx;
&__icon {
display: flex;
align-items: center;
justify-content: center;
width: 72rpx;
height: 72rpx;
border-radius: 16rpx;
&--primary {
color: var(--color-primary);
background-color: rgba(var(--color-primary-rgb), 0.1);
}
&--success {
color: #22c55e;
background-color: rgba(34, 197, 94, 0.1);
}
}
&__content {
display: flex;
flex-direction: column;
gap: 4rpx;
}
&__value {
font-size: 40rpx;
font-weight: 600;
color: var(--color-text);
}
&__label {
font-size: 24rpx;
color: var(--color-text-secondary);
}
}
// ============================================================================
// 搜索栏
// ============================================================================
@@ -271,14 +456,47 @@ function handleAddDept() {
}
// ============================================================================
// 部门节点（递归组件样式）
// 部门节点
// ============================================================================
.dept-node {
&__swipe-wrap {
position: relative;
overflow: hidden;
}
&__actions {
position: absolute;
top: 0;
right: 0;
bottom: 0;
display: flex;
}
&__action {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 120rpx;
font-size: 22rpx;
color: #fff;
&--edit {
background-color: var(--color-primary);
}
&--delete {
background-color: #ef4444;
}
}
&__item {
display: flex;
align-items: center;
height: 96rpx;
height: 112rpx;
padding-right: 24rpx;
background-color: var(--color-bg);
border-bottom: 2rpx solid var(--color-border-light);
&:active {
@@ -290,8 +508,8 @@ function handleAddDept() {
display: flex;
align-items: center;
justify-content: center;
width: 48rpx;
height: 48rpx;
width: 56rpx;
height: 56rpx;
}
&__arrow {
@@ -306,27 +524,47 @@ function handleAddDept() {
&__content {
display: flex;
flex: 1;
gap: 20rpx;
align-items: center;
gap: 16rpx;
}
&__icon {
display: flex;
align-items: center;
justify-content: center;
width: 64rpx;
height: 64rpx;
color: var(--color-text-secondary);
background-color: var(--color-bg-secondary);
border-radius: 12rpx;
&--has-children {
color: var(--color-primary);
background-color: rgba(var(--color-primary-rgb), 0.1);
}
}
&__info {
display: flex;
flex-direction: column;
gap: 4rpx;
}
&__name {
font-size: 28rpx;
font-size: 30rpx;
font-weight: 500;
color: var(--color-text);
}
&__meta {
display: flex;
align-items: center;
gap: 8rpx;
padding-right: 24rpx;
}
&__count {
font-size: 24rpx;
color: var(--color-text-secondary);
}
&__chevron {
color: var(--color-text-disabled);
}
&__children {
background-color: var(--color-bg-secondary);
}
@@ -341,11 +579,21 @@ function handleAddDept() {
flex-direction: column;
align-items: center;
justify-content: center;
padding: 100rpx 0;
padding: 120rpx 0;
&__text {
margin-top: 24rpx;
font-size: 28rpx;
&__icon-wrap {
margin-bottom: 24rpx;
}
&__title {
font-size: 32rpx;
font-weight: 500;
color: var(--color-text);
}
&__desc {
margin-top: 12rpx;
font-size: 26rpx;
color: var(--color-text-secondary);
}
}

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

@@ -61,7 +61,7 @@ function handleNavClick(item: any) {
{
"name": "work",
"style": {
"navigationBarTitleText": "工作台"
"navigationBarTitleText": "工作å<EFBFBD>?
},
"layout": "tabbar"
}

2
src/pages/work/log/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="log">
<view class="page">
<!-- 筛选 -->
<wd-drop-menu close-on-click-modal class="mb-24rpx">
<wd-drop-menu-item ref="filterDropMenu" title="筛选" icon="filter" icon-size="18px">

2
src/pages/work/notice/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<view>
<view class="page">
<!-- 添加搜索栏 -->
<wd-drop-menu close-on-click-modal class="mb-20rpx mr-20rpx ml-20rpx">
<wd-drop-menu-item ref="dropMenu" title="筛选" icon="filter" icon-size="18px">

2
src/pages/work/role/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="role">
<view class="page">
<!-- 筛选 -->
<wd-drop-menu>
<wd-drop-menu-item ref="filterDropMenu" icon="filter" icon-size="18px" title="筛选">

28
src/pages/work/user/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="user-container">
<view class="page">
<!-- 排序筛选 -->
<view class="filter-container">
<wd-drop-menu>
@@ -71,33 +71,13 @@
</view>
<view class="text-right">
<Auth permission="sys:user:update">
<wd-button
type="primary"
size="small"
plain
@click="handleOpenDialog(item.id)"
>
编辑
</wd-button>
&nbsp;
</Auth>
<Auth permission="sys:user:delete">
<wd-button
type="error"
size="small"
plain
@click="handleDelete(item.id)"
>
<wd-button 编辑 wd-button> bsp; th>uth permission="sys:user:delete">
<wd-button type="error" size="small" plain @click="handleDelete(item.id)">
删除
</wd-button>
</Auth>
</view>
</view>
</template>
</wd-card>
<wd-loadmore v-if="total > 0" :state="loadMoreState" @reload="loadmore" />
<wd-status-tip v-else-if="total == 0" image="search" tip="当前搜索无结果" />
</view>e>e v-if="total > 0" :state="load-tip v-else-if="total == 0" image="search" tip="当前搜索无结果" />
</view>
<!-- 弹窗表单 -->