Compare commits
2 Commits
9f2482bf66
...
ops-test-0
| Author | SHA1 | Date | |
|---|---|---|---|
| a0ae73af9a | |||
| 100c652f2d |
178
IFRAME_MODE.md
178
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 过期错误
|
|
||||||
@@ -14,8 +14,3 @@ export const fetchAllowList = [
|
|||||||
|
|
||||||
// 接口黑名单
|
// 接口黑名单
|
||||||
export const fetchBlockList = []
|
export const fetchBlockList = []
|
||||||
|
|
||||||
// fts 接口列表（不添加 /Visual/v1 前缀）
|
|
||||||
export const ftsList = [
|
|
||||||
'/Assets/v1/fts/uploader'
|
|
||||||
]
|
|
||||||
|
|||||||
@@ -5,8 +5,6 @@ import { StorageEnum } from '@/enums/storageEnum'
|
|||||||
import { axiosPre } from '@/settings/httpSetting'
|
import { axiosPre } from '@/settings/httpSetting'
|
||||||
import { SystemStoreEnum, SystemStoreUserInfoEnum } from '@/store/modules/systemStore/systemStore.d'
|
import { SystemStoreEnum, SystemStoreUserInfoEnum } from '@/store/modules/systemStore/systemStore.d'
|
||||||
import { redirectErrorPage, getLocalStorage, routerTurnByName, isPreview } from '@/utils'
|
import { redirectErrorPage, getLocalStorage, routerTurnByName, isPreview } from '@/utils'
|
||||||
import { fetchAllowList, ftsList } from './axios.config'
|
|
||||||
import includes from 'lodash/includes'
|
|
||||||
|
|
||||||
export interface MyResponseType<T> {
|
export interface MyResponseType<T> {
|
||||||
code: ResultEnum
|
code: ResultEnum
|
||||||
@@ -28,12 +26,6 @@ const axiosInstance = axios.create({
|
|||||||
|
|
||||||
axiosInstance.interceptors.request.use(
|
axiosInstance.interceptors.request.use(
|
||||||
(config: InternalAxiosRequestConfig) => {
|
(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 并添加到所有请求
|
// 获取 token 并添加到所有请求
|
||||||
const info = getLocalStorage(StorageEnum.GO_SYSTEM_STORE)
|
const info = getLocalStorage(StorageEnum.GO_SYSTEM_STORE)
|
||||||
if (info) {
|
if (info) {
|
||||||
|
|||||||
@@ -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
|
|
||||||
@@ -81,19 +81,3 @@ export const changeProjectReleaseApi = async (data: object) => {
|
|||||||
httpErrorHandle()
|
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()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
12
src/api/path/project.d.ts
vendored
12
src/api/path/project.d.ts
vendored
@@ -21,6 +21,18 @@ export type ProjectItem = {
|
|||||||
* 预览图片url
|
* 预览图片url
|
||||||
*/
|
*/
|
||||||
indexImage: string
|
indexImage: string
|
||||||
|
/**
|
||||||
|
* 预览图片 Files 标识
|
||||||
|
*/
|
||||||
|
indexImageFileId: string
|
||||||
|
/**
|
||||||
|
* 背景图片url
|
||||||
|
*/
|
||||||
|
backgroundImage: string
|
||||||
|
/**
|
||||||
|
* 背景图片 Files 标识
|
||||||
|
*/
|
||||||
|
backgroundImageFileId: string
|
||||||
/**
|
/**
|
||||||
* 创建者 identity
|
* 创建者 identity
|
||||||
*/
|
*/
|
||||||
|
|||||||
57
src/api/projectFiles.ts
Normal file
57
src/api/projectFiles.ts
Normal file
@@ -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
|
||||||
|
}
|
||||||
@@ -126,27 +126,23 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, nextTick, watch } from 'vue'
|
import { ref, watch } from 'vue'
|
||||||
import { backgroundImageSize } from '@/settings/designSetting'
|
import { backgroundImageSize } from '@/settings/designSetting'
|
||||||
import { swatchesColors } from '@/settings/chartThemes/index'
|
import { swatchesColors } from '@/settings/chartThemes/index'
|
||||||
import { FileTypeEnum } from '@/enums/fileTypeEnum'
|
import { FileTypeEnum } from '@/enums/fileTypeEnum'
|
||||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||||
import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
|
import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
|
||||||
import { useSystemStore } from '@/store/modules/systemStore/systemStore'
|
|
||||||
import { StylesSetting } from '@/components/Pages/ChartItemSetting'
|
import { StylesSetting } from '@/components/Pages/ChartItemSetting'
|
||||||
import { UploadCustomRequestOptions } from 'naive-ui'
|
import { UploadCustomRequestOptions } from 'naive-ui'
|
||||||
import { loadAsyncComponent, fetchRouteParamsLocation } from '@/utils'
|
import { loadAsyncComponent, fetchRouteParamsLocation } from '@/utils'
|
||||||
import { PreviewScaleEnum } from '@/enums/styleEnum'
|
import { PreviewScaleEnum } from '@/enums/styleEnum'
|
||||||
import { ResultEnum } from '@/enums/httpEnum'
|
|
||||||
import { icon } from '@/plugins'
|
import { icon } from '@/plugins'
|
||||||
import { uploadFile } from '@/api/path'
|
import { uploadProjectImage } from '@/api/projectFiles'
|
||||||
import FtsUpload from '@/api/fts'
|
|
||||||
|
|
||||||
const { ColorPaletteIcon } = icon.ionicons5
|
const { ColorPaletteIcon } = icon.ionicons5
|
||||||
const { ScaleIcon, FitToScreenIcon, FitToHeightIcon, FitToWidthIcon } = icon.carbon
|
const { ScaleIcon, FitToScreenIcon, FitToHeightIcon, FitToWidthIcon } = icon.carbon
|
||||||
|
|
||||||
const chartEditStore = useChartEditStore()
|
const chartEditStore = useChartEditStore()
|
||||||
const systemStore = useSystemStore()
|
|
||||||
const canvasConfig = chartEditStore.getEditCanvasConfig
|
const canvasConfig = chartEditStore.getEditCanvasConfig
|
||||||
const editCanvas = chartEditStore.getEditCanvas
|
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('添加图片失败，请稍后重试！')
|
||||||
// 修改名称
|
|
||||||
// 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
|
return
|
||||||
}
|
}
|
||||||
window['$message'].error('添加图片失败，请稍后重试！')
|
|
||||||
} else {
|
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('添加图片失败，请稍后重试！')
|
window['$message'].error('添加图片失败，请稍后重试！')
|
||||||
}
|
}
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 选择适配方式
|
// 选择适配方式
|
||||||
|
|||||||
@@ -5,7 +5,6 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
|
|||||||
import { EditCanvasTypeEnum, ChartEditStoreEnum, ProjectInfoEnum, ChartEditStorage, EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
|
import { EditCanvasTypeEnum, ChartEditStoreEnum, ProjectInfoEnum, ChartEditStorage, EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
|
||||||
import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
|
import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
|
||||||
import { StylesSetting } from '@/components/Pages/ChartItemSetting'
|
import { StylesSetting } from '@/components/Pages/ChartItemSetting'
|
||||||
import { useSystemStore } from '@/store/modules/systemStore/systemStore'
|
|
||||||
import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
|
import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
|
||||||
import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
|
import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
|
||||||
import { fetchChartComponent, fetchConfigComponent, createComponent } from '@/packages/index'
|
import { fetchChartComponent, fetchConfigComponent, createComponent } from '@/packages/index'
|
||||||
@@ -14,8 +13,8 @@ import throttle from 'lodash/throttle'
|
|||||||
// 接口状态
|
// 接口状态
|
||||||
import { ResultEnum } from '@/enums/httpEnum'
|
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 { SyncEnum } from '@/enums/editPageEnum'
|
||||||
import { CreateComponentType, CreateComponentGroupType, ConfigType } from '@/packages/index.d'
|
import { CreateComponentType, CreateComponentGroupType, ConfigType } from '@/packages/index.d'
|
||||||
@@ -102,7 +101,6 @@ const componentMerge = (newObject: any, sources: any, notComponent = false) => {
|
|||||||
export const useSync = () => {
|
export const useSync = () => {
|
||||||
const chartEditStore = useChartEditStore()
|
const chartEditStore = useChartEditStore()
|
||||||
const chartHistoryStore = useChartHistoryStore()
|
const chartHistoryStore = useChartHistoryStore()
|
||||||
const systemStore = useSystemStore()
|
|
||||||
const chartLayoutStore = useChartLayoutStore()
|
const chartLayoutStore = useChartLayoutStore()
|
||||||
/**
|
/**
|
||||||
* * 组件动态注册
|
* * 组件动态注册
|
||||||
@@ -317,22 +315,9 @@ export const useSync = () => {
|
|||||||
range.style.backgroundColor = originalBgColor
|
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) {
|
} catch (e) {
|
||||||
console.log(e)
|
console.log(e)
|
||||||
|
|||||||
Reference in New Issue
Block a user