refactor(editor): 移除圆角设置并新增树菜单尺寸配置选项

- 取消了 borderRadius 相关的状态及计算，实现圆角固定为 0
- 删除了设置抽屉中的圆角和页面切换动画选项
- 移除布局选项卡，替换为编辑区设置面板
- 新增树菜单收缩阈值、默认展开宽度和最大宽度占比的配置项
- 编辑区拖动分割条支持获取并应用树菜单尺寸相关配置
- 优化状态管理，移除冗余字段，添加树菜单相关字段
- 简化动画相关样式，移除无用动画类定义
- 确保默认设置和导入导出逻辑同步更新树菜单新配置

src/App.vue

@@ -37,8 +37,6 @@ import { lightThemeConfig, darkThemeConfig } from '@/configs/tailwind.ui.config'
 
 const appStore = useAppStore()
 
-// 根据 borderRadius 值生成 Naive UI 的 borderRadius 字符串
-const getBorderRadius = () => `${appStore.borderRadius * 16}px`
 const getFontSize = () => `${appStore.fontSize}px`
 
 // 计算 Naive UI 的主题覆写（响应式 computed）
@@ -49,8 +47,8 @@ const lightThemeOverrides = computed<GlobalThemeOverrides>(() => ({
         primaryColorHover: appStore.primaryColor + 'cc',
         primaryColorPressed: appStore.primaryColor + '99',
         primaryColorSuppl: appStore.primaryColor,
-        borderRadius: getBorderRadius(),
-        borderRadiusSmall: getBorderRadius(),
+        borderRadius: '0px',
+        borderRadiusSmall: '0px',
         fontSize: getFontSize(),
         fontSizeMedium: getFontSize(),
         fontSizeLarge: `${appStore.fontSize + 2}px`,
@@ -70,8 +68,8 @@ const darkThemeOverrides = computed<GlobalThemeOverrides>(() => ({
         primaryColorHover: appStore.primaryColor + 'cc',
         primaryColorPressed: appStore.primaryColor + '99',
         primaryColorSuppl: appStore.primaryColor,
-        borderRadius: getBorderRadius(),
-        borderRadiusSmall: getBorderRadius(),
+        borderRadius: '0px',
+        borderRadiusSmall: '0px',
         fontSize: getFontSize(),
         fontSizeMedium: getFontSize(),
         fontSizeLarge: `${appStore.fontSize + 2}px`,

src/layouts/MainLayout.vue

@@ -2,11 +2,9 @@
     <div class="h-screen flex flex-col overflow-hidden" :style="{ backgroundColor: themeVars.bodyColor }">
         <!-- 主页面视图内容区 -->
         <router-view v-slot="{ Component, route }">
-            <transition :name="appStore.transitionName || 'none'" mode="out-in">
             <keep-alive>
                 <component :is="Component" :key="route.fullPath" class="flex-1 flex flex-col min-h-0" />
             </keep-alive>
-            </transition>
         </router-view>
 
         <!-- 全局弹窗组件，供 window 全局挂载调用 -->
@@ -42,47 +40,4 @@ onMounted(() => {
 })
 </script>
 
-<style scoped>
-/* 无动画 */
-.none-enter-active,
-.none-leave-active {
-    transition: none !important;
-}
-
-/* 淡入淡出 */
-.fade-enter-active,
-.fade-leave-active {
-    transition: opacity 0.2s ease;
-}
-.fade-enter-from,
-.fade-leave-to {
-    opacity: 0;
-}
-
-/* 滑动渐变 (原默认动画) */
-.fade-slide-enter-active,
-.fade-slide-leave-active {
-    transition: all 0.3s ease;
-}
-
-.fade-slide-enter-from {
-    opacity: 0;
-    transform: translateX(-20px);
-}
-
-.fade-slide-leave-to {
-    opacity: 0;
-    transform: translateX(20px);
-}
-
-/* 缩放渐变 */
-.zoom-enter-active,
-.zoom-leave-active {
-    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-.zoom-enter-from,
-.zoom-leave-to {
-    opacity: 0;
-    transform: scale(0.96);
-}
-</style>
+<style scoped></style>

src/store/app/index.ts

@@ -2,35 +2,28 @@ import type { AppState } from './types'
 
 export const useAppStore = defineStore('app', {
     state: (): AppState => ({
-        collapsed: false,
         isDark: false,
         primaryColor: '#165DFF',
-        borderRadius: 0,
         fontSize: 14,
         colorWeak: false,
         grayMode: false,
-        showBreadcrumb: true,
-        contentCompact: true,
-        fixedHeader: false,
         rememberMe: false,
         savedUsername: '',
         savedPassword: '',
         loading: false,
         loadingText: '加载中...',
-        transitionName: 'none',
         settingsPinned: false,
         settingsOpen: false,
         autoExpandOnInsert: true,
-        defaultNewColWidth: 0.2
+        defaultNewColWidth: 0.2,
+        treeCollapseThreshold: 20,
+        treeDefaultWidth: 560,
+        treeMaxRatio: 0.6
     }),
     actions: {
-        toggleSidebar() {
-            this.collapsed = !this.collapsed
-        },
         applyTheme() {
             const root = document.documentElement
             root.style.setProperty('--primary-color', this.primaryColor)
-            root.style.setProperty('--border-radius-base', `${this.borderRadius}rem`)
             root.style.setProperty('--font-size-base', `${this.fontSize}px`)
             document.body.style.fontSize = `${this.fontSize}px`
             document.body.classList.toggle('color-weak', this.colorWeak)

src/store/app/types.ts

 export interface AppState {
-    collapsed: boolean
     isDark: boolean
     primaryColor: string
-    borderRadius: number
     fontSize: number
     colorWeak: boolean
     grayMode: boolean
-    // 布局
-    showBreadcrumb: boolean
-    contentCompact: boolean
-    fixedHeader: boolean
     rememberMe: boolean
     savedUsername: string
     savedPassword: string
     // 全局加载状态
     loading: boolean
     loadingText?: string
-    transitionName: string
     settingsPinned: boolean
     settingsOpen: boolean
     autoExpandOnInsert: boolean // 新增/粘贴节点及表格行列时自动展开
     defaultNewColWidth: number // 表格新增列的默认宽度比例 (当前默认 0.2)
+    treeCollapseThreshold: number // 树分栏收缩阈值
+    treeDefaultWidth: number // 树分栏默认展开宽度
+    treeMaxRatio: number // 树分栏最大宽度比例
 }

src/views/editor/components/Splitter/functionals/index.ts

@@ -7,9 +7,9 @@ export function useSplitter(
         (e: 'update:collapsed', val: boolean): void
     }
 ) {
-    const collapseThreshold = props.collapseThreshold ?? 150
-    const defaultWidth = props.defaultWidth ?? 560
-    const maxRatio = props.maxRatio ?? 0.6
+    const collapseThreshold = computed(() => props.collapseThreshold ?? 20)
+    const defaultWidth = computed(() => props.defaultWidth ?? 560)
+    const maxRatio = computed(() => props.maxRatio ?? 0.6)
 
     const dividerRef = ref<HTMLElement | null>(null)
     const isDragging = ref(false)
@@ -42,11 +42,11 @@ export function useSplitter(
         if (Math.abs(delta) > 3) hasDragged = true
         const raw = startWidth + delta
         const containerWidth = containerEl.clientWidth
-        const maxWidth = containerWidth * maxRatio
+        const maxWidth = containerWidth * maxRatio.value
 
-        if (raw < collapseThreshold) {
+        if (raw < collapseThreshold.value) {
             emit('update:width', Math.max(0, raw))
-            emit('update:collapsed', raw < collapseThreshold / 2)
+            emit('update:collapsed', raw < collapseThreshold.value / 2)
         } else {
             emit('update:collapsed', false)
             emit('update:width', Math.min(maxWidth, raw))
@@ -60,7 +60,7 @@ export function useSplitter(
         window.removeEventListener('mousemove', onDrag)
         window.removeEventListener('mouseup', stopDrag)
 
-        if (!props.collapsed && props.width < collapseThreshold) {
+        if (!props.collapsed && props.width < collapseThreshold.value) {
             emit('update:collapsed', true)
         }
     }
@@ -69,7 +69,7 @@ export function useSplitter(
         if (hasDragged) return
         if (props.collapsed) {
             emit('update:collapsed', false)
-            emit('update:width', defaultWidth)
+            emit('update:width', defaultWidth.value)
         }
     }
 

src/views/editor/components/Splitter/index.vue

@@ -36,7 +36,7 @@ const props = withDefaults(
         maxRatio?: number
     }>(),
     {
-        collapseThreshold: 150,
+        collapseThreshold: 20,
         defaultWidth: 560,
         maxRatio: 0.6
     }

src/views/editor/index.vue

@@ -23,7 +23,13 @@
             </div>
 
             <!-- 拖动分割条组件 -->
-            <Splitter v-model:width="leftWidthPx" v-model:collapsed="isCollapsed" />
+            <Splitter
+                v-model:width="leftWidthPx"
+                v-model:collapsed="isCollapsed"
+                :collapse-threshold="appStore.treeCollapseThreshold"
+                :default-width="appStore.treeDefaultWidth"
+                :max-ratio="appStore.treeMaxRatio"
+            />
 
             <!-- 右侧：编辑区 -->
             <div class="flex-1 flex flex-col overflow-hidden" :style="{ background: themeVars.colorBg1 }">
@@ -40,6 +46,7 @@
 
 <script setup lang="ts">
 import { useEditorStore } from '@/store/editor'
+import { useAppStore } from '@/store/app'
 import { useEditor } from './functionals'
 import EditorToolbar from './components/EditorToolbar/index.vue'
 import NodeTree from './components/NodeTree/index.vue'
@@ -49,13 +56,14 @@ import DocNodeRenderer from './components/DocNodeRenderer/index.vue'
 
 const themeVars = useThemeVars()
 const editorStore = useEditorStore()
+const appStore = useAppStore()
 const expandedKeys = computed({
     get: () => editorStore.expandedKeys,
     set: (val) => editorStore.setExpandedKeys(val)
 })
 
 // 界面拖动分割状态
-const leftWidthPx = ref(560)
+const leftWidthPx = ref(appStore.treeDefaultWidth)
 const isCollapsed = ref(false)
 
 // 实例化业务逻辑 Hook