创建应用

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)
 }

src/main.js

@@ -1,4 +1,5 @@
 import "./assets/main.css"
+import "./style/common.css"
 
 import { createApp } from "vue"
 import { createPinia } from "pinia"

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
+        }
+      ]
     }
   ]
 })

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>

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>

src/views/im/ImHomeView.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div>sss</div>
+</template>
+
+<style scoped></style>