From 128563d07f3c26b2ad255f5edd94ed8759f97a61 Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Thu, 28 Dec 2023 13:38:38 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E5=B7=A5=E5=85=B7=E7=AE=B1=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/assets/svg/toolbox-data_fill.svg      |  5 ++
 .../src/assets/svg/toolbox-icon_template.svg  |  7 ++
 .../src/layout/components/ToolboxCfg.vue      | 79 ++++++++++++++++---
 .../src/layout/components/TopDocCard.vue      |  4 +-
 4 files changed, 84 insertions(+), 11 deletions(-)
 create mode 100644 core/core-frontend/src/assets/svg/toolbox-data_fill.svg
 create mode 100644 core/core-frontend/src/assets/svg/toolbox-icon_template.svg

diff --git a/core/core-frontend/src/assets/svg/toolbox-data_fill.svg b/core/core-frontend/src/assets/svg/toolbox-data_fill.svg
new file mode 100644
index 0000000000..c4c2f14b03
--- /dev/null
+++ b/core/core-frontend/src/assets/svg/toolbox-data_fill.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.0855 23H3C2.73478 23 2.48043 22.8946 2.29289 22.7071C2.10536 22.5196 2 22.2652 2 22V2C2 1.73478 2.10536 1.48043 2.29289 1.29289C2.48043 1.10536 2.73478 1 3 1H19C19.2652 1 19.5196 1.10536 19.7071 1.29289C19.8946 1.48043 20 1.73478 20 2V9.0845C20.0001 9.34962 19.8949 9.60392 19.7075 9.7915L6.793 22.707C6.7001 22.7999 6.5898 22.8736 6.46841 22.9239C6.34701 22.9742 6.2169 23 6.0855 23ZM6.64645 11.8536C6.74021 11.9473 6.86739 12 7 12H12C12.1326 12 12.2598 11.9473 12.3536 11.8536C12.4473 11.7598 12.5 11.6326 12.5 11.5V10.5C12.5 10.3674 12.4473 10.2402 12.3536 10.1464C12.2598 10.0527 12.1326 10 12 10H7C6.86739 10 6.74021 10.0527 6.64645 10.1464C6.55268 10.2402 6.5 10.3674 6.5 10.5V11.5C6.5 11.6326 6.55268 11.7598 6.64645 11.8536ZM6.64645 6.85355C6.74021 6.94732 6.86739 7 7 7H15.5C15.5657 7 15.6307 6.98707 15.6913 6.96194C15.752 6.93681 15.8071 6.89998 15.8536 6.85355C15.9 6.80713 15.9368 6.752 15.9619 6.69134C15.9871 6.63068 16 6.56566 16 6.5V5.5C16 5.43434 15.9871 5.36932 15.9619 5.30866C15.9368 5.248 15.9 5.19287 15.8536 5.14645C15.8071 5.10002 15.752 5.06319 15.6913 5.03806C15.6307 5.01293 15.5657 5 15.5 5H7C6.86739 5 6.74021 5.05268 6.64645 5.14645C6.55268 5.24022 6.5 5.36739 6.5 5.5V6.5C6.5 6.63261 6.55268 6.75978 6.64645 6.85355Z" fill="#3370FF"/>
+<path d="M20.3474 17.277L17.527 14.4572L11.3295 20.6942L11 23.3665C11 23.4991 11.0527 23.6263 11.1464 23.7201C11.2402 23.8138 11.3674 23.8665 11.5 23.8665L14.1759 23.4405L20.3474 17.277Z" fill="#85A9FF"/>
+<path d="M21.0729 12.3138C20.6829 11.9233 20.0804 11.8933 19.7264 12.2463L18.2314 13.7463L21.0553 16.5702L22.5518 15.0762L22.5993 15.0252C22.9033 14.6672 22.8593 14.1002 22.4868 13.7272L21.0729 12.3138Z" fill="#85A9FF"/>
+</svg>
diff --git a/core/core-frontend/src/assets/svg/toolbox-icon_template.svg b/core/core-frontend/src/assets/svg/toolbox-icon_template.svg
new file mode 100644
index 0000000000..5a67c713c5
--- /dev/null
+++ b/core/core-frontend/src/assets/svg/toolbox-icon_template.svg
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 2C3 1.44772 3.44772 1 4 1H15.8608C15.9949 1 16.1234 1.05387 16.2174 1.14951L20.8566 5.86941C20.9485 5.96292 21 6.08879 21 6.2199V22C21 22.5523 20.5523 23 20 23H4C3.44772 23 3 22.5523 3 22V2Z" fill="#FF8800"/>
+<path d="M7 8.5C7 8.22386 7.22386 8 7.5 8H16.5C16.7761 8 17 8.22386 17 8.5V9.5C17 9.77614 16.7761 10 16.5 10H7.5C7.22386 10 7 9.77614 7 9.5V8.5Z" fill="white"/>
+<path d="M11 12.5C11 12.2239 11.2239 12 11.5 12H16.5C16.7761 12 17 12.2239 17 12.5V17.5C17 17.7761 16.7761 18 16.5 18H11.5C11.2239 18 11 17.7761 11 17.5V12.5Z" fill="white"/>
+<path d="M7.5 12C7.22386 12 7 12.2239 7 12.5V17.5C7 17.7761 7.22386 18 7.5 18H8.5C8.77614 18 9 17.7761 9 17.5V12.5C9 12.2239 8.77614 12 8.5 12H7.5Z" fill="white"/>
+<path d="M16 1C16.0817 1.02367 16.1567 1.068 16.2174 1.12974L20.8566 5.84965C20.8946 5.88829 20.9256 5.93246 20.949 5.98024H17.1351C16.5082 5.98024 16 5.47202 16 4.8451V1Z" fill="#D97400"/>
+</svg>
diff --git a/core/core-frontend/src/layout/components/ToolboxCfg.vue b/core/core-frontend/src/layout/components/ToolboxCfg.vue
index 35635621cf..12101e8fa7 100644
--- a/core/core-frontend/src/layout/components/ToolboxCfg.vue
+++ b/core/core-frontend/src/layout/components/ToolboxCfg.vue
@@ -1,24 +1,83 @@
 <script lang="ts" setup>
+import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
+import TopDocCard from '@/layout/components/TopDocCard.vue'
 const { push, resolve } = useRouter()
-const redirectUser = () => {
+
+const showToolbox = ref(true)
+
+const cardInfoList = ref([] as unknown[])
+
+const loadInfoList = () => {
   const toolboxMenu = resolve('/toolbox')
-  const kidPath = toolboxMenu.matched[0].children[0].path
-  push(`${toolboxMenu.path}/${kidPath}`)
+  if (!toolboxMenu) {
+    showToolbox.value = false
+    return
+  }
+  const children = toolboxMenu.matched[0].children
+  if (!children?.length) {
+    showToolbox.value = false
+    return
+  }
+  children.forEach(item => {
+    const temp = {
+      name: item.meta.title,
+      rName: item.name,
+      path: item.path,
+      icon: 'toolbox-' + item.meta.icon
+    }
+    cardInfoList.value.push(temp)
+  })
 }
+
+const toRouter = item => {
+  console.log(item)
+  push({ name: item.rName })
+}
+onMounted(() => {
+  loadInfoList()
+})
 </script>
 
 <template>
-  <el-tooltip class="box-item" effect="dark" content="工具箱" placement="top">
-    <div class="sys-setting">
-      <el-icon @click="redirectUser">
-        <Icon class="icon-setting" name="sys-tools" />
-      </el-icon>
-    </div>
-  </el-tooltip>
+  <el-popover
+    :show-arrow="false"
+    popper-class="toolbox-top-popover"
+    placement="bottom-end"
+    width="112"
+    trigger="hover"
+  >
+    <top-doc-card
+      :span="12"
+      v-for="(item, index) in cardInfoList"
+      :key="index"
+      :card-info="item"
+      @click="toRouter(item)"
+    ></top-doc-card>
+    <template #reference>
+      <div class="sys-setting" :class="{ 'hidden-toolbox': !showToolbox }">
+        <el-icon>
+          <Icon name="sys-tools" />
+        </el-icon>
+      </div>
+    </template>
+  </el-popover>
 </template>
 
+<style lang="less">
+.toolbox-top-popover {
+  height: 82px;
+  min-width: 112px !important;
+  padding: 16px !important;
+  .doc-card {
+    margin: auto !important;
+  }
+}
+</style>
 <style lang="less" scoped>
+.hidden-toolbox {
+  display: none !important;
+}
 .sys-setting {
   margin: 0 0 0 10px;
   padding: 5px;
diff --git a/core/core-frontend/src/layout/components/TopDocCard.vue b/core/core-frontend/src/layout/components/TopDocCard.vue
index e9b70fe549..7b176eb66d 100644
--- a/core/core-frontend/src/layout/components/TopDocCard.vue
+++ b/core/core-frontend/src/layout/components/TopDocCard.vue
@@ -16,7 +16,9 @@ const props = defineProps({
 const { cardInfo } = toRefs(props)
 
 const openBlank = () => {
-  window.open(cardInfo.value.url)
+  if (cardInfo.value.url) {
+    window.open(cardInfo.value.url)
+  }
 }
 </script>