You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
3.1 KiB
3.1 KiB
index.tsx 模板改进说明
🔍 发现的问题
1. 硬编码字段名
问题:原模板假设所有表都有 name
和 description
字段
// 原来的硬编码方式
<View>{item.name}</View>
<View>{item.description}</View>
2. 固定的业务逻辑
问题:所有表都生成"默认选项"功能,即使表中没有 isDefault
字段
3. 不够灵活的显示方式
问题:没有根据实际表结构动态调整显示内容
✅ 改进内容
1. 智能字段检测
<% var hasIsDefaultField = false; %>
<% for(field in table.fields){ %>
<% if(field.propertyName == 'isDefault'){ %>
<% hasIsDefaultField = true; %>
<% } %>
<% } %>
2. 条件性功能生成
- 有
isDefault
字段:生成完整的默认选项功能 - 无
isDefault
字段:只生成基本的列表和编辑功能
3. 动态字段显示
<% var displayFields = []; %>
<% for(field in table.fields){ %>
<% if(field.propertyName != 'id' && field.propertyName != 'createTime' && field.propertyName != 'updateTime' && field.propertyName != 'isDefault'){ %>
<% displayFields.add(field); %>
<% } %>
<% } %>
自动选择前两个可显示字段作为主要显示内容。
🎯 改进效果
有 isDefault
字段的表(如地址、支付方式)
- ✅ 生成默认选项设置功能
- ✅ 支持点击选择默认项
- ✅ 显示默认选项状态图标
无 isDefault
字段的表(如商品、分类)
- ✅ 只生成基本的列表显示
- ✅ 支持编辑和删除操作
- ✅ 不生成不必要的默认选项功能
字段显示逻辑
- 第一个字段:作为主标题显示(较大字体)
- 第二个字段:作为副标题显示(较小字体)
- 自动过滤:排除
id
、createTime
、updateTime
、isDefault
等系统字段
📋 生成示例
地址表(有 isDefault 字段)
// 会生成完整的默认地址功能
const selectItem = async (item: ShopUserAddress) => {
// 设置默认地址逻辑
}
// 显示默认选项图标
{item.isDefault ? <Checked /> : <CheckNormal />}
商品表(无 isDefault 字段)
// 只生成基本列表功能,无默认选项相关代码
<Cell className={'flex flex-col gap-1'}>
<View>{item.name}</View> // 第一个字段
<View>{item.description}</View> // 第二个字段
</Cell>
🔧 技术实现
Beetl 模板语法
<% var hasIsDefaultField = false; %>
- 定义变量<% displayFields.add(field); %>
- 数组操作<% if(hasIsDefaultField){ %>
- 条件判断${displayFields[0].propertyName}
- 动态字段访问
字段过滤规则
排除以下系统字段:
id
- 主键createTime
- 创建时间updateTime
- 更新时间isDefault
- 默认标志(单独处理)
🎉 优势
- 更加通用:适用于各种不同结构的表
- 智能适配:根据表结构自动调整功能
- 减少冗余:不生成不必要的代码
- 更好维护:生成的代码更符合实际业务需求
现在生成的移动端列表页面更加智能和实用了!