diff --git a/src/assets/icons/light.svg b/src/assets/icons/light.svg index dba6a35..7205c7d 100644 --- a/src/assets/icons/light.svg +++ b/src/assets/icons/light.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/icons/plus.svg b/src/assets/icons/plus.svg new file mode 100644 index 0000000..7e4b3a8 --- /dev/null +++ b/src/assets/icons/plus.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Canvas/FlowCanvas/components/nodes/cards/index.vue b/src/components/Canvas/FlowCanvas/components/nodes/cards/index.vue index 2c2de05..01f62da 100644 --- a/src/components/Canvas/FlowCanvas/components/nodes/cards/index.vue +++ b/src/components/Canvas/FlowCanvas/components/nodes/cards/index.vue @@ -139,11 +139,10 @@ // if (!subordNode) { taskList.forEach((item,index) => { nodeManager.createResultNode({ - positionY: (index + subordNodes.length) * (50 + 250), data: { superiorID: attrs.node.id, superiorNodeType: attrs.node?.data?.type, - createIndexPosition: index, + createIndexPosition: index + subordNodes.length, tier: currentComponent.value.tier, isActive: index == 0 && subordNodes.length == 0, data: { diff --git a/src/components/Canvas/FlowCanvas/components/nodes/result-image.vue b/src/components/Canvas/FlowCanvas/components/nodes/result-image.vue index c74fbe1..6da82cf 100644 --- a/src/components/Canvas/FlowCanvas/components/nodes/result-image.vue +++ b/src/components/Canvas/FlowCanvas/components/nodes/result-image.vue @@ -91,6 +91,7 @@ const clickTaskId = ref('') const generateManager = inject('generateManager') as any const stateManager = inject('stateManager') as any + const eventManager = inject('eventManager') as any const clickimageProcessTaskItem = (taskId: string) => { if(clickTaskId.value == taskId){ showMenu.value = !showMenu.value @@ -196,8 +197,33 @@ showMenu.value = false clickTaskId.value = '' } + + const depthCanvasClose = ()=>{ + eventManager.registerEvents() + } + const depthCanvasWorkbench = (options)=>{ + data.imageProcessTasks.forEach((item) => { + if(item.taskId == options.taskId){ + item.url = options.url + } + }) + } + const onEdit = (item: any) => { - myEvent.emit('openDepthCanvas', { url:item.url,id: item.taskId }) + const data = { + url:item.url, + id: item.taskId, + onWorkbench:(options)=>{ + let workbenchData = { + ...item, + ...options, + } + depthCanvasWorkbench(workbenchData) + }, + onClose:depthCanvasClose + } + eventManager.removeEvents() + myEvent.emit('openDepthCanvas', data) } document.addEventListener('mousedown', hideMenu) onBeforeUnmount(() => { diff --git a/src/components/Canvas/FlowCanvas/flow-canvas.vue b/src/components/Canvas/FlowCanvas/flow-canvas.vue index 14f5ed0..2589073 100644 --- a/src/components/Canvas/FlowCanvas/flow-canvas.vue +++ b/src/components/Canvas/FlowCanvas/flow-canvas.vue @@ -12,6 +12,8 @@ @node-drag-stop="(e) => eventManager.handleNodeDragStop(e)" @viewport-change="(e) => eventManager.handleViewportChange(e)" @pane-click="(e) => eventManager.handleClick(e)" + @mousedown="(e) => eventManager.mousedown(e)" + @mouseup="(e) => eventManager.mouseup(e)" @node-click="(e) => clickNode(e)" :class="{ 'custom-cursor': !!stateManager.cursor.value }" :style="{ '--custom-cursor': stateManager.cursor.value }" diff --git a/src/components/Canvas/FlowCanvas/manager/EventManager.ts b/src/components/Canvas/FlowCanvas/manager/EventManager.ts index f38c781..0694c42 100644 --- a/src/components/Canvas/FlowCanvas/manager/EventManager.ts +++ b/src/components/Canvas/FlowCanvas/manager/EventManager.ts @@ -3,11 +3,24 @@ export class EventManager { stateManager: any vueFlow: any zoom: any + originalPosition: any + vueFlowPosition: any constructor(options) { this.stateManager = options.stateManager; this.vueFlow = options.vueFlow this.zoom = this.stateManager.zoom this._handleKeyDown = this.handleKeyDown.bind(this) + this.mousemove_ = this.mousemove.bind(this) + this.originalPosition = { + x: 0, + y: 0, + zoom: 1, + } + this.vueFlowPosition = { + x: 0, + y: 0, + zoom: 1, + } } /** 处理视口变化 */ handleViewportChange(e: any) { @@ -40,6 +53,35 @@ export class EventManager { this.stateManager.toolManager.setTool(TOOLS.SELECT) } } + mousemove_:any + /** 处理鼠标中间点击 */ + mousedown(event:any) { + if (event.button === 1 && !event.target.classList.contains('dragging')) { + this.vueFlowPosition = this.vueFlow.value.getTransform() + event.target.classList.add('dragging') + this.originalPosition = { + x: event.clientX, + y: event.clientY, + zoom: this.vueFlow.value.getTransform().zoom, + } + document.addEventListener('mousemove', this.mousemove_) + } + } + /** 处理鼠标移动 */ + mousemove(event:any) { + const deltaX = event.clientX - this.originalPosition.x + const deltaY = event.clientY - this.originalPosition.y + const newX = this.vueFlowPosition.x + deltaX + const newY = this.vueFlowPosition.y + deltaY + this.vueFlow.value.setTransform({x: newX, y: newY, zoom: this.vueFlowPosition.zoom}) + } + /** 处理鼠标中间抬起 */ + mouseup(event:any) { + if (event.button === 1) { + event.target.classList.remove('dragging') + document.removeEventListener('mousemove', this.mousemove_) + } + } /** 处理复制 */ handleCopy(event: any, activeNodeID: string) { diff --git a/src/components/Canvas/FlowCanvas/manager/NodeManager.ts b/src/components/Canvas/FlowCanvas/manager/NodeManager.ts index dc0d287..231d638 100644 --- a/src/components/Canvas/FlowCanvas/manager/NodeManager.ts +++ b/src/components/Canvas/FlowCanvas/manager/NodeManager.ts @@ -46,16 +46,28 @@ export class NodeManager { createNode(options: NodeOptions) { const superiorID = options?.data?.superiorID const snode = superiorID ? this.stateManager.flowManager.getNodeById(superiorID) : this.stateManager.flowManager.getLastNode(); + //获取上级节点所生成的最后一个node，设置位置为最后一个节点的xy 加上 节点间距 + const superiorGenerateNodes = this.stateManager.getSubordNodes(superiorID) + const endGenerateNode = superiorGenerateNodes.reduce((max, current) => { + return current.data.createIndexPosition > max.data.createIndexPosition ? current : max + }, superiorGenerateNodes[0]) const id = options.id || createId() const positionX = options.positionX || 0 const positionY = options.positionY || 0 const position = options.position || - (!snode ? + ( + endGenerateNode? + { + x: endGenerateNode.position.x + positionX, + y: endGenerateNode.position.y + positionY + this.ranksep + 200 + } : + !snode ? { x: positionX, y: positionY } : { x: snode.position.x + snode.dimensions.width + this.nodesep + positionX, y: snode.position.y + positionY - }) + } + ) const data = options?.data || {} data['component'] = options.component const options_ = { diff --git a/src/main.ts b/src/main.ts index f630064..9cc7718 100644 --- a/src/main.ts +++ b/src/main.ts @@ -17,9 +17,12 @@ import 'element-plus/dist/index.css' import ignoredWarning from './ignoredWarning' +import vEllipsis from './utils/ellispsis' + const app = createApp(App) ignoredWarning(app) +app.directive('ellipsis', vEllipsis) app.use(router) .use(ElementPlus) .use(store) diff --git a/src/utils/ellispsis.ts b/src/utils/ellispsis.ts new file mode 100644 index 0000000..23f6ec8 --- /dev/null +++ b/src/utils/ellispsis.ts @@ -0,0 +1,52 @@ +import type { Directive } from 'vue' +/** + * 多行文本省略指令（悬浮显示完整内容) + * @directive v-ellipsis + * @param {number} [value=3] - 超过value行数时显示省略号,不传参数默认为3 + */ + +const applyStyles = (el: HTMLElement, binding: any) => { + const lines = typeof binding.value === 'number' && binding.value > 0 ? binding.value : 3 + + el.style.display = '-webkit-box' + el.style.webkitBoxOrient = 'vertical' + el.style.overflow = 'hidden' + el.style.webkitLineClamp = lines.toString() + + el.style.maxHeight = `${lines}lh` +} + +const checkTruncated = (el: HTMLElement) => { + const isTruncated = el.scrollHeight > el.clientHeight + 1 + if (isTruncated) { + el.title = el.textContent?.trim() || '' + } else { + el.removeAttribute('title') + } +} + +const vEllipsis: Directive = { + mounted(el, binding) { + applyStyles(el, binding) + checkTruncated(el) + + const ro = new ResizeObserver(() => checkTruncated(el)) + ro.observe(el) + ;(el as any)._ellipsisObserver = ro + }, + + updated(el, binding) { + applyStyles(el, binding) + checkTruncated(el) + }, + + unmounted(el) { + const ro = (el as any)._ellipsisObserver + if (ro) { + ro.disconnect() + delete (el as any)._ellipsisObserver + } + } +} + +export default vEllipsis diff --git a/src/views/home/agent/components/Agent.vue b/src/views/home/agent/components/Agent.vue index 998024c..0940e46 100644 --- a/src/views/home/agent/components/Agent.vue +++ b/src/views/home/agent/components/Agent.vue @@ -109,6 +109,7 @@ handleSendMessage({ text: initialData.text, images: initialData.images, + useReport:initialData.useReport, tempImages: initialData.tempImages }) // 更新 configParams @@ -123,12 +124,14 @@ text: string images: Array<{ url: string; name: string }> tempImages: any[] + useReport: boolean }, skipUserMessage = false ) => { isPaused.value = false isGenerating.value = true params.message = message.text + params.useReport = message.useReport params.imageUrlList = message.images || [] // 如果不是重新生成模式，则添加用户消息到列表 diff --git a/src/views/home/agent/components/Preview.vue b/src/views/home/agent/components/Preview.vue index b21caff..8fd42dd 100644 --- a/src/views/home/agent/components/Preview.vue +++ b/src/views/home/agent/components/Preview.vue @@ -53,12 +53,12 @@ @@ -328,16 +328,27 @@ .url-item { width: 24rem; height: 28.7rem; + line-height: 2rem; word-break: break-all; background: url('@/assets/images/web-card.png') no-repeat; background-size: 100% 100%; padding: 5rem 1.5rem; + row-gap: 0.6rem; + // .url-title,.url-link{ + // // 两行省略 + // display: -webkit-box; + // -webkit-line-clamp: 2; + // line-clamp: 2; + // -webkit-box-orient: vertical; + // overflow: hidden; + // text-overflow: ellipsis; + // } .url-title { cursor: pointer; font-family: 'Medium'; font-size: 1.6rem; color: #232323; - padding-bottom: 0.6rem; + max-height: 4rem; .link-outer { width: 1.2rem; height: 1.2rem; diff --git a/src/views/home/agent/index.vue b/src/views/home/agent/index.vue index bb46454..8ce3efe 100644 --- a/src/views/home/agent/index.vue +++ b/src/views/home/agent/index.vue @@ -87,7 +87,8 @@ ) } - const handleGetProjectInfoAndHistory = () => { +const handleGetProjectInfoAndHistory = () => { + handleOpenSketch() getProjectInfo({ id: route.params.id }).then((res) => { if (res) agentRef.value.setChatInfo(res) let data = res?.project || res diff --git a/src/views/home/components/Input.vue b/src/views/home/components/Input.vue index 4dc8e35..a779384 100644 --- a/src/views/home/components/Input.vue +++ b/src/views/home/components/Input.vue @@ -35,8 +35,36 @@
-
- +
+ + + + +
+
+
- + {{ $t('Input.trendingReport') }}
@@ -656,6 +684,7 @@ const payload = { text: inputValue.value.trim(), images: imageUrlList, + useReport: reportTags.value.length > 0, tempImages: uploadedImages.value } emits('send', payload) @@ -941,6 +970,15 @@ .left { column-gap: 2rem; } + .agent-operate { + width: 3.2rem; + height: 3.2rem; + cursor: pointer; + border-radius: 50%; + &:hover { + background-color: #f0f0f0; + } + } .attach { width: 4rem; height: 4rem; @@ -1320,4 +1358,53 @@ height: 1.2rem; } } + + .agent-plus-popover { + display: flex; + justify-content: flex-start; + background: transparent !important; + box-shadow: none !important; + border: none !important; + padding: 0 !important; + margin-bottom: -1rem; + pointer-events: none; + .el-popper__arrow:before { + display: none; + } + .agent-modal { + // width: 14.6rem; + // height: 8.5rem; + row-gap: 1.2rem; + font-family: 'Medium'; + font-weight: 500; + font-size: 1.3rem; + color: #222; + background-color: #fff; + border: 1px solid #d9d9d9; + box-shadow: 0px 6.53px 32.63px 0px #0000000d; + border-radius: 1rem; + padding: 1.2rem 1.4rem; + .c-svg { + width: initial; + width: 1rem; + height: 1.3rem; + } + .file, + .report { + line-height: 1.8rem; + column-gap: 1rem; + cursor: pointer; + } + .file { + .file-icon { + width: 1.1rem; + height: 1.3rem; + } + } + .gap { + height: 0.05rem; + background-color: #d4d4d4; + } + } + }