xyyd-fatfox/src/layout/adder/AdderPage.tsx

152 lines
4.3 KiB
TypeScript

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'
import { MdKeyboardcommandkey, FaCompass, FaPencilRuler } from 'oh-vue-icons/icons'
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({
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-4 px-4 mb-2 rounded text-sm cursor-pointer transition-all relative ' +
(isGame.value
? props.active
? 'bg-[#626471] text-[#f7a94e]'
: 'hover:text-[#f7a94e] hover:bg-white/20 text-[#b4b5bb]'
: props.active
? 'bg-white text-black/80 shadow'
: 'hover:text-black/80 hover:bg-white text-black/50')
}
>
{props.active && (
<img
src="/icons/work_add_main_checked.png"
class={'absolute h left-0 top-1/2 -translate-y-1/2 w-[8px] h-[34px]'}
></img>
)}
<OhVueIcon name={props.name} class={"ml-1"} />
<span class="ml-2">{props.label}</span>
</div>
)
}
})
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 p-[6px]', isGame.value && 'bg-[#2c2e3e]')}
style={{
backgroundImage: `url('/bg/gameModel.png')`,
backgroundSize: '100% 100%'
}}
>
<ThemeProvider dark={isGame.value}>
<div
class={
'w-[220px] h-full relative z-10 pt-[100px] rounded-2xl ' +
(isGame.value ? 'pl-8 pr-2 bg-[#424b5d4d]' : 'bg-white/60 l 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/80 backdrop-blur')
}
onContextmenu={(e) => e.stopPropagation()}
>
<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 ? <WidgetAdder /> : type.value === 1 ? '' : <CustomAdder />}
</Transition>
</div>
</div>
</div>
</ThemeProvider>
</div>
)
})