# 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. **更好维护**:生成的代码更符合实际业务需求
现在生成的移动端列表页面更加智能和实用了!