From 42951cc395ee6ec125eef40f5b469d8fce8fe858 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=B6=E5=90=AF=E9=BE=99?= <shiqilong@beyondcent.com>
Date: Mon, 26 Aug 2024 14:30:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E5=BA=94=E7=94=A8?=
 =?UTF-8?q?=E4=B8=AD=E5=BF=83(=E5=BE=85=E5=AF=B9=E6=8E=A5)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 build/plugin.ts                         |   3 +-
 src/components.d.ts                     |   8 +
 src/css/common.scss                     |   4 +
 src/icons/svg/svg-apps.svg              |  18 +++
 src/layouts/components/AppsList.vue     | 185 ++++++++++++++++++++++++
 src/layouts/components/RightContent.vue |   2 +
 6 files changed, 218 insertions(+), 2 deletions(-)
 create mode 100644 src/icons/svg/svg-apps.svg
 create mode 100644 src/layouts/components/AppsList.vue

diff --git a/build/plugin.ts b/build/plugin.ts
index 2bbc582..3dc61aa 100644
--- a/build/plugin.ts
+++ b/build/plugin.ts
@@ -9,7 +9,7 @@
 import vue from '@vitejs/plugin-vue'
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 import Components from 'unplugin-vue-components/vite'
-import { AntDesignVueResolver, ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 import Icons from 'unplugin-icons/vite'
 import IconsResolver from 'unplugin-icons/resolver'
 import AutoImport from 'unplugin-auto-import/vite'
@@ -49,7 +49,6 @@ export default [
   }),
   Components({
     resolvers: [
-      AntDesignVueResolver(),
       ElementPlusResolver({
         importStyle: 'sass'
       }),
diff --git a/src/components.d.ts b/src/components.d.ts
index 20f39e7..da3be40 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -36,14 +36,22 @@ declare module '@vue/runtime-core' {
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     Empty: typeof import('./components/empty/Empty.vue')['default']
+    IconEpApp: typeof import('~icons/ep/app')['default']
     IconEpArrowDown: typeof import('~icons/ep/arrow-down')['default']
     IconEpArrowLeft: typeof import('~icons/ep/arrow-left')['default']
     IconEpArrowRight: typeof import('~icons/ep/arrow-right')['default']
     IconEpBell: typeof import('~icons/ep/bell')['default']
+    IconEpBellFill: typeof import('~icons/ep/bell-fill')['default']
+    IconEpBellFilled: typeof import('~icons/ep/bell-filled')['default']
+    IconEpG0ird: typeof import('~icons/ep/g0ird')['default']
+    IconEpGird: typeof import('~icons/ep/gird')['default']
+    IconEpGrid: typeof import('~icons/ep/grid')['default']
     IconEpHomeFilled: typeof import('~icons/ep/home-filled')['default']
     IconEpKey: typeof import('~icons/ep/key')['default']
     IconEpLock: typeof import('~icons/ep/lock')['default']
+    IconEpPlus: typeof import('~icons/ep/plus')['default']
     IconEpRight: typeof import('~icons/ep/right')['default']
+    IconEpSearch: typeof import('~icons/ep/search')['default']
     IconEpSwitchButton: typeof import('~icons/ep/switch-button')['default']
     IconEpUploadFilled: typeof import('~icons/ep/upload-filled')['default']
     IconEpUser: typeof import('~icons/ep/user')['default']
diff --git a/src/css/common.scss b/src/css/common.scss
index b99b7d7..454e3c4 100644
--- a/src/css/common.scss
+++ b/src/css/common.scss
@@ -505,3 +505,7 @@ a {
     display: none;
   }
 }
+
+.cur-point {
+  cursor: pointer !important;
+}
diff --git a/src/icons/svg/svg-apps.svg b/src/icons/svg/svg-apps.svg
new file mode 100644
index 0000000..2583211
--- /dev/null
+++ b/src/icons/svg/svg-apps.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>系统切换</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="下拉" transform="translate(-1637.000000, -18.000000)" fill="#7E84A3">
+            <g id="top" transform="translate(0.000000, 0.500000)">
+                <g id="编组-5" transform="translate(1637.000000, 16.500000)">
+                    <g id="编组-4" transform="translate(1.000000, 2.321573)">
+                        <rect id="矩形" x="0" y="0.678427125" width="9" height="9" rx="2"></rect>
+                        <rect id="矩形备份-3" x="0" y="10.6784271" width="9" height="9" rx="2"></rect>
+                        <path d="M17.186453,0.383198505 L14.5077798,0.383198505 C12.8509255,0.383198505 11.5077798,1.72634426 11.5077798,3.38319851 L11.5077798,6.06187169 C11.5077798,7.71872594 12.8509255,9.06187169 14.5077798,9.06187169 L17.186453,9.06187169 C18.8433072,9.06187169 20.186453,7.71872594 20.186453,6.06187169 L20.186453,3.38319851 C20.186453,1.72634426 18.8433072,0.383198505 17.186453,0.383198505 Z M14.5077798,2.38319851 L17.186453,2.38319851 C17.7387377,2.38319851 18.186453,2.83091376 18.186453,3.38319851 L18.186453,6.06187169 C18.186453,6.61415644 17.7387377,7.06187169 17.186453,7.06187169 L14.5077798,7.06187169 C13.955495,7.06187169 13.5077798,6.61415644 13.5077798,6.06187169 L13.5077798,3.38319851 C13.5077798,2.83091376 13.955495,2.38319851 14.5077798,2.38319851 Z" id="矩形备份" fill-rule="nonzero" transform="translate(15.847116, 4.722535) rotate(-45.000000) translate(-15.847116, -4.722535) "></path>
+                        <rect id="矩形备份-4" x="11" y="10.6784271" width="9" height="9" rx="2"></rect>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/layouts/components/AppsList.vue b/src/layouts/components/AppsList.vue
new file mode 100644
index 0000000..ec05f3e
--- /dev/null
+++ b/src/layouts/components/AppsList.vue
@@ -0,0 +1,185 @@
+<template>
+  <el-dropdown class="system-letter" popper-class="custom-dropdown-popper custom-dropdown-message" trigger="click">
+    <span class="m-r-md">
+      <el-icon class="message-icon cur-point"><svg-icon icon-name="svg-apps" class="cur-point" /></el-icon>
+    </span>
+    <template #dropdown>
+      <el-card class="list-group">
+        <template #header>
+          <div class="card-header">
+            <el-input v-model="appName" autocomplete="off" placeholder="搜索">
+              <template #prefix>
+                <el-icon>
+                  <icon-ep-search />
+                </el-icon>
+              </template>
+            </el-input>
+          </div>
+        </template>
+        <div v-for="item in appList" :key="item.id" class="list-group-item" @click="goPage(item)" :style="{ cursor: !item.enable ? 'not-allowed' : 'pointer' }">
+          <el-icon style="font-size: 38px"><svg-icon :icon-name="item.icon" /></el-icon>
+          <span class="text-content">{{ item.name }}</span>
+        </div>
+        <empty v-if="appList.length === 0"></empty>
+      </el-card>
+    </template>
+  </el-dropdown>
+</template>
+<script>
+import { ref } from 'vue'
+import { getTrxToken } from 'utils/auth'
+import { getMessage } from '@/services/message'
+
+export default {
+  setup() {
+    const appName = ref('')
+    const allAppList = ref([])
+    const getAppList = async () => {
+      const data = await getMessage({
+        page: 1,
+        rows: 5
+      })
+      if (data.success) {
+        allAppList.value = [
+          {
+            name: 'a系统',
+            id: 1,
+            icon: 'svg-apps',
+            url: 'https://www.baidu.com',
+            enable: true
+          },
+          {
+            name: 'b系统',
+            id: 2,
+            icon: 'svg-apps',
+            url: 'https://www.baidu.com',
+            enable: true
+          },
+          {
+            name: 'c系统',
+            id: 3,
+            icon: 'svg-apps',
+            url: 'https://www.baidu.com',
+            enable: true
+          },
+          {
+            name: 'd系统',
+            id: 4,
+            icon: 'svg-apps',
+            url: 'https://www.baidu.com',
+            enable: true
+          },
+          {
+            name: 'e系统',
+            id: 5,
+            icon: 'svg-apps',
+            url: 'https://www.baidu.com',
+            enable: true
+          },
+          {
+            name: 'f系统',
+            id: 6,
+            icon: 'svg-apps',
+            url: 'https://www.baidu.com',
+            enable: true
+          },
+          {
+            name: 'g系统',
+            id: 7,
+            icon: 'svg-apps',
+            url: 'https://www.baidu.com',
+            enable: true
+          },
+          {
+            name: 'h系统',
+            id: 8,
+            icon: 'svg-apps',
+            url: 'https://www.baidu.com',
+            enable: true
+          },
+          {
+            name: 'i系统',
+            id: 9,
+            icon: 'svg-apps',
+            url: 'https://www.baidu.com',
+            enable: true
+          },
+          {
+            name: 'j系统',
+            id: 10,
+            icon: 'svg-apps',
+            url: 'https://www.baidu.com',
+            enable: false
+          }
+        ]
+      }
+    }
+    getAppList()
+    const appList = computed(() => {
+      if (!appName.value) return allAppList.value
+      return allAppList.value.filter(item => item.name.includes(appName.value))
+    })
+    const goPage = item => {
+      if (!item.enable) return
+      const url = new URL(item.url)
+      url.searchParams.append('SYS_AUTH_TOKEN', getTrxToken())
+      window.open(url.toString(), '_blank')
+    }
+
+    return {
+      appName,
+      appList,
+      goPage
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.system-letter {
+  display: flex;
+  align-items: center;
+  .message-icon {
+    font-size: 20px;
+    color: #98a6ad;
+  }
+  :deep(.#{$namespace}-badge__content) {
+    border: none;
+  }
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.list-group {
+  padding: 0 !important;
+  width: 320px;
+  margin: 0;
+
+  .list-group-item {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    flex-direction: column;
+    width: 33%;
+    margin: 18px 0;
+    .text-content {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: #273478;
+      margin-top: 11px;
+      font-size: 14px;
+    }
+  }
+}
+</style>
+<style>
+.custom-dropdown-popper.custom-dropdown-message {
+  margin-top: 10px !important;
+  border: none;
+}
+</style>
diff --git a/src/layouts/components/RightContent.vue b/src/layouts/components/RightContent.vue
index e9e4621..c500c3b 100644
--- a/src/layouts/components/RightContent.vue
+++ b/src/layouts/components/RightContent.vue
@@ -11,6 +11,7 @@
       <!-- <service-order v-if="hasFms"></service-order> -->
       <!-- <HelpCenter v-if="userData" /> -->
     </template>
+    <AppsList></AppsList>
     <site-message></site-message>
     <personal-info></personal-info>
   </div>
@@ -21,6 +22,7 @@ import { computed } from 'vue'
 import PersonalInfo from './personal/index.vue'
 import ServiceOrder from './ServiceOrder.vue'
 import SiteMessage from './SiteMessage.vue'
+import AppsList from './AppsList.vue'
 // import HelpCenter from './HelpCenter.vue'
 import { useStore } from 'vuex'