调整DNS表格内容居中

fe/src/views/Setup/Setup.css

@@ -486,7 +486,7 @@
 .dns-value-cell {
   position: relative;
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   min-width: 0;
   padding-right: 42px;
 }
@@ -513,6 +513,8 @@
   position: absolute;
   top: -4px;
   right: 0;
+  align-items: center;
+  justify-content: center;
   opacity: 0;
   transition: opacity 0.2s ease;
 }
@@ -983,7 +985,7 @@
 
 .dns-page .dns-table :deep(.el-table__cell) {
   padding: 10px 0;
-  vertical-align: top;
+  vertical-align: middle;
 }
 
 .dns-page .dns-table :deep(.cell) {
@@ -995,6 +997,16 @@
   overflow: visible;
 }
 
+.dns-page .dns-table :deep(thead th .cell) {
+  text-align: center;
+}
+
+.dns-page .dns-table :deep(.el-table__body-wrapper td:nth-child(1) .cell),
+.dns-page .dns-table :deep(.el-table__body-wrapper td:nth-child(2) .cell),
+.dns-page .dns-table :deep(.el-table__body-wrapper td:nth-child(4) .cell) {
+  text-align: center;
+}
+
 .dns-page .dns-host,
 .dns-page .dns-value {
   font-size: 14px;
@@ -1002,6 +1014,9 @@
 }
 
 .dns-page .dns-value-cell {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 56px;
+  align-items: center;
   gap: 8px;
   padding-right: 0;
 }
@@ -1013,6 +1028,8 @@
 .dns-page .dns-copy-button {
   position: static;
   flex: none;
+  min-width: 56px;
+  width: 56px;
   opacity: 1;
   margin-top: 0;
   font-size: 14px;

fe/src/views/Setup/Setup.vue

@@ -204,7 +204,13 @@
           </div>
 
           <el-table :data="info" border class="dns-table" table-layout="auto">
-            <el-table-column prop="host" :label="lang.dns_host" width="190px">
+            <el-table-column
+              prop="host"
+              :label="lang.dns_host"
+              width="190px"
+              align="center"
+              header-align="center"
+            >
               <template #default="scope">
                 <el-tooltip :content="lang.dns_root_desc" placement="top" v-if="scope.row.host === '' || scope.row.host === '@'">
                   <span class="dns-host dns-host-root">{{ scope.row.host || '@' }}</span>
@@ -213,7 +219,13 @@
               </template>
             </el-table-column>
 
-            <el-table-column prop="type" :label="lang.dns_type" width="110px">
+            <el-table-column
+              prop="type"
+              :label="lang.dns_type"
+              width="110px"
+              align="center"
+              header-align="center"
+            >
               <template #default="scope">
                 <span :class="['dns-type', 'dns-type-' + scope.row.type.toLowerCase()]">
                   {{ scope.row.type }}
@@ -221,7 +233,12 @@
               </template>
             </el-table-column>
 
-            <el-table-column prop="value" :label="lang.dns_value" min-width="420px">
+            <el-table-column
+              prop="value"
+              :label="lang.dns_value"
+              min-width="420px"
+              header-align="center"
+            >
               <template #default="scope">
                 <div class="dns-value-cell">
                   <el-tooltip :content="scope.row.tips" placement="top" v-if="scope.row.tips">
@@ -239,7 +256,13 @@
               </template>
             </el-table-column>
 
-            <el-table-column prop="ttl" :label="lang.dns_ttl" width="120px">
+            <el-table-column
+              prop="ttl"
+              :label="lang.dns_ttl"
+              width="120px"
+              align="center"
+              header-align="center"
+            >
               <template #default="scope">
                 <span class="dns-ttl">{{ formatDNSRecordTTL(scope.row.ttl) }}</span>
               </template>