"侧边栏展开选中的模式是根据当前处于哪个模式，那个模式就是选中状态

"

src/layout/GlobalMenu.tsx

@@ -66,6 +66,10 @@ const Item = defineComponent({
     noStyle: {
       type: Boolean,
       default: false
+    },
+    centered: {
+      type: Boolean,
+      default: false
     }
   },
   emits: {
@@ -75,12 +79,13 @@ const Item = defineComponent({
     return () => (
       <div
         class={clsx(
-          ' py-1 text-sm tracking-widest w-full overflow-hidden flex justify-center text-ellipsis whitespace-nowrap break-all transition-all rounded cursor-pointer mb-1',
+          ' py-1 text-sm tracking-widest w-full overflow-hidden flex  text-ellipsis whitespace-nowrap break-all transition-all rounded cursor-pointer mb-[2px]',
           {
             '  hover:bg-black/20 text-black/80': props.alert,
             ' hover:bg-black/20 text-black/80': !props.alert && !props.noStyle,
             'bg-transparent text-black/60 hover:text-black/80 hover:bg-white/20': props.noStyle
-          }
+          },
+          props.centered ? 'justify-center' : 'pl-2 justify-start'
         )}
         style={
           props.noStyle
@@ -216,6 +221,7 @@ export default defineComponent(() => {
             return (
               <>
                 <Item
+                  centered
                   onClick={() => {
                     menu.showEditPage = true
                     menu.dismiss()
@@ -226,6 +232,7 @@ export default defineComponent(() => {
                 {layout.state.content[layout.state.current].pages.length > 1 && (
                   <Item
                     alert
+                    centered
                     onClick={() => {
                       // 删除链接
 

src/layout/sider/ModeSwitch.tsx

@@ -17,11 +17,15 @@ export default defineComponent(() => {
     (val) => {
       selected.value = val
       hover.value = false
-
     },
     { immediate: true }
   )
-
+  watch(
+    () => selected.value,
+    (val) => {
+      console.log(val)
+    }
+  )
   return () => (
     <div
       class="w-[56px] h-[56px] relative cursor-pointer"
@@ -66,7 +70,8 @@ export default defineComponent(() => {
         <div
           class={clsx(
             'absolute  top-[18px] text-white text-[13px] z-20 flex flex-col items-center pointer-events-none',
-            settings.state.siderDirection === 'right' ? 'right-[105px]' : 'left-[105px] '
+            settings.state.siderDirection === 'right' ? 'right-[105px]' : 'left-[105px] ',
+            selected.value === 0 || layout.state.current === 0 ? ' opacity-100' : ' opacity-70'
           )}
         >
           <OhVueIcon name="md-videogameasset-twotone" fill="white" scale={1.3} />
@@ -75,7 +80,8 @@ export default defineComponent(() => {
         <div
           class={clsx(
             'absolute top-[80px]  text-white text-[13px] z-20 flex flex-col items-center pointer-events-none',
-            settings.state.siderDirection === 'right' ? 'right-[150px] ' : 'left-[150px] '
+            settings.state.siderDirection === 'right' ? 'right-[150px] ' : 'left-[150px] ',
+            selected.value === 1 || layout.state.current === 1 ? ' opacity-100' : ' opacity-70'
           )}
         >
           <OhVueIcon name="md-workhistory-twotone" fill="white" scale={1.3} />
@@ -86,7 +92,8 @@ export default defineComponent(() => {
             'absolute  text-white text-[13px] flex flex-col z-20 items-center pointer-events-none',
             settings.state.siderDirection === 'right'
               ? 'right-[105px] top-[140px]'
-              : 'left-[105px] top-[140px]'
+              : 'left-[105px] top-[140px]',
+            selected.value === 2 || layout.state.current === 2 ? ' opacity-100' : ' opacity-70'
           )}
         >
           <OhVueIcon name="md-stars-twotone" fill="white" scale={1.3} />
@@ -116,7 +123,12 @@ export default defineComponent(() => {
             />
           </g>
           {/* 判定区块，无颜色 */}
-          <g class="relative z-10">
+          <g
+            class="relative z-10"
+            onClick={() => {
+              layout.state.current = selected.value
+            }}
+          >
             <path
               fill="transparent"
               d="M155.29,94.09c-7.97-10.81-20.68-17.24-34.1-17.24-4.48,0-8.91,.71-13.17,2.1L85.85,11.74c11.31-3.68,23.12-5.54,35.1-5.54,35.71,0,69.72,17.1,91.07,45.78l-56.72,42.12Z"
@@ -156,14 +168,17 @@ export default defineComponent(() => {
             <path
               class={
                 'absolute z-30 transition-all opacity-60 ' +
-                (selected.value === 0
+                (layout.state.current === 0
                   ? '-rotate-[72deg]'
-                  : selected.value === 1
+                  : layout.state.current === 1
                     ? 'rotate-0'
                     : 'rotate-[72deg]')
               }
+              onMouseenter={() => {
+                selected.value = layout.state.current
+              }}
               onClick={()=> {
-                layout.state.current = selected.value
+                hover.value = false
               }}
               style="transform-origin: 50% 50%;"
               fill="url(#mode-switch-selected)"

src/layout/useLayoutStore.ts

@@ -132,7 +132,7 @@ export default defineStore('layout', () => {
       if (!res) return
       state.dir = res.dir
       state.content = res.content
-
+      state.dock = res.dock
     }).catch(() => {
       Object.assign(state, defaultLayout)
 

src/user/useUserStore.ts

@@ -128,6 +128,7 @@ export default defineStore('user', () => {
     if (!remoteAddList.value) return
     console.log({ ...remoteAddList.value })
     remoteAddList.value.map((item) => {
+      if (item.link)
         layout.state.content[layout.state.current].pages[layout.state.currentPage].list.push(item)
     })
   }