# 营养表单设计UI草图

## 1. 页面整体布局
- 顶部：页面标题（可选）
- 左侧：参数选择区（系统参数、题型选择）
- 右侧：表单编辑区（量表类型、适用条件、量表名称、说明、备注等）
- 下方：题目编辑区（题目内容、题型、填空项等）

---

## 2. 结构化UI设计

```
<template>
  <div class="check-template-container">
    <!-- 左侧参数选择区 -->
    <aside class="sidebar">
      <section class="system-params">
        <h3>系统参数</h3>
        <div class="param-group">
          <div class="group-title">基本信息</div>
          <el-button>性别</el-button>
          <el-button>出生日期</el-button>
          <el-button>身高</el-button>
          <el-button>体重</el-button>
          <el-button>BMI</el-button>
          <el-button>营养诊断</el-button>
          <el-button>入院日期</el-button>
        </div>
        <div class="param-group">
          <div class="group-title">其他</div>
          <el-button>人体测量</el-button>
          <el-button>膳食状况</el-button>
          <el-button>营养生化检查</el-button>
        </div>
      </section>
      <section class="question-types">
        <h3>题型选择</h3>
        <el-button>单选题</el-button>
        <el-button>多选题</el-button>
        <el-button>填空题</el-button>
        <el-button>量表题</el-button>
        <el-button>矩阵量表</el-button>
      </section>
    </aside>

    <!-- 右侧表单编辑区 -->
    <main class="main-content">
      <el-form label-width="100px">
        <el-form-item label="量表类型：" required>
          <el-radio-group v-model="form.type">
            <el-radio label="营养筛查" />
            <el-radio label="营养评估" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="适用条件：">
          <el-row>
            <el-col :span="12">
              <span>性别：</span><el-link type="primary">不限</el-link>
            </el-col>
            <el-col :span="12">
              <span>年龄：</span><el-link type="primary">不限</el-link>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="量表名称：" required>
          <el-input v-model="form.name" maxlength="50" show-word-limit placeholder="请输入" />
        </el-form-item>
        <el-form-item label="量表说明：">
          <el-input v-model="form.desc" maxlength="50" show-word-limit placeholder="请输入" />
        </el-form-item>
        <el-form-item label="备注：">
          <el-input type="textarea" v-model="form.remark" maxlength="500" show-word-limit placeholder="请输入" />
        </el-form-item>
      </el-form>

      <!-- 题目编辑区 -->
      <section class="question-edit">
        <el-card>
          <el-form label-width="80px">
            <el-form-item label="标题：" required>
              <el-input v-model="question.title" placeholder="请输入标题" />
            </el-form-item>
            <el-form-item label="填空：">
              <el-input v-model="question.blank" placeholder="请输入填空内容" />
            </el-form-item>
          </el-form>
        </el-card>
      </section>
    </main>
  </div>
</template>
```

---

## 3. 样式建议（伪代码）

```
.check-template-container {
  display: flex;
  background: #f8fafc;
}
.sidebar {
  width: 260px;
  background: #fff;
  border-radius: 4px;
  margin: 16px;
  padding: 16px;
  box-shadow: 0 2px 8px #f0f1f2;
}
.main-content {
  flex: 1;
  margin: 16px;
  background: #fff;
  border-radius: 4px;
  padding: 24px;
  min-width: 600px;
}
.question-edit {
  margin-top: 24px;
  background: #f0f6ff;
  border-radius: 4px;
  padding: 16px;
}
```

---

## 4. 交互说明
- 左侧参数和题型按钮可拖拽或点击添加到右侧表单或题目区。
- 右侧表单区支持表单校验、字数限制、必填项提示。
- 题目编辑区可根据题型动态切换输入控件。

---

# 设计说明
- 结构清晰，左右分栏，主次分明。
- 采用 Element Plus 组件，风格简洁现代。
- 适合表单设计、量表配置等场景。