fix(frontend): 样式修复 #4803

TencentBlueKing · Jun 12, 2024 · a8d900e · a8d900e
1 parent 412057d
commit a8d900e
Show file tree

Hide file tree

Showing 10 changed files with 215 additions and 182 deletions.
diff --git a/dbm-ui/frontend/src/components/system-search/components/search-result/Index.vue b/dbm-ui/frontend/src/components/system-search/components/search-result/Index.vue
@@ -61,7 +61,7 @@
   import RenderResult from './render-result/Index.vue';
 
   interface Props {
-    showOptions?: boolean
+    showOptions?: boolean;
   }
 
   interface Expose {
@@ -109,10 +109,7 @@
     return Object.keys(serachResult.value) as (keyof typeof serachResult.value)[];
   });
 
-  const {
-    data: serachResult,
-    run: handleSerach,
-  } = useRequest(quickSearch, {
+  const { data: serachResult, run: handleSerach } = useRequest(quickSearch, {
     manual: true,
     onSuccess(data) {
       isSearchEmpty.value = _.every(Object.values(data), (item) => item.length < 1);
@@ -121,27 +118,31 @@
 
   const handleSerachDebounce = _.debounce(handleSerach, 200);
 
-  watch([modelValue, formData], ([newKeyword], [oldKeyword]) => {
-    const newKeywordArr = newKeyword.split(batchSplitRegex);
-    const oldKeywordArr = (oldKeyword || '').split(batchSplitRegex);
-    if (_.isEqual(newKeywordArr, oldKeywordArr)) {
-      return;
-    }
+  watch(
+    [modelValue, formData],
+    ([newKeyword], [oldKeyword]) => {
+      const newKeywordArr = newKeyword.split(batchSplitRegex);
+      const oldKeywordArr = (oldKeyword || '').split(batchSplitRegex);
+      if (_.isEqual(newKeywordArr, oldKeywordArr)) {
+        return;
+      }
 
-    serachResult.value = {} as ServiceReturnType<typeof quickSearch>;
+      serachResult.value = {} as ServiceReturnType<typeof quickSearch>;
 
-    if (!modelValue.value) {
-      return;
-    }
+      if (!modelValue.value) {
+        return;
+      }
 
-    handleSerachDebounce({
-      ...formData.value,
-      keyword: modelValue.value.replace(batchSplitRegex, ' '),
-    });
-  }, {
-    immediate: true,
-    deep: true,
-  });
+      handleSerachDebounce({
+        ...formData.value,
+        keyword: modelValue.value.replace(batchSplitRegex, ' '),
+      });
+    },
+    {
+      immediate: true,
+      deep: true,
+    },
+  );
 
   const handleClearSearch = () => {
     modelValue.value = '';
@@ -163,60 +164,61 @@
     background: #fff;
 
     .result-list {
-      max-height: 505px;
+      max-height: 540px;
       padding: 8px 0;
       overflow: hidden;
       color: #63656e;
       flex: 1;
 
-    .result-type-text {
-      padding-left: 12px;
-      line-height: 32px;
-      color: #979BA5;
-    }
-
-    .result-item{
-      display: flex;
-      height: 32px;
-      padding: 0 12px 0 24px;
-      cursor: pointer;
-      align-items: center;
-
-      &:hover,
-      &.active{
-        background: #F5F7FA;
+      .result-type-text {
+        padding-left: 12px;
+        line-height: 32px;
+        color: #979ba5;
       }
 
-      .value-text{
+      .result-item {
         display: flex;
         height: 32px;
-        padding: 0 8px;
+        padding: 0 12px 0 24px;
         cursor: pointer;
         align-items: center;
 
-        &:hover {
+        &:hover,
+        &.active {
           background: #f5f7fa;
         }
 
         .value-text {
           display: flex;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          word-break: keep-all;
-          white-space: nowrap;
-          flex: 0 1 auto;
-
-          .intro {
-            padding-left: 4px;
-            color: #c4c6cc;
+          height: 32px;
+          padding: 0 8px;
+          cursor: pointer;
+          align-items: center;
+
+          &:hover {
+            background: #f5f7fa;
           }
-        }
 
-        .biz-text {
-          flex: 0 0 auto;
-          padding-left: 24px;
-          margin-left: auto;
-          color: #979ba5;
+          .value-text {
+            display: flex;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            word-break: keep-all;
+            white-space: nowrap;
+            flex: 0 1 auto;
+
+            .intro {
+              padding-left: 4px;
+              color: #c4c6cc;
+            }
+          }
+
+          .biz-text {
+            flex: 0 0 auto;
+            padding-left: 24px;
+            margin-left: auto;
+            color: #979ba5;
+          }
         }
       }
     }
@@ -226,6 +228,5 @@
       border-left: 1px solid #dcdee5;
       flex: 0 0 170px;
     }
-    }
   }
 </style>
diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3049,5 +3049,6 @@
     "删除中": "删除中",
     "启用中": "启用中",
     "容量使用率": "容量使用率",
+    "请输入关键字， Shift + Enter 换行": "请输入关键字， Shift + Enter 换行",
     "这行勿动！新增翻译请在上一行添加！": ""
 }
diff --git a/dbm-ui/frontend/src/styles/common.less b/dbm-ui/frontend/src/styles/common.less
@@ -303,6 +303,10 @@
               vertical-align: middle;
             }
           }
+
+          .bk-button .bk-button-text {
+            line-height: 1.5;
+          }
         }
       }
 

diff --git a/dbm-ui/frontend/src/views/mongodb-manage/permission/Index.vue b/dbm-ui/frontend/src/views/mongodb-manage/permission/Index.vue
@@ -125,10 +125,10 @@
             data.rules.length > 1 && (
               <db-icon
                 type="down-shape"
-                class={[
-                  'user-icon',
-                  { 'user-icon-expand': !expandMap.value[data.account.account_id] },
-                ]} />
+                class={{
+                  'user-icon': true,
+                  'user-icon-expand': !expandMap.value[data.account.account_id],
+                }} />
             )
           }
           <div class="user-name">

diff --git a/dbm-ui/frontend/src/views/mysql/apply/components/PreviewTable.vue b/dbm-ui/frontend/src/views/mysql/apply/components/PreviewTable.vue
@@ -115,34 +115,39 @@
         label: t('主访问入口'),
         field: 'domain',
         showOverflowTooltip: true,
+        minWidth: 240,
       },
       {
         label: t('从访问入口'),
         field: 'slaveDomain',
         showOverflowTooltip: true,
+        minWidth: 240,
       },
       {
         label: t('部署架构'),
         field: 'deployStructure',
         showOverflowTooltip: true,
+        width: 100,
       },
       {
         label: t('数据库版本'),
         field: 'version',
         showOverflowTooltip: true,
+        width: 120,
       },
       {
         label: t('字符集'),
         field: 'charset',
         showOverflowTooltip: true,
+        width: 100,
       },
     ];
 
     if (props.isShowNodes) {
       haColumns.push(...[{
         label: 'Proxy IP',
         field: 'proxy',
-        minWidth: 300,
+        width: 300,
         rowspan: () => (props.data.length === 0 ? 1 : props.data.length),
         render: () => {
           const hosts = props.nodes.proxy;
@@ -170,7 +175,7 @@
       }, {
         label: 'Master / Slave IP',
         field: 'backend',
-        minWidth: 300,
+        width: 300,
         rowspan: () => (props.data.length === 0 ? 1 : props.data.length),
         render: () => {
           const hosts = props.nodes.backend;

diff --git a/dbm-ui/frontend/src/views/mysql/permission-rule/index.vue b/dbm-ui/frontend/src/views/mysql/permission-rule/index.vue
@@ -332,7 +332,7 @@
         getRenderList(data).map((rule) => {
           const { privilege } = rule;
           return (
-            <div class="cell-row" v-overflow-tips>
+            <div class="cell-row pr-12" v-overflow-tips>
               {
                 !privilege ? '--' : privilege.replace(/,/g, '，')
               }
@@ -547,6 +547,9 @@
     }
 
     .cell-row {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
       & ~ .cell-row {
         border-top: 1px solid #dcdee5;
       }

diff --git a/dbm-ui/frontend/src/views/quick-search/components/Instance.vue b/dbm-ui/frontend/src/views/quick-search/components/Instance.vue
@@ -11,7 +11,7 @@
           <I18nT
             class="ml-8"
             keypath="共n条"
-            style="color: #63656E;"
+            style="color: #63656e"
             tag="span">
             <template #n>
               <strong>{{ item.dataList.length }}</strong>
@@ -188,6 +188,10 @@
               </TextOverflowLayout>
             ),
           },
+          {
+            label: t('部署角色'),
+            field: 'role',
+          },
           {
             label: t('所属DB模块'),
             field: 'cluster_type',
@@ -228,6 +232,7 @@
       'cluster_name',
       'bk_idc_name',
       'instance',
+      'role',
       'cluster_type',
       'bk_biz_id',
     ],

diff --git a/dbm-ui/frontend/src/views/quick-search/components/SearchInput.vue b/dbm-ui/frontend/src/views/quick-search/components/SearchInput.vue
@@ -21,6 +21,7 @@
       autosize
       class="search-input-textarea"
       clearable
+      :placeholder="t('请输入关键字， Shift + Enter 换行')"
       :resize="false"
       type="textarea"
       @blur="handleBlur"
@@ -133,7 +134,7 @@
     const { width } = rootRef.value!.getBoundingClientRect();
     if (tippyIns) {
       popContentStyle.value = {
-        width: `${Math.max(width, 600)}px`,
+        width: `${Math.max(width - 91, 600)}px`,
       };
       tippyIns.show();
     }
@@ -176,7 +177,7 @@
   onMounted(() => {
     tippyIns = tippy(rootRef.value as SingleTarget, {
       content: popRef.value,
-      placement: 'bottom-end',
+      placement: 'bottom-start',
       appendTo: () => document.body,
       theme: 'light system-search-popover-theme',
       maxWidth: 'none',
@@ -216,11 +217,12 @@
     .search-input-textarea {
       position: absolute;
       z-index: 4;
+      width: 810px;
 
       :deep(textarea) {
         max-height: 400px;
         min-height: 40px !important;
-        padding: 12px 120px 12px 10px;
+        padding: 12px 30px 12px 10px;
       }
     }
 

diff --git a/dbm-ui/frontend/src/views/sqlserver-manage/permission/Index.vue b/dbm-ui/frontend/src/views/sqlserver-manage/permission/Index.vue
@@ -135,7 +135,10 @@
               data.rules.length > 1 && (
                 <Db-Icon
                   type='down-shape'
-                  class={ ['user-icon', { 'user-icon-expand': !rowExpandMap.value[data.account.account_id] }] } />
+                  class={{
+                    'user-icon': true,
+                    'user-icon-expand': !rowExpandMap.value[data.account.account_id],
+                  }} />
               )
             }
             <div class="user-name">
-Original file line number
+Diff line change
@@ Expand Up / @@ -303,6 +303,10 @@ @@
                   vertical-align: middle;
                 }
               }
+              .bk-button .bk-button-text {
+                line-height: 1.5;
+              }
             }
           }
@@ Expand Down @@