From d805b481e80e4dda96c621e1579e0f42a51c327c Mon Sep 17 00:00:00 2001 From: 4eversad Date: Fri, 1 Sep 2023 16:16:10 +0800 Subject: [PATCH 1/6] =?UTF-8?q?fix:=20:bug:=20=E5=88=A0=E9=99=A4=E5=A4=9A?= =?UTF-8?q?=E4=BD=99=E7=9A=84=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Former-commit-id: b1ea7b9dc4003eb472b162fd95e9c74d4e0a1e16 --- src/layout/components/Sidebar/Logo.vue | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue index 3f4c6401..ffb901be 100644 --- a/src/layout/components/Sidebar/Logo.vue +++ b/src/layout/components/Sidebar/Logo.vue @@ -25,9 +25,6 @@ const logo = ref(new URL(`../../../assets/logo.png`, import.meta.url).href); to="/" > - vue3-element-admin Date: Mon, 4 Sep 2023 20:54:46 +0800 Subject: [PATCH 2/6] =?UTF-8?q?fix:=20:bug:=20=E6=B7=B7=E5=90=88=E3=80=81?= =?UTF-8?q?=E9=A1=B6=E9=83=A8=E5=AF=BC=E8=88=AA=E6=A0=8F=E6=A8=A1=E5=BC=8F?= =?UTF-8?q?=E5=9B=BA=E5=AE=9A`header`=E4=B8=8B=E9=97=B4=E8=B7=9D=EF=BC=8C?= =?UTF-8?q?=E6=B7=B7=E5=90=88=E6=A8=A1=E5=BC=8F=E5=B7=A6=E4=BE=A7=E8=8F=9C?= =?UTF-8?q?=E5=8D=95=E9=AB=98=E5=BA=A6=E4=B8=8D=E5=9B=BA=E5=AE=9A=E7=AD=89?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Former-commit-id: 63df66449582f41a710f761457e4afd21113aeb7 --- src/layout/components/AppMain.vue | 29 ++++++++++++++++++++++++- src/layout/components/Sidebar/Logo.vue | 4 +++- src/layout/index.vue | 22 ++++--------------- src/layout/main.vue | 30 ++++++++++++++++++++++++++ src/settings.ts | 27 ++++++++++------------- src/store/modules/settings.ts | 9 ++++---- src/styles/sidebar.scss | 13 +++++------ 7 files changed, 86 insertions(+), 48 deletions(-) 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/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue index 3f4c6401..25fb65aa 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,7 +27,7 @@ const logo = ref(new URL(`../../../assets/logo.png`, import.meta.url).href); to="/" > - vue3-element-admin diff --git a/src/layout/index.vue b/src/layout/index.vue index c96ef8b7..6548189d 100644 --- a/src/layout/index.vue +++ b/src/layout/index.vue @@ -124,23 +124,6 @@ function toggleSideBar() { } } -.fixed-header { - position: fixed; - top: 0; - right: 0; - z-index: 9; - width: calc(100% - #{$sideBarWidth}); - transition: width 0.28s; -} - -.hideSidebar .fixed-header { - width: calc(100% - 54px); -} - -.mobile .fixed-header { - width: 100%; -} - .drawer-bg { position: absolute; top: 0; @@ -231,8 +214,11 @@ function toggleSideBar() { .openSidebar { .mix-wrap { - .el-menu { + .left-wrap { width: $sideBarWidth; + } + + .el-menu { border: none; } } diff --git a/src/layout/main.vue b/src/layout/main.vue index 653e7d1f..26e233a7 100644 --- a/src/layout/main.vue +++ b/src/layout/main.vue @@ -55,3 +55,33 @@ watchEffect(() => { + + 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; } } From 62b2e50fad7044cec71808e19e4c2b53ff8f183e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=83=9D=E5=85=88=E7=91=9E?= <1490493387@qq.com> Date: Mon, 4 Sep 2023 21:20:07 +0800 Subject: [PATCH 3/6] =?UTF-8?q?build:=20:package:=20=E5=8D=87=E7=BA=A7?= =?UTF-8?q?=E4=BE=9D=E8=B5=96=E5=8C=85=EF=BC=8C=E6=9B=B4=E6=96=B0=E9=A1=B9?= =?UTF-8?q?=E7=9B=AE=E7=89=88=E6=9C=AC=E5=8F=B7=E2=86=922.6.1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Former-commit-id: d9dfdb2ede1469b10b77058d27cd36e88a192666 --- package.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 9ef5bee9..d197100c 100644 --- a/package.json +++ b/package.json @@ -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,7 +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", + "stompjs": "^2.3.3", "vue": "^3.3.4", "vue-i18n": "9.2.2", "vue-router": "^4.2.0", @@ -66,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", @@ -88,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", @@ -102,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 " From 70e9a95d8ac511c2b5bf961217331a8f069a64e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=83=9D=E5=85=88=E7=91=9E?= <1490493387@qq.com> Date: Mon, 4 Sep 2023 21:23:25 +0800 Subject: [PATCH 4/6] =?UTF-8?q?build:=20:package:=20=E5=8D=87=E7=BA=A7?= =?UTF-8?q?=E4=BE=9D=E8=B5=96=E5=8C=85=EF=BC=8C=E6=9B=B4=E6=96=B0=E9=A1=B9?= =?UTF-8?q?=E7=9B=AE=E7=89=88=E6=9C=AC=E5=8F=B7=E2=86=922.6.1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 升级依赖包，更新项目版本号→2.6.1 Former-commit-id: 5e8a96dc218cd444d42be028fad4c325da4a607b --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index d197100c..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", From a8d291ec341714f57c7127a745e67e3da3208f14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=83=9D=E5=85=88=E7=91=9E?= <1490493387@qq.com> Date: Mon, 4 Sep 2023 21:25:33 +0800 Subject: [PATCH 5/6] =?UTF-8?q?refactor:=20:recycle:=20=E7=A7=BB=E9=99=A4?= =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E9=9D=9E=E5=B8=B8=E7=94=A8=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E5=92=8C=E9=85=8D=E7=BD=AE=EF=BC=8C=E9=99=8D=E4=BD=8E=E9=A1=B9?= =?UTF-8?q?=E7=9B=AE=E4=B8=8A=E6=89=8B=E9=9A=BE=E5=BA=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Former-commit-id: ca1182cc245966e7bb1c59362821bd9990e2c8ac --- src/components/TagInput/index.vue | 510 ------------------------------ src/components/TagInput/util.ts | 34 -- src/views/demo/taginput.vue | 105 ------ vite.config.ts | 26 +- 4 files changed, 2 insertions(+), 673 deletions(-) delete mode 100644 src/components/TagInput/index.vue delete mode 100644 src/components/TagInput/util.ts delete mode 100644 src/views/demo/taginput.vue 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/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/vite.config.ts b/vite.config.ts index 78fcf4f0..da003364 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, }), ], // 预加载项目必需的组件 @@ -193,7 +172,6 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => { "@wangeditor/editor", "@wangeditor/editor-for-vue", "vue-i18n", - "codemirror", ], }, }; From 34206bf9e9cb18de6eeea0b33df5aeaf81d43fd9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=83=9D=E5=85=88=E7=91=9E?= <1490493387@qq.com> Date: Mon, 4 Sep 2023 21:29:24 +0800 Subject: [PATCH 6/6] =?UTF-8?q?feat:=20:sparkles:=20websocket=E7=A4=BA?= =?UTF-8?q?=E4=BE=8B=E4=B8=B4=E6=97=B6=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Former-commit-id: 3a71f6f232c69bc98bc9728161fe49e3e94e9f58 --- src/layout/components/Settings/index.vue | 20 ++++++- src/views/demo/websocket.vue | 75 +++++++----------------- 2 files changed, 40 insertions(+), 55 deletions(-) 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/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(); +});