🔨 修改系统设置逻辑.

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

@@ -4,7 +4,7 @@
                     class="detail-container"
                     size="large"
                     :align="{ label: 'right', value: 'left' }"
-                    :label-style="{ width: '138px', 'vertical-align': 'top' }"
+                    :label-style="{ paddingTop: '2px', paddingLeft: '32px', verticalAlign: 'top' }"
                     :column="1">
       <!-- 机器码 -->
       <a-descriptions-item label="机器码">
@@ -15,14 +15,14 @@
       <!-- 当前前端版本 -->
       <a-descriptions-item label="当前前端版本">
         <!-- 前端版本 -->
-        {{ 'v' + webVersion }}
+        <span>{{ 'v' + webVersion }}</span>
         <!-- 不一致提示 -->
         <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 }}
+        <span>{{ 'v' + app.version }}</span>
       </a-descriptions-item>
       <!-- 最新发布版本 -->
       <a-descriptions-item label="最新发布版本">

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

@@ -1,39 +1,42 @@
 <template>
   <a-spin class="main-container" :loading="loading">
-    <a-descriptions title="加密设置"
-                    class="detail-container"
-                    :align="{ label: 'right', value: 'left' }"
-                    :label-style="{ width: '98px', 'vertical-align': 'top', 'padding-top': '8px' }"
-                    :column="1">
+    <!-- 标题 -->
+    <h3 class="setting-header">加密设置</h3>
+    <!-- 表单 -->
+    <a-form :model="setting"
+            ref="formRef"
+            class="setting-form"
+            label-align="right"
+            :auto-label-width="true">
       <!-- 提示 -->
-      <a-descriptions-item>
+      <a-form-item style="margin-bottom: 8px">
         <a-alert>请输入 PKCS8 格式的 RSA Base64 密钥, 用于前后端传输时的数据加密</a-alert>
-      </a-descriptions-item>
+      </a-form-item>
       <!-- 加密公钥 -->
-      <a-descriptions-item label="加密公钥">
+      <a-form-item field="publicKey"
+                   label="加密公钥"
+                   :rules="[{required: true, message: '请输入加密公钥'}]"
+                   hide-asterisk>
         <a-textarea v-model="setting.publicKey"
                     class="input-wrapper"
                     placeholder="RSA 公钥 Base64"
-                    :auto-size="{
-                      minRows: 6,
-                      maxRows: 6,
-                    }"
+                    :auto-size="{ minRows: 5, maxRows: 5 }"
                     allow-clear />
-      </a-descriptions-item>
+      </a-form-item>
       <!-- 加密私钥 -->
-      <a-descriptions-item label="加密私钥">
+      <a-form-item field="privateKey"
+                   label="加密私钥"
+                   :rules="[{required: true, message: '请输入加密私钥'}]"
+                   hide-asterisk>
         <a-textarea v-model="setting.privateKey"
                     class="input-wrapper"
                     placeholder="RSA 私钥 Base64"
-                    :auto-size="{
-                      minRows: 14,
-                      maxRows: 14,
-                    }"
+                    :auto-size="{ minRows: 14, maxRows: 14 }"
                     allow-clear />
-      </a-descriptions-item>
+      </a-form-item>
       <!-- 按钮 -->
-      <a-descriptions-item>
-        <a-space v-permission="['infra:system-setting:update']">
+      <a-form-item v-permission="['infra:system-setting:update']">
+        <a-space>
           <!-- 保存 -->
           <a-button type="primary"
                     size="small"
@@ -45,8 +48,8 @@
             生成密钥对
           </a-button>
         </a-space>
-      </a-descriptions-item>
-    </a-descriptions>
+      </a-form-item>
+    </a-form>
   </a-spin>
 </template>
 
@@ -62,25 +65,24 @@
   import { generatorKeypair, getSystemSetting, updateSystemSettingBatch } from '@/api/system/setting';
   import useLoading from '@/hooks/loading';
   import { Message } from '@arco-design/web-vue';
+  import { SystemSettingTypes } from '../types/const';
 
   const { loading, setLoading } = useLoading();
 
+  const formRef = ref();
   const setting = ref<EncryptSetting>({} as EncryptSetting);
 
   // 保存
   const save = async () => {
-    if (!setting.value.publicKey) {
-      Message.error('请输入公钥');
-      return;
-    }
-    if (!setting.value.privateKey) {
-      Message.error('请输入私钥');
-      return;
+    // 验证参数
+    const error = await formRef.value.validate();
+    if (error) {
+      return false;
     }
     setLoading(true);
     try {
       await updateSystemSettingBatch({
-        type: 'ENCRYPT',
+        type: SystemSettingTypes.ENCRYPT,
         settings: { ...setting.value }
       });
       Message.success('修改成功');
@@ -107,7 +109,7 @@
   onMounted(async () => {
     setLoading(true);
     try {
-      const { data } = await getSystemSetting<EncryptSetting>('ENCRYPT');
+      const { data } = await getSystemSetting<EncryptSetting>(SystemSettingTypes.ENCRYPT);
       setting.value = data;
     } catch (e) {
     } finally {

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

@@ -1,13 +1,18 @@
 <template>
   <a-spin class="main-container" :loading="loading">
-    <a-descriptions title="SFTP 设置"
-                    class="detail-container"
-                    size="large"
-                    :align="{ label: 'right', value: 'left' }"
-                    :label-style="{ width: '128px', 'vertical-align': 'top' }"
-                    :column="1">
+    <!-- 标题 -->
+    <h3 class="setting-header">SFTP 设置</h3>
+    <!-- 表单 -->
+    <a-form :model="setting"
+            ref="formRef"
+            class="setting-form"
+            label-align="right"
+            :auto-label-width="true">
       <!-- 文件预览大小 -->
-      <a-descriptions-item label="文件预览大小">
+      <a-form-item field="previewSize"
+                   label="文件预览大小"
+                   :rules="[{required: true, message: '请输入文件预览大小'}]"
+                   hide-asterisk>
         <a-input-number v-model="setting.previewSize"
                         class="input-wrapper"
                         :min="0"
@@ -19,19 +24,17 @@
             MB
           </template>
         </a-input-number>
-      </a-descriptions-item>
+      </a-form-item>
       <!-- 按钮 -->
-      <a-descriptions-item>
-        <a-space v-permission="['infra:system-setting:update']">
-          <!-- 保存 -->
-          <a-button type="primary"
-                    size="small"
-                    @click="save">
-            保存
-          </a-button>
-        </a-space>
-      </a-descriptions-item>
-    </a-descriptions>
+      <a-form-item v-permission="['infra:system-setting:update']">
+        <!-- 保存 -->
+        <a-button type="primary"
+                  size="small"
+                  @click="save">
+          保存
+        </a-button>
+      </a-form-item>
+    </a-form>
   </a-spin>
 </template>
 
@@ -47,21 +50,24 @@
   import { getSystemSetting, updateSystemSettingBatch } from '@/api/system/setting';
   import useLoading from '@/hooks/loading';
   import { Message } from '@arco-design/web-vue';
+  import { SystemSettingTypes } from '../types/const';
 
   const { loading, setLoading } = useLoading();
 
+  const formRef = ref();
   const setting = ref<SftpSetting>({} as SftpSetting);
 
   // 保存
   const save = async () => {
-    if (!setting.value.previewSize && setting.value.previewSize !== 0) {
-      Message.error('请输入文件预览大小');
-      return;
+    // 验证参数
+    const error = await formRef.value.validate();
+    if (error) {
+      return false;
     }
     setLoading(true);
     try {
       await updateSystemSettingBatch({
-        type: 'SFTP',
+        type: SystemSettingTypes.SFTP,
         settings: setting.value
       });
       Message.success('修改成功');
@@ -75,7 +81,7 @@
   onMounted(async () => {
     setLoading(true);
     try {
-      const { data } = await getSystemSetting<SftpSetting>('SFTP');
+      const { data } = await getSystemSetting<SftpSetting>(SystemSettingTypes.SFTP);
       setting.value = data;
     } catch (e) {
     } finally {

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

@@ -91,6 +91,17 @@
     padding: 16px 0 0 24px;
     width: 100%;
 
+    .setting-header {
+      color: var(--color-text-1);
+      margin-top: 0;
+      margin-bottom: 20px;
+      font-weight: 600;
+    }
+
+    .setting-form {
+      padding-left: 24px;
+    }
+
     .arco-descriptions-title {
       font-weight: 600;
     }

orion-visor-ui/src/views/system/setting/types/const.ts

@@ -0,0 +1,7 @@
+import type { SystemSettingType } from '@/api/system/setting';
+
+// 系统设置类型
+export const SystemSettingTypes: Record<SystemSettingType, SystemSettingType> = {
+  SFTP: 'SFTP',
+  ENCRYPT: 'ENCRYPT',
+};