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

184 lines
5.5 KiB
TypeScript
Raw Normal View History

2024-09-12 17:59:45 +08:00
import { computed, defineComponent, reactive, ref, watch } from 'vue'
2024-09-11 18:00:15 +08:00
import useLayoutStore from '../useLayoutStore'
2024-09-13 12:19:12 +08:00
import { Button, Form, Input, InputGroup } from 'ant-design-vue'
2024-09-11 18:00:15 +08:00
import { OhVueIcon, addIcons } from 'oh-vue-icons'
2024-09-12 17:59:45 +08:00
import { MdUpload, MdImage, MdCheck } from 'oh-vue-icons/icons'
import ImageUploader from '@/utils/ImageUploader'
import useLink from './useLink'
2024-09-13 12:19:12 +08:00
import { CheckOutlined } from '@ant-design/icons-vue'
2024-09-11 18:00:15 +08:00
2024-09-12 17:59:45 +08:00
addIcons(MdUpload, MdImage, MdCheck)
2024-09-11 18:00:15 +08:00
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">
2024-09-12 17:59:45 +08:00
<div class={'flex justify-center flex-col items-center gap-y-1'}>
<div
class="w-[47px] relative h-[47px] 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)'
}}
onClick={() => {
ctx.emit('update:value', 0)
}}
>
{!props.icon && <OhVueIcon name="md-image" fill="white" scale={1.8} />}
{props.value === 0 && (
<div
class={
'w-[20px] h-[20px] rounded bg-white/50 flex items-center justify-center absolute right-0 bottom-0'
}
>
<OhVueIcon name="md-check" fill="red" scale={0.8}></OhVueIcon>
</div>
)}
</div>
<span class={'text-[12px]'}></span>
2024-09-11 18:00:15 +08:00
</div>
2024-09-12 17:59:45 +08:00
<div class={'flex justify-center flex-col items-center gap-y-1 '}>
<div
class="w-[44px] relative h-[44px] bg-center bg-no-repeat bg-cover rounded-lg overflow-hidden flex justify-center items-center cursor-pointer hover:scale-105 transition-all"
2024-09-11 18:00:15 +08:00
style={{
2024-09-12 17:59:45 +08:00
backgroundColor: props.background
}}
onClick={() => {
ctx.emit('update:value', 1)
2024-09-11 18:00:15 +08:00
}}
>
2024-09-12 17:59:45 +08:00
<span
class="text-[20px]"
style={{
color: props.color
}}
>
{props.text ? props.text.substring(0, 2) : 'A'}
</span>
{props.value === 1 && (
<div
class={
'w-[20px] h-[20px] rounded bg-white/50 flex items-center justify-center absolute right-0 bottom-0'
}
>
<OhVueIcon name="md-check" fill="red" scale={0.8}></OhVueIcon>
</div>
)}
</div>
<span class={'text-[12px]'}></span>
2024-09-11 18:00:15 +08:00
</div>
2024-09-12 17:59:45 +08:00
<div class={'flex justify-center flex-col items-center gap-y-1'}>
<div class="w-[44px] h-[44px] rounded-lg flex justify-center items-center bg-white shadow cursor-pointer hover:scale-105 transition-all">
<ImageUploader
width={44}
onUpdate:value={(e) => {
ctx.emit('update:icon', e)
}}
></ImageUploader>
</div>
<span class={'text-[12px]'}></span>
2024-09-11 18:00:15 +08:00
</div>
</div>
)
}
})
2024-09-13 12:19:12 +08:00
export default defineComponent(() => {
const layout = useLayoutStore()
const form = reactive({
link: '',
name: '',
text: '',
background: '#f7a94e',
color: 'rgba(255,255,255,1)',
icon: '',
type: 0 // 0 默认1 文字
})
const isGame = computed(() => layout.state.current === 0)
const debounced = ref('')
watch(
() => form.link,
(val, _, onCleanup) => {
const it = setTimeout(() => {
debounced.value = val
}, 500)
onCleanup(() => {
clearTimeout(it)
})
2024-09-11 18:00:15 +08:00
}
2024-09-13 12:19:12 +08:00
)
2024-09-12 17:59:45 +08:00
2024-09-13 12:19:12 +08:00
const info = useLink(debounced)
console.log(info)
2024-09-12 17:59:45 +08:00
2024-09-13 12:19:12 +08:00
watch(info, (val) => {
console.log(val)
if (val.name) form.name = val.name
if (val.icon) form.icon = val.icon
})
return () => (
<div
class={
'absolute left-0 top-0 w-full h-full rounded-2xl py-5 pl-6 pr-[30%] ' +
(isGame.value ? 'bg-white/20' : 'bg-white/20')
}
>
<Form labelCol={{ span: 4 }} labelAlign="left">
<Form.Item label="地址">
<InputGroup compact style="display:flex">
<Input
v-model:value={form.link}
2024-09-12 17:59:45 +08:00
placeholder="搜索想要添加的网址导航"
2024-09-13 12:19:12 +08:00
class="w-0 flex-grow"
2024-09-12 17:59:45 +08:00
/>
2024-09-13 12:19:12 +08:00
<Button></Button>
</InputGroup>
</Form.Item>
<Form.Item label="名称">
<Input v-model:value={form.name} />
</Form.Item>
<Form.Item label="图标">
<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=" " colon={false}>
<Button type="primary" size="large" icon={<CheckOutlined />}>
</Button>
</Form.Item>
</Form>
</div>
)
2024-09-11 18:00:15 +08:00
})