change

src/App.vue

@@ -6,6 +6,7 @@ import GLobalModal from './GlobalModal'
 import SettingsButton from './settings/SettingsButton'
 import SettingsOverlay from './settings/SettingsOverlay'
 import Sider from './layout/sider'
+import Dock from './layout/dock'
 import LoginModal from './user/LoginModal'
 import { computed } from 'vue'
 import asyncLoader from './utils/asyncLoader'
@@ -29,6 +30,7 @@ const layout = useLayoutStore()
     <Sider />
     <LoginModal />
     <Grid v-if="layout.ready" />
+    <Dock />
     <div class="fixed z-40 right-[14%] top-8">
       <Fox />
     </div>

src/fox/index.tsx

@@ -63,6 +63,20 @@ export default defineComponent(() => {
       run('shuixing')
     }
   })
+  const handle = () => {
+    if (document.visibilityState === 'visible') {
+      sleep.value = false
+      run('shuixing')
+    }
+  }
+  let it: any = 0
+  const handleMove = () => {
+    clearTimeout(it)
+    sleep.value = false
+    it = setTimeout(() => {
+      sleep.value = true
+    }, 10000)
+  }
   onMounted(async () => {
     if (!container) return
     await app.init({
@@ -86,26 +100,12 @@ export default defineComponent(() => {
       },
       { immediate: true }
     )
-    const handle = () => {
-      if (document.visibilityState === 'visible') {
-        sleep.value = false
-        run('shuixing')
-      }
-    }
     window.addEventListener('visibilitychange', handle)
-    let it: any = 0
-    const handleMove = () => {
-      clearTimeout(it)
-      sleep.value = false
-      it = setTimeout(() => {
-        sleep.value = true
-      }, 10000)
-    }
     window.addEventListener('mousemove', handleMove)
-    onUnmounted(() => {
+  })
-      window.removeEventListener('visibilitychange', handle)
+  onUnmounted(() => {
-      window.removeEventListener('mousemove', handleMove)
+    window.removeEventListener('visibilitychange', handle)
-    })
+    window.removeEventListener('mousemove', handleMove)
   })
 
   const router = useRouterStore()

src/layout/adder/CustomAdder.tsx

@@ -4,7 +4,7 @@ import { Button, Form, Input, InputGroup } from 'ant-design-vue'
 import { OhVueIcon, addIcons } from 'oh-vue-icons'
 import { MdUpload, MdImage, MdCheck } from 'oh-vue-icons/icons'
 import ImageUploader from '@/utils/ImageUploader'
-import useLink from './useLink'
+import useLink from '../../utils/useLink'
 import { CheckOutlined } from '@ant-design/icons-vue'
 import { v4 as uuid } from 'uuid'
 import type { Block } from '../layout.types'
@@ -183,22 +183,36 @@ export default defineComponent(() => {
         </Form.Item>
         {form.type === 1 && (
           <>
-            <Form.Item label="文字颜色">
+            <div class="flex">
-              <ColorPicker
+              <Form.Item
-                class="shadow-lg"
+                label="文字颜色"
-                format="rgb"
+                class="w-0 flex-grow"
-                shape="square"
+                labelCol={{
-                v-model:pureColor={form.color}
+                  span: 8
-              />
+                }}
-            </Form.Item>
+              >
-            <Form.Item label="图标背景">
+                <ColorPicker
-              <ColorPicker
+                  class="shadow-lg"
-                class="shadow-lg"
+                  format="rgb"
-                format="rgb"
+                  shape="square"
-                shape="square"
+                  v-model:pureColor={form.color}
-                v-model:pureColor={form.background}
+                />
-              />
+              </Form.Item>
-            </Form.Item>
+              <Form.Item
+                label="图标背景"
+                class="w-0 flex-grow"
+                labelCol={{
+                  span: 8
+                }}
+              >
+                <ColorPicker
+                  class="shadow-lg"
+                  format="rgb"
+                  shape="square"
+                  v-model:pureColor={form.background}
+                />
+              </Form.Item>
+            </div>
             <Form.Item label="图标文字">
               <Input v-model:value={form.text} maxlength={2} />
             </Form.Item>
@@ -216,17 +230,17 @@ export default defineComponent(() => {
               }
               const id = uuid()
               const data: Block = {
+                id,
                 link: form.link,
                 name: '',
-                icon: form.type === 0 ? info.icon : '',
+                icon: form.type === 0 ? form.icon || info.icon : '',
                 background: form.type === 0 ? '' : form.background,
                 color: form.type === 0 ? '' : form.color,
+                w: 1,
+                h: 1,
                 text:
                   form.type === 0 ? '' : form.text || form.name.substring(0, 2).toLocaleUpperCase(),
-                label: form.name,
+                label: form.name
-                extra: {
-                  id
-                }
               }
               layout.addBlock(data)
             }}

src/layout/dock/index.tsx

@@ -0,0 +1,55 @@
+import { computed, defineComponent } from 'vue'
+import useLayoutStore from '../useLayoutStore'
+import useSortable, { dragging } from '../grid/useSortable'
+import LinkBlock from '../grid/LinkBlock'
+
+export default defineComponent(() => {
+  const layout = useLayoutStore()
+  const container = useSortable(
+    computed(() => layout.state.dock),
+    'dock'
+  )
+
+  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}
+    >
+      {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"
+            id={block?.id || ''}
+            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]
+                layout.state.dock[i] = block
+                layout.currentPage.list.splice(oldIdx, 1)
+                return
+              }
+              if (dragging.type && dragging.type !== 'dock') {
+                // TODO: 文件夹
+                return
+              }
+            }}
+          >
+            {block && <LinkBlock block={block} />}
+            <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>
+  )
+})

src/layout/grid/LinkBlock.tsx

@@ -0,0 +1,26 @@
+import { defineComponent } from 'vue'
+import type { Block } from '../layout.types'
+
+export default defineComponent({
+  props: {
+    block: {
+      type: Object as () => Block,
+      required: true
+    }
+  },
+  setup(props) {
+    return () => (
+      <div
+        class="w-full h-full flex justify-center items-center font-bold bg-cover bg-center bg-no-repeat"
+        style={{
+          backgroundColor: props.block.background || 'white',
+          color: props.block.color || 'black',
+          backgroundImage: props.block.icon ? `url('${props.block.icon}')` : '',
+          fontSize: 'calc(var(--block-size) / 4.4)'
+        }}
+      >
+        <div>{props.block.text}</div>
+      </div>
+    )
+  }
+})

src/layout/grid/index.tsx

@@ -1,52 +1,22 @@
-import { defineComponent, onMounted } from 'vue'
+import { computed, defineComponent, TransitionGroup } from 'vue'
 import useLayoutStore from '../useLayoutStore'
 import { OhVueIcon, addIcons } from 'oh-vue-icons'
 import { MdAdd } from 'oh-vue-icons/icons'
 import useRouterStore from '@/useRouterStore'
-import Sortable from 'sortablejs'
+import { globalToast } from '@/main'
+import LinkBlock from './LinkBlock'
+import useSortable, { dragging } from './useSortable'
 
 addIcons(MdAdd)
 
 export default defineComponent(() => {
   const layout = useLayoutStore()
   const router = useRouterStore()
-  let container: HTMLDivElement | null = null
+  const container = useSortable(
-  onMounted(() => {
+    computed(() => layout.currentPage.list),
-    if (!container) return
+    'page'
-    new Sortable(container, {
+  )
-      animation: 400,
+
-      scroll: true,
-      scrollSensitivity: 200,
-      scrollSpeed: 10,
-      invertSwap: true,
-      invertedSwapThreshold: 1,
-      filter: '.operation-button',
-      ghostClass: 'opacity-20',
-      dragClass: 'dragging-block',
-      onStart: (e) => {
-        //   layout.moving.id = e.item.id
-        //   layout.moving.type = e.item.dataset?.type || ''
-      },
-      onMove: (e) => {
-        if (e.related.className.includes('operation-button') && e.willInsertAfter) return false
-      },
-      onEnd: (e) => {
-        //   const oldPath = e.from.dataset.path
-        //   const newPath = e.to.dataset.path
-        //   if (e.oldIndex === undefined || e.newIndex === undefined || !oldPath || !newPath) return
-        //   const oldIndex = e.oldIndex
-        //   const newIndex = e.newIndex
-        //   const oldList = useSortList(oldPath as any)
-        //   const newList = useSortList(newPath as any)
-        //   const item = oldList[oldIndex]
-        //   if (!item || !isReactive(oldList) || !isReactive(newList)) return
-        //   oldList.splice(oldIndex, 1)
-        //   newList.splice(newIndex, 0, item)
-        //   layout.moving.id = ''
-        //   layout.moving.type = ''
-      }
-    })
-  })
   return () => (
     <div
       class="absolute left-0 top-0 w-full h-screen overflow-y-auto no-scrollbar pt-[240px] px-[calc((100%_-_var(--main-width))_/_2)]"
@@ -59,20 +29,100 @@ export default defineComponent(() => {
           layout.isCompact = false
         }
       }}
+      onDragover={(e) => e.preventDefault()}
+      onDrop={() => {
+        // 处理移入（当前有内容不可移入）
+        if (!dragging.id) return
+        if (dragging.type === 'dock') {
+          const oldIdx = layout.state.dock.findIndex((el) => el?.id === dragging.id)
+          if (oldIdx < 0) return
+          const block = layout.state.dock[oldIdx]
+          if (!block) return
+          layout.currentPage.list.push(block)
+          layout.state.dock[oldIdx] = null
+          return
+        }
+        if (dragging.type && dragging.type !== 'dock') {
+          // TODO: 文件夹
+          return
+        }
+      }}
     >
       <div
         class="w-full grid justify-center grid-flow-row-dense pb-[200px]"
-        style="grid-template-columns:repeat(auto-fill, var(--block-size));grid-auto-rows:var(--block-size);grid-template-rows:var(--block-size)"
+        style="grid-template-columns:repeat(auto-fill, var(--block-size));grid-auto-rows:var(--block-size)"
-        ref={(el) => (container = el as any)}
+        ref={container}
       >
+        <TransitionGroup>
+          {layout.currentPage.list.map((block, idx) => (
+            <div
+              class="w-full h-full p-[var(--block-padding)] relative"
+              key={block.id}
+              id={block.id}
+              style={{
+                gridColumn: `span ${block.w}`,
+                gridRow: `span ${block.h}`
+              }}
+              data-transportable={block.link && !block.link.startsWith('id:') ? '1' : ''}
+              onDragover={(e) => e.preventDefault()}
+              onDrop={() => {
+                // 处理移入（当前有内容不可移入）
+                if (!dragging.id) return
+                if (dragging.type === 'dock') {
+                  const oldIdx = layout.state.dock.findIndex((el) => el?.id === dragging.id)
+                  if (oldIdx < 0) return
+                  const block = layout.state.dock[oldIdx]
+                  if (!block) return
+                  layout.currentPage.list.splice(idx, 0, block)
+                  layout.state.dock[oldIdx] = null
+                  return
+                }
+                if (dragging.type && dragging.type !== 'dock') {
+                  // TODO: 文件夹
+                  return
+                }
+              }}
+            >
+              <div
+                class="w-full h-full overflow-hidden relative cursor-pointer shadow-lg"
+                style="border-radius:calc(var(--block-radius) * var(--block-size))"
+              >
+                {block.link ? (
+                  block.link.startsWith('id:') ? (
+                    // 文件夹
+                    <div></div>
+                  ) : (
+                    // 链接
+                    <LinkBlock block={block} />
+                  )
+                ) : (
+                  // 小组件
+                  <div></div>
+                )}
+              </div>
+              <div
+                class="absolute left-0 -bottom-2 text-sm text-white text-center w-full overflow-hidden text-ellipsis whitespace-nowrap break-all font-bold"
+                style="text-shadow: 0 0 4px rgba(0,0,0,.6)"
+              >
+                {block.label}
+              </div>
+            </div>
+          ))}
+        </TransitionGroup>
         <div class="w-full h-full flex justify-center items-center p-[var(--block-padding)] relative operation-button">
           <div
             class="w-full h-full overflow-hidden rounded-[calc(var(--block-radius)_*_var(--block-size))] bg-white/80 backdrop-blur flex justify-center items-center cursor-pointer hover:scale-105 transition-all"
             onClick={() => {
-              router.path = 'global-adder'
+              if (layout.state.content[layout.state.current].pages[layout.state.currentPage]) {
+                router.path = 'global-adder'
+              } else {
+                globalToast.warning('请先添加页面')
+              }
             }}
           >
-            <OhVueIcon name="md-add" fill="white" scale={2} />
+            <span style="filter:drop-shadow(0 0 10px hsl(32, 90%, 65%))">
+              <OhVueIcon name="md-add" fill="white" scale={2.4} />
+            </span>
           </div>
         </div>
       </div>

src/layout/grid/useSortable.ts

@@ -0,0 +1,56 @@
+import Sortable from 'sortablejs'
+import { ref, watch, type Ref } from 'vue'
+
+export const dragging = {
+  type: '',
+  id: '',
+  transportable: false
+}
+
+export default function useSortable(list: Ref<any[]>, type = '') {
+  const container = ref<HTMLDivElement | null>(null)
+  watch(
+    container,
+    (el, _, onClean) => {
+      if (!el) return
+      const s = new Sortable(el, {
+        animation: 400,
+        scroll: true,
+        scrollSensitivity: 200,
+        scrollSpeed: 10,
+        ...(type === 'page'
+          ? {
+              invertSwap: true,
+              invertedSwapThreshold: 1,
+              filter: '.operation-button'
+            }
+          : {}),
+        ghostClass: 'opacity-20',
+        onStart: (e: any) => {
+          dragging.type = type
+          dragging.id = e.item.id || ''
+          // 只有链接才能被拖拽到其他区域
+          dragging.transportable = e.item.dataset?.transportable ? true : false
+        },
+        onMove: (e) => {
+          if (e.related.className.includes('operation-button') && e.willInsertAfter) return false
+        },
+        onEnd: (e) => {
+          // 同区域拖拽，直接交换位置
+          if (dragging.type !== type) return
+          const oldIdx = e.oldIndex
+          const newIdx = e.newIndex
+          if (oldIdx === undefined || newIdx === undefined) return
+          const oldItem = list.value[oldIdx]
+          list.value.splice(oldIdx, 1)
+          list.value.splice(newIdx, 0, oldItem)
+        }
+      })
+      onClean(() => {
+        s.destroy()
+      })
+    },
+    { flush: 'post' }
+  )
+  return container
+}

src/layout/layout.types.ts

@@ -5,6 +5,7 @@ export enum BlockType {
 }
 
 export interface Block {
+  id: string
   link: string // '' 代表小组件，id:xxx 代表文件夹，其他代表链接
   // 内容标注，小组件表示展示何种小组件
   name: string
@@ -18,6 +19,9 @@ export interface Block {
   background: string
   // 文字颜色
   color: string
+  // 宽高
+  w: number
+  h: number
   // 其他信息
   extra?: any
 }
@@ -45,5 +49,6 @@ export interface Layout {
     Block | null,
     Block | null
   ]
+  dockLabels: string
   simple: boolean
 }

src/layout/useLayoutStore.ts

@@ -15,6 +15,7 @@ const defaultLayout: Layout = {
   currentPage: 0,
   dir: {},
   dock: [null, null, null, null, null, null, null, null, null, null],
+  dockLabels: 'QWERASDFGB',
   simple: false
 }
 
@@ -71,6 +72,7 @@ export default defineStore('layout', () => {
     pageList.push(block)
     globalToast.success('添加成功')
   }
+
   return {
     state,
     ready,