chore: 处理kicc文件在线预览

.env.production

@@ -1,11 +1,6 @@
 # 资源公共路径,需要以 /开头和结尾
 VITE_PUBLIC_PATH = /
 
-# 本地开发代理，可以解决跨域及多地址代理
-# 如果接口地址匹配到，则会转发到http://localhost:3000，防止本地出现跨域问题
-# 可以有多个，注意多个不能换行，否则代理将会失效
-VITE_PROXY = [["/prod-api","http://192.168.3.10:9999"],["/prod-upload","http://192.168.3.10:9999/system_proxy/system/file/upload"]]
-
 # 是否删除console.log
 VITE_DROP_CONSOLE = true
 
@@ -25,6 +20,10 @@ VITE_GLOB_API_URL=/prod-api
 # 可以通过nginx转发或者直接写实际地址
 VITE_GLOB_UPLOAD_URL=/prod-upload
 
+# 文件预览地址
+# 可以通过nginx转发或者直接写实际地址
+VITE_GLOB_FILE_PREVIEW_URL=/prod-preview
+
 # 接口地址前缀，有些系统所有接口地址都有前缀，可以在这里统一加，方便切换
 VITE_GLOB_API_URL_PREFIX=
 

.env.test

@@ -16,11 +16,15 @@ VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
 
 # 接口地址
 # 如果没有跨域问题，直接在这里配置即可
-VITE_GLOB_API_URL=/test-api
+VITE_GLOB_API_URL=/prod-api
 
 # 文件上传地址，可选
 # 可以通过nginx转发或者直接写实际地址
-VITE_GLOB_UPLOAD_URL=/test-upload
+VITE_GLOB_UPLOAD_URL=/prod-upload
+
+# 文件预览地址
+# 可以通过nginx转发或者直接写实际地址
+VITE_GLOB_FILE_PREVIEW_URL=http:192.168.3.10:8086
 
 # 接口地址前缀，有些系统所有接口地址都有前缀，可以在这里统一加，方便切换
 VITE_GLOB_API_URL_PREFIX=

docker/docker-compose.yaml

@@ -14,6 +14,7 @@ services:
       - docker-cloud_default
     external_links:
       - kicc-gateway
+      - kicc-fileview
     ports:
       - 80:80
       - 443:443

docker/kicc-ui.conf

@@ -95,6 +95,11 @@ server {
     proxy_pass http://kicc-gateway:9999;
   }
 
+  # 代理访问后端文件在线预览地址
+  location ^~/prod-preview/ {
+    proxy_pass http://kicc-fileview:8012/;
+  }
+
   # 代理访问后端微服务报表地址,绕过https不能内嵌http
   location ^~/ureport/ {
     proxy_pass http://kicc-gateway:9999/report_proxy/ureport/;

package.json

@@ -12,7 +12,7 @@
     "lint:check": "eslint --max-warnings 0  \"src/**/*.{vue,ts,tsx}\"",
     "lint:eslint": "eslint --cache --max-warnings 0  \"src/**/*.{vue,ts,tsx}\" --fix",
     "build": "cross-env NODE_ENV=production vite build && esno ./build/script/postBuild.ts",
-    "build:test": "pnpm lint:check && vite build --mode test && esno ./build/script/postBuild.ts",
+    "build:test": "vite build --mode test && esno ./build/script/postBuild.ts",
     "build:no-cache": "pnpm delete:cache && pnpm build",
     "preview": "pnpm run build && vite preview",
     "preview:dist": "vite preview",

src/api/platform/system/controller/file.ts

@@ -9,7 +9,7 @@ import { downloadByUrl } from '/@/utils/file/download';
 import { useGlobSetting } from '/@/hooks/setting';
 const { apiUrl } = useGlobSetting();
 
-enum Api {
+export enum Api {
   list = '/system_proxy/system/file/list',
   get = '/system_proxy/system/file/getFile',
   getLocal = '/system_proxy/system/file/local',

src/hooks/setting/index.ts

@@ -19,6 +19,7 @@ export const useGlobSetting = (): Readonly<GlobConfig> => {
     VITE_GLOB_CLIENT_ID,
     VITE_GLOB_CLIENT_SECRET,
     VITE_GLOB_GATEWAY_ASE_ENCODE_SECRET,
+    VITE_GLOB_FILE_PREVIEW_URL,
     VITE_GLOB_APP_OPEN_QIANKUN,
   } = getAppEnvConfig();
 
@@ -36,6 +37,7 @@ export const useGlobSetting = (): Readonly<GlobConfig> => {
     clientId: VITE_GLOB_CLIENT_ID,
     clientSecret: VITE_GLOB_CLIENT_SECRET,
     gatewayAseEncodeSecret: VITE_GLOB_GATEWAY_ASE_ENCODE_SECRET,
+    filePreviewUrl: VITE_GLOB_FILE_PREVIEW_URL,
     openQianKun: VITE_GLOB_APP_OPEN_QIANKUN
   };
   return glob as Readonly<GlobConfig>;

src/utils/env.ts

@@ -37,6 +37,7 @@ export function getAppEnvConfig() {
     VITE_GLOB_CLIENT_ID,
     VITE_GLOB_CLIENT_SECRET,
     VITE_GLOB_GATEWAY_ASE_ENCODE_SECRET,
+    VITE_GLOB_FILE_PREVIEW_URL,
     VITE_GLOB_APP_OPEN_QIANKUN,
   } = ENV;
 
@@ -55,6 +56,7 @@ export function getAppEnvConfig() {
     VITE_GLOB_CLIENT_ID,
     VITE_GLOB_CLIENT_SECRET,
     VITE_GLOB_GATEWAY_ASE_ENCODE_SECRET,
+    VITE_GLOB_FILE_PREVIEW_URL,
     VITE_GLOB_APP_OPEN_QIANKUN,
   };
 }

src/views/system/file/file.data.ts

@@ -8,6 +8,12 @@
 import { BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
 import { getFileSize } from '/@/utils/file/download';
+import { h } from 'vue';
+import { useGlobSetting } from '/@/hooks/setting';
+import { Tag } from 'ant-design-vue';
+import { useBase64 } from '@vueuse/core';
+const { filePreviewUrl = '', apiUrl } = useGlobSetting();
+import { Api } from '/@/api/platform/system/controller/file';
 
 /** 表格列配置 */
 export const columns: BasicColumn[] = [
@@ -21,7 +27,14 @@ export const columns: BasicColumn[] = [
   },
   {
     title: '文件名称',
-    dataIndex: 'fileName'
+    dataIndex: 'fileName',
+    customRender: ({ record }) => {
+      const { base64 } = useBase64(`${apiUrl}${Api.get}/${record.bucket}/${record.fileName}`);
+      return record.icon ? h('a-button', {
+          type: 'link',
+          href: `${filePreviewUrl}/onlinePreview?url=${encodeURIComponent(base64.value)}` }, ()=> record.fileName)
+        : h(Tag, { color: 'red' }, () => '暂无文件');
+    }
   },
   {
     title: '文件类型',

types/config.d.ts

@@ -152,6 +152,8 @@ export interface GlobConfig {
   clientSecret: string;
   // 网关ase密码解密密钥,保持跟后端密钥一致,必须要有否则登录会失败的
   gatewayAseEncodeSecret: string;
+  // 文件在线预览网址
+  filePreviewUrl?: string;
   // 开启微服务
   openQianKun?: boolean;
 }
@@ -173,6 +175,8 @@ export interface GlobEnvConfig {
   VITE_GLOB_CLIENT_SECRET: string;
   // 网关ase密码解密密钥,保持跟后端密钥一致,必须要有否则登录会失败的
   VITE_GLOB_GATEWAY_ASE_ENCODE_SECRET: string;
+  // 文件在线预览网址
+  VITE_GLOB_FILE_PREVIEW_URL?: string;
   // 开启微服务
   VITE_GLOB_APP_OPEN_QIANKUN: boolean;
 }