Merge branch 'main' into zouyf_dev
This commit is contained in:
commit
4ffe428523
|
|
@ -68,6 +68,7 @@
|
|||
"less": "^4.2.0",
|
||||
"less-loader": "^7.3.0",
|
||||
"lodash": "^4.17.21",
|
||||
"markmap-lib": "^0.18.8",
|
||||
"mitt": "^3.0.1",
|
||||
"nanoid": "^5.0.7",
|
||||
"node-addon-api": "^8.1.0",
|
||||
|
|
@ -102,6 +103,7 @@
|
|||
"vue-cropper": "1.0.3",
|
||||
"vue-qr": "^4.0.9",
|
||||
"vue-router": "^4.4.0",
|
||||
"vue3-mindmap": "^0.5.12",
|
||||
"vuedraggable": "^4.1.0",
|
||||
"whiteboard_lyc": "^0.1.3",
|
||||
"xgplayer": "^3.0.19",
|
||||
|
|
@ -139,4 +141,4 @@
|
|||
"vue-tsc": "^1.8.25",
|
||||
"windicss": "^3.5.6"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -452,6 +452,27 @@ export default async function ({ app, shell, BrowserWindow, ipcMain }) {
|
|||
})
|
||||
})
|
||||
|
||||
ipcMain.on('export-img64-file', function (event, {base64, name}) {
|
||||
name = name || '思维导图'
|
||||
const parts = base64.split(';base64,');
|
||||
const contentType = parts[0].split(':')[1];
|
||||
const extension = contentType.split('/')[1];
|
||||
const data = Buffer.from(parts[1], 'base64');
|
||||
|
||||
dialog.showSaveDialog({
|
||||
title: '保存图片',
|
||||
defaultPath: path.join(app.getPath('downloads'), `${name}.${extension}`),
|
||||
filters: [
|
||||
{ name: 'Image Files', extensions: [extension] }
|
||||
]
|
||||
}).then(result => {
|
||||
if (!result.canceled) {
|
||||
fs.writeFileSync(result.filePath, data);
|
||||
event.reply('export-img64-file-reply')
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
/*导出文件*/
|
||||
function exportFile(list, callback) {
|
||||
let win = BrowserWindow.getFocusedWindow()
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 420 B |
Binary file not shown.
|
After Width: | Height: | Size: 683 B |
Binary file not shown.
|
After Width: | Height: | Size: 422 B |
Binary file not shown.
|
After Width: | Height: | Size: 509 B |
Binary file not shown.
|
After Width: | Height: | Size: 295 B |
Binary file not shown.
|
After Width: | Height: | Size: 289 B |
Binary file not shown.
|
After Width: | Height: | Size: 738 B |
Binary file not shown.
|
After Width: | Height: | Size: 598 B |
Binary file not shown.
|
After Width: | Height: | Size: 674 B |
|
|
@ -1,6 +1,8 @@
|
|||
import { ref } from 'vue'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { parse, type Shape, type Element, type ChartItem } from 'pptxtojson'
|
||||
// import { parse, type Shape, type Element, type ChartItem } from 'pptxtojson'
|
||||
// import { parse, utils, fill as fillUtil } from '@/plugins/pptTojson'
|
||||
import { parse, fill as fillUtil, type Shape, type Element, type ChartItem } from '@/plugins/pptTojson'
|
||||
import { nanoid } from 'nanoid'
|
||||
import { useSlidesStore } from '../store'
|
||||
import { decrypt } from '../utils/crypto'
|
||||
|
|
@ -9,6 +11,7 @@ import useAddSlidesOrElements from '../hooks/useAddSlidesOrElements'
|
|||
import useSlideHandler from '../hooks/useSlideHandler'
|
||||
import message from '../utils/message'
|
||||
import { getSvgPathRange } from '../utils/svgPathParser'
|
||||
import { calculatePathDimensions } from '@/utils/ppt/svgUtils'
|
||||
import type {
|
||||
Slide,
|
||||
TableCellStyle,
|
||||
|
|
@ -75,57 +78,18 @@ const parseLineElement = (el: Shape) => {
|
|||
|
||||
return data
|
||||
}
|
||||
export default () => {
|
||||
|
||||
const exporting = ref(false)
|
||||
|
||||
// 导入pptist文件
|
||||
const importSpecificFile = (files: FileList, cover = false) => {
|
||||
const file = files[0]
|
||||
|
||||
const reader = new FileReader()
|
||||
reader.addEventListener('load', () => {
|
||||
try {
|
||||
const slides = JSON.parse(decrypt(reader.result as string))
|
||||
if (cover) {
|
||||
slidesStore.updateSlideIndex(0)
|
||||
slidesStore.setSlides(slides)
|
||||
}
|
||||
else if (isEmptySlide.value) slidesStore.setSlides(slides)
|
||||
else addSlidesFromData(slides)
|
||||
// PPT json二次加工处理
|
||||
const parsePptJsonSlides = (slides: Slide[]|any, zip) => {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
try {
|
||||
const shapeList: ShapePoolItem[] = []
|
||||
for (const item of SHAPE_LIST) {
|
||||
shapeList.push(...item.children)
|
||||
}
|
||||
catch {
|
||||
message.error('无法正确读取 / 解析该文件')
|
||||
}
|
||||
})
|
||||
reader.readAsText(file)
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 导入PPTX文件
|
||||
const importPPTXFile = (files: FileList) => {
|
||||
const file = files[0]
|
||||
if (!file) return
|
||||
|
||||
exporting.value = true
|
||||
|
||||
const shapeList: ShapePoolItem[] = []
|
||||
for (const item of SHAPE_LIST) {
|
||||
shapeList.push(...item.children)
|
||||
}
|
||||
|
||||
const reader = new FileReader()
|
||||
reader.onload = async e => {
|
||||
const json = await parse(e.target!.result as ArrayBuffer)
|
||||
|
||||
const ratio = 96 / 72
|
||||
const width = json.size.width
|
||||
|
||||
slidesStore.setViewportSize(width * ratio)
|
||||
|
||||
const slides: Slide[] = []
|
||||
for (const item of json.slides) {
|
||||
const newSlides: Slide[] = []
|
||||
for (const item of slides) {
|
||||
const { type, value } = item.fill
|
||||
let background: SlideBackground
|
||||
if (type === 'image') {
|
||||
|
|
@ -156,20 +120,20 @@ export default () => {
|
|||
color: value,
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const slide: Slide = {
|
||||
id: nanoid(10),
|
||||
elements: [],
|
||||
background,
|
||||
}
|
||||
|
||||
const parseElements = (elements: Element[]) => {
|
||||
|
||||
const parseElements = async (elements: Element[]) => {
|
||||
for (const el of elements) {
|
||||
const originWidth = el.width || 1
|
||||
const originHeight = el.height || 1
|
||||
const originLeft = el.left
|
||||
const originTop = el.top
|
||||
|
||||
|
||||
el.width = el.width * ratio
|
||||
el.height = el.height * ratio
|
||||
el.left = el.left * ratio
|
||||
|
|
@ -219,6 +183,7 @@ export default () => {
|
|||
rotate: el.rotate,
|
||||
flipH: el.isFlipH,
|
||||
flipV: el.isFlipV,
|
||||
zipPath: el.zipPath,
|
||||
})
|
||||
}
|
||||
else if (el.type === 'audio') {
|
||||
|
|
@ -235,6 +200,7 @@ export default () => {
|
|||
color: theme.value.themeColor,
|
||||
loop: false,
|
||||
autoplay: false,
|
||||
zipPath: el.zipPath,
|
||||
})
|
||||
}
|
||||
else if (el.type === 'video') {
|
||||
|
|
@ -248,6 +214,7 @@ export default () => {
|
|||
top: el.top,
|
||||
rotate: 0,
|
||||
autoplay: false,
|
||||
zipPath: el.zipPath,
|
||||
})
|
||||
}
|
||||
else if (el.type === 'shape') {
|
||||
|
|
@ -257,7 +224,7 @@ export default () => {
|
|||
}
|
||||
else {
|
||||
const shape = shapeList.find(item => item.pptxShapeType === el.shapType)
|
||||
|
||||
|
||||
const vAlignMap: { [key: string]: ShapeTextAlign } = {
|
||||
'mid': 'middle',
|
||||
'down': 'bottom',
|
||||
|
|
@ -325,7 +292,35 @@ export default () => {
|
|||
element.viewBox = [maxX || originWidth, maxY || originHeight]
|
||||
}
|
||||
}
|
||||
|
||||
// auth: zdg
|
||||
if (el.fill) {
|
||||
const { type, ...opt } = el.fill
|
||||
if (type === 'gradient') { // 线性渐变色
|
||||
element.gradient = {
|
||||
type: 'linear',
|
||||
colors: opt.colors.map(item => ({
|
||||
...item,
|
||||
pos: parseInt(item.pos),
|
||||
})),
|
||||
rotate: opt.rot,
|
||||
}
|
||||
} else if (type == 'image') { // 背景图填充
|
||||
const pathPos = calculatePathDimensions(element.path)
|
||||
const url = opt.picBase64 || (!!zip ? await fillUtil.getPicFillBase64(opt.zipPath, zip) : '')
|
||||
element.gradient = {
|
||||
type: 'image',
|
||||
image: {
|
||||
src: url,
|
||||
width: opt.w||el.width,
|
||||
height: opt.h||el.height,
|
||||
path_W: Math.round(pathPos.width), // 获取path 的宽高
|
||||
path_h: Math.round(pathPos.height), // 获取path 的宽高
|
||||
...opt
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (element.path) slide.elements.push(element)
|
||||
}
|
||||
}
|
||||
|
|
@ -342,17 +337,17 @@ export default () => {
|
|||
const rowCells: TableCell[] = []
|
||||
for (let j = 0; j < col; j++) {
|
||||
const cellData = el.data[i][j]
|
||||
|
||||
|
||||
let textDiv: HTMLDivElement | null = document.createElement('div')
|
||||
textDiv.innerHTML = cellData.text
|
||||
const p = textDiv.querySelector('p')
|
||||
const align = p?.style.textAlign || 'left'
|
||||
|
||||
|
||||
const span = textDiv.querySelector('span')
|
||||
const fontsize = span?.style.fontSize ? (parseInt(span?.style.fontSize) * ratio).toFixed(1) + 'px' : ''
|
||||
const fontname = span?.style.fontFamily || ''
|
||||
const color = span?.style.color || cellData.fontColor
|
||||
|
||||
|
||||
rowCells.push({
|
||||
id: nanoid(10),
|
||||
colspan: cellData.colSpan || 1,
|
||||
|
|
@ -409,11 +404,11 @@ export default () => {
|
|||
legends = data.map(item => item.key)
|
||||
series = data.map(item => item.values.map(v => v.y))
|
||||
}
|
||||
|
||||
|
||||
const options: ChartOptions = {}
|
||||
|
||||
let chartType: ChartType = 'bar'
|
||||
|
||||
|
||||
switch (el.chartType) {
|
||||
case 'barChart':
|
||||
case 'bar3DChart':
|
||||
|
|
@ -468,18 +463,91 @@ export default () => {
|
|||
})
|
||||
}
|
||||
else if (el.type === 'group' || el.type === 'diagram') {
|
||||
const elements = el.elements.map(_el => ({
|
||||
..._el,
|
||||
left: _el.left + originLeft,
|
||||
top: _el.top + originTop,
|
||||
}))
|
||||
parseElements(elements)
|
||||
const elements = el.elements.map(_el => {
|
||||
const isGroup = el.type === 'group' // 子级是否为分组
|
||||
const isFlipH = !!(_el.isFlipH ^ el.isFlipH) // 水平翻转(分组有值进行异或运算)
|
||||
const isFlipV = !!(_el.isFlipV ^ el.isFlipV) // 垂直翻转(分组有值进行异或运算)
|
||||
const isPleft = el.isFlipH_def // 是否父级翻转-改变子元素坐标left
|
||||
const isPtop = el.isFlipV_def // 是否父级翻转-改变子元素坐标top
|
||||
const left = originLeft + (isPleft ? originWidth - _el.left - _el.width : _el.left)
|
||||
const top = originTop + (isPtop ? originHeight - _el.top - _el.height : _el.top)
|
||||
return {
|
||||
..._el,
|
||||
left,
|
||||
top,
|
||||
isFlipH,
|
||||
isFlipV,
|
||||
isFlipH_def: _el.isFlipH, // 保留默认
|
||||
isFlipV_def: _el.isFlipV, // 保留默认
|
||||
}
|
||||
})
|
||||
await parseElements(elements)
|
||||
}
|
||||
}
|
||||
}
|
||||
parseElements(item.elements)
|
||||
slides.push(slide)
|
||||
// 设置默认翻转默认属性
|
||||
item.elements.forEach(o => { o.isFlipH_def = o.isFlipH; o.isFlipV_def = o.isFlipV })
|
||||
item.bgElements.forEach(o => { o.isFlipH_def = o.isFlipH; o.isFlipV_def = o.isFlipV })
|
||||
item.bgElements.length && await parseElements(item.bgElements) // 加载当前幻灯片对应的母版
|
||||
item.elements.length && await parseElements(item.elements) // 加载当前幻灯片
|
||||
newSlides.push(slide)
|
||||
}
|
||||
resolve(newSlides)
|
||||
} catch (error) {
|
||||
reject(error)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export default () => {
|
||||
|
||||
const exporting = ref(false)
|
||||
|
||||
// 导入pptist文件
|
||||
const importSpecificFile = (files: FileList, cover = false) => {
|
||||
const file = files[0]
|
||||
|
||||
const reader = new FileReader()
|
||||
reader.addEventListener('load', () => {
|
||||
try {
|
||||
const slides = JSON.parse(decrypt(reader.result as string))
|
||||
if (cover) {
|
||||
slidesStore.updateSlideIndex(0)
|
||||
slidesStore.setSlides(slides)
|
||||
}
|
||||
else if (isEmptySlide.value) slidesStore.setSlides(slides)
|
||||
else addSlidesFromData(slides)
|
||||
}
|
||||
catch {
|
||||
message.error('无法正确读取 / 解析该文件')
|
||||
}
|
||||
})
|
||||
reader.readAsText(file)
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 导入PPTX文件
|
||||
const importPPTXFile = (files: FileList) => {
|
||||
const file = files[0]
|
||||
if (!file) return
|
||||
|
||||
exporting.value = true
|
||||
|
||||
const shapeList: ShapePoolItem[] = []
|
||||
for (const item of SHAPE_LIST) {
|
||||
shapeList.push(...item.children)
|
||||
}
|
||||
|
||||
const reader = new FileReader()
|
||||
reader.onload = async e => {
|
||||
const json = await parse(e.target!.result as ArrayBuffer)
|
||||
|
||||
const ratio = 96 / 72
|
||||
const width = json.size.width
|
||||
slidesStore.setViewportSize(width * ratio)
|
||||
// json数据二次加工
|
||||
const slides = await parsePptJsonSlides(json.slides, json.zip)
|
||||
slidesStore.updateSlideIndex(0)
|
||||
slidesStore.setSlides(slides)
|
||||
exporting.value = false
|
||||
|
|
@ -539,365 +607,7 @@ export const PPTXFileToJson = (data: File|ArrayBuffer) => {
|
|||
resData.def = json // 保留原始数据
|
||||
resData.width = width * ratio
|
||||
resData.ratio = slidesStore.viewportRatio
|
||||
|
||||
const slides: Slide[] = []
|
||||
for (const item of json.slides) {
|
||||
const { type, value } = item.fill
|
||||
let background: SlideBackground
|
||||
if (type === 'image') {
|
||||
background = {
|
||||
type: 'image',
|
||||
image: {
|
||||
src: value.picBase64,
|
||||
size: 'cover',
|
||||
},
|
||||
}
|
||||
}
|
||||
else if (type === 'gradient') {
|
||||
background = {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
type: 'linear',
|
||||
colors: value.colors.map(item => ({
|
||||
...item,
|
||||
pos: parseInt(item.pos),
|
||||
})),
|
||||
rotate: value.rot,
|
||||
},
|
||||
}
|
||||
}
|
||||
else {
|
||||
background = {
|
||||
type: 'solid',
|
||||
color: value,
|
||||
}
|
||||
}
|
||||
|
||||
const slide: Slide = {
|
||||
id: nanoid(10),
|
||||
elements: [],
|
||||
background,
|
||||
}
|
||||
|
||||
const parseElements = (elements: Element[]) => {
|
||||
for (const el of elements) {
|
||||
const originWidth = el.width || 1
|
||||
const originHeight = el.height || 1
|
||||
const originLeft = el.left
|
||||
const originTop = el.top
|
||||
|
||||
el.width = el.width * ratio
|
||||
el.height = el.height * ratio
|
||||
el.left = el.left * ratio
|
||||
el.top = el.top * ratio
|
||||
|
||||
if (el.type === 'text') {
|
||||
const textEl: PPTTextElement = {
|
||||
type: 'text',
|
||||
id: nanoid(10),
|
||||
width: el.width,
|
||||
height: el.height,
|
||||
left: el.left,
|
||||
top: el.top,
|
||||
rotate: el.rotate,
|
||||
defaultFontName: theme.value.fontName,
|
||||
defaultColor: theme.value.fontColor,
|
||||
content: convertFontSizePtToPx(el.content, ratio),
|
||||
lineHeight: 1,
|
||||
outline: {
|
||||
color: el.borderColor,
|
||||
width: el.borderWidth,
|
||||
style: el.borderType,
|
||||
},
|
||||
fill: el.fillColor,
|
||||
vertical: el.isVertical,
|
||||
}
|
||||
if (el.shadow) {
|
||||
textEl.shadow = {
|
||||
h: el.shadow.h * ratio,
|
||||
v: el.shadow.v * ratio,
|
||||
blur: el.shadow.blur * ratio,
|
||||
color: el.shadow.color,
|
||||
}
|
||||
}
|
||||
slide.elements.push(textEl)
|
||||
}
|
||||
else if (el.type === 'image') {
|
||||
slide.elements.push({
|
||||
type: 'image',
|
||||
id: nanoid(10),
|
||||
src: el.src,
|
||||
width: el.width,
|
||||
height: el.height,
|
||||
left: el.left,
|
||||
top: el.top,
|
||||
fixedRatio: true,
|
||||
rotate: el.rotate,
|
||||
flipH: el.isFlipH,
|
||||
flipV: el.isFlipV,
|
||||
})
|
||||
}
|
||||
else if (el.type === 'audio') {
|
||||
slide.elements.push({
|
||||
type: 'audio',
|
||||
id: nanoid(10),
|
||||
src: el.blob,
|
||||
width: el.width,
|
||||
height: el.height,
|
||||
left: el.left,
|
||||
top: el.top,
|
||||
rotate: 0,
|
||||
fixedRatio: false,
|
||||
color: theme.value.themeColor,
|
||||
loop: false,
|
||||
autoplay: false,
|
||||
})
|
||||
}
|
||||
else if (el.type === 'video') {
|
||||
slide.elements.push({
|
||||
type: 'video',
|
||||
id: nanoid(10),
|
||||
src: (el.blob || el.src)!,
|
||||
width: el.width,
|
||||
height: el.height,
|
||||
left: el.left,
|
||||
top: el.top,
|
||||
rotate: 0,
|
||||
autoplay: false,
|
||||
})
|
||||
}
|
||||
else if (el.type === 'shape') {
|
||||
if (el.shapType === 'line' || /Connector/.test(el.shapType)) {
|
||||
// 从返回对象中解构出 xx 函数并调用
|
||||
const lineElement = parseLineElement(el)
|
||||
slide.elements.push(lineElement)
|
||||
}
|
||||
else {
|
||||
const shape = shapeList.find(item => item.pptxShapeType === el.shapType)
|
||||
|
||||
const vAlignMap: { [key: string]: ShapeTextAlign } = {
|
||||
'mid': 'middle',
|
||||
'down': 'bottom',
|
||||
'up': 'top',
|
||||
}
|
||||
|
||||
const element: PPTShapeElement = {
|
||||
type: 'shape',
|
||||
id: nanoid(10),
|
||||
width: el.width,
|
||||
height: el.height,
|
||||
left: el.left,
|
||||
top: el.top,
|
||||
viewBox: [200, 200],
|
||||
path: 'M 0 0 L 200 0 L 200 200 L 0 200 Z',
|
||||
fill: el.fillColor || 'none',
|
||||
fixedRatio: false,
|
||||
rotate: el.rotate,
|
||||
outline: {
|
||||
color: el.borderColor,
|
||||
width: el.borderWidth,
|
||||
style: el.borderType,
|
||||
},
|
||||
text: {
|
||||
content: convertFontSizePtToPx(el.content, ratio),
|
||||
defaultFontName: theme.value.fontName,
|
||||
defaultColor: theme.value.fontColor,
|
||||
align: vAlignMap[el.vAlign] || 'middle',
|
||||
},
|
||||
flipH: el.isFlipH,
|
||||
flipV: el.isFlipV,
|
||||
}
|
||||
if (el.shadow) {
|
||||
element.shadow = {
|
||||
h: el.shadow.h * ratio,
|
||||
v: el.shadow.v * ratio,
|
||||
blur: el.shadow.blur * ratio,
|
||||
color: el.shadow.color,
|
||||
}
|
||||
}
|
||||
|
||||
if (shape) {
|
||||
element.path = shape.path
|
||||
element.viewBox = shape.viewBox
|
||||
|
||||
if (shape.pathFormula) {
|
||||
element.pathFormula = shape.pathFormula
|
||||
element.viewBox = [el.width, el.height]
|
||||
|
||||
const pathFormula = SHAPE_PATH_FORMULAS[shape.pathFormula]
|
||||
if ('editable' in pathFormula && pathFormula.editable) {
|
||||
element.path = pathFormula.formula(el.width, el.height, pathFormula.defaultValue)
|
||||
element.keypoints = pathFormula.defaultValue
|
||||
}
|
||||
else element.path = pathFormula.formula(el.width, el.height)
|
||||
}
|
||||
}
|
||||
if (el.shapType === 'custom') {
|
||||
if (el.path!.indexOf('NaN') !== -1) element.path = ''
|
||||
else {
|
||||
element.special = true
|
||||
element.path = el.path!
|
||||
|
||||
const { maxX, maxY } = getSvgPathRange(element.path)
|
||||
element.viewBox = [maxX || originWidth, maxY || originHeight]
|
||||
}
|
||||
}
|
||||
|
||||
if (element.path) slide.elements.push(element)
|
||||
}
|
||||
}
|
||||
else if (el.type === 'table') {
|
||||
const row = el.data.length
|
||||
const col = el.data[0].length
|
||||
|
||||
const style: TableCellStyle = {
|
||||
fontname: theme.value.fontName,
|
||||
color: theme.value.fontColor,
|
||||
}
|
||||
const data: TableCell[][] = []
|
||||
for (let i = 0; i < row; i++) {
|
||||
const rowCells: TableCell[] = []
|
||||
for (let j = 0; j < col; j++) {
|
||||
const cellData = el.data[i][j]
|
||||
|
||||
let textDiv: HTMLDivElement | null = document.createElement('div')
|
||||
textDiv.innerHTML = cellData.text
|
||||
const p = textDiv.querySelector('p')
|
||||
const align = p?.style.textAlign || 'left'
|
||||
|
||||
const span = textDiv.querySelector('span')
|
||||
const fontsize = span?.style.fontSize ? (parseInt(span?.style.fontSize) * ratio).toFixed(1) + 'px' : ''
|
||||
const fontname = span?.style.fontFamily || ''
|
||||
const color = span?.style.color || cellData.fontColor
|
||||
|
||||
rowCells.push({
|
||||
id: nanoid(10),
|
||||
colspan: cellData.colSpan || 1,
|
||||
rowspan: cellData.rowSpan || 1,
|
||||
text: textDiv.innerText,
|
||||
style: {
|
||||
...style,
|
||||
align: ['left', 'right', 'center'].includes(align) ? (align as 'left' | 'right' | 'center') : 'left',
|
||||
fontsize,
|
||||
fontname,
|
||||
color,
|
||||
bold: cellData.fontBold,
|
||||
backcolor: cellData.fillColor,
|
||||
},
|
||||
})
|
||||
textDiv = null
|
||||
}
|
||||
data.push(rowCells)
|
||||
}
|
||||
|
||||
const colWidths: number[] = new Array(col).fill(1 / col)
|
||||
|
||||
slide.elements.push({
|
||||
type: 'table',
|
||||
id: nanoid(10),
|
||||
width: el.width,
|
||||
height: el.height,
|
||||
left: el.left,
|
||||
top: el.top,
|
||||
colWidths,
|
||||
rotate: 0,
|
||||
data,
|
||||
outline: {
|
||||
width: el.borderWidth || 2,
|
||||
style: el.borderType,
|
||||
color: el.borderColor || '#eeece1',
|
||||
},
|
||||
cellMinHeight: 36,
|
||||
})
|
||||
}
|
||||
else if (el.type === 'chart') {
|
||||
let labels: string[]
|
||||
let legends: string[]
|
||||
let series: number[][]
|
||||
|
||||
if (el.chartType === 'scatterChart' || el.chartType === 'bubbleChart') {
|
||||
labels = el.data[0].map((item, index) => `坐标${index + 1}`)
|
||||
legends = ['X', 'Y']
|
||||
series = el.data
|
||||
}
|
||||
else {
|
||||
const data = el.data as ChartItem[]
|
||||
labels = Object.values(data[0].xlabels)
|
||||
legends = data.map(item => item.key)
|
||||
series = data.map(item => item.values.map(v => v.y))
|
||||
}
|
||||
|
||||
const options: ChartOptions = {}
|
||||
|
||||
let chartType: ChartType = 'bar'
|
||||
|
||||
switch (el.chartType) {
|
||||
case 'barChart':
|
||||
case 'bar3DChart':
|
||||
chartType = 'bar'
|
||||
if (el.barDir === 'bar') chartType = 'column'
|
||||
if (el.grouping === 'stacked' || el.grouping === 'percentStacked') options.stack = true
|
||||
break
|
||||
case 'lineChart':
|
||||
case 'line3DChart':
|
||||
if (el.grouping === 'stacked' || el.grouping === 'percentStacked') options.stack = true
|
||||
chartType = 'line'
|
||||
break
|
||||
case 'areaChart':
|
||||
case 'area3DChart':
|
||||
if (el.grouping === 'stacked' || el.grouping === 'percentStacked') options.stack = true
|
||||
chartType = 'area'
|
||||
break
|
||||
case 'scatterChart':
|
||||
case 'bubbleChart':
|
||||
chartType = 'scatter'
|
||||
break
|
||||
case 'pieChart':
|
||||
case 'pie3DChart':
|
||||
chartType = 'pie'
|
||||
break
|
||||
case 'radarChart':
|
||||
chartType = 'radar'
|
||||
break
|
||||
case 'doughnutChart':
|
||||
chartType = 'ring'
|
||||
break
|
||||
default:
|
||||
}
|
||||
|
||||
slide.elements.push({
|
||||
type: 'chart',
|
||||
id: nanoid(10),
|
||||
chartType: chartType,
|
||||
width: el.width,
|
||||
height: el.height,
|
||||
left: el.left,
|
||||
top: el.top,
|
||||
rotate: 0,
|
||||
themeColors: [theme.value.themeColor],
|
||||
textColor: theme.value.fontColor,
|
||||
data: {
|
||||
labels,
|
||||
legends,
|
||||
series,
|
||||
},
|
||||
options,
|
||||
})
|
||||
}
|
||||
else if (el.type === 'group' || el.type === 'diagram') {
|
||||
const elements = el.elements.map(_el => ({
|
||||
..._el,
|
||||
left: _el.left + originLeft,
|
||||
top: _el.top + originTop,
|
||||
}))
|
||||
parseElements(elements)
|
||||
}
|
||||
}
|
||||
}
|
||||
parseElements(item.elements)
|
||||
slides.push(slide)
|
||||
}
|
||||
resData.slides = slides
|
||||
resData.slides = await parsePptJsonSlides(json.slides, json.zip)
|
||||
resolve(resData)
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ export const enum ElementTypes {
|
|||
*
|
||||
* rotate: 渐变角度（线性渐变）
|
||||
*/
|
||||
export type GradientType = 'linear' | 'radial'
|
||||
export type GradientType = 'linear' | 'radial' | 'image'
|
||||
export type GradientColor = {
|
||||
pos: number
|
||||
color: string
|
||||
|
|
|
|||
|
|
@ -46,11 +46,12 @@
|
|||
:options="[
|
||||
{ label: '线性渐变', value: 'linear' },
|
||||
{ label: '径向渐变', value: 'radial' },
|
||||
{ label: '背景图', value: 'image' },
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<template v-if="fillType === 'gradient'">
|
||||
<template v-if="fillType === 'gradient' && gradient.type !== 'image'">
|
||||
<div class="row">
|
||||
<GradientBar
|
||||
:value="gradient.colors"
|
||||
|
|
@ -206,6 +207,13 @@ const updateFillType = (type: 'gradient' | 'fill') => {
|
|||
const updateGradient = (gradientProps: Partial<Gradient>) => {
|
||||
if (!gradient.value) return
|
||||
const _gradient = { ...gradient.value, ...gradientProps }
|
||||
if (!_gradient.colors) {
|
||||
_gradient.colors = [
|
||||
{ pos: 0, color: '#fff' },
|
||||
{ pos: 100, color: '#fff' },
|
||||
]
|
||||
_gradient.rotate = 0
|
||||
}
|
||||
updateElement({ gradient: _gradient })
|
||||
}
|
||||
const updateGradientColors = (color: string) => {
|
||||
|
|
|
|||
|
|
@ -33,6 +33,8 @@
|
|||
:type="elementInfo.gradient.type"
|
||||
:colors="elementInfo.gradient.colors"
|
||||
:rotate="elementInfo.gradient.rotate"
|
||||
:image="elementInfo.gradient.image"
|
||||
:info="elementInfo"
|
||||
/>
|
||||
</defs>
|
||||
<g
|
||||
|
|
|
|||
|
|
@ -1,6 +1,25 @@
|
|||
<template>
|
||||
<!-- auth:zdg 增加图片 -->
|
||||
<pattern
|
||||
v-if="type === 'image'"
|
||||
:id="id"
|
||||
:x="image?.stretch?.l || 0"
|
||||
:y="image?.stretch?.t || 0"
|
||||
:width="image?.path_W||'100%'"
|
||||
:height="image?.path_h||'100%'"
|
||||
:style="image.rotWithShape==0?'transform:rotate('+(-info.rotate)+'deg)' : ''"
|
||||
patternUnits="userSpaceOnUse">
|
||||
<image
|
||||
:width="image?.path_W||200"
|
||||
:height="image?.path_h||200"
|
||||
:href="image.src"
|
||||
:opacity="image.opacity"
|
||||
preserveAspectRatio="none"
|
||||
/>
|
||||
</pattern>
|
||||
<!-- auth:zdg 默认 线性渐变 -->
|
||||
<linearGradient
|
||||
v-if="type === 'linear'"
|
||||
v-else-if="type === 'linear'"
|
||||
:id="id"
|
||||
x1="0%"
|
||||
y1="0%"
|
||||
|
|
@ -10,20 +29,35 @@
|
|||
>
|
||||
<stop v-for="(item, index) in colors" :key="index" :offset="`${item.pos}%`" :stop-color="item.color" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- auth:zdg 默认 径向渐变 -->
|
||||
<radialGradient :id="id" v-else>
|
||||
<stop v-for="(item, index) in colors" :key="index" :offset="`${item.pos}%`" :stop-color="item.color" />
|
||||
</radialGradient>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { GradientColor, GradientType } from '../../../../types/slides'
|
||||
|
||||
withDefaults(defineProps<{
|
||||
import type { GradientColor, GradientType, PPTShapeElement } from '../../../../types/slides'
|
||||
interface ImageSvg {
|
||||
src: string,
|
||||
width: number,
|
||||
height: number,
|
||||
zipPath: string,
|
||||
opacity: number,
|
||||
rotWithShape: string,
|
||||
stretch?: {
|
||||
l?: number,
|
||||
t?: number,
|
||||
r?: number,
|
||||
b?: number
|
||||
}
|
||||
}
|
||||
const data = withDefaults(defineProps<{
|
||||
id: string
|
||||
type: GradientType
|
||||
colors: GradientColor[]
|
||||
rotate?: number
|
||||
colors?: GradientColor[]
|
||||
rotate?: number,
|
||||
image?: ImageSvg,
|
||||
info?: PPTShapeElement
|
||||
}>(), {
|
||||
rotate: 0,
|
||||
})
|
||||
|
|
|
|||
|
|
@ -42,6 +42,8 @@
|
|||
:type="elementInfo.gradient.type"
|
||||
:colors="elementInfo.gradient.colors"
|
||||
:rotate="elementInfo.gradient.rotate"
|
||||
:image="elementInfo.gradient.image"
|
||||
:info="elementInfo"
|
||||
/>
|
||||
</defs>
|
||||
<g
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 创建对话
|
||||
export const createChart = ({ headers, data }) => {
|
||||
export const createChart = () => {
|
||||
return request({
|
||||
url: '/qf/createChart',
|
||||
method: 'post',
|
||||
headers,
|
||||
data,
|
||||
})
|
||||
}
|
||||
// 大模型对话
|
||||
|
|
|
|||
|
|
@ -29,6 +29,20 @@ export function completion(data) {
|
|||
})
|
||||
}
|
||||
|
||||
// 大模型对话
|
||||
export function modelChat(data) {
|
||||
return axios({
|
||||
url: '/mind/chat',
|
||||
method: 'post',
|
||||
headers: {
|
||||
Authorization: 'Bearer ragflow-IwMDI1MGU2YTU3NjExZWZiNWEzMDI0Mm',
|
||||
'Content-Type': 'application/json',
|
||||
Accept: '*/*'
|
||||
},
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 添加提示词 （系统预设）
|
||||
export function addKeyWords(data) {
|
||||
return request({
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 4723712 */
|
||||
src: url('iconfont.woff2?t=1735483000546') format('woff2'),
|
||||
url('iconfont.woff?t=1735483000546') format('woff'),
|
||||
url('iconfont.ttf?t=1735483000546') format('truetype');
|
||||
src: url('iconfont.woff2?t=1737434703828') format('woff2'),
|
||||
url('iconfont.woff?t=1737434703828') format('woff'),
|
||||
url('iconfont.ttf?t=1737434703828') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
|
|
@ -13,6 +13,10 @@
|
|||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-siweidaotu:before {
|
||||
content: "\e606";
|
||||
}
|
||||
|
||||
.icon-chuangzuo:before {
|
||||
content: "\e6cc";
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -5,6 +5,13 @@
|
|||
"css_prefix_text": "icon-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "11685410",
|
||||
"name": "思维导图",
|
||||
"font_class": "siweidaotu",
|
||||
"unicode": "e606",
|
||||
"unicode_decimal": 58886
|
||||
},
|
||||
{
|
||||
"icon_id": "39170417",
|
||||
"name": "创作",
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -42,7 +42,8 @@ const getFileTypeIcon = () => {
|
|||
airobot: 'icon-jiqirenfushi', // 数字人生成
|
||||
aiimg: 'icon-xiangmuicon_maobishufa', // 文生图片
|
||||
aidraw: 'icon-meishu-F', // 文生连环画
|
||||
aiyinyue: 'icon-yinle' //文生音乐
|
||||
aiyinyue: 'icon-yinle', //文生音乐
|
||||
aiswdt: 'icon-siweidaotu' //思维导图
|
||||
}
|
||||
if (iconObj[name]) {
|
||||
return '#' + iconObj[name]
|
||||
|
|
|
|||
|
|
@ -5,7 +5,11 @@
|
|||
<el-popover ref="popoverRef" placement="right" trigger="hover" popper-class="popoverStyle" :tabindex="999" >
|
||||
<template #reference>
|
||||
<div class="user-info">
|
||||
<el-image class="user-img" :src="img" />
|
||||
<el-image class="user-img" :src="img">
|
||||
<template #error>
|
||||
<img :src="route_path + userStore.user.avatar">
|
||||
</template>
|
||||
</el-image>
|
||||
<span>{{ userStore.user.nickName }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -65,6 +69,7 @@ import {toLinkLeftWeb} from "@/utils/tool"
|
|||
|
||||
const { ipcRenderer } = window.electron || {}
|
||||
const dev_api = ref(import.meta.env.VITE_APP_BASE_API)
|
||||
const route_path = ref(import.meta.env.VITE_APP_BUILD_BASE_PATH)
|
||||
const userStore = useUserStore()
|
||||
const router = useRouter()
|
||||
const currentRoute = ref('')
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
</el-main>
|
||||
</el-container>
|
||||
<Uploader v-if="uploaderStore.uploadList && uploaderStore.uploadList.length > 0" />
|
||||
<AiChart/>
|
||||
<!-- <AiChart/>-->
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -114,8 +114,8 @@ const onBack = () =>{
|
|||
margin-top: -3px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -11,10 +11,9 @@ import 'virtual:windi.css'
|
|||
import request from "@/utils/request";
|
||||
|
||||
//v-md-editor
|
||||
import VMdPreview from '@kangc/v-md-editor/lib/preview';
|
||||
import '@kangc/v-md-editor/lib/style/preview.css';
|
||||
// 引入你所使用的主题 此处以 github 主题为例
|
||||
import githubTheme from '@kangc/v-md-editor/lib/theme/github';
|
||||
import VMdEditor from '@kangc/v-md-editor';
|
||||
import '@kangc/v-md-editor/lib/style/base-editor.css';
|
||||
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
|
||||
import '@kangc/v-md-editor/lib/theme/style/github.css';
|
||||
// highlightjs
|
||||
import hljs from 'highlight.js';
|
||||
|
|
@ -51,7 +50,7 @@ app.config.globalProperties.$requestGetJYW = (url,config)=>{
|
|||
import Icon from '@/AixPPTist/src/plugins/icon'
|
||||
import Directive from '@/AixPPTist/src/plugins/directive'
|
||||
|
||||
VMdPreview.use(githubTheme, {
|
||||
VMdEditor.use(githubTheme, {
|
||||
Hljs: hljs,
|
||||
});
|
||||
|
||||
|
|
@ -93,7 +92,7 @@ app.use(router)
|
|||
.use(Icon)
|
||||
.use(Directive)
|
||||
.use(aiAudio)
|
||||
.use(VMdPreview)
|
||||
.use(VMdEditor)
|
||||
.mount('#app')
|
||||
|
||||
const isStadium = (user) => {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,358 @@
|
|||
// import type { number } from "echarts"
|
||||
|
||||
export interface Shadow {
|
||||
h: number
|
||||
v: number
|
||||
blur: number
|
||||
color: string
|
||||
}
|
||||
|
||||
export interface Shape {
|
||||
type: 'shape'
|
||||
left: number
|
||||
top: number
|
||||
width: number
|
||||
height: number
|
||||
borderColor: string
|
||||
borderWidth: number
|
||||
borderType: 'solid' | 'dashed' | 'dotted'
|
||||
borderStrokeDasharray: string
|
||||
shadow?: Shadow
|
||||
fillColor: string
|
||||
content: string
|
||||
isFlipV: boolean
|
||||
isFlipH: boolean
|
||||
rotate: number
|
||||
shapType: string
|
||||
vAlign: string
|
||||
path?: string
|
||||
name: string
|
||||
}
|
||||
|
||||
export interface Text {
|
||||
type: 'text'
|
||||
left: number
|
||||
top: number
|
||||
width: number
|
||||
height: number
|
||||
borderColor: string
|
||||
borderWidth: number
|
||||
borderType: 'solid' | 'dashed' | 'dotted'
|
||||
borderStrokeDasharray: string
|
||||
shadow?: Shadow
|
||||
fillColor: string
|
||||
isFlipV: boolean
|
||||
isFlipH: boolean
|
||||
isVertical: boolean
|
||||
rotate: number
|
||||
content: string
|
||||
vAlign: string
|
||||
name: string
|
||||
}
|
||||
|
||||
export interface Image {
|
||||
type: 'image'
|
||||
left: number
|
||||
top: number
|
||||
width: number
|
||||
height: number
|
||||
src: string
|
||||
rotate: number
|
||||
isFlipH: boolean
|
||||
isFlipV: boolean
|
||||
}
|
||||
|
||||
export interface TableCell {
|
||||
text: string
|
||||
rowSpan?: number
|
||||
colSpan?: number
|
||||
vMerge?: number
|
||||
hMerge?: number
|
||||
fillColor?: string
|
||||
fontColor?: string
|
||||
fontBold?: boolean
|
||||
}
|
||||
export interface Table {
|
||||
type: 'table'
|
||||
left: number
|
||||
top: number
|
||||
width: number
|
||||
height: number
|
||||
data: TableCell[][]
|
||||
borderColor: string
|
||||
borderWidth: number
|
||||
borderType: 'solid' | 'dashed' | 'dotted'
|
||||
}
|
||||
|
||||
export type ChartType = 'lineChart' |
|
||||
'line3DChart' |
|
||||
'barChart' |
|
||||
'bar3DChart' |
|
||||
'pieChart' |
|
||||
'pie3DChart' |
|
||||
'doughnutChart' |
|
||||
'areaChart' |
|
||||
'area3DChart' |
|
||||
'scatterChart' |
|
||||
'bubbleChart' |
|
||||
'radarChart' |
|
||||
'surfaceChart' |
|
||||
'surface3DChart' |
|
||||
'stockChart'
|
||||
|
||||
export interface ChartValue {
|
||||
x: string
|
||||
y: number
|
||||
}
|
||||
export interface ChartXLabel {
|
||||
[key: string]: string
|
||||
}
|
||||
export interface ChartItem {
|
||||
key: string
|
||||
values: ChartValue[]
|
||||
xlabels: ChartXLabel
|
||||
}
|
||||
export type ScatterChartData = [number[], number[]]
|
||||
export interface CommonChart {
|
||||
type: 'chart'
|
||||
left: number
|
||||
top: number
|
||||
width: number
|
||||
height: number
|
||||
data: ChartItem[]
|
||||
chartType: Exclude<ChartType, 'scatterChart' | 'bubbleChart'>
|
||||
barDir?: 'bar' | 'col'
|
||||
marker?: boolean
|
||||
holeSize?: string
|
||||
grouping?: string
|
||||
style?: string
|
||||
}
|
||||
export interface ScatterChart {
|
||||
type: 'chart'
|
||||
left: number
|
||||
top: number
|
||||
width: number
|
||||
height: number
|
||||
data: ScatterChartData,
|
||||
chartType: 'scatterChart' | 'bubbleChart'
|
||||
}
|
||||
export type Chart = CommonChart | ScatterChart
|
||||
|
||||
export interface Video {
|
||||
type: 'video'
|
||||
left: number
|
||||
top: number
|
||||
width: number
|
||||
height: number
|
||||
blob?: string
|
||||
src?: string
|
||||
}
|
||||
|
||||
export interface Audio {
|
||||
type: 'audio'
|
||||
left: number
|
||||
top: number
|
||||
width: number
|
||||
height: number
|
||||
blob: string
|
||||
}
|
||||
|
||||
export interface Diagram {
|
||||
type: 'diagram'
|
||||
left: number
|
||||
top: number
|
||||
width: number
|
||||
height: number
|
||||
elements: (Shape | Text)[]
|
||||
}
|
||||
|
||||
export interface Math {
|
||||
type: 'math'
|
||||
left: number
|
||||
top: number
|
||||
width: number
|
||||
height: number
|
||||
latex: string
|
||||
}
|
||||
|
||||
export type BaseElement = Shape | Text | Image | Table | Chart | Video | Audio | Diagram | Math
|
||||
|
||||
export interface Group {
|
||||
type: 'group'
|
||||
left: number
|
||||
top: number
|
||||
width: number
|
||||
height: number
|
||||
rotate: number
|
||||
elements: BaseElement[]
|
||||
}
|
||||
export type Element = BaseElement | Group
|
||||
|
||||
export interface SlideColorFill {
|
||||
type: 'color'
|
||||
value: string
|
||||
}
|
||||
|
||||
export interface SlideImageFill {
|
||||
type: 'image'
|
||||
value: {
|
||||
picBase64: string
|
||||
opacity: number
|
||||
}
|
||||
}
|
||||
|
||||
export interface SlideGradientFill {
|
||||
type: 'gradient'
|
||||
value: {
|
||||
rot: number
|
||||
colors: {
|
||||
pos: string
|
||||
color: string
|
||||
}[]
|
||||
}
|
||||
}
|
||||
|
||||
export type SlideFill = SlideColorFill | SlideImageFill | SlideGradientFill
|
||||
|
||||
export interface Slide {
|
||||
fill: SlideFill
|
||||
elements: Element[]
|
||||
note: string
|
||||
}
|
||||
|
||||
export interface Options {
|
||||
slideFactor?: number
|
||||
fontsizeFactor?: number
|
||||
}
|
||||
|
||||
export const parse: (file: ArrayBuffer, options?: Options) => Promise<{
|
||||
slides: Slide[]
|
||||
size: {
|
||||
width: number
|
||||
height: number
|
||||
}
|
||||
}>
|
||||
|
||||
/** zdg: 新内容 */
|
||||
export const align = {
|
||||
getHorizontalAlign?: (t,e,r,n) => string
|
||||
getVerticalAlign?: (t,e,r,n) => string
|
||||
}
|
||||
export const border = {
|
||||
getBorder?: (t,e,r) => string
|
||||
}
|
||||
export const chart = {
|
||||
getChartInfo?: (t) => string
|
||||
}
|
||||
export const color = {
|
||||
applyHueMod?: (t) => string
|
||||
applyLumMod?: (t) => string
|
||||
applyLumOff?: (t) => string
|
||||
applySatMod?: (t) => string
|
||||
applyShade?: (t) => string
|
||||
applyTint?: (t) => string
|
||||
getColorName2Hex?: (t) => string
|
||||
hslToRgb?: (t) => string
|
||||
hueToRgb?: (t) => string
|
||||
}
|
||||
export const fontStyle = {
|
||||
getFontBold?: (t) => string
|
||||
getFontColor?: (t) => string
|
||||
getFontDecoration?: (t) => string
|
||||
getFontDecorationLine?: (t) => string
|
||||
getFontItalic?: (t) => string
|
||||
getFontShadow?: (t) => string
|
||||
getFontSize?: (t) => string
|
||||
getFontSpace?: (t) => string
|
||||
getFontSubscript?: (t) => string
|
||||
getFontType?: (t) => string
|
||||
}
|
||||
export const fill = {
|
||||
getBgGradientFill?: (bgPr, phClr, slideMasterContent, warpObj) => string|object|null
|
||||
getBgPicFill?: (bgPr, sorce, warpObj) => object|null
|
||||
getFillType?: (node) => string
|
||||
getPicFill?: (type, node, warpObj) => string|null|undefined
|
||||
getPicFillBase64?: (zipPath, zipObj) => string|null|undefined
|
||||
getShapeFill?: (node, isSvgMode, warpObj) => object|null
|
||||
getShapeFillBg?: (node, source, warpObj) => object<{zipPath:string,opacity:number}>|null
|
||||
getSlideBackgroundFill?: (warpObj) => object<{type: string, value: string}>
|
||||
getSolidFill?: (solidFill, clrMap, phClr, warpObj) => string
|
||||
}
|
||||
export const math = {
|
||||
findOMath?: (t) => string
|
||||
latexFormart?: (t) => string
|
||||
parseAccent?: (t) => string
|
||||
parseBar?: (t) => string
|
||||
parseBox?: (t) => string
|
||||
parseDelimiter?: (t) => string
|
||||
parseEqArr?: (t) => string
|
||||
parseFraction?: (t) => string
|
||||
parseFunction?: (t) => string
|
||||
parseGroupChr?: (t) => string
|
||||
parseLimit?: (t) => string
|
||||
parseMatrix?: (t) => string
|
||||
parseNary?: (t) => string
|
||||
parseOMath?: (t) => string
|
||||
parseRadical?: (t) => string
|
||||
parseSubscript?: (t) => string
|
||||
parseSuperscript?: (t) => string
|
||||
}
|
||||
export const position = {
|
||||
getPosition?: (t) => string
|
||||
getPt?: (t) => string
|
||||
getSize?: (t) => string
|
||||
}
|
||||
export const readXmlFile = {
|
||||
readXmlFile?: (t) => string
|
||||
simplifyLostLess?: (t) => string
|
||||
}
|
||||
export const schemeColor = {
|
||||
getSchemeColorFromTheme?: (t) => string
|
||||
}
|
||||
export const shadow = {
|
||||
getShadow?: (t) => string
|
||||
}
|
||||
export const shape = {
|
||||
getCustomShapePath?: (t) => string
|
||||
shapeArc?: (t) => string
|
||||
}
|
||||
export const table = {
|
||||
getTableBorders?: (t) => string
|
||||
getTableCellParams?: (t) => string
|
||||
getTableRowParams?: (t) => string
|
||||
}
|
||||
export const text = {
|
||||
genSpanElement?: (t) => string
|
||||
genTextBody?: (t) => string
|
||||
getListType?: (t) => string
|
||||
}
|
||||
export const utils = {
|
||||
angleToDegrees?: (t) => string
|
||||
base64ArrayBuffer?: (t) => string
|
||||
eachElement?: (t) => string
|
||||
escapeHtml?: (t) => string
|
||||
extractFileExtension?: (t) => string
|
||||
getMimeType?: (t) => string
|
||||
getTextByPathList?: (t) => string
|
||||
isVideoLink?: (t) => string
|
||||
toHex?: (t) => string
|
||||
}
|
||||
|
||||
export const genChart: (node, warpObj) => object
|
||||
export const genDiagram: (node, warpObj) => object
|
||||
export const genShape: (node, slideLayoutSpNode, slideMasterSpNode, name, type, warpObj) => object
|
||||
export const genTable: (node, warpObj) => object
|
||||
export const getContentTypes: (zip) => object
|
||||
export const getNote: (noteContent) => string
|
||||
export const getSlideInfo: (zip) => object
|
||||
export const getSlideLayoutEl: (warpObj, isPh) => Array
|
||||
export const indexNodes: (content) => object
|
||||
export const loadTheme: (zip) => object|null
|
||||
export const processCxnSpNode: (node, warpObj) => object
|
||||
export const processGraphicFrameNode: (node, warpObj, source) => string
|
||||
export const processGroupSpNode: (node, warpObj, source) => object|null
|
||||
export const processMathNode: (t) => string
|
||||
export const processNodesInSlide: (t) => string
|
||||
export const processPicNode: (t) => string
|
||||
export const processSingleSlide: (t) => string
|
||||
export const processSpNode: (t) => string
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -108,6 +108,12 @@ export const constantRoutes = [
|
|||
name: 'aiVoice',
|
||||
meta: { title: '语音生成', showBread: true }
|
||||
},
|
||||
{
|
||||
path: 'mindmap',
|
||||
component: () => import('@/views/mindMap/index.vue'),
|
||||
name: 'mindmap',
|
||||
meta: { title: 'AI思维导图' }
|
||||
},
|
||||
]
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,138 @@
|
|||
/**
|
||||
* svg 相关工具类
|
||||
* @module svgUtils
|
||||
* import { svgUtils } from '@/utils/svgUtils'
|
||||
* @author: zdg
|
||||
*/
|
||||
|
||||
// zdg: 计算路径的边界
|
||||
export const calculatePathDimensions = (d) => {
|
||||
let minX = Infinity;
|
||||
let maxX = -Infinity;
|
||||
let minY = Infinity;
|
||||
let maxY = -Infinity;
|
||||
let currentX = 0;
|
||||
let currentY = 0;
|
||||
const commandRegex = /([A-Za-z])([^A-Za-z]+)/g;
|
||||
let match;
|
||||
while ((match = commandRegex.exec(d))!== null) {
|
||||
const type = match[1];
|
||||
const params = match[2].trim().split(/\s+|,/).map(Number);
|
||||
switch (type) {
|
||||
case 'M': // 移动到
|
||||
currentX = params[0];
|
||||
currentY = params[1];
|
||||
break;
|
||||
case 'L': // 直线到
|
||||
currentX = params[0];
|
||||
currentY = params[1];
|
||||
break;
|
||||
case 'H': // 水平直线
|
||||
currentX = params[0];
|
||||
break;
|
||||
case 'V': // 垂直直线
|
||||
currentY = params[0];
|
||||
break;
|
||||
case 'C': // 三次贝塞尔曲线
|
||||
for (let i = 0; i < params.length; i += 6) {
|
||||
const control1X = params[i];
|
||||
const control1Y = params[i + 1];
|
||||
const control2X = params[i + 2];
|
||||
const control2Y = params[i + 3];
|
||||
const endX = params[i + 4];
|
||||
const endY = params[i + 5];
|
||||
// 更新边界
|
||||
if (control1X < minX) minX = control1X;
|
||||
if (control1X > maxX) maxX = control1X;
|
||||
if (control1Y < minY) minY = control1Y;
|
||||
if (control1Y > maxY) maxY = control1Y;
|
||||
if (control2X < minX) minX = control2X;
|
||||
if (control2X > maxX) maxX = control2X;
|
||||
if (control2Y < minY) minY = control2Y;
|
||||
if (control2Y > maxY) maxY = control2Y;
|
||||
if (endX < minX) minX = endX;
|
||||
if (endX > maxX) maxX = endX;
|
||||
if (endY < minY) minY = endY;
|
||||
if (endY > maxY) maxY = endY;
|
||||
currentX = endX;
|
||||
currentY = endY;
|
||||
}
|
||||
break;
|
||||
case 'S': // 光滑三次贝塞尔曲线
|
||||
for (let i = 0; i < params.length; i += 4) {
|
||||
const controlX = params[i];
|
||||
const controlY = params[i + 1];
|
||||
const endX = params[i + 2];
|
||||
const endY = params[i + 3];
|
||||
// 更新边界
|
||||
if (controlX < minX) minX = controlX;
|
||||
if (controlX > maxX) maxX = controlX;
|
||||
if (controlY < minY) minY = controlY;
|
||||
if (controlY > maxY) maxY = controlY;
|
||||
if (endX < minX) minX = endX;
|
||||
if (endX > maxX) maxX = endX;
|
||||
if (endY < minY) minY = endY;
|
||||
if (endY > maxY) maxY = endY;
|
||||
currentX = endX;
|
||||
currentY = endY;
|
||||
}
|
||||
break;
|
||||
case 'Q': // 二次贝塞尔曲线
|
||||
for (let i = 0; i < params.length; i += 4) {
|
||||
const controlX = params[i];
|
||||
const controlY = params[i + 1];
|
||||
const endX = params[i + 2];
|
||||
const endY = params[i + 3];
|
||||
// 更新边界
|
||||
if (controlX < minX) minX = controlX;
|
||||
if (controlX > maxX) maxX = controlX;
|
||||
if (controlY < minY) minY = controlY;
|
||||
if (controlY > maxY) maxY = controlY;
|
||||
if (endX < minX) minX = endX;
|
||||
if (endX > maxX) maxX = endX;
|
||||
if (endY < minY) minY = endY;
|
||||
if (endY > maxY) maxY = endY;
|
||||
currentX = endX;
|
||||
currentY = endY;
|
||||
}
|
||||
break;
|
||||
case 'T': // 光滑二次贝塞尔曲线
|
||||
for (let i = 0; i < params.length; i += 2) {
|
||||
const endX = params[i];
|
||||
const endY = params[i + 1];
|
||||
// 更新边界
|
||||
if (endX < minX) minX = endX;
|
||||
if (endX > maxX) maxX = endX;
|
||||
if (endY < minY) minY = endY;
|
||||
if (endY > maxY) maxY = endY;
|
||||
currentX = endX;
|
||||
currentY = endY;
|
||||
}
|
||||
break;
|
||||
case 'A': // 椭圆弧
|
||||
const endX = params[5];
|
||||
const endY = params[6];
|
||||
// 更新边界
|
||||
if (endX < minX) minX = endX;
|
||||
if (endX > maxX) maxX = endX;
|
||||
if (endY < minY) minY = endY;
|
||||
if (endY > maxY) maxY = endY;
|
||||
currentX = endX;
|
||||
currentY = endY;
|
||||
break;
|
||||
case 'Z': // 闭合路径
|
||||
// 闭合路径不影响边界，这里不需要额外操作
|
||||
break;
|
||||
default:
|
||||
console.error(`Unknown command: ${type}`);
|
||||
break;
|
||||
}
|
||||
if (currentX < minX) minX = currentX;
|
||||
if (currentX > maxX) maxX = currentX;
|
||||
if (currentY < minY) minY = currentY;
|
||||
if (currentY > maxY) maxY = currentY;
|
||||
}
|
||||
const width = maxX - minX;
|
||||
const height = maxY - minY;
|
||||
return { width, height };
|
||||
}
|
||||
|
|
@ -87,6 +87,15 @@ export const exportFile = async (list) => {
|
|||
})
|
||||
}
|
||||
|
||||
export const exportImg64File = async (base64, name) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
ipcRenderer.send('export-img64-file', {base64,name})
|
||||
ipcRenderer.once('export-img64-file-reply', (e) => {
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export const creatPPT = (name, uploadData) => {
|
||||
JSON.parse(JSON.stringify(uploadData))
|
||||
return new Promise((resolve, reject) => {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,267 @@
|
|||
<template>
|
||||
<div class="page-mindmap flex flex-col h-full">
|
||||
<div class="mindmap-header flex items-center justify-between pl-5">
|
||||
<div class="flex w-1/2 items-center justify-between">
|
||||
<div>
|
||||
<b>AI思维导图</b> <span class="ml-5">《{{ curNode.itemtitle }}》</span>
|
||||
</div>
|
||||
<div>
|
||||
<template v-if="isEdit">
|
||||
<el-button class="mr-3" @click="isEdit = false">取消</el-button>
|
||||
<el-button type="success" class="mr-3" @click="isEdit = false">保存</el-button>
|
||||
</template>
|
||||
<!-- <el-button v-else type="primary" class="mr-3" @click="isEdit = true">编辑</el-button>-->
|
||||
<!-- <el-select v-model="curMode" class="mr-3 w-30">
|
||||
<el-option
|
||||
v-for="item in modeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>-->
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
导出清晰度：<el-input-number v-model="scale" :min="1" :max="10" />数字越大越清晰，但图片大小会越大
|
||||
<el-button @click="outputImg" type="primary">导出图片</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mindmap-main flex flex-1" style="overflow: auto;">
|
||||
<div class="w-1/3 h-full p-3 main-left flex flex-col" v-loading="loadingAnswer" style="overflow: auto;">
|
||||
<div class="flex flex-1" style="overflow: auto;">
|
||||
<v-md-editor v-model="resMarkdown" :mode="isEdit ? 'edit' : 'preview'" />
|
||||
</div>
|
||||
<div class="main-left-ipt">
|
||||
<el-input
|
||||
v-model="textVal"
|
||||
style="max-width: 600px"
|
||||
placeholder="请输入信息对内容进一步调整"
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-icon size="20" style="cursor: pointer;" @click="sendMessage"><Position /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
<!-- <el-input style="float: left;" v-model="textVal" size="large" placeholder="请输入信息对内容进一步调整" /><el-button>发送</el-button>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-2/3 h-full main-right">
|
||||
<mindmap v-if="rootData" :timetravel="true" :drag="true" :zoom="true" :edit="true"
|
||||
:center-btn="true" :fit-btn="true" :ctm="true" :add-node-btn="true"
|
||||
v-model="rootData"></mindmap>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, computed, watch } from 'vue'
|
||||
import { Position } from "@element-plus/icons-vue"
|
||||
import { sessionStore } from '@/utils/store'
|
||||
import { modelList, completion, modelChat } from '@/api/mode/index.js'
|
||||
import { createChart, sendChart } from '@/api/ai/index'
|
||||
import { Transformer } from 'markmap-lib'
|
||||
import mindmap from 'vue3-mindmap'
|
||||
import html2canvas from 'html2canvas'
|
||||
import 'vue3-mindmap/dist/style.css'
|
||||
import {exportImg64File} from "@/utils/talkFile";
|
||||
import axios from 'axios'
|
||||
|
||||
const transformer = new Transformer()
|
||||
|
||||
// 当前节点
|
||||
const curNode = reactive({})
|
||||
|
||||
const textVal = ref(``)
|
||||
|
||||
const loadingAnswer = ref(false)
|
||||
|
||||
const scale = ref(5)
|
||||
|
||||
// const textVal = computed(() => {
|
||||
// return `生成${curNode.itemtitle}的教学思维导图，按照markdown的格式编写，只返回markdown的部分`
|
||||
// })
|
||||
|
||||
const curMode = ref(2)
|
||||
const modeOptions = ref([
|
||||
{
|
||||
label: '教学大模型',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: '知识库模型',
|
||||
value: 2,
|
||||
}
|
||||
])
|
||||
|
||||
const isEdit = ref(false)
|
||||
|
||||
// AI 对话
|
||||
const resMarkdown = ref(``)
|
||||
const params = reactive({
|
||||
prompt: '',
|
||||
dataset_id: '',
|
||||
template: ''
|
||||
})
|
||||
const messages = ref([
|
||||
{
|
||||
role: 'user',
|
||||
content: ''
|
||||
}
|
||||
])
|
||||
const aiConversation = async () => {
|
||||
console.log(prompt.value)
|
||||
// return
|
||||
// params.prompt = prompt.value.replace(/{模板名称}/g, '')
|
||||
// 暂时用死数据
|
||||
// let str = '针对高中语文必修上册-人教版《静女》这一课根据设置情境、引导学习进行课件教学PPT内容设计，只需要涉及到设置情境、引导学习的内容即可，不需要封面、结尾和其它内容。'
|
||||
// messages.value[0].content = str
|
||||
params.prompt = prompt.value
|
||||
// 教学大模型
|
||||
loadingAnswer.value = true
|
||||
if (curMode.value == 1) {
|
||||
const res = await sendChart({
|
||||
content: params.prompt,
|
||||
conversationId: conversation_id.value,
|
||||
stream: false
|
||||
})
|
||||
resMarkdown.value = res.data.answer.replaceAll('```markdown','').replaceAll('```', '')
|
||||
}
|
||||
// 知识库模型
|
||||
else {
|
||||
let data = {
|
||||
"messages": [
|
||||
{
|
||||
"role": "user",
|
||||
"content": params.prompt
|
||||
}
|
||||
]
|
||||
}
|
||||
const res = await text2mindmap(data).finally(() => {
|
||||
loadingAnswer.value = false
|
||||
})
|
||||
console.log(res)
|
||||
resMarkdown.value = res.data.answer.content.replaceAll('```markdown','').replaceAll('```', '')
|
||||
}
|
||||
}
|
||||
|
||||
const sendMessage = async () => {
|
||||
loadingAnswer.value = true
|
||||
rootData.value = null
|
||||
let data = {
|
||||
"messages": [
|
||||
{
|
||||
"role":"assiatant",
|
||||
"content": resMarkdown.value
|
||||
},
|
||||
{
|
||||
"role": "user",
|
||||
"content": `${textVal.value}，${prompt.value}`
|
||||
}
|
||||
]
|
||||
}
|
||||
let res = await text2mindmap(data).finally(() => {
|
||||
loadingAnswer.value = false
|
||||
})
|
||||
resMarkdown.value = res.data.answer.content.replaceAll('```markdown','').replaceAll('```', '')
|
||||
}
|
||||
|
||||
const text2mindmap =(data)=> {
|
||||
return axios({
|
||||
url: "https://ai.ysaix.com:7865/chat",
|
||||
method: "post",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Accept: "*/*",
|
||||
},
|
||||
data:data
|
||||
});
|
||||
}
|
||||
|
||||
// 查询prompt 替换
|
||||
const prompt = ref('')
|
||||
const getPrompt = async () => {
|
||||
const { rows } = await modelList({ model: 5 })
|
||||
let str = rows.find((item) => item.name.indexOf('思维导图') != -1).prompt
|
||||
|
||||
str = str.replace('{学段}', curNode.edustage)
|
||||
str = str.replace('{学科}', curNode.edusubject)
|
||||
let bookV = curNode.roottitle + '版'
|
||||
str = str.replace('{教材版本}', bookV)
|
||||
str = str.replace('{课程名称}', `《${curNode.itemtitle}》`)
|
||||
prompt.value = str
|
||||
}
|
||||
|
||||
// 千帆创建对话
|
||||
const conversation_id = ref('')
|
||||
const getChartId = async () => {
|
||||
const res = await createChart()
|
||||
conversation_id.value = res.data.conversation_id
|
||||
// ai 对话
|
||||
aiConversation()
|
||||
}
|
||||
|
||||
const rootData = ref(null)
|
||||
|
||||
const degure = (item) => {
|
||||
item.name = item.content.replace(/<[^>]*>/g, '');;
|
||||
if (item.children && item.children.length) {
|
||||
item.children.forEach(item2 => {
|
||||
degure(item2)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const outputImg = () => {
|
||||
let svg = window.document.getElementById('Mindmap_svg-wrapper_fgvb6')
|
||||
// let das = svg.querySelectorAll('.Mindmap_root_fgvb6')[0]
|
||||
html2canvas(svg,{
|
||||
scale: scale.value
|
||||
}).then((canvas) => {
|
||||
const dataUrl = canvas.toDataURL()
|
||||
exportImg64File(dataUrl, `${curNode.itemtitle}思维导图`)
|
||||
})
|
||||
// mm.value.fit()
|
||||
}
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
let data = sessionStore.get('subject.curNode')
|
||||
Object.assign(curNode, data)
|
||||
|
||||
// 获取提示词
|
||||
getPrompt()
|
||||
// 获取百度千帆会话ID
|
||||
getChartId()
|
||||
|
||||
})
|
||||
// 监听 initValue 的变化
|
||||
watch(() => resMarkdown.value, () => {
|
||||
const { root } = transformer.transform(resMarkdown.value)
|
||||
degure(root)
|
||||
rootData.value = [root]
|
||||
console.log(rootData.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mindmap-header {
|
||||
background: #fff;
|
||||
height: 45px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.main-left {
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
.main-left-ipt {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
.main-right{
|
||||
border: 1px solid #ccc;
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -161,6 +161,10 @@ const tools = reactive([{
|
|||
name: '文生图片',
|
||||
path: '/model/aiKolors',
|
||||
img: 'aiimg'
|
||||
},{
|
||||
name: 'AI思维导图',
|
||||
path: '/model/mindmap',
|
||||
img: 'aiswdt'
|
||||
},{
|
||||
name: '文生连环画',
|
||||
path: '',
|
||||
|
|
@ -304,6 +308,8 @@ const pgDialog = ref({ // 弹窗-进度条
|
|||
|
||||
const fileInput = ref(null)
|
||||
|
||||
let pptMedia = {} // ppt媒体数据
|
||||
|
||||
const openFilePicker = () =>{
|
||||
fileInput.value.click();
|
||||
}
|
||||
|
|
@ -319,6 +325,7 @@ const handleFileChange = ()=> {
|
|||
const createAIPPTByFile = async (file)=> {
|
||||
pgDialog.value.visible = true
|
||||
pgDialog.value.pg.percentage = 0
|
||||
pptMedia = {} // 清空媒体数据
|
||||
const resPptJson = await PPTXFileToJson(file).catch(() => {
|
||||
ElMessageBox.alert('PPT文件转换失败！请点击素材右侧...下载文件后打开另存为PPTX文件格式再进行导入！')
|
||||
pgDialog.value.visible = false
|
||||
|
|
@ -394,42 +401,66 @@ const createAIPPTByFile = async (file)=> {
|
|||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 将图片|音频|视频 转换为线上地址
|
||||
const getOnlineFileUrl = (data, name) => {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
let file
|
||||
if (data instanceof Blob) { // blob类型判断
|
||||
const fileName = Date.now() + `.${name||'png'}`
|
||||
file = commUtils.blobToFile(data, fileName)
|
||||
} else if (data instanceof File) { // file类型判断
|
||||
file = data
|
||||
} else { // 其他类型 base64
|
||||
const blob = commUtils.base64ToBlob(data)
|
||||
const fileName = Date.now() + `.${name||'png'}`
|
||||
file = commUtils.blobToFile(blob, fileName)
|
||||
}
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
const res = await Api_server.Other.uploadFile(formData)
|
||||
if (res && res.code == 200){
|
||||
resolve(res?.url)
|
||||
} else { // 失败
|
||||
reject(res?.msg||'上传失败')
|
||||
}
|
||||
})
|
||||
}
|
||||
const toRousrceUrl = async (o) => {
|
||||
if (!!o.src) { // 如果有src就转换
|
||||
const isBase64 = /^data:image\/(\w+);base64,/.test(o.src)
|
||||
const isBlobUrl = /^blob:/.test(o.src)
|
||||
// console.log('isBase64', o, isBase64)
|
||||
if (isBase64) {
|
||||
const bolb = commUtils.base64ToBlob(o.src)
|
||||
const fileName = Date.now() + '.png'
|
||||
const file = commUtils.blobToFile(bolb, fileName)
|
||||
// o.src = fileName
|
||||
// console.log('file', file)
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
const res = await Api_server.Other.uploadFile(formData)
|
||||
if (res && res.code == 200){
|
||||
const url = res?.url
|
||||
url &&(o.src = url)
|
||||
}
|
||||
} else if (isBlobUrl) { // 视频和音频
|
||||
const res = await fetch(o.src)
|
||||
const blob = await res.blob()
|
||||
const fileName = o.type=='video'? Date.now() + '.mp4':Date.now() + '.mp3'
|
||||
const file = commUtils.blobToFile(blob, fileName)
|
||||
// o.src = fileName
|
||||
// console.log('file', file)
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
const ress = await Api_server.Other.uploadFile(formData)
|
||||
if (ress && ress.code == 200){
|
||||
const url = ress?.url
|
||||
let onLineUrl = '' // 线上地址
|
||||
if (!!o.zipPath) onLineUrl = pptMedia[o.zipPath] || '' // 是否已上传过
|
||||
if (onLineUrl) o.src = onLineUrl // 已存在线上地址直接赋值
|
||||
else { // 不存在重新上传
|
||||
if (isBase64) { // 相同资源处理
|
||||
const url = await getOnlineFileUrl(o.src)
|
||||
url && o.zipPath && (pptMedia[o.zipPath] = url) // 缓存
|
||||
} else if (isBlobUrl) { // 视频和音频
|
||||
const res = await fetch(o.src)
|
||||
const blob = await res.blob()
|
||||
const url = await getOnlineFileUrl(blob, o.type=='video'?'mp4':'mp3')
|
||||
URL.revokeObjectURL(o.src) // 释放内存
|
||||
url &&(o.src = url)
|
||||
url && o.zipPath && (pptMedia[o.zipPath] = url) // 缓存
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 处理元素为shape 可能存在背景图等
|
||||
const isBg = o?.gradient?.type == 'image' && !!o?.gradient?.image
|
||||
if (isBg) {
|
||||
const {src, zipPath} = o.gradient.image || {}
|
||||
let onLineUrl = '' // 线上地址
|
||||
if (!!zipPath) onLineUrl = pptMedia[zipPath] || '' // 是否已上传过
|
||||
if (onLineUrl) o.gradient.image.src = onLineUrl // 已存在线上地址直接赋值
|
||||
else { // 重新上传
|
||||
const url = await getOnlineFileUrl(src)
|
||||
o.gradient.image.src = url
|
||||
url && zipPath && (pptMedia[zipPath] = url) // 缓存
|
||||
}
|
||||
}
|
||||
|
||||
if (o?.background?.image) await toRousrceUrl(o.background.image)
|
||||
if(o?.elements){
|
||||
for (let element of o.elements) {
|
||||
|
|
|
|||
|
|
@ -289,7 +289,8 @@ export default {
|
|||
{ color: '#5cb87a', percentage: 100 }, // 绿色
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
pptMedia: {} // ppt媒体数据
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -591,52 +592,76 @@ export default {
|
|||
this.createAIPPTByFile(file, this.currentNode.itemtitle + '.aippt')
|
||||
}
|
||||
},
|
||||
// 将图片|音频|视频 转换为线上地址
|
||||
getOnlineFileUrl(data, name){
|
||||
return new Promise(async (resolve, reject) => {
|
||||
let file
|
||||
if (data instanceof Blob) { // blob类型判断
|
||||
const fileName = Date.now() + `.${name||'png'}`
|
||||
file = commUtils.blobToFile(data, fileName)
|
||||
} else if (data instanceof File) { // file类型判断
|
||||
file = data
|
||||
} else { // 其他类型 base64
|
||||
const blob = commUtils.base64ToBlob(data)
|
||||
const fileName = Date.now() + `.${name||'png'}`
|
||||
file = commUtils.blobToFile(blob, fileName)
|
||||
}
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
const res = await Api_server.Other.uploadFile(formData)
|
||||
if (res && res.code == 200){
|
||||
resolve(res?.url)
|
||||
} else { // 失败
|
||||
reject(res?.msg||'上传失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
async toRousrceUrl(o) {
|
||||
if (!!o.src) { // 如果有src就转换
|
||||
const isBase64 = /^data:image\/(\w+);base64,/.test(o.src)
|
||||
const isBlobUrl = /^blob:/.test(o.src)
|
||||
// console.log('isBase64', o, isBase64)
|
||||
if (isBase64) {
|
||||
const bolb = commUtils.base64ToBlob(o.src)
|
||||
const fileName = Date.now() + '.png'
|
||||
const file = commUtils.blobToFile(bolb, fileName)
|
||||
// o.src = fileName
|
||||
// console.log('file', file)
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
const res = await Api_server.Other.uploadFile(formData)
|
||||
if (res && res.code == 200){
|
||||
const url = res?.url
|
||||
url &&(o.src = url)
|
||||
}
|
||||
} else if (isBlobUrl) { // 视频和音频
|
||||
const res = await fetch(o.src)
|
||||
const blob = await res.blob()
|
||||
const fileName = o.type=='video'? Date.now() + '.mp4':Date.now() + '.mp3'
|
||||
const file = commUtils.blobToFile(blob, fileName)
|
||||
// o.src = fileName
|
||||
// console.log('file', file)
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
const ress = await Api_server.Other.uploadFile(formData)
|
||||
if (ress && ress.code == 200){
|
||||
const url = ress?.url
|
||||
let onLineUrl = '' // 线上地址
|
||||
if (!!o.zipPath) onLineUrl = this.pptMedia[o.zipPath] || '' // 是否已上传过
|
||||
if (onLineUrl) o.src = onLineUrl // 已存在线上地址直接赋值
|
||||
else { // 不存在重新上传
|
||||
if (isBase64) { // 相同资源处理
|
||||
const url = await this.getOnlineFileUrl(o.src)
|
||||
url && o.zipPath && (this.pptMedia[o.zipPath] = url) // 缓存
|
||||
} else if (isBlobUrl) { // 视频和音频
|
||||
const res = await fetch(o.src)
|
||||
const blob = await res.blob()
|
||||
const url = await this.getOnlineFileUrl(blob, o.type=='video'?'mp4':'mp3')
|
||||
URL.revokeObjectURL(o.src) // 释放内存
|
||||
url &&(o.src = url)
|
||||
url && o.zipPath && (this.pptMedia[o.zipPath] = url) // 缓存
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 处理元素为shape 可能存在背景图等
|
||||
const isBg = o?.gradient?.type == 'image' && !!o?.gradient?.image
|
||||
if (isBg) {
|
||||
const {src, zipPath} = o.gradient.image || {}
|
||||
let onLineUrl = '' // 线上地址
|
||||
if (!!zipPath) onLineUrl = this.pptMedia[zipPath] || '' // 是否已上传过
|
||||
if (onLineUrl) o.gradient.image.src = onLineUrl // 已存在线上地址直接赋值
|
||||
else { // 重新上传
|
||||
const url = await this.getOnlineFileUrl(src)
|
||||
o.gradient.image.src = url
|
||||
url && zipPath && (this.pptMedia[zipPath] = url) // 缓存
|
||||
}
|
||||
}
|
||||
|
||||
if (o?.background?.image) await this.toRousrceUrl(o.background.image)
|
||||
// if (o?.elements) o.elements.forEach(async o => {await this.toRousrceUrl(o)})
|
||||
if(o?.elements){
|
||||
for (let element of o.elements) {
|
||||
await this.toRousrceUrl(element);
|
||||
}
|
||||
}
|
||||
if(o?.elements){
|
||||
for (let element of o.elements) {
|
||||
await this.toRousrceUrl(element);
|
||||
}
|
||||
}
|
||||
},
|
||||
async createAIPPTByFile(file,fileShowName) {
|
||||
this.pgDialog.visible = true
|
||||
this.pgDialog.pg.percentage = 0
|
||||
this.pptMedia = {} // 清空媒体数据
|
||||
const resPptJson = await PPTXFileToJson(file).catch(() => {
|
||||
ElMessageBox.alert('PPT文件转换失败！请点击素材右侧...下载文件后打开另存为PPTX文件格式再进行导入！')
|
||||
this.pgDialog.visible = false
|
||||
|
|
|
|||
|
|
@ -1,6 +1,11 @@
|
|||
<template>
|
||||
<div class="user-info-head" @click="editCropper()">
|
||||
<img :src="options.img" title="点击上传头像" class="img-circle img-lg" />
|
||||
<!-- <img :src="options.img" title="点击上传头像" class="img-circle img-lg" /> -->
|
||||
<el-image class="user-img" :src="options.img" style="width: 120px;">
|
||||
<template #error>
|
||||
<img :src="route_path + userStore.user.avatar">
|
||||
</template>
|
||||
</el-image>
|
||||
<el-dialog
|
||||
v-model="open"
|
||||
append-to-body
|
||||
|
|
@ -31,6 +36,7 @@ const userStore = useUserStore()
|
|||
const open = ref(false)
|
||||
const visible = ref(false)
|
||||
const dev_api = ref(import.meta.env.VITE_APP_BASE_API)
|
||||
const route_path = ref(import.meta.env.VITE_APP_BUILD_BASE_PATH)
|
||||
const defaultImg = ['/img/avatar-default.jpg','/images/img-avatar.png','/src/assets/images/img-avatar.png']
|
||||
|
||||
//图片裁剪数据
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@
|
|||
</div>
|
||||
<div class="center-con" v-loading="loading">
|
||||
<!-- <v-md-editor v-if="markeDownAnswer" :model-value="markeDownAnswer" mode="preview"></v-md-editor> -->
|
||||
<v-md-preview v-if="markeDownAnswer" :text="markeDownAnswer"></v-md-preview>
|
||||
|
||||
<!-- <v-md-preview v-if="markeDownAnswer" :text="markeDownAnswer"></v-md-preview> -->
|
||||
<v-md-editor v-if="markeDownAnswer" v-model="markeDownAnswer" mode="preview" />
|
||||
<el-empty v-else description="请选择符合您需要的教学模式，生成教学大纲" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue