文件夹详情缺少快捷添加图标按钮
This commit is contained in:
parent
9c6c7eb4c2
commit
743d820bc8
|
@ -5,6 +5,7 @@ import useLayoutStore from '../useLayoutStore'
|
||||||
import { AddToToken } from './AdderPage'
|
import { AddToToken } from './AdderPage'
|
||||||
import { v4 as uuid } from 'uuid'
|
import { v4 as uuid } from 'uuid'
|
||||||
import useAdderPageStore, { type HotAppType } from './useAdderPageStore'
|
import useAdderPageStore, { type HotAppType } from './useAdderPageStore'
|
||||||
|
import { globalToast } from '@/main'
|
||||||
|
|
||||||
export const LinkItem = defineComponent({
|
export const LinkItem = defineComponent({
|
||||||
props: {
|
props: {
|
||||||
|
@ -83,8 +84,8 @@ export const LinkItem = defineComponent({
|
||||||
}
|
}
|
||||||
)}
|
)}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
layout.addBlock(
|
if (layout.openDir) {
|
||||||
{
|
layout.state.dir[layout.openDir].list.push({
|
||||||
id: uuid(),
|
id: uuid(),
|
||||||
link: props.content.url,
|
link: props.content.url,
|
||||||
name: props.content.name,
|
name: props.content.name,
|
||||||
|
@ -95,11 +96,27 @@ export const LinkItem = defineComponent({
|
||||||
color: '',
|
color: '',
|
||||||
w: 1,
|
w: 1,
|
||||||
h: 1
|
h: 1
|
||||||
},
|
})
|
||||||
addTo?.value
|
globalToast.success('添加成功')
|
||||||
)
|
} else {
|
||||||
if (addTo?.value) {
|
layout.addBlock(
|
||||||
layout.state.currentPage = addTo?.value
|
{
|
||||||
|
id: uuid(),
|
||||||
|
link: props.content.url,
|
||||||
|
name: props.content.name,
|
||||||
|
label: props.content.name,
|
||||||
|
icon: props.content.icon,
|
||||||
|
text: '',
|
||||||
|
background: '',
|
||||||
|
color: '',
|
||||||
|
w: 1,
|
||||||
|
h: 1
|
||||||
|
},
|
||||||
|
addTo?.value
|
||||||
|
)
|
||||||
|
if (addTo?.value) {
|
||||||
|
layout.state.currentPage = addTo?.value
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
|
|
@ -170,7 +170,7 @@ export default defineComponent({
|
||||||
{props.block.link ? (
|
{props.block.link ? (
|
||||||
props.block.link.startsWith('id:') ? (
|
props.block.link.startsWith('id:') ? (
|
||||||
// 文件夹
|
// 文件夹
|
||||||
<DirBlock block={props.block} big={props.block.w !== 1 || props.block.h !== 1} />
|
<DirBlock block={props.block} big={props.block.w !== 1 || props.block.h !== 1} />
|
||||||
) : (
|
) : (
|
||||||
// 链接
|
// 链接
|
||||||
<LinkBlock block={props.block} />
|
<LinkBlock block={props.block} />
|
||||||
|
|
|
@ -32,8 +32,9 @@ export default defineComponent({
|
||||||
const menu = useMenuStore()
|
const menu = useMenuStore()
|
||||||
return () => (
|
return () => (
|
||||||
<div
|
<div
|
||||||
onClick={() => {
|
onClick={(e) => {
|
||||||
layout.openDir = props.block.link.slice(3)
|
layout.openDir = props.block.link.slice(3)
|
||||||
|
e.stopPropagation()
|
||||||
}}
|
}}
|
||||||
class={clsx('w-full h-full bg-white/60 backdrop-blur grid', {
|
class={clsx('w-full h-full bg-white/60 backdrop-blur grid', {
|
||||||
'grid-rows-3 grid-cols-3 gap-[6%] p-[8%]': props.big,
|
'grid-rows-3 grid-cols-3 gap-[6%] p-[8%]': props.big,
|
||||||
|
@ -46,8 +47,11 @@ export default defineComponent({
|
||||||
{selectedDir.value.list
|
{selectedDir.value.list
|
||||||
.filter((_, idx) => idx < (props.big ? 9 : 4))
|
.filter((_, idx) => idx < (props.big ? 9 : 4))
|
||||||
.map((el) => (
|
.map((el) => (
|
||||||
<div class="w-full h-full rounded-lg overflow-hidden">
|
<div
|
||||||
<LinkBlock block={el} brief />
|
class="w-full h-full rounded-lg overflow-hidden"
|
||||||
|
|
||||||
|
>
|
||||||
|
<LinkBlock block={el} brief disable={true} />
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -3,9 +3,17 @@ import useLayoutStore from '../useLayoutStore'
|
||||||
import useSortable from './useSortable'
|
import useSortable from './useSortable'
|
||||||
import LinkBlock from './LinkBlock'
|
import LinkBlock from './LinkBlock'
|
||||||
import type { Block } from '../layout.types'
|
import type { Block } from '../layout.types'
|
||||||
|
import useRouterStore from '@/useRouterStore'
|
||||||
|
import { globalToast } from '@/main'
|
||||||
|
import { addIcons, OhVueIcon } from 'oh-vue-icons'
|
||||||
|
import { MdAdd } from 'oh-vue-icons/icons'
|
||||||
|
import useAdderPageStore from '../adder/useAdderPageStore'
|
||||||
|
addIcons(MdAdd)
|
||||||
|
|
||||||
export default defineComponent(() => {
|
export default defineComponent(() => {
|
||||||
const layout = useLayoutStore()
|
const layout = useLayoutStore()
|
||||||
|
const router = useRouterStore()
|
||||||
|
const addStore = useAdderPageStore()
|
||||||
const dir = ref({ label: '', list: [] as Block[] })
|
const dir = ref({ label: '', list: [] as Block[] })
|
||||||
// 因为有拖拽,关闭弹框不能使内容消失
|
// 因为有拖拽,关闭弹框不能使内容消失
|
||||||
watch(
|
watch(
|
||||||
|
@ -18,16 +26,18 @@ export default defineComponent(() => {
|
||||||
computed(() => dir.value.list),
|
computed(() => dir.value.list),
|
||||||
computed(() => layout.openDir)
|
computed(() => layout.openDir)
|
||||||
)
|
)
|
||||||
|
|
||||||
return () => (
|
return () => (
|
||||||
<Transition>
|
<Transition>
|
||||||
<div
|
<div
|
||||||
class="fixed w-full h-screen left-0 top-0 flex flex-col justify-center items-center"
|
class="fixed w-full h-screen left-0 top-0 flex flex-col justify-center items-center"
|
||||||
v-show={layout.openDir}
|
v-show={layout.openDir}
|
||||||
style="z-index: 300"
|
style="z-index: 20"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="absolute left-0 top-0 w-full h-full bg-black/40 backdrop-blur"
|
class="absolute left-0 top-0 w-full h-full bg-black/40 backdrop-blur"
|
||||||
onClick={() => {
|
onClick={(e) => {
|
||||||
|
e.stopPropagation()
|
||||||
layout.openDir = ''
|
layout.openDir = ''
|
||||||
}}
|
}}
|
||||||
onDragenter={() => {
|
onDragenter={() => {
|
||||||
|
@ -63,14 +73,33 @@ export default defineComponent(() => {
|
||||||
style={{
|
style={{
|
||||||
borderRadius: `calc(var(--block-radius) * var(--block-size))`
|
borderRadius: `calc(var(--block-radius) * var(--block-size))`
|
||||||
}}
|
}}
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation()
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<LinkBlock block={block} key={block.id} />
|
<LinkBlock
|
||||||
|
block={block}
|
||||||
|
key={block.id}
|
||||||
|
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="absolute left-0 -bottom-2 text-sm text-black/60 text-center w-full overflow-hidden text-ellipsis whitespace-nowrap break-all">
|
<div class="absolute left-0 -bottom-2 text-sm text-black/60 text-center w-full overflow-hidden text-ellipsis whitespace-nowrap break-all">
|
||||||
{block.label}
|
{block.label}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
<div class="w-full h-full flex justify-center items-center p-[var(--block-padding)] relative operation-button">
|
||||||
|
<div
|
||||||
|
class="w-full h-full overflow-hidden rounded-[calc(var(--block-radius)_*_var(--block-size))] bg-white/60 backdrop-blur flex justify-center items-center cursor-pointer hover:scale-105 transition-all"
|
||||||
|
onClick={() => {
|
||||||
|
router.go('global-adder')
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span style="filter:drop-shadow(0 0 10px hsl(32, 90%, 65%))">
|
||||||
|
<OhVueIcon name="md-add" fill="white" scale={2.4} />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -16,6 +16,10 @@ export default defineComponent({
|
||||||
dock: {
|
dock: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
|
},
|
||||||
|
disable: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
setup(props) {
|
setup(props) {
|
||||||
|
@ -25,9 +29,12 @@ export default defineComponent({
|
||||||
<div
|
<div
|
||||||
class="w-full h-full flex justify-center items-center font-bold bg-cover bg-center bg-no-repeat"
|
class="w-full h-full flex justify-center items-center font-bold bg-cover bg-center bg-no-repeat"
|
||||||
onContextmenu={() => {
|
onContextmenu={() => {
|
||||||
|
if (props.disable) return
|
||||||
menu.open(props.block)
|
menu.open(props.block)
|
||||||
}}
|
}}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
|
if (props.disable) return
|
||||||
|
|
||||||
jump(props.block.link)
|
jump(props.block.link)
|
||||||
}}
|
}}
|
||||||
style={{
|
style={{
|
||||||
|
|
Loading…
Reference in New Issue