feat: 创作中心初始化

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",

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;

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>

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>

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>

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>
@@ -85,6 +85,10 @@ export default defineComponent({
         name: "问卷模版",
         link: "/home/market",
       },   
+      {
+        name: "创作中心",
+        link: "/home/creative",
+      },   
       // {
       //   name: "数据统计",
       //   link: "/home/datastatistics",