From 121e9bcc69e1fdc6d953b7dec1268557a80e981c Mon Sep 17 00:00:00 2001 From: expdsn <18111002318@163.com> Date: Thu, 31 Oct 2024 14:41:37 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E4=BA=86=E5=BA=95=E9=83=A8?= =?UTF-8?q?=E6=A0=8F=E8=AE=BE=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layout/dock/index.tsx | 147 ++++++++++++++++++-------------- src/layout/grid/DockSetting.tsx | 60 +++++++++++-- 2 files changed, 136 insertions(+), 71 deletions(-) diff --git a/src/layout/dock/index.tsx b/src/layout/dock/index.tsx index 3352115..04cf90b 100644 --- a/src/layout/dock/index.tsx +++ b/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 () => ( -
{ - current.value = -1 - }} - > - {layout.state.dockLabels.split('').map((l, i) => { - const block = layout.state.dock[i] - return ( -
= 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 !== '' && ( +
{ + 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' + } + > +
{ + current.value = -1 + }} + > + {layout.state.dockLabels.split('').map((l, i) => { + const block = layout.state.dock[i] + return ( +
= 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 && } -
- {l} -
-
- ) - })} -
- ) + }} + > + {block && } +
+ {l} +
+
+ ) + })} +
+
+ ) }) diff --git a/src/layout/grid/DockSetting.tsx b/src/layout/grid/DockSetting.tsx index 1ea6229..a67bc0f 100644 --- a/src/layout/grid/DockSetting.tsx +++ b/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 () => (
{ - if (e) settings.state.showDock = '' - else settings.state.showDock = 'show' + if (e) settings.state.showDock = 'show' + else settings.state.showDock = '' }} /> {' '} @@ -47,9 +68,30 @@ export default defineComponent({
{layout.state.dockLabels.split('').map((val, idx) => (
- {idx + 1} -
- + {idx + 1} +
+