321 lines
8.0 KiB
Markdown
321 lines
8.0 KiB
Markdown
# TDesign UI 重设计完成报告
|
|
|
|
## 📅 更新时间
|
|
2026-01-06
|
|
|
|
## 🎨 设计目标
|
|
|
|
使用腾讯 TDesign 企业级设计组件库重构价格查询页面,提升 UI 专业度和用户体验。
|
|
|
|
## ✅ 完成内容
|
|
|
|
### 1. 依赖安装与配置
|
|
|
|
#### 1.1 安装 TDesign 组件库
|
|
```bash
|
|
npm install tdesign-miniprogram@^1.12.1
|
|
```
|
|
|
|
#### 1.2 全局组件注册 ([app.json](app.json))
|
|
已注册以下 TDesign 组件:
|
|
- `t-button` - 按钮
|
|
- `t-input` - 输入框
|
|
- `t-select` - 选择器
|
|
- `t-picker` - 底部选择器
|
|
- `t-cell` - 单元格
|
|
- `t-cell-group` - 单元格组
|
|
- `t-card` - 卡片
|
|
- `t-tag` - 标签
|
|
- `t-divider` - 分割线
|
|
- `t-loading` - 加载状态
|
|
- `t-empty` - 空状态
|
|
- `t-date-time-picker` - 日期时间选择器
|
|
|
|
#### 1.3 主题色更新
|
|
- 主色调: `#1890ff` → `#0052D9` (TDesign 标准蓝)
|
|
- TabBar 选中色: `#0052D9`
|
|
- 导航栏背景色: `#0052D9`
|
|
|
|
### 2. 价格查询页面重构
|
|
|
|
#### 2.1 表单区域 ([pages/index/index.wxml](pages/index/index.wxml))
|
|
|
|
**改进点:**
|
|
- ✅ 使用 `<t-cell>` + `<t-cell-group>` 替代原生 View 布局
|
|
- ✅ 使用 `<t-picker>` 实现底部弹窗选择器
|
|
- ✅ 使用 `<t-button>` 统一按钮样式
|
|
- ✅ 添加 hover 效果提升交互体验
|
|
|
|
**组件结构:**
|
|
```xml
|
|
<!-- 表单项使用 t-cell 展示 -->
|
|
<t-cell-group>
|
|
<t-cell
|
|
title="地区"
|
|
note="{{selectedRegionIndex === -1 ? '请选择地区' : regions[selectedRegionIndex]}}"
|
|
hover
|
|
bindtap="showRegionPicker"
|
|
required />
|
|
</t-cell-group>
|
|
|
|
<!-- 底部选择器 -->
|
|
<t-picker
|
|
visible="{{regionPickerVisible}}"
|
|
value="{{selectedRegionIndex}}"
|
|
range="{{regions}}"
|
|
bind:confirm="onPickerConfirm"
|
|
bind:cancel="onPickerCancel" />
|
|
```
|
|
|
|
#### 2.2 查询结果区域
|
|
|
|
**统计卡片:**
|
|
- ✅ 使用 `<t-card>` 组件
|
|
- ✅ 内部使用 Flexbox 布局展示 4 个统计项
|
|
- ✅ 使用 `<t-divider>` 分隔线和 `<t-tag>` 展示趋势标签
|
|
|
|
**价格列表:**
|
|
- ✅ 使用 `<t-card>` 展示每条价格信息
|
|
- ✅ 使用 `<t-tag>` 展示价格来源和产地标签
|
|
- ✅ 使用 `<t-empty>` 展示空状态
|
|
|
|
#### 2.3 加载状态
|
|
|
|
使用 TDesign 加载组件:
|
|
```xml
|
|
<t-loading theme="circular" loading="{{loading}}" text="加载中..."></t-loading>
|
|
```
|
|
|
|
### 3. JavaScript 逻辑更新 ([pages/index/index.js](pages/index/index.js))
|
|
|
|
#### 3.1 新增状态管理
|
|
```javascript
|
|
data: {
|
|
// Picker 显示状态
|
|
regionPickerVisible: false,
|
|
materialPickerVisible: false,
|
|
partsnamePickerVisible: false,
|
|
datePickerVisible: false
|
|
}
|
|
```
|
|
|
|
#### 3.2 新增事件处理函数
|
|
|
|
**显示 Picker:**
|
|
```javascript
|
|
showRegionPicker() {
|
|
this.setData({ regionPickerVisible: true })
|
|
}
|
|
```
|
|
|
|
**确认选择:**
|
|
```javascript
|
|
onPickerConfirm(e) {
|
|
const { value } = e.detail
|
|
const key = e.currentTarget.dataset.key
|
|
|
|
const pickerMap = {
|
|
selectedRegionIndex: 'regionPickerVisible',
|
|
selectedMaterialIndex: 'materialPickerVisible',
|
|
selectedPartsnameIndex: 'partsnamePickerVisible'
|
|
}
|
|
|
|
const updateData = { [key]: value[0] }
|
|
|
|
if (pickerMap[key]) {
|
|
updateData[pickerMap[key]] = false
|
|
}
|
|
|
|
this.setData(updateData)
|
|
}
|
|
```
|
|
|
|
**取消选择:**
|
|
```javascript
|
|
onPickerCancel() {
|
|
this.setData({
|
|
regionPickerVisible: false,
|
|
materialPickerVisible: false,
|
|
partsnamePickerVisible: false
|
|
})
|
|
}
|
|
```
|
|
|
|
### 4. 样式优化 ([pages/index/index.wxss](pages/index/index.wxss))
|
|
|
|
**简化策略:**
|
|
- ✅ 移除自定义按钮样式,使用 TDesign 内置样式
|
|
- ✅ 移除表单卡片背景和阴影,使用 TDesign Cell 组件
|
|
- ✅ 保留必要的布局样式(间距、Flexbox 等)
|
|
- ✅ 更新主题色为 `#0052D9`
|
|
|
|
**关键样式:**
|
|
```css
|
|
.section-title {
|
|
border-left: 6rpx solid #0052D9; /* TDesign 蓝 */
|
|
}
|
|
|
|
.welcome-card {
|
|
background: linear-gradient(135deg, #0052D9 0%, #003C9E 100%);
|
|
box-shadow: 0 8rpx 24rpx rgba(0, 82, 217, 0.25);
|
|
}
|
|
|
|
.stats-value.avg {
|
|
color: #0052D9;
|
|
}
|
|
```
|
|
|
|
## 📦 文件变更清单
|
|
|
|
### 已修改文件
|
|
1. **app.json** - TDesign 组件注册,主题色更新
|
|
2. **pages/index/index.wxml** - 使用 TDesign 组件重构
|
|
3. **pages/index/index.wxss** - 简化样式,更新主题色
|
|
4. **pages/index/index.js** - 新增 Picker 交互逻辑
|
|
|
|
### 新增文件
|
|
无
|
|
|
|
### 依赖文件
|
|
- **package.json** - 添加 tdesign-miniprogram 依赖
|
|
- **miniprogram_npm/** - TDesign 编译后的组件目录
|
|
|
|
## 🎯 核心优势
|
|
|
|
### 1. 企业级设计规范
|
|
- 遵循腾讯 TDesign 设计语言
|
|
- 统一的视觉风格和交互模式
|
|
- 专业、简洁、现代的界面
|
|
|
|
### 2. 组件化开发
|
|
- 减少自定义代码,降低维护成本
|
|
- 组件内部处理边界情况和兼容性
|
|
- 开箱即用的加载、空状态等交互
|
|
|
|
### 3. 开发效率提升
|
|
- 无需手动实现复杂的交互效果
|
|
- 样式已优化,开箱即用
|
|
- 专注于业务逻辑而非 UI 细节
|
|
|
|
### 4. 一致的用户体验
|
|
- 与微信原生设计语言保持一致
|
|
- 用户熟悉的交互模式
|
|
- 流畅的动画和过渡效果
|
|
|
|
## 🔧 技术要点
|
|
|
|
### Picker 实现方式
|
|
**旧方案:** 使用原生 `<picker>` 组件
|
|
```xml
|
|
<picker mode="selector" range="{{regions}}" bindchange="onRegionChange">
|
|
<view>{{regions[selectedRegionIndex]}}</view>
|
|
</picker>
|
|
```
|
|
|
|
**新方案:** 使用 TDesign `<t-cell>` + `<t-picker>`
|
|
```xml
|
|
<t-cell hover bindtap="showRegionPicker">
|
|
{{regions[selectedRegionIndex]}}
|
|
</t-cell>
|
|
|
|
<t-picker
|
|
visible="{{regionPickerVisible}}"
|
|
bind:confirm="onPickerConfirm"
|
|
bind:cancel="onPickerCancel" />
|
|
```
|
|
|
|
**优势:**
|
|
- ✅ 从底部弹出的选择器,更符合移动端交互习惯
|
|
- ✅ 支持大列表选择,性能更好
|
|
- ✅ 统一的视觉风格
|
|
|
|
### 事件绑定格式
|
|
**TDesign 使用 `bind:` 前缀:**
|
|
```xml
|
|
<!-- 旧格式 -->
|
|
<button bindtap="onSearch">查询</button>
|
|
|
|
<!-- TDesign 格式 -->
|
|
<t-button bind:tap="onSearch">查询</t-button>
|
|
```
|
|
|
|
## 📊 组件映射表
|
|
|
|
| 功能 | 旧组件 | 新组件 | 优势 |
|
|
|------|--------|--------|------|
|
|
| 表单输入 | `<input>` | `<t-input>` | 样式统一,支持清空按钮 |
|
|
| 表单展示 | `<view>` 自定义 | `<t-cell>` | 箭头指示器、hover 效果 |
|
|
| 选择器 | `<picker>` | `<t-picker>` | 底部弹出、更现代化 |
|
|
| 按钮 | `<button>` | `<t-button>` | 多种主题、加载状态 |
|
|
| 卡片 | `<view>` 自定义 | `<t-card>` | 标题栏、圆角、阴影 |
|
|
| 标签 | `<view>` 自定义 | `<t-tag>` | 多种主题、尺寸可选 |
|
|
| 分割线 | `<view>` 自定义 | `<t-divider>` | 文字分割、虚线样式 |
|
|
| 加载 | 自定义 loading | `<t-loading>` | 多种主题、文字提示 |
|
|
| 空状态 | emoji + 文字 | `<t-empty>` | 图标丰富、可自定义 |
|
|
|
|
## 🚀 下一步建议
|
|
|
|
### 1. 价格趋势页重构
|
|
使用 TDesign 重构 [pages/trend/trend](pages/trend/trend):
|
|
- `<t-card>` 展示图表卡片
|
|
- `<t-cell>` 展示筛选条件
|
|
- `<t-picker>` 选择日期范围
|
|
|
|
### 2. 图表优化
|
|
- 考虑使用 ECharts 微信小程序版本
|
|
- 或继续使用自定义 Canvas 绘制
|
|
|
|
### 3. 深度定制
|
|
如需定制 TDesign 组件样式,可使用 CSS 变量:
|
|
```css
|
|
page {
|
|
--td-brand-color: #0052D9;
|
|
--td-font-size-m: 30rpx;
|
|
}
|
|
```
|
|
|
|
## ✅ 测试检查项
|
|
|
|
在微信开发者工具中测试以下功能:
|
|
|
|
- [ ] 打开价格查询页,检查表单布局
|
|
- [ ] 点击地区单元格,弹出底部选择器
|
|
- [ ] 选择地区后,单元格显示正确
|
|
- [ ] 点击"查询价格"按钮,检查加载状态
|
|
- [ ] 查看统计卡片,样式是否正确
|
|
- [ ] 查看价格列表,标签颜色是否正确
|
|
- [ ] 切换到价格趋势 Tab,检查导航
|
|
|
|
## 📝 注意事项
|
|
|
|
1. **NPM 构建:**
|
|
- 确保微信开发者工具已启用"使用 npm 模块"
|
|
- 菜单: 工具 → 构建 npm
|
|
|
|
2. **组件版本:**
|
|
- 当前使用: `tdesign-miniprogram@1.12.1`
|
|
- 官方文档: https://tdesign.tencent.com/miniprogram
|
|
|
|
3. **兼容性:**
|
|
- 微信基础库版本 >= 2.6.5
|
|
- 组件已支持微信小程序最新特性
|
|
|
|
4. **样式覆盖:**
|
|
- 不建议直接修改 TDesign 组件内部样式
|
|
- 使用外部类名或 CSS 变量定制
|
|
|
|
## 🎉 总结
|
|
|
|
成功使用 TDesign 组件库重构了价格查询页面,实现了:
|
|
- ✅ 更专业的企业级 UI 设计
|
|
- ✅ 更简洁的代码结构
|
|
- ✅ 更好的用户交互体验
|
|
- ✅ 更统一的视觉风格
|
|
|
|
**状态:** ✅ 重构完成,建议测试后上线
|
|
|
|
---
|
|
|
|
**开发者:** Claude Code
|
|
**完成日期:** 2026-01-06
|