perf(views): 优化“网关协议列表管理”页面 UI

src/i18n/locales/zh.json

@@ -294,7 +294,7 @@
     "deleteProtocolSuccessful": "删除协议成功",
     "editProtocolSuccessful": "编辑协议成功",
     "protocolName": "网关协议名称",
-    "searchTip": "请输入协议编号、协议名称、项目"
+    "searchTip": "请输入协议名称"
   },
   "hvacHome": {},
   "keywordLibrary": {},

src/styles/global.scss

@@ -19,6 +19,14 @@
   color: var(--antd-color-text-secondary);
 }
 
+.hvac-layout-main-title {
+  height: 32px;
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 32px;
+  color: var(--antd-color-text);
+}
+
 // 默认按钮颜色
 .default-button {
   color: var(--antd-color-primary-hover);

src/views/gateway-protocol/GatewayProtocol.vue

@@ -108,6 +108,10 @@ const handleSearch = () => {
   getProtocolData();
 };
 
+const handleReset = () => {
+  return;
+};
+
 const handleAdd = () => {
   modalGuidanceRef.value?.showView();
 };
@@ -163,10 +167,17 @@ const handleOk = () => {
 </script>
 
 <template>
+  <AFlex justify="space-between">
+    <div class="hvac-layout-main-title">{{ $t('navigation.protocolManage') }}</div>
+    <AButton class="icon-button add-button" type="primary" @click="handleAdd">
+      <SvgIcon name="plus" />
+      {{ $t('common.addNew') }}
+    </AButton>
+  </AFlex>
   <div class="protocol-list-container">
     <div class="protocol-search">
       <div>
-        <span class="protocol-search-label">{{ $t('common.search') }}:</span>
+        <span class="protocol-search-label">{{ $t('common.search') }}</span>
         <AInput
           v-model:value="searchContent"
           class="protocol-search-input"
@@ -174,13 +185,10 @@ const handleOk = () => {
           allow-clear
         />
       </div>
-      <AButton type="primary" @click="handleSearch">{{ $t('common.query') }}</AButton>
-    </div>
-    <div class="protocol-add-container">
-      <AButton class="icon-button add-button" type="primary" @click="handleAdd">
-        <SvgIcon name="plus" />
-        {{ $t('common.addNew') }}
-      </AButton>
+      <div>
+        <AButton type="primary" @click="handleSearch">{{ $t('common.query') }}</AButton>
+        <AButton @click="handleReset">{{ $t('common.reset') }}</AButton>
+      </div>
     </div>
     <ATable
       class="protocol-table"
@@ -192,16 +200,17 @@ const handleOk = () => {
         current: pageParams.pageIndex,
         pageSize: pageParams.pageSize,
         total: protocolTotal,
-        showSizeChanger: false,
+        showSizeChanger: true,
+        showQuickJumper: true,
         hideOnSinglePage: false,
         onChange: handlePageChange,
+        showTotal: (total) => $t('common.pageTotal', { total }),
       }"
     >
       <template #bodyCell="{ column, record }">
         <span v-if="column.key === 'action'">
-          <a @click="handleEdit(record as ProtocolBaseInfo)">{{ $t('common.revise') }}</a>
-          <ADivider type="vertical" />
-          <a @click="handleDelete(record as ProtocolBaseInfo)">{{ $t('common.delete') }}</a>
+          <SvgIcon class="action-icon" name="edit-o" @click="handleEdit(record as ProtocolBaseInfo)" />
+          <SvgIcon class="action-icon" name="delete" @click="handleDelete(record as ProtocolBaseInfo)" />
         </span>
       </template>
     </ATable>
@@ -240,45 +249,46 @@ const handleOk = () => {
 
 <style lang="scss" scoped>
 .protocol-list-container {
-  height: 100%;
-  padding: 32px;
+  padding: 24px;
+  margin-top: 16px;
   background: var(--antd-color-bg-base);
-  border-radius: 18px;
+  border-radius: 16px;
 }
 
 .protocol-search {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 24px;
+
+  button + button {
+    margin-left: 12px;
+  }
 }
 
 .protocol-search-label {
-  margin-right: 10px;
+  margin-right: 12px;
   font-size: 14px;
   line-height: 22px;
   color: var(--antd-color-text);
 }
 
 .protocol-search-input {
-  width: 272px;
-}
-
-.protocol-add-container {
-  display: flex;
-  align-items: center;
+  width: 256px;
 }
 
 .add-button {
-  margin-right: 8px;
+  width: 84px;
   font-size: 14px;
 }
 
 .protocol-table {
-  margin-top: 72px;
+  margin-top: 16px;
+}
 
-  a {
-    color: var(--antd-color-primary);
-  }
+.action-icon {
+  margin-right: 16px;
+  font-size: 24px;
+  color: var(--antd-color-primary);
+  cursor: pointer;
 }
 </style>