From aa26979b1a0c80436be91536d267673ee7c3e591 Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Tue, 2 Apr 2024 17:24:54 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E6=8E=92=E5=BA=8F=E6=8C=89=E9=92=AE=20=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=92=E7=8A=B6=E6=80=81=E4=B8=8D=E5=AF=B9=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/common/DeResourceTree.vue       | 143 +++++++++---------
 .../src/views/dashboard/MobileConfigPanel.vue |   8 +-
 .../views/visualized/data/dataset/index.vue   |  76 +++++-----
 .../visualized/data/datasource/index.vue      |  77 +++++-----
 4 files changed, 139 insertions(+), 165 deletions(-)

diff --git a/core/core-frontend/src/views/common/DeResourceTree.vue b/core/core-frontend/src/views/common/DeResourceTree.vue
index d5b55fff10..f44b39c55d 100644
--- a/core/core-frontend/src/views/common/DeResourceTree.vue
+++ b/core/core-frontend/src/views/common/DeResourceTree.vue
@@ -390,6 +390,30 @@ const getDefaultExpandedKeys = () => {
   }
 }
 
+const sortList = [
+  {
+    name: '按创建时间升序',
+    value: 'time_asc'
+  },
+  {
+    name: '按创建时间降序',
+    value: 'time_desc',
+    divided: true
+  },
+  {
+    name: '按照名称升序',
+    value: 'name_asc'
+  },
+  {
+    name: '按照名称降序',
+    value: 'name_desc'
+  }
+]
+
+const sortTypeTip = computed(() => {
+  return sortList.find(ele => ele.value === state.curSortType).name
+})
+
 const sortTypeChange = sortType => {
   state.resourceTree = treeSort(state.originResourceTree, sortType)
   state.curSortType = sortType
@@ -488,51 +512,35 @@ defineExpose({
           </el-icon>
         </template>
       </el-input>
-      <el-dropdown trigger="click">
-        <el-icon class="insert-filter filter-icon-span">
-          <Icon
-            v-show="state.curSortType.includes('asc')"
-            name="dv-sort-asc"
-            class="opt-icon"
-          ></Icon>
-          <Icon
-            v-show="state.curSortType.includes('desc')"
-            name="dv-sort-desc"
-            class="opt-icon"
-          ></Icon>
+      <el-dropdown @command="sortTypeChange" trigger="click">
+        <el-icon class="filter-icon-span">
+          <el-tooltip :offset="16" effect="dark" :content="sortTypeTip" placement="top">
+            <Icon
+              v-if="state.curSortType.includes('asc')"
+              name="dv-sort-asc"
+              class="opt-icon"
+            ></Icon>
+          </el-tooltip>
+          <el-tooltip :offset="16" effect="dark" :content="sortTypeTip" placement="top">
+            <Icon
+              v-show="state.curSortType.includes('desc')"
+              name="dv-sort-desc"
+              class="opt-icon"
+            ></Icon>
+          </el-tooltip>
         </el-icon>
         <template #dropdown>
-          <el-dropdown-menu style="width: 150px">
-            <el-dropdown-item
-              class="sort-type-normal"
-              :class="{ 'sort-type-checked': state.curSortType === 'time_asc' }"
-              @click="sortTypeChange('time_asc')"
-            >
-              <span>按创建时间升序</span>
-              <el-icon style="margin-left: 4px"><Check /></el-icon>
-            </el-dropdown-item>
-            <el-dropdown-item
-              class="sort-type-normal"
-              :class="{ 'sort-type-checked': state.curSortType === 'time_desc' }"
-              @click="sortTypeChange('time_desc')"
-            >
-              <span>按创建时间降序</span> <el-icon style="margin-left: 8px"><Check /></el-icon>
-            </el-dropdown-item>
-            <el-divider style="margin: 12px 0" />
-            <el-dropdown-item
-              class="sort-type-normal"
-              :class="{ 'sort-type-checked': state.curSortType === 'name_asc' }"
-              @click="sortTypeChange('name_asc')"
-            >
-              <span>按照名称升序</span><el-icon><Check /></el-icon>
-            </el-dropdown-item>
-            <el-dropdown-item
-              class="sort-type-normal"
-              :class="{ 'sort-type-checked': state.curSortType === 'name_desc' }"
-              @click="sortTypeChange('name_desc')"
-            >
-              <span>按照名称降序</span><el-icon><Check /></el-icon>
-            </el-dropdown-item>
+          <el-dropdown-menu style="width: 246px">
+            <template :key="ele.value" v-for="ele in sortList">
+              <el-dropdown-item
+                class="ed-select-dropdown__item"
+                :class="ele.value === state.curSortType && 'selected'"
+                :command="ele.value"
+              >
+                {{ ele.name }}
+              </el-dropdown-item>
+              <li v-if="ele.divided" class="ed-dropdown-menu__item--divided"></li>
+            </template>
           </el-dropdown-menu>
         </template>
       </el-dropdown>
@@ -614,42 +622,27 @@ defineExpose({
   <XpackComponent ref="openHandler" jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvT3BlbkhhbmRsZXI=" />
 </template>
 <style lang="less" scoped>
-.insert-filter {
-  display: inline-block;
-  font-weight: 400 !important;
-  font-family: '阿里巴巴普惠体 3.0 55 Regular L3';
-  line-height: 1;
-  white-space: nowrap;
-  cursor: pointer;
-  color: var(--TextPrimary, #1f2329);
-  -webkit-appearance: none;
-  text-align: center;
-  box-sizing: border-box;
-  outline: 0;
-  margin: 0;
-  transition: 0.1s;
-  border-radius: 3px;
-
-  &:active {
-    color: #000;
-    border-color: #3a8ee6;
-    background-color: red;
-    outline: 0;
-  }
-
-  &:hover {
-    background-color: rgba(31, 35, 41, 0.1);
-    color: #3a8ee6;
-  }
-}
-
 .filter-icon-span {
-  border: 1px solid #dcdfe6;
+  border: 1px solid #bbbfc4;
   width: 32px;
   height: 32px;
   border-radius: 4px;
-  padding: 7px;
+  color: #1f2329;
+  padding: 8px;
   margin-left: 8px;
+  font-size: 16px;
+  cursor: pointer;
+
+  .opt-icon:focus {
+    outline: none !important;
+  }
+  &:hover {
+    background: #f5f6f7;
+  }
+
+  &:active {
+    background: #eff0f1;
+  }
 }
 .resource-tree {
   padding: 16px 0 0;
@@ -689,7 +682,7 @@ defineExpose({
   }
   .search-bar {
     padding-bottom: 10px;
-    width: calc(100% - 50px);
+    width: calc(100% - 40px);
   }
 }
 .title-area {
diff --git a/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue b/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
index b95073cb59..bc876958a0 100644
--- a/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
+++ b/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
@@ -208,13 +208,7 @@ const save = () => {
         <span class="open-mobile">开启移动端</span>
         <el-switch size="small" v-model="dvInfo.mobileLayout" />
         <span class="open-mobile-line"></span>
-        <el-tooltip
-          :show-arrow="false"
-          :offset="9"
-          effect="dark"
-          content="切换至PC端布局"
-          placement="bottom"
-        >
+        <el-tooltip :offset="14" effect="dark" content="切换至PC端布局" placement="bottom">
           <el-icon @click="handleBack" class="switch-pc">
             <Icon name="icon_pc_outlined" />
           </el-icon>
diff --git a/core/core-frontend/src/views/visualized/data/dataset/index.vue b/core/core-frontend/src/views/visualized/data/dataset/index.vue
index 80c22e0cb8..549b36a97b 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/index.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/index.vue
@@ -471,6 +471,10 @@ const sortList = [
   }
 ]
 
+const sortTypeTip = computed(() => {
+  return sortList.find(ele => ele.value === state.curSortType).name
+})
+
 const tablePanes = ref([])
 const tablePaneList = computed(() => {
   return nodeInfo.weight >= 7 ? [...defaultTab, ...tablePanes.value] : [...defaultTab]
@@ -578,17 +582,21 @@ const getMenuList = (val: boolean) => {
             </template>
           </el-input>
           <el-dropdown @command="sortTypeChange" trigger="click">
-            <el-icon class="insert-filter filter-icon-span">
-              <Icon
-                v-show="state.curSortType.includes('asc')"
-                name="dv-sort-asc"
-                class="opt-icon"
-              ></Icon>
-              <Icon
-                v-show="state.curSortType.includes('desc')"
-                name="dv-sort-desc"
-                class="opt-icon"
-              ></Icon>
+            <el-icon class="filter-icon-span">
+              <el-tooltip :offset="16" effect="dark" :content="sortTypeTip" placement="top">
+                <Icon
+                  v-if="state.curSortType.includes('asc')"
+                  name="dv-sort-asc"
+                  class="opt-icon"
+                ></Icon>
+              </el-tooltip>
+              <el-tooltip :offset="16" effect="dark" :content="sortTypeTip" placement="top">
+                <Icon
+                  v-show="state.curSortType.includes('desc')"
+                  name="dv-sort-desc"
+                  class="opt-icon"
+                ></Icon>
+              </el-tooltip>
             </el-icon>
             <template #dropdown>
               <el-dropdown-menu style="width: 246px">
@@ -787,42 +795,28 @@ const getMenuList = (val: boolean) => {
 
 <style lang="less" scoped>
 @import '@/style/mixin.less';
-.insert-filter {
-  display: inline-block;
-  font-weight: 400 !important;
-  font-family: '阿里巴巴普惠体 3.0 55 Regular L3';
-  line-height: 1;
-  white-space: nowrap;
-  cursor: pointer;
-  color: var(--TextPrimary, #1f2329);
-  -webkit-appearance: none;
-  text-align: center;
-  box-sizing: border-box;
-  outline: 0;
-  margin: 0;
-  transition: 0.1s;
-  border-radius: 3px;
-
-  &:active {
-    color: #000;
-    border-color: #3a8ee6;
-    background-color: red;
-    outline: 0;
-  }
-
-  &:hover {
-    background-color: rgba(31, 35, 41, 0.1);
-    color: #3a8ee6;
-  }
-}
 
 .filter-icon-span {
-  border: 1px solid #dcdfe6;
+  border: 1px solid #bbbfc4;
   width: 32px;
   height: 32px;
   border-radius: 4px;
-  padding: 7px;
+  color: #1f2329;
+  padding: 8px;
   margin-left: 8px;
+  font-size: 16px;
+  cursor: pointer;
+
+  .opt-icon:focus {
+    outline: none !important;
+  }
+  &:hover {
+    background: #f5f6f7;
+  }
+
+  &:active {
+    background: #eff0f1;
+  }
 }
 .dataset-manage {
   display: flex;
diff --git a/core/core-frontend/src/views/visualized/data/datasource/index.vue b/core/core-frontend/src/views/visualized/data/datasource/index.vue
index ba5ba066d5..2288b12839 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/index.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/index.vue
@@ -443,6 +443,10 @@ const sortList = [
     value: 'name_desc'
   }
 ]
+
+const sortTypeTip = computed(() => {
+  return sortList.find(ele => ele.value === state.curSortType).name
+})
 const tableData = shallowRef([])
 const tabData = shallowRef([])
 const handleNodeClick = data => {
@@ -781,17 +785,21 @@ const getMenuList = (val: boolean) => {
             </template>
           </el-input>
           <el-dropdown @command="sortTypeChange" trigger="click">
-            <el-icon class="insert-filter filter-icon-span">
-              <Icon
-                v-show="state.curSortType.includes('asc')"
-                name="dv-sort-asc"
-                class="opt-icon"
-              ></Icon>
-              <Icon
-                v-show="state.curSortType.includes('desc')"
-                name="dv-sort-desc"
-                class="opt-icon"
-              ></Icon>
+            <el-icon class="filter-icon-span">
+              <el-tooltip :offset="16" effect="dark" :content="sortTypeTip" placement="top">
+                <Icon
+                  v-if="state.curSortType.includes('asc')"
+                  name="dv-sort-asc"
+                  class="opt-icon"
+                ></Icon>
+              </el-tooltip>
+              <el-tooltip :offset="16" effect="dark" :content="sortTypeTip" placement="top">
+                <Icon
+                  v-show="state.curSortType.includes('desc')"
+                  name="dv-sort-desc"
+                  class="opt-icon"
+                ></Icon>
+              </el-tooltip>
             </el-icon>
             <template #dropdown>
               <el-dropdown-menu style="width: 246px">
@@ -1464,42 +1472,27 @@ const getMenuList = (val: boolean) => {
 <style lang="less" scoped>
 @import '@/style/mixin.less';
 
-.insert-filter {
-  display: inline-block;
-  font-weight: 400 !important;
-  font-family: '阿里巴巴普惠体 3.0 55 Regular L3';
-  line-height: 1;
-  white-space: nowrap;
-  cursor: pointer;
-  color: var(--TextPrimary, #1f2329);
-  -webkit-appearance: none;
-  text-align: center;
-  box-sizing: border-box;
-  outline: 0;
-  margin: 0;
-  transition: 0.1s;
-  border-radius: 3px;
-
-  &:active {
-    color: #000;
-    border-color: #3a8ee6;
-    background-color: red;
-    outline: 0;
-  }
-
-  &:hover {
-    background-color: rgba(31, 35, 41, 0.1);
-    color: #3a8ee6;
-  }
-}
-
 .filter-icon-span {
-  border: 1px solid #dcdfe6;
+  border: 1px solid #bbbfc4;
   width: 32px;
   height: 32px;
   border-radius: 4px;
-  padding: 7px;
+  color: #1f2329;
+  padding: 8px;
   margin-left: 8px;
+  font-size: 16px;
+  cursor: pointer;
+
+  .opt-icon:focus {
+    outline: none !important;
+  }
+  &:hover {
+    background: #f5f6f7;
+  }
+
+  &:active {
+    background: #eff0f1;
+  }
 }
 .datasource-manage {
   display: flex;