NPP_Vue/页面开发数据模板.md

页面开发指南

路由配置

1. 路由参数

   // 路由定义
   {
     path: '/admin/device',
     name: 'admin/device',
     component: () => import('/@/views/admin/device/index.vue'),
     meta: {
       title: '设备管理',
       icon: 'ele-Setting',
       roles: ['admin']
     }
   }
   

2. 权限控制

   // 按钮权限
   v-auth="'api:admin:device:add'"  // 新增权限
   v-auth="'api:admin:device:update'"  // 修改权限
   v-auth="'api:admin:device:soft-delete'"  // 删除权限
   

数据结构

1. 列表查询参数

   interface PageInput {
     currentPage: number
     pageSize: number
     filter: {
       keyWord?: string
       startTime?: string
       endTime?: string
     }
   }
   

2. 表单数据结构

   interface FormData {
     id?: number
     deviceNo: string
     assetNo?: string
     ip: string
     port: string
     serviceName?: string
     status: boolean
   }
   

3. API 接口

   // 列表接口
   GET /api/admin/device/get-page
   
   // 详情接口
   GET /api/admin/device/get
   
   // 新增接口
   POST /api/admin/device/add
   
   // 修改接口
   PUT /api/admin/device/update
   
   // 删除接口
   DELETE /api/admin/device/soft-delete
   

页面结构

1. 列表页面

   • 搜索区域：关键词搜索
   • 操作按钮：新增、查询
   • 表格区域：基础字段展示
   • 分页区域：标准分页组件

2. 编辑页面

   • 基本信息模块
   • 网络配置模块
   • 设备配置模块

样式规范

1. 对话框配置

   <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. 表单布局

   <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. 样式定义

   .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. 代码组织

   // 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. 表单验证

   const rules = {
     fieldName: [
       { required: true, message: '请输入', trigger: ['blur', 'change'] }
     ]
   }
   

4. API 调用

   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 类型规范