From 6e3fa75747fc88a3e1cadc4eda2d0425ef9b49d3 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Tue, 31 Oct 2023 11:56:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=B8=AE=E5=8A=A9?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/assets/svg/top-doc-default.svg        |  5 ++
 .../FilterStyleSimpleSelector.vue             |  1 -
 .../src/layout/components/TopDoc.vue          | 48 +++++++++++---
 .../src/layout/components/TopDocCard.vue      | 63 +++++++++++++++++++
 4 files changed, 109 insertions(+), 8 deletions(-)
 create mode 100644 core/core-frontend/src/assets/svg/top-doc-default.svg
 create mode 100644 core/core-frontend/src/layout/components/TopDocCard.vue

diff --git a/core/core-frontend/src/assets/svg/top-doc-default.svg b/core/core-frontend/src/assets/svg/top-doc-default.svg
new file mode 100644
index 0000000000..92f4c2c23c
--- /dev/null
+++ b/core/core-frontend/src/assets/svg/top-doc-default.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="M4 2.5C4 1.94772 4.44772 1.5 5 1.5H14.8608C14.9949 1.5 15.1234 1.55387 15.2174 1.64951L19.8566 6.36941C19.9485 6.46292 20 6.58879 20 6.7199V21.5C20 22.0523 19.5523 22.5 19 22.5H5C4.44772 22.5 4 22.0523 4 21.5V2.5Z" fill="#3370FF"/>
+<path d="M15 1.51978C15.0817 1.54345 15.1567 1.58778 15.2174 1.64952L19.8566 6.36942C19.8946 6.40806 19.9256 6.45223 19.949 6.50001H16.1351C15.5082 6.50001 15 5.99179 15 5.36488V1.51978Z" fill="#245BDB"/>
+<path d="M8.07282 10.1819H15.6546C15.745 10.1819 15.8183 10.2551 15.8183 10.3455V11.1092C15.8183 11.1995 15.745 11.2728 15.6546 11.2728H8.07282C7.98244 11.2728 7.90918 11.1995 7.90918 11.1092V10.3455C7.90918 10.2551 7.98244 10.1819 8.07282 10.1819ZM8.07282 13.4546H15.6546C15.745 13.4546 15.8183 13.5279 15.8183 13.6182V14.3819C15.8183 14.4723 15.745 14.5455 15.6546 14.5455H8.07282C7.98244 14.5455 7.90918 14.4723 7.90918 14.3819V13.6182C7.90918 13.5279 7.98244 13.4546 8.07282 13.4546ZM8.07282 16.7273H12.1092C12.1996 16.7273 12.2728 16.8006 12.2728 16.891V17.6546C12.2728 17.745 12.1996 17.8182 12.1092 17.8182H8.07282C7.98244 17.8182 7.90918 17.745 7.90918 17.6546V16.891C7.90918 16.8006 7.98244 16.7273 8.07282 16.7273Z" fill="white"/>
+</svg>
diff --git a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/FilterStyleSimpleSelector.vue b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/FilterStyleSimpleSelector.vue
index 00b5fc13ab..d35c5b1d87 100644
--- a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/FilterStyleSimpleSelector.vue
+++ b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/FilterStyleSimpleSelector.vue
@@ -158,7 +158,6 @@ const { t } = useI18n()
 const dvMainStore = dvMainStoreWithOut()
 const snapshotStore = snapshotStoreWithOut()
 const filterStyle = computed<any>(() => {
-  console.log('filterStyle==' + JSON.stringify(dvMainStore.canvasStyleData.component.filterStyle))
   return dvMainStore.canvasStyleData.component.filterStyle
 })
 
diff --git a/core/core-frontend/src/layout/components/TopDoc.vue b/core/core-frontend/src/layout/components/TopDoc.vue
index 0de4a2681b..ee2bb5c3ed 100644
--- a/core/core-frontend/src/layout/components/TopDoc.vue
+++ b/core/core-frontend/src/layout/components/TopDoc.vue
@@ -1,20 +1,48 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import { Icon } from '@/components/icon-custom'
+import TopDocCard from '@/layout/components/TopDocCard.vue'
 const helpLink = ref('https://dataease.io/docs/')
 const openBlank = () => {
   window.open(helpLink.value)
 }
+
+const cardInfoList = [
+  { name: '帮助文档', url: 'https://dataease.io/docs/index.html', icon: 'top-doc-default' },
+  { name: '产品论坛', url: 'https://bbs.fit2cloud.com/c/de/6', icon: 'top-doc-default' },
+  {
+    name: '技术博客',
+    url: 'https://blog.fit2cloud.com/categories/dataease',
+    icon: 'top-doc-default'
+  },
+  { name: '企业版试用', url: 'https://jinshuju.net/f/TK5TTd', icon: 'top-doc-default' }
+]
 </script>
 
 <template>
-  <el-tooltip class="box-item" effect="dark" content="帮助文档" placement="top">
-    <div class="sys-setting">
-      <el-icon @click="openBlank">
-        <Icon name="docs" />
-      </el-icon>
-    </div>
-  </el-tooltip>
+  <el-popover
+    :show-arrow="false"
+    popper-class="top-popover"
+    placement="bottom-end"
+    width="208"
+    trigger="click"
+  >
+    <el-row>
+      <top-doc-card
+        :span="12"
+        v-for="(item, index) in cardInfoList"
+        :key="index"
+        :card-info="item"
+      ></top-doc-card>
+    </el-row>
+    <template #reference>
+      <div class="sys-setting">
+        <el-icon>
+          <Icon name="docs" />
+        </el-icon>
+      </div>
+    </template>
+  </el-popover>
 </template>
 
 <style lang="less" scoped>
@@ -31,3 +59,9 @@ const openBlank = () => {
   }
 }
 </style>
+
+<style lang="less">
+.top-popover {
+  padding: 0 0 16px 0 !important;
+}
+</style>
diff --git a/core/core-frontend/src/layout/components/TopDocCard.vue b/core/core-frontend/src/layout/components/TopDocCard.vue
new file mode 100644
index 0000000000..e9b70fe549
--- /dev/null
+++ b/core/core-frontend/src/layout/components/TopDocCard.vue
@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import { toRefs } from 'vue'
+
+const props = defineProps({
+  cardInfo: {
+    type: Object,
+    default() {
+      return {
+        name: '',
+        url: '',
+        icon: ''
+      }
+    }
+  }
+})
+const { cardInfo } = toRefs(props)
+
+const openBlank = () => {
+  window.open(cardInfo.value.url)
+}
+</script>
+
+<template>
+  <div class="doc-card" @click="openBlank">
+    <el-row class="base-show">
+      <Icon class-name="item-top-icon" :name="cardInfo.icon" />
+    </el-row>
+    <el-row class="base-show show-content"> {{ cardInfo.name }}</el-row>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.doc-card {
+  padding-top: 2px;
+  margin-top: 16px;
+  margin-left: 16px;
+  width: 80px;
+  height: 50px;
+  cursor: pointer;
+  &:hover {
+    background-color: rgba(30, 39, 56, 0.05);
+  }
+  &:active {
+    background-color: rgba(30, 39, 56, 0.1);
+  }
+}
+.base-show {
+  justify-content: center;
+}
+
+.show-content {
+  font-size: 14px;
+  color: #1f2329;
+  line-height: 22px;
+  font-weight: 400;
+  margin-top: 4px;
+}
+
+.item-top-icon {
+  width: 24px;
+  height: 24px;
+}
+</style>