🔨 添加系统加密配置.

orion-visor-ui/config/vite.config.prod.ts

@@ -27,7 +27,8 @@ export default mergeConfig(
               '@xterm/addon-image', '@xterm/addon-search', '@xterm/addon-unicode11',
               '@xterm/addon-web-links', '@xterm/addon-webgl'],
             monaco: ['monaco-editor'],
-            pkg: ['dayjs', 'cron-parser', 'ts-md5', 'file-saver', 'html2canvas']
+            crypto: ['ts-md5', 'jsencrypt'],
+            pkg: ['dayjs', 'cron-parser', 'file-saver', 'html2canvas']
           },
         },
       },

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

@@ -53,7 +53,7 @@
 
 <script lang="ts">
   export default {
-    name: 'systemSettingAboutSetting',
+    name: 'aboutSetting',
   };
 </script>
 
@@ -104,23 +104,8 @@
 </script>
 
 <style lang="less" scoped>
-  @form-width: 628px;
-
   .main-container {
-    width: @form-width;
+    width: 664px !important;
-    padding-left: 24px;
-
-    .setting-header {
-      color: var(--color-text-1);
-    }
-
-    .alert-href {
-      text-decoration: none;
-    }
-
-    .alert-wrapper {
-      margin-bottom: 12px;
-    }
 
     .uuid-wrapper {
       color: rgb(var(--arcoblue-6));

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

@@ -0,0 +1,130 @@
+<template>
+  <a-spin class="main-container" :loading="loading">
+    <h3 class="setting-header">加密设置</h3>
+    <!-- 系统信息 -->
+    <a-descriptions class="detail-container"
+                    :align="{ label: 'right', value: 'left' }"
+                    :label-style="{ width: '98px', 'vertical-align': 'top', 'padding-top': '8px' }"
+                    :column="1">
+      <!-- 提示 -->
+      <a-descriptions-item>
+        <a-alert>请输入 PKCS8 格式的 RSA Base64 密钥, 用于前后端传输时的数据加密</a-alert>
+      </a-descriptions-item>
+      <!-- 加密公钥 -->
+      <a-descriptions-item label="加密公钥">
+        <a-textarea v-model="setting.publicKey"
+                    class="input-wrapper"
+                    placeholder="RSA 公钥 Base64"
+                    :auto-size="{
+                      minRows: 6,
+                      maxRows: 6,
+                    }"
+                    allow-clear />
+      </a-descriptions-item>
+      <!-- 加密私钥 -->
+      <a-descriptions-item label="加密私钥">
+        <a-textarea v-model="setting.privateKey"
+                    class="input-wrapper"
+                    placeholder="RSA 私钥 Base64"
+                    :auto-size="{
+                      minRows: 14,
+                      maxRows: 14,
+                    }"
+                    allow-clear />
+      </a-descriptions-item>
+      <!-- 按钮 -->
+      <a-descriptions-item>
+        <a-space v-permission="['infra:system-setting:update']">
+          <!-- 保存 -->
+          <a-button type="primary"
+                    size="small"
+                    @click="save">
+            保存
+          </a-button>
+          <!-- 生成密钥对 -->
+          <a-button size="small" @click="generator">
+            生成密钥对
+          </a-button>
+        </a-space>
+      </a-descriptions-item>
+    </a-descriptions>
+  </a-spin>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'encryptSetting',
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { EncryptSetting } from '@/api/system/setting';
+  import { onMounted, ref } from 'vue';
+  import { generatorKeypair, getSystemSetting, updateSystemSettingBatch } from '@/api/system/setting';
+  import useLoading from '@/hooks/loading';
+  import { Message } from '@arco-design/web-vue';
+
+  const { loading, setLoading } = useLoading();
+
+  const setting = ref<EncryptSetting>({} as EncryptSetting);
+
+  // 保存
+  const save = async () => {
+    if (!setting.value.publicKey) {
+      Message.error('请输入公钥');
+      return;
+    }
+    if (!setting.value.privateKey) {
+      Message.error('请输入私钥');
+      return;
+    }
+    setLoading(true);
+    try {
+      await updateSystemSettingBatch({
+        type: 'ENCRYPT',
+        settings: { ...setting.value }
+      });
+      Message.success('修改成功');
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 生成密钥对
+  const generator = async () => {
+    setLoading(true);
+    try {
+      const { data } = await generatorKeypair();
+      setting.value.publicKey = data.publicKey;
+      setting.value.privateKey = data.privateKey;
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 加载配置
+  onMounted(async () => {
+    setLoading(true);
+    try {
+      const { data } = await getSystemSetting<EncryptSetting>('ENCRYPT');
+      setting.value = data;
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  });
+
+</script>
+
+<style lang="less" scoped>
+  .main-container {
+    width: 728px !important;
+
+    .input-wrapper {
+      width: 100%;
+    }
+  }
+
+</style>

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

@@ -21,30 +21,31 @@
           </template>
         </a-input-number>
       </a-descriptions-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-space v-permission="['infra:system-setting:update']"
-             class="button-container">
-      <!-- 保存 -->
-      <a-button type="primary"
-                size="small"
-                @click="save">
-        保存
-      </a-button>
-    </a-space>
   </a-spin>
 </template>
 
 <script lang="ts">
   export default {
-    name: 'systemSettingSftpSetting',
+    name: 'sftpSetting',
   };
 </script>
 
 <script lang="ts" setup>
   import type { SftpSetting } from '@/api/system/setting';
   import { onMounted, ref } from 'vue';
-  import { getSystemSetting, updatePartialSystemSetting } from '@/api/system/setting';
+  import { getSystemSetting, updateSystemSettingBatch } from '@/api/system/setting';
   import useLoading from '@/hooks/loading';
   import { Message } from '@arco-design/web-vue';
 
@@ -54,9 +55,13 @@
 
   // 保存
   const save = async () => {
+    if (!setting.value.previewSize && setting.value.previewSize !== 0) {
+      Message.error('请输入文件预览大小');
+      return;
+    }
     setLoading(true);
     try {
-      await updatePartialSystemSetting({
+      await updateSystemSettingBatch({
         type: 'SFTP',
         settings: setting.value
       });
@@ -82,32 +87,7 @@
 </script>
 
 <style lang="less" scoped>
-  @form-width: 628px;
+  .input-wrapper {
-  @input-width: 328px;
+    width: 328px;
-
-  .main-container {
-    width: @form-width;
-    padding-left: 24px;
-
-    .setting-header {
-      color: var(--color-text-1);
-    }
-
-    .alert-href {
-      text-decoration: none;
-    }
-
-    .alert-wrapper {
-      margin-bottom: 12px;
-    }
-
-    .input-wrapper {
-      width: @input-width;
-    }
-
-    .button-container {
-      margin-left: 128px;
-      margin-bottom: 12px;
-    }
   }
 </style>

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

@@ -6,9 +6,17 @@
             position="left"
             :lazy-load="true">
       <!-- SFTP -->
-      <a-tab-pane key="sftp" title="SFTP">
+      <a-tab-pane v-permission="['infra:system-setting:update']"
+                  key="sftp"
+                  title="SFTP">
         <sftp-setting />
       </a-tab-pane>
+      <!-- 加密设置 -->
+      <a-tab-pane v-permission="['infra:system-setting:update']"
+                  key="encrypt"
+                  title="加密设置">
+        <encrypt-setting />
+      </a-tab-pane>
       <!-- 关于 -->
       <a-tab-pane key="about" title="关于">
         <about-setting />
@@ -26,10 +34,13 @@
 <script lang="ts" setup>
   import { onBeforeMount, ref } from 'vue';
   import { useRoute } from 'vue-router';
+  import usePermission from '@/hooks/permission';
   import SftpSetting from './components/sftp-setting.vue';
+  import EncryptSetting from './components/encrypt-setting.vue';
   import AboutSetting from './components/about-setting.vue';
 
   const route = useRoute();
+  const { hasPermission } = usePermission();
 
   const activeKey = ref('sftp');
 
@@ -38,6 +49,14 @@
     const key = route.query.key as string;
     if (key) {
       activeKey.value = key;
+    } else {
+      // 检查权限
+      const has = hasPermission('infra:system-setting:update');
+      if (has) {
+        activeKey.value = 'sftp';
+      } else {
+        activeKey.value = 'about';
+      }
     }
   });
 
@@ -68,4 +87,23 @@
     justify-content: center;
   }
 
+  :deep(.main-container) {
+    padding-left: 24px;
+    width: 100%;
+
+    .setting-header {
+      color: var(--color-text-1);
+      margin-bottom: 20px;
+    }
+
+    .alert-href {
+      text-decoration: none;
+    }
+
+    .alert-wrapper {
+      margin: 0 0 12px 24px;
+      width: 598px;
+    }
+  }
+
 </style>