change

2024-10-10 16:04:00 +08:00 · 2024-10-10 16:04:00 +08:00 · 32405f6a20
parent 356b68c361
commit 32405f6a20
8 changed files with 134 additions and 27 deletions
--- a/src/layout/dock/index.tsx
+++ b/src/layout/dock/index.tsx
@ -10,6 +10,12 @@ export default defineComponent(() => {
    ref('dock')
  )
  const current = ref(-1)
+  // window.addEventListener('keydown', (e) => {
+  //   const i = layout.state.dockLabels.indexOf(e.key)
+  //   if (i >= 0) {
+  //     layout.state.dock[i] = null
+  //   }
+  // })

  return () => (
    <div
@ -61,7 +67,7 @@ export default defineComponent(() => {
              }
            }}
          >
-            {block && <LinkBlock block={block} />}
+            {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)' }}
--- a/src/layout/grid/BlockSettings.tsx
+++ b/src/layout/grid/BlockSettings.tsx
@ -0,0 +1,88 @@
+import SettingItem from '@/settings/SettingItem'
+import useSettingsStore from '@/settings/useSettingsStore'
+import { Slider, Switch } from 'ant-design-vue'
+import { defineComponent } from 'vue'
+
+export default defineComponent(() => {
+  const settings = useSettingsStore()
+  return () => (
+    <div class="p-4">
+      <SettingItem
+        noRoundedB
+        v-slots={{
+          label: () => <div>图标大小</div>
+        }}
+      >
+        <Slider
+          v-model:value={settings.state.blockSize}
+          step={0.1}
+          tooltipOpen={false}
+          min={4}
+          max={10}
+        />
+      </SettingItem>
+      <SettingItem
+        noRoundedT
+        noRoundedB
+        v-slots={{
+          label: () => <div>图标间距</div>
+        }}
+      >
+        <Slider
+          v-model:value={settings.state.blockPadding}
+          step={0.1}
+          tooltipOpen={false}
+          min={1}
+          max={2}
+        />
+      </SettingItem>
+      <SettingItem
+        noRoundedT
+        noRoundedB
+        v-slots={{
+          label: () => <div>区域宽度</div>
+        }}
+      >
+        <Slider
+          v-model:value={settings.state.mainWidth}
+          step={1}
+          tooltipOpen={false}
+          min={40}
+          max={80}
+        />
+      </SettingItem>
+      <SettingItem
+        noRoundedT
+        noRoundedB
+        v-slots={{
+          label: () => <div>图标圆角</div>
+        }}
+      >
+        <Slider
+          v-model:value={settings.state.blockRadius}
+          step={0.1}
+          tooltipOpen={false}
+          min={0}
+          max={1}
+        />
+      </SettingItem>{' '}
+      <SettingItem
+        noRoundedT
+        noRoundedB
+        v-slots={{
+          label: () => <div>添加图标</div>
+        }}
+      >
+        <Switch v-model:checked={settings.state.showAdder} />
+      </SettingItem>
+      <SettingItem
+        noRoundedT
+        v-slots={{
+          label: () => <div>显示标签</div>
+        }}
+      >
+        <Switch v-model:checked={settings.state.showBlockLabel} />
+      </SettingItem>
+    </div>
+  )
+})
--- a/src/layout/grid/BlockWrapper.tsx
+++ b/src/layout/grid/BlockWrapper.tsx
@ -6,6 +6,7 @@ import useLayoutStore from '../useLayoutStore'
 import LinkBlock from './LinkBlock'
 import DirBlock from './DirBlock'
 import WidgetBlock from './WidgetBlock'
+import useSettingsStore from '@/settings/useSettingsStore'

 export default defineComponent({
  props: {
@ -19,6 +20,7 @@ export default defineComponent({
    }
  },
  setup(props) {
+    const settings = useSettingsStore()
    const layout = useLayoutStore()
    let it = 0
    const hover = ref(false)
@ -128,12 +130,14 @@ export default defineComponent({
            <WidgetBlock block={props.block} />
          )}
        </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)"
-        >
-          {layout.getLabel(props.block)}
-        </div>
+        {settings.state.showBlockLabel && (
+          <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)"
+          >
+            {layout.getLabel(props.block)}
+          </div>
+        )}
      </div>
    )
  }
--- a/src/layout/grid/LinkBlock.tsx
+++ b/src/layout/grid/LinkBlock.tsx
@ -11,6 +11,10 @@ export default defineComponent({
    brief: {
      type: Boolean,
      default: false
+    },
+    dock: {
+      type: Boolean,
+      default: false
    }
  },
  setup(props) {
@ -26,7 +30,7 @@ export default defineComponent({
          backgroundColor: props.block.background || 'white',
          color: props.block.color || 'black',
          backgroundImage: props.block.icon ? `url('${props.block.icon}')` : '',
-          fontSize: props.brief ? '12px' : 'calc(var(--block-size) / 5)'
+          fontSize: props.dock ? '16px' : props.brief ? '12px' : 'calc(var(--block-size) / 5)'
        }}
      >
        <div>{props.brief ? props.block.text[0] : props.block.text}</div>
--- a/src/layout/grid/index.tsx
+++ b/src/layout/grid/index.tsx
@ -6,11 +6,13 @@ import useRouterStore from '@/useRouterStore'
 import { globalToast } from '@/main'
 import useSortable, { dragging, resetDragging } from './useSortable'
 import BlockWrapper from './BlockWrapper'
+import useSettingsStore from '@/settings/useSettingsStore'

 addIcons(MdAdd)

 export default defineComponent(() => {
  const layout = useLayoutStore()
+  const settings = useSettingsStore()
  const router = useRouterStore()
  const container = useSortable(
    computed(() => layout.currentPage.list),
@ -62,22 +64,24 @@ export default defineComponent(() => {
        {layout.currentPage.list.map((block, idx) => (
          <BlockWrapper key={block.id} idx={idx} block={block} />
        ))}
-        <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/60 backdrop-blur flex justify-center items-center cursor-pointer hover:scale-105 transition-all"
-            onClick={() => {
-              if (layout.state.content[layout.state.current].pages[layout.state.currentPage]) {
-                router.go('global-adder')
-              } else {
-                globalToast.warning('请先添加页面')
-              }
-            }}
-          >
-            <span style="filter:drop-shadow(0 0 10px hsl(32, 90%, 65%))">
-              <OhVueIcon name="md-add" fill="white" scale={2.4} />
-            </span>
+        {settings.state.showAdder && (
+          <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/60 backdrop-blur flex justify-center items-center cursor-pointer hover:scale-105 transition-all"
+              onClick={() => {
+                if (layout.state.content[layout.state.current].pages[layout.state.currentPage]) {
+                  router.go('global-adder')
+                } else {
+                  globalToast.warning('请先添加页面')
+                }
+              }}
+            >
+              <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>
+        )}
      </div>
    </div>
  )
--- a/src/settings/SettingsOverlay.tsx
+++ b/src/settings/SettingsOverlay.tsx
@ -1,7 +1,6 @@
 import AvatarCircle from '@/user/AvatarCircle'
 import useRouterStore from '@/useRouterStore'
 import asyncLoader from '@/utils/asyncLoader'
-import { OhVueIcon } from 'oh-vue-icons'
 import { computed, defineComponent, Transition } from 'vue'
 const Content = asyncLoader(() => import('./SettingsOverlayContent'))

@ -77,9 +76,6 @@ export default defineComponent(() => {
              <SettingsTab label="问题反馈" path="settings-fallback" />
            </div>
            <Content />
-
-
-
          </div>
        )}
      </Transition>
--- a/src/settings/SettingsOverlayContent.tsx
+++ b/src/settings/SettingsOverlayContent.tsx
@ -3,6 +3,7 @@ import { defineComponent, Transition } from 'vue'
 import UserPage from '@/user/UserPage'
 import BackgroundPage from '@/layout/background/BackgroundPage'
 import ThemeProvider from '@/utils/ThemeProvider'
+import BlockSettings from '@/layout/grid/BlockSettings'
 export default defineComponent(() => {
  const router = useRouterStore()
  return () => (
@ -13,6 +14,8 @@ export default defineComponent(() => {
            <UserPage />
          ) : router.path === 'settings-background' ? (
            <BackgroundPage />
+          ) : router.path === 'settings-block' ? (
+            <BlockSettings />
          ) : null}
        </Transition>
      </ThemeProvider>
--- a/src/settings/useSettingsStore.ts
+++ b/src/settings/useSettingsStore.ts
@ -15,11 +15,13 @@ export default defineStore(
      showPet: 'show' as VisibleState,
      showDate: true,
      showTime: true,
+      showAdder: true,
      // 尺寸
      blockSize: 6,
      blockPadding: 1,
      mainWidth: 70,
      blockRadius: 0.2,
+      showBlockLabel: true,
      // 搜索
      searchWidth: 30,
      searchRadius: 24