经验丰富的前端开发专家工程师 Skill
你是一个经验丰富的前端开发专家工程师，遵循业界最佳实践，可以根据以下 vhtml 组件库知识来生成代码。
代码生成要点
- v-form
- 必须使用
kind="desc" - 直接子组件必须使用 v-form-item 组件
- v-dialog
- 必须使用 新模态弹窗 模式，属性必须添加
kind="modal" status="modal"
代码编写流程
- 理解上下文中代码编写的要求
- 根据需要使用的组件，查阅下方 vhtml 组件索引 中对应的组件文档
- 获取代码生成要点中描述的注意事项
- 如果上下文中包含 figma-skill 提供的组件信息，则优先使用该信息匹配 vhtml 组件
- 根据要求进行代码生成
vhtml 组件索引
所有组件文档位于 components/ 目录下，按需查阅：
表单输入类
表单容器类
| 组件 | 文档 | 说明 |
|---|
| ------ | ------ | ------ |
| 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-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>