modify：新增小程序
This commit is contained in:
ECRZ
320
Sale/TDESIGN_UI_UPDATE.md
Normal file
320
Sale/TDESIGN_UI_UPDATE.md
Normal file
@@ -0,0 +1,320 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user