完成了底部栏设置

src/layout/dock/index.tsx

@@ -2,9 +2,13 @@ import { computed, defineComponent, ref, toRaw } from 'vue'
 import useLayoutStore from '../useLayoutStore'
 import useSortable, { dragging, resetDragging } from '../grid/useSortable'
 import LinkBlock from '../grid/LinkBlock'
+import useSettingsStore from '@/settings/useSettingsStore'
+import clsx from 'clsx'
 
 export default defineComponent(() => {
   const layout = useLayoutStore()
+  const setting = useSettingsStore()
+  const show = ref(false)
   const container = useSortable(
     computed(() => layout.state.dock),
     ref('dock')
@@ -16,10 +20,28 @@ export default defineComponent(() => {
   //     layout.state.dock[i] = null
   //   }
   // })
-
-  return () => (
+  return () =>
+    setting.state.showDock !== '' && (
       <div
-      class="fixed bottom-4 left-1/2 -translate-x-1/2 p-4 rounded-lg bg-white/60 backdrop-blur flex gap-4 shadow-lg"
+        onMouseenter={() => {
+          show.value = true
+        }}
+        onMouseleave={() => {
+          show.value = false
+        }}
+        class={
+          'w-3/5 min-w-[800px]  h-[120px] fixed left-1/2 bottom-0 -translate-x-1/2'
+        }
+      >
+        <div
+          class={clsx(
+            'fixed bottom-4 left-1/2 duration-150 -translate-x-1/2 p-4 rounded-lg bg-white/60 backdrop-blur flex gap-4 shadow-lg',
+            setting.state.showDock === 'auto'
+              ? show.value
+                ? 'bottom-4'
+                : '-bottom-24'
+              : 'bottom-4'
+          )}
           ref={container}
           onMouseleave={() => {
             current.value = -1
@@ -78,5 +100,6 @@ export default defineComponent(() => {
             )
           })}
         </div>
+      </div>
     )
 })

src/layout/grid/DockSetting.tsx

@@ -2,16 +2,37 @@ import SettingItem from '@/settings/SettingItem'
 import useSettingsStore from '@/settings/useSettingsStore'
 import { Select, Switch } from 'ant-design-vue'
 import clsx from 'clsx'
-import { defineComponent } from 'vue'
+import { computed, defineComponent, toRaw } from 'vue'
 import useLayoutStore from '../useLayoutStore'
-
+export const Letter24 = [
+  'A',
+  'B',
+  'C',
+  'D',
+  'E',
+  'F',
+  'G',
+  'H',
+  'I',
+  'J',
+  'K',
+  'L',
+  'M',
+  'N',
+  'O',
+  'P',
+  'Q',
+  'R'
+]
 export default defineComponent({
   name: 'SiderSetting',
   props: {},
   setup() {
     const settings = useSettingsStore()
     const layout = useLayoutStore()
-
+    const letterArray = computed(() => {
+      return layout.state.dockLabels.split('')
+    })
     return () => (
       <div class="p-4 flex flex-col gap-y-1 ">
         <SettingItem
@@ -20,10 +41,10 @@ export default defineComponent({
           }}
         >
           <Switch
-            checked={settings.state.showDock === ''}
+            checked={settings.state.showDock !== ''}
             onUpdate:checked={(e) => {
-              if (e) settings.state.showDock = ''
-              else settings.state.showDock = 'show'
+              if (e) settings.state.showDock = 'show'
+              else settings.state.showDock = ''
             }}
           />
         </SettingItem>{' '}
@@ -47,9 +68,30 @@ export default defineComponent({
           <div class={'w-full grid grid-rows-5 grid-cols-2 gap-2 p-2'}>
             {layout.state.dockLabels.split('').map((val, idx) => (
               <div class="w-full flex gap-x-4">
-                <span>{idx + 1}</span>
-                <div class={'flex-1 bg-slate-50 rounded'}>
-
+                <span class={'w-[20px]'}>{idx + 1}</span>
+                <div
+                  class={
+                    'flex-1 bg-black/[0.05] text-[#333] border-[1px] py-1 rounded-lg relative flex items-center  pl-4 border-transparent hover:border-[#ffa94d]'
+                  }
+                >
+                  <Select
+                    onChange={(e) => {
+                      layout.state.dockLabels = letterArray.value
+                        .map((item, i) => {
+                          if (i === idx) return e
+                          return item
+                        })
+                        .join('')
+                    }}
+                    class={'opacity-0 w-full absolute left-0 top-0 right-0 bottom-0'}
+                    options={Letter24.filter((val) => !letterArray.value.includes(val)).map(
+                      (item) => ({
+                        value: item,
+                        label: item
+                      })
+                    )}
+                  />
+                  <span class="font-bold">{letterArray.value[idx]}</span>
                 </div>
               </div>
             ))}