diff --git a/package.json b/package.json
index af84be34..b0e8f1f3 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "vue3-element-admin",
"private": true,
- "version": "2.6.0",
+ "version": "2.6.1",
"scripts": {
"preinstall": "npx only-allow pnpm",
"dev": "vite serve --mode development",
@@ -46,9 +46,8 @@
"@wangeditor/editor": "^5.1.23",
"@wangeditor/editor-for-vue": "5.1.10",
"axios": "^1.4.0",
- "codemirror": "^5.65.13",
"echarts": "^5.2.2",
- "element-plus": "^2.3.9",
+ "element-plus": "^2.3.12",
"lodash-es": "^4.17.21",
"mockjs": "^1.1.0",
"nprogress": "^0.2.0",
@@ -56,8 +55,9 @@
"path-to-regexp": "^6.2.0",
"pinia": "^2.0.33",
"screenfull": "^6.0.0",
+ "sockjs-client": "1.6.1",
"sortablejs": "^1.15.0",
- "terser": "^5.19.3",
+ "stompjs": "^2.3.3",
"vue": "^3.3.4",
"vue-i18n": "9.2.2",
"vue-router": "^4.2.0",
@@ -67,11 +67,12 @@
"@commitlint/cli": "^17.6.3",
"@commitlint/config-conventional": "^17.6.3",
"@iconify-json/ep": "^1.1.10",
- "@types/codemirror": "^5.60.7",
"@types/lodash": "^4.14.195",
"@types/nprogress": "^0.2.0",
"@types/path-browserify": "^1.0.0",
+ "@types/sockjs-client": "^1.5.1",
"@types/sortablejs": "^1.15.1",
+ "@types/stompjs": "^2.3.5",
"@typescript-eslint/eslint-plugin": "^5.59.6",
"@typescript-eslint/parser": "^5.59.6",
"autoprefixer": "^10.4.14",
@@ -89,7 +90,6 @@
"postcss-html": "^1.5.0",
"postcss-scss": "^4.0.6",
"prettier": "^2.8.8",
- "rollup-plugin-visualizer": "^5.9.2",
"sass": "^1.58.3",
"stylelint": "^15.10.2",
"stylelint-config-html": "^1.1.0",
@@ -103,8 +103,7 @@
"unplugin-auto-import": "^0.15.3",
"unplugin-icons": "^0.16.1",
"unplugin-vue-components": "^0.24.1",
- "vite": "^4.4.2",
- "vite-plugin-compression": "^0.5.1",
+ "vite": "^4.4.9",
"vite-plugin-mock": "^3.0.0",
"vite-plugin-svg-icons": "^2.0.1",
"vue-tsc": "^1.7.0 "
diff --git a/src/components/TagInput/index.vue b/src/components/TagInput/index.vue
deleted file mode 100644
index 92b4129b..00000000
--- a/src/components/TagInput/index.vue
+++ /dev/null
@@ -1,510 +0,0 @@
-
-
-
-
-
-
diff --git a/src/components/TagInput/util.ts b/src/components/TagInput/util.ts
deleted file mode 100644
index f216e311..00000000
--- a/src/components/TagInput/util.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * getRePosFromStr 正则匹配字段返回位置信息
- * */
-export function getRePosFromStr(text: any = "", re: any = /\$.+?\$/g) {
- const lines = text.split("\n");
- const positions: any = [];
- let m;
- for (let i = 0; i < lines.length; i++) {
- const l = lines[i];
- while ((m = re.exec(l)) !== null) {
- const tag = m[0].substring(1, m[0].length - 1);
- positions.push({
- line: i,
- start: m.index,
- stop: m.index + m[0].length,
- tag,
- });
- }
- }
- return positions;
-}
-/**
- * 输入框模式
- */
-export enum MODE {
- // 文本
- TEXT = 1,
- // 公式
- FORMULA,
- // 只允许选择tag
- ONLYTAG,
- // 日期
- DATE,
-}
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 0de8378a..14a64e9e 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -28,7 +28,7 @@ const tagsViewStore = useTagsViewStore();
}
.fixed-header + .app-main {
- padding-top: 50px;
+ padding-top: 34px;
}
.hasTagsView {
@@ -42,4 +42,31 @@ const tagsViewStore = useTagsViewStore();
padding-top: 84px;
}
}
+
+.isMix {
+ .app-main {
+ height: calc(100vh - 50px);
+ overflow-y: auto;
+ }
+
+ .hasTagsView {
+ .app-main {
+ /* 84 = navbar + tags-view = 50 + 34 */
+ height: calc(100vh - 84px);
+ }
+
+ .fixed-header + .app-main {
+ min-height: calc(100vh - 50px);
+ padding-top: 34px;
+ }
+ }
+}
+
+.isTop {
+ .hasTagsView {
+ .fixed-header + .app-main {
+ padding-top: 34px;
+ }
+ }
+}
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
index f66ac1d1..d370b269 100644
--- a/src/layout/components/Settings/index.vue
+++ b/src/layout/components/Settings/index.vue
@@ -5,14 +5,32 @@ import { useAppStore } from "@/store/modules/app";
import IconEpSunny from "~icons/ep/sunny";
import IconEpMoon from "~icons/ep/moon";
import { useRoute } from "vue-router";
-
+import defaultSettings from "@/settings";
/**
* 暗黑模式
*/
const settingsStore = useSettingsStore();
const permissionStore = usePermissionStore();
const appStore = useAppStore();
+
const isDark = useDark();
+console.log("isDark1", isDark.value);
+
+watch(
+ () => defaultSettings.theme,
+ (newVal: string) => {
+ if (
+ (newVal == "dark" && isDark.value == false) ||
+ (newVal == "light" && isDark.value == true)
+ ) {
+ toggleDark();
+ console.log("isDark2", isDark.value);
+ }
+ }
+);
+
+computed(() => {});
+
const toggleDark = () => useToggle(isDark);
function findOutermostParent(tree: any[], findName: string) {
diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
index 3f4c6401..96a3c57e 100644
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -10,6 +10,8 @@ defineProps({
},
});
+const layout = computed(() => settingsStore.layout);
+
const logo = ref(new URL(`../../../assets/logo.png`, import.meta.url).href);
@@ -25,9 +27,6 @@ const logo = ref(new URL(`../../../assets/logo.png`, import.meta.url).href);
to="/"
>
![]()
- vue3-element-admin
{
+
+
diff --git a/src/settings.ts b/src/settings.ts
index 02920e10..8531e7ca 100644
--- a/src/settings.ts
+++ b/src/settings.ts
@@ -1,10 +1,11 @@
-// 系统设置
+/**
+ * 系统设置
+ */
interface DefaultSettings {
/**
* 系统title
*/
title: string;
-
/**
* 是否显示设置
*/
@@ -22,21 +23,21 @@ interface DefaultSettings {
*/
sidebarLogo: boolean;
/**
- * 导航栏布局
+ * 导航栏布局(left|top|mix)
*/
layout: string;
/**
- * 主题模式
+ * 主题模式(dark|light)
*/
theme: string;
/**
- * 布局大小
+ * 布局大小(default |large |small)
*/
size: string;
/**
- * 语言
+ * 语言( zh-cn| en)
*/
language: string;
}
@@ -47,16 +48,10 @@ const defaultSettings: DefaultSettings = {
tagsView: true,
fixedHeader: false,
sidebarLogo: true,
- layout: "mix",
- /**
- * 主题模式
- *
- * dark:暗黑模式
- * light: 明亮模式
- */
- theme: "dark",
- size: "default", // default |large |small
- language: "zh-cn", // zh-cn| en
+ layout: "mix", // 默认混合模式
+ theme: "dark", // 默认暗黑模式
+ size: "default",
+ language: "zh-cn",
};
export default defaultSettings;
diff --git a/src/store/modules/settings.ts b/src/store/modules/settings.ts
index 908359c3..1caaed74 100644
--- a/src/store/modules/settings.ts
+++ b/src/store/modules/settings.ts
@@ -1,15 +1,18 @@
import { defineStore } from "pinia";
import defaultSettings from "@/settings";
-import { useStorage } from "@vueuse/core";
export const useSettingsStore = defineStore("setting", () => {
// state
const tagsView = useStorage("tagsView", defaultSettings.tagsView);
const showSettings = ref(defaultSettings.showSettings);
- const fixedHeader = ref(defaultSettings.fixedHeader);
const sidebarLogo = ref(defaultSettings.sidebarLogo);
+ const fixedHeader = useStorage(
+ "fixedHeader",
+ defaultSettings.fixedHeader
+ );
+
const layout = useStorage("layout", defaultSettings.layout);
// actions
@@ -31,8 +34,6 @@ export const useSettingsStore = defineStore("setting", () => {
case "layout":
layout.value = value;
break;
- default:
- break;
}
}
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 66958b81..7e0a26c2 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -83,14 +83,11 @@
}
}
- .left-wrap {
- .svg-icon {
- margin-top: -2px;
- margin-right: 12px;
- }
- }
-
.hideSidebar {
+ .left-wrap {
+ width: 54px;
+ }
+
.sidebar-container {
width: 54px !important;
@@ -100,7 +97,7 @@
.header {
.logo-wrap {
- width: 63px !important;
+ width: 54px !important;
transition: transform 0.28s;
}
}
diff --git a/src/views/demo/taginput.vue b/src/views/demo/taginput.vue
deleted file mode 100644
index 9301bb05..00000000
--- a/src/views/demo/taginput.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-
-
-
-
-
diff --git a/src/views/demo/websocket.vue b/src/views/demo/websocket.vue
index ce54afc2..ffbc4c7a 100644
--- a/src/views/demo/websocket.vue
+++ b/src/views/demo/websocket.vue
@@ -4,7 +4,9 @@ import { sendToAll, sendToUser } from "@/api/websocket"; // 点对点消息列
import { useUserStore } from "@/store/modules/user";
-import { useWebSocket } from "@vueuse/core";
+import SockJS from "sockjs-client"; // 报错 global is not defined 换成下面的引入
+// import SockJS from "sockjs-client/dist/sockjs.min.js";
+import Stomp from "stompjs";
const inputVal = ref("初始内容");
@@ -13,58 +15,6 @@ const p2pMsgs = ref(["接收到一条点对线消息"]);
const userId = useUserStore().userId;
-const { data, status, close, send, open } = useWebSocket(
- "ws://localhost:8989/ws",
- {
- onConnected(ws) {
- console.log("订阅主题");
- // 连接建立后发送订阅消息
- ws.send(JSON.stringify({ type: "subscribe", topic: "/topic/all" }));
- },
- onMessage(ws, event) {
- // 获取接收到的消息内容
- const message = event.data;
-
- // 处理消息内容
- console.log("Received message:", message);
- },
- }
-);
-
-// 监听 WebSocket 连接状态变化
-watch(status, (newStatus) => {
- if (newStatus === "OPEN") {
- // 连接已打开，订阅主题
- console.log(" 连接已打开，订阅主题");
- const subscribeMessage = {
- type: "subscribe",
- channel: "/topic/all",
- };
- send(JSON.stringify(subscribeMessage));
- } else if (newStatus === "CLOSED") {
- // 连接已关闭，执行相应的清理操作
- // ...
- }
-});
-
-// 监听 WebSocket 接收到的消息
-watch(data, (newData) => {
- console.log("Received data:", newData);
-
- // 解析消息体
- const message = JSON.parse(newData);
-
- // 判断消息主题并处理
- if (message.topic === "topic1") {
- // 处理来自 topic1 的消息
- console.log("Received message from topic1:", message);
- } else if (message.topic === "topic2") {
- // 处理来自 topic2 的消息
- console.log("Received message from topic2:", message);
- }
- // 可以根据需要添加更多的判断逻辑来处理其他主题的消息
-});
-
function handleSendToAll() {
sendToAll(inputVal.value);
}
@@ -72,7 +22,24 @@ function handleSendToAll() {
function handleSendToUser() {
sendToUser(userId, inputVal.value);
}
-onMounted(() => {});
+
+let stompClient: Stomp.Client;
+
+function initWebSocket() {
+ stompClient = Stomp.overWS("ws://localhost:8989/ws");
+
+ stompClient.connect({}, () => {
+ console.log("连接成功");
+
+ stompClient.subscribe("/topic/all", (res) => {
+ console.log("订阅响应");
+ });
+ });
+}
+
+onMounted(() => {
+ initWebSocket();
+});
diff --git a/vite.config.ts b/vite.config.ts
index 73fdbe2f..5f9f4fff 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -12,15 +12,12 @@ import IconsResolver from "unplugin-icons/resolver";
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
import { viteMockServe } from "vite-plugin-mock";
-import visualizer from "rollup-plugin-visualizer";
import UnoCSS from "unocss/vite";
import path from "path";
-import viteCompression from "vite-plugin-compression";
-
const pathSrc = path.resolve(__dirname, "src");
-
+/** 参考Vite官方配置: https://cn.vitejs.dev/config */
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
const env = loadEnv(mode, process.cwd());
@@ -102,35 +99,17 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
// 自动安装图标库
autoInstall: true,
}),
-
createSvgIconsPlugin({
// 指定需要缓存的图标文件夹
iconDirs: [path.resolve(pathSrc, "assets/icons")],
// 指定symbolId格式
symbolId: "icon-[dir]-[name]",
}),
- // 代码压缩
- viteCompression({
- verbose: true, // 默认即可
- disable: true, // 是否禁用压缩，默认禁用，true为禁用,false为开启，打开压缩需配置nginx支持
- deleteOriginFile: true, // 删除源文件
- threshold: 10240, // 压缩前最小文件大小
- algorithm: "gzip", // 压缩算法
- ext: ".gz", // 文件类型
- }),
-
+ // https://github.com/anncwb/vite-plugin-mock/issues/9
viteMockServe({
ignore: /^\_/,
mockPath: "mock",
enable: mode === "development",
- // https://github.com/anncwb/vite-plugin-mock/issues/9
- }),
-
- visualizer({
- filename: "./stats.html",
- open: false,
- gzipSize: true,
- brotliSize: true,
}),
],
// 预加载项目必需的组件
@@ -192,7 +171,6 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
"@wangeditor/editor",
"@wangeditor/editor-for-vue",
"vue-i18n",
- "codemirror",
],
},
// 构建