change

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)' }}

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>
+  )
+})

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
+        {settings.state.showBlockLabel && (
-          class="absolute left-0 -bottom-2 text-sm text-white text-center w-full overflow-hidden text-ellipsis whitespace-nowrap break-all font-bold"
+          <div
-          style="text-shadow: 0 0 4px rgba(0,0,0,.6)"
+            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>
+            {layout.getLabel(props.block)}
+          </div>
+        )}
       </div>
     )
   }

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>

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">
+        {settings.state.showAdder && (
-          <div
+          <div class="w-full h-full flex justify-center items-center p-[var(--block-padding)] relative operation-button">
-            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"
+            <div
-            onClick={() => {
+              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"
-              if (layout.state.content[layout.state.current].pages[layout.state.currentPage]) {
+              onClick={() => {
-                router.go('global-adder')
+                if (layout.state.content[layout.state.current].pages[layout.state.currentPage]) {
-              } else {
+                  router.go('global-adder')
-                globalToast.warning('请先添加页面')
+                } 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 style="filter:drop-shadow(0 0 10px hsl(32, 90%, 65%))">
-            </span>
+                <OhVueIcon name="md-add" fill="white" scale={2.4} />
+              </span>
+            </div>
           </div>
-        </div>
+        )}
       </div>
     </div>
   )

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>

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>

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