图标缺少编辑功能

2024-11-15 17:32:26 +08:00 · 2024-11-15 17:32:26 +08:00 · 8efdd59010
parent 4dc8cc349a
commit 8efdd59010
6 changed files with 137 additions and 53 deletions
--- a/public/icons/bgGameCloud.png
+++ b/public/icons/bgGameCloud.png
--- a/src/layout/GlobalMenu.tsx
+++ b/src/layout/GlobalMenu.tsx
@ -17,9 +17,9 @@ const defaultDisplay = {
 export const useMenuStore = defineStore('menu', () => {
  const display = reactive(defaultDisplay)
  const selectPage = ref<{
-    id: string,
-    label: string,
-    name: string,
+    id: string
+    label: string
+    name: string
  }>()
  const showEditPage = ref(false)
  const mPos = {
@ -83,8 +83,8 @@ const Item = defineComponent({
        style={
          props.noStyle
            ? {
-              padding: '6px 10px'
-            }
+                padding: '6px 10px'
+              }
            : {}
        }
        onClick={() => {
@ -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={() => {
--- a/src/layout/adder/AdderPage.tsx
+++ b/src/layout/adder/AdderPage.tsx
@ -145,29 +145,31 @@ export default defineComponent(() => {
                }))}
              />
            </Form.Item>
-            <Form.Item>
-              <Input.Search
-                onSearch={(e) => {
-                  if (store.type === 1) {
-                    store.search(e)
-                  } else if (store.type === 0) {
-                    store.widgetSearchWords = e
-                  } else if (store.type === 3) {
-                    store.gameSearch = e
+            {store.type !== 2 && (
+              <Form.Item>
+                <Input.Search
+                  onSearch={(e) => {
+                    if (store.type === 1) {
+                      store.search(e)
+                    } else if (store.type === 0) {
+                      store.widgetSearchWords = e
+                    } else if (store.type === 3) {
+                      store.gameSearch = e
+                    }
+                  }}
+                  class="w-[220px]"
+                  placeholder={
+                    store.type === 0
+                      ? '搜索想要添加的组件'
+                      : store.type === 1
+                        ? '搜索想要添加的网址导航'
+                        : store.type === 2
+                          ? ''
+                          : '搜索想要添加的游戏'
                  }
-                }}
-                class="w-[220px]"
-                placeholder={
-                  store.type === 0
-                    ? '搜索想要添加的组件'
-                    : store.type === 1
-                      ? '搜索想要添加的网址导航'
-                      : store.type === 2
-                        ? ''
-                        : '搜索想要添加的游戏'
-                }
-              />
-            </Form.Item>
+                />
+              </Form.Item>
+            )}
          </Form>
          <div class="w-full h-0 flex-grow p-6">
            <div class="w-full h-full relative">
--- a/src/layout/adder/CustomAdder.tsx
+++ b/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,21 +250,38 @@ export default defineComponent(() => {
                globalToast.error('文字图标请至少填写文字或者名称')
                return
              }
-              const id = uuid()
-              const data: Block = {
-                id,
-                link: form.link,
-                name: '',
-                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
+              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,
+                  link: form.link,
+                  name: '',
+                  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
+                }
+                layout.addBlock(data, addTo?.value)
              }
-              layout.addBlock(data, addTo?.value)
            }}
          >
            确定
--- a/src/layout/adder/useAdderPageStore.tsx
+++ b/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
  }
 })
--- a/src/layout/useLayoutStore.ts
+++ b/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
  }
 })