From b4e96b9c2e3e8e49cb4188f7cd5de261f3e527b6 Mon Sep 17 00:00:00 2001
From: dataeaseShu <106045316+dataeaseShu@users.noreply.github.com>
Date: Wed, 27 Jul 2022 12:23:46 +0800
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=E6=8C=89=E9=92=AEhover=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=20=E5=9B=BD=E9=99=85=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/gridTable/index.vue   | 10 -------
 frontend/src/lang/en.js                       |  6 ++++-
 frontend/src/lang/tw.js                       |  6 ++++-
 frontend/src/lang/zh.js                       |  6 ++++-
 frontend/src/layout/components/Topbar.vue     |  2 +-
 frontend/src/styles/index.scss                | 17 ++++++++++++
 frontend/src/views/system/user/filterUser.vue | 24 ++++++++---------
 frontend/src/views/system/user/index.vue      | 27 ++++++++++++++-----
 8 files changed, 65 insertions(+), 33 deletions(-)

diff --git a/frontend/src/components/gridTable/index.vue b/frontend/src/components/gridTable/index.vue
index cf787bc41b..9b6e5a66d8 100644
--- a/frontend/src/components/gridTable/index.vue
+++ b/frontend/src/components/gridTable/index.vue
@@ -159,16 +159,6 @@ export default {
   flex-direction: column;
   justify-content: space-between;
 
-  ::v-deep .el-table__header-wrapper {
-    background-color: #f5f6f7;
-    // border-top: 1px solid rgba(31, 35, 41, 0.15);
-  }
-   ::v-deep .el-table__fixed-header-wrapper {
-    th {
-        background-color: var(--TableBG, #f5f6f7) !important;
-    }
-  }
-
   .el-table::before {
     content: '';
     position: absolute;
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index e80b0c041c..9542bd31bf 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -557,7 +557,11 @@ export default {
     new_passwd: 'New Password',
     confirm_passwd: 'Confirm Password',
     change_password: 'Change Password',
-    search_by_name: 'Search by name'
+    search_by_name: 'Search by name',
+    result_one: 'Results',
+    clear_filter: 'Empty condition',
+    recover_pwd: 'Restore to the original password?',
+    filter_method: 'Filter criteria',
   },
   ldap: {
     url: 'LDAP url',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 68f9933f40..64e2f8a689 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -558,7 +558,11 @@ export default {
     confirm_passwd: '確認密碼',
     change_password: '修改密碼',
     search_by_name: '按姓名搜索',
-    import_ldap: '導入LDAP用戶'
+    import_ldap: '導入LDAP用戶',
+    result_one: '個結果',
+    clear_filter: '清空條件',
+    recover_pwd: '是否恢復為初始密碼?',
+    filter_method: '篩選條件',
   },
   ldap: {
     url: 'LDAP地址',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 0c72194349..0b9fe75c47 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -559,7 +559,11 @@ export default {
     confirm_passwd: '确认密码',
     change_password: '修改密码',
     search_by_name: '按姓名搜索',
-    import_ldap: '导入LDAP用户'
+    import_ldap: '导入LDAP用户',
+    result_one: '个结果',
+    clear_filter: '清空条件',
+    recover_pwd: '是否恢复为初始密码?',
+    filter_method: '筛选条件',
   },
   ldap: {
     url: 'LDAP地址',
diff --git a/frontend/src/layout/components/Topbar.vue b/frontend/src/layout/components/Topbar.vue
index 5786652d3d..56b77881c6 100644
--- a/frontend/src/layout/components/Topbar.vue
+++ b/frontend/src/layout/components/Topbar.vue
@@ -74,7 +74,7 @@
       :show-close="false"
       class="dialog-css"
       :fullscreen="true"
-      append-to-body="true"
+      append-to-body
     >
       <template-market v-if="templateMarketShow" style="text-align: center" @closeDialog="changeTemplateMarketShow(false)" />
     </el-dialog>
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index aa45c442db..81324cd956 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -871,3 +871,20 @@ div:focus {
   font-weight: 400 !important;
 }
 
+.de-confirm-fail-cancel:hover {
+  background: #F5F6F7 !important;
+}
+
+.de-confirm-fail-confirm:hover {
+  background: #F76964 !important;
+}
+
+.el-table__header-wrapper {
+  background-color: var(--TableBG, #f5f6f7) !important;
+}
+.el-table__fixed-header-wrapper {
+  th {
+      background-color: var(--TableBG, #f5f6f7) !important;
+  }
+}
+
diff --git a/frontend/src/views/system/user/filterUser.vue b/frontend/src/views/system/user/filterUser.vue
index 7e5e0bea02..58b78d054e 100644
--- a/frontend/src/views/system/user/filterUser.vue
+++ b/frontend/src/views/system/user/filterUser.vue
@@ -1,6 +1,6 @@
 <template>
   <el-drawer
-    title="筛选条件"
+    :title="$t('user.filter_method')"
     :visible.sync="userDrawer"
     custom-class="user-drawer"
     size="680px"
@@ -8,7 +8,7 @@
     direction="rtl"
   >
     <div class="filter">
-      <span>状态</span>
+      <span>{{ $t('commons.status')}}</span>
       <div class="filter-item">
         <span
           class="item"
@@ -16,11 +16,11 @@
           :class="[activeStatus.includes(ele.id) ? 'active' : '']"
           :key="ele.id"
           v-for="ele in status"
-          >{{ ele.label }}</span>
+          >{{ $t(ele.label) }}</span>
       </div>
     </div>
     <div class="filter">
-      <span>组织</span>
+      <span>{{ $t('commons.organization')}}</span>
       <div class="filter-item">
         <span
           class="item"
@@ -67,12 +67,12 @@
             />
             </el-select>
           </el-popover>
-          <span class="more" slot="reference">+ 更多</span>
+          <span class="more" slot="reference">+ {{ $t('panel.more')}}</span>
         </el-popover>
       </div>
     </div>
     <div class="filter">
-      <span>角色</span>
+      <span>{{ $t('panel.role')}}</span>
       <div class="filter-item">
         <span
           @click="activeRoleChange(ele.id)"
@@ -104,7 +104,7 @@
               :value="item"
             />
           </el-select>
-          <span class="more" slot="reference">+ 更多</span>
+          <span class="more" slot="reference">+ {{ $t('panel.more')}}</span>
         </el-popover>
       </div>
     </div>
@@ -133,10 +133,10 @@ export default {
       filterTextMap: [],
       status: [{
         id: 1,
-        label: '启用'
+        label: 'commons.enable'
       },{
         id: 0,
-        label: '禁用'
+        label: 'commons.disable'
       }],
       activeStatus: [],
       rolesValue: [],
@@ -276,16 +276,16 @@ export default {
       this.filterTextMap = [];
       const params = [];
       if (this.activeStatus.length) {
-        let str = `状态:${this.activeStatus.reduce((pre,next) => (this.status.find(ele => ele.id === next) || {}).label  + '、' +  pre, '')}`;
+        let str = `${this.$t('kettle.status')}:${this.activeStatus.reduce((pre,next) => (this.status.find(ele => ele.id === next) || {}).label  + '、' +  pre, '')}`;
         params.push(str.slice(0, str.length - 1 ))
         this.filterTextMap.push(['activeStatus'])
       }
       if (this.activeDept.length) {
-        params.push(`组织:${this.selectDeptsCahe.map(ele => ele.label).join('、')}`)
+        params.push(`${this.$t('panel.org')}:${this.selectDeptsCahe.map(ele => ele.label).join('、')}`)
         this.filterTextMap.push(['activeDept', 'selectDepts', 'selectDeptsCahe', 'deptCahe'])
       }
       if (this.activeRole.length) {
-        params.push(`角色:${this.rolesValueCopy.map(ele => ele.name).join('、')}`)
+        params.push(`${this.$t('panel.role')}:${this.rolesValueCopy.map(ele => ele.name).join('、')}`)
         this.filterTextMap.push(['rolesValue', 'activeRole', 'roleCahe'])
       }
       return params;
diff --git a/frontend/src/views/system/user/index.vue b/frontend/src/views/system/user/index.vue
index f4dec62274..852426a6d7 100644
--- a/frontend/src/views/system/user/index.vue
+++ b/frontend/src/views/system/user/index.vue
@@ -63,7 +63,7 @@
     </el-row>
     <div class="filter-texts" v-if="filterTexts.length">
       <span class="sum">{{ paginationConfig.total }}</span>
-      <span class="title">个结果</span>
+      <span class="title">{{$t('user.result_one')}}</span>
       <el-divider direction="vertical"></el-divider>
       <i @click="scrollPre" v-if="showScroll" class="el-icon-arrow-left arrow-filter"></i>
       <div class="filter-texts-container">
@@ -77,11 +77,12 @@
         class="clear-btn"
         icon="el-icon-delete"
         @click="clearFilter"
-        >清空条件</el-button
+        >{{$t('user.clear_filter')}}</el-button
       >
     </div>
     <div
       class="table-container"
+      id="resize-for-filter"
       :class="[filterTexts.length ? 'table-container-filter' : '']"
     >
       <grid-table
@@ -177,7 +178,7 @@
 
         <el-table-column
           slot="__operation"
-          label="操作"
+          :label="$t('commons.operating')"
           fixed="right"
           width="168"
         >
@@ -197,7 +198,7 @@
               trigger="click"
             >
               <i class="el-icon-warning"></i>
-              <div class="tips">是否恢复为初始密码?</div>
+              <div class="tips">{{$t('user.recover_pwd')}}</div>
               <div class="editer-form-title">
                 <span class="pwd" type="text">{{
                   $t("commons.default_pwd") + "：" + defaultPWD
@@ -300,6 +301,7 @@ import {
 import { mapGetters } from "vuex";
 import filterUser from "./filterUser.vue";
 import GridTable from "@/components/gridTable/index.vue";
+import _ from 'lodash';
 export default {
   components: { DeLayoutContent, GridTable, filterUser, userEditer },
   data() {
@@ -349,6 +351,7 @@ export default {
       defaultPWD: "DataEase123..",
       canLoadDom: false,
       showScroll: false,
+      resizeForFilter: null,
     };
   },
   computed: {
@@ -369,6 +372,7 @@ export default {
     this.allRoles();
     this.search();
     document.addEventListener("keypress", this.entryKey);
+    this.resizeObserver();
   },
   beforeCreate() {
     pluginLoaded()
@@ -392,6 +396,16 @@ export default {
     document.removeEventListener("keypress", this.entryKey);
   },
   methods: {
+    resizeObserver() {
+      this.resizeForFilter = new ResizeObserver(entries => {
+        if (!this.filterTexts.length) return;
+        this.layoutResize();
+      });
+      this.resizeForFilter.observe(document.querySelector('#resize-for-filter'));
+    },
+    layoutResize: _.debounce(function () {
+      this.getScrollStatus()
+    }, 200),
     scrollPre() {
       const dom = document.querySelector('.filter-texts-container');
       dom.scrollLeft -= 10
@@ -930,9 +944,8 @@ export default {
     color: #1f2329;
   }
 
-  .de-confirm-fail-confirm,
-  .de-confirm-fail-confirm:hover {
-    background: #f54a45 !important;
+  .de-confirm-fail-confirm {
+    background: #f54a45;
     border: none;
     color: #ffffff;
   }

From 8ec64258b377dffe3a52a398abad9dc1386efa71 Mon Sep 17 00:00:00 2001
From: dataeaseShu <106045316+dataeaseShu@users.noreply.github.com>
Date: Wed, 27 Jul 2022 12:23:46 +0800
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E6=8C=89=E9=92=AEhover=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=20=E5=9B=BD=E9=99=85=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/gridTable/index.vue   | 10 -------
 frontend/src/lang/en.js                       |  6 ++++-
 frontend/src/lang/tw.js                       |  6 ++++-
 frontend/src/lang/zh.js                       |  6 ++++-
 frontend/src/layout/components/Topbar.vue     |  2 +-
 frontend/src/styles/index.scss                | 17 ++++++++++++
 frontend/src/views/system/user/filterUser.vue | 24 ++++++++---------
 frontend/src/views/system/user/index.vue      | 27 ++++++++++++++-----
 8 files changed, 65 insertions(+), 33 deletions(-)

diff --git a/frontend/src/components/gridTable/index.vue b/frontend/src/components/gridTable/index.vue
index cf787bc41b..9b6e5a66d8 100644
--- a/frontend/src/components/gridTable/index.vue
+++ b/frontend/src/components/gridTable/index.vue
@@ -159,16 +159,6 @@ export default {
   flex-direction: column;
   justify-content: space-between;
 
-  ::v-deep .el-table__header-wrapper {
-    background-color: #f5f6f7;
-    // border-top: 1px solid rgba(31, 35, 41, 0.15);
-  }
-   ::v-deep .el-table__fixed-header-wrapper {
-    th {
-        background-color: var(--TableBG, #f5f6f7) !important;
-    }
-  }
-
   .el-table::before {
     content: '';
     position: absolute;
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index e80b0c041c..9542bd31bf 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -557,7 +557,11 @@ export default {
     new_passwd: 'New Password',
     confirm_passwd: 'Confirm Password',
     change_password: 'Change Password',
-    search_by_name: 'Search by name'
+    search_by_name: 'Search by name',
+    result_one: 'Results',
+    clear_filter: 'Empty condition',
+    recover_pwd: 'Restore to the original password?',
+    filter_method: 'Filter criteria',
   },
   ldap: {
     url: 'LDAP url',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 68f9933f40..64e2f8a689 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -558,7 +558,11 @@ export default {
     confirm_passwd: '確認密碼',
     change_password: '修改密碼',
     search_by_name: '按姓名搜索',
-    import_ldap: '導入LDAP用戶'
+    import_ldap: '導入LDAP用戶',
+    result_one: '個結果',
+    clear_filter: '清空條件',
+    recover_pwd: '是否恢復為初始密碼?',
+    filter_method: '篩選條件',
   },
   ldap: {
     url: 'LDAP地址',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 0c72194349..0b9fe75c47 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -559,7 +559,11 @@ export default {
     confirm_passwd: '确认密码',
     change_password: '修改密码',
     search_by_name: '按姓名搜索',
-    import_ldap: '导入LDAP用户'
+    import_ldap: '导入LDAP用户',
+    result_one: '个结果',
+    clear_filter: '清空条件',
+    recover_pwd: '是否恢复为初始密码?',
+    filter_method: '筛选条件',
   },
   ldap: {
     url: 'LDAP地址',
diff --git a/frontend/src/layout/components/Topbar.vue b/frontend/src/layout/components/Topbar.vue
index 5786652d3d..56b77881c6 100644
--- a/frontend/src/layout/components/Topbar.vue
+++ b/frontend/src/layout/components/Topbar.vue
@@ -74,7 +74,7 @@
       :show-close="false"
       class="dialog-css"
       :fullscreen="true"
-      append-to-body="true"
+      append-to-body
     >
       <template-market v-if="templateMarketShow" style="text-align: center" @closeDialog="changeTemplateMarketShow(false)" />
     </el-dialog>
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index aa45c442db..81324cd956 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -871,3 +871,20 @@ div:focus {
   font-weight: 400 !important;
 }
 
+.de-confirm-fail-cancel:hover {
+  background: #F5F6F7 !important;
+}
+
+.de-confirm-fail-confirm:hover {
+  background: #F76964 !important;
+}
+
+.el-table__header-wrapper {
+  background-color: var(--TableBG, #f5f6f7) !important;
+}
+.el-table__fixed-header-wrapper {
+  th {
+      background-color: var(--TableBG, #f5f6f7) !important;
+  }
+}
+
diff --git a/frontend/src/views/system/user/filterUser.vue b/frontend/src/views/system/user/filterUser.vue
index 7e5e0bea02..58b78d054e 100644
--- a/frontend/src/views/system/user/filterUser.vue
+++ b/frontend/src/views/system/user/filterUser.vue
@@ -1,6 +1,6 @@
 <template>
   <el-drawer
-    title="筛选条件"
+    :title="$t('user.filter_method')"
     :visible.sync="userDrawer"
     custom-class="user-drawer"
     size="680px"
@@ -8,7 +8,7 @@
     direction="rtl"
   >
     <div class="filter">
-      <span>状态</span>
+      <span>{{ $t('commons.status')}}</span>
       <div class="filter-item">
         <span
           class="item"
@@ -16,11 +16,11 @@
           :class="[activeStatus.includes(ele.id) ? 'active' : '']"
           :key="ele.id"
           v-for="ele in status"
-          >{{ ele.label }}</span>
+          >{{ $t(ele.label) }}</span>
       </div>
     </div>
     <div class="filter">
-      <span>组织</span>
+      <span>{{ $t('commons.organization')}}</span>
       <div class="filter-item">
         <span
           class="item"
@@ -67,12 +67,12 @@
             />
             </el-select>
           </el-popover>
-          <span class="more" slot="reference">+ 更多</span>
+          <span class="more" slot="reference">+ {{ $t('panel.more')}}</span>
         </el-popover>
       </div>
     </div>
     <div class="filter">
-      <span>角色</span>
+      <span>{{ $t('panel.role')}}</span>
       <div class="filter-item">
         <span
           @click="activeRoleChange(ele.id)"
@@ -104,7 +104,7 @@
               :value="item"
             />
           </el-select>
-          <span class="more" slot="reference">+ 更多</span>
+          <span class="more" slot="reference">+ {{ $t('panel.more')}}</span>
         </el-popover>
       </div>
     </div>
@@ -133,10 +133,10 @@ export default {
       filterTextMap: [],
       status: [{
         id: 1,
-        label: '启用'
+        label: 'commons.enable'
       },{
         id: 0,
-        label: '禁用'
+        label: 'commons.disable'
       }],
       activeStatus: [],
       rolesValue: [],
@@ -276,16 +276,16 @@ export default {
       this.filterTextMap = [];
       const params = [];
       if (this.activeStatus.length) {
-        let str = `状态:${this.activeStatus.reduce((pre,next) => (this.status.find(ele => ele.id === next) || {}).label  + '、' +  pre, '')}`;
+        let str = `${this.$t('kettle.status')}:${this.activeStatus.reduce((pre,next) => (this.status.find(ele => ele.id === next) || {}).label  + '、' +  pre, '')}`;
         params.push(str.slice(0, str.length - 1 ))
         this.filterTextMap.push(['activeStatus'])
       }
       if (this.activeDept.length) {
-        params.push(`组织:${this.selectDeptsCahe.map(ele => ele.label).join('、')}`)
+        params.push(`${this.$t('panel.org')}:${this.selectDeptsCahe.map(ele => ele.label).join('、')}`)
         this.filterTextMap.push(['activeDept', 'selectDepts', 'selectDeptsCahe', 'deptCahe'])
       }
       if (this.activeRole.length) {
-        params.push(`角色:${this.rolesValueCopy.map(ele => ele.name).join('、')}`)
+        params.push(`${this.$t('panel.role')}:${this.rolesValueCopy.map(ele => ele.name).join('、')}`)
         this.filterTextMap.push(['rolesValue', 'activeRole', 'roleCahe'])
       }
       return params;
diff --git a/frontend/src/views/system/user/index.vue b/frontend/src/views/system/user/index.vue
index f4dec62274..852426a6d7 100644
--- a/frontend/src/views/system/user/index.vue
+++ b/frontend/src/views/system/user/index.vue
@@ -63,7 +63,7 @@
     </el-row>
     <div class="filter-texts" v-if="filterTexts.length">
       <span class="sum">{{ paginationConfig.total }}</span>
-      <span class="title">个结果</span>
+      <span class="title">{{$t('user.result_one')}}</span>
       <el-divider direction="vertical"></el-divider>
       <i @click="scrollPre" v-if="showScroll" class="el-icon-arrow-left arrow-filter"></i>
       <div class="filter-texts-container">
@@ -77,11 +77,12 @@
         class="clear-btn"
         icon="el-icon-delete"
         @click="clearFilter"
-        >清空条件</el-button
+        >{{$t('user.clear_filter')}}</el-button
       >
     </div>
     <div
       class="table-container"
+      id="resize-for-filter"
       :class="[filterTexts.length ? 'table-container-filter' : '']"
     >
       <grid-table
@@ -177,7 +178,7 @@
 
         <el-table-column
           slot="__operation"
-          label="操作"
+          :label="$t('commons.operating')"
           fixed="right"
           width="168"
         >
@@ -197,7 +198,7 @@
               trigger="click"
             >
               <i class="el-icon-warning"></i>
-              <div class="tips">是否恢复为初始密码?</div>
+              <div class="tips">{{$t('user.recover_pwd')}}</div>
               <div class="editer-form-title">
                 <span class="pwd" type="text">{{
                   $t("commons.default_pwd") + "：" + defaultPWD
@@ -300,6 +301,7 @@ import {
 import { mapGetters } from "vuex";
 import filterUser from "./filterUser.vue";
 import GridTable from "@/components/gridTable/index.vue";
+import _ from 'lodash';
 export default {
   components: { DeLayoutContent, GridTable, filterUser, userEditer },
   data() {
@@ -349,6 +351,7 @@ export default {
       defaultPWD: "DataEase123..",
       canLoadDom: false,
       showScroll: false,
+      resizeForFilter: null,
     };
   },
   computed: {
@@ -369,6 +372,7 @@ export default {
     this.allRoles();
     this.search();
     document.addEventListener("keypress", this.entryKey);
+    this.resizeObserver();
   },
   beforeCreate() {
     pluginLoaded()
@@ -392,6 +396,16 @@ export default {
     document.removeEventListener("keypress", this.entryKey);
   },
   methods: {
+    resizeObserver() {
+      this.resizeForFilter = new ResizeObserver(entries => {
+        if (!this.filterTexts.length) return;
+        this.layoutResize();
+      });
+      this.resizeForFilter.observe(document.querySelector('#resize-for-filter'));
+    },
+    layoutResize: _.debounce(function () {
+      this.getScrollStatus()
+    }, 200),
     scrollPre() {
       const dom = document.querySelector('.filter-texts-container');
       dom.scrollLeft -= 10
@@ -930,9 +944,8 @@ export default {
     color: #1f2329;
   }
 
-  .de-confirm-fail-confirm,
-  .de-confirm-fail-confirm:hover {
-    background: #f54a45 !important;
+  .de-confirm-fail-confirm {
+    background: #f54a45;
     border: none;
     color: #ffffff;
   }