文件夹详情缺少快捷添加图标按钮
This commit is contained in:
expdsn
parent
9c6c7eb4c2
commit
743d820bc8
|
|
@ -5,6 +5,7 @@ import useLayoutStore from '../useLayoutStore'
|
|||
import { AddToToken } from './AdderPage'
|
||||
import { v4 as uuid } from 'uuid'
|
||||
import useAdderPageStore, { type HotAppType } from './useAdderPageStore'
|
||||
import { globalToast } from '@/main'
|
||||
|
||||
export const LinkItem = defineComponent({
|
||||
props: {
|
||||
|
|
@ -83,8 +84,8 @@ export const LinkItem = defineComponent({
|
|||
}
|
||||
)}
|
||||
onClick={() => {
|
||||
layout.addBlock(
|
||||
{
|
||||
if (layout.openDir) {
|
||||
layout.state.dir[layout.openDir].list.push({
|
||||
id: uuid(),
|
||||
link: props.content.url,
|
||||
name: props.content.name,
|
||||
|
|
@ -95,11 +96,27 @@ export const LinkItem = defineComponent({
|
|||
color: '',
|
||||
w: 1,
|
||||
h: 1
|
||||
},
|
||||
addTo?.value
|
||||
)
|
||||
if (addTo?.value) {
|
||||
layout.state.currentPage = addTo?.value
|
||||
})
|
||||
globalToast.success('添加成功')
|
||||
} else {
|
||||
layout.addBlock(
|
||||
{
|
||||
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.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} />
|
||||
|
|
|
|||
|
|
@ -32,8 +32,9 @@ export default defineComponent({
|
|||
const menu = useMenuStore()
|
||||
return () => (
|
||||
<div
|
||||
onClick={() => {
|
||||
onClick={(e) => {
|
||||
layout.openDir = props.block.link.slice(3)
|
||||
e.stopPropagation()
|
||||
}}
|
||||
class={clsx('w-full h-full bg-white/60 backdrop-blur grid', {
|
||||
'grid-rows-3 grid-cols-3 gap-[6%] p-[8%]': props.big,
|
||||
|
|
@ -46,8 +47,11 @@ export default defineComponent({
|
|||
{selectedDir.value.list
|
||||
.filter((_, idx) => idx < (props.big ? 9 : 4))
|
||||
.map((el) => (
|
||||
<div class="w-full h-full rounded-lg overflow-hidden">
|
||||
<LinkBlock block={el} brief />
|
||||
<div
|
||||
class="w-full h-full rounded-lg overflow-hidden"
|
||||
|
||||
>
|
||||
<LinkBlock block={el} brief disable={true} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,9 +3,17 @@ import useLayoutStore from '../useLayoutStore'
|
|||
import useSortable from './useSortable'
|
||||
import LinkBlock from './LinkBlock'
|
||||
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(() => {
|
||||
const layout = useLayoutStore()
|
||||
const router = useRouterStore()
|
||||
const addStore = useAdderPageStore()
|
||||
const dir = ref({ label: '', list: [] as Block[] })
|
||||
// 因为有拖拽，关闭弹框不能使内容消失
|
||||
watch(
|
||||
|
|
@ -18,16 +26,18 @@ export default defineComponent(() => {
|
|||
computed(() => dir.value.list),
|
||||
computed(() => layout.openDir)
|
||||
)
|
||||
|
||||
return () => (
|
||||
<Transition>
|
||||
<div
|
||||
class="fixed w-full h-screen left-0 top-0 flex flex-col justify-center items-center"
|
||||
v-show={layout.openDir}
|
||||
style="z-index: 300"
|
||||
style="z-index: 20"
|
||||
>
|
||||
<div
|
||||
class="absolute left-0 top-0 w-full h-full bg-black/40 backdrop-blur"
|
||||
onClick={() => {
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
layout.openDir = ''
|
||||
}}
|
||||
onDragenter={() => {
|
||||
|
|
@ -63,14 +73,33 @@ export default defineComponent(() => {
|
|||
style={{
|
||||
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 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}
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,10 @@ export default defineComponent({
|
|||
dock: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
disable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
|
|
@ -25,9 +29,12 @@ export default defineComponent({
|
|||
<div
|
||||
class="w-full h-full flex justify-center items-center font-bold bg-cover bg-center bg-no-repeat"
|
||||
onContextmenu={() => {
|
||||
if (props.disable) return
|
||||
menu.open(props.block)
|
||||
}}
|
||||
onClick={() => {
|
||||
if (props.disable) return
|
||||
|
||||
jump(props.block.link)
|
||||
}}
|
||||
style={{
|
||||
|
|
|
|||
Loading…
Reference in New Issue