xyyd
/
xyyd-fatfox
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

change

This commit is contained in:
plightfield 2024-09-11 18:00:15 +08:00
parent ceb05a4f62
commit cefc25874b
4 changed files with 288 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/GlobalModal.tsx
View File

@ -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(() => {
>
{/* 关闭按钮 */}
<div
class="w-5 h-5 flex justify-center items-center rounded-full overflow-hidden absolute top-2 right-2 bg-red-500/70 hover:bg-red-500 transition-all cursor-pointer z-30"
class={
'w-5 h-5 flex justify-center items-center rounded-full overflow-hidden absolute bg-red-500/70 hover:bg-red-500 transition-all cursor-pointer z-30 ' +
(router.path === 'global-adder' ? 'top-6 right-4' : 'top-2 right-2')
}
onClick={() => {
router.path = ''
}}
@ -70,7 +74,13 @@ export default defineComponent(() => {
)}
<div class="w-full h-full flex justify-center items-center">
<Transition>{router.path === 'global-search' ? <SearchPage /> : null}</Transition>
<Transition>
{router.path === 'global-search' ? (
<SearchPage />
) : router.path === 'global-adder' ? (
<AdderPage />
) : null}
</Transition>
</div>
</div>
)}

107
src/layout/adder/AdderPage.tsx Normal file
View File

@ -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 () => (
<div
onClick={() => {
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')
}
>
<OhVueIcon name={props.name} />
<span class="ml-2">{props.label}</span>
</div>
)
}
})
export default defineComponent(() => {
const layout = useLayoutStore()
const isGame = computed(() => layout.state.current === 0)
const type = ref(1)
return () => (
<div class="w-full h-full relative flex">
{isGame.value && <AdderPageBack />}
<div
class={
'w-[200px] h-full relative z-10 pt-[100px] ' +
(isGame.value ? 'pl-6 pr-2' : 'bg-white/60 backdrop-blur px-4')
}
>
<ItemButton
name="md-keyboardcommandkey"
label="功能组件"
active={type.value === 0}
onClick={() => {
type.value = 0
}}
/>
<ItemButton
name="fa-compass"
label="网站图标"
active={type.value === 1}
onClick={() => {
type.value = 1
}}
/>
<ItemButton
name="fa-pencil-ruler"
label="自定义网址"
active={type.value === 2}
onClick={() => {
type.value = 2
}}
/>
</div>
<div
class={
'w-0 h-full flex-grow relative z-10 flex flex-col ' +
(isGame.value ? '' : 'bg-white/40 backdrop-blur')
}
onContextmenu={(e) => e.stopPropagation()}
>
<div class="w-full h-[60px]"></div>
<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 />}
</Transition>
</div>
</div>
</div>
</div>
)
})

37
src/layout/adder/AdderPageBack.tsx Normal file
View File

@ -0,0 +1,37 @@
import { defineComponent } from 'vue'
export default defineComponent(() => () => (
<svg
width="900"
height="540"
viewBox="0 0 900 540"
fill="none"
class="absolute left-0 top-0 w-full h-full z-0"
>
<path
d="M16 16C20 11.5 20 5 20 5H880.084C880.084 5 879.089 12.4299 883.067 16.8879C887.045 21.3458 895 21.8411 895 21.8411V518C895 518 887.045 516.5 883.067 521.5C879.089 526.5 880.084 535 880.084 535H20C20 535 19 528.5 16 524C13 519.5 5 518 5 518V22.5C5 22.5 12 20.5 16 16Z"
fill="#1F2028"
/>
<path
d="M804.5 26.5C804.5 9.5 793.333 6.83333 789 6H878.5C878.5 6 885.5 6.85714 890 12C894.5 17.1429 894.5 22.5 894.5 22.5V67.5C894.5 67.5 856.5 66.5 853.5 58C850.5 49.5 854 38.5 850.5 30.5C848 25.5 840.5 25 831 27C821.5 29 804 35 804.5 26.5Z"
fill="white"
fill-opacity="0.06"
/>
<path
d="M789 6C793.333 6.83333 804.5 9.5 804.5 26.5C804 35 821.5 29 831 27C840.5 25 848 25.5 850.5 30.5C854 38.5 850.5 49.5 853.5 58C856.5 66.5 894.5 67.5 894.5 67.5"
stroke="#39394A"
stroke-linecap="round"
/>
<path
d="M796 6C800.313 6.79946 811 8.69106 811 25C810.502 33.1545 829.045 26.4187 838.5 24.5C847.955 22.5813 854.72 24.7073 857.209 29.5041C860.692 37.1789 857.209 47.7317 860.194 55.8862C863.18 64.0406 894 64 894 64"
stroke="#39394A"
stroke-linecap="round"
/>
<path d="M882.017 516C874.5 520 875.5 534 875.5 534" stroke="#515260" />
<path d="M882 516.025C886.5 512.525 894 513 894 513" stroke="#515260" />
<line x1="892.5" y1="22" x2="892.5" y2="513" stroke="#515260" />
<path d="M7.5 25L7.50002 518" stroke="#515260" />
<path d="M23 6C23 6 22.6838 15 17 19.1497C14.1712 22.0032 7.5 25.5 7.5 25.5" stroke="#515260" />
<rect x="16" y="15" width="190" height="508" fill="#333747" />
</svg>
))

132
src/layout/adder/CustomAdder.tsx Normal file
View File

@ -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 () => (
<div class="flex gap-4">
<div
class="w-[64px] h-[65px] bg-center bg-no-repeat bg-cover rounded-lg overflow-hidden flex justify-center items-center cursor-pointer hover:scale-105 transition-all"
style={{
backgroundImage: `url('${props.icon}')`,
backgroundColor: props.icon ? '' : 'rgba(0,0,0,0.2)'
}}
>
{!props.icon && <OhVueIcon name="md-image" fill="white" scale={1.8} />}
</div>
<div
class="w-[64px] h-[65px] bg-center bg-no-repeat bg-cover rounded-lg overflow-hidden flex justify-center items-center cursor-pointer hover:scale-105 transition-all"
style={{
backgroundColor: props.background
}}
>
<span
class="text-[30px]"
style={{
color: props.color
}}
>
{props.text ? props.text.substring(0, 2) : 'A'}
</span>
</div>
<div class="w-[64px] h-[65px] rounded-lg flex justify-center items-center bg-white shadow cursor-pointer hover:scale-105 transition-all">
<OhVueIcon name="md-upload" fill="rgba(0,0,0,0.4)" scale={1.8} />
</div>
</div>
)
}
})
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 () => (
<div
class={
'absolute left-0 top-0 w-full h-full rounded-lg p-4 ' +
(isGame.value ? 'bg-white/10' : 'bg-white/80')
}
>
<ConfigProvider
theme={{
token: isGame.value
? theme.darkAlgorithm(theme.defaultSeed)
: theme.defaultAlgorithm(theme.defaultSeed)
}}
>
<Form labelCol={{ span: 6 }} model={form} class="grid grid-cols-2 gap-4" colon={false}>
<Form.Item label="地址" name="link" class="col-span-2" labelCol={{ span: 3 }}>
<Input v-model:value={form.link} />
</Form.Item>
<Form.Item label="名称" name="name">
<Input v-model:value={form.name} />
</Form.Item>
<Form.Item name="type" label=" " class="col-span-2" labelCol={{ span: 3 }}>
<TypeSelector
v-model:value={form.type}
v-model:icon={form.icon}
text={form.text}
color={form.color}
background={form.background}
/>
</Form.Item>
<Form.Item label="图标文字" name="text">
<Input v-model:value={form.text} />
</Form.Item>
</Form>
</ConfigProvider>
</div>
)
}
})