guest/steel_prices_service

Fork 0

Files

ECRZ da4a055c1c modify：新增小程序

2026-01-06 18:00:43 +08:00

8.0 KiB

Raw Permalink Blame History

TDesign UI 重设计完成报告

📅 更新时间

2026-01-06

🎨 设计目标

使用腾讯 TDesign 企业级设计组件库重构价格查询页面,提升 UI 专业度和用户体验。

✅ 完成内容

1. 依赖安装与配置

1.1 安装 TDesign 组件库

npm install tdesign-miniprogram@^1.12.1

1.2 全局组件注册 (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)

改进点:

✅ 使用 <t-cell> + <t-cell-group> 替代原生 View 布局
✅ 使用 <t-picker> 实现底部弹窗选择器
✅ 使用 <t-button> 统一按钮样式
✅ 添加 hover 效果提升交互体验

组件结构:

<!-- 表单项使用 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 加载组件:

<t-loading theme="circular" loading="{{loading}}" text="加载中..."></t-loading>

3. JavaScript 逻辑更新 (pages/index/index.js)

3.1 新增状态管理

data: {
  // Picker 显示状态
  regionPickerVisible: false,
  materialPickerVisible: false,
  partsnamePickerVisible: false,
  datePickerVisible: false
}

3.2 新增事件处理函数

显示 Picker:

showRegionPicker() {
  this.setData({ regionPickerVisible: true })
}

确认选择:

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)
}

取消选择:

onPickerCancel() {
  this.setData({
    regionPickerVisible: false,
    materialPickerVisible: false,
    partsnamePickerVisible: false
  })
}

4. 样式优化 (pages/index/index.wxss)

简化策略:

✅ 移除自定义按钮样式,使用 TDesign 内置样式
✅ 移除表单卡片背景和阴影,使用 TDesign Cell 组件
✅ 保留必要的布局样式(间距、Flexbox 等)
✅ 更新主题色为 #0052D9

关键样式:

.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;
}

📦 文件变更清单

已修改文件

app.json - TDesign 组件注册,主题色更新
pages/index/index.wxml - 使用 TDesign 组件重构
pages/index/index.wxss - 简化样式,更新主题色
pages/index/index.js - 新增 Picker 交互逻辑

新增文件

无

依赖文件

package.json - 添加 tdesign-miniprogram 依赖
miniprogram_npm/ - TDesign 编译后的组件目录

🎯 核心优势

1. 企业级设计规范

遵循腾讯 TDesign 设计语言
统一的视觉风格和交互模式
专业、简洁、现代的界面

2. 组件化开发

减少自定义代码,降低维护成本
组件内部处理边界情况和兼容性
开箱即用的加载、空状态等交互

3. 开发效率提升

无需手动实现复杂的交互效果
样式已优化,开箱即用
专注于业务逻辑而非 UI 细节

4. 一致的用户体验

与微信原生设计语言保持一致
用户熟悉的交互模式
流畅的动画和过渡效果

🔧 技术要点

Picker 实现方式

旧方案: 使用原生 <picker> 组件

<picker mode="selector" range="{{regions}}" bindchange="onRegionChange">
  <view>{{regions[selectedRegionIndex]}}</view>
</picker>

新方案: 使用 TDesign <t-cell> + <t-picker>

<t-cell hover bindtap="showRegionPicker">
  {{regions[selectedRegionIndex]}}
</t-cell>

<t-picker
  visible="{{regionPickerVisible}}"
  bind:confirm="onPickerConfirm"
  bind:cancel="onPickerCancel" />

优势:

✅ 从底部弹出的选择器,更符合移动端交互习惯
✅ 支持大列表选择,性能更好
✅ 统一的视觉风格

事件绑定格式

TDesign 使用 bind: 前缀:

<!-- 旧格式 -->
<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:

<t-card> 展示图表卡片
<t-cell> 展示筛选条件
<t-picker> 选择日期范围

2. 图表优化

考虑使用 ECharts 微信小程序版本
或继续使用自定义 Canvas 绘制

3. 深度定制

如需定制 TDesign 组件样式,可使用 CSS 变量:

page {
  --td-brand-color: #0052D9;
  --td-font-size-m: 30rpx;
}

✅ 测试检查项

在微信开发者工具中测试以下功能:

打开价格查询页,检查表单布局
点击地区单元格,弹出底部选择器
选择地区后,单元格显示正确
点击"查询价格"按钮,检查加载状态
查看统计卡片,样式是否正确
查看价格列表,标签颜色是否正确
切换到价格趋势 Tab,检查导航

📝 注意事项

NPM 构建:
- 确保微信开发者工具已启用"使用 npm 模块"
- 菜单: 工具 → 构建 npm
组件版本:
- 当前使用: tdesign-miniprogram@1.12.1
- 官方文档: https://tdesign.tencent.com/miniprogram
兼容性:
- 微信基础库版本 >= 2.6.5
- 组件已支持微信小程序最新特性
样式覆盖:
- 不建议直接修改 TDesign 组件内部样式
- 使用外部类名或 CSS 变量定制

🎉 总结

成功使用 TDesign 组件库重构了价格查询页面,实现了:

✅ 更专业的企业级 UI 设计
✅ 更简洁的代码结构
✅ 更好的用户交互体验
✅ 更统一的视觉风格

状态: ✅ 重构完成,建议测试后上线

开发者: Claude Code 完成日期: 2026-01-06

8.0 KiB Raw Permalink Blame History