docs: 清理旧文档

feat: 接入大屏文件上传服务
2026-08-07 17:35:29 +08:00 · 2026-08-04 01:02:40 +08:00
9 changed files with 94 additions and 294 deletions
--- a/IFRAME_MODE.md
+++ b/IFRAME_MODE.md
@@ -1,178 +0,0 @@
-# GoView iframe 嵌入模式使用说明
-
-## 概述
-
-GoView 已支持通过 iframe 嵌入到其他系统中运行，无需独立的登录流程。系统会自动从 URL 参数中读取 token 进行身份验证。
-
-**默认跳转**：系统启动后会直接跳转到项目列表页面 (`/project/items`)，跳过登录步骤。
-
-## 使用方法
-
-### 1. 基本用法
-
-在 iframe 的 src 中添加 `token` 参数：
-
-```html
-<!-- 默认跳转到项目列表 -->
-<iframe 
-  src="http://your-goview-domain/#/?token=YOUR_TOKEN_HERE" 
-  width="100%" 
-  height="100%"
-></iframe>
-
-<!-- 或直接指定项目列表路径 -->
-<iframe 
-  src="http://your-goview-domain/#/project/items?token=YOUR_TOKEN_HERE" 
-  width="100%" 
-  height="100%"
-></iframe>
-```
-
-### 2. URL 参数说明
-
- `token` (必需): 用户身份认证令牌
-
-**示例：**
-```
-# 默认路径，自动跳转到项目列表
-http://localhost:3000/#/?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
-
-# 或明确指定项目列表路径
-http://localhost:3000/#/project/items?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
-```
-
-### 3. 支持的页面路由
-
-您可以直接跳转到任何页面，只需在 URL 中添加 token 参数：
-
- **项目列表**（默认）: `/#/?token=YOUR_TOKEN` 或 `/#/project/items?token=YOUR_TOKEN`
- 项目首页: `/#/project?token=YOUR_TOKEN`
- 图表编辑: `/#/chart/home/PROJECT_ID?token=YOUR_TOKEN`
- 图表预览: `/#/chart/preview/PROJECT_ID?token=YOUR_TOKEN`
-
-## 技术实现
-
-### 修改内容
-
-1. **路由守卫** (`src/router/router-guards.ts`)
-   - 自动从 URL 提取 token 并保存到本地存储
-   - **完全移除登录验证**：不再检查登录状态
-   - **允许所有路由直接访问**：无需登录即可访问任何页面
-
-2. **路由配置** (`src/router/index.ts`)
-   - 默认路由修改为 `/project/items`（项目列表）
-   - 跳过登录页面
-
-3. **Axios 拦截器** (`src/api/axios.ts`)
-   - 请求拦截器：移除重定向到登录页的逻辑
-   - 响应拦截器：token 过期时不再跳转登录页
-   - 所有请求自动携带 token
-
-4. **应用初始化** (`src/main.ts`)
-   - 应用启动时自动读取 URL 中的 token
-   - 初始化用户信息到 store
-
-### Token 存储
-
-Token 会被自动存储到以下位置：
- **localStorage**: 持久化存储，刷新页面后仍然有效
- **Pinia Store**: 应用运行时状态管理
-
-## 注意事项
-
-### 1. Token 刷新
-
-如果 token 发生变化，需要更新 iframe 的 src：
-
-```javascript
-// 更新 token
-const newToken = 'NEW_TOKEN_HERE'
-iframe.src = `http://your-goview-domain/#/?token=${newToken}`
-```
-
-### 2. Token 过期处理
-
-当 token 过期时：
- 系统会在控制台输出警告信息
- 用户会看到"登录过期"的提示
- 不会自动跳转到登录页
- 需要父系统更新 iframe 的 token 参数
-
-### 3. 安全建议
-
- 确保 token 通过 HTTPS 传输
- token 应该设置合理的过期时间
- 考虑使用短期 token + 刷新 token 机制
-
-### 4. 跨域问题
-
-如果 GoView 和父系统不在同一域名下，需要：
- 配置 CORS 允许跨域请求
- 确保 API 服务器允许来自父系统域名的请求
-
-## 控制台日志
-
-系统会输出以下日志帮助调试：
-
- ✅ `[GoView] iframe 模式：已从 URL 参数中获取 token 并初始化`
- ⚠️ `[GoView] iframe 模式：未在 URL 中检测到 token 参数`
- ⚠️ `[GoView] iframe 模式：未找到身份信息，请确保 URL 中包含 token 参数`
- ❌ `[GoView] iframe 模式：token 已过期，请更新 URL 中的 token 参数`
-
-## 示例代码
-
-### 父系统嵌入示例
-
-```html
-<!DOCTYPE html>
-<html>
-<head>
-  <title>GoView 嵌入示例</title>
-</head>
-<body>
-  <div id="goview-container">
-    <iframe 
-      id="goview-iframe"
-      src="" 
-      width="100%" 
-      height="800px"
-      frameborder="0"
-    ></iframe>
-  </div>
-
-  <script>
-    // 从您的认证系统获取 token
-    const token = 'YOUR_USER_TOKEN'
-    
-    // 设置 iframe src（默认跳转到项目列表）
-    const iframe = document.getElementById('goview-iframe')
-    iframe.src = `http://localhost:3000/#/?token=${token}`
-    
-    // 如果需要更新 token
-    function updateToken(newToken) {
-      iframe.src = `http://localhost:3000/#/?token=${newToken}`
-    }
-  </script>
-</body>
-</html>
-```
-
-## 兼容性说明
-
- ✅ 保留了原有的登录功能（如果不通过 URL 传递 token，仍可使用登录页面）
- ✅ iframe 模式和独立部署模式可以共存
- ✅ 所有原有功能均不受影响
-
-## 回退到登录模式
-
-如果需要回退到原有的登录模式，只需：
-1. 访问不带 token 参数的 URL
-2. 系统会提示警告但允许继续访问
-3. 或者恢复之前的代码版本
-
-## 技术支持
-
-如有问题，请查看：
-1. 浏览器控制台日志
-2. 网络请求中的 token 是否正确携带
-3. API 响应是否返回 token 过期错误
--- a/src/api/axios.config.ts
+++ b/src/api/axios.config.ts
@@ -14,8 +14,3 @@ export const fetchAllowList = [

 // 接口黑名单
 export const fetchBlockList = []
-
-// fts 接口列表（不添加 /Visual/v1 前缀）
-export const ftsList = [
-  '/Assets/v1/fts/uploader'
-]
--- a/src/api/axios.ts
+++ b/src/api/axios.ts
@@ -5,8 +5,6 @@ import { StorageEnum } from '@/enums/storageEnum'
 import { axiosPre } from '@/settings/httpSetting'
 import { SystemStoreEnum, SystemStoreUserInfoEnum } from '@/store/modules/systemStore/systemStore.d'
 import { redirectErrorPage, getLocalStorage, routerTurnByName, isPreview } from '@/utils'
-import { fetchAllowList, ftsList } from './axios.config'
-import includes from 'lodash/includes'

 export interface MyResponseType<T> {
  code: ResultEnum
@@ -28,12 +26,6 @@ const axiosInstance = axios.create({

 axiosInstance.interceptors.request.use(
  (config: InternalAxiosRequestConfig) => {
-    // fts 接口特殊处理：使用完整路径，不添加 /Visual/v1 前缀
-    if (config.url && includes(ftsList, config.url)) {
-      const baseUrl = import.meta.env.PROD ? import.meta.env.VITE_PRO_PATH : import.meta.env.VITE_DEV_PATH
-      config.baseURL = baseUrl
-    }
-    
    // 获取 token 并添加到所有请求
    const info = getLocalStorage(StorageEnum.GO_SYSTEM_STORE)
    if (info) {
--- a/src/api/fts.ts
+++ b/src/api/fts.ts
@@ -1,29 +0,0 @@
-import { AxiosProgressEvent } from "axios";
-import axiosInstance from '@/api/axios'
-import { ContentTypeEnum } from '@/enums/httpEnum'
-
-/** 上传文件 */
-const FtsUpload = (data: any, onUploadProgress?: (progress: number) => void) => {
-  data.append('provider', 'local')
-  data.append('bucket', 'visual')
-  
-  // 使用完整URL，绕过 /Visual/v1 前缀
-  const baseUrl = import.meta.env.PROD ? import.meta.env.VITE_PRO_PATH : import.meta.env.VITE_DEV_PATH
-  
-  return axiosInstance({
-    url: `${baseUrl}/Assets/v1/fts/uploader`,
-    method: 'POST',
-    data,
-    headers: {
-      'Content-Type': ContentTypeEnum.FORM_DATA
-    },
-    onUploadProgress: onUploadProgress ? (progressEvent: AxiosProgressEvent) => {
-      if (progressEvent.total) {
-        const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
-        onUploadProgress(percentCompleted);
-      }
-    } : undefined
-  })
-}
-
-export default FtsUpload
--- a/src/api/path/project.api.ts
+++ b/src/api/path/project.api.ts
@@ -81,19 +81,3 @@ export const changeProjectReleaseApi = async (data: object) => {
    httpErrorHandle()
  }
 }
-
-// * 上传文件
-export const uploadFile = async (data: object) => {
-  try {
-    const res = await http(RequestHttpEnum.POST)<{
-      /**
-       * 文件地址
-       */
-      fileName: string,
-      fileurl: string,
-    }>(`${ModuleTypeEnum.PROJECT}/upload`, data, ContentTypeEnum.FORM_DATA)
-    return res
-  } catch {
-    httpErrorHandle()
-  }
-}
--- a/src/api/path/project.d.ts
+++ b/src/api/path/project.d.ts
@@ -21,6 +21,18 @@ export type ProjectItem = {
   * 预览图片url
   */
  indexImage: string
+  /**
+   * 预览图片 Files 标识
+   */
+  indexImageFileId: string
+  /**
+   * 背景图片url
+   */
+  backgroundImage: string
+  /**
+   * 背景图片 Files 标识
+   */
+  backgroundImageFileId: string
  /**
   * 创建者 identity
   */
--- a/src/api/projectFiles.ts
+++ b/src/api/projectFiles.ts
@@ -0,0 +1,57 @@
+import { http } from '@/api/http'
+import { RequestHttpEnum, ResultEnum } from '@/enums/httpEnum'
+
+export type ProjectImageKind = 'index' | 'background'
+
+interface PendingUpload {
+  file_id: string
+  object_key: string
+  upload: {
+    method: string
+    url: string
+    headers: Record<string, string>
+    expires_at: string
+  }
+}
+
+interface CompletedUpload {
+  file_id: string
+  url: string
+}
+
+/** 上传项目图片并由 Visual 完成文件绑定。 */
+export async function uploadProjectImage(
+  projectIdentity: string,
+  kind: ProjectImageKind,
+  file: File
+): Promise<CompletedUpload> {
+  const projectPath = `project/${encodeURIComponent(projectIdentity)}/images/${kind}`
+  const initResponse = await http(RequestHttpEnum.POST)<PendingUpload>(`${projectPath}/init`, {
+    filename: file.name,
+    size: file.size,
+    content_type: file.type || 'application/octet-stream'
+  })
+  const pendingUpload = initResponse.data
+  if (initResponse.code !== ResultEnum.SUCCESS || !pendingUpload?.file_id || !pendingUpload.upload?.url) {
+    throw new Error(initResponse.message || '初始化项目图片上传失败')
+  }
+
+  const uploadResponse = await fetch(pendingUpload.upload.url, {
+    method: pendingUpload.upload.method,
+    headers: pendingUpload.upload.headers,
+    body: file,
+    credentials: 'omit'
+  })
+  if (!uploadResponse.ok) {
+    throw new Error(`上传项目图片失败: HTTP ${uploadResponse.status}`)
+  }
+
+  const completeResponse = await http(RequestHttpEnum.POST)<CompletedUpload>(`${projectPath}/complete`, {
+    file_id: pendingUpload.file_id
+  })
+  const completedUpload = completeResponse.data
+  if (completeResponse.code !== ResultEnum.SUCCESS || !completedUpload?.file_id || !completedUpload.url) {
+    throw new Error(completeResponse.message || '完成项目图片上传失败')
+  }
+  return completedUpload
+}
--- a/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue
+++ b/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue
@@ -126,27 +126,23 @@
 </template>

 <script setup lang="ts">
-import { ref, nextTick, watch } from 'vue'
+import { ref, watch } from 'vue'
 import { backgroundImageSize } from '@/settings/designSetting'
 import { swatchesColors } from '@/settings/chartThemes/index'
 import { FileTypeEnum } from '@/enums/fileTypeEnum'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
-import { useSystemStore } from '@/store/modules/systemStore/systemStore'
 import { StylesSetting } from '@/components/Pages/ChartItemSetting'
 import { UploadCustomRequestOptions } from 'naive-ui'
 import { loadAsyncComponent, fetchRouteParamsLocation } from '@/utils'
 import { PreviewScaleEnum } from '@/enums/styleEnum'
-import { ResultEnum } from '@/enums/httpEnum'
 import { icon } from '@/plugins'
-import { uploadFile } from '@/api/path'
-import FtsUpload from '@/api/fts'
+import { uploadProjectImage } from '@/api/projectFiles'

 const { ColorPaletteIcon } = icon.ionicons5
 const { ScaleIcon, FitToScreenIcon, FitToHeightIcon, FitToWidthIcon } = icon.carbon

 const chartEditStore = useChartEditStore()
-const systemStore = useSystemStore()
 const canvasConfig = chartEditStore.getEditCanvasConfig
 const editCanvas = chartEditStore.getEditCanvas

@@ -276,37 +272,23 @@ const clearColor = () => {
 }

 // 自定义上传操作
-const customRequest = (options: UploadCustomRequestOptions) => {
-  const { file } = options
-  nextTick(async () => {
-    if (file.file) {
-      // 修改名称
-      // const newNameFile = new File([file.file], `${fetchRouteParamsLocation()}_index_background.png`, {
-      //   type: file.file.type
-      // })
-      let uploadParams = new FormData()
-      uploadParams.append('file', file.file)
-      const uploadRes: any = await FtsUpload(uploadParams)
-      if (uploadRes && uploadRes.code === ResultEnum.SUCCESS) {
-        if (uploadRes.data.result_url) {
-          chartEditStore.setEditCanvasConfig(
-            EditCanvasConfigEnum.BACKGROUND_IMAGE,
-            uploadRes.data.result_url
-          )
-        } else {
-          // chartEditStore.setEditCanvasConfig(
-          //   EditCanvasConfigEnum.BACKGROUND_IMAGE,
-          //   `${systemStore.getFetchInfo.OSSUrl || ''}${uploadRes.data.fileName}?time=${new Date().getTime()}`
-          // )
-        }
-        chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.SELECT_COLOR, false)
-        return
-      }
-      window['$message'].error('添加图片失败，请稍后重试！')
-    } else {
-      window['$message'].error('添加图片失败，请稍后重试！')
-    }
-  })
+const customRequest = async ({ file, onFinish, onError }: UploadCustomRequestOptions) => {
+  if (!file.file) {
+    onError()
+    window['$message'].error('添加图片失败，请稍后重试！')
+    return
+  }
+
+  try {
+    const result = await uploadProjectImage(fetchRouteParamsLocation(), 'background', file.file)
+    chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.BACKGROUND_IMAGE, result.url)
+    chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.SELECT_COLOR, false)
+    onFinish()
+  } catch (error) {
+    console.error(error)
+    onError()
+    window['$message'].error('添加图片失败，请稍后重试！')
+  }
 }

 // 选择适配方式
--- a/src/views/chart/hooks/useSync.hook.ts
+++ b/src/views/chart/hooks/useSync.hook.ts
@@ -5,7 +5,6 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { EditCanvasTypeEnum, ChartEditStoreEnum, ProjectInfoEnum, ChartEditStorage, EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
 import { StylesSetting } from '@/components/Pages/ChartItemSetting'
-import { useSystemStore } from '@/store/modules/systemStore/systemStore'
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
 import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
 import { fetchChartComponent, fetchConfigComponent, createComponent } from '@/packages/index'
@@ -14,8 +13,8 @@ import throttle from 'lodash/throttle'
 // 接口状态
 import { ResultEnum } from '@/enums/httpEnum'
 // 接口
-import { saveProjectApi, fetchProjectApi, uploadFile, updateProjectApi } from '@/api/path'
-import FtsUpload from '@/api/fts'
+import { saveProjectApi, fetchProjectApi } from '@/api/path'
+import { uploadProjectImage } from '@/api/projectFiles'
 // 画布枚举
 import { SyncEnum } from '@/enums/editPageEnum'
 import { CreateComponentType, CreateComponentGroupType, ConfigType } from '@/packages/index.d'
@@ -102,7 +101,6 @@ const componentMerge = (newObject: any, sources: any, notComponent = false) => {
 export const useSync = () => {
  const chartEditStore = useChartEditStore()
  const chartHistoryStore = useChartHistoryStore()
-  const systemStore = useSystemStore()
  const chartLayoutStore = useChartLayoutStore()
  /**
   * * 组件动态注册
@@ -317,22 +315,9 @@ export const useSync = () => {
          range.style.backgroundColor = originalBgColor
        }

-        // 上传预览图（使用 FtsUpload）
-        let uploadParams = new FormData()
-        uploadParams.append('file', base64toFile(canvasImage.toDataURL('image/png'), `${fetchRouteParamsLocation()}.png`))
-        // console.log(base64toFile(canvasImage.toDataURL('image/png'), `${fetchRouteParamsLocation()}_index_preview.png`))
-        const uploadRes: any = await FtsUpload(uploadParams)
-        
-        // 保存预览图
-        if(uploadRes && uploadRes.code === ResultEnum.SUCCESS) {
-          if (uploadRes.data.result_url) {
-            await updateProjectApi({
-              identity: fetchRouteParamsLocation(),
-              indexImage: uploadRes.data.result_url,
-              backgroundImage: chartEditStore.getEditCanvasConfig.backgroundImage
-            })
-          }
-        }
+        const previewFile = base64toFile(canvasImage.toDataURL('image/png'), `${projectId}.png`)
+        const uploadResult = await uploadProjectImage(projectId, 'index', previewFile)
+        chartEditStore.setProjectInfo(ProjectInfoEnum.THUMBNAIL, uploadResult.url)
      }
    } catch (e) {
      console.log(e)
Author	SHA1	Message	Date
zxr	a0ae73af9a	docs: 清理旧文档	2026-08-07 17:35:29 +08:00
zxr	100c652f2d	feat: 接入大屏文件上传服务	2026-08-04 01:02:40 +08:00