Merge branch 'dev' of https://gitee.com/yudaocode/yudao-ui-admin-vue3 into dev
YunaiV
2 years ago
commit
df1c565cd9
@ -1,19 +0,0 @@
|
||||
# 本地开发环境
|
||||
NODE_ENV=development
|
||||
|
||||
VITE_DEV=true
|
||||
|
||||
# 请求路径
|
||||
VITE_BASE_URL='http://127.0.0.1:48080'
|
||||
|
||||
# 上传路径
|
||||
VITE_UPLOAD_URL='http://127.0.0.1:48080/admin-api/infra/file/upload'
|
||||
|
||||
# 接口前缀
|
||||
VITE_API_BASEPATH=/dev-api
|
||||
|
||||
# 接口地址
|
||||
VITE_API_URL=/admin-api
|
||||
|
||||
# 打包路径
|
||||
VITE_BASE_PATH=/
|
||||
@ -0,0 +1,36 @@
|
||||
import { DiyComponent } from '@/components/DiyEditor/util'
|
||||
|
||||
// 悬浮按钮属性
|
||||
export interface FloatingActionButtonProperty {
|
||||
// 展开方向
|
||||
direction: 'horizontal' | 'vertical'
|
||||
// 是否显示文字
|
||||
showText: boolean
|
||||
// 按钮列表
|
||||
list: FloatingActionButtonItemProperty[]
|
||||
}
|
||||
|
||||
// 悬浮按钮项属性
|
||||
export interface FloatingActionButtonItemProperty {
|
||||
// 图片地址
|
||||
imgUrl: string
|
||||
// 跳转连接
|
||||
url: string
|
||||
// 文字
|
||||
text: string
|
||||
// 文字颜色
|
||||
textColor: string
|
||||
}
|
||||
|
||||
// 定义组件
|
||||
export const component = {
|
||||
id: 'FloatingActionButton',
|
||||
name: '悬浮按钮',
|
||||
icon: 'tabler:float-right',
|
||||
position: 'fixed',
|
||||
property: {
|
||||
direction: 'vertical',
|
||||
showText: true,
|
||||
list: [{ textColor: '#fff' }]
|
||||
}
|
||||
} as DiyComponent<FloatingActionButtonProperty>
|
||||
@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<el-form label-width="80px" :model="formData">
|
||||
<el-card header="按钮配置" class="property-group" shadow="never">
|
||||
<el-form-item label="展开方向" prop="direction">
|
||||
<el-radio-group v-model="formData.direction">
|
||||
<el-radio label="vertical">垂直</el-radio>
|
||||
<el-radio label="horizontal">水平</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="显示文字" prop="showText">
|
||||
<el-switch v-model="formData.showText" />
|
||||
</el-form-item>
|
||||
</el-card>
|
||||
<el-card header="按钮列表" class="property-group" shadow="never">
|
||||
<Draggable v-model="formData.list" :empty-item="{ textColor: '#fff' }">
|
||||
<template #default="{ element, index }">
|
||||
<el-form-item label="图标" :prop="`list[${index}].imgUrl`">
|
||||
<UploadImg v-model="element.imgUrl" height="56px" width="56px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="文字" :prop="`list[${index}].text`">
|
||||
<InputWithColor v-model="element.text" v-model:color="element.textColor" />
|
||||
</el-form-item>
|
||||
<el-form-item label="跳转链接" :prop="`list[${index}].url`">
|
||||
<AppLinkInput v-model="element.url" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</Draggable>
|
||||
</el-card>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { FloatingActionButtonProperty } from './config'
|
||||
import { usePropertyForm } from '@/components/DiyEditor/util'
|
||||
|
||||
// 悬浮按钮属性面板
|
||||
defineOptions({ name: 'FloatingActionButtonProperty' })
|
||||
|
||||
const props = defineProps<{ modelValue: FloatingActionButtonProperty }>()
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const { formData } = usePropertyForm(props.modelValue, emit)
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@ -0,0 +1,42 @@
|
||||
import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
|
||||
|
||||
/** 热区属性 */
|
||||
export interface HotZoneProperty {
|
||||
// 图片地址
|
||||
imgUrl: string
|
||||
// 导航菜单列表
|
||||
list: HotZoneItemProperty[]
|
||||
// 组件样式
|
||||
style: ComponentStyle
|
||||
}
|
||||
/** 热区项目属性 */
|
||||
export interface HotZoneItemProperty {
|
||||
// 链接的名称
|
||||
name: string
|
||||
// 链接
|
||||
url: string
|
||||
// 宽
|
||||
width: number
|
||||
// 高
|
||||
height: number
|
||||
// 上
|
||||
top: number
|
||||
// 左
|
||||
left: number
|
||||
}
|
||||
|
||||
// 定义组件
|
||||
export const component = {
|
||||
id: 'HotZone',
|
||||
name: '热区',
|
||||
icon: 'tabler:hand-click',
|
||||
property: {
|
||||
imgUrl: '',
|
||||
list: [] as HotZoneItemProperty[],
|
||||
style: {
|
||||
bgType: 'color',
|
||||
bgColor: '#fff',
|
||||
marginBottom: 8
|
||||
} as ComponentStyle
|
||||
}
|
||||
} as DiyComponent<HotZoneProperty>
|
||||
@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<div class="relative h-full min-h-30px w-full">
|
||||
<el-image :src="property.imgUrl" class="pointer-events-none h-full w-full select-none" />
|
||||
<div
|
||||
v-for="(item, index) in property.list"
|
||||
:key="index"
|
||||
class="hot-zone"
|
||||
:style="{
|
||||
width: `${item.width}px`,
|
||||
height: `${item.height}px`,
|
||||
top: `${item.top}px`,
|
||||
left: `${item.left}px`
|
||||
}"
|
||||
>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { HotZoneProperty } from './config'
|
||||
|
||||
/** 热区 */
|
||||
defineOptions({ name: 'HotZone' })
|
||||
const props = defineProps<{ property: HotZoneProperty }>()
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.hot-zone {
|
||||
position: absolute;
|
||||
background: var(--el-color-primary-light-7);
|
||||
opacity: 0.8;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
color: var(--el-color-primary);
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: move;
|
||||
z-index: 10;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<ComponentContainerProperty v-model="formData.style">
|
||||
<!-- 表单 -->
|
||||
<el-form label-width="80px" :model="formData" class="m-t-8px">
|
||||
<el-form-item label="上传图片" prop="imgUrl">
|
||||
<UploadImg v-model="formData.imgUrl" height="50px" width="auto" class="min-w-80px">
|
||||
<template #tip>
|
||||
<el-text type="info" size="small"> 推荐宽度 750</el-text>
|
||||
</template>
|
||||
</UploadImg>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-button type="primary" plain class="w-full" @click="handleOpenEditDialog">
|
||||
设置热区
|
||||
</el-button>
|
||||
</ComponentContainerProperty>
|
||||
<!-- 热区编辑对话框 -->
|
||||
<HotZoneEditDialog ref="editDialogRef" v-model="formData.list" :img-url="formData.imgUrl" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { usePropertyForm } from '@/components/DiyEditor/util'
|
||||
import { HotZoneProperty } from '@/components/DiyEditor/components/mobile/HotZone/config'
|
||||
import HotZoneEditDialog from './components/HotZoneEditDialog/index.vue'
|
||||
|
||||
/** 热区属性面板 */
|
||||
defineOptions({ name: 'HotZoneProperty' })
|
||||
|
||||
const props = defineProps<{ modelValue: HotZoneProperty }>()
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const { formData } = usePropertyForm(props.modelValue, emit)
|
||||
|
||||
// 热区编辑对话框
|
||||
const editDialogRef = ref()
|
||||
// 打开热区编辑对话框
|
||||
const handleOpenEditDialog = () => {
|
||||
editDialogRef.value.open()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.hot-zone {
|
||||
position: absolute;
|
||||
background: #409effbf;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: move;
|
||||
|
||||
/* 控制点 */
|
||||
.ctrl-dot {
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,26 @@
|
||||
import { DiyComponent } from '@/components/DiyEditor/util'
|
||||
|
||||
/** 弹窗广告属性 */
|
||||
export interface PopoverProperty {
|
||||
list: PopoverItemProperty[]
|
||||
}
|
||||
|
||||
export interface PopoverItemProperty {
|
||||
// 图片地址
|
||||
imgUrl: string
|
||||
// 跳转连接
|
||||
url: string
|
||||
// 显示类型：仅显示一次、每次启动都会显示
|
||||
showType: 'once' | 'always'
|
||||
}
|
||||
|
||||
// 定义组件
|
||||
export const component = {
|
||||
id: 'Popover',
|
||||
name: '弹窗广告',
|
||||
icon: 'carbon:popup',
|
||||
position: 'fixed',
|
||||
property: {
|
||||
list: [{ showType: 'once' }]
|
||||
}
|
||||
} as DiyComponent<PopoverProperty>
|
||||
@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<div
|
||||
v-for="(item, index) in property.list"
|
||||
:key="index"
|
||||
class="absolute bottom-50% right-50% h-454px w-292px border-1px border-gray border-rounded-4px border-solid bg-white p-1px"
|
||||
:style="{
|
||||
zIndex: 100 + index + (activeIndex === index ? 100 : 0),
|
||||
marginRight: `${-146 - index * 20}px`,
|
||||
marginBottom: `${-227 - index * 20}px`
|
||||
}"
|
||||
@click="handleActive(index)"
|
||||
>
|
||||
<el-image :src="item.imgUrl" fit="contain" class="h-full w-full">
|
||||
<template #error>
|
||||
<div class="h-full w-full flex items-center justify-center">
|
||||
<Icon icon="ep:picture" />
|
||||
</div>
|
||||
</template>
|
||||
</el-image>
|
||||
<div class="absolute right-1 top-1 text-12px">{{ index + 1 }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { PopoverProperty } from './config'
|
||||
|
||||
/** 弹窗广告 */
|
||||
defineOptions({ name: 'Popover' })
|
||||
// 定义属性
|
||||
defineProps<{ property: PopoverProperty }>()
|
||||
|
||||
// 处理选中
|
||||
const activeIndex = ref(0)
|
||||
const handleActive = (index: number) => {
|
||||
activeIndex.value = index
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<el-form label-width="80px" :model="formData">
|
||||
<Draggable v-model="formData.list" :empty-item="{ showType: 'once' }">
|
||||
<template #default="{ element, index }">
|
||||
<el-form-item label="图片" :prop="`list[${index}].imgUrl`">
|
||||
<UploadImg v-model="element.imgUrl" height="56px" width="56px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="跳转链接" :prop="`list[${index}].url`">
|
||||
<AppLinkInput v-model="element.url" />
|
||||
</el-form-item>
|
||||
<el-form-item label="显示次数" :prop="`list[${index}].showType`">
|
||||
<el-radio-group v-model="element.showType">
|
||||
<el-tooltip content="只显示一次，下次打开时不显示" placement="bottom">
|
||||
<el-radio label="once">一次</el-radio>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="每次打开时都会显示" placement="bottom">
|
||||
<el-radio label="always">不限</el-radio>
|
||||
</el-tooltip>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</Draggable>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PopoverProperty } from './config'
|
||||
import { usePropertyForm } from '@/components/DiyEditor/util'
|
||||
|
||||
// 弹窗广告属性面板
|
||||
defineOptions({ name: 'PopoverProperty' })
|
||||
|
||||
const props = defineProps<{ modelValue: PopoverProperty }>()
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const { formData } = usePropertyForm(props.modelValue, emit)
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
Loading…
Reference in New Issue