fix(ui): polish miniprogram and admin console details

小程序修复:
- 首页/我的/记录页移除自定义头部,使用原生导航栏
- tabBar '护理记录' 改为 '记录'
- 智能模式跳转auto-scan页面(不再跳过)
- 扫码区域尺寸 300→360rpx,图标 100→120rpx
- 护理中倒计时 120→144rpx
- 完成页图标 120→140rpx
- 完成页时长格式 '10分0秒' → '10分钟'
- 蓝牙连接 '连接中' → '点击连接'
- 订阅套餐默认选中年卡
- 订阅成功页改为动态数据(非硬编码)
- 我的页增加退出登录按钮
- 护理记录日期支持'今天/昨天'相对格式
- 扫描进度居中
- 锁定模式图标加灰度滤镜

管理后台修复:
- 所有页面移除重复页面标题
- 仪表盘统计卡片改为垂直布局
- 快捷操作图标统一粉色+箭头
- 设备管理搜索placeholder和库存badge修正
- 用户管理头像、次后缀、月卡/试用badge颜色修正
- 订阅管理stat背景改白色、过期改红色、tab切换修复
- 护理记录模式badge修正
- 操作日志改为平铺列表
- 系统设置开关改绿色、表单改水平布局
- 全局背景色 #f5f5f5 → #f0f2f5
这个提交包含在:
Guoguo
2026-04-23 01:18:50 +08:00
父节点 7fc17b958a
当前提交 5064cf119d
修改 26 个文件,包含 318 行新增317 行删除
+57 -34
查看文件
@@ -1,21 +1,20 @@
<template>
<AdminLayout currentPage="/pages/user/index">
<view class="page-card">
<view class="page-header">
<text class="page-title">👥 用户管理</text>
<view class="header-actions">
<input
class="search-input"
v-model="keyword"
placeholder="搜索用户昵称"
placeholder-class="input-placeholder"
@confirm="onSearch"
/>
<button class="btn-primary btn-sm" @click="onSearch">搜索</button>
<button class="btn-default btn-sm">导出用户</button>
</view>
<view class="toolbar">
<view class="header-actions">
<input
class="search-input"
v-model="keyword"
placeholder="搜索用户/手机号..."
placeholder-class="input-placeholder"
@confirm="onSearch"
/>
<button class="btn-primary btn-sm" @click="onSearch">搜索</button>
<button class="btn-default btn-sm">导出用户</button>
</view>
</view>
<view class="page-card">
<view class="data-table">
<view class="t-header">
<view class="t-row">
@@ -30,10 +29,15 @@
</view>
<view class="t-body">
<view class="t-row" v-for="item in users" :key="item.user_id">
<text class="t-td flex2">👤 {{ item.nickname || '-' }}</text>
<text class="t-td flex2">
<view class="user-cell">
<view class="avatar-circle">👤</view>
<text>{{ item.nickname || '-' }}</text>
</view>
</text>
<text class="t-td flex2">{{ item.phone || '-' }}</text>
<text class="t-td flex1">{{ item.device_count || 0 }}</text>
<text class="t-td flex1">{{ item.treatment_count || 0 }}</text>
<text class="t-td flex1">{{ item.treatment_count || 0 }}</text>
<text class="t-td flex1">
<text :class="subBadge(item.subscription_status)">{{ subStatusText(item.subscription_status) }}</text>
</text>
@@ -105,9 +109,9 @@ export default {
subBadge(status) {
const map = {
yearly: 'badge badge-success',
monthly: 'badge badge-success',
trial: 'badge badge-warning',
none: 'badge badge-default'
monthly: 'badge badge-warning',
trial: 'badge badge-blue',
none: 'badge badge-blue'
}
return map[status] || 'badge badge-default'
},
@@ -119,23 +123,13 @@ export default {
</script>
<style scoped>
.page-card {
.toolbar {
background: #fff;
border-radius: 8px;
padding: 20px;
}
.page-header {
padding: 12px 20px;
margin-bottom: 16px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.page-title {
font-size: 18px;
font-weight: 600;
color: #333;
justify-content: flex-end;
}
.header-actions {
@@ -144,6 +138,12 @@ export default {
gap: 8px;
}
.page-card {
background: #fff;
border-radius: 8px;
padding: 20px;
}
.search-input {
width: 220px;
height: 32px;
@@ -215,6 +215,24 @@ export default {
flex: 2;
}
.user-cell {
display: flex;
align-items: center;
gap: 8px;
}
.avatar-circle {
width: 28px;
height: 28px;
border-radius: 50%;
background: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
}
.badge {
display: inline-block;
padding: 2px 8px;
@@ -232,6 +250,11 @@ export default {
color: #faad14;
}
.badge-blue {
background: #e6f7ff;
color: #1890ff;
}
.badge-default {
background: #f5f5f5;
color: #999;
@@ -247,7 +270,7 @@ export default {
.pagination {
display: flex;
align-items: center;
justify-content: center;
justify-content: flex-end;
gap: 8px;
margin-top: 20px;
}