# 项目基础框架+IA聊天

**Repository Path**: hu-yanjun/project-basic-framework-ai

## Basic Information

- **Project Name**: 项目基础框架+IA聊天
- **Description**: 项目基础框架+IA聊天
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-08-08
- **Last Updated**: 2025-04-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Element-UI, Axios, vue2

## README

# 开发文档


## 一， 核心技术

+ npm：node.js的包管理工具，用于统一管理我们前端项目中需要用到的包、插件、工具、命令等，便于开发和维护。
+ ES6：Javascript的新版本，ECMAScript6的简称。利用ES6我们可以简化我们的JS代码，同时利用其提供的强大功能来快速实现JS逻辑。
+ vue-cli：Vue的脚手架工具，用于自动生成Vue项目的目录及文件。
+ vue-router： Vue提供的前端路由工具，利用其我们实现页面的路由控制，局部刷新及按需加载，构建单页应用，实现前后端分离。
+ vuex：Vue提供的状态管理工具，用于统一管理我们项目中各种数据的交互和重用，存储我们需要用到数据对象。
+ element-ui：基于MVVM框架Vue开源出来的一套前端ui组件。

## 二，环境部署

+ 强烈建议不要用直接使用 cnpm 安装，会有各种诡异的 bug，可以通过重新指定 registry 来解决 npm 安装速度慢的问题。

  > npm install --registry=https://registry.npm.taobao.org

+ 本地开发 启动项目

  > npm run dev

##  三，模块开发

> `在 @/views 文件下 创建对应的文件夹，一个文件夹对应一个模块，模块里面一个路由对应一个 .vue 文件 ，各个模块维护自己的components组件。`
> `创建文件尽量命名有意义和模块意思相关的英文`

```apl
# 示例
views/
  system/
    components/
    user.vue
    role.vue
  ...

新增 api
# 示例
api/
  system/
    user.js
    role.js
  ...
```

## 四，通用方法

###  $auth  Array 指令对象 

+ 用户权限

  ```javascript
  hasPermi    // 验证用户是否具备某权限
  hasPermiOr   // 验证用户是否含有指定权限，只需包含其中一个
  hasPermiAnd  // 验证用户是否含有指定权限，必须全部拥有
  this.$auth.hasPermi("system:user:add")
  this.$auth.hasPermiOr(["system:user:add", "system:user:update"])
  this.$auth.hasPermiAnd(["system:user:add", "system:user:update"])
  ```

+ 角色权限

  ```javascript
  hasRole   // 验证用户是否具备某角色
  hasRoleOr   // 验证用户是否含有指定角色，只需包含其中一个
  hasRoleAnd   // 验证户是否含有指定角色，必须全部拥有
  this.auth.hasRole("admin")
  this.auth.hasRoleOr(["admin", "common"])
  this.$auth.hasRoleAnd(["admin", "common"])
  ```

  > **提示**
  >
  > 按钮权限可使用 v-hasPermi指令来判断。元素标签组件，需要设置v-if，可以使用全局权限判断函数，用法和指令 v-hasPermi 类似。

  ```vue
  <template>
    <el-tabs>
      <el-tab-pane v-if="$checkPermi(['system:user:add'])" label="用户管理" name="user">用户管理</el-tab-pane>
      <el-tab-pane v-if="$checkPermi(['system:user:add', 'system:user:edit'])" label="参数管理" name="menu">参数管理</el-tab-pane>
      <el-tab-pane v-if="$checkRole(['admin'])" label="角色管理" name="role">角色管理</el-tab-pane>
      <el-tab-pane v-if="$checkRole(['admin','common'])" label="定时任务" name="job">定时任务</el-tab-pane>
     </el-tabs>
  </template>
  ```

### $modal 对象

+ 反馈信息 (`主要使用这个弱提示`)

  ```javascript
  this.$modal.msg("默认反馈")
  this.$modal.msgError("错误反馈")
  this.$modal.msgSuccess("成功反馈")
  this.$modal.msgWarning("警告反馈")
  ```

+ 提示信息

  ```javascript
  this.$modal.alert("默认提示")
  this.$modal.alertError("错误提示")
  this.$modal.alertSuccess("成功提示")
  this.$modal.alertWarning("警告提示")
  ```

+ 通知信息

  ```javascript
  this.$modal.notify("默认通知");
  this.$modal.notifyError("错误通知");
  this.$modal.notifySuccess("成功通知");
  this.$modal.notifyWarning("警告通知")
  ```

+ 确认弹窗信息

  ```javascript
  /**
   * type = success / info / warning / error
  **/
  this.$modal.confirm(content, title = "提示", type = "warning") .then(() => {
     console.log('点击确认按钮')
  }).catch(() => {
     console.log('点击取消按钮')
  })
  ```

  



+ 遮罩层信息

  ```javascript
  // 打开遮罩层
  this.$modal.loading("正在导出数据，请稍后...")
  // 关闭遮罩层
  this.$modal.closeLoading()
  ```

### $test 对象

`$test `对象用于做检验规则，正则匹配等，定义在`plugins/test`文件中，方法如下：

```javascript
/* 部分方法示例 完整看plugins/test/test.js */
this.$test.isNull('value') // 验证是否为空
this.$test.isMobile('value') // 验证手机格式
this.$test.isIdCard('value') // 验证身份证号码
this.$test.isEmail('value') // 验证电子邮箱格式
....
// 可以自定义去加
```

### $utils 对象

`$utils `对象用于封装一些js工具库，定义在`plugins/utils`文件中，方法如下：

```javascript
/* 部分方法示例 完整看plugins/utils/utils.js */
/**
 * @function handleTree 构造树型结构数据
 * @function deepClone 深度克隆
 * @function queryParams 对象转url参数
 * @function getQueryString 获取url拼接参数
 * ..... 可以自定义去加
 */
```

### $download 下载

`注意请求添加 responseType: 'blob'`

+ 根据下载url路径下载

  ```javascript
  //const fileUrl = "https:://1chalk.com/profile/upload/xxxxxxx.png;
  
  // this.$download.saveAs(fileUrl, '文件名称')
  ```

+ 根据二进制文档流下载

  ```javascript
  // 调用方法
  this.$download.saveAs(dataBlob, '文件名称')
  
  ```

  更多文件下载操作

  ```javascript
  // 自定义文本保存
  var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
  this.$download.saveAs(blob, "hello world.txt");
  
  // 自定义文件保存
  var file = new File(["Hello, world!"], "hello world.txt", {type: "text/plain;charset=utf-8"});
  this.$download.saveAs(file);
  
  // 自定义data数据保存
  const blob = new Blob([data], { type: 'text/plain;charset=utf-8' })
  this.$download.saveAs(blob, name)
  
  // 根据地址保存文件
  this.$download.saveAs("https://ruoyi.vip/images/logo.png", "logo.jpg");
  ```

### 使用图标

全局 Svg Icon 图标组件。也可以使用Element 图标库

默认在 `@/assets/icons` 中注册到全局中，可以在项目中任意地方使用。所以图标均可在 `@/assets/icons/svg`可自行添加或者删除图标，所有图标都会被自动导入，无需手动操作。

#### 使用图标

```vue
<!-- icon-class 为 icon 的名字; class-name 为 icon 自定义 class-->
<svg-icon icon-class="password"  class-name='custom-class' />
```

#### 改变颜色

`svg-icon`默认会读取父级`color`，你可以改变父级的`color`或者直接改变`fill`的颜色即可。

> **提示**
>
> 需要下载图标可去 [iconfont](https://www.iconfont.cn/home/index) 矢量图标库下载.svg格式，规范一下图标的大小问题，不然可能会造成项目中的图标大小尺寸不统一的问题。 项目中使用的图标都是 128*128 大小规格的。

### 数据字典

字典管理是用来维护数据类型的数据，如下拉框、单选按钮、复选框、树选择的数据，方便系统管理员维护。主要功能包括：字典分类管理、字典数据管理

**方法使用**

```javascript
export default {
  dicts: ['字典类型'],
  ...
}
```

```vue
<dict-select v-model="value" :options="dict.type.字典类型" />
```

## 五，全局组件

### 树形选择器

```vue
<template>
	<treeselect
    	v-model="xxxxx"
        :options="树的数据"
        :normalizer="normalizer"
        show-count
        placeholder="选择上级菜单"
    />
</template>
<script>
    import Treeselect from '@riophae/vue-treeselect'
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'
    export default {
        components: { Treeselect },
        methods: {
            /** 转换菜单数据结构 如果默认字段一样则不需要加 */
            normalizer(node) {
              if (node.children && !node.children.length) {
                delete node.children
              }
              return {
                id: node.id,
                label: node.label,
                children: node.children
              }
            }
        }
    }
</script>
```

### 富文本组件

```vue
/**
* 组件属性值
* height 高度
* minHeight 最小高度
* readOnly 只读
* fileSize 上传文件大小限制(MB)
*/
<template>
	<editor v-model="xxxx" :min-height="192"/>
</template>
```

### 表格

```vue
/** 
* 组件属性值 
* tableData 数据
* tableCol 表格 
* ...可参考element table属性
*/
<template>
      <hu-table
        ref="table"
        :tableData="tableData"
        :tableCol="tableCol"
      >
      </hu-table>
</template>
<script>
export default {
    data() {
    	return {
          tableData: [],
          tableCol: [
            {
              // 属性参考 el-table-column 属性
              type: "selection",
              width: "55",
            },
            {
              title: "序号",
              type: "index",
              width: "55",
            },
            {
              title: "部门",
              key: "deptName",
              required: true // 校验功能
            },
            {
              title: "名称",
              key: "name",
            }
          ]
    	}
    },
    methods: {
        /** 查询列表 */
        getList() {
            templateApi.getTestPage().then(res => {
                this.tableData = res.data
            })
        }，
        submit(){
            // 返回true则校验未通过（需要配合tableCol里 required: true 一起使用）
            if (this.$refs.table.verifyTable()) return
        }
    }
}
</script>
```
### 分页组件

```vue
<template>
    <pagination
        v-show="rowCount>0"
        :total="total"
        :page.sync="queryParams.current"
        :limit.sync="queryParams.size"
        @pagination="getList"
    />
</template>
<script>
export default {
    data() {
    	return {
            // 查询参数
          queryParams: {
            current: 1,
            size: 10
          },
          total: 0, // 总条数
          loading: false
    	}
    }
    methods: {
        /** 查询列表 */
        getList() {
            this.loading = true
            templateApi.getTestPage(this.queryParams).then(res => {
                this.tableList = res.data.records
                this.total = res.data.total
                this.loading = false
            })
        }
    }
}
</script>
```

### 手动上传图片组件

> * 组件属性值
> * limit 图片数量限制 默认 5
> * fileType 文件类型, 例如['png', 'jpg', 'jpeg']
> * fileList  [ url ]默认选择图片
> * change（file， iamge）

```vue
/**
* 组件属性值
* limit 图片数量限制 默认 99
* fileType 文件类型, 例如['png', 'jpg', 'jpeg']
* fileList  [ url, uid ]默认选择图片
* change（[file, all]）
* remove（[file, all]）
**/
<img-upload :fileList="fileList" @remove="remove" @change="getImg"></img-upload>
```

### 文件上传

```vue
/**
* 组件属性值
* limit 图片数量限制 默认 99
* fileType 文件类型, 例如['png', 'jpg', 'jpeg']
* fileList  [ url, uid ]默认选择图片
* change（[file, all]）
* remove（[file, all]）
* upload file
**/
<f-upload 
    :fileList.sync="fileList" 
    @change="resultFile"
    @remove="removeFile">
</f-upload>
```

### 文件查询下载 按钮

```vue
/**
* 组件属性值
* path 后台返回地址
* name 下载查看文件名称
**/
<HuFileBut
:path="row.previewPath"
:name="row.originalName"
/>
```





### 清除表单

```js
this.resetForm("name");
```

### 全屏弹窗

```vue
/**
* 组件属性值
// 标题
title {type: String} 
// 是否显示弹窗
showModal.sync: {
    type: Boolean,
    default: false,
},
// 确认加载
loading: {
    type: Boolean,
    default: false,
},
// 是否显示确认按钮
submit: {
    type: Boolean,
    default: true,
},
// 是否显示取消按钮
close: {
    type: Boolean,
    default: true,
}
// 弹窗状态 1,2,3
HusetLook: {
    default: '',
}
// 取消事件
 @close
// 确认事件
 @submit
**/
<hu-modal 
    :title="title"
    :show-modal.sync="showModal"
    :loading="loading"
    :setLook="HusetLook"
    @close="cancel"
    @submit="submitFrom">
    <!-- content -->
</hu-modal>
```

### 抽屉弹窗

```vue
/**
* 组件属性值
// 标题
title {type: String} 
// 是否显示弹窗
open.sync: {
    type: Boolean,
    default: false,
},
// 确认加载
loading: {
    type: Boolean,
    default: false,
},
// 是否显示确认按钮
submit: {
    type: Boolean,
    default: true,
},
// 是否显示取消按钮
close: {
    type: Boolean,
    default: true,
}
// 取消事件
 @close
// 确认事件
 @submit
**/
<hu-drawer 
    :title="title"
    :open.sync="open"
    :loading="loading"
    @close="cancel"
    @submit="submitForm">
    <!-- content -->
</hu-drawer>
```

###  修改element-ui样式

`在组件内修改elementui样式需要加上::v-deep, less需要使用 /deep/ 正常css需要使用 >>>`

- 修改单个elementui的样式

  ```css
  <style lang="scss" scoped>
  ::v-deep .el-input{
  
  }
  ::v-deep .el-tablet{
      
  }
  ::v-deep .el-button{
      
  }
  </style>
  
                      
  ```

- 修改多个elementui的样式

  ```css
  <style lang="scss" scoped>
  ::v-deep {
      .el-table {}
      .el-input {}
      .el-button {}
  }
  </style>
  ```

- el-form 必填属性 `class="is-required"`


###  开发规范

- 命名规范

```text
项目命名
	全小写-隔开  my-project-name
    
目录命名: 全小写 

文件命名:小写开头、驼峰命名、或全小写
    tempLate.html
    tempLate.css
    tempLate.js
    
css命名规范
	class 驼峰命名||下划线_相隔命名
 
js命名规范
	变量:小驼峰         maxCount
    常量:全大写_隔开     MAX_COUNT
    方法:
    	小驼峰、
        前缀应当为动词(get/set/is/has/can/load/hand)
        getData()
```

- 注释必须要有，每个方法添加好注释，个别特殊标签，变量也需要加。
- 所有的 input输入框必须通过v-model.trim绑定；去除首末位空格。
- 输入框带有手机号，邮箱，密码....输入框，必须添加校验规则。
- 列表数据必须加loading加载，提交保存按钮也必须要加loading加载，防止重复提交。
- 有关敏感重要的操作，必须加二次确认框入；如：删除操作




>`举例：` 
>query	查询 
>update	修改
>add	新增
>delete	删除
>download 下载 | 导出
>print	导出
>import  导入
>other   其他


## 六，AI模块
> api/aiChat.js AI聊天api
>
> store/modules/aiChat.js 逻辑处理
>
> api/components/AiChat AI聊天vue代码
### AI聊天框

```vue
<template>
    <ai-chat></ai-chat>
</template>
<script>
import AiChat from "@/components/AiChat";
export default {
  components: {
    AiChat,
  },     
}
</script>
```


## 七，API

### 工具类

```vue
let params = {
    page: 1,
    limit: 10,
  };
  
/**
 * 操作类请求
 * requestFn: function request
 * params: 参数
 * message: 弱提示
 * function: 回调函数
 **/
  this.HandleRequestSubmit(http.getList, params, '自定义提示').then(({ result }) => {
    this.showModal = false;
    this.getList();
  });
  
  
/**
 * 查询类请求
 * requestFn : function request
 * params: 参数
 * setLoading 加载修改状态
 **/
  this.HandleRequestQuery(http.getList, params, this.MixinSetLoading).then(({ result }) => {
    this.tableData = [{ name: "name", name1: "name1", name2: "name2" }];
  });

```