# index.tsx 模板改进说明 ## 🔍 发现的问题 ### 1. 硬编码字段名 **问题**:原模板假设所有表都有 `name` 和 `description` 字段 ```typescript // 原来的硬编码方式 {item.name} {item.description} ``` ### 2. 固定的业务逻辑 **问题**:所有表都生成"默认选项"功能,即使表中没有 `isDefault` 字段 ### 3. 不够灵活的显示方式 **问题**:没有根据实际表结构动态调整显示内容 ## ✅ 改进内容 ### 1. 智能字段检测 ```typescript <% var hasIsDefaultField = false; %> <% for(field in table.fields){ %> <% if(field.propertyName == 'isDefault'){ %> <% hasIsDefaultField = true; %> <% } %> <% } %> ``` ### 2. 条件性功能生成 - **有 `isDefault` 字段**:生成完整的默认选项功能 - **无 `isDefault` 字段**:只生成基本的列表和编辑功能 ### 3. 动态字段显示 ```typescript <% 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 字段) ```typescript // 会生成完整的默认地址功能 const selectItem = async (item: ShopUserAddress) => { // 设置默认地址逻辑 } // 显示默认选项图标 {item.isDefault ? : } ``` ### 商品表(无 isDefault 字段) ```typescript // 只生成基本列表功能,无默认选项相关代码 {item.name} // 第一个字段 {item.description} // 第二个字段 ``` ## 🔧 技术实现 ### Beetl 模板语法 - `<% var hasIsDefaultField = false; %>` - 定义变量 - `<% displayFields.add(field); %>` - 数组操作 - `<% if(hasIsDefaultField){ %>` - 条件判断 - `${displayFields[0].propertyName}` - 动态字段访问 ### 字段过滤规则 排除以下系统字段: - `id` - 主键 - `createTime` - 创建时间 - `updateTime` - 更新时间 - `isDefault` - 默认标志(单独处理) ## 🎉 优势 1. **更加通用**:适用于各种不同结构的表 2. **智能适配**:根据表结构自动调整功能 3. **减少冗余**:不生成不必要的代码 4. **更好维护**:生成的代码更符合实际业务需求 现在生成的移动端列表页面更加智能和实用了!