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