142 lines
3.0 KiB
Markdown
142 lines
3.0 KiB
Markdown
# 页面开发指南
|
||
|
||
## 页面结构
|
||
1. 列表页面
|
||
- 搜索区域：关键词搜索
|
||
- 操作按钮：新增、查询
|
||
- 表格区域：基础字段展示
|
||
- 分页区域：标准分页组件
|
||
|
||
2. 编辑页面
|
||
- 基本信息模块
|
||
- 网络配置模块
|
||
- 设备配置模块
|
||
|
||
## 样式规范
|
||
1. 对话框配置
|
||
```html
|
||
<el-dialog
|
||
v-model="state.showDialog"
|
||
destroy-on-close
|
||
:title="title"
|
||
draggable
|
||
:close-on-click-modal="false"
|
||
:close-on-press-escape="false"
|
||
width="900px"
|
||
>
|
||
```
|
||
|
||
2. 表单布局
|
||
```html
|
||
<el-form :model="form" ref="formRef" size="default" label-width="120px">
|
||
<div class="form-section">
|
||
<div class="section-title">模块标题</div>
|
||
<el-row :gutter="25">
|
||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
||
<el-form-item label="字段名称" prop="fieldName">
|
||
<el-input v-model="form.fieldName" clearable placeholder="请输入" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</el-form>
|
||
```
|
||
|
||
3. 样式定义
|
||
```scss
|
||
.form-section {
|
||
margin-bottom: 24px;
|
||
&:last-child { margin-bottom: 0; }
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #303133;
|
||
margin-bottom: 16px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 2px solid #f0f0f0;
|
||
position: relative;
|
||
&:before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: -2px;
|
||
width: 40px;
|
||
height: 2px;
|
||
background: #409eff;
|
||
}
|
||
}
|
||
```
|
||
|
||
## 开发规范
|
||
1. 组件命名
|
||
- 目录：小写字母，用横线分隔
|
||
- 组件：PascalCase
|
||
- 组合函数：camelCase
|
||
|
||
2. 代码组织
|
||
```typescript
|
||
// 1. 导入声明
|
||
import { reactive, ref } from 'vue'
|
||
|
||
// 2. 类型定义
|
||
interface State {
|
||
showDialog: boolean
|
||
form: FormData
|
||
}
|
||
|
||
// 3. 组件定义
|
||
const props = defineProps({
|
||
title: String
|
||
})
|
||
|
||
// 4. 状态定义
|
||
const state = reactive<State>({
|
||
showDialog: false,
|
||
form: {}
|
||
})
|
||
|
||
// 5. 方法定义
|
||
const handleSubmit = async () => {
|
||
// 处理逻辑
|
||
}
|
||
```
|
||
|
||
3. 表单验证
|
||
```typescript
|
||
const rules = {
|
||
fieldName: [
|
||
{ required: true, message: '请输入', trigger: ['blur', 'change'] }
|
||
]
|
||
}
|
||
```
|
||
|
||
4. API 调用
|
||
```typescript
|
||
const handleSave = async () => {
|
||
try {
|
||
const res = await api.save(state.form)
|
||
if (res.success) {
|
||
ElMessage.success('保存成功')
|
||
emit('refresh')
|
||
state.showDialog = false
|
||
}
|
||
} catch (error) {
|
||
console.error(error)
|
||
}
|
||
}
|
||
```
|
||
|
||
## 注意事项
|
||
1. 保持与 uspscale 页面风格一致
|
||
2. 使用响应式布局适配不同屏幕
|
||
3. 统一表单验证规则和错误提示
|
||
4. 优化用户交互体验
|
||
5. 保持代码风格统一
|
||
6. 注意性能优化
|
||
7. 遵循 TypeScript 类型规范
|
||
|
||
---
|
||
|
||
**注意**：此模板基于 Vue 3 + TypeScript + Element Plus + Pinia 技术栈，使用时请根据实际项目技术栈进行调整。 |