# NetModular.UI 项目 GitHub Copilot 指令

## 项目概述

NetModular.UI 是与 NetModular 配套的业务模块化前端快速开发框架，基于 Vue2 全家桶 + Element UI 开发。该框架采用模块化思想设计，通过 npm 私服分发与集成，支持自定义皮肤和登录页功能，极大提高了模块的复用性。

## 项目架构

### 技术栈
- **框架**: Vue.js 2.6+
- **UI 组件库**: Element UI
- **状态管理**: Vuex
- **路由管理**: Vue Router
- **构建工具**: Vue CLI
- **HTTP 客户端**: Axios
- **样式预处理**: Sass/SCSS
- **代码规范**: ESLint + Prettier

### 核心依赖
```json
{
  "vue": "^2.6.10",
  "element-ui": "^2.12.0",
  "vue-router": "^3.1.6",
  "vuex": "^3.1.3",
  "axios": "^0.19.2",
  "dayjs": "^1.8.22",
  "nprogress": "^0.2.0"
}
```

### 目录结构
```
NetModular.UI/
├── packages/               # 核心组件包
│   ├── components/        # 通用组件
│   ├── directive/         # 自定义指令
│   ├── mixins/           # 混入
│   ├── router/           # 路由配置
│   ├── store/            # 状态管理
│   ├── styles/           # 样式文件
│   ├── utils/            # 工具函数
│   └── index.js          # 入口文件
├── src/                   # 示例和测试
├── script/               # 构建脚本
└── public/               # 静态资源
```

## 组件开发规范

### 组件命名
- **文件名**: 使用 kebab-case（如：`user-list.vue`）
- **组件名**: 使用 PascalCase（如：`UserList`）
- **注册名**: 使用 `nm-` 前缀（如：`nm-user-list`）

### 组件结构
```vue
<template>
  <div class="nm-component-name">
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  name: 'ComponentName',
  props: {
    // 属性定义
  },
  data() {
    return {
      // 数据定义
    }
  },
  computed: {
    // 计算属性
  },
  methods: {
    // 方法定义
  }
}
</script>

<style lang="scss" scoped>
.nm-component-name {
  // 样式定义
}
</style>
```

### 属性定义规范
```javascript
props: {
  // 基础类型
  title: String,
  count: Number,
  visible: Boolean,
  
  // 复杂类型
  options: {
    type: Array,
    default: () => []
  },
  
  // 必填属性
  id: {
    type: String,
    required: true
  },
  
  // 带默认值
  size: {
    type: String,
    default: 'medium',
    validator: value => ['small', 'medium', 'large'].includes(value)
  }
}
```

## 核心组件说明

### 布局组件
- **nm-container**: 页面容器
- **nm-box**: 盒子容器
- **nm-box-row**: 行布局
- **nm-box-col**: 列布局

### 表单组件
- **nm-form**: 表单容器
- **nm-form-item**: 表单项
- **nm-input**: 输入框
- **nm-select**: 选择器
- **nm-date-picker**: 日期选择器

### 数据展示组件
- **nm-table**: 数据表格
- **nm-list**: 列表组件
- **nm-tree**: 树形组件
- **nm-pagination**: 分页组件

### 反馈组件
- **nm-dialog**: 对话框
- **nm-drawer**: 抽屉
- **nm-loading**: 加载状态
- **nm-message**: 消息提示

### 导航组件
- **nm-menu**: 菜单
- **nm-tabs**: 标签页
- **nm-breadcrumb**: 面包屑

## 混入（Mixins）使用

### 全局混入
- **message**: 消息提示
- **fontSize**: 字体大小
- **loading**: 加载状态
- **setTabName**: 标签名称设置

### 组件混入
```javascript
// 对话框混入
import { dialog } from 'netmodular-ui/packages/mixins'

export default {
  mixins: [dialog],
  // 组件逻辑
}
```

## 路由配置

### 路由结构
```javascript
{
  path: '/user',
  component: () => import('./index'),
  children: [
    {
      path: 'list',
      name: 'user_list',
      component: () => import('./list'),
      meta: {
        title: '用户列表',
        icon: 'user',
        permissions: ['user_query'],
        cache: true
      }
    }
  ]
}
```

### 路由元信息
- **title**: 页面标题
- **icon**: 图标名称
- **permissions**: 权限代码数组
- **cache**: 是否缓存
- **frameIn**: 是否在框架内显示
- **noPermission**: 是否需要权限验证

## 状态管理

### Store 结构
```javascript
export default {
  namespaced: true,
  state: {
    // 状态定义
  },
  getters: {
    // 计算属性
  },
  mutations: {
    // 同步修改
  },
  actions: {
    // 异步操作
  }
}
```

### 模块状态管理
```javascript
// 模块状态注册
this.$store.registerModule(['module', 'user'], userStore)

// 状态访问
this.$store.state.module.user.list
this.$store.getters['module/user/currentUser']

// 状态修改
this.$store.commit('module/user/SET_LIST', list)
this.$store.dispatch('module/user/fetchList')
```

## API 调用规范

### API 配置
```javascript
// api/index.js
export default {
  user: {
    query: params => get('/api/user/query', params),
    details: id => get(`/api/user/details/${id}`),
    add: data => post('/api/user/add', data),
    edit: data => put('/api/user/edit', data),
    remove: id => del(`/api/user/remove/${id}`)
  }
}
```

### 使用方式
```javascript
// 在组件中使用
const { query, add, edit, remove } = $api.user

// 查询
query(this.queryModel).then(data => {
  this.list = data.rows
  this.total = data.total
})

// 新增
add(this.model).then(() => {
  this.$message.success('保存成功')
  this.refresh()
})
```

## 样式开发规范

### SCSS 变量
```scss
// 主色调
$primary-color: #409eff;
$success-color: #67c23a;
$warning-color: #e6a23c;
$danger-color: #f56c6c;

// 字体大小
$font-size-small: 12px;
$font-size-base: 14px;
$font-size-large: 16px;

// 间距
$spacing-small: 8px;
$spacing-base: 16px;
$spacing-large: 24px;
```

### BEM 命名规范
```scss
.nm-component {
  &__element {
    // 元素样式
  }
  
  &--modifier {
    // 修饰符样式
  }
  
  &__element--modifier {
    // 元素修饰符样式
  }
}
```

## 国际化支持

### 语言包结构
```javascript
export default {
  common: {
    add: '新增',
    edit: '编辑',
    delete: '删除',
    save: '保存',
    cancel: '取消'
  },
  user: {
    name: '姓名',
    email: '邮箱',
    phone: '电话'
  }
}
```

## 皮肤开发

### 皮肤结构
```
skin-theme/
├── index.js           # 皮肤入口
├── layout.vue         # 布局组件
├── login/            # 登录相关
└── styles/           # 样式文件
```

### 皮肤配置
```javascript
export default {
  code: 'theme-name',
  name: '主题名称',
  description: '主题描述',
  author: '作者',
  layout: () => import('./layout.vue'),
  login: {
    // 登录组件配置
  }
}
```

## 开发最佳实践

### 组件设计原则
1. **单一职责**: 每个组件只负责一个功能
2. **高内聚低耦合**: 减少组件间的依赖
3. **可复用性**: 设计通用的组件接口
4. **可配置性**: 提供丰富的配置选项

### 性能优化
1. **懒加载**: 使用动态导入加载组件
2. **缓存**: 合理使用 keep-alive
3. **防抖节流**: 对频繁操作进行优化
4. **虚拟滚动**: 处理大量数据展示

### 代码质量
1. **类型检查**: 使用 PropTypes 验证属性
2. **单元测试**: 为核心组件编写测试
3. **代码审查**: 遵循团队代码规范
4. **文档完善**: 提供详细的组件文档

## 模块集成

### 模块定义
```javascript
export default {
  module: {
    id: '01',
    code: 'admin',
    name: '权限管理',
    icon: 'permission',
    version: '1.0.0'
  },
  routes: [
    // 路由配置
  ],
  store: {
    // 状态管理
  },
  components: [
    // 全局组件
  ]
}
```

### 模块注册
```javascript
import NetModularUI from 'netmodular-ui'
import config from './config'
import modules from './modules'

NetModularUI.use({
  config,
  modules
})
```

## 注意事项

1. **版本兼容**: 注意 Vue 2.x 的限制
2. **浏览器支持**: 确保现代浏览器兼容性
3. **性能监控**: 关注包大小和加载性能
4. **安全防护**: 防范 XSS 和 CSRF 攻击
5. **移动端适配**: 考虑响应式设计

## 相关链接

- **官方文档**: https://docs.17mkh.com/frendEnd/DevEnvironment.html
- **在线演示**: https://demo.17mkh.com/
- **后端框架**: [NetModular](https://github.com/iamoldli/NetModular)
- **皮肤扩展**: [NetModular.Skins.Classics](https://github.com/iamoldli/NetModular.Skins.Classics)