# 页面开发指南 ## 页面结构 1. 列表页面 - 搜索区域:关键词搜索 - 操作按钮:新增、查询 - 表格区域:基础字段展示 - 分页区域:标准分页组件 2. 编辑页面 - 基本信息模块 - 网络配置模块 - 设备配置模块 ## 样式规范 1. 对话框配置 ```html ``` 2. 表单布局 ```html
模块标题
``` 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({ 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 技术栈,使用时请根据实际项目技术栈进行调整。