From cefc25874b4c167e74a5155d9223edc2bdc57967 Mon Sep 17 00:00:00 2001 From: plightfield <1207120484@qq.com> Date: Wed, 11 Sep 2024 18:00:15 +0800 Subject: [PATCH] change --- src/GlobalModal.tsx | 14 ++- src/layout/adder/AdderPage.tsx | 107 +++++++++++++++++++++++ src/layout/adder/AdderPageBack.tsx | 37 ++++++++ src/layout/adder/CustomAdder.tsx | 132 +++++++++++++++++++++++++++++ 4 files changed, 288 insertions(+), 2 deletions(-) create mode 100644 src/layout/adder/AdderPage.tsx create mode 100644 src/layout/adder/AdderPageBack.tsx create mode 100644 src/layout/adder/CustomAdder.tsx diff --git a/src/GlobalModal.tsx b/src/GlobalModal.tsx index f510692..3e56220 100644 --- a/src/GlobalModal.tsx +++ b/src/GlobalModal.tsx @@ -5,6 +5,7 @@ import { MdClose, MdOpeninfull, MdClosefullscreen } from 'oh-vue-icons/icons' import asyncLoader from './utils/asyncLoader' addIcons(MdClose, MdOpeninfull, MdClosefullscreen) const SearchPage = asyncLoader(() => import('@/layout/header/search/SearchPage')) +const AdderPage = asyncLoader(() => import('@/layout/adder/AdderPage')) const noFullList: RouteStr[] = ['global-search', 'global-adder'] @@ -46,7 +47,10 @@ export default defineComponent(() => { > {/* 关闭按钮 */}
{ router.path = '' }} @@ -70,7 +74,13 @@ export default defineComponent(() => { )}
- {router.path === 'global-search' ? : null} + + {router.path === 'global-search' ? ( + + ) : router.path === 'global-adder' ? ( + + ) : null} +
)} diff --git a/src/layout/adder/AdderPage.tsx b/src/layout/adder/AdderPage.tsx new file mode 100644 index 0000000..785ab50 --- /dev/null +++ b/src/layout/adder/AdderPage.tsx @@ -0,0 +1,107 @@ +import { computed, defineComponent, ref, Transition } from 'vue' +import AdderPageBack from './AdderPageBack' +import useLayoutStore from '../useLayoutStore' +import { OhVueIcon, addIcons } from 'oh-vue-icons' +import { MdKeyboardcommandkey, FaCompass, FaPencilRuler } from 'oh-vue-icons/icons' +import CustomAdder from './CustomAdder' +addIcons(MdKeyboardcommandkey, FaCompass, FaPencilRuler) + +const ItemButton = defineComponent({ + props: { + name: { + type: String, + default: '' + }, + label: { + type: String, + default: '' + }, + active: { + type: Boolean, + default: false + } + }, + emits: ['click'], + setup(props, ctx) { + const layout = useLayoutStore() + const isGame = computed(() => layout.state.current === 0) + return () => ( +
{ + ctx.emit('click') + }} + class={ + 'py-2 px-4 mb-2 rounded-lg text-sm cursor-pointer transition-all ' + + (isGame.value + ? props.active + ? 'bg-[#626471] text-[#f7a94e]' + : 'hover:text-[#f7a94e] text-[#b4b5bb]' + : props.active + ? 'bg-white text-black/80 shadow' + : 'hover:text-black/80 hover:bg-white text-black/50') + } + > + + {props.label} +
+ ) + } +}) + +export default defineComponent(() => { + const layout = useLayoutStore() + const isGame = computed(() => layout.state.current === 0) + const type = ref(1) + return () => ( +
+ {isGame.value && } +
+ { + type.value = 0 + }} + /> + { + type.value = 1 + }} + /> + { + type.value = 2 + }} + /> +
+
e.stopPropagation()} + > +
+ +
+
+ ) +}) diff --git a/src/layout/adder/AdderPageBack.tsx b/src/layout/adder/AdderPageBack.tsx new file mode 100644 index 0000000..85991d1 --- /dev/null +++ b/src/layout/adder/AdderPageBack.tsx @@ -0,0 +1,37 @@ +import { defineComponent } from 'vue' + +export default defineComponent(() => () => ( + + + + + + + + + + + + +)) diff --git a/src/layout/adder/CustomAdder.tsx b/src/layout/adder/CustomAdder.tsx new file mode 100644 index 0000000..ba470e2 --- /dev/null +++ b/src/layout/adder/CustomAdder.tsx @@ -0,0 +1,132 @@ +import { computed, defineComponent, reactive } from 'vue' +import useLayoutStore from '../useLayoutStore' +import { ConfigProvider, Form, Input, theme } from 'ant-design-vue' +import { OhVueIcon, addIcons } from 'oh-vue-icons' +import { MdUpload, MdImage } from 'oh-vue-icons/icons' + +addIcons(MdUpload, MdImage) + +const TypeSelector = defineComponent({ + props: { + value: { + type: Number, + default: 0 + }, + icon: { + type: String, + default: '' + }, + text: { + type: String, + default: '' + }, + color: { + type: String, + default: '' + }, + background: { + type: String, + default: '' + } + }, + emits: { + 'update:value': (() => true) as (val: number) => boolean, + 'update:icon': (() => true) as (val: string) => boolean + }, + setup(props, ctx) { + return () => ( +
+
+ {!props.icon && } +
+
+ + {props.text ? props.text.substring(0, 2) : 'A'} + +
+
+ +
+
+ ) + } +}) + +export default defineComponent({ + props: { + mode: { + type: Number, + default: 0 + }, + page: { + type: Number, + default: 0 + } + }, + setup(props, ctx) { + const layout = useLayoutStore() + const isGame = computed(() => layout.state.current === 0) + const form = reactive({ + link: '', + name: '', + text: '', + background: '#f7a94e', + color: 'rgba(255,255,255,1)', + icon: '', + type: 0 // 0 默认，1 文字 + }) + return () => ( +
+ +
+ + + + + + + + + + + + +
+ +
+ ) + } +})