update： 新增H5编辑操作区域
This commit is contained in:
liyu
parent
a45e64fcb2
commit
1c3e71dc49
|
|
@ -310,6 +310,38 @@ export const asyncRoutes = [
|
|||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/h5-page',
|
||||
component: Layout,
|
||||
redirect: '/h5-page/my-work',
|
||||
name: 'H5',
|
||||
meta: {
|
||||
title: 'H5',
|
||||
icon: 'excel'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'my-work',
|
||||
component: () => import('@/views/h5/my-work'),
|
||||
name: 'MyWork',
|
||||
meta: { title: 'H5编辑' }
|
||||
},
|
||||
{
|
||||
path: 'my-data',
|
||||
component: () => import('@/views/h5/my-work'),
|
||||
name: 'MyData',
|
||||
meta: { title: '我的数据' }
|
||||
},
|
||||
{
|
||||
path: 'add',
|
||||
component: () => import('@/views/h5/add-data'),
|
||||
name: 'AddH5',
|
||||
hidden: true,
|
||||
meta: { title: '新增页面' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/zip',
|
||||
component: Layout,
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ const getters = {
|
|||
introduction: state => state.user.introduction,
|
||||
roles: state => state.user.roles,
|
||||
permission_routes: state => state.permission.routes,
|
||||
errorLogs: state => state.errorLog.logs
|
||||
errorLogs: state => state.errorLog.logs,
|
||||
pageMode: state => state.editor.pageMode
|
||||
}
|
||||
export default getters
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
/*
|
||||
新建/编辑页面数据
|
||||
|
||||
*/
|
||||
const state = {
|
||||
projectData: {
|
||||
pageMode: ''
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state
|
||||
}
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<template>
|
||||
<div class="page-edit">
|
||||
<!-- 左侧操作区，控制编辑级别 -->
|
||||
<el-row>
|
||||
<el-col :span="1">
|
||||
<div class="edit-side-left">
|
||||
<el-tabs v-model="activeTab" tab-position="left" style="height: 800px">
|
||||
<template v-for="(item, index) in sidebarMenus">
|
||||
<el-tab-pane v-if="!item.pageMode || (item.page === pageMode)" :key="index" :name="item.value">
|
||||
<el-tooltip slot="label" class="item" effect="dark" :content="item.label" placement="right">
|
||||
<i :class="item.elementUiIcon" />
|
||||
</el-tooltip>
|
||||
</el-tab-pane>
|
||||
</template>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<div class="edit-level">
|
||||
<componentLibs v-if="activeTab === 'componentLibs'" />
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="9">
|
||||
<!-- 内容编辑区 -->
|
||||
<div class="edit-content" />
|
||||
</el-col>
|
||||
|
||||
<el-col :span="7">
|
||||
<!-- 属性编辑区 -->
|
||||
<div class="edit-attr" />
|
||||
</el-col>
|
||||
|
||||
<!-- 操作条 -->
|
||||
<!-- <div class="edit-toolTip"></div> -->
|
||||
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import componentLibs from './components/component-libs.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
componentLibs
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeTab: 'componentLibs', // 默认展示组件级别
|
||||
sidebarMenus: [
|
||||
{
|
||||
label: '组件列表',
|
||||
value: 'componentLibs',
|
||||
elementUiIcon: 'el-icon-s-operation'
|
||||
},
|
||||
{
|
||||
label: '页面管理',
|
||||
pageMode: 'h5',
|
||||
value: 'pageManage',
|
||||
elementUiIcon: 'el-icon-document'
|
||||
},
|
||||
{
|
||||
label: '模板库',
|
||||
value: 'templateLibs',
|
||||
elementUiIcon: 'el-icon-files'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 混入到state属性
|
||||
...mapGetters([
|
||||
'pageMode'
|
||||
])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.page-edit {
|
||||
height: 800px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<template>
|
||||
<div class="component-libs-wrapper">
|
||||
<p class="page-title">组件库</p>
|
||||
<el-scrollbar>
|
||||
<ul class="scrollbar-wrapper">
|
||||
<li v-for="(item, index) in componentsList" :key="index">
|
||||
<!-- 二级标题 -->
|
||||
<div class="components-libs-title">
|
||||
<p>{{ item.title }}</p>
|
||||
</div>
|
||||
<div v-if="item.components && item.components.length" class="item-wrapper">
|
||||
<div
|
||||
v-for="(ele, idx) in item.components"
|
||||
:key="idx"
|
||||
class="component-item"
|
||||
@click="handleItemClick(ele)"
|
||||
>
|
||||
<div class="lib-icon">
|
||||
<i :class="[ele.icon]" />
|
||||
</div>
|
||||
<p class="lib-item-title">{{ ele.title }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import eleConfig from '../ele-config'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
componentsList: eleConfig
|
||||
}
|
||||
},
|
||||
created() {
|
||||
console.log('ll;', this.componentsList)
|
||||
},
|
||||
methods: {
|
||||
handleItemClick() {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.component-libs-wrapper {
|
||||
.page-title {
|
||||
text-align: center;
|
||||
}
|
||||
.scrollbar-wrapper {
|
||||
height: 600px;
|
||||
.item-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.component-item {
|
||||
background-color: gray;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border: 1px solid white;
|
||||
&:hover {
|
||||
border-color: aqua;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,182 @@
|
|||
/*
|
||||
有关组件的一些配置文件,也可以写到数据库从接口来取
|
||||
*/
|
||||
export default [
|
||||
{
|
||||
title: '基础组件',
|
||||
components: [
|
||||
{
|
||||
elName: 'qk-text',
|
||||
title: '文字',
|
||||
icon: 'iconfont iconwenben',
|
||||
// 每个组件设置props来展示哪些显示哪些编辑项
|
||||
valueType: '', // 标识数据类型，用于表单组件
|
||||
defaultStyle: {
|
||||
height: 40
|
||||
}
|
||||
},
|
||||
{
|
||||
elName: 'qk-image',
|
||||
title: '图片',
|
||||
icon: 'iconfont icontupian',
|
||||
valueType: '', // 标识数据类型，用于表单组件,
|
||||
defaultStyle: {
|
||||
height: 200
|
||||
}
|
||||
},
|
||||
{
|
||||
elName: 'qk-button',
|
||||
title: '按钮',
|
||||
icon: 'iconfont iconanniuzu',
|
||||
// 每个组件设置props来展示哪些显示哪些编辑项
|
||||
valueType: '', // 标识数据类型，用于表单组件
|
||||
defaultStyle: {
|
||||
width: 140,
|
||||
height: 40,
|
||||
paddingTop: 10,
|
||||
paddingBottom: 10,
|
||||
borderColor: '#999999',
|
||||
borderStyle: 'solid',
|
||||
borderWidth: 1,
|
||||
borderRadius: 4
|
||||
}
|
||||
},
|
||||
{
|
||||
elName: 'qk-rectangle-border',
|
||||
title: '矩形边框',
|
||||
icon: 'iconfont iconjuxing',
|
||||
valueType: '',
|
||||
defaultStyle: {
|
||||
width: 120,
|
||||
height: 100,
|
||||
borderColor: '#999999',
|
||||
borderStyle: 'solid',
|
||||
borderWidth: 2
|
||||
}
|
||||
},
|
||||
{
|
||||
elName: 'qk-rectangle-border',
|
||||
title: '分割线',
|
||||
icon: 'iconfont icon758bianjiqi_fengexian',
|
||||
valueType: '',
|
||||
defaultStyle: {
|
||||
height: 1,
|
||||
width: 300,
|
||||
backgroundColor: '#999999'
|
||||
}
|
||||
},
|
||||
{
|
||||
elName: 'qk-image-carousel',
|
||||
title: '图片轮播',
|
||||
icon: 'iconfont iconshouyelunbotu',
|
||||
valueType: '', // 标识数据类型，用于表单组件,
|
||||
defaultStyle: {
|
||||
height: 210
|
||||
}
|
||||
},
|
||||
{
|
||||
elName: 'qk-iframe',
|
||||
title: '内嵌iframe',
|
||||
icon: 'iconfont iconiframetianjia',
|
||||
valueType: '',
|
||||
defaultStyle: {
|
||||
// width: $config.canvasH5Width,
|
||||
width: 200,
|
||||
height: 300,
|
||||
paddingTop: 10,
|
||||
paddingBottom: 10
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '表单组件',
|
||||
components: [
|
||||
{
|
||||
elName: 'qk-input',
|
||||
title: '文本框',
|
||||
icon: 'iconfont iconwenbenkuang',
|
||||
isForm: true,
|
||||
defaultStyle: {
|
||||
height: 38,
|
||||
width: 250,
|
||||
paddingTop: 2,
|
||||
paddingBottom: 2,
|
||||
paddingLeft: 10,
|
||||
paddingRight: 10,
|
||||
borderColor: '#999999',
|
||||
borderStyle: 'solid',
|
||||
borderWidth: 1,
|
||||
borderRadius: 4
|
||||
}
|
||||
},
|
||||
{
|
||||
elName: 'qk-textarea',
|
||||
title: '多行文本',
|
||||
icon: 'iconfont iconwenbenkuang',
|
||||
isForm: true,
|
||||
defaultStyle: {
|
||||
height: 58,
|
||||
width: 250,
|
||||
paddingTop: 6,
|
||||
paddingBottom: 6,
|
||||
paddingLeft: 10,
|
||||
paddingRight: 10,
|
||||
borderColor: '#999999',
|
||||
borderStyle: 'solid',
|
||||
borderWidth: 1,
|
||||
borderRadius: 4
|
||||
}
|
||||
},
|
||||
{
|
||||
elName: 'radio',
|
||||
title: '单选框',
|
||||
icon: 'iconfont iconplus-radio',
|
||||
isForm: true
|
||||
},
|
||||
{
|
||||
elName: 'checkbox',
|
||||
title: '复选框',
|
||||
icon: 'iconfont iconduoxuan',
|
||||
isForm: true
|
||||
},
|
||||
{
|
||||
elName: 'date',
|
||||
title: '日期选择器',
|
||||
icon: 'iconfont iconriqi',
|
||||
isForm: true
|
||||
},
|
||||
{
|
||||
elName: 'time',
|
||||
title: '时间选择器',
|
||||
icon: 'iconfont iconshijian',
|
||||
isForm: true
|
||||
},
|
||||
{
|
||||
elName: 'datetime',
|
||||
title: '日期时间',
|
||||
icon: 'iconfont iconriqishijian',
|
||||
isForm: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '功能组件',
|
||||
components: [
|
||||
{
|
||||
elName: 'qk-bg-music',
|
||||
title: '音乐',
|
||||
icon: 'iconfont iconyinlemusic217',
|
||||
valueType: '',
|
||||
defaultStyle: {
|
||||
height: 52,
|
||||
width: 52
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '业务组件',
|
||||
components: []
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,137 @@
|
|||
<template>
|
||||
<div class="my-work">
|
||||
<div class="tab">
|
||||
<el-tabs v-model="searchParams.pageMode" @tab-click="handeleTabChange">
|
||||
<el-tab-pane v-for="(item, index) in pageModeList" :key="index" :name="item.value" :disabled="item.disabled">
|
||||
<div slot="label">{{ item.label }}</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<div class="work-content">
|
||||
<div class="nav-list">
|
||||
<div class="nau-list-item" :class="{active: searchParams.type === 'my'}" @click="handleSearch('my')">我的作品{{ myCount }}</div>
|
||||
<div class="nau-list-item" :class="{active: searchParams.type === 'share'}" @click="handleSearch('share')">参与作品{{ shareCount }}</div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrapper">
|
||||
<!-- 新增区域 -->
|
||||
<div class="item-add" @click="handleAddConfig">
|
||||
<i class="el-icon-plus" />
|
||||
<p>{{ searchParams.pageMode | getLabelText() }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 已编辑页面 -->
|
||||
<div v-for="(item, index) in pageList" :key="index" class="page-item" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
filters: {
|
||||
getLabelText(val) {
|
||||
return `新建${val}`
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// h5类型
|
||||
pageModeList: [
|
||||
{
|
||||
value: 'h5',
|
||||
label: 'H5',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
value: 'longPage',
|
||||
label: '长页H5',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
name: 'relativePage',
|
||||
label: '排版图文',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
value: 'pc',
|
||||
label: 'PC页面',
|
||||
disabled: true
|
||||
}
|
||||
],
|
||||
searchParams: {
|
||||
type: 'my',
|
||||
pageMode: 'h5'
|
||||
},
|
||||
shareCount: 5,
|
||||
myCount: 6,
|
||||
pageList: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getPageList()
|
||||
this.getPageCount()
|
||||
},
|
||||
methods: {
|
||||
// 切换tab获取数据
|
||||
handeleTabChange() {
|
||||
this.getPageList()
|
||||
this.getPageCount()
|
||||
},
|
||||
getPageList() {
|
||||
|
||||
},
|
||||
getPageCount() {
|
||||
|
||||
},
|
||||
handleSearch(str) {
|
||||
this.searchParams.type = str || ''
|
||||
},
|
||||
handleAddConfig() {
|
||||
// 关闭左侧目录
|
||||
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
|
||||
this.$router.push('add')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
$green: #30B08F;
|
||||
.my-work {
|
||||
padding: 10px;
|
||||
.work-content {
|
||||
.nav-list {
|
||||
width: 20%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
.nau-list-item {
|
||||
cursor: pointer;
|
||||
&.active {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
.item-add {
|
||||
width: 150px;
|
||||
height: 240px;
|
||||
background-color: gray;
|
||||
text-align: center;
|
||||
border: 1px solid white;
|
||||
transition: all 0.3s;
|
||||
&:hover {
|
||||
border-color: $green;
|
||||
}
|
||||
.el-icon-plus {
|
||||
margin-top: 55%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue