完成了底部栏设置

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,67 +20,86 @@ export default defineComponent(() => {
   //     layout.state.dock[i] = null
   //   }
   // })
-
-  return () => (
-    <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"
-      ref={container}
-      onMouseleave={() => {
-        current.value = -1
-      }}
-    >
-      {layout.state.dockLabels.split('').map((l, i) => {
-        const block = layout.state.dock[i]
-        return (
-          <div
-            key={'block-' + i + (block?.id || '')}
-            class="w-[54px] h-[54px] rounded-lg overflow-hidden relative cursor-pointer transition-all"
-            style={
-              current.value >= 0
-                ? {
-                    transform: `translateY(${current.value === i - 1 || current.value === i + 1 ? '-5%' : current.value === i ? '-10%' : '0'}) scale(${current.value === i - 1 || current.value === i + 1 ? 1.1 : current.value === i ? 1.2 : 1})`
+  return () =>
+    setting.state.showDock !== '' && (
+      <div
+        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
+          }}
+        >
+          {layout.state.dockLabels.split('').map((l, i) => {
+            const block = layout.state.dock[i]
+            return (
+              <div
+                key={'block-' + i + (block?.id || '')}
+                class="w-[54px] h-[54px] rounded-lg overflow-hidden relative cursor-pointer transition-all"
+                style={
+                  current.value >= 0
+                    ? {
+                        transform: `translateY(${current.value === i - 1 || current.value === i + 1 ? '-5%' : current.value === i ? '-10%' : '0'}) scale(${current.value === i - 1 || current.value === i + 1 ? 1.1 : current.value === i ? 1.2 : 1})`
+                      }
+                    : {}
+                }
+                id={block?.id || ''}
+                onMousemove={() => {
+                  current.value = i
+                }}
+                onDragover={(e) => e.preventDefault()}
+                onDrop={() => {
+                  // 处理移入（当前有内容不可移入）
+                  if (!dragging.id || block || !dragging.transportable) return
+                  if (dragging.type === 'page') {
+                    const oldIdx = layout.currentPage.list.findIndex((el) => el.id === dragging.id)
+                    if (oldIdx < 0) return
+                    const block = layout.currentPage.list[oldIdx]
+                    if (!block) return
+                    layout.state.dock[i] = toRaw(block)
+                    layout.currentPage.list.splice(oldIdx, 1)
+                    resetDragging()
+                  } else if (dragging.type && dragging.type !== 'dock') {
+                    const list = layout.state.dir[dragging.type]?.list
+                    if (!list) return
+                    const idx = list.findIndex((el) => el.id === dragging.id)
+                    if (idx < 0) return
+                    const block = list[idx]
+                    layout.state.dock[i] = toRaw(block)
+                    list.splice(idx, 1)
+                    layout.checkDir(dragging.type)
+                    resetDragging()
                   }
-                : {}
-            }
-            id={block?.id || ''}
-            onMousemove={() => {
-              current.value = i
-            }}
-            onDragover={(e) => e.preventDefault()}
-            onDrop={() => {
-              // 处理移入（当前有内容不可移入）
-              if (!dragging.id || block || !dragging.transportable) return
-              if (dragging.type === 'page') {
-                const oldIdx = layout.currentPage.list.findIndex((el) => el.id === dragging.id)
-                if (oldIdx < 0) return
-                const block = layout.currentPage.list[oldIdx]
-                if (!block) return
-                layout.state.dock[i] = toRaw(block)
-                layout.currentPage.list.splice(oldIdx, 1)
-                resetDragging()
-              } else if (dragging.type && dragging.type !== 'dock') {
-                const list = layout.state.dir[dragging.type]?.list
-                if (!list) return
-                const idx = list.findIndex((el) => el.id === dragging.id)
-                if (idx < 0) return
-                const block = list[idx]
-                layout.state.dock[i] = toRaw(block)
-                list.splice(idx, 1)
-                layout.checkDir(dragging.type)
-                resetDragging()
-              }
-            }}
-          >
-            {block && <LinkBlock block={block} dock />}
-            <div
-              class="absolute z-10 left-0 bottom-0 w-full bg-black/20 text-[12px] text-white text-center"
-              style={{ boxShadow: block ? 'none' : '0 -4px 14px 0 rgba(0,0,0,.3)' }}
-            >
-              {l}
-            </div>
-          </div>
-        )
-      })}
-    </div>
-  )
+                }}
+              >
+                {block && <LinkBlock block={block} dock />}
+                <div
+                  class="absolute z-10 left-0 bottom-0 w-full bg-black/20 text-[12px] text-white text-center"
+                  style={{ boxShadow: block ? 'none' : '0 -4px 14px 0 rgba(0,0,0,.3)' }}
+                >
+                  {l}
+                </div>
+              </div>
+            )
+          })}
+        </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>
             ))}