git hooks test

README.md

@@ -1,24 +1,135 @@
-# demo
+## 介绍
 
-## Project setup
+[vue-element-admin 3.0](https://github.com/kailong321200875/vue-element-admin-webpack)是一个基于[vue3](https://github.com/vuejs/vue-next)、[typeScript](https://github.com/microsoft/TypeScript)、[vue-cli4](https://github.com/vuejs/vue-cli)、[element-plus](https://github.com/element-plus/element-plus)的后台解决方案，借鉴了[vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)和[vue-vben-admin](https://github.com/anncwb/vue-vben-admin)的写法和优点。内置了动态路由，权限验证，典型的业务模型，丰富的功能组件，并且提供了多页配置，开箱即用，可以用来作为项目的启动模版。它可以帮助你快速搭建企业级中后台产品原型，也可以作为一个示例，用于学习。
-```
+
-yarn install
+::: tip 建议
+本项目的定位是后台集成方案，不太适合当基础模板来进行二次开发。因为本项目集成了很多你可能用不到的功能，会造成不少的代码冗余。如果你的项目不关注这方面的问题，也可以直接基于它进行二次开发。
+<!-- 如果需要二次开发，推荐使用[vue-element-admin 2.0](http://192.168.169.57:9000/scm/git/hzt-webdocs.git)中的精简版分支 `vue-admin-template` 进行开发。 -->
+:::
+
+## 功能
+
+``` sh
+- 登录 / 注销
+
+- 权限验证
+  - 页面权限
+  - 指令权限
+  - 权限配置
+
+- 多环境
+
+- 多页配置
+
+- 全局功能
+  - 三种不同风格 layout 布局
+  - 动态侧边栏（支持多级路由嵌套）
+  - 动态面包屑
+  - 快捷导航(标签页)
+  - Svg Sprite 图标
+  - 本地 mock 数据
+  - Screenfull全屏
+  - 自适应收缩侧边栏
+
+- 功能组件
+  - 图表
+  - 图片预览
+  - 按钮
+  - 消息提示
+  - 查询
+  - 富文本编辑器
+  - markdown编辑器
+  - 弹窗
+  - 显示更多
+  - 详情组件
+
+- 表格
+  - 基础表格
+  - 分页表格
+  - 带斑马纹表格
+  - 带边框表格
+  - 带状态表格
+  - 固定表头
+  - 固定列
+  - 固定列和表头
+  - 流体高度
+  - 多级表头
+  - 单选
+  - 多选
+  - 排序
+  - 筛选
+  - 展开行
+  - 树形数据与懒加载
+  - 自定义表头
+  - 表尾合计行
+  - 合并行或列
+  - 自定义索引
+
+- 自定义指令
+  - Clipboard
+
+- Hooks
+  - UseWaterMark
+  - UseScrollTo
+
+- 多级菜单缓存
+
+- 综合实例
+  - 列表综合实例-弹窗
+  - 列表综合实例-页面
 ```
 
-### Compiles and hot-reloads for development
+## 前序准备
-```
+
-yarn serve
+你需要在本地安装[node](https://nodejs.org/en/)和[git](https://git-scm.com/)。本项目技术栈基于[ES2015+](https://es6.ruanyifeng.com/)、[vue](https://www.vue3js.cn/docs/zh/)、[vuex](https://next.vuex.vuejs.org/)、[vue-router](https://next.router.vuejs.org/)、[vue-cli](https://github.com/vuejs/vue-cli)、[axios](https://github.com/axios/axios)和[element-plus](https://github.com/element-plus/element-plus)，所有的请求数据都使用[Mock.js](https://github.com/nuysoft/Mock)进行模拟，提前了解和学习这些知识会对使用本项目有很大的帮助。
+
+::: warning 注意
+本项目不支持低版本浏览器(如 ie)，后续会考虑支持IE11。
+:::
+
+## 目录结构
+
+``` sh
+.
+├── mock # 模拟数据
+├── public # 静态资源
+├── src # 项目代码
+│   ├── assets # 静态资源
+│   ├── cache # web-storage-cache配置
+│   ├── components # 组件
+│   ├── directive # 指令
+│   ├── hooks # hooks
+│   ├── libs  # 按需引入element-plus
+│   ├── pages # 多页
+│   │   └── index # index多页
+│   │   │   ├── api # 全局api
+│   │   │   ├── axios-config # axios配置
+│   │   │   ├── layout # layout布局
+│   │   │   ├── router # 路由配置
+│   │   │   ├── store # 状态管理
+│   │   │   ├── views # index多页 views 所有页面
+│   │   │   ├── App.vue # 入口页面
+│   │   │   ├── main.js # 入口文件 加载组件 初始化等
+│   │   │   └── permission.js # 权限管理
+│   ├── styles # 样式
+│   ├── types # 全局types
+│   ├── utils # 工具类
+│   └── vue-bus # vueBus
+├── tests # 测试
+├── .env.xxx # 环境变量配置
+├── .eslintrc.js # eslint 配置项
+├── babel.config # babel配置文件
+├── pages.config # 多页配置文件
+├── postcss.config.js # postcss配置文件
+├── package.json # package.json
+├── vue.config # vue-cli 配置
+└── yarn.lock
 ```
 
-### Compiles and minifies for production
+## 浏览器支持
-```
-yarn build
-```
 
-### Lints and fixes files
+现代浏览器。
-```
-yarn lint
-```
 
-### Customize configuration
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Safari |
-See [Configuration Reference](https://cli.vuejs.org/config/).
+| --------- | --------- | --------- |
+| last 2 versions | last 2 versions | last 2 versions |

commitlint.config.js

@@ -0,0 +1,56 @@
+module.exports = {
+  ignores: [(commit) => commit.includes('init')],
+  extends: ['@commitlint/config-conventional'],
+  parserPreset: {
+    parserOpts: {
+      headerPattern: /^(\w*|[\u4e00-\u9fa5]*)(?:[\(\（](.*)[\)\）])?[\:\：] (.*)/,
+      headerCorrespondence: ['type', 'scope', 'subject'],
+      referenceActions: [
+        'close',
+        'closes',
+        'closed',
+        'fix',
+        'fixes',
+        'fixed',
+        'resolve',
+        'resolves',
+        'resolved'
+      ],
+      issuePrefixes: ['#'],
+      noteKeywords: ['BREAKING CHANGE', '不兼容变更'],
+      fieldPattern: /^-(.*?)-$/,
+      revertPattern: /^Revert\s"([\s\S]*)"\s*This reverts commit (\w*)\./,
+      revertCorrespondence: ['header', 'hash'],
+      warn() {},
+      mergePattern: null,
+      mergeCorrespondence: null
+    }
+  },
+  rules: {
+    'body-leading-blank': [2, 'always'],
+    'footer-leading-blank': [1, 'always'],
+    'header-max-length': [2, 'always', 108],
+    'subject-empty': [2, 'never'],
+    'type-empty': [2, 'never'],
+    'type-enum': [
+      2,
+      'always',
+      [
+        'feat',
+        'fix',
+        'perf',
+        'style',
+        'docs',
+        'test',
+        'refactor',
+        'build',
+        'ci',
+        'chore',
+        'revert',
+        'wip',
+        'workflow',
+        'types'
+      ]
+    ]
+  }
+}

mock/index.ts

@@ -21,6 +21,7 @@ export function mockXHR() {
         this.custom.xhr.responseType = this.responseType
       }
     }
+    /* eslint-disable */
     this.proxy_send(...arguments)
   }
 

package.json

@@ -12,7 +12,8 @@
     "build:dev": "vue-cli-service build --mode development",
     "build:pro": "vue-cli-service build",
     "build:test": "vue-cli-service build --mode test",
-    "serve:index": "cross-env PROJECT_NAME=index vue-cli-service serve"
+    "serve:index": "cross-env PROJECT_NAME=index vue-cli-service serve",
+    "clean": "npx rimraf node_modules"
   },
   "dependencies": {
     "axios": "^0.20.0",
@@ -37,6 +38,8 @@
     "web-storage-cache": "^1.1.1"
   },
   "devDependencies": {
+    "@commitlint/cli": "^11.0.0",
+    "@commitlint/config-conventional": "^11.0.0",
     "@types/clipboard": "^2.0.1",
     "@types/echarts": "^4.9.1",
     "@types/lodash-es": "^4.17.3",
@@ -64,7 +67,7 @@
     "eslint-config-prettier": "^6.14.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-vue": "^7.0.0-0",
-    "image-webpack-loader": "^7.0.1",
+    "husky": "^4.3.6",
     "less": "^3.0.4",
     "less-loader": "^5.0.0",
     "path": "^0.12.7",
@@ -77,5 +80,17 @@
     "uglifyjs-webpack-plugin": "^2.2.0",
     "vue-cli-plugin-element-plus": "^0.0.8",
     "vuex-module-decorators": "^1.0.1"
+  },
+  "lint-staged": {
+    "src/**/*.{js,ts,vue}": [
+      "eslint --fix",
+      "git add"
+    ]
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged",
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+    }
   }
 }

src/assets/icons/index.ts

@@ -1,12 +1,5 @@
-import type { App } from 'vue'
-import SvgIcon from '@/components/SvgIcon/index.vue'// svg组件
-
 const req: any = require.context('./svg', false, /\.svg$/)
 const requireAll: any = (requireContext: any) => {
   requireContext.keys().map(requireContext)
 }
 requireAll(req)
-
-export function setupSvgIcon(app: App<Element>): void {
-  app.component('SvgIcon', SvgIcon)
-}

src/components/Backtop/index.vue

@@ -0,0 +1,16 @@
+<template>
+  <el-backtop
+    target=".main__wrap--content .el-scrollbar__wrap"
+    :bottom="100"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'Backtop'
+})
+</script>
+
+<style>
+</style>

src/components/UserInfo/index.vue

@@ -2,7 +2,7 @@
   <el-dropdown class="avatar-container" trigger="hover">
     <div>
       <div class="avatar-wrapper">
-        <img :src="require('@/assets/img/avatar.gif')" class="user-avatar">
+        <img :src="require('@/assets/img/avatar.png')" class="user-avatar">
         <span class="name-item">管理员</span>
       </div>
     </div>

src/components/index.ts

@@ -1,12 +1,16 @@
 import type { App } from 'vue'
+import SvgIcon from './SvgIcon/index.vue'// svg组件
 import Dialog from './Dialog/index.vue'// Dialog组件
 import ComTable from './Table/index.vue'// Table组件
 import ComSearch from './Search/index.vue'// Search组件
 import ComDetail from './Detail/index.vue'// Detail组件
 
+import '@/assets/icons' // 引入svg图标
+
 export function setupGlobCom(app: App<Element>): void {
   app.component('ComDialog', Dialog)
   app.component('ComTable', ComTable)
   app.component('ComSearch', ComSearch)
   app.component('ComDetail', ComDetail)
+  app.component('SvgIcon', SvgIcon)
 }

src/libs/element.config.ts

@@ -15,4 +15,4 @@ const elementConfig: ConfigElement = {
   zIndex: 2000
 }
 
-export default elementConfig
+export default elementConfig 

src/libs/types.d.ts

@@ -4,4 +4,4 @@
 export interface ConfigElement {
   zIndex: number
   size: 'medium' | 'small' | 'mini'
-}
+}

src/pages/index/layout/modules/Classic.vue

@@ -64,11 +64,7 @@
     <setting />
     <!-- setting -->
 
-    <el-backtop
+    <backtop v-if="showBackTop" />
-      v-if="showBackTop"
-      target=".main__wrap--content .el-scrollbar__wrap"
-      :bottom="100"
-    />
   </div>
 </template>
 
@@ -86,6 +82,7 @@ import Screenfull from '_c/Screenfull/index.vue'
 import UserInfo from '_c/UserInfo/index.vue'
 
 import Setting from '_c/Setting/index.vue'
+import Backtop from '_c/Backtop/index.vue'
 export default defineComponent({
   name: 'Classic',
   components: {
@@ -97,7 +94,8 @@ export default defineComponent({
     AppMain,
     TagsView,
     Logo,
-    Setting
+    Setting,
+    Backtop
   },
   setup() {
     const layout = computed(() => appStore.layout)

src/pages/index/layout/modules/LeftTop.vue

@@ -85,11 +85,7 @@
     <setting />
     <!-- setting -->
 
-    <el-backtop
+    <backtop v-if="showBackTop" />
-      v-if="showBackTop"
-      target=".main__wrap--content .el-scrollbar__wrap"
-      :bottom="100"
-    />
   </div>
 </template>
 
@@ -107,6 +103,7 @@ import Screenfull from '_c/Screenfull/index.vue'
 import UserInfo from '_c/UserInfo/index.vue'
 
 import Setting from '_c/Setting/index.vue'
+import Backtop from '_c/Backtop/index.vue'
 export default defineComponent({
   name: 'LeftTop',
   components: {
@@ -118,7 +115,8 @@ export default defineComponent({
     AppMain,
     TagsView,
     Logo,
-    Setting
+    Setting,
+    Backtop
   },
   setup() {
     const layout = computed(() => appStore.layout)

src/pages/index/layout/modules/Top.vue

@@ -72,11 +72,7 @@
     <setting />
     <!-- setting -->
 
-    <el-backtop
+    <backtop v-if="showBackTop" />
-      v-if="showBackTop"
-      target=".main__wrap--content .el-scrollbar__wrap"
-      :bottom="100"
-    />
   </div>
 </template>
 
@@ -94,6 +90,7 @@ import Screenfull from '_c/Screenfull/index.vue'
 import UserInfo from '_c/UserInfo/index.vue'
 
 import Setting from '_c/Setting/index.vue'
+import Backtop from '_c/Backtop/index.vue'
 export default defineComponent({
   name: 'Top',
   components: {
@@ -105,7 +102,8 @@ export default defineComponent({
     AppMain,
     TagsView,
     Logo,
-    Setting
+    Setting,
+    Backtop
   },
   setup() {
     const layout = computed(() => appStore.layout)

src/pages/index/main.ts

@@ -23,8 +23,6 @@ import './permission' // 路由守卫
 
 import { setupElement } from '@/libs/element' // element UI
 
-import { setupSvgIcon } from '@/assets/icons' // svg图标
-
 import { setupGlobCom } from '@/components' // 全局公用组件
 
 import { setupDirectives } from '@/directives' // 自定义指令
@@ -43,8 +41,6 @@ setupStore(app) // 引入状态管理
 
 setupElement(app) // 引入element组件
 
-setupSvgIcon(app) // 全局注册svgIcon组件
-
 setupGlobCom(app) // 注册全局公用组件
 
 setupDirectives(app) // 注册全局自定义指令

src/pages/index/router/index.ts

@@ -90,7 +90,7 @@ export const constantRouterMap: AppRouteRecordRaw[] = [
     meta: {},
     children: [
       {
-        path: 'http://192.168.169.57/ue/2019/doc/vue-standard/dist/',
+        path: 'http://8.133.179.48:4000/dist-doc/',
         meta: { title: '文档', icon: 'documentation' }
       }
     ]

src/pages/index/views/table-demo/test/index.ts

@@ -1,3 +0,0 @@
-import Table from './table2'
-
-export default Table

src/pages/index/views/table-demo/test/index.vue

@@ -1,18 +0,0 @@
-<template>
-  <c-table />
-</template>
-
-<script>
-import CTable from './table.vue'
-export default {
-  components: {
-    CTable
-  },
-  methods: {
-
-  }
-}
-</script>
-
-<style>
-</style>

src/pages/index/views/table-demo/test/table.vue

@@ -1,181 +0,0 @@
-<template>
-  <a-table :data-source="data" :columns="columns">
-    <template #filterDropdown="{ setSelectedfields, selectedfields, confirm, clearFilters, column }">
-      <div style="padding: 8px">
-        <a-input
-          :ref="c => (searchInput = c)"
-          :placeholder="`Search ${column.dataIndex}`"
-          :value="selectedfields[0]"
-          style="width: 188px; margin-bottom: 8px; display: block;"
-          @change="e => setSelectedfields(e.target.value ? [e.target.value] : [])"
-          @pressEnter="handleSearch(selectedfields, confirm, column.dataIndex)"
-        />
-        <el-button
-          type="primary"
-          size="small"
-          style="width: 90px; margin-right: 8px"
-          @click="handleSearch(selectedfields, confirm, column.dataIndex)"
-        >
-          <template #icon><SearchOutlined /></template>
-          Search
-        </el-button>
-        <el-button size="small" style="width: 90px" @click="handleReset(clearFilters)">
-          Reset
-        </el-button>
-      </div>
-    </template>
-    <template #filterIcon="filtered">
-      <search-outlined :style="{ color: filtered ? '#108ee9' : undefined }" />
-    </template>
-    <template #customRender="{ text, record, index, column }">
-      <span v-if="searchText && searchedColumn === column.dataIndex">
-        <template
-          v-for="(fragment, i) in text
-            .toString()
-            .split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))"
-        >
-          <mark v-if="fragment.toLowerCase() === searchText.toLowerCase()" class="highlight">
-            {{ fragment }}
-          </mark>
-          <template v-else>{{ fragment }}</template>
-        </template>
-      </span>
-      <template v-else>
-        {{ text }}
-      </template>
-    </template>
-  </a-table>
-</template>
-
-<script>
-import { SearchOutlined } from '@ant-design/icons-vue';
-const data = [
-  {
-    field: '1',
-    name: 'John Brown',
-    age: 32,
-    address: 'New York No. 1 Lake Park',
-  },
-  {
-    field: '2',
-    name: 'Joe Black',
-    age: 42,
-    address: 'London No. 1 Lake Park',
-  },
-  {
-    field: '3',
-    name: 'Jim Green',
-    age: 32,
-    address: 'Sidney No. 1 Lake Park',
-  },
-  {
-    field: '4',
-    name: 'Jim Red',
-    age: 32,
-    address: 'London No. 2 Lake Park',
-  },
-];
-
-export default {
-  components: {
-    SearchOutlined,
-  },
-  data() {
-    return {
-      data,
-      searchText: '',
-      searchInput: null,
-      searchedColumn: '',
-      columns: [
-        {
-          title: 'Name',
-          dataIndex: 'name',
-          field: 'name',
-          slots: {
-            filterDropdown: 'filterDropdown',
-            filterIcon: 'filterIcon',
-            customRender: 'customRender',
-          },
-          onFilter: (value, record) =>
-            record.name
-              .toString()
-              .toLowerCase()
-              .includes(value.toLowerCase()),
-          onFilterDropdownVisibleChange: visible => {
-            if (visible) {
-              setTimeout(() => {
-                console.log(this.searchInput);
-                this.searchInput.focus();
-              }, 0);
-            }
-          },
-        },
-        {
-          title: 'Age',
-          dataIndex: 'age',
-          field: 'age',
-          slots: {
-            filterDropdown: 'filterDropdown',
-            filterIcon: 'filterIcon',
-            customRender: 'customRender',
-          },
-          onFilter: (value, record) =>
-            record.age
-              .toString()
-              .toLowerCase()
-              .includes(value.toLowerCase()),
-          onFilterDropdownVisibleChange: visible => {
-            if (visible) {
-              setTimeout(() => {
-                this.searchInput.focus();
-              });
-            }
-          },
-        },
-        {
-          title: 'Address',
-          dataIndex: 'address',
-          field: 'address',
-          slots: {
-            filterDropdown: 'filterDropdown',
-            filterIcon: 'filterIcon',
-            customRender: 'customRender',
-          },
-          onFilter: (value, record) =>
-            record.address
-              .toString()
-              .toLowerCase()
-              .includes(value.toLowerCase()),
-          onFilterDropdownVisibleChange: visible => {
-            if (visible) {
-              setTimeout(() => {
-                this.searchInput.focus();
-              });
-            }
-          },
-        },
-      ],
-    };
-  },
-  methods: {
-    handleSearch(selectedfields, confirm, dataIndex) {
-      confirm();
-      console.log(selectedfields[0]);
-      this.searchText = selectedfields[0];
-      this.searchedColumn = dataIndex;
-      this.$forceUpdate();
-    },
-
-    handleReset(clearFilters) {
-      clearFilters();
-      this.searchText = '';
-    },
-  },
-};
-</script>
-<style lang="less" scoped>
-::v-deep.highlight {
-  background-color: rgb(255, 192, 105);
-  padding: 0px;
-}
-</style>

src/pages/index/views/table-demo/test/table2.tsx

@@ -1,58 +0,0 @@
-import { Table } from 'ant-design-vue'
-import { defineComponent } from 'vue'
-
-const columns = [
-  {
-    dataIndex: 'name',
-    field: 'name',
-    // slots: { title: 'customTitle', customRender: 'name' }
-  },
-  {
-    title: 'Age',
-    dataIndex: 'age',
-    field: 'age'
-  },
-  {
-    title: 'Address',
-    dataIndex: 'address',
-    field: 'address'
-  }
-]
-
-const data = [
-  {
-    field: '1',
-    name: 'John Brown',
-    age: 32,
-    address: 'New York No. 1 Lake Park',
-    tags: ['nice', 'developer']
-  },
-  {
-    field: '2',
-    name: 'Jim Green',
-    age: 42,
-    address: 'London No. 1 Lake Park',
-    tags: ['loser']
-  },
-  {
-    field: '3',
-    name: 'Joe Black',
-    age: 32,
-    address: 'Sidney No. 1 Lake Park',
-    tags: ['cool', 'teacher']
-  }
-]
-
-export default defineComponent({
-  name: 'Test',
-  setup() {
-    return () => {
-      return (
-        <Table columns={columns} dataSource={data} v-slots={{
-          title: () => (<div>哈哈</div>)
-        }}>
-        </Table>
-      )
-    }
-  }
-})

vue.config.js

@@ -79,14 +79,14 @@ const vueConfig = {
       .end()
 
     // 图片压缩
-    config.module
+    // config.module
-      .rule('images')
+    //   .rule('images')
-      .use('image-webpack-loader')
+    //   .use('image-webpack-loader')
-      .loader('image-webpack-loader')
+    //   .loader('image-webpack-loader')
-      .options({
+    //   .options({
-        bypassOnDebug: true
+    //     bypassOnDebug: true
-      })
+    //   })
-      .end()
+    //   .end()
 
     // 生产环境
     config.when(process.env.NODE_ENV === 'production', config => {