🎨 修改系统设置样式.

orion-visor-ui/src/views/system/setting/components/about-setting.vue

@@ -1,26 +1,10 @@
 <template>
   <a-spin class="main-container" :loading="loading">
-    <h3 class="setting-header">关于</h3>
+    <a-descriptions title="关于"
-    <!-- 不一致提示 -->
+                    class="detail-container"
-    <a-alert v-if="app.version && webVersion !== app.version"
-             type="warning"
-             class="alert-wrapper">
-      当前前端版本与后端版本不一致, 请使用 Ctrl + F5 强制刷新页面
-    </a-alert>
-    <!-- 升级提示 -->
-    <a v-if="app.version && repo.tagName && ('v' + app.version) !== repo.tagName"
-       class="alert-href"
-       target="_blank"
-       :href="`https://github.com/dromara/orion-visor/releases/tag/${repo.tagName}`">
-      <a-alert class="alert-wrapper">
-        新版本已发布, 请及时升级版本
-      </a-alert>
-    </a>
-    <!-- 系统信息 -->
-    <a-descriptions class="detail-container"
                     size="large"
                     :align="{ label: 'right', value: 'left' }"
-                    :label-style="{ width: '138px' }"
+                    :label-style="{ width: '138px', 'vertical-align': 'top' }"
                     :column="1">
       <!-- 机器码 -->
       <a-descriptions-item label="机器码">
@@ -30,15 +14,23 @@
       </a-descriptions-item>
       <!-- 当前前端版本 -->
       <a-descriptions-item label="当前前端版本">
+        <!-- 前端版本 -->
         {{ 'v' + webVersion }}
+        <!-- 不一致提示 -->
+        <b v-if="app.version && webVersion !== app.version"
+           class="span-red ml8">当前前端版本与后端版本不一致, 请使用 Ctrl + F5 强制刷新页面</b>
       </a-descriptions-item>
       <!-- 当前后端版本 -->
       <a-descriptions-item label="当前后端版本">
         {{ 'v' + app.version }}
       </a-descriptions-item>
-      <!-- 当前后端版本 -->
+      <!-- 最新发布版本 -->
       <a-descriptions-item label="最新发布版本">
-        {{ repo.tagName || '-' }}
+        <!-- 最新版本 -->
+        <span>{{ repo.tagName || '-' }}</span>
+        <!-- 升级提示 -->
+        <b v-if="app.version && repo.tagName && ('v' + app.version) !== repo.tagName"
+           class="span-green ml8">新版本已发布, 请及时升级版本</b>
       </a-descriptions-item>
       <!-- 当前后端版本 -->
       <a-descriptions-item label="最新更新日志">

orion-visor-ui/src/views/system/setting/components/encrypt-setting.vue

@@ -1,8 +1,7 @@
 <template>
   <a-spin class="main-container" :loading="loading">
-    <h3 class="setting-header">加密设置</h3>
+    <a-descriptions title="加密设置"
-    <!-- 系统信息 -->
+                    class="detail-container"
-    <a-descriptions class="detail-container"
                     :align="{ label: 'right', value: 'left' }"
                     :label-style="{ width: '98px', 'vertical-align': 'top', 'padding-top': '8px' }"
                     :column="1">

orion-visor-ui/src/views/system/setting/components/sftp-setting.vue

@@ -1,11 +1,10 @@
 <template>
   <a-spin class="main-container" :loading="loading">
-    <h3 class="setting-header">SFTP 设置</h3>
+    <a-descriptions title="SFTP 设置"
-    <!-- 系统信息 -->
+                    class="detail-container"
-    <a-descriptions class="detail-container"
                     size="large"
                     :align="{ label: 'right', value: 'left' }"
-                    :label-style="{ width: '128px' }"
+                    :label-style="{ width: '128px', 'vertical-align': 'top' }"
                     :column="1">
       <!-- 文件预览大小 -->
       <a-descriptions-item label="文件预览大小">

orion-visor-ui/src/views/system/setting/index.vue

@@ -88,22 +88,16 @@
   }
 
   :deep(.main-container) {
-    padding-left: 24px;
+    padding: 16px 0 0 24px;
     width: 100%;
 
-    .setting-header {
+    .arco-descriptions-title {
-      color: var(--color-text-1);
+      font-weight: 600;
-      margin-bottom: 20px;
     }
 
     .alert-href {
       text-decoration: none;
     }
-
-    .alert-wrapper {
-      margin: 0 0 12px 24px;
-      width: 598px;
-    }
   }
 
 </style>