mirroring/cool-admin-vue
1
0
Fork 0
mirror of https://github.com/cool-team-official/cool-admin-vue.git synced 2024-11-01 14:10:27 +08:00
Code Issues Projects Releases Wiki Activity

模块结构调整完成

Browse Source
This commit is contained in:
icssoa 2021-03-10 17:47:42 +08:00
parent 5fc6bc1224
commit 453ef87983
15 changed files with 59 additions and 364 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -10,7 +10,7 @@
"dependencies": { "dependencies": {
"axios": "^0.21.1", "axios": "^0.21.1",
"cl-admin": "^1.3.1", "cl-admin": "^1.3.1",
"cl-admin-crud": "^1.4.0", "cl-admin-crud": "^1.4.4",
"cl-admin-export": "^1.0.5", "cl-admin-export": "^1.0.5",
"cl-admin-theme": "^0.0.3", "cl-admin-theme": "^0.0.3",
"clipboard": "^2.0.7", "clipboard": "^2.0.7",

2
src/config/env.js
View File

@ -42,7 +42,7 @@ export const app = store.get("__app__") || {
theme: { theme: {
color: "", // 主题色 color: "", // 主题色
url: "http://192.168.199.148:5000/black/index.css" // 主题样式地址 url: "" // 主题样式地址
} }
}; };

29
src/cool/modules/base/common/index.js
View File

@ -1,3 +1,4 @@
import store from "@/store";
import { iconfontUrl, app } from "@/config/env"; import { iconfontUrl, app } from "@/config/env";
import { createLink } from "../utils"; import { createLink } from "../utils";
import { colorPrimary } from "@/assets/css/common.scss"; import { colorPrimary } from "@/assets/css/common.scss";
@ -18,9 +19,9 @@ if (iconfontUrl) {
createLink(iconfontUrl); createLink(iconfontUrl);
} }
const requireAll = requireContext => requireContext.keys().map(requireContext);
const req = require.context("@/icons/svg/", false, /\.svg$/); const req = require.context("@/icons/svg/", false, /\.svg$/);
requireAll(req);
req.keys().map(req);
export function iconList() { export function iconList() {
return req return req
@ -30,3 +31,27 @@ export function iconList() {
.filter(e => e.includes("icon")) .filter(e => e.includes("icon"))
.sort(); .sort();
} }
export const resize = () => {
if (document.body.clientWidth < 1000) {
store.commit("COLLAPSE_MENU", true);
store.commit("UPDATE_APP", {
conf: {
showAMenu: false
}
});
}
store.commit("SET_BROWSER");
};
window.onload = () => {
const observer = new MutationObserver(resize);
observer.observe(document.getElementById("app"), {
childList: true,
subtree: true
});
window.addEventListener("resize", resize);
resize();
};

5
src/cool/modules/base/components/menu/slider/index.js
View File

@ -48,7 +48,10 @@ export default {
if (e.type == 0) { if (e.type == 0) {
html = ( html = (
<el-submenu index={String(e.id)} key={e.id}> <el-submenu
popper-class="cl-slider-menu__submenu"
index={String(e.id)}
key={e.id}>
<template slot="title"> <template slot="title">
<icon-svg name={e.icon}></icon-svg> <icon-svg name={e.icon}></icon-svg>
<span slot="title">{e.name}</span> <span slot="title">{e.name}</span>

6
src/cool/modules/base/components/menu/slider/index.scss
View File

@ -52,7 +52,10 @@
} }
} }
.el-menu { .cl-slider-menu__submenu {
background-color: #fff;
&.el-menu {
&--vertical { &--vertical {
.el-submenu { .el-submenu {
&__title { &__title {
@ -77,3 +80,4 @@
} }
} }
} }
}

4
src/cool/modules/base/index.js
View File

@ -5,8 +5,8 @@ import views from "./views";
import store from "./store"; import store from "./store";
import service from "./service"; import service from "./service";
import directives, { checkPerm } from "./directives"; import directives, { checkPerm } from "./directives";
import { iconList } from "./common"; import { iconList, resize } from "./common";
import "./static/css/index.scss"; import "./static/css/index.scss";
export { iconList, checkPerm }; export { iconList, checkPerm, resize };
export default { components, filters, pages, views, store, service, directives }; export default { components, filters, pages, views, store, service, directives };

3
src/cool/modules/base/store/app.js
View File

@ -1,9 +1,6 @@
import { app } from "@/config/env"; import { app } from "@/config/env";
import { deepMerge, getBrowser } from "cl-admin/utils"; import { deepMerge, getBrowser } from "cl-admin/utils";
import store from "store"; import store from "store";
import common from "@/assets/css/common.scss";
console.log(common);
export default { export default {
state: { state: {

4
src/cool/modules/demo/views/demo.vue
View File

@ -158,7 +158,7 @@ export default {
font-size: 12px; font-size: 12px;
span { span {
background-color: #2f3447; background-color: $color-primary;
color: #fff; color: #fff;
border-radius: 3px; border-radius: 3px;
padding: 2px 5px; padding: 2px 5px;
@ -190,7 +190,7 @@ export default {
position: absolute; position: absolute;
bottom: -2px; bottom: -2px;
left: 0; left: 0;
background-color: #2f3447; background-color: $color-primary;
} }
} }
} }

3
src/cool/modules/demo/views/upload.vue
View File

@ -47,8 +47,7 @@
export default { export default {
data() { data() {
return { return {
urls: urls: ""
"https://cool-admin.cn.utools.club/uploads//20210226/7102eec0-7787-11eb-9231-515715ba55d0.jpg"
}; };
}, },

5
src/cool/modules/theme/components/index.js
View File

@ -1,5 +0,0 @@
import Theme from "./theme";
export default {
Theme
};

285
src/cool/modules/theme/components/theme.vue
View File

@ -1,285 +0,0 @@
<template>
<div class="cl-theme">
<li @click="open">
<icon-svg :size="18" name="icon-theme"></icon-svg>
</li>
<!-- 系统设置 -->
<el-drawer title="系统设置" :visible.sync="drawer.visible" size="300px">
<div class="cl-theme__color is-card">
<p>主题</p>
<ul>
<el-tooltip
v-for="(item, name) in thems"
:key="name"
:content="item.label"
placement="top"
>
<li
:style="{
backgroundColor: item.color
}"
@click="setTheme(item)"
>
<i class="el-icon-check" v-if="item.color == app.theme.color"></i>
</li>
</el-tooltip>
</ul>
</div>
<div class="cl-theme__switch is-card">
<p>内容区域</p>
<ul>
<li>
<span>显示一级菜单栏</span>
<el-switch size="mini" v-model="app.conf.showAMenu"></el-switch>
</li>
<li>
<span>显示路由导航栏</span>
<el-switch size="mini" v-model="app.conf.showRouteNav"></el-switch>
</li>
<li>
<span>显示页面进程栏</span>
<el-switch size="mini" v-model="app.conf.showProcess"></el-switch>
</li>
</ul>
</div>
<div class="cl-theme__tips">
<el-alert
type="warning"
:closable="false"
show-icon
title="手动修改配置文件可设置为默认主题、布局。"
></el-alert>
<el-button
round
type="primary"
size="small"
style="width: 100%"
:disabled="!app.theme.url"
@click="openDesc"
>修改说明</el-button
>
</div>
</el-drawer>
<!-- 修改说明 -->
<cl-dialog
:visible.sync="desc.visible"
title="修改说明"
width="800px"
:props="{
'append-to-body': true
}"
>
<ul class="cl-theme__desc">
<li>
<p class="cl-theme__desc-label">修改主题色：</p>
<cl-codemirror v-model="desc.color"></cl-codemirror>
</li>
<li>
<p class="cl-theme__desc-label">修改应用配置：</p>
<cl-codemirror v-model="desc.conf"></cl-codemirror>
</li>
</ul>
</cl-dialog>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import { isDev } from "@/config/env";
export default {
name: "cl-theme",
data() {
return {
drawer: {
visible: false
},
desc: {
visible: false,
color: "",
conf: ""
},
thems: [
{
label: "钴蓝（默认）",
name: "blue",
color: "#4165d7"
},
{
label: "极黑",
name: "black",
color: "#2f3447"
},
{
label: "果绿色",
name: "green",
color: "#51C21A"
},
{
label: "酱紫色",
name: "purple",
color: "#d0378d"
}
],
isDev
};
},
computed: {
...mapGetters(["app", "modules"])
},
watch: {
app: {
deep: true,
handler() {
this.$store.commit("UPDATE_APP", this.app);
}
}
},
methods: {
open() {
this.drawer.visible = true;
},
close() {
this.drawer.visible = false;
},
// 设置主题
setTheme({ name, color, label }) {
this.$message.success(`切换主题：${label}`);
const theme = document.getElementById("theme-style");
const style = theme || document.createElement("link");
style.href = `${this.modules.theme.options.sourceUrl || "/theme/"}${name}.css`;
if (!theme) {
style.type = "text/css";
style.rel = "stylesheet";
style.id = "theme-style";
document
.getElementsByTagName("head")
.item(0)
.appendChild(style);
}
// 设置主题色和路径
this.app.theme.color = color;
this.app.theme.url = style.href;
// 设置 css 变量
document.getElementsByTagName("body")[0].style.setProperty("--color-primary", color);
},
// 打开修改说明
openDesc() {
this.desc.visible = true;
this.desc.color = `
// src/assets/css/common.scss
$primary: ${this.app.theme.color};
`;
this.desc.conf = `
// src/config/env.js
export const app = {
conf: ${JSON.stringify(this.app.conf)},
thems: {
url: "${this.app.theme.url}"
}
}
`;
}
}
};
</script>
<style lang="scss" scoped>
.cl-theme {
.is-card {
padding: 20px 0;
margin: 0 20px 20px 20px;
border-bottom: 1px solid #f7f7f7;
& > p {
font-size: 15px;
font-weight: bold;
margin-bottom: 10px;
}
}
&__switch {
ul {
width: 100%;
li {
display: flex;
justify-content: space-between;
align-items: center;
height: 40px;
list-style: none;
span {
font-size: 13px;
}
}
}
}
&__color {
ul {
display: flex;
margin-top: 20px;
li {
list-style: none;
height: 20px;
width: 20px;
border-radius: 3px;
margin-right: 10px;
text-align: center;
color: #fff;
line-height: 20px;
&:hover {
opacity: 0.7;
}
}
}
}
&__tips {
padding: 10px 20px;
.el-button {
margin-top: 20px;
}
}
&__desc {
padding: 10px;
&-label {
margin-bottom: 10px;
}
li {
list-style: none;
margin-bottom: 20px;
}
}
}
</style>

3
src/cool/modules/theme/index.js
View File

@ -1,3 +0,0 @@
import components from "./components";
export default { components };

6
src/cool/modules/upload/components/index.vue
View File

@ -445,7 +445,7 @@ export default {
// 上传 // 上传
this.$service.common this.$service.common
.request({ .request({
url: res._host || res.host, url: res.host,
method: "POST", method: "POST",
headers: { headers: {
"Content-Type": "multipart/form-data" "Content-Type": "multipart/form-data"
@ -478,10 +478,6 @@ export default {
this.$service.common this.$service.common
.upload() .upload()
.then(res => { .then(res => {
if (isDev) {
res._host = "@/oss-upload";
}
next(res); next(res);
}) })
.catch(reject); .catch(reject);

16
src/pages/layout/index.vue
View File

@ -41,27 +41,15 @@ export default {
}, },
computed: { computed: {
...mapGetters(["menuCollapse", "app", "browser"]), ...mapGetters(["menuCollapse", "app"]),
isKeepAlive() { isKeepAlive() {
return isEmpty(this.$route.meta.keepAlive) ? true : this.$route.meta.keepAlive; return isEmpty(this.$route.meta.keepAlive) ? true : this.$route.meta.keepAlive;
} }
}, },
created() {
const resize = () => {
if (document.body.clientWidth < 1000) {
this.COLLAPSE_MENU(true);
}
this.SET_BROWSER();
};
window.addEventListener("resize", resize);
resize();
},
methods: { methods: {
...mapMutations(["COLLAPSE_MENU", "SET_BROWSER"]) ...mapMutations(["COLLAPSE_MENU"])
} }
}; };
</script> </script>

24
vue.config.js
View File

@ -12,30 +12,6 @@ const PROXY_LIST = {
} }
}, },
"/ap": {
target: "https://admin.cool-js.cool",
changeOrigin: true,
pathRewrite: {
"^/ap": ""
}
},
"/fz": {
target: "http://xfz520231.utools.club",
changeOrigin: true,
pathRewrite: {
"^/fz": ""
}
},
"/oss-upload": {
target: "https://cool-admin-pro.oss-cn-shanghai.aliyuncs.com",
changeOrigin: true,
pathRewrite: {
"^/oss-upload": ""
}
},
"/pro": { "/pro": {
target: "https://show.cool-admin.com", target: "https://show.cool-admin.com",
changeOrigin: true, changeOrigin: true,