JLNTV_IPD/vue-admin-beautiful
4
0
Fork 0
mirror of https://gitee.com/chu1204505056/vue-admin-beautiful.git synced 2025-05-25 21:19:14 +08:00
Code Issues Projects Releases Wiki Activity

🔥 大版本迭代：（之前精力过多的集中在了pro，忽略了开源用户的感受，抱歉）

Browse Source 
1.重构多标签页
2.优化菜单布局
3.主题配置代码全部开源，不再需要加群获取
4.husky变更为gitHooks
5.重构代码生成机
This commit is contained in:
chuzhixin 2020-09-30 20:51:11 +08:00
parent 71f66a94e1
commit bf0b679f8f
27 changed files with 79 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -137,7 +137,7 @@ module.exports = {
//是否开启主题配置按钮
themeBar: true,
//是否显示多标签页
tagsBar: true,
tabsBar: true,
//是否显示骨架屏
skeleton: false,
//配后端数据的接收方式application/json;charset=UTF-8或者application/x-www-form-urlencoded;charset=UTF-8
@ -235,14 +235,14 @@ $base-logo-height: 75px;
//顶部nav-bar的高度
$base-nav-bar-height: 60px;
//顶部多标签页tags-bar的高度
$base-tags-bar-height: 55px;
$base-tabs-bar-height: 55px;
//顶部多标签页tags-bar中每一个item的高度
$base-tag-item-height: 34px;
//菜单li标签的高度
$base-menu-item-height: 50px;
//app-main的高度
$base-app-main-height: calc(
100vh - #{$base-nav-bar-height} - #{$base-tags-bar-height} -
100vh - #{$base-nav-bar-height} - #{$base-tabs-bar-height} -
#{$base-padding} - #{$base-padding} - 55px - 30px
);
//纵向布局时左侧导航未折叠时的宽度

8
mock/controller/changeLog.js
View File

@ -98,7 +98,7 @@ const data = [
timestamp: "2020-05-16",
},
{
content: "又被人骂了 挺好的 让我下定决心重写了tagsBar",
content: "又被人骂了 挺好的 让我下定决心重写了tabsBar",
timestamp: "2020-05-20",
},
{
@ -122,7 +122,7 @@ const data = [
timestamp: "2020-06-19",
},
{
content: "彻底完成了tagsbar多标签页的重构",
content: "彻底完成了tabsBar多标签页的重构",
timestamp: "2020-06-22",
},
{
@ -186,6 +186,10 @@ const data = [
content: "完善路由后端渲染方案，弃用之前写法",
timestamp: "2020-09-30",
},
{
content: "大版本迭代，请关注github tag",
timestamp: "2020-09-30",
},
];
module.exports = [

19
package.json
View File

@ -30,14 +30,12 @@
"type": "git",
"url": "git+https://github.com/chuzhixin/vue-admin-beautiful.git"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"src/**/*.{js,vue}": [
"eslint --fix",
"*.{js,scss,vue}": [
"vue-cli-service lint",
"git add"
]
},
@ -47,7 +45,7 @@
"clipboard": "^2.0.6",
"codemirror": "^5.58.1",
"core-js": "^3.6.5",
"dayjs": "^1.9.0",
"dayjs": "^1.9.1",
"echarts": "^4.9.0",
"echarts-wordcloud": "^1.1.3",
"element-ui": "^2.13.2",
@ -72,12 +70,12 @@
"zx-count": "^0.3.7",
"zx-icon": "^1.1.9",
"zx-keel": "^0.9.4",
"zx-layouts": "^0.6.13",
"zx-layouts": "^0.6.14",
"zx-magnifie": "^0.4.0",
"zx-markdown-editor": "^0.0.2",
"zx-player": "^1.0.1",
"zx-quill": "^0.0.2",
"zx-templates": "^0.0.22",
"zx-templates": "^0.0.23",
"zx-verify": "^0.0.2"
},
"devDependencies": {
@ -94,9 +92,8 @@
"compression-webpack-plugin": "^6.0.2",
"eslint": "^7.10.0",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-vue": "^6.2.2",
"eslint-plugin-vue": "^7.0.0",
"filemanager-webpack-plugin": "^2.0.5",
"husky": "^4.3.0",
"image-webpack-loader": "^7.0.1",
"increase-memory-limit": "^1.0.7",
"lint-staged": "^10.4.0",

2
src/colorfulIcon/index.js
View File

@ -1,7 +1,7 @@
import Vue from "vue";
import { ColorfullIcon } from "@/layouts/components";
Vue.component("vab-colorful-icon", ColorfullIcon);
Vue.component("VabColorfulIcon", ColorfullIcon);
const req = require.context("./svg", false, /\.svg$/),
requireAll = (requireContext) => {
/*let a = requireContext.keys().map(requireContext);

4
src/components/VabImage/index.vue
View File

@ -41,10 +41,10 @@
mounted() {},
methods: {
clickBig() {
this.$emit("clickBig");
this.$emit("click-big");
},
clickSmall() {
this.$emit("clickSmall");
this.$emit("click-small");
},
},
};

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

@ -161,7 +161,7 @@
this.imgSuccessNum = this.imgSuccessNum + 1;
if (fileList.length === this.imgNum) {
setTimeout(() => {
this.$emit("fetchDatas");
this.$emit("fetch-datas");
this.$baseMessage(
`上传完成! 共上传${fileList.length}张图片`,
"success"

2
src/config/settings.js
View File

@ -59,7 +59,7 @@ module.exports = {
//是否开启主题配置按钮
themeBar: true,
//是否显示多标签页
tagsBar: true,
tabsBar: true,
//是否显示骨架屏
skeleton: false,
//配后端数据的接收方式application/json;charset=UTF-8或者application/x-www-form-urlencoded;charset=UTF-8

2
src/layouts/components/index.js
View File

@ -11,7 +11,7 @@ export { default as Logo } from "zx-layouts/Logo";
export { default as Avatar } from "zx-layouts/Avatar";
export { default as Ad } from "./Ad";
export { default as AppMain } from "zx-layouts/AppMain";
export { default as TagsBar } from "zx-layouts/TagsBar";
export { default as TabsBar } from "zx-layouts/TabsBar";
export { default as SideBar } from "zx-layouts/SideBar";
export { default as Breadcrumb } from "zx-layouts/Breadcrumb";
export { default as FullScreenBar } from "zx-layouts/FullScreenBar";

28
src/layouts/index.vue
View File

@ -5,17 +5,17 @@
class="layout-container-horizontal"
:class="{
fixed: header === 'fixed',
'no-tags-bar': tagsBar === 'false' || tagsBar === false,
'no-tabs-bar': tabsBar === 'false' || tabsBar === false,
}"
>
<div :class="header === 'fixed' ? 'fixed-header' : ''">
<top-bar></top-bar>
<div
v-if="tagsBar === 'true' || tagsBar === true"
:class="{ 'tag-view-show': tagsBar }"
v-if="tabsBar === 'true' || tabsBar === true"
:class="{ 'tag-view-show': tabsBar }"
>
<div class="vab-main">
<tags-bar></tags-bar>
<tabs-bar></tabs-bar>
</div>
</div>
</div>
@ -29,7 +29,7 @@
class="layout-container-vertical"
:class="{
fixed: header === 'fixed',
'no-tags-bar': tagsBar === 'false' || tagsBar === false,
'no-tabs-bar': tabsBar === 'false' || tabsBar === false,
}"
>
<div
@ -41,7 +41,7 @@
<div class="vab-main" :class="collapse ? 'is-collapse-main' : ''">
<div :class="header === 'fixed' ? 'fixed-header' : ''">
<nav-bar></nav-bar>
<tags-bar v-if="tagsBar === 'true' || tagsBar === true" />
<tabs-bar v-if="tabsBar === 'true' || tabsBar === true" />
</div>
<ad></ad>
<app-main></app-main>
@ -52,7 +52,7 @@
</template>
<script>
import { Ad, AppMain, NavBar, SideBar, TagsBar, TopBar } from "./components";
import { Ad, AppMain, NavBar, SideBar, TabsBar, TopBar } from "./components";
import { mapActions, mapGetters } from "vuex";
import { tokenName } from "@/config/settings";
export default {
@ -63,7 +63,7 @@
NavBar,
SideBar,
AppMain,
TagsBar,
TabsBar,
},
data() {
return { oldLayout: "" };
@ -71,7 +71,7 @@
computed: {
...mapGetters({
layout: "settings/layout",
tagsBar: "settings/tagsBar",
tabsBar: "settings/tabsBar",
collapse: "settings/collapse",
header: "settings/header",
device: "settings/device",
@ -170,10 +170,10 @@
position: relative;
&.fixed {
padding-top: calc(#{$base-top-bar-height} + #{$base-tags-bar-height});
padding-top: calc(#{$base-top-bar-height} + #{$base-tabs-bar-height});
}
&.fixed.no-tags-bar {
&.fixed.no-tabs-bar {
padding-top: $base-top-bar-height;
}
@ -226,10 +226,10 @@
}
&.fixed {
padding-top: calc(#{$base-nav-bar-height} + #{$base-tags-bar-height});
padding-top: calc(#{$base-nav-bar-height} + #{$base-tabs-bar-height});
}
&.fixed.no-tags-bar {
&.fixed.no-tabs-bar {
padding-top: $base-nav-bar-height;
}
@ -255,7 +255,7 @@
box-sizing: border-box;
}
.tags-bar-container {
.tabs-bar-container {
box-sizing: border-box;
}

2
src/plugins/vabIcon.js
View File

@ -1,4 +1,4 @@
import Vue from "vue";
import VabIcon from "zx-icon";
Vue.component("vab-icon", VabIcon);
Vue.component("VabIcon", VabIcon);

2
src/remixIcon/index.js
View File

@ -1,7 +1,7 @@
import Vue from "vue";
import { RemixIcon } from "@/layouts/components";
Vue.component("vab-remix-icon", RemixIcon);
Vue.component("VabRemixIcon", RemixIcon);
const req = require.context("./svg", false, /\.svg$/),
requireAll = (requireContext) => {
/*let a = requireContext.keys().map(requireContext);

14
src/store/modules/settings.js
View File

@ -5,11 +5,11 @@
import defaultSettings from "@/config/settings";
const { tagsBar, logo, layout, header, themeBar, skeleton } = defaultSettings;
const { tabsBar, logo, layout, header, themeBar, skeleton } = defaultSettings;
const theme =
JSON.parse(localStorage.getItem("vue-admin-beautiful-theme")) || "";
const state = {
tagsBar: theme.tagsBar || tagsBar,
tabsBar: theme.tabsBar || tabsBar,
logo,
collapse: false,
layout: theme.layout || layout,
@ -24,7 +24,7 @@ const getters = {
header: (state) => state.header,
layout: (state) => state.layout,
logo: (state) => state.logo,
tagsBar: (state) => state.tagsBar,
tabsBar: (state) => state.tabsBar,
themeBar: (state) => state.themeBar,
skeleton: (state) => state.skeleton,
};
@ -35,8 +35,8 @@ const mutations = {
changeHeader: (state, header) => {
if (header) state.header = header;
},
changeTagsBar: (state, tagsBar) => {
if (tagsBar) state.tagsBar = tagsBar;
changeTabsBar: (state, tabsBar) => {
if (tabsBar) state.tabsBar = tabsBar;
},
changeCollapse: (state) => {
state.collapse = !state.collapse;
@ -58,8 +58,8 @@ const actions = {
changeHeader({ commit }, header) {
commit("changeHeader", header);
},
changeTagsBar({ commit }, tagsBar) {
commit("changeTagsBar", tagsBar);
changeTabsBar({ commit }, tabsBar) {
commit("changeTabsBar", tabsBar);
},
changeCollapse({ commit }) {
commit("changeCollapse");

30
src/store/modules/tagsBar.js → src/store/modules/tabsBar.js
View File

@ -1,6 +1,6 @@
/**
* @copyright chuzhixin 1204505056@qq.com
* @description tagsBar多标签页逻辑，前期借鉴了很多开源项目发现都有个共同的特点很繁琐并不符合框架设计的初衷，后来在github用户cyea的启发下完成了重构，请勿修改
* @description tabsBar多标签页逻辑，前期借鉴了很多开源项目发现都有个共同的特点很繁琐并不符合框架设计的初衷，后来在github用户cyea的启发下完成了重构，请勿修改
*/
const state = {
@ -11,36 +11,34 @@ const getters = {
};
const mutations = {
addVisitedRoute(state, route) {
if (state.visitedRoutes.some((item) => item.path === route.path)) return;
let target = state.visitedRoutes.find((item) => item.path === route.path);
if (target) {
if (route.fullPath !== target.fullPath) Object.assign(target, route);
return;
}
state.visitedRoutes.push(Object.assign({}, route));
},
delVisitedRoute(state, route) {
state.visitedRoutes.forEach((item, index) => {
if (item.path === route.path) {
state.visitedRoutes.splice(index, 1);
}
if (item.path === route.path) state.visitedRoutes.splice(index, 1);
});
},
delOthersVisitedRoute(state, route) {
state.visitedRoutes = state.visitedRoutes.filter((item) => {
return item.meta.affix || item.path === route.path;
});
state.visitedRoutes = state.visitedRoutes.filter(
(item) => item.meta.affix || item.path === route.path
);
},
delLeftVisitedRoute(state, route) {
let index = state.visitedRoutes.length;
state.visitedRoutes = state.visitedRoutes.filter((item) => {
if (item.name === route.name) {
index = state.visitedRoutes.indexOf(item);
}
if (item.name === route.name) index = state.visitedRoutes.indexOf(item);
return item.meta.affix || index <= state.visitedRoutes.indexOf(item);
});
},
delRightVisitedRoute(state, route) {
let index = state.visitedRoutes.length;
state.visitedRoutes = state.visitedRoutes.filter((item) => {
if (item.name === route.name) {
index = state.visitedRoutes.indexOf(item);
}
if (item.name === route.name) index = state.visitedRoutes.indexOf(item);
return item.meta.affix || index >= state.visitedRoutes.indexOf(item);
});
},
@ -49,9 +47,7 @@ const mutations = {
},
updateVisitedRoute(state, route) {
state.visitedRoutes.forEach((item) => {
if (item.path === route.path) {
item = Object.assign(item, route);
}
if (item.path === route.path) item = Object.assign(item, route);
});
},
};

2
src/styles/themes/dark.scss
View File

@ -102,7 +102,7 @@
}
}
.tags-bar-container {
.tabs-bar-container {
background: $base-color-white;
border-top: 1px solid #f6f6f6;

2
src/styles/themes/glory.scss
View File

@ -76,7 +76,7 @@
}
}
.tags-bar-container {
.tabs-bar-container {
background: $base-color-white;
border-top: 1px solid #f6f6f6;

2
src/styles/themes/green.scss
View File

@ -76,7 +76,7 @@
}
}
.tags-bar-container {
.tabs-bar-container {
background: $base-color-white;
border-top: 1px solid #f6f6f6;

2
src/styles/themes/ocean.scss
View File

@ -76,7 +76,7 @@
}
}
.tags-bar-container {
.tabs-bar-container {
background: $base-color-white;
border-top: 1px solid #f6f6f6;

4
src/styles/variables.scss
View File

@ -49,14 +49,14 @@ $base-logo-height: 75px;
//顶部nav-bar的高度
$base-nav-bar-height: 60px;
//顶部多标签页tags-bar的高度
$base-tags-bar-height: 55px;
$base-tabs-bar-height: 55px;
//顶部多标签页tags-bar中每一个item的高度
$base-tag-item-height: 34px;
//菜单li标签的高度
$base-menu-item-height: 50px;
//app-main的高度
$base-app-main-height: calc(
100vh - #{$base-nav-bar-height} - #{$base-tags-bar-height} - #{$base-padding} -
100vh - #{$base-nav-bar-height} - #{$base-tabs-bar-height} - #{$base-padding} -
#{$base-padding} - 55px - 30px
);
//纵向布局时左侧导航未折叠时的宽度

2
src/views/401.vue
View File

@ -68,7 +68,7 @@
this.jumpTime--;
} else {
this.$router.push({ path: "/" });
this.$store.dispatch("tagsBar/delOthersRoutes", {
this.$store.dispatch("tabsBar/delOthersRoutes", {
path: "/",
});
clearInterval(this.timer);

2
src/views/404.vue
View File

@ -68,7 +68,7 @@
this.jumpTime--;
} else {
this.$router.push({ path: "/" });
this.$store.dispatch("tagsBar/delOthersRoutes", {
this.$store.dispatch("tabsBar/delOthersRoutes", {
path: "/",
});
clearInterval(this.timer);

2
src/views/personnelManagement/menuManagement/components/MenuManagementEdit.vue
View File

@ -59,7 +59,7 @@
if (valid) {
const { msg } = await doEdit(this.form);
this.$baseMessage(msg, "success");
this.$emit("fetchData");
this.$emit("fetch-data");
this.close();
} else {
return false;

4
src/views/personnelManagement/menuManagement/index.vue
View File

@ -106,7 +106,7 @@
label="操作"
width="200"
>
<template v-slot="scope">
<template #default="scope">
<el-button type="text" @click="handleEdit(scope.row)">
编辑
</el-button>
@ -119,7 +119,7 @@
</el-col>
</el-row>
<edit ref="edit" @fetchData="fetchData"></edit>
<edit ref="edit" @fetch-data="fetchData"></edit>
</div>
</template>

2
src/views/personnelManagement/roleManagement/components/RoleManagementEdit.vue
View File

@ -57,7 +57,7 @@
if (valid) {
const { msg } = await doEdit(this.form);
this.$baseMessage(msg, "success");
this.$emit("fetchData");
this.$emit("fetch-data");
this.close();
} else {
return false;

4
src/views/personnelManagement/roleManagement/index.vue
View File

@ -53,7 +53,7 @@
label="操作"
width="200"
>
<template v-slot="scope">
<template #default="scope">
<el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
<el-button type="text" @click="handleDelete(scope.row)">
删除
@ -70,7 +70,7 @@
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
></el-pagination>
<edit ref="edit" @fetchData="fetchData"></edit>
<edit ref="edit" @fetch-data="fetchData"></edit>
</div>
</template>

2
src/views/personnelManagement/userManagement/components/UserManagementEdit.vue
View File

@ -83,7 +83,7 @@
if (valid) {
const { msg } = await doEdit(this.form);
this.$baseMessage(msg, "success");
this.$emit("fetchData");
this.$emit("fetch-data");
this.close();
} else {
return false;

6
src/views/personnelManagement/userManagement/index.vue
View File

@ -51,7 +51,7 @@
></el-table-column>
<el-table-column show-overflow-tooltip label="权限">
<template v-slot="{ row }">
<template #default="{ row }">
<el-tag v-for="(item, index) in row.permissions" :key="index">
{{ item }}
</el-tag>
@ -69,7 +69,7 @@
label="操作"
width="200"
>
<template v-slot="scope">
<template #default="scope">
<el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
<el-button type="text" @click="handleDelete(scope.row)">
删除
@ -86,7 +86,7 @@
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
></el-pagination>
<edit ref="edit" @fetchData="fetchData"></edit>
<edit ref="edit" @fetch-data="fetchData"></edit>
</div>
</template>

4
src/views/vab/table/components/TableEdit.vue
View File

@ -54,7 +54,7 @@
this.$refs["form"].resetFields();
this.form = this.$options.data().form;
this.dialogFormVisible = false;
this.$emit("fetchData");
this.$emit("fetch-data");
},
save() {
this.$refs["form"].validate(async (valid) => {
@ -63,7 +63,7 @@
this.$baseMessage(msg, "success");
this.$refs["form"].resetFields();
this.dialogFormVisible = false;
this.$emit("fetchData");
this.$emit("fetch-data");
this.form = this.$options.data().form;
} else {
return false;