侧边栏展开层不允许右键打开快捷编辑功能

This commit is contained in:
expdsn 2024-11-15 19:16:17 +08:00
parent eca34957a2
commit 368be88b5d
3 changed files with 33 additions and 19 deletions

View File

@ -1,18 +1,15 @@
import { computed, defineComponent, inject, onMounted, reactive, ref, watch } from 'vue'
import useLayoutStore from '../useLayoutStore'
import { Button, Form, Input, InputGroup } from 'ant-design-vue'
import { Form, Input } from 'ant-design-vue'
import { OhVueIcon, addIcons } from 'oh-vue-icons'
import { MdUpload, MdImage, MdCheck } from 'oh-vue-icons/icons'
import useLink from '../../utils/useLink'
import { CheckOutlined } from '@ant-design/icons-vue'
import { v4 as uuid } from 'uuid'
import type { Block } from '../layout.types'
import { ColorPicker } from 'vue3-colorpicker'
import 'vue3-colorpicker/style.css'
import { globalToast } from '@/main'
import UploadAndCut from '@/utils/UploadAndCut'
import { AddToToken } from './AdderPage'
import DefaultImg from '/tab/icons/bgGameCloud.png'
import useAdderPageStore, { type EditBlockItemType } from './useAdderPageStore'
import useRouterStore from '@/useRouterStore'
import NativeColorPicker from '@/utils/NativeColorPicker'
@ -64,7 +61,7 @@ const TypeSelector = defineComponent({
ctx.emit('update:value', 0)
}}
>
{!props.icon && <img src={DefaultImg}></img>}
{!props.icon && <img src={'/tab/icons/bgGameCloud.png'}></img>}
{props.value === 0 && (
<div
class={
@ -253,11 +250,10 @@ export default defineComponent(() => {
)}
<Form.Item label=" " colon={false}>
<button
class={'outline-none ml-[23px] mt-2 flex items-center hover:opacity-90 text-[16px] justify-center gap-x-2 text-white w-[94px] h-[40px] rounded-lg'}
style={
{
class={
'outline-none ml-[23px] mt-2 flex items-center hover:opacity-90 text-[16px] justify-center gap-x-2 text-white w-[94px] h-[40px] rounded-lg'
}
style={{
background: 'linear-gradient(180deg,#ffaa4e 0%,#ff6227 100%)'
}}
onClick={() => {

View File

@ -42,11 +42,12 @@ const Item = defineComponent({
return () => (
<div
onContextmenu={(e) => {
if (!props.id) return
useMenuStore().open('page')
useMenuStore().selectPage = {
id: props.id,
label: props.label,
name: props.name,
name: props.name
}
e.stopPropagation()
e.preventDefault()
@ -106,6 +107,10 @@ export default defineComponent(() => {
<Transition>
{layout.ready && (
<div
onContextmenu={(e)=> {
e.stopPropagation()
e.preventDefault()
}}
class={clsx(
'w-[130px] min-h-[620px] hover:bg-red-10 z-20 fixed top-1/2 -translate-y-1/2 bottom-0 ',
settings.state.siderDirection === 'left' ? 'left-0' : 'right-0'
@ -194,6 +199,10 @@ export default defineComponent(() => {
{/* 添加页面 */}
{menu.showEditPage && (
<div
onContextmenu={(e) => {
e.stopPropagation()
e.preventDefault()
}}
class={clsx(
'absolute bottom-0 w-56 rounded-lg p-4 bg-white/40 backdrop-blur shadow-lg',
settings.state.siderDirection === 'left' ? 'left-[70px]' : 'right-[70px]'
@ -231,11 +240,13 @@ export default defineComponent(() => {
menu.selectPage.name = selected.value.name
menu.selectPage.label = label.value
if (!menu.selectPage?.id) return
const idx = layout.state.content[layout.state.current].pages.findIndex(val => val.id === menu.selectPage?.id)
const idx = layout.state.content[layout.state.current].pages.findIndex(
(val) => val.id === menu.selectPage?.id
)
if (idx !== -1) {
layout.state.content[layout.state.current].pages[idx].label = label.value
layout.state.content[layout.state.current].pages[idx].name = selected.value.name
layout.state.content[layout.state.current].pages[idx].name =
selected.value.name
}
menu.selectPage = undefined
} else {
@ -248,11 +259,10 @@ export default defineComponent(() => {
}
menu.showEditPage = false
}}
>
<OhVueIcon name="px-check" />
{menu.selectPage ? "修改页面" : "添加页面"}
{menu.selectPage ? '修改页面' : '添加页面'}
</div>
</div>
)}

View File

@ -3,9 +3,10 @@ import request from '@/utils/request'
import { addIcons, OhVueIcon } from 'oh-vue-icons'
import { computed, defineComponent, onMounted, ref, watch, type CSSProperties } from 'vue'
import { FaChevronLeft } from 'oh-vue-icons/icons'
import PlayImg from "~/icons/game_video_bg_play.png"
import PlayImg from '~/icons/game_video_bg_play.png'
import type { CarouselRef } from 'ant-design-vue/es/carousel'
import { randomNum } from '@/utils/tool'
import jump from '@/utils/jump'
addIcons(FaChevronLeft)
interface Owner {
face: string
@ -56,11 +57,19 @@ export default defineComponent(() => {
})
return () => (
<div class="w-full h-full p-2 bg-[#17212d] relative ">
<img src={PlayImg} class={"absolute z-10 w-[40px] bg-[#ffffff24] rounded-lg backdrop-blur-sm left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"}></img>
<img
src={PlayImg}
class={
'absolute z-10 w-[40px] bg-[#ffffff24] rounded-lg backdrop-blur-sm left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'
}
></img>
{
<div
class={'w-full h-full rounded-xl relative group'}
onClick={() => {
jump('https://www.bilibili.com/video/av' + current.value?.aid)
}}
style={{
backgroundImage: `url('${current.value?.pic}')`,
backgroundSize: 'cover',
@ -68,7 +77,6 @@ export default defineComponent(() => {
backgroundRepeat: 'no-repeat'
}}
>
<div
class={
'absolute bottom-0 left-1/2 -translate-x-1/2 pb-2 w-[300px] flex flex-col text-white '