From acc091644c4e80c9bfede9f423ef33c32253b2ff Mon Sep 17 00:00:00 2001
From: plightfield <1207120484@qq.com>
Date: Thu, 26 Sep 2024 11:47:16 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=B0=8F=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/icons/calendarIcon.png    | Bin 0 -> 2721 bytes
 src/layout/adder/AdderPage.tsx   |  34 +++++++++++++--
 src/layout/adder/CustomAdder.tsx |   6 ++-
 src/layout/adder/WidgetAdder.tsx |  69 +++++++++++++++++++++++++++++++
 src/layout/useLayoutStore.ts     |   1 +
 src/widgets/calendar/Large.tsx   |   5 +++
 src/widgets/calendar/Middle.tsx  |   5 +++
 src/widgets/calendar/Modal.tsx   |   5 +++
 src/widgets/calendar/Small.tsx   |   5 +++
 src/widgets/calendar/index.ts    |  29 +++++++++++++
 src/widgets/index.ts             |  17 ++++++++
 11 files changed, 171 insertions(+), 5 deletions(-)
 create mode 100644 public/icons/calendarIcon.png
 create mode 100644 src/layout/adder/WidgetAdder.tsx
 create mode 100644 src/widgets/calendar/Large.tsx
 create mode 100644 src/widgets/calendar/Middle.tsx
 create mode 100644 src/widgets/calendar/Modal.tsx
 create mode 100644 src/widgets/calendar/Small.tsx
 create mode 100644 src/widgets/calendar/index.ts
 create mode 100644 src/widgets/index.ts

diff --git a/public/icons/calendarIcon.png b/public/icons/calendarIcon.png
new file mode 100644
index 0000000000000000000000000000000000000000..fe49a734643f507391a21d8899277caf3d536f4a
GIT binary patch
literal 2721
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
bvw8muyN?~1Y*t`h00000NkvXXu0mjfPvIbs

literal 0
HcmV?d00001

diff --git a/src/layout/adder/AdderPage.tsx b/src/layout/adder/AdderPage.tsx
index 19869bd..987111d 100644
--- a/src/layout/adder/AdderPage.tsx
+++ b/src/layout/adder/AdderPage.tsx
@@ -1,4 +1,12 @@
-import { computed, defineComponent, ref, Transition } from 'vue'
+import {
+  computed,
+  defineComponent,
+  provide,
+  ref,
+  Transition,
+  type InjectionKey,
+  type Ref
+} from 'vue'
 import AdderPageBack from './AdderPageBack'
 import useLayoutStore from '../useLayoutStore'
 import { OhVueIcon, addIcons } from 'oh-vue-icons'
@@ -6,6 +14,8 @@ import { MdKeyboardcommandkey, FaCompass, FaPencilRuler } from 'oh-vue-icons/ico
 import CustomAdder from './CustomAdder'
 import clsx from 'clsx'
 import ThemeProvider from '@/utils/ThemeProvider'
+import WidgetAdder from './WidgetAdder'
+import { Form, Input, Select } from 'ant-design-vue'
 addIcons(MdKeyboardcommandkey, FaCompass, FaPencilRuler)
 
 const ItemButton = defineComponent({
@@ -50,10 +60,14 @@ const ItemButton = defineComponent({
   }
 })
 
+export const AddToToken = Symbol('addTo') as InjectionKey<Ref<number>>
+
 export default defineComponent(() => {
   const layout = useLayoutStore()
   const isGame = computed(() => layout.state.current === 0)
   const type = ref(1)
+  const addTo = ref(layout.state.currentPage)
+  provide(AddToToken, addTo)
   return () => (
     <div class={clsx('w-full h-full relative flex', isGame.value && 'bg-[#2c2e3e]')}>
       <ThemeProvider dark={isGame.value}>
@@ -96,11 +110,25 @@ export default defineComponent(() => {
           }
           onContextmenu={(e) => e.stopPropagation()}
         >
-          <div class="w-full h-[60px]"></div>
+          <Form class="w-full px-4 mt-4" layout="inline">
+            <Form.Item label="添加到">
+              <Select
+                style="width: 140px"
+                v-model:value={addTo.value}
+                options={layout.currentMode.pages.map((el, idx) => ({
+                  label: el.label,
+                  value: idx
+                }))}
+              />
+            </Form.Item>
+            <Form.Item>
+              <Input.Search class="w-[200px]" placeholder="搜索组件或网站" />
+            </Form.Item>
+          </Form>
           <div class="w-full h-0 flex-grow p-6">
             <div class="w-full h-full relative">
               <Transition>
-                {type.value === 0 ? '' : type.value === 1 ? '' : <CustomAdder />}
+                {type.value === 0 ? <WidgetAdder /> : type.value === 1 ? '' : <CustomAdder />}
               </Transition>
             </div>
           </div>
diff --git a/src/layout/adder/CustomAdder.tsx b/src/layout/adder/CustomAdder.tsx
index 1feea76..1929961 100644
--- a/src/layout/adder/CustomAdder.tsx
+++ b/src/layout/adder/CustomAdder.tsx
@@ -1,4 +1,4 @@
-import { computed, defineComponent, reactive, ref, watch } from 'vue'
+import { computed, defineComponent, inject, 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'
@@ -11,6 +11,7 @@ import type { Block } from '../layout.types'
 import { ColorPicker } from 'vue3-colorpicker'
 import 'vue3-colorpicker/style.css'
 import { globalToast } from '@/main'
+import { AddToToken } from './AdderPage'
 
 addIcons(MdUpload, MdImage, MdCheck)
 
@@ -150,6 +151,7 @@ export default defineComponent(() => {
     if (val.name) form.name = val.name
     if (val.icon) form.icon = val.icon
   })
+  const addTo = inject(AddToToken)
   return () => (
     <div
       class={
@@ -242,7 +244,7 @@ export default defineComponent(() => {
                   form.type === 0 ? '' : form.text || form.name.substring(0, 2).toLocaleUpperCase(),
                 label: form.name
               }
-              layout.addBlock(data)
+              layout.addBlock(data, addTo?.value)
             }}
           >
             确定
diff --git a/src/layout/adder/WidgetAdder.tsx b/src/layout/adder/WidgetAdder.tsx
new file mode 100644
index 0000000..707648f
--- /dev/null
+++ b/src/layout/adder/WidgetAdder.tsx
@@ -0,0 +1,69 @@
+import { computed, defineComponent } from 'vue'
+import useLayoutStore from '../useLayoutStore'
+import widgetList, { type Widget } from '@/widgets'
+import { Button } from 'ant-design-vue'
+import clsx from 'clsx'
+
+export const Item = defineComponent({
+  props: {
+    content: {
+      type: Object as () => Widget,
+      required: true
+    }
+  },
+  setup(props) {
+    const layout = useLayoutStore()
+    const isGame = computed(() => layout.state.current === 0)
+    return () => (
+      <div
+        class={clsx('bg-white w-full h-full rounded-lg shadow p-4', {
+          'bg-white/20': isGame.value,
+          'bg-white/80': !isGame.value
+        })}
+        key={props.content.name}
+      >
+        <div class="flex">
+          <img src={props.content.icon} class="w-[48px] h-[48px] bg-cover" />
+          <div class="px-2 w-0 flex-grow">
+            <div
+              class={clsx('text text-sm', {
+                'text-white': isGame.value,
+                'text-black/80': !isGame.value
+              })}
+            >
+              {props.content.label}
+            </div>
+            <div
+              class={clsx('text-[12px]', {
+                'text-white/80': isGame.value,
+                'text-black/60': !isGame.value
+              })}
+            >
+              {props.content.description}
+            </div>
+          </div>
+        </div>
+        <div class="flex justify-end">
+          <Button size="small" type="primary">
+            添加
+          </Button>
+        </div>
+      </div>
+    )
+  }
+})
+
+export default defineComponent(() => {
+  return () => (
+    <div class="absolute left-0 top-0 w-full h-full overflow-y-auto gap-4">
+      <div
+        class="w-full grid grid-cols-3 grid-flow-row-dense pb-[200px]"
+        style="grid-auto-rows: 100px"
+      >
+        {widgetList.map((el) => (
+          <Item content={el} key={el.name} />
+        ))}
+      </div>
+    </div>
+  )
+})
diff --git a/src/layout/useLayoutStore.ts b/src/layout/useLayoutStore.ts
index c557f2e..2351fe1 100644
--- a/src/layout/useLayoutStore.ts
+++ b/src/layout/useLayoutStore.ts
@@ -64,6 +64,7 @@ export default defineStore('layout', () => {
   // 添加图标
   const addBlock = (block: Block, _page: number = -1) => {
     const page = _page >= 0 ? _page : state.currentPage
+    console.log(page)
     console.log(state.content[state.current].pages[page])
     if (!state.content[state.current].pages[page]) {
       globalToast.warning('请先添加页面')
diff --git a/src/widgets/calendar/Large.tsx b/src/widgets/calendar/Large.tsx
new file mode 100644
index 0000000..9c16be7
--- /dev/null
+++ b/src/widgets/calendar/Large.tsx
@@ -0,0 +1,5 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent(() => {
+  return () => <div class="w-full h-full bg-red-50"></div>
+})
diff --git a/src/widgets/calendar/Middle.tsx b/src/widgets/calendar/Middle.tsx
new file mode 100644
index 0000000..9c16be7
--- /dev/null
+++ b/src/widgets/calendar/Middle.tsx
@@ -0,0 +1,5 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent(() => {
+  return () => <div class="w-full h-full bg-red-50"></div>
+})
diff --git a/src/widgets/calendar/Modal.tsx b/src/widgets/calendar/Modal.tsx
new file mode 100644
index 0000000..9c16be7
--- /dev/null
+++ b/src/widgets/calendar/Modal.tsx
@@ -0,0 +1,5 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent(() => {
+  return () => <div class="w-full h-full bg-red-50"></div>
+})
diff --git a/src/widgets/calendar/Small.tsx b/src/widgets/calendar/Small.tsx
new file mode 100644
index 0000000..9c16be7
--- /dev/null
+++ b/src/widgets/calendar/Small.tsx
@@ -0,0 +1,5 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent(() => {
+  return () => <div class="w-full h-full bg-red-50"></div>
+})
diff --git a/src/widgets/calendar/index.ts b/src/widgets/calendar/index.ts
new file mode 100644
index 0000000..efa0e19
--- /dev/null
+++ b/src/widgets/calendar/index.ts
@@ -0,0 +1,29 @@
+import type { Widget } from '..'
+
+export default {
+  name: 'calendar',
+  label: '日历',
+  description: '日历信息',
+  icon: '/icons/calendarIcon.png',
+  modal: () => import('./Modal'),
+  list: [
+    {
+      w: 2,
+      h: 1,
+      label: '小',
+      component: () => import('./Small')
+    },
+    {
+      w: 2,
+      h: 2,
+      label: '中',
+      component: () => import('./Middle')
+    },
+    {
+      w: 4,
+      h: 2,
+      label: '大',
+      component: () => import('./Large')
+    }
+  ]
+} as Widget
diff --git a/src/widgets/index.ts b/src/widgets/index.ts
new file mode 100644
index 0000000..5dd7fb1
--- /dev/null
+++ b/src/widgets/index.ts
@@ -0,0 +1,17 @@
+import calendar from './calendar'
+
+export interface Widget {
+  name: string // 小组件类型唯一标识
+  label: string // 小组件名称
+  description: string // 小组件描述
+  icon: string // 小组件图标
+  modal: () => any // 弹框组件
+  list: {
+    w: number
+    h: number
+    label: string
+    component: () => any
+  }[] // 不同尺寸小组件块
+}
+
+export default [calendar] as Widget[]