侧边栏展开层不允许右键打开快捷编辑功能
This commit is contained in:
parent
eca34957a2
commit
368be88b5d
|
@ -1,18 +1,15 @@
|
||||||
import { computed, defineComponent, inject, onMounted, reactive, ref, watch } from 'vue'
|
import { computed, defineComponent, inject, onMounted, reactive, ref, watch } from 'vue'
|
||||||
import useLayoutStore from '../useLayoutStore'
|
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 { OhVueIcon, addIcons } from 'oh-vue-icons'
|
||||||
import { MdUpload, MdImage, MdCheck } from 'oh-vue-icons/icons'
|
import { MdUpload, MdImage, MdCheck } from 'oh-vue-icons/icons'
|
||||||
import useLink from '../../utils/useLink'
|
import useLink from '../../utils/useLink'
|
||||||
import { CheckOutlined } from '@ant-design/icons-vue'
|
|
||||||
import { v4 as uuid } from 'uuid'
|
import { v4 as uuid } from 'uuid'
|
||||||
import type { Block } from '../layout.types'
|
import type { Block } from '../layout.types'
|
||||||
import { ColorPicker } from 'vue3-colorpicker'
|
|
||||||
import 'vue3-colorpicker/style.css'
|
import 'vue3-colorpicker/style.css'
|
||||||
import { globalToast } from '@/main'
|
import { globalToast } from '@/main'
|
||||||
import UploadAndCut from '@/utils/UploadAndCut'
|
import UploadAndCut from '@/utils/UploadAndCut'
|
||||||
import { AddToToken } from './AdderPage'
|
import { AddToToken } from './AdderPage'
|
||||||
import DefaultImg from '/tab/icons/bgGameCloud.png'
|
|
||||||
import useAdderPageStore, { type EditBlockItemType } from './useAdderPageStore'
|
import useAdderPageStore, { type EditBlockItemType } from './useAdderPageStore'
|
||||||
import useRouterStore from '@/useRouterStore'
|
import useRouterStore from '@/useRouterStore'
|
||||||
import NativeColorPicker from '@/utils/NativeColorPicker'
|
import NativeColorPicker from '@/utils/NativeColorPicker'
|
||||||
|
@ -64,7 +61,7 @@ const TypeSelector = defineComponent({
|
||||||
ctx.emit('update:value', 0)
|
ctx.emit('update:value', 0)
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{!props.icon && <img src={DefaultImg}></img>}
|
{!props.icon && <img src={'/tab/icons/bgGameCloud.png'}></img>}
|
||||||
{props.value === 0 && (
|
{props.value === 0 && (
|
||||||
<div
|
<div
|
||||||
class={
|
class={
|
||||||
|
@ -253,11 +250,10 @@ export default defineComponent(() => {
|
||||||
)}
|
)}
|
||||||
<Form.Item label=" " colon={false}>
|
<Form.Item label=" " colon={false}>
|
||||||
<button
|
<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'}
|
class={
|
||||||
style={
|
'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%)'
|
background: 'linear-gradient(180deg,#ffaa4e 0%,#ff6227 100%)'
|
||||||
}}
|
}}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
|
|
|
@ -42,11 +42,12 @@ const Item = defineComponent({
|
||||||
return () => (
|
return () => (
|
||||||
<div
|
<div
|
||||||
onContextmenu={(e) => {
|
onContextmenu={(e) => {
|
||||||
|
if (!props.id) return
|
||||||
useMenuStore().open('page')
|
useMenuStore().open('page')
|
||||||
useMenuStore().selectPage = {
|
useMenuStore().selectPage = {
|
||||||
id: props.id,
|
id: props.id,
|
||||||
label: props.label,
|
label: props.label,
|
||||||
name: props.name,
|
name: props.name
|
||||||
}
|
}
|
||||||
e.stopPropagation()
|
e.stopPropagation()
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
|
@ -106,6 +107,10 @@ export default defineComponent(() => {
|
||||||
<Transition>
|
<Transition>
|
||||||
{layout.ready && (
|
{layout.ready && (
|
||||||
<div
|
<div
|
||||||
|
onContextmenu={(e)=> {
|
||||||
|
e.stopPropagation()
|
||||||
|
e.preventDefault()
|
||||||
|
}}
|
||||||
class={clsx(
|
class={clsx(
|
||||||
'w-[130px] min-h-[620px] hover:bg-red-10 z-20 fixed top-1/2 -translate-y-1/2 bottom-0 ',
|
'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'
|
settings.state.siderDirection === 'left' ? 'left-0' : 'right-0'
|
||||||
|
@ -194,6 +199,10 @@ export default defineComponent(() => {
|
||||||
{/* 添加页面 */}
|
{/* 添加页面 */}
|
||||||
{menu.showEditPage && (
|
{menu.showEditPage && (
|
||||||
<div
|
<div
|
||||||
|
onContextmenu={(e) => {
|
||||||
|
e.stopPropagation()
|
||||||
|
e.preventDefault()
|
||||||
|
}}
|
||||||
class={clsx(
|
class={clsx(
|
||||||
'absolute bottom-0 w-56 rounded-lg p-4 bg-white/40 backdrop-blur shadow-lg',
|
'absolute bottom-0 w-56 rounded-lg p-4 bg-white/40 backdrop-blur shadow-lg',
|
||||||
settings.state.siderDirection === 'left' ? 'left-[70px]' : 'right-[70px]'
|
settings.state.siderDirection === 'left' ? 'left-[70px]' : 'right-[70px]'
|
||||||
|
@ -231,11 +240,13 @@ export default defineComponent(() => {
|
||||||
menu.selectPage.name = selected.value.name
|
menu.selectPage.name = selected.value.name
|
||||||
menu.selectPage.label = label.value
|
menu.selectPage.label = label.value
|
||||||
if (!menu.selectPage?.id) return
|
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) {
|
if (idx !== -1) {
|
||||||
layout.state.content[layout.state.current].pages[idx].label = label.value
|
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
|
menu.selectPage = undefined
|
||||||
} else {
|
} else {
|
||||||
|
@ -248,11 +259,10 @@ export default defineComponent(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
menu.showEditPage = false
|
menu.showEditPage = false
|
||||||
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<OhVueIcon name="px-check" />
|
<OhVueIcon name="px-check" />
|
||||||
{menu.selectPage ? "修改页面" : "添加页面"}
|
{menu.selectPage ? '修改页面' : '添加页面'}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -3,9 +3,10 @@ import request from '@/utils/request'
|
||||||
import { addIcons, OhVueIcon } from 'oh-vue-icons'
|
import { addIcons, OhVueIcon } from 'oh-vue-icons'
|
||||||
import { computed, defineComponent, onMounted, ref, watch, type CSSProperties } from 'vue'
|
import { computed, defineComponent, onMounted, ref, watch, type CSSProperties } from 'vue'
|
||||||
import { FaChevronLeft } from 'oh-vue-icons/icons'
|
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 type { CarouselRef } from 'ant-design-vue/es/carousel'
|
||||||
import { randomNum } from '@/utils/tool'
|
import { randomNum } from '@/utils/tool'
|
||||||
|
import jump from '@/utils/jump'
|
||||||
addIcons(FaChevronLeft)
|
addIcons(FaChevronLeft)
|
||||||
interface Owner {
|
interface Owner {
|
||||||
face: string
|
face: string
|
||||||
|
@ -56,11 +57,19 @@ export default defineComponent(() => {
|
||||||
})
|
})
|
||||||
return () => (
|
return () => (
|
||||||
<div class="w-full h-full p-2 bg-[#17212d] relative ">
|
<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
|
<div
|
||||||
class={'w-full h-full rounded-xl relative group'}
|
class={'w-full h-full rounded-xl relative group'}
|
||||||
|
onClick={() => {
|
||||||
|
jump('https://www.bilibili.com/video/av' + current.value?.aid)
|
||||||
|
}}
|
||||||
style={{
|
style={{
|
||||||
backgroundImage: `url('${current.value?.pic}')`,
|
backgroundImage: `url('${current.value?.pic}')`,
|
||||||
backgroundSize: 'cover',
|
backgroundSize: 'cover',
|
||||||
|
@ -68,7 +77,6 @@ export default defineComponent(() => {
|
||||||
backgroundRepeat: 'no-repeat'
|
backgroundRepeat: 'no-repeat'
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class={
|
class={
|
||||||
'absolute bottom-0 left-1/2 -translate-x-1/2 pb-2 w-[300px] flex flex-col text-white '
|
'absolute bottom-0 left-1/2 -translate-x-1/2 pb-2 w-[300px] flex flex-col text-white '
|
||||||
|
|
Loading…
Reference in New Issue