From 1c3e71dc4947c75dede0e71c53c0107b44937c23 Mon Sep 17 00:00:00 2001
From: liyu <liyu@mobike.com>
Date: Mon, 20 Jul 2020 19:10:50 +0800
Subject: [PATCH] =?UTF-8?q?update=EF=BC=9A=20=E6=96=B0=E5=A2=9EH5=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E6=93=8D=E4=BD=9C=E5=8C=BA=E5=9F=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                        |  32 ++++
 src/store/getters.js                       |   3 +-
 src/store/modules/editor.js                |  14 ++
 src/views/h5/add-data.vue                  |  85 ++++++++++
 src/views/h5/components/component-libs.vue |  72 ++++++++
 src/views/h5/ele-config.js                 | 182 +++++++++++++++++++++
 src/views/h5/my-work.vue                   | 137 ++++++++++++++++
 7 files changed, 524 insertions(+), 1 deletion(-)
 create mode 100644 src/store/modules/editor.js
 create mode 100644 src/views/h5/add-data.vue
 create mode 100644 src/views/h5/components/component-libs.vue
 create mode 100644 src/views/h5/ele-config.js
 create mode 100644 src/views/h5/my-work.vue

diff --git a/src/router/index.js b/src/router/index.js
index 2e522b2a..cee41b66 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -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,
diff --git a/src/store/getters.js b/src/store/getters.js
index 8fcf5a59..0ea9e697 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -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
diff --git a/src/store/modules/editor.js b/src/store/modules/editor.js
new file mode 100644
index 00000000..7d9ed710
--- /dev/null
+++ b/src/store/modules/editor.js
@@ -0,0 +1,14 @@
+/*
+新建/编辑页面数据
+
+*/
+const state = {
+  projectData: {
+    pageMode: ''
+  }
+}
+
+export default {
+  namespaced: true,
+  state
+}
diff --git a/src/views/h5/add-data.vue b/src/views/h5/add-data.vue
new file mode 100644
index 00000000..590f0481
--- /dev/null
+++ b/src/views/h5/add-data.vue
@@ -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>
diff --git a/src/views/h5/components/component-libs.vue b/src/views/h5/components/component-libs.vue
new file mode 100644
index 00000000..98cb3cf8
--- /dev/null
+++ b/src/views/h5/components/component-libs.vue
@@ -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>
diff --git a/src/views/h5/ele-config.js b/src/views/h5/ele-config.js
new file mode 100644
index 00000000..80e0e1b3
--- /dev/null
+++ b/src/views/h5/ele-config.js
@@ -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: []
+  }
+]
diff --git a/src/views/h5/my-work.vue b/src/views/h5/my-work.vue
new file mode 100644
index 00000000..6884c39b
--- /dev/null
+++ b/src/views/h5/my-work.vue
@@ -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>