[add] UI 修改

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@arco-themes/vue-taolu-publishing-platform": "^0.0.2",
     "@vue-office/docx": "^1.6.2",
     "@vue-office/excel": "^1.7.11",
     "@vue-office/pptx": "^0.0.6",

src/components/breadcrumb/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="mb-15">
+    <div class="flex flex-center  flex-justify-start">
+      <div v-for="(item,index) in history" class="flex flex-center flex-justify-start">
+        <p v-if="index !== history.length - 1" class="p1 pointer" >{{item.title}}</p>
+        <p v-else class=" p2">{{item.title}}</p>
+
+        <icon-right v-if="index !== history.length - 1"  style="padding:0 10px"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      history: [
+        {title:'项目库',path:'/system/region'},
+        {title:'项目详情',path:'/system/region'},
+        {title:'项目文件夹',path:'/system/region/info'}
+      ]
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.p1 {
+  padding: 10px 0 10px 0;
+}
+
+.p1:hover{
+  padding: 10px 0 10px 0;
+  color: #000000;
+}
+
+.p2 {
+  padding: 10px 0 10px 0;
+  color:red
+}
+
+</style>

src/layout/left.vue

@@ -1,44 +1,76 @@
 <template>
     <div>
-        <div style="background-color: red">
+        <div>
             <div class="menu">
                 <div class="flex flex-center flex-justify-start mt-32 ml-15">
-                  <img
+                    <img style="height: 24px" src="../assets/vue.svg" />
-                      style="height:24px;"
+                    <p class="font-16 bold">工作台</p>
-                      src="../assets/vue.svg"
-                  />
-                  <p class="font-16 bold">工作台</p>
                 </div>
-                <div class="mt-20" >
+                <div class="mt-20 menu2">
-                    <div v-for="item in list" :key="item.id">
+                  <a-menu
-                        <div
+                      :style="{ width: '200px', height: '100%' }"
-                            class="row flex flex-center flex-justify-start pointer"
+                      breakpoint="xl"
-                            @click="goPath(item)"
+                      v-model:selected-keys="keys"
+                      :default-selected-keys="keys"
+                      @menu-item-click="goPath"
+                  >
+                    <template v-for="item in list" :key="item.id" @click="goPath(item.id)">
+                      <!-- 有子菜单 -->
+                      <a-sub-menu v-if="item.children && item.children.length" :key="item.id+'@'+item.value">
+                        <template #icon>
+                          <icon-apps />
+                        </template>
+                        <template #title>{{ item.name }}</template>
+
+                        <a-menu-item
+                            v-for="sub in item.children"
+                            :key="sub.id+'@'+sub.value"
+                            style="text-align: start;padding-left: 22px"
                         >
-                            <div class="flex flex-center">
+                          {{ sub.name }}
-                                <icon-home />
+                        </a-menu-item>
-                                <div class="ml-10" >
+                      </a-sub-menu>
-                                    {{ item.name }}
+
-                                </div>
+                      <!-- 没有子菜单（首页这种） -->
-                            </div>
+                      <a-menu-item v-else :key="item.id+'@'+item.value">
+                        <template #icon>
+                          <icon-apps />
+                        </template>
+                        <div class="flex flex-center flex-justify-start">
+                          {{ item.name }}
                         </div>
-                        <div v-if="item.children">
+                      </a-menu-item>
-                            <div
+                    </template>
-                                v-for="sub in item.children"
+                  </a-menu>
-                                class="sub flex flex-center flex-justify-start pointer"
+                </div>
-                                :key="sub.id"
+                <div class="bottom menu2" v-if="user">
-                                @click="goPath(sub)"
+                    <a-menu
-                            >
+                        mode="pop"
-                                <div
+                        :style="{ width: '200px', height: '100%' }"
-                                    class="flex flex-center flex-justify-between"
+                    >
-                                >
+                        <a-sub-menu key="2">
-                                    <div class="flex-child-average">
+                            <template #icon>
-                                        {{ sub.name }}
+                                <a-avatar :image-url="user.avatar" :size="24">
-                                    </div>
+                                </a-avatar>
-                                </div>
+                            </template>
-                            </div>
+                            <template #title>{{user.name}}</template>
-                        </div>
+                            <a-menu-item key="2_0">
-                    </div>
+                              <template #icon>
+                                <icon-message/>
+                              </template>
+                              消息中心</a-menu-item>
+                            <a-menu-item key="2_1">
+                              <template #icon>
+                                <icon-user />
+                              </template>
+                              个人中心</a-menu-item>
+                            <a-menu-item key="2_2">
+                              <template #icon>
+                                <icon-poweroff />
+                              </template>
+                              退出登录</a-menu-item>
+                        </a-sub-menu>
+                    </a-menu>
                 </div>
             </div>
         </div>
@@ -50,55 +82,50 @@ export default {
     data() {
         return {
             user: null,
-            list: []
+            list: [],
+            keys: []
         }
     },
     mounted() {
+        this.init()
         this.fetchMenu()
     },
     methods: {
+        init() {
+            const tmp = localStorage.getItem('user')
+            if (tmp) {
+                this.user = JSON.parse(tmp)
+            }
+        },
         fetchMenu() {
             this.$api.sys.menus().then(res => {
                 if (res.code === 200) {
                     this.list = res.data
                 }
+                if (this.list.length > 0) {
+                  const path = this.list[0]
+                  this.keys[0] = path.id + "@" + path.value
+                }
+
             })
         },
         goPath(res) {
-            this.$router.push(res.value)
+            const path = res.split("@")
+            this.keys[0] = res
+            this.$router.push(path[1])
         }
     }
 }
 </script>
 
 <style lang="scss" scoped>
-.menu {
+.menu2 :deep(.arco-menu) {
+    --color-menu-light-bg: #f8f9fb;
+}
+
+.bottom {
     position: fixed;
-    top: 0;
+    bottom: 16px;
-    width: 200px;
+    background-color: #5dc800;
-    bottom: 200px;
-
-    .row {
-      font-size: 16px;
-      padding: 16px;
-      color:#4c4d4e;
-      border: none;
-    }
-
-    .row:hover {
-        color: #4FAB5F;
-        font-weight: bold;
-        background-color: #f0f1f3;
-    }
-
-    .sub {
-        padding: 16px 62px;
-    }
-
-    .sub:hover {
-        color: #4FAB5F;
-        padding: 16px 62px;
-        background-color: #f0f1f3;
-    }
 }
 </style>

src/views/login/index.vue

@@ -2,7 +2,7 @@
     <div class="bg full-screen flex flex-center">
         <a-card class="flex flex-center">
             <div style="padding: 32px">
-                <h1 style="padding-bottom: 32px">👏 欢迎登录工作台</h1>
+                <h1 style="padding-bottom: 32px">👏 欢迎登录植趣工作台</h1>
                 <a-form :model="form" auto-label-width>
                     <a-form-item hide-label>
                         <a-input
@@ -40,7 +40,7 @@
         <div class="bottom">
             <div>
                 Copyright © 2024-{{ new Date().getFullYear() }}
-                科技有限公司 版权所有
+              植趣 版权所有
             </div>
             <div class="mt-10">All Rights Reserved.</div>
         </div>

src/views/system/region/index.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <navbar title="区域管理"></navbar>
+    <a-card>
+        <a-button type="text" @click="goInfo">查看</a-button>
+    </a-card>
+  </div>
+</template>
+
+<script>
+import navbar from '@/components/navbar/index.vue'
+export default {
+  components: {
+    navbar,
+  },
+  methods: {
+    goInfo() {
+      this.$router.push({ path: "/system/region/info" });
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/system/region/info.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <navbar title="区域详情"></navbar>
+    <breadcrumb/>
+    <a-card>info</a-card>
+  </div>
+</template>
+
+<script>
+import navbar from '@/components/navbar/index.vue'
+import breadcrumb  from "@/components/breadcrumb/index.vue";
+export default {
+  components: {
+    navbar,
+    breadcrumb
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>