优化侧栏动画卡顿问题

admin/package.json

@@ -18,7 +18,7 @@
         "@highlightjs/vue-plugin": "^2.1.0",
         "@logicflow/core": "^2.0.16",
         "@logicflow/extension": "^2.0.21",
-        "@vueuse/core": "^13.3.0",
+        "@vueuse/core": "^13.5.0",
         "@wangeditor/editor": "^5.1.23",
         "@wangeditor/editor-for-vue": "^5.1.12",
         "axios": "^1.8.4",
@@ -26,12 +26,13 @@
         "css-color-function": "^1.3.3",
         "dayjs": "^1.11.13",
         "echarts": "^5.6.0",
-        "element-plus": "^2.10.2",
+        "element-plus": "^2.10.4",
         "highlight.js": "^11.11.1",
         "lodash-es": "^4.17.21",
         "nprogress": "^0.2.0",
         "pinia": "^3.0.3",
         "query-string": "^9.1.1",
+        "rolldown-vite": "^7.0.9",
         "vform3-builds": "^3.0.10",
         "vue": "^3.5.16",
         "vue-clipboard3": "^2.0.0",
@@ -45,8 +46,8 @@
         "@types/lodash-es": "^4.17.12",
         "@types/node": "^22.14.1",
         "@types/nprogress": "^0.2.3",
-        "@vitejs/plugin-vue": "^5.2.4",
-        "@vitejs/plugin-vue-jsx": "^4.2.0",
+        "@vitejs/plugin-vue": "^6.0.0",
+        "@vitejs/plugin-vue-jsx": "^5.0.1",
         "@vue/eslint-config-prettier": "^9.0.0",
         "@vue/eslint-config-typescript": "^13.0.0",
         "@vue/tsconfig": "^0.7.0",
@@ -56,8 +57,8 @@
         "execa": "^9.5.2",
         "fs-extra": "^11.3.0",
         "postcss": "^8.5.3",
-        "prettier": "^3.5.3",
-        "rollup-plugin-visualizer": "^5.14.0",
+        "prettier": "^3.6.2",
+        "rollup-plugin-visualizer": "^6.0.3",
         "sass": "^1.87.0",
         "tailwindcss": "^3.4.15",
         "typescript": "~5.8.3",
@@ -67,7 +68,7 @@
         "vite-plugin-compression": "^0.5.1",
         "vite-plugin-style-import": "^2.0.0",
         "vite-plugin-svg-icons": "^2.0.1",
-        "vue-tsc": "^2.2.10"
+        "vue-tsc": "^3.0.1"
     },
     "overrides": {
         "vite": "npm:rolldown-vite@latest"

admin/src/components/flow/flowEdit/index.vue

@@ -106,7 +106,7 @@ function initLogicFlow(data) {
 
     // Setting default edge type and rendering initial data
     logicFlowInstance.setDefaultEdgeType('pro-polyline')
-    logicFlowInstance.extension.menu.addMenuConfig({
+    logicFlowInstance.extension.menu?.addMenuConfig({
         nodeMenu: [
             {
                 text: '属性配置',
@@ -117,7 +117,7 @@ function initLogicFlow(data) {
         ]
     })
     logicFlowInstance.render(data)
-    logicFlowInstance.extension.miniMap.show()
+    logicFlowInstance.extension.miniMap?.show()
     // Assigning the LogicFlow instance to the 'lf' ref
     lf.value = logicFlowInstance
 
@@ -153,7 +153,7 @@ function importData(text) {
 // Function to save the graph data
 function saveGraph() {
     const data = lf.value.getGraphData()
-    download('export.json', JSON.stringify(data))
+    download(`export.${Date.now()}.json`, JSON.stringify(data))
 }
 
 // Function to download the graph data as a file
@@ -267,7 +267,7 @@ defineExpose({
 })
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .diagram {
     width: 100%;
     height: 100%;
@@ -318,7 +318,7 @@ defineExpose({
         }
     }
     /* 由于背景图和gird不对齐，需要css处理一下 */
-    .diagram-container :v-deep .lf-background {
+    .diagram-container :deep(.lf-background) {
         left: -9px;
     }
 }

admin/src/layout/default/index.vue

@@ -8,7 +8,7 @@
             <div class="app-header">
                 <layout-header />
             </div>
-            <div class="app-main flex-1 min-h-0">
+            <div class="app-main flex-1 min-h-0" :style="{ width: MainLayoutWidth }">
                 <layout-main />
             </div>
         </div>
@@ -16,10 +16,39 @@
 </template>
 
 <script setup lang="ts">
+import { computed, watch, ref } from 'vue'
+// 节流
+import { throttle } from 'lodash-es'
 import LayoutMain from './components/main.vue'
 import LayoutSidebar from './components/sidebar/index.vue'
 import LayoutHeader from './components/header/index.vue'
+
+import useSettingStore from '@/stores/modules/setting'
+import useAppStore from '@/stores/modules/app'
+
 defineOptions({
     name: 'LayoutDefault'
 })
+
+const appStore = useAppStore()
+const showMenuDrawer = computed(() => {
+    if (appStore.isMobile) {
+        return false
+    } else {
+        return appStore.isCollapsed
+    }
+})
+const settingStore = useSettingStore()
+
+const MainLayoutWidth = ref('auto')
+watch(
+    () => showMenuDrawer.value,
+    throttle(() => {
+        MainLayoutWidth.value = `calc(100vw - ${settingStore.sideWidth}px)`
+
+        setTimeout(() => {
+            MainLayoutWidth.value = 'auto'
+        }, 500)
+    }, 50)
+)
 </script>

admin/src/views/setting/permission/menu/index.vue

@@ -164,9 +164,3 @@ const toggleExpand = (children: any[], unfold = true) => {
 
 getLists()
 </script>
-<style>
-.el-table__body-wrapper tr {
-    content-visibility: auto;
-    contain-intrinsic-size: 51px; /* 每行预估高度 */
-}
-</style>