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 { uploadProjectImage } from '@/api/projectFiles'
 import FtsUpload from '@/api/fts'
 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 customRequest = async ({ file, onFinish, onError }: UploadCustomRequestOptions) => {
-  const { file } = options
+  if (!file.file) {
-  nextTick(async () => {
+    onError()
-    if (file.file) {
+    window['$message'].error('添加图片失败，请稍后重试！')
-      // 修改名称
+    return
-      // const newNameFile = new File([file.file], `${fetchRouteParamsLocation()}_index_background.png`, {
+  }
-      //   type: file.file.type
+
-      // })
+  try {
-      let uploadParams = new FormData()
+    const result = await uploadProjectImage(fetchRouteParamsLocation(), 'background', file.file)
-      uploadParams.append('file', file.file)
+    chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.BACKGROUND_IMAGE, result.url)
-      const uploadRes: any = await FtsUpload(uploadParams)
+    chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.SELECT_COLOR, false)
-      if (uploadRes && uploadRes.code === ResultEnum.SUCCESS) {
+    onFinish()
-        if (uploadRes.data.result_url) {
+  } catch (error) {
-          chartEditStore.setEditCanvasConfig(
+    console.error(error)
-            EditCanvasConfigEnum.BACKGROUND_IMAGE,
+    onError()
-            uploadRes.data.result_url
+    window['$message'].error('添加图片失败，请稍后重试！')
-          )
+  }
        } 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('添加图片失败，请稍后重试！')
    }
  })
 }
 // 选择适配方式
--- 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 { saveProjectApi, fetchProjectApi } from '@/api/path'
-import FtsUpload from '@/api/fts'
+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）
+        const previewFile = base64toFile(canvasImage.toDataURL('image/png'), `${projectId}.png`)
-        let uploadParams = new FormData()
+        const uploadResult = await uploadProjectImage(projectId, 'index', previewFile)
-        uploadParams.append('file', base64toFile(canvasImage.toDataURL('image/png'), `${fetchRouteParamsLocation()}.png`))
+        chartEditStore.setProjectInfo(ProjectInfoEnum.THUMBNAIL, uploadResult.url)
        // 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
            })
          }
        }
      }
    } 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