✨ 系统动态设置.

orion-visor-ui/src/views/host/terminal/components/sftp/sftp-table.vue

@@ -141,18 +141,18 @@
 </script>
 
 <script lang="ts" setup>
+  import type { VNodeRef } from 'vue';
   import type { TableData } from '@arco-design/web-vue/es/table/interface';
   import type { SftpFile, ISftpSession } from '../../types/define';
-  import type { VNodeRef } from 'vue';
-  import { ref, computed, watch, inject } from 'vue';
+  import type { SftpSetting } from '@/api/system/setting';
+  import { ref, computed, watch, inject, onMounted } from 'vue';
   import { useRowSelection } from '@/hooks/table';
   import { dateFormat } from '@/utils';
   import { setAutoFocus } from '@/utils/dom';
   import { copy } from '@/hooks/copy';
   import columns from './types/table.columns';
   import { FILE_TYPE, openSftpChmodModalKey, openSftpMoveModalKey } from '../../types/const';
-
-  const previewSize = Number.parseInt(import.meta.env.VITE_SFTP_PREVIEW_MB);
+  import { useCacheStore } from '@/store';
 
   const props = defineProps<{
     session?: ISftpSession;
@@ -168,6 +168,8 @@
 
   const rowSelection = useRowSelection({ width: 40 });
 
+  const previewSize = ref(0);
+
   // 切换页面自动清空过滤
   watch(() => props.list, () => {
     tableRef.value?.clearFilters();
@@ -206,7 +208,7 @@
   const canEditable = (size: number, attr: string) => {
     // 是普通文件 && 文件小于 配置大小(MB) 可以编辑
     return FILE_TYPE.NORMAL_FILE.value == formatFileType(attr).value
-      && size <= previewSize * 1024 * 1024;
+      && size <= (previewSize.value || 0) * 1024 * 1024;
   };
 
   // 点击文件名称
@@ -276,6 +278,12 @@
     }) || FILE_TYPE.NORMAL_FILE;
   };
 
+  // 加载配置
+  onMounted(async () => {
+    const data = await useCacheStore().loadSystemSetting<SftpSetting>('SFTP');
+    previewSize.value = data?.previewSize;
+  });
+
 </script>
 
 <style lang="less" scoped>

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

@@ -1,8 +1,9 @@
 <template>
-  <div class="main-container">
-    <h3>关于 Orion Visor</h3>
+  <a-spin class="main-container" :loading="loading">
+    <h3 class="setting-header">关于</h3>
     <!-- 不一致提示 -->
     <a-alert v-if="app.version && webVersion !== app.version"
+             type="warning"
              class="alert-wrapper">
       当前前端版本与后端版本不一致, 请使用 Ctrl + F5 强制刷新页面
     </a-alert>
@@ -19,7 +20,7 @@
     <a-descriptions class="detail-container"
                     size="large"
                     :align="{ label: 'right', value: 'left' }"
-                    :label-style="{ width: '134px' }"
+                    :label-style="{ width: '138px' }"
                     :column="1">
       <!-- 机器码 -->
       <a-descriptions-item label="机器码">
@@ -37,23 +38,22 @@
       </a-descriptions-item>
       <!-- 当前后端版本 -->
       <a-descriptions-item label="最新发布版本">
-        {{ repo.tagName }}
+        {{ repo.tagName || '-' }}
       </a-descriptions-item>
       <!-- 当前后端版本 -->
       <a-descriptions-item label="最新更新日志">
-        <a-textarea class="release-node"
-                    v-model="repo.body"
+        <a-textarea v-model="repo.body"
                     :auto-size="{ minRows: 3, maxRows: 16 }"
                     readonly>
         </a-textarea>
       </a-descriptions-item>
     </a-descriptions>
-  </div>
+  </a-spin>
 </template>
 
 <script lang="ts">
   export default {
-    name: 'systemSettingAbout',
+    name: 'systemSettingAboutSetting',
   };
 </script>
 
@@ -62,7 +62,9 @@
   import { onMounted, reactive } from 'vue';
   import { getAppLatestRelease, getSystemAppInfo } from '@/api/system/setting';
   import { copy } from '@/hooks/copy';
-  import { Message } from '@arco-design/web-vue';
+  import useLoading from '@/hooks/loading';
+
+  const { loading, setLoading } = useLoading();
 
   const webVersion = import.meta.env.VITE_APP_VERSION;
 
@@ -78,11 +80,14 @@
 
   // 加载应用信息
   onMounted(async () => {
+    setLoading(true);
     try {
       const { data } = await getSystemAppInfo();
       app.version = data.version;
       app.uuid = data.uuid;
     } catch (e) {
+    } finally {
+      setLoading(false);
     }
   });
 
@@ -93,25 +98,27 @@
       repo.tagName = data.tagName;
       repo.body = data.body;
     } catch (e) {
-      Message.error('获取应用最新版本失败, 请等待后重试');
     }
   });
 
 </script>
 
 <style lang="less" scoped>
-  @release-node-width: 528px;
-  @label-width: 134px;
+  @form-width: 628px;
 
   .main-container {
-    padding-left: 16px;
+    width: @form-width;
+    padding-left: 24px;
+
+    .setting-header {
+      color: var(--color-text-1);
+    }
 
     .alert-href {
       text-decoration: none;
     }
 
     .alert-wrapper {
-      width: @release-node-width + @label-width;
       margin-bottom: 12px;
     }
 
@@ -119,9 +126,5 @@
       color: rgb(var(--arcoblue-6));
       font-weight: 600;
     }
-
-    .release-node {
-      width: @release-node-width;
-    }
   }
 </style>

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

@@ -0,0 +1,113 @@
+<template>
+  <a-spin class="main-container" :loading="loading">
+    <h3 class="setting-header">SFTP 设置</h3>
+    <!-- 系统信息 -->
+    <a-descriptions class="detail-container"
+                    size="large"
+                    :align="{ label: 'right', value: 'left' }"
+                    :label-style="{ width: '128px' }"
+                    :column="1">
+      <!-- 文件预览大小 -->
+      <a-descriptions-item label="文件预览大小">
+        <a-input-number v-model="setting.previewSize"
+                        class="input-wrapper"
+                        :min="0"
+                        :max="200"
+                        placeholder="请输入文件预览大小"
+                        allow-clear
+                        hide-button>
+          <template #suffix>
+            MB
+          </template>
+        </a-input-number>
+      </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',
+  };
+</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 useLoading from '@/hooks/loading';
+  import { Message } from '@arco-design/web-vue';
+
+  const { loading, setLoading } = useLoading();
+
+  const setting = ref<SftpSetting>({} as SftpSetting);
+
+  // 保存
+  const save = async () => {
+    setLoading(true);
+    try {
+      await updatePartialSystemSetting({
+        type: 'SFTP',
+        settings: setting.value
+      });
+      Message.success('修改成功');
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 加载配置
+  onMounted(async () => {
+    setLoading(true);
+    try {
+      const { data } = await getSystemSetting<SftpSetting>('SFTP');
+      setting.value = data;
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  });
+
+</script>
+
+<style lang="less" scoped>
+  @form-width: 628px;
+  @input-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

@@ -5,9 +5,13 @@
             size="medium"
             position="left"
             :lazy-load="true">
+      <!-- SFTP -->
+      <a-tab-pane key="sftp" title="SFTP">
+        <sftp-setting />
+      </a-tab-pane>
       <!-- 关于 -->
       <a-tab-pane key="about" title="关于">
-        <about />
+        <about-setting />
       </a-tab-pane>
     </a-tabs>
   </div>
@@ -15,18 +19,19 @@
 
 <script lang="ts">
   export default {
-    name: 'systemSetting'
+    name: 'systemSetting',
   };
 </script>
 
 <script lang="ts" setup>
   import { onBeforeMount, ref } from 'vue';
   import { useRoute } from 'vue-router';
-  import About from './components/about.vue';
+  import SftpSetting from './components/sftp-setting.vue';
+  import AboutSetting from './components/about-setting.vue';
 
   const route = useRoute();
 
-  const activeKey = ref('about');
+  const activeKey = ref('sftp');
 
   // 跳转到指定页
   onBeforeMount(() => {