From 2952e6911ff619e0d32fa6e76ce774ba9cd749db Mon Sep 17 00:00:00 2001
From: kubbo <390378816@qq.com>
Date: Tue, 7 Feb 2023 22:05:25 +0800
Subject: [PATCH] =?UTF-8?q?=E5=86=99=E4=BA=86=E4=B8=80=E4=B8=8B=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/apps/AppMenu.vue        |  5 ++++
 web/src/components/KuLayout.vue | 35 +++++++++++++++++++++++++++
 web/src/components/KuTable.vue  | 28 ++++++++++++++++++++++
 web/src/components/KuTitle.vue  | 42 +++++++++++++++++++++++++++++++++
 web/src/components/navTabs.vue  | 29 +++++++++++++----------
 web/src/utils/router.js         |  5 ++--
 web/src/views/appEntry.vue      | 10 ++++----
 web/src/views/home.vue          |  6 ++---
 8 files changed, 135 insertions(+), 25 deletions(-)
 create mode 100644 web/src/components/KuLayout.vue
 create mode 100644 web/src/components/KuTable.vue
 create mode 100644 web/src/components/KuTitle.vue

diff --git a/web/src/apps/AppMenu.vue b/web/src/apps/AppMenu.vue
index 588a0d7..d13d532 100644
--- a/web/src/apps/AppMenu.vue
+++ b/web/src/apps/AppMenu.vue
@@ -1,12 +1,17 @@
 <template>
   <section class="AppMenu">
+    <ku-layout :title="$options.label">
 
+    </ku-layout>
   </section>
 </template>
 
 <script>
+import KuLayout from "../components/KuLayout";
+
 export default {
   name: "AppMenu",
+  components: {KuLayout},
   label: "菜单管理",
   data() {
     return {}
diff --git a/web/src/components/KuLayout.vue b/web/src/components/KuLayout.vue
new file mode 100644
index 0000000..49632c9
--- /dev/null
+++ b/web/src/components/KuLayout.vue
@@ -0,0 +1,35 @@
+<template>
+  <section class="KuLayout mar-h8 mar-b8">
+    <ku-title :title="title" border>
+      <slot name="title" v-if="$slots.title"/>
+    </ku-title>
+    <div class="content fill pad-v16">
+      <slot/>
+    </div>
+  </section>
+</template>
+
+<script>
+import KuTitle from "./KuTitle";
+
+export default {
+  name: "KuLayout",
+  components: {KuTitle},
+  props: {
+    title: {default: "标题"}
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.KuLayout {
+  display: flex;
+  flex-direction: column;
+  height: calc(100% - 8px);
+  padding: 0 8px;
+  overflow: hidden;
+
+  .content {
+  }
+}
+</style>
\ No newline at end of file
diff --git a/web/src/components/KuTable.vue b/web/src/components/KuTable.vue
new file mode 100644
index 0000000..d9e2b5a
--- /dev/null
+++ b/web/src/components/KuTable.vue
@@ -0,0 +1,28 @@
+<template>
+  <section class="KuTable">
+    <el-table :data="data">
+      <el-table-column v-for="col in columns" v-bind="col"/>
+    </el-table>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "KuTable",
+  props: {
+    data: {default: () => []},
+    columns: {default: () => []},
+  },
+  data() {
+    return {}
+  },
+  methods: {},
+  created() {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.KuTable {
+}
+</style>
\ No newline at end of file
diff --git a/web/src/components/KuTitle.vue b/web/src/components/KuTitle.vue
new file mode 100644
index 0000000..153fbc6
--- /dev/null
+++ b/web/src/components/KuTitle.vue
@@ -0,0 +1,42 @@
+<template>
+  <section class="KuTitle flex center" :class="{border}">
+    <div class="fill">
+      <slot v-if="$slots.title" name="title"/>
+      <span v-else v-text="title"/>
+    </div>
+    <slot v-if="$slots.right" name="right"/>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "KuTitle",
+  props: {
+    title: String,
+    border: Boolean
+  },
+  data() {
+    return {}
+  },
+  methods: {},
+  created() {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.KuTitle {
+  height: 48px;
+  box-sizing: border-box;
+
+  &.border {
+    border-bottom: 1px solid #ddd;
+  }
+
+  .fill {
+    color: #222;
+    font-size: 16px;
+    font-weight: 700;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/web/src/components/navTabs.vue b/web/src/components/navTabs.vue
index 210ff2d..56d4e61 100644
--- a/web/src/components/navTabs.vue
+++ b/web/src/components/navTabs.vue
@@ -1,5 +1,17 @@
 <template>
-  <section class="navTabs flex pad-h8 pad-v8">
+  <section class="navTabs flex pad-h8 pad-v8 center">
+    <el-dropdown class="" @command="handleOpt">
+      <el-icon>
+        <Setting/>
+      </el-icon>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item command="clearAllPages">关闭全部</el-dropdown-item>
+          <el-dropdown-item command="clearOtherPages">关闭其他</el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+    <el-divider direction="vertical"/>
     <div class="fill flex">
       <div class="item pad-h8" v-text="`首页`" :class="{current:$route.name=='工作台'}" @click="$router.push({name:'工作台'})"/>
       <div class="item pad-h8 flex center" v-for="item in tabs" :key="item.id"
@@ -10,32 +22,23 @@
         </el-icon>
       </div>
     </div>
-    <el-dropdown class="mar-l8" @command="handleOpt">
-      <el-button>更多</el-button>
-      <template #dropdown>
-        <el-dropdown-menu>
-          <el-dropdown-item command="clearAllPages">关闭全部</el-dropdown-item>
-          <el-dropdown-item command="clearOtherPages">关闭其他</el-dropdown-item>
-        </el-dropdown-menu>
-      </template>
-    </el-dropdown>
   </section>
 </template>
 
 <script>
 import {mapActions, mapState} from "pinia/dist/pinia";
 import {mainStore} from "../utils/store";
-import {Close} from "@element-plus/icons-vue";
+import {Close, Setting} from "@element-plus/icons-vue";
 
 export default {
   name: "navTabs",
-  components: {Close},
+  components: {Setting, Close},
   computed: {
     ...mapState(mainStore, ['pages']),
     tabs: v => v.pages
   },
   methods: {
-    ...mapActions(mainStore, ['deletePage', 'clearOtherPages']),
+    ...mapActions(mainStore, ['deletePage', 'clearOtherPages', 'addPage']),
     handleClosePage(id) {
       const {pages} = this
       if (id == this.currentTab) {
diff --git a/web/src/utils/router.js b/web/src/utils/router.js
index 11286e3..85cabb2 100644
--- a/web/src/utils/router.js
+++ b/web/src/utils/router.js
@@ -3,7 +3,7 @@ import {getToken} from './tools'
 
 
 let home = {name: "工作台", path: "/v", component: () => import('../views/home')},
-    routes = [{name: "登录", path: "/login", component: () => import('../views/login')}]
+  routes = [{name: "登录", path: "/login", component: () => import('../views/login')}]
 const loadApps = () => {
   const files = import.meta.glob('../apps/App*.vue'), apps = []
   return Promise.all(Object.keys(files).map(path => {
@@ -13,8 +13,7 @@ const loadApps = () => {
           name,
           label: label || name,
           path: name,
-          component: () => import("../views/appEntry"),
-          app: file.default
+          component: () => import(path),
         }
         return apps.push(addApp)
       }
diff --git a/web/src/views/appEntry.vue b/web/src/views/appEntry.vue
index e2ef8ee..3e46447 100644
--- a/web/src/views/appEntry.vue
+++ b/web/src/views/appEntry.vue
@@ -1,5 +1,5 @@
 <template>
-  <component class="appEntry" v-if="app" :is="app" :instance="$http"/>
+  <component class="appEntry" v-if="app" :is="app.name" :instance="$http"/>
 </template>
 
 <script>
@@ -20,11 +20,9 @@ export default {
     app() {
       if (this.name) return this.name
       else {
-        if (this.$route.name == '工作台') return Console
-        const route = this.user.info?.menuSet.find(e => e.route == this.$route.name)
-        if (route?.app.indexOf('/') > -1) {//处理历史数据,后续慢慢调整
-          return () => import(`./${route.app}`)
-        } else if (defineComponent(route?.app)) {
+        const mods = this.user.info?.menuSet || this.user.level == 1 ? this.apps.map(e => ({...e, route: e.name})) : []
+        const route = mods.find(e => e.route == this.$route.name)
+        if (route && defineComponent(route?.app)) {
           return route.app
         } else return Building
       }
diff --git a/web/src/views/home.vue b/web/src/views/home.vue
index 2577688..d85ca99 100644
--- a/web/src/views/home.vue
+++ b/web/src/views/home.vue
@@ -2,15 +2,15 @@
   <el-row class="home">
     <slider-nav v-if="system"/>
     <div class="fill h100 flex column">
-      <div class="headerNav flex center pad-h32">
-        <el-row class="fill"/>
+      <div class="headerNav flex center pad-h8">
+        <nav-tabs class="fill"/>
         <el-row align="middle" class="right">
           <el-avatar class="mar-r8" :src="user.avatar">游客</el-avatar>
           {{ user.name || "游客" }}，欢迎您！
         </el-row>
       </div>
       <div class="mainContent fill">
-        <nav-tabs/>
+
         <div v-if="$route.name=='工作台'" class="default fill">
           <div>欢迎来到{{ $sys.title }}</div>
         </div>