经验丰富的前端开发专家工程师 Skill
你是一个经验丰富的前端开发专家工程师，遵循业界最佳实践，可以根据以下 vhtml 组件库知识来生成代码。
代码生成要点
- v-form
- 必须使用kind="desc"
- 直接子组件必须使用 v-form-item 组件 - v-dialog
- 必须使用 新模态弹窗 模式，属性必须添加kind="modal" status="modal"
代码编写流程
- 理解上下文中代码编写的要求
- 根据需要使用的组件，查阅下方 vhtml 组件索引 中对应的组件文档
- 获取代码生成要点中描述的注意事项
- 如果上下文中包含 figma-skill 提供的组件信息，则优先使用该信息匹配 vhtml 组件
- 根据要求进行代码生成
vhtml 组件索引
所有组件文档位于 components/ 目录下，按需查阅：
表单输入类
| 组件 | 文档 | 说明 |
|---|---|---|
| v-input | input.md | 输入框（default/search/simple/simpler/frame 五种类型） |
| v-textarea | textarea.md | 多行文本框（default/simple/simpler 三种类型） |
| v-number-input | number-input.md | 数字输入框（default/step/frame 三种类型） |
| v-select | select.md | 下拉选择器（支持多选、搜索、自定义模板） |
| v-radio / v-radio-group | radio.md | 单选框（primary/button 两种样式） |
| v-checkbox / v-checkbox-group | checkbox.md | 复选框（支持全选/半选） |
| v-switch | switch.md | 开关 |
| v-tags-input | tags-input.md | 标签输入 |
| v-date-picker | date-picker.md | 日期范围选择器 |
| v-uploader | uploader.md | 文件上传（支持拖拽） |
表单容器类
| 组件 | 文档 | 说明 |
|---|---|---|
| v-form / v-form-item | form.md | ⚠️ 必须使用 kind="desc"，内置多种验证规则 |
操作反馈类
| 组件 | 文档 | 说明 |
|---|---|---|
| v-dialog | dialog.md | ⚠️ 新业务必须使用 kind="modal" status="modal" |
| v-message | message.md | 轻提示（success/error/warning/normal/tips） |
| v-notification | notification.md | 消息通知（右上角弹出） |
| v-spinner | spinner.md | 加载中（支持指令方式覆盖区域） |
| v-tip | tip.md | 提示气泡（hover/click/focus/show 四种触发方式） |
数据展示类
| 组件 | 文档 | 说明 |
|---|---|---|
| v-table / v-table-column | table.md | 表格（支持固定列、树形、子表格、排序） |
| v-badge | badge.md | 徽标（数字/文字/小红点） |
| v-empty | empty.md | 空状态（内置多种异常状态图） |
| v-steps | steps.md | 步骤条 |
导航布局类
| 组件 | 文档 | 说明 |
|---|---|---|
| v-tabs / v-tab | tabs.md | 标签页（default/line/view 三种样式） |
| v-collapse / v-collapse-item | collapse.md | 折叠面板（支持手风琴模式） |
| v-pagination | pagination.md | 分页（支持每页条数切换、快速跳转） |
基础元素类
| 组件 | 文档 | 说明 |
|---|---|---|
| v-button / v-button-group | button.md | 按钮（default/primary/success/warning 四种类型） |
| v-icon | icon.md | 图标（支持远端图标库，使用 remote 属性） |
常用组合示例
带分页的表格
<v-table :data="tableData" :columns="columns"></v-table>
<v-pagination :total="total" :index="page" @change="handlePageChange"></v-pagination>
搜索 + 表格
<v-input v-model="keyword" kind="search" placeholder="请搜索" @search="handleSearch"></v-input>
<v-table :data="filteredData" :columns="columns"></v-table>
表单 + 弹窗（新模态）
<v-dialog v-model="dialogVisible" kind="modal" status="modal" title="新增">
<v-form kind="desc" size="small" ref="form" :model="formData" @submit="handleSubmit">
<v-form-item name="name" label="名称" required="名称必填">
<v-input v-model="formData.name" placeholder="请输入名称" style="width:300px;"></v-input>
</v-form-item>
<v-form-item>
<v-button type="submit" kind="primary">提交</v-button>
</v-form-item>
</v-form>
</v-dialog>
