正在加载菜单...
+
+
{{ app.info.name }}
+
+
正在加载菜单...
+
初次加载资源可能需要较多时间 请耐心等待
-
@@ -26,14 +26,3 @@ const { app } = useBaseStore();
-
-
diff --git a/src/assets/css/common.scss b/src/assets/css/common.scss
deleted file mode 100644
index 4e1098c..0000000
--- a/src/assets/css/common.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-$primary: #4165d7;
-
-$color-primary: var(--color-primary, $primary);
-$color-success: #67c23a;
-$color-danger: #f56c6c;
-$color-info: #909399;
-$color-warning: #e6a23c;
-
-:export {
- colorPrimary: $primary;
- colorSuccess: $color-success;
- colorDanger: $color-danger;
- colorInfo: $color-info;
- colorWarning: $color-warning;
-}
diff --git a/src/assets/css/element.scss b/src/assets/css/element.scss
deleted file mode 100644
index 6cea1c0..0000000
--- a/src/assets/css/element.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-$color-primary: #4165d7;
-$color-success: #67c23a;
-$color-danger: #f56c6c;
-$color-info: #909399;
-$color-warning: #e6a23c;
-
-$--colors: (
- "primary": (
- "base": $color-primary
- ),
- "success": (
- "base": $color-success
- ),
- "warning": (
- "base": $color-success
- ),
- "danger": (
- "base": $color-danger
- ),
- "info": (
- "base": $color-info
- )
-);
-
-@forward "element-plus/theme-chalk/src/common/var.scss" with (
- $colors: $--colors
-);
-
-:export {
- colorPrimary: $color-primary;
- colorSuccess: $color-success;
- colorDanger: $color-danger;
- colorInfo: $color-info;
- colorWarning: $color-warning;
-}
diff --git a/src/assets/css/index.scss b/src/assets/css/index.scss
index 1619837..e44a756 100644
--- a/src/assets/css/index.scss
+++ b/src/assets/css/index.scss
@@ -24,6 +24,10 @@
overflow: hidden;
}
+:root {
+ --view-bg-color: #f7f7f7;
+}
+
a {
text-decoration: none;
}
diff --git a/src/cool/bootstrap.ts b/src/cool/bootstrap.ts
index 14631d9..3b20785 100644
--- a/src/cool/bootstrap.ts
+++ b/src/cool/bootstrap.ts
@@ -7,6 +7,7 @@ import mitt from "mitt";
import VueECharts from "vue-echarts";
import ElementPlus from "element-plus";
import "element-plus/theme-chalk/src/index.scss";
+import "uno.css";
export async function bootstrap(Vue: App) {
// 缓存
diff --git a/src/cool/module/index.ts b/src/cool/module/index.ts
index 06c27ff..8c0c3ca 100644
--- a/src/cool/module/index.ts
+++ b/src/cool/module/index.ts
@@ -15,10 +15,6 @@ function main() {
// 模块名
const [, , , name, action] = i.split("/");
- if (name == "index.ts") {
- continue;
- }
-
// 文件内容
let value: any = null;
@@ -43,6 +39,11 @@ function main() {
d.options = value || {};
}
+ // 模块入口
+ if (action == "index.ts") {
+ d.value = value || {};
+ }
+
// 其他功能
switch (action) {
case "service":
diff --git a/src/modules/base/common/resize.ts b/src/modules/base/common/resize.ts
index 2095b2b..fb865a3 100644
--- a/src/modules/base/common/resize.ts
+++ b/src/modules/base/common/resize.ts
@@ -1,3 +1,4 @@
+import { useEventListener } from "@vueuse/core";
import { useBaseStore } from "../store";
function resize() {
@@ -7,6 +8,6 @@ function resize() {
}
window.onload = function () {
- window.addEventListener("resize", resize);
+ useEventListener(window, "resize", resize);
resize();
};
diff --git a/src/modules/base/components/avatar/index.vue b/src/modules/base/components/avatar/index.vue
index d71c203..d51ed87 100644
--- a/src/modules/base/components/avatar/index.vue
+++ b/src/modules/base/components/avatar/index.vue
@@ -11,7 +11,7 @@
-
-
diff --git a/src/modules/base/pages/layout/components/process.vue b/src/modules/base/pages/layout/components/process.vue
index f198ab6..77477e6 100644
--- a/src/modules/base/pages/layout/components/process.vue
+++ b/src/modules/base/pages/layout/components/process.vue
@@ -204,7 +204,7 @@ watch(
&:hover {
color: #fff;
- background-color: $color-primary;
+ background-color: var(--color-primary);
}
}
@@ -221,7 +221,7 @@ watch(
&.active {
span {
- color: $color-primary;
+ color: var(--color-primary);
}
i {
@@ -230,7 +230,7 @@ watch(
}
&:before {
- background-color: $color-primary;
+ background-color: var(--color-primary);
}
}
}
diff --git a/src/modules/base/pages/layout/components/slider.vue b/src/modules/base/pages/layout/components/slider.vue
index 1bea424..cc6aca3 100644
--- a/src/modules/base/pages/layout/components/slider.vue
+++ b/src/modules/base/pages/layout/components/slider.vue
@@ -102,7 +102,9 @@ export default defineComponent({
return (
- {e.name}
+
+ {e.name}
+
);
}
@@ -153,7 +155,7 @@ export default defineComponent({
.app-slider {
height: 100%;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
- background-color: #2f3447;
+ background-color: var(--menu-bg-color);
&__logo {
display: flex;
@@ -209,10 +211,11 @@ export default defineComponent({
&-item {
&.is-active,
&:hover {
- background-color: $color-primary !important;
+ background-color: var(--color-primary) !important;
.icon-svg,
span {
+ // color: var(--menu-font-color);
color: #fff;
}
}
@@ -221,7 +224,7 @@ export default defineComponent({
.el-sub-menu__title,
&-item,
&__title {
- color: #eee;
+ color: var(--menu-font-color);
letter-spacing: 0.5px;
height: 50px;
line-height: 50px;
diff --git a/src/modules/base/pages/layout/components/topbar.vue b/src/modules/base/pages/layout/components/topbar.vue
index dfbfa95..165d029 100644
--- a/src/modules/base/pages/layout/components/topbar.vue
+++ b/src/modules/base/pages/layout/components/topbar.vue
@@ -16,7 +16,9 @@
-
+
diff --git a/src/modules/base/pages/layout/index.vue b/src/modules/base/pages/layout/index.vue
index a3cf360..b366445 100644
--- a/src/modules/base/pages/layout/index.vue
+++ b/src/modules/base/pages/layout/index.vue
@@ -27,7 +27,7 @@ const { app } = useBaseStore();
diff --git a/src/modules/theme/config.ts b/src/modules/theme/config.ts
new file mode 100644
index 0000000..83b12ad
--- /dev/null
+++ b/src/modules/theme/config.ts
@@ -0,0 +1,11 @@
+export default {
+ name: "blue"
+ // color: "",
+ // rules: {
+ // "--view-bg-color": "#f7f7f7",
+ // "--menu-bg-color": "#2f3447",
+ // "--menu-font-color": "#ffffff",
+ // "--topbar-bg-color": "#ffffff",
+ // "--topbar-font-color": "#000000"
+ // }
+};
diff --git a/src/modules/theme/index.ts b/src/modules/theme/index.ts
new file mode 100644
index 0000000..bce4543
--- /dev/null
+++ b/src/modules/theme/index.ts
@@ -0,0 +1,13 @@
+import store from "store";
+import { App } from "vue";
+import { setTheme } from "./utils";
+
+export default {
+ install(_: App, options: any) {
+ const theme = store.get("theme") || options;
+
+ if (theme) {
+ setTheme(theme);
+ }
+ }
+};
diff --git a/src/modules/theme/utils/index.ts b/src/modules/theme/utils/index.ts
new file mode 100644
index 0000000..81fb77c
--- /dev/null
+++ b/src/modules/theme/utils/index.ts
@@ -0,0 +1,116 @@
+import store from "store";
+
+function mix(color1: string, color2: string, weight: number) {
+ weight = Math.max(Math.min(Number(weight), 1), 0);
+ const r1 = parseInt(color1.substring(1, 3), 16);
+ const g1 = parseInt(color1.substring(3, 5), 16);
+ const b1 = parseInt(color1.substring(5, 7), 16);
+ const r2 = parseInt(color2.substring(1, 3), 16);
+ const g2 = parseInt(color2.substring(3, 5), 16);
+ const b2 = parseInt(color2.substring(5, 7), 16);
+ let r = Math.round(r1 * (1 - weight) + r2 * weight).toString(16);
+ let g = Math.round(g1 * (1 - weight) + g2 * weight).toString(16);
+ let b = Math.round(b1 * (1 - weight) + b2 * weight).toString(16);
+ r = ("0" + (r || 0).toString(16)).slice(-2);
+ g = ("0" + (g || 0).toString(16)).slice(-2);
+ b = ("0" + (b || 0).toString(16)).slice(-2);
+ return "#" + r + g + b;
+}
+
+export const themes = [
+ {
+ label: "钴蓝",
+ name: "blue",
+ color: "#4165d7",
+ rules: {
+ "--menu-bg-color": "#2f3447",
+ "--menu-font-color": "#ffffff"
+ }
+ },
+ {
+ label: "极黑",
+ name: "black",
+ color: "#2f3447"
+ },
+ {
+ label: "果绿",
+ name: "green",
+ color: "#51C21A"
+ },
+ {
+ label: "酱紫",
+ name: "purple",
+ color: "#d0378d",
+ rules: {
+ "--view-bg-color": "#f7f7f7",
+ "--menu-bg-color": "#ffffff",
+ "--menu-font-color": "#000000"
+ }
+ }
+];
+
+declare interface Options {
+ color?: string;
+ name?: string;
+ rules?: any;
+}
+
+export function setTheme({ color, name, rules }: Options) {
+ // 主题配置
+ const theme = store.get("theme") || {};
+
+ // 变量前缀
+ const pre = "--el-color-primary";
+
+ // 白色混合色
+ const mixWhite = "#ffffff";
+
+ // 黑色混合色
+ const mixBlack = "#000000";
+
+ // 元素
+ const el = document.documentElement;
+
+ // 主题
+ if (name) {
+ const item = themes.find((e) => e.name == name);
+
+ if (item) {
+ theme.name = name;
+ color = item.color;
+ rules = item.rules;
+
+ switch (name) {
+ case "blue":
+ break;
+ case "black":
+ break;
+ }
+ }
+ }
+
+ // 设置主色
+ if (color) {
+ el.style.setProperty(pre, color);
+ el.style.setProperty("--color-primary", color);
+
+ // 设置辅色
+ for (let i = 1; i < 10; i += 1) {
+ el.style.setProperty(`${pre}-light-${i}`, mix(color, mixWhite, i * 0.1));
+ el.style.setProperty(`${pre}-dark-${i}`, mix(color, mixBlack, i * 0.1));
+ }
+
+ // 缓存
+ theme.color = color;
+ }
+
+ if (rules) {
+ for (const i in rules) {
+ el.style.setProperty(i, rules[i]);
+ }
+ }
+
+ console.log(theme);
+
+ store.set("theme", theme);
+}
diff --git a/src/modules/upload/components/index.vue b/src/modules/upload/components/index.vue
index b9794d7..d3b0fd9 100644
--- a/src/modules/upload/components/index.vue
+++ b/src/modules/upload/components/index.vue
@@ -520,7 +520,7 @@ defineExpose({
&:hover {
border-color: currentColor;
- color: $color-primary;
+ color: var(--color-primary);
.cl-upload__actions {
display: inline-flex;
diff --git a/src/modules/upload/components/space.vue b/src/modules/upload/components/space.vue
index 3a91eba..a32857f 100644
--- a/src/modules/upload/components/space.vue
+++ b/src/modules/upload/components/space.vue
@@ -396,7 +396,7 @@ defineExpose({
cursor: pointer;
&:hover {
- border-color: $color-primary;
+ border-color: var(--color-primary);
}
i {
diff --git a/src/modules/upload/components/space/category.vue b/src/modules/upload/components/space/category.vue
index 19afb7e..61db783 100644
--- a/src/modules/upload/components/space/category.vue
+++ b/src/modules/upload/components/space/category.vue
@@ -248,7 +248,7 @@ onMounted(() => {
cursor: pointer;
&.is-active {
- color: $color-primary;
+ color: var(--color-primary);
}
&:hover {
diff --git a/src/modules/upload/components/space/file-item.vue b/src/modules/upload/components/space/file-item.vue
index 29d3413..ee71bd6 100644
--- a/src/modules/upload/components/space/file-item.vue
+++ b/src/modules/upload/components/space/file-item.vue
@@ -55,12 +55,14 @@