From d802074e9160a1412ebea7b5b1572f5375a47af5 Mon Sep 17 00:00:00 2001
From: wanganmao <525987762@qq.com>
Date: Tue, 8 Nov 2022 15:36:21 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=9B=E4=BD=9C=E4=B8=AD=E5=BF=83?=
 =?UTF-8?q?=E5=88=9D=E5=A7=8B=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                  |   3 +-
 src/router/route.creative.js         |  27 +++++
 src/views/Creative/Material.vue      |  16 +++
 src/views/Creative/MyCreation.vue    |  66 +++++++++++
 src/views/Creative/index.vue         | 166 +++++++++++++++++++++++++++
 src/views/Home/components/Avatar.vue |   8 +-
 6 files changed, 283 insertions(+), 3 deletions(-)
 create mode 100644 src/router/route.creative.js
 create mode 100644 src/views/Creative/Material.vue
 create mode 100644 src/views/Creative/MyCreation.vue
 create mode 100644 src/views/Creative/index.vue

diff --git a/src/router/index.js b/src/router/index.js
index 57efc263..8159620b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,6 +5,7 @@ import TemplateMarket from "./route.templateMarket"
 import Contact from "./route.contact";
 import DocumentLibrary from "./route.documentLibrary";
 import DataStatistics from "./route.datastatistics";
+import Creative from "./route.creative"; // 创作中心路由
 
 
 
@@ -39,7 +40,7 @@ const constantRoutes = [
     name: "home",
     redirect: "/home/project",
     component: () => import(/* webpackChunkName: 'home' */ "@views/Home/Index.vue"),
-    children: [...ProjectManage, ...TemplateMarket, ...Contact, ...DocumentLibrary,...DataStatistics]
+    children: [...ProjectManage, ...TemplateMarket, ...Contact, ...DocumentLibrary,...DataStatistics, ...Creative]
   },
   {
     path: "/luck",
diff --git a/src/router/route.creative.js b/src/router/route.creative.js
new file mode 100644
index 00000000..ffbd16ee
--- /dev/null
+++ b/src/router/route.creative.js
@@ -0,0 +1,27 @@
+const Creative = () => import(/* webpackChunkName: 'home' */ '@views/Creative/index.vue');
+const MyCreation = () => import(/* webpackChunkName: 'home' */ '@views/Creative/MyCreation.vue');
+const Material = () => import(/* webpackChunkName: 'home' */ '@views/Creative/Material.vue');
+
+const router = [
+  {
+    path: 'creative',
+    name: 'creative',
+    component: Creative,
+    redirect: '/home/creative/my-creation',
+    children: [
+      {
+        path: "my-creation",
+        name: 'myCreation',
+        meta: { title: '我的作品' },
+        component: MyCreation,
+      },
+      {
+        path: "material",
+        name: 'material',
+        meta: { title: '素材库' },
+        component: Material,
+      },
+    ]
+  },
+];
+export default router;
diff --git a/src/views/Creative/Material.vue b/src/views/Creative/Material.vue
new file mode 100644
index 00000000..32eb9411
--- /dev/null
+++ b/src/views/Creative/Material.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="material"></div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+.material{
+  padding: 24px 33px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Creative/MyCreation.vue b/src/views/Creative/MyCreation.vue
new file mode 100644
index 00000000..e7dd5004
--- /dev/null
+++ b/src/views/Creative/MyCreation.vue
@@ -0,0 +1,66 @@
+<template>
+  <div class="myCreation">
+    <div class="search">
+      <a-menu v-model="current" mode="horizontal">
+        <a-menu-item key="all">全部 </a-menu-item>
+        <a-menu-item key="app1">3D虚拟门店</a-menu-item>
+        <a-menu-item key="app2">3D环物</a-menu-item>
+        <a-menu-item key="app3">3D商品模型</a-menu-item>
+      </a-menu>
+      <a-input v-model="userName" placeholder="请输入" style="width: 200px; margin-right: 5px;">
+        <template v-slot:prefix>
+          <SearchOutlined style="color: #BFBFBF;"/>
+        </template>
+        <template v-slot:suffix>
+          <span @click="search" class="searchBtn">
+            搜索
+          </span>
+        </template>
+      </a-input>
+      <a-button type="primary">
+        <PlusOutlined/> 新增
+      </a-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+import { SearchOutlined, PlusOutlined } from "@ant-design/icons-vue"
+
+
+const search = () => {
+  alert();
+}
+
+</script>
+
+<style lang="scss" scoped>
+.myCreation{
+  padding: 24px 33px;
+  .search{
+    display: flex;
+    .searchBtn{
+      cursor: pointer; 
+      border-left: solid 1px #E8E8E8; 
+      line-height: 16px;
+      padding-left: 5px;
+      color: #434343;
+    }
+  }
+  :deep(.ant-menu-horizontal){
+    line-height: 32px;
+    border-bottom: 0;
+    flex: 1;
+  }
+  :deep(.ant-menu-item:first-child){
+    padding-left: 0;
+  }
+  :deep(.ant-menu-item:first-child::after){
+    left: 0;
+  }
+  :deep(.ant-menu-item:last-child){
+    padding-right: 0;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Creative/index.vue b/src/views/Creative/index.vue
new file mode 100644
index 00000000..66953bb2
--- /dev/null
+++ b/src/views/Creative/index.vue
@@ -0,0 +1,166 @@
+<template>
+  <div class="creative">
+    <div class="menu-bar">
+      <div class="menu-bar-item" v-for="(item, i) in menus" :key="i">
+        <div class="menu-bar-no-child">
+          <div
+            class="menu-bar-item-main"
+            :class="{ 'menu-bar-item-main-active': $route.path == item.path }"
+            @click="$router.push(item.path)"
+          >
+            <div class="menu-bar-item-main-icon">
+              <i class="iconfont" v-html="item.icon"></i>
+            </div>
+            <div class="menu-bar-item-main-text">
+              <div>{{ item[property] }}</div>
+              <i
+                v-if="item.children.length > 0"
+                class="iconfont"
+                :class="{ 'iconfont-active': item.unfold }"
+                >&#xe675;</i
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <router-view />
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, watch } from "@vue/runtime-core";
+import { useRoute } from "vue-router";
+export default {
+  name: "LeftMenuBar",
+  props: {
+    property: {
+      type: String,
+      default: "name",
+    },
+  },
+  activated() {
+    const route = useRoute();
+    const path = route.path;
+  },
+  setup(props, context) {
+    const index = ref(null);
+    const route = useRoute();
+    let menus = [
+      {
+        name: "我的作品",
+        icon: "&#xe690;",
+        path: "/home/creative/my-creation",
+        children: [],
+      },
+      {
+        name: "素材库",
+        icon: "&#xe690;",
+        path: "/home/creative/material",
+        children: [],
+      },
+    ];
+    return { menus };
+  },
+};
+
+</script>
+
+<style lang="scss" scoped>
+.creative{
+  height: calc(100vh - 98px);
+}
+.menu-bar {
+  display: flex;
+  width: 100%;
+  height: 48px;
+  font-size: 13px;
+  z-index: 99999;
+  &-item {
+    position: relative;
+    width: 220px;
+    z-index: 99;
+    background: rgba(245, 245, 245, 0.6);
+    &-child {
+      background-color: #ffffff;
+      .menu-bar-item-main-text{
+        width: 68px;
+      }
+    }
+    &-main {
+      width: 220px;
+      height: 48px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 8px 8px 0px 0px;
+      padding-right: 5px;
+      transition: all 0.3s;
+      &-active {
+        color: $yili-default-color;
+        background: #ffffff;
+        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+      }
+      &-icon {
+        opacity: 0.9;
+        margin: 8px 10px 0 0;
+      }
+      &-text {
+        display: flex;
+        align-items: center;
+        margin-top: 8px;
+        opacity: 0.8;
+        div {
+          font-size: 12px;
+        }
+      }
+      .iconfont {
+        font-size: 20px;
+        height: 18px;
+        line-height: 20px;
+        transition: all 0.3s;
+        transform: rotate(0deg);
+      }
+      .iconfont-active {
+        transform: rotate(180deg);
+      }
+      &:hover &-icon {
+        opacity: 1;
+      }
+      &:hover &-text {
+        opacity: 1;
+      }
+      &:hover {
+        background-color: #efeeee;
+      }
+    }
+  }
+  .menu-bar-item:last-child {
+    border-radius: 0px 8px 0px 0px;
+  }
+  .menu-bar-item:first-child {
+    border-radius: 8px 0px 0px 0px;
+  }
+}
+.menu-bar-item-main-text {
+  font-size: 0.75rem;
+  // z-index: 99;
+}
+.menu-bar-item-main-icon {
+  // z-index: 99;
+}
+::v-deep(.menu-bar-item-main) {
+  position: relative;
+  // z-index: 99;
+}
+.content{
+  position: relative;
+  height: calc(100% - 48px);
+  z-index: 999;
+  background-color: #fff;
+  box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.1);
+}
+</style>
diff --git a/src/views/Home/components/Avatar.vue b/src/views/Home/components/Avatar.vue
index 77b2cebf..b0b45ea2 100644
--- a/src/views/Home/components/Avatar.vue
+++ b/src/views/Home/components/Avatar.vue
@@ -8,7 +8,7 @@
         <div class="nav-item"
           v-for="(item, index) in navbar"
           :key="index"
-          :class="{active : curPath === item.link}"
+          :class="{active : curPath.startsWith(item.link)}"
           @click="switchTab(item.link)">{{ item.name }}</div>
       </div>
     </div>
@@ -84,7 +84,11 @@ export default defineComponent({
       {
         name: "问卷模版",
         link: "/home/market",
-      },      
+      },   
+      {
+        name: "创作中心",
+        link: "/home/creative",
+      },   
       // {
       //   name: "数据统计",
       //   link: "/home/datastatistics",