# mfs_admin

**Repository Path**: copper-core/mfs_admin

## Basic Information

- **Project Name**: mfs_admin
- **Description**: 孟凡森后台管理项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-12-20
- **Last Updated**: 2024-02-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 新增(2023-01-26 13:23)

- 新增 天马行空 [其他登录方式]
- [飞书官方](https://open.feishu.cn/community/articles/7317091221654224898)
- [钉钉官方](https://open.dingtalk.com/search?keyword=%E6%89%AB%E7%A0%81%E7%99%BB%E5%BD%95)

```
新增页面 src/views/idea/Login.vue
```

### 新增(2023-01-26 13:23)

- 新增 天马行空 [面试题收集]

```
新增页面 src/views/idea/Interview.vue
```

### 新增(2023-01-26 13:26)

- 新增 天马行空 [瀑布流页面布局]
- 插件 [vue-waterfall-plugin-next](https://www.npmjs.com/package/vue-waterfall-plugin-next)

```
新增页面 src/views/idea/Waterfall.vue
```

### 新增(2023-01-25 16:23)

- 新增 常用 hook

```
UseBoolean
UseCache
UseDebounce
UseFormatResult
UseToggle
```

### 新增(2023-01-25 10:13)

- 新增 hooks 模块
- vue-hooks-plus Vue3 Hooks 库
  🏄🏼‍♂️ 易学易用
  🔋 支持 SSR
  🛸 丰富的 Hooks
  🏟️ 覆盖大部分业务场景
  🦾 首选 useRequest，强大的请求中间层
  🎪 交互式 demo，身临其境
  🎯 使用 TypeScript 构建，提供完整的类型定义文件
  支持按需加载，减少打包体积
  🤺 演练场，大有用武之地
  🔐 测试完善，安全可靠
  链接：https://inhiblabcore.github.io/docs/hooks/

```
新增src/views/hooks/index.vue
主要是学习 vue-hooks-plus 中特殊函数
useRequest
debounceWait
throttleWait
pollingInterval
ready
refreshDeps
loadingDelay
refreshOnWindowFocus
useInfiniteScroll【外置插件】
```

### 新增(2023-01-25 10:13)

- 新增 天马行空 [新手指导]
- 插件 [intro.js]
- 链接 https://introjs.com/docs

```
新增src/views/idea/Guide.vue
```

### 新增(2023-01-23 10:31)

- [天马行空]
- 新增 超好用 Vue3 工具

```
1. v-wave 让目标点击节点具备波纹的效果
地址：https://github.com/justintaddei/v-wave
2. vue3-dnd 拖放
链接：https://www.vue3-dnd.com/example/sortable/simple.html
3. vue-word-highlighter 匹配字段并高亮
链接：https://github.com/kawamataryo/vue-word-highlighter
4. v-perfect-signature 签名
链接：https://github.com/wobsoriano/v-perfect-signature
```

### 新增(2023-01-10 15:29)

- 新增 解决 vite 不能使用 require
- 引入 [vite-plugin-require-transform]

```
vite.config.js
[https://www.npmjs.com/package/vite-plugin-require-transform]
```

### 新增(2023-01-10 15:29)

- 新增 天马行空 [奇特想法]

```
新增src/views/idea/music.vue
```

### 新增(2023-01-10 14:57)

- 新增 消息提醒页面
- 功能 [推送语音] [推送网页消息] [推送系统消息]

```
新增src/views/use/Notice.vue
```

### 新增(2023-01-11 13:46)

- 新增 表单模块
- 有关 [DatePicker-日期组件] [RangeMore-范围区间组件] [SelectBase-下拉全模糊查询组件] [SelectLazy-下拉加载更多组件]
- [自定义校验表单]

```
新增页面 src/views/use/Form/skin.vue
新增页面 src/views/use/Form/rule.vue

新增组件src/plugins/use/DatePicker.vue
新增组件src/plugins/use/RangeMore.vue
新增组件src/plugins/use/SelectBase.vue
新增组件src/plugins/use/SelectLazy.vue
```

### 新增(2023-01-10 14:37)

- 新增 分享[二维码扫码]
- 链接 [https://www.npmjs.com/package/vue-qr]

```
新增src/views/Share.vue
```

### 新增(2023-01-10 17:13)

- 新增 当用户切换到其他标签页或最小化窗口时，页面的可见性将发生更改

```
新增App.vue
document.addEventListener("visibilitychange", function () {
  if (document.visibilityState === "visible") {
    // 当页面变为可见状态时执行的操作
    ElNotification({
      message: "吴彦祖，欢迎回来！",
      type: "success",
      position: "bottom-right",
    });
    console.log("页面可见");
  } else if (document.visibilityState === "hidden") {
    // 当页面变为隐藏状态时执行的操作
    console.log("页面隐藏");
  }
});
```

### 新增(2023-01-10 14:37)

- 新增 手动封装数字自增长组件

```
新增src/components/Count.vue
```

### 新增(2023-01-09 17:33)

- 新增 three3D 运用
- 小页面

```
新增src/views/use/three/index.vue
```

### 新增(2023-01-09 11:12)

- 新增 菜单 添加三级路由(够用版)
- 新增 Threejs 3D 建模 [three,three-css2drender,three-orbit-controls 插件]

```
修改src/layout/Aside.vue
新增src/views/use/three/index.vue
```

### 新增(2023-01-08 15:59)

- 新增 地图
- 功能点 [关键词查询] [经纬度查询] [打点] [画边界线、面-菏泽市区为例] [热力图展示] [平滑跳转] [轨迹回放]
- 链接 [https://lbs.qq.com/mobile/androidMapSDK/developerGuide/addressResolution]

```
新增src/use/Map.vue
```

### 新增(2023-01-05 14:04)

- 新增 文件页面
- 功能点 [文件上传] [文件预览.docx] [文件预览.Excel] [文件预览.pdf]
- 链接 [https://www.npmjs.com/package/@vue-office/docx]

```
新增src/use/File.vue
```

### 新增(2023-01-03 16:53)

- 新增 个人中心

```
新增src/system/Persona.vue
```

### 新增(2023-01-03 16:31)

- 新增 面包屑封装
- 核心 computed [计算属性会根据它所依赖的数据自动进行计算，并返回计算结果,当计算属性所依赖的数据发生变化时，计算属性会自动重新计算。计算属性可以用于实现对数据的监听和重载]

```
新增src/layout/Breadcrumb.vue
在 src/layout/index.vue 通过 路由跳转 统一补充

```

### 新增(2023-01-03 14:57)

- 新增 菜单管理页面
- 注 路由菜单表格化，可以清晰了解菜单结构...

```
新增src/system/Menu.vue

```

### 新增(2023-01-03 13:39)

- 新增 系统日志
- 有关 [el-timeline]

```
新增src/use/Log.vue

```

### 新增(2023-01-03 11:37)

- 新增 图片、图组预览
- 有关 [el-image]

```
新增src/use/Image.vue 图片页面
新增src/components/ImagePreview.vue 预览 组件

```

### 新增(2023-01-03 11:15)

- 新增 城市选择器
- [行政区划(分类)] [行政区划(默认)]

```
新增src/use/City.vue 城市选择页面
新增src/components/CitySelect.vue 分类选择 组件

```

### 新增(2023-01-03 10:55)

- 新增 常用详情页面【遍历数据】

```
新增src/use/detail.vue

```

### 新增(2023-01-03 09:52)

- 新增 环境变量和模式
- 链接 [vite] [https://cn.vitejs.dev/guide/env-and-mode.html]
- 链接 [webpack] [https://www.jianshu.com/p/f96a7681e9ae]

```
新增package.json内容
"build:test": "vite build --mode development",
"build:pro": "vite build --mode production",

```

### 新增(2023-01-02 15:34)

- 新增 前端调用打印机
- 包括 [打印图片] [打印表格] [自定义打印]
- 有关[src/plugins/import/print/index.ts] [封装打印机制]

```
新增页面 src/other/print.vue
```

### 新增(2023-01-02 15:34)

- 新增 甘特图展示
- 有关[vue3-gantt]
- 链接[https://www.npmjs.com/package/vue3-gantt]

```
新增页面 src/other/Gantt.vue
```

### 新增(2023-01-02 15:26)

- 新增 滑块验证码
- 有关[vue3-puzzle-vcode]
- 链接[https://www.npmjs.com/package/vue3-puzzle-vcode]

```
新增页面 src/other/SliderVerify.vue
```

### 新增(2023-01-02 15:10)

- 新增 文字滚动 [类似公告]
- 有关[vue3-seamless-scroll]
- 链接[https://www.npmjs.com/package/vue3-seamless-scroll]

```
新增页面 src/other/ScrollText.vue
```

### 新增(2023-01-02 15:03)

- 新增 数字滚动
- 有关[vue-countup-v3]
- 链接[https://www.npmjs.com/package/vue-countup-v3]

```
新增页面 src/other/ScrollNumber.vue
```

### 新增(2023-01-02 10:06)

- 新增 文件上传组件[oss]
- 有关[el-upload]

```
新增页面 src/components/UploadFile.vue
```

### 新增(2023-12-29 14:09)

- 新增 抽奖组件
- 有关 [@lucky-canvas/vue]

```
新增页面 src/views/other/Award.vue
```

### 新增(2023-12-29 11:59)

- 新增 pdf 文件预览
- 有关 [vue-pdf-embed]

```
具体文件路径 src/views/dataScreen/index.vue
```

### 新增(2023-12-26 11:43)

- 新增 数据大屏页面
- 有关 [全屏显示] [自定义菜单] [echarts、vue-echarts]

```
具体文件路径 src/views/dataScreen/index.vue
```

### 新增(2023-12-23 11:34)

- 同步配置引入全局样式 reset.scss
- 修改 vite.config.js

```
css: {
  preprocessorOptions: {
    scss: {
      additionalData: `@import '/src/assets/css/reset.scss';`, // 引入全局变量文件
    },
  },
},
```

### 新增(2023-12-23 11:28)

- [告别手动引入依赖：unplugin-auto-import 插件助你提升编码体验] [不用导入直接使用] [useRouter,userRoute....]
- yarn add unplugin-auto-import
- 修改 vite.config.js
- 详细 [https://zhuanlan.zhihu.com/p/612397686]

```
plugins: [
    vue(),
    AutoImport({
      imports: [
        "vue",
        "vue-router",
        "vue-i18n",
        "@vueuse/core",
        "@vueuse/head",
        "@vueuse/head",
      ],
      include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/],
      resolvers: [
        // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
        ElementPlusResolver(),
      ],
      vueTemplate: true, // 是否在 vue 模板中自动导入
      dts: "src/plugins/auto-import.d.ts",
    }),
  ],
```

### 新增(2023-12-22 16:59)

```
1.增加config/index.js 全局配置信息文件
const config = {
  // hash模式时在不确定二级目录名称的情况下建议使用""或"./"来代表相对路径
  // history模式默认使用"/"或者"/二级目录/"，只有hash时base可以为空，如果你配置了history模式那么此项不可为空！
  base: "",
  // 生产环境构建文件的目录名
  outDir: "dist",
  // 放置生成的静态资源 (js、css、img、fonts) 的目录。
  assetsDir: "static",
  // 开发环境端口号
  port: 5174,
  // pwa
  pwa: true,
  // build时规定触发警告的 chunk 大小。（以 kbs 为单位）
  chunkSizeWarningLimit: 20480,
  // 开发服务器启动时，自动在浏览器中打开应用程序
  open: true,
  // build时启用/禁用 CSS 代码拆分
  cssCodeSplit: false,
};
************************************
2.增加打包输出格式 vite.config.js
build: {
    brotliSize: false,
    emptyOutDir: false,
    outDir,
    assetsDir,
    chunkSizeWarningLimit,
    cssCodeSplit,
    rollupOptions: {
        onwarn: () => {
            return
        },
        // 配置打包输出文件格式，hash每次打包hash都会更新 以方便后续做系统更新提示
        output: {
            chunkFileNames: 'static/js/[name]-[hash].js',
            entryFileNames: 'static/js/[name]-[hash].js',
            assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
        },
    },
},
```

### 新增(2023-12-21 12:00)

```
1.新增查看详情 【hidden: true 隐藏菜单栏】
详情页面
{
    path: "systemUserDetail",
    name: "SystemUserDetail",
    hidden: true,
    meta: { title: "系统用户详情", hidden: true,},
    component: () => import("@/views/system/SystemUserDetail.vue")
},
2.通过id 请求详情接口，渲染数据
http://localhost:3000/system/systemUserDetail?id=1714471285016895490
```

### 新增(2023-12-21 11:31)

```
1.新增批量删除方法 handleMoreDetele 二次提示】
```

### 新增(2023-12-21 10:02)

```
1.新增删除方法 handleDetele 二次提示】
```

### 新增(2023-12-21 09:54)

```
1.新增编辑新增弹窗 路径【system/components/UpdateDialog】
```

### 新增(2023-12-20 16:14)

```
1.新增路由拆分
2.按需引入插件
3.全局方法utils.js文件
4.SystemUser 遍历表格 遍历查询
```

#### 安装依赖

- 方式一

```
npm i
# 或者
npm install
```

- 方式二
  解压 depends_yarn.zip 文件，将解压后的 node_modules 提取到 根目录。

#### 运行项目

```
npm run dev
```

#### 打包项目

```
npm run build:test 打包测试
npm run build:pro 打包生产
```

#### Customize configuration

- See [Vite](https://cn.vitejs.dev/)
- See [Vue](https://v3.cn.vuejs.org/)
- See [Vue Router](https://next.router.vuejs.org/)
- See [pinia](https://pinia.web3doc.top/)
- See [Element Plus](https://element-plus.gitee.io/#/zh-CN)

#### 文件命名规则(于 2024-1-25 更新)

- 文件夹命名 全小写 例如 abc
- 路由文件命名 首字母大写驼峰式 例如 AbcAbc.vue
- 组件文件命名 首字母大写驼峰式 例如 AbcAbc.vue
- 公共方法文件命名 全小写 例如 abc.js/abc.ts