From 4516c13b45137a67a5a8e0b0255f17af39754e5b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E5=8B=A4=E6=B0=91?= <xuqinmin@bjca.org.cn>
Date: Tue, 20 Aug 2024 18:27:15 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=9B=E5=BB=BA=E5=BA=94=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/index.js              |  4 ++-
 src/main.js                   |  1 +
 src/router/index.ts           | 24 +++++++++++++-
 src/views/MainView.vue        | 59 +++++++++++++++++++++++-----------
 src/views/app/AppHomeView.vue | 60 +++++++++++++++++++++++++++++++++++
 src/views/im/ImHomeView.vue   |  7 ++++
 6 files changed, 135 insertions(+), 20 deletions(-)
 create mode 100644 src/views/app/AppHomeView.vue
 create mode 100644 src/views/im/ImHomeView.vue

diff --git a/src/api/index.js b/src/api/index.js
index b7ff52f..cbee8d0 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -31,5 +31,7 @@ API.setErrorHandle(errorHandle)
 export default {
   // 登录
   register: (params) => API.POSTJSON("/tenant/v1/tenant/create", params),
-  login: (params) => API.POSTJSON("/user/v1/login", params)
+  login: (params) => API.POSTJSON("/user/v1/login", params),
+  appList: (params) => API.POSTJSON("/tenant/v1/app/list", params),
+  appCreate: (params) => API.POSTJSON("/tenant/v1/app/create", params)
 }
diff --git a/src/main.js b/src/main.js
index 63dacfa..a4378f3 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,4 +1,5 @@
 import "./assets/main.css"
+import "./style/common.css"
 
 import { createApp } from "vue"
 import { createPinia } from "pinia"
diff --git a/src/router/index.ts b/src/router/index.ts
index b198bcb..b506537 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -3,6 +3,8 @@ import HomeView from "../views/HomeView.vue"
 import LoginView from "@/views/LoginView.vue"
 import RegisterView from "@/views/RegisterView.vue"
 import MainView from "@/views/MainView.vue"
+import ImHomeView from "@/views/im/ImHomeView.vue"
+import AppHomeView from "@/views/app/AppHomeView.vue"
 
 const router = createRouter({
   history: createWebHashHistory(),
@@ -33,7 +35,27 @@ const router = createRouter({
     {
       path: "/main",
       name: "主页",
-      component: MainView
+      component: MainView,
+      children: [
+        {
+          path: "/about",
+          name: "about",
+          // route level code-splitting
+          // this generates a separate chunk (About.[hash].js) for this route
+          // which is lazy-loaded when the route is visited.
+          component: () => import("../views/AboutView.vue")
+        },
+        {
+          path: "/im",
+          name: "IM信息",
+          component: ImHomeView
+        },
+        {
+          path: "/appManager",
+          name: "应用信息",
+          component: AppHomeView
+        }
+      ]
     }
   ]
 })
diff --git a/src/views/MainView.vue b/src/views/MainView.vue
index e806a60..011c931 100644
--- a/src/views/MainView.vue
+++ b/src/views/MainView.vue
@@ -1,32 +1,55 @@
 <template>
-  <div class="common-layout">
+  <el-container class="common-layout">
+    <el-header>
+      <el-menu menu-trigger="click" mode="horizontal" :ellipsis="false" :router="true">
+        <el-menu-item index="/">
+          <img style="width: 60px" src="@/assets/logo.svg" alt="logo" />
+        </el-menu-item>
+        <el-menu-item index="/about">用户信息</el-menu-item>
+        <el-menu-item index="/login">注销</el-menu-item>
+      </el-menu>
+    </el-header>
     <el-container>
-      <el-header>
+      <el-aside width="200px">
         <el-menu
-          :default-active="activeIndex"
-          menu-trigger="click"
-          class="el-menu-demo"
-          mode="horizontal"
-          :ellipsis="false"
+          default-active="/im"
+          class="el-menu-vertical-demo"
+          @open="handleOpen"
+          @close="handleClose"
           :router="true"
         >
-          <el-menu-item index="/">
-            <img style="width: 60px" src="@/assets/logo.svg" alt="logo" />
-          </el-menu-item>
-          <el-menu-item index="/about">控制台</el-menu-item>
-          <el-menu-item index="/login">注销</el-menu-item>
+          <el-sub-menu index="/about">
+            <template #title>
+              <el-icon>
+                <location />
+              </el-icon>
+              <span>Im服务</span>
+            </template>
+            <el-menu-item index="/im">应用信息</el-menu-item>
+          </el-sub-menu>
+          <el-sub-menu index="2">
+            <template #title>
+              <el-icon>
+                <location />
+              </el-icon>
+              <span>版本管理</span>
+            </template>
+            <el-menu-item index="/appManager">应用信息</el-menu-item>
+          </el-sub-menu>
         </el-menu>
-      </el-header>
-      <el-main>Main</el-main>
+      </el-aside>
+      <el-main><RouterView /></el-main>
     </el-container>
-  </div>
+  </el-container>
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue"
+import { Location } from "@element-plus/icons-vue"
 
-const activeIndex = ref("1")
-const handleSelect = (key: string, keyPath: string[]) => {
+const handleOpen = (key: string, keyPath: string[]) => {
+  console.log(key, keyPath)
+}
+const handleClose = (key: string, keyPath: string[]) => {
   console.log(key, keyPath)
 }
 </script>
diff --git a/src/views/app/AppHomeView.vue b/src/views/app/AppHomeView.vue
new file mode 100644
index 0000000..9744e5d
--- /dev/null
+++ b/src/views/app/AppHomeView.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+// @ts-ignore
+import API from "@/api/index.js"
+import { ref } from "vue"
+import { PriceTag } from "@element-plus/icons-vue"
+import { ElMessage } from "element-plus"
+
+const Api = API
+const appList = ref([])
+const init = () => {
+  Api.appList({ type: "APP" }).then((res) => {
+    appList.value = res
+  })
+}
+const appCreate = () => {
+  ElMessage.success("新建应用成功")
+  Api.appCreate({ type: "APP", appName: name.value }).then(() => {
+    init()
+    showDialog.value = false
+  })
+}
+const name = ref(undefined)
+const showDialog = ref(false)
+const addApp = () => {
+  name.value = undefined
+  showDialog.value = true
+}
+init()
+</script>
+
+<template>
+  <el-card style="margin-top: 20px">
+    <template #header>
+      <el-button @click="addApp">新建应用</el-button>
+    </template>
+    <el-table :data="appList" style="width: 100%">
+      <el-table-column type="index" width="150" label="序号" />
+      <el-table-column prop="appName" label="应用名称" />
+      <el-table-column prop="createTime" label="创建时间" />
+    </el-table>
+  </el-card>
+  <el-dialog v-model="showDialog" title="新建应用" width="500">
+    <el-input
+      class="text item"
+      v-model="name"
+      style="width: 440px"
+      placeholder="请输入应用名称"
+      :prefix-icon="PriceTag"
+      :clearable="true"
+    />
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="showDialog = false">Cancel</el-button>
+        <el-button type="primary" @click="appCreate"> Confirm</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/views/im/ImHomeView.vue b/src/views/im/ImHomeView.vue
new file mode 100644
index 0000000..78d6a4f
--- /dev/null
+++ b/src/views/im/ImHomeView.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>sss</div>
+</template>
+
+<style scoped></style>