kingecg
/
gohttpdUi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

git hooks test

This commit is contained in:
chenkl 2021-01-07 08:50:19 +08:00
parent 5bfe4d236f
commit 216be1cbc5
25 changed files with 800 additions and 1488 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
README.md
View File

@ -1,24 +1,135 @@
# demo
## 介绍
## Project setup
```
yarn install
[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)的写法和优点。内置了动态路由，权限验证，典型的业务模型，丰富的功能组件，并且提供了多页配置，开箱即用，可以用来作为项目的启动模版。它可以帮助你快速搭建企业级中后台产品原型，也可以作为一个示例，用于学习。
::: 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
See [Configuration Reference](https://cli.vuejs.org/config/).
| [<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 |
| --------- | --------- | --------- |
| last 2 versions | last 2 versions | last 2 versions |

56
commitlint.config.js Normal file
View File

@ -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'
]
]
}
}

1
mock/index.ts
View File

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

19
package.json
View File

@ -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"
}
}
}

7
src/assets/icons/index.ts
View File

@ -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)
}

BIN
src/assets/img/avatar.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.2 KiB

BIN
src/assets/img/avatar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

BIN
src/assets/img/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
src/assets/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.7 KiB

16
src/components/Backtop/index.vue Normal file
View File

@ -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>

2
src/components/UserInfo/index.vue
View File

@ -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>

4
src/components/index.ts
View File

@ -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)
}

2
src/libs/element.config.ts
View File

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

2
src/libs/types.d.ts vendored
View File

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

10
src/pages/index/layout/modules/Classic.vue
View File

@ -64,11 +64,7 @@
<setting />
<!-- setting -->
<el-backtop
v-if="showBackTop"
target=".main__wrap--content .el-scrollbar__wrap"
:bottom="100"
/>
<backtop v-if="showBackTop" />
</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)

10
src/pages/index/layout/modules/LeftTop.vue
View File

@ -85,11 +85,7 @@
<setting />
<!-- setting -->
<el-backtop
v-if="showBackTop"
target=".main__wrap--content .el-scrollbar__wrap"
:bottom="100"
/>
<backtop v-if="showBackTop" />
</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)

10
src/pages/index/layout/modules/Top.vue
View File

@ -72,11 +72,7 @@
<setting />
<!-- setting -->
<el-backtop
v-if="showBackTop"
target=".main__wrap--content .el-scrollbar__wrap"
:bottom="100"
/>
<backtop v-if="showBackTop" />
</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)

4
src/pages/index/main.ts
View File

@ -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) // 注册全局自定义指令

2
src/pages/index/router/index.ts
View File

@ -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' }
}
]

3
src/pages/index/views/table-demo/test/index.ts
View File

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

18
src/pages/index/views/table-demo/test/index.vue
View File

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

181
src/pages/index/views/table-demo/test/table.vue
View File

@ -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>

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

@ -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>
)
}
}
})

16
vue.config.js
View File

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

1722
yarn.lock
View File

File diff suppressed because it is too large Load Diff