antd 主题需要分别提供主题变量
This commit is contained in:
parent
cefc25874b
commit
05c283ee49
|
|
@ -1,5 +1,5 @@
|
|||
import { defineComponent, ref } from 'vue'
|
||||
import { Button, Checkbox, Divider, message, Modal } from 'ant-design-vue'
|
||||
import { Button, Checkbox, ConfigProvider, Divider, message, Modal, theme } from 'ant-design-vue'
|
||||
import useSearchConfigStore from './useSearchConfigStore'
|
||||
import { EditOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue'
|
||||
import asyncLoader from '@/utils/asyncLoader'
|
||||
|
|
@ -118,58 +118,66 @@ export default defineComponent(() => {
|
|||
class="w-full h-full bg-white/80 backdrop-blur p-4 flex flex-col select-text"
|
||||
onContextmenu={(e) => e.stopPropagation()}
|
||||
>
|
||||
<h2 class="text-center tracking-widest font-bold text-xl text-black/80">管理搜索引擎</h2>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<Divider>默认</Divider>
|
||||
<Divider>自定义</Divider>
|
||||
</div>
|
||||
<div class="w-full h-0 flex-grow grid grid-cols-2 gap-4">
|
||||
<div class="w-full h-full overflow-auto">
|
||||
{searchConfig.defaultList.map((el) => (
|
||||
<SearchItem key={el.url} url={el.url} icon={el.icon} name={el.name} v-model={el.show} />
|
||||
))}
|
||||
<ConfigProvider theme={{ token: theme.defaultAlgorithm(theme.defaultSeed) }}>
|
||||
<h2 class="text-center tracking-widest font-bold text-xl text-black/80">管理搜索引擎</h2>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<Divider>默认</Divider>
|
||||
<Divider>自定义</Divider>
|
||||
</div>
|
||||
<div class="w-full h-full flex flex-col">
|
||||
<div class="w-full h-0 flex-grow overflow-y-auto">
|
||||
{searchConfig.customList.map((el) => (
|
||||
<div class="w-full h-0 flex-grow grid grid-cols-2 gap-4">
|
||||
<div class="w-full h-full overflow-auto">
|
||||
{searchConfig.defaultList.map((el) => (
|
||||
<SearchItem
|
||||
key={el.url}
|
||||
url={el.url}
|
||||
icon={el.icon}
|
||||
name={el.name}
|
||||
editable
|
||||
v-model={el.show}
|
||||
onEdit={(obj) => {
|
||||
showAdder.value = obj
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<Button
|
||||
type="primary"
|
||||
class="mt-4"
|
||||
block
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => {
|
||||
showAdder.value = null
|
||||
}}
|
||||
>
|
||||
添加自定义搜索引擎
|
||||
</Button>
|
||||
<div class="w-full h-full flex flex-col">
|
||||
<div class="w-full h-0 flex-grow overflow-y-auto">
|
||||
{searchConfig.customList.map((el) => (
|
||||
<SearchItem
|
||||
key={el.url}
|
||||
url={el.url}
|
||||
icon={el.icon}
|
||||
name={el.name}
|
||||
editable
|
||||
v-model={el.show}
|
||||
onEdit={(obj) => {
|
||||
showAdder.value = obj
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<Button
|
||||
type="primary"
|
||||
class="mt-4"
|
||||
block
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => {
|
||||
showAdder.value = null
|
||||
}}
|
||||
>
|
||||
添加自定义搜索引擎
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Modal
|
||||
open={showAdder.value !== undefined}
|
||||
onUpdate:open={(e) => {
|
||||
if (!e) {
|
||||
showAdder.value = undefined
|
||||
}
|
||||
}}
|
||||
title="添加搜索引擎"
|
||||
footer={false}
|
||||
>
|
||||
<SearchAdder selected={showAdder.value as any} />
|
||||
</Modal>
|
||||
<Modal
|
||||
open={showAdder.value !== undefined}
|
||||
onUpdate:open={(e) => {
|
||||
if (!e) {
|
||||
showAdder.value = undefined
|
||||
}
|
||||
}}
|
||||
title="添加搜索引擎"
|
||||
footer={false}
|
||||
>
|
||||
<SearchAdder selected={showAdder.value as any} />
|
||||
</Modal>
|
||||
</ConfigProvider>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { defineComponent } from 'vue'
|
||||
import { OhVueIcon, addIcons } from 'oh-vue-icons'
|
||||
import { MdUpload, FaEye } from 'oh-vue-icons/icons'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { ConfigProvider, message, theme } from 'ant-design-vue'
|
||||
import upload from './upload'
|
||||
import 'viewerjs/dist/viewer.css'
|
||||
import { api as showViewer } from 'v-viewer'
|
||||
|
|
@ -35,60 +35,62 @@ export default defineComponent({
|
|||
let input: HTMLInputElement | null = null
|
||||
return () => (
|
||||
<div>
|
||||
<input
|
||||
type="file"
|
||||
accept=".png,.jpeg,.jpg,.svg"
|
||||
style="display:none"
|
||||
ref={(el) => (input = el as any)}
|
||||
onChange={(e) => {
|
||||
const el = e.target as any
|
||||
const file: File | undefined = el.files?.[0]
|
||||
el.value = ''
|
||||
if (!file) return
|
||||
console.log(file.size, props.size)
|
||||
if (file.size > props.size * 1000 * 1000) {
|
||||
message.warn(`大小不得超过${props.size}mb`)
|
||||
return
|
||||
}
|
||||
upload(file, 'test').then((res) => {
|
||||
ctx.emit('update:value', res)
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
class="flex justify-center items-center rounded bg-slate-200 hover:bg-slate-300 transition-all bg-cover bg-no-repeat bg-center cursor-pointer shadow"
|
||||
style={{
|
||||
width: props.width + 'px',
|
||||
height: props.width / props.ratio + 'px',
|
||||
backgroundImage: `url('${props.value}')`
|
||||
}}
|
||||
onClick={() => {
|
||||
input?.click()
|
||||
}}
|
||||
>
|
||||
{props.value ? (
|
||||
<div class="w-full h-full opacity-0 hover:opacity-100 relative transition-all bg-slate-800/20 flex justify-center items-center">
|
||||
<div
|
||||
class="px-1 rounded hover:bg-white/20"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
showViewer({
|
||||
images: [props.value],
|
||||
options: {
|
||||
navbar: false,
|
||||
toolbar: false
|
||||
}
|
||||
})
|
||||
}}
|
||||
>
|
||||
<OhVueIcon name="fa-eye" scale={1.2} fill="rgba(255,255,255,.4)" />
|
||||
<ConfigProvider theme={{ token: theme.defaultAlgorithm(theme.defaultSeed) }}>
|
||||
<input
|
||||
type="file"
|
||||
accept=".png,.jpeg,.jpg,.svg"
|
||||
style="display:none"
|
||||
ref={(el) => (input = el as any)}
|
||||
onChange={(e) => {
|
||||
const el = e.target as any
|
||||
const file: File | undefined = el.files?.[0]
|
||||
el.value = ''
|
||||
if (!file) return
|
||||
console.log(file.size, props.size)
|
||||
if (file.size > props.size * 1000 * 1000) {
|
||||
message.warn(`大小不得超过${props.size}mb`)
|
||||
return
|
||||
}
|
||||
upload(file, 'test').then((res) => {
|
||||
ctx.emit('update:value', res)
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
class="flex justify-center items-center rounded bg-slate-200 hover:bg-slate-300 transition-all bg-cover bg-no-repeat bg-center cursor-pointer shadow"
|
||||
style={{
|
||||
width: props.width + 'px',
|
||||
height: props.width / props.ratio + 'px',
|
||||
backgroundImage: `url('${props.value}')`
|
||||
}}
|
||||
onClick={() => {
|
||||
input?.click()
|
||||
}}
|
||||
>
|
||||
{props.value ? (
|
||||
<div class="w-full h-full opacity-0 hover:opacity-100 relative transition-all bg-slate-800/20 flex justify-center items-center">
|
||||
<div
|
||||
class="px-1 rounded hover:bg-white/20"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
showViewer({
|
||||
images: [props.value],
|
||||
options: {
|
||||
navbar: false,
|
||||
toolbar: false
|
||||
}
|
||||
})
|
||||
}}
|
||||
>
|
||||
<OhVueIcon name="fa-eye" scale={1.2} fill="rgba(255,255,255,.4)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<OhVueIcon name="md-upload" scale={2} fill="rgba(0,0,0,0.2)" />
|
||||
)}
|
||||
</div>
|
||||
<div class="text-xs mt-1 text-black/60">支持上传 .png, .jpeg, .jpg, .svg</div>{' '}
|
||||
) : (
|
||||
<OhVueIcon name="md-upload" scale={2} fill="rgba(0,0,0,0.2)" />
|
||||
)}
|
||||
</div>
|
||||
<div class="text-xs mt-1 text-black/60">支持上传 .png, .jpeg, .jpg, .svg</div>{' '}
|
||||
</ConfigProvider>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue