mirror of
https://github.com/cool-team-official/cool-admin-vue.git
synced 2024-11-01 06:02:38 +08:00
模块结构调整完成
This commit is contained in:
icssoa
parent
5fc6bc1224
commit
453ef87983
@ -10,7 +10,7 @@
|
||||
"dependencies": {
|
||||
"axios": "^0.21.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-theme": "^0.0.3",
|
||||
"clipboard": "^2.0.7",
|
||||
|
||||
@ -42,7 +42,7 @@ export const app = store.get("__app__") || {
|
||||
|
||||
theme: {
|
||||
color: "", // 主题色
|
||||
url: "http://192.168.199.148:5000/black/index.css" // 主题样式地址
|
||||
url: "" // 主题样式地址
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import store from "@/store";
|
||||
import { iconfontUrl, app } from "@/config/env";
|
||||
import { createLink } from "../utils";
|
||||
import { colorPrimary } from "@/assets/css/common.scss";
|
||||
@ -18,9 +19,9 @@ if (iconfontUrl) {
|
||||
createLink(iconfontUrl);
|
||||
}
|
||||
|
||||
const requireAll = requireContext => requireContext.keys().map(requireContext);
|
||||
const req = require.context("@/icons/svg/", false, /\.svg$/);
|
||||
requireAll(req);
|
||||
|
||||
req.keys().map(req);
|
||||
|
||||
export function iconList() {
|
||||
return req
|
||||
@ -30,3 +31,27 @@ export function iconList() {
|
||||
.filter(e => e.includes("icon"))
|
||||
.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();
|
||||
};
|
||||
|
||||
@ -48,7 +48,10 @@ export default {
|
||||
|
||||
if (e.type == 0) {
|
||||
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">
|
||||
<icon-svg name={e.icon}></icon-svg>
|
||||
<span slot="title">{e.name}</span>
|
||||
|
||||
@ -52,10 +52,24 @@
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
&--vertical {
|
||||
.el-submenu {
|
||||
&__title {
|
||||
.cl-slider-menu__submenu {
|
||||
background-color: #fff;
|
||||
|
||||
&.el-menu {
|
||||
&--vertical {
|
||||
.el-submenu {
|
||||
&__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon-svg {
|
||||
font-size: 18px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -65,15 +79,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon-svg {
|
||||
font-size: 18px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,8 +5,8 @@ import views from "./views";
|
||||
import store from "./store";
|
||||
import service from "./service";
|
||||
import directives, { checkPerm } from "./directives";
|
||||
import { iconList } from "./common";
|
||||
import { iconList, resize } from "./common";
|
||||
import "./static/css/index.scss";
|
||||
|
||||
export { iconList, checkPerm };
|
||||
export { iconList, checkPerm, resize };
|
||||
export default { components, filters, pages, views, store, service, directives };
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
import { app } from "@/config/env";
|
||||
import { deepMerge, getBrowser } from "cl-admin/utils";
|
||||
import store from "store";
|
||||
import common from "@/assets/css/common.scss";
|
||||
|
||||
console.log(common);
|
||||
|
||||
export default {
|
||||
state: {
|
||||
|
||||
@ -158,7 +158,7 @@ export default {
|
||||
font-size: 12px;
|
||||
|
||||
span {
|
||||
background-color: #2f3447;
|
||||
background-color: $color-primary;
|
||||
color: #fff;
|
||||
border-radius: 3px;
|
||||
padding: 2px 5px;
|
||||
@ -190,7 +190,7 @@ export default {
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
background-color: #2f3447;
|
||||
background-color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -47,8 +47,7 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
urls:
|
||||
"https://cool-admin.cn.utools.club/uploads//20210226/7102eec0-7787-11eb-9231-515715ba55d0.jpg"
|
||||
urls: ""
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
import Theme from "./theme";
|
||||
|
||||
export default {
|
||||
Theme
|
||||
};
|
||||
@ -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>
|
||||
@ -1,3 +0,0 @@
|
||||
import components from "./components";
|
||||
|
||||
export default { components };
|
||||
@ -445,7 +445,7 @@ export default {
|
||||
// 上传
|
||||
this.$service.common
|
||||
.request({
|
||||
url: res._host || res.host,
|
||||
url: res.host,
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data"
|
||||
@ -478,10 +478,6 @@ export default {
|
||||
this.$service.common
|
||||
.upload()
|
||||
.then(res => {
|
||||
if (isDev) {
|
||||
res._host = "@/oss-upload";
|
||||
}
|
||||
|
||||
next(res);
|
||||
})
|
||||
.catch(reject);
|
||||
|
||||
@ -41,27 +41,15 @@ export default {
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapGetters(["menuCollapse", "app", "browser"]),
|
||||
...mapGetters(["menuCollapse", "app"]),
|
||||
|
||||
isKeepAlive() {
|
||||
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: {
|
||||
...mapMutations(["COLLAPSE_MENU", "SET_BROWSER"])
|
||||
...mapMutations(["COLLAPSE_MENU"])
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -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": {
|
||||
target: "https://show.cool-admin.com",
|
||||
changeOrigin: true,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user