图标缺少编辑功能

src/layout/GlobalMenu.tsx

@@ -17,9 +17,9 @@ const defaultDisplay = {
 export const useMenuStore = defineStore('menu', () => {
   const display = reactive(defaultDisplay)
   const selectPage = ref<{
-    id: string,
+    id: string
-    label: string,
+    label: string
-    name: string,
+    name: string
   }>()
   const showEditPage = ref(false)
   const mPos = {
@@ -207,9 +207,11 @@ export default defineComponent(() => {
                   alert
                   onClick={() => {
                     // 删除链接
-                    console.log(menu.selectPage);
+                    console.log(menu.selectPage)
 
-                    const idx = layout.state.content[layout.state.current].pages.findIndex(el => el.id === menu.selectPage?.id)
+                    const idx = layout.state.content[layout.state.current].pages.findIndex(
+                      (el) => el.id === menu.selectPage?.id
+                    )
                     menu.dismiss()
 
                     if (idx < 0) return
@@ -315,7 +317,25 @@ export default defineComponent(() => {
           // 链接
           return (
             <>
-              <Item>编辑</Item>
+              <Item
+                onClick={() => {
+                  useAdderPageStore().editBlockItem = {
+                    id: block.id,
+                    name: block.name,
+                    link: block.link,
+                    icon: block.icon,
+                    text: block.text,
+                    background: block.background,
+                    color: block.color,
+                    type: block.color ? 1 : 0
+                  }
+                  router.go('global-adder')
+                  useAdderPageStore().type = 2
+                  menu.dismiss()
+                }}
+              >
+                编辑
+              </Item>
               <Item
                 alert
                 onClick={() => {

src/layout/adder/AdderPage.tsx

@@ -145,6 +145,7 @@ export default defineComponent(() => {
                 }))}
               />
             </Form.Item>
+            {store.type !== 2 && (
               <Form.Item>
                 <Input.Search
                   onSearch={(e) => {
@@ -168,6 +169,7 @@ export default defineComponent(() => {
                   }
                 />
               </Form.Item>
+            )}
           </Form>
           <div class="w-full h-0 flex-grow p-6">
             <div class="w-full h-full relative">

src/layout/adder/CustomAdder.tsx

@@ -1,4 +1,4 @@
-import { computed, defineComponent, inject, reactive, ref, watch } from 'vue'
+import { computed, defineComponent, inject, onMounted, reactive, ref, watch } from 'vue'
 import useLayoutStore from '../useLayoutStore'
 import { Button, Form, Input, InputGroup } from 'ant-design-vue'
 import { OhVueIcon, addIcons } from 'oh-vue-icons'
@@ -12,7 +12,9 @@ import 'vue3-colorpicker/style.css'
 import { globalToast } from '@/main'
 import UploadAndCut from '@/utils/UploadAndCut'
 import { AddToToken } from './AdderPage'
-
+import DefaultImg from '/tab/icons/bgGameCloud.png'
+import useAdderPageStore, { type EditBlockItemType } from './useAdderPageStore'
+import useRouterStore from '@/useRouterStore'
 addIcons(MdUpload, MdImage, MdCheck)
 
 const TypeSelector = defineComponent({
@@ -47,6 +49,7 @@ const TypeSelector = defineComponent({
     'update:icon': (() => true) as (val: string) => boolean
   },
   setup(props, ctx) {
+    const layout = useLayoutStore()
     return () => (
       <div class="flex gap-4">
         <div class={'flex justify-center flex-col items-center gap-y-1'}>
@@ -60,7 +63,7 @@ const TypeSelector = defineComponent({
               ctx.emit('update:value', 0)
             }}
           >
-            {!props.icon && <OhVueIcon name="md-image" fill="white" scale={1.8} />}
+            {!props.icon && <img src={DefaultImg}></img>}
             {props.value === 0 && (
               <div
                 class={
@@ -113,10 +116,11 @@ const TypeSelector = defineComponent({
                 ctx.emit('update:icon', e)
               }}
             ></ImageUploader> */}
-            <UploadAndCut onUpdate:value={(e)=> {
+            <UploadAndCut
+              onUpdate:value={(e) => {
                 ctx.emit('update:icon', e)
-
+              }}
-            }}></UploadAndCut>
+            ></UploadAndCut>
           </div>
           <span class={'text-[12px]'}>自定义</span>
         </div>
@@ -134,9 +138,21 @@ export default defineComponent(() => {
     color: 'rgb(255,255,255)',
     icon: '',
     type: 0 // 0 默认，1 文字
-  })
+  } as EditBlockItemType)
   const isGame = computed(() => layout.state.current === 0)
   const debounced = ref('')
+  const store = useAdderPageStore()
+  onMounted(() => {
+    if (store.editBlockItem !== null) {
+      form.link = store.editBlockItem.link
+      form.name = store.editBlockItem.name
+      form.icon = store.editBlockItem.icon
+      form.text = store.editBlockItem.text
+      form.background = store.editBlockItem.background
+      form.color = store.editBlockItem.color
+      form.type = store.editBlockItem.type
+    }
+  })
   watch(
     () => form.link,
     (val, _, onCleanup) => {
@@ -234,6 +250,20 @@ export default defineComponent(() => {
                 globalToast.error('文字图标请至少填写文字或者名称')
                 return
               }
+              if (!form.link) {
+                globalToast.warning('请输入网站链接')
+                return
+              }
+              if (!form.name) {
+                globalToast.warning('请输入网站名称')
+                return
+              }
+              if (store.editBlockItem !== null) {
+                console.log(123)
+                layout.changeBlock(form, store.editBlockItem.id)
+                useRouterStore().back()
+                store.editBlockItem = null
+              } else {
                 const id = uuid()
                 const data: Block = {
                   id,
@@ -245,10 +275,13 @@ export default defineComponent(() => {
                   w: 1,
                   h: 1,
                   text:
-                  form.type === 0 ? '' : form.text || form.name.substring(0, 2).toLocaleUpperCase(),
+                    form.type === 0
+                      ? ''
+                      : form.text || form.name.substring(0, 2).toLocaleUpperCase(),
                   label: form.name
                 }
                 layout.addBlock(data, addTo?.value)
+              }
             }}
           >
             确定

src/layout/adder/useAdderPageStore.tsx

@@ -17,6 +17,16 @@ export interface HotAppCategoryType {
   name: string
   ordinal: number
 }
+export type EditBlockItemType = {
+  id: string
+  link: string
+  name: string
+  text: string
+  background: string
+  color: string
+  icon: string
+  type: number // 0 默认，1 文字
+}
 export default defineStore('adderPage', () => {
   const type = ref(1)
   const selectType = ref('')
@@ -26,6 +36,7 @@ export default defineStore('adderPage', () => {
   const isSearch = ref(false)
   const widgetSearchWords = ref('')
   const gameSearch = ref('')
+  const editBlockItem = ref<EditBlockItemType | null >(null)
   request<HotAppCategoryType[]>('GET', '/api/app/hotAppTypes').then((res) => {
     categoryList.value = res.map((el) => ({
       id: el.id,
@@ -78,6 +89,7 @@ export default defineStore('adderPage', () => {
     selectType,
     search,
     isSearch,
-    gameSearch
+    gameSearch,
+    editBlockItem
   }
 })

src/layout/useLayoutStore.ts

@@ -8,6 +8,7 @@ import jump from '@/utils/jump'
 import useSettingsStore from '@/settings/useSettingsStore'
 import useUserStore from '@/user/useUserStore'
 import request from '@/utils/request'
+import type { EditBlockItemType } from './adder/useAdderPageStore'
 
 const defaultLayout: Layout = {
   content: [
@@ -78,6 +79,21 @@ export default defineStore('layout', () => {
     pageList.push(block)
     globalToast.success('添加成功')
   }
+  const changeBlock = (item: EditBlockItemType, target: string) => {
+    const idx = currentPage.value.list.findIndex((el) => el.id === target)
+    if (idx < 0) return
+    currentPage.value.list.splice(idx, 1, {
+      ...currentPage.value.list[idx],
+      label: item.name,
+      color: item.color,
+      text: item.text,
+      link: item.link,
+      background: item.background,
+      icon: item.type === 0 ? item.icon : '',
+
+    })
+
+  }
   const openDir = ref('')
   // 文件夹只有一个时，将当前界面的文件夹替换为图标
   const checkDir = (id: string) => {
@@ -172,6 +188,7 @@ export default defineStore('layout', () => {
     checkDir,
     getLabel,
     changeBackground,
-    resetAll
+    resetAll,
+    changeBlock
   }
 })