Merge branch 'main' of http://18.167.251.121:10003/aidlab/FiDA_Front

2026-03-17 17:17:49 +08:00
parent f12d6aec96 dd27ffd229
commit 6fb1eea95b
13 changed files with 255 additions and 14 deletions
--- a/src/assets/icons/light.svg
+++ b/src/assets/icons/light.svg
@@ -1,3 +1,3 @@
 <svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.7248 18.6371C11.7248 18.8138 11.6476 18.9906 11.5262 19.1231C11.3937 19.2445 11.2168 19.3217 11.0402 19.3217H4.14022C3.95255 19.3217 3.77596 19.2445 3.64348 19.1231C3.52204 18.9906 3.44484 18.8138 3.44484 18.6371C3.44484 18.4495 3.52204 18.2729 3.64348 18.1404C3.77596 18.019 3.95255 17.9418 4.14022 17.9418H11.0402C11.2168 17.9418 11.3937 18.019 11.5262 18.1404C11.6476 18.2729 11.7248 18.4495 11.7248 18.6371ZM15.1802 7.59719C15.1802 8.74535 14.9153 9.88246 14.4185 10.9092C13.9106 11.9469 13.1821 12.8524 12.2768 13.5589C12.1002 13.6914 11.9675 13.8569 11.8682 14.0446C11.7799 14.2433 11.7248 14.4532 11.7248 14.6629V15.1818C11.7248 15.5461 11.5811 15.8992 11.3162 16.1532C11.0623 16.4181 10.7091 16.5618 10.3448 16.5618H4.82483C4.46051 16.5618 4.10736 16.4181 3.85345 16.1532C3.58849 15.8992 3.44484 15.5461 3.44484 15.1818V14.6629C3.44484 14.4532 3.40081 14.2433 3.30145 14.0557C3.21313 13.868 3.06949 13.7025 2.90389 13.57C1.99862 12.8634 1.27004 11.969 0.762207 10.9423C0.265409 9.91562 0.000245425 8.7785 0.000245425 7.63035C-0.0328744 3.52349 3.29036 0.1012 7.39722 0.00184018C8.4129 -0.0202397 9.41747 0.156378 10.3669 0.531736C11.3053 0.896054 12.1664 1.44802 12.884 2.15458C13.6127 2.86113 14.1868 3.71122 14.5842 4.64961C14.9706 5.57697 15.1802 6.58152 15.1802 7.59719ZM13.8002 7.59719C13.8002 6.75816 13.6346 5.94127 13.3034 5.17951C12.9833 4.41775 12.5196 3.72241 11.9234 3.14833C11.3273 2.56322 10.6319 2.11035 9.85911 1.81227C9.08632 1.50315 8.25837 1.35975 7.43038 1.38183C4.07423 1.45911 1.35816 4.26316 1.38024 7.63035C1.38024 8.5577 1.59007 9.48526 2.00959 10.3243C2.41807 11.1744 3.01431 11.903 3.75399 12.477C4.09623 12.742 4.36115 13.0731 4.54883 13.4484C4.72547 13.8238 4.82483 14.2434 4.82483 14.6629V15.1818H6.90021V11.3288L4.33914 8.76749C4.20666 8.63501 4.12944 8.46948 4.12944 8.2818C4.12944 8.09412 4.20666 7.92859 4.33914 7.79611C4.47162 7.66363 4.63715 7.58641 4.82483 7.58641C5.01251 7.58641 5.18908 7.66363 5.31052 7.79611L7.58482 10.0704L9.85911 7.79611C9.92535 7.72987 9.99154 7.67452 10.0799 7.6414C10.1682 7.60828 10.2565 7.58641 10.3448 7.58641C10.4331 7.58641 10.5214 7.60828 10.6098 7.6414C10.6981 7.67452 10.7643 7.72987 10.8305 7.79611C10.8967 7.86235 10.9521 7.92853 10.9852 8.01685C11.0183 8.10517 11.0402 8.19348 11.0402 8.2818C11.0402 8.37012 11.0183 8.45843 10.9852 8.54675C10.9521 8.63507 10.8967 8.70125 10.8305 8.76749L8.2802 11.3288V15.1818H10.3448V14.6629C10.3448 14.2434 10.4442 13.8238 10.6319 13.4484C10.8195 13.062 11.0844 12.731 11.4156 12.477C12.1664 11.903 12.7626 11.1523 13.1711 10.3132C13.5796 9.46317 13.8002 8.53559 13.8002 7.59719Z" fill="#FFDB56"/>
+<path d="M11.7248 18.6371C11.7248 18.8138 11.6476 18.9906 11.5262 19.1231C11.3937 19.2445 11.2168 19.3217 11.0402 19.3217H4.14022C3.95255 19.3217 3.77596 19.2445 3.64348 19.1231C3.52204 18.9906 3.44484 18.8138 3.44484 18.6371C3.44484 18.4495 3.52204 18.2729 3.64348 18.1404C3.77596 18.019 3.95255 17.9418 4.14022 17.9418H11.0402C11.2168 17.9418 11.3937 18.019 11.5262 18.1404C11.6476 18.2729 11.7248 18.4495 11.7248 18.6371ZM15.1802 7.59719C15.1802 8.74535 14.9153 9.88246 14.4185 10.9092C13.9106 11.9469 13.1821 12.8524 12.2768 13.5589C12.1002 13.6914 11.9675 13.8569 11.8682 14.0446C11.7799 14.2433 11.7248 14.4532 11.7248 14.6629V15.1818C11.7248 15.5461 11.5811 15.8992 11.3162 16.1532C11.0623 16.4181 10.7091 16.5618 10.3448 16.5618H4.82483C4.46051 16.5618 4.10736 16.4181 3.85345 16.1532C3.58849 15.8992 3.44484 15.5461 3.44484 15.1818V14.6629C3.44484 14.4532 3.40081 14.2433 3.30145 14.0557C3.21313 13.868 3.06949 13.7025 2.90389 13.57C1.99862 12.8634 1.27004 11.969 0.762207 10.9423C0.265409 9.91562 0.000245425 8.7785 0.000245425 7.63035C-0.0328744 3.52349 3.29036 0.1012 7.39722 0.00184018C8.4129 -0.0202397 9.41747 0.156378 10.3669 0.531736C11.3053 0.896054 12.1664 1.44802 12.884 2.15458C13.6127 2.86113 14.1868 3.71122 14.5842 4.64961C14.9706 5.57697 15.1802 6.58152 15.1802 7.59719ZM13.8002 7.59719C13.8002 6.75816 13.6346 5.94127 13.3034 5.17951C12.9833 4.41775 12.5196 3.72241 11.9234 3.14833C11.3273 2.56322 10.6319 2.11035 9.85911 1.81227C9.08632 1.50315 8.25837 1.35975 7.43038 1.38183C4.07423 1.45911 1.35816 4.26316 1.38024 7.63035C1.38024 8.5577 1.59007 9.48526 2.00959 10.3243C2.41807 11.1744 3.01431 11.903 3.75399 12.477C4.09623 12.742 4.36115 13.0731 4.54883 13.4484C4.72547 13.8238 4.82483 14.2434 4.82483 14.6629V15.1818H6.90021V11.3288L4.33914 8.76749C4.20666 8.63501 4.12944 8.46948 4.12944 8.2818C4.12944 8.09412 4.20666 7.92859 4.33914 7.79611C4.47162 7.66363 4.63715 7.58641 4.82483 7.58641C5.01251 7.58641 5.18908 7.66363 5.31052 7.79611L7.58482 10.0704L9.85911 7.79611C9.92535 7.72987 9.99154 7.67452 10.0799 7.6414C10.1682 7.60828 10.2565 7.58641 10.3448 7.58641C10.4331 7.58641 10.5214 7.60828 10.6098 7.6414C10.6981 7.67452 10.7643 7.72987 10.8305 7.79611C10.8967 7.86235 10.9521 7.92853 10.9852 8.01685C11.0183 8.10517 11.0402 8.19348 11.0402 8.2818C11.0402 8.37012 11.0183 8.45843 10.9852 8.54675C10.9521 8.63507 10.8967 8.70125 10.8305 8.76749L8.2802 11.3288V15.1818H10.3448V14.6629C10.3448 14.2434 10.4442 13.8238 10.6319 13.4484C10.8195 13.062 11.0844 12.731 11.4156 12.477C12.1664 11.903 12.7626 11.1523 13.1711 10.3132C13.5796 9.46317 13.8002 8.53559 13.8002 7.59719Z" fill="currentColor"/>
 </svg>
--- a/src/assets/icons/plus.svg
+++ b/src/assets/icons/plus.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 0C8.49092 0 8.88889 0.397969 8.88889 0.888889L8.88889 7.11111L15.1111 7.11111C15.602 7.11111 16 7.50908 16 8C16 8.49092 15.602 8.88889 15.1111 8.88889L8.88889 8.88889L8.88889 15.1111C8.88889 15.602 8.49092 16 8 16C7.50908 16 7.11111 15.602 7.11111 15.1111L7.11111 8.88889L0.888889 8.88889C0.397969 8.88889 0 8.49092 0 8C0 7.50908 0.397969 7.11111 0.888889 7.11111L7.11111 7.11111L7.11111 0.888889C7.11111 0.397969 7.50908 0 8 0Z" fill="currentColor"/>
+</svg>
--- 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: {
--- 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(() => {
--- 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 }"
--- 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) {
--- 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_ = {
--- 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)
--- a/src/utils/ellispsis.ts
+++ 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<HTMLElement> = {
+	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
--- 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 || []

 		// 如果不是重新生成模式，则添加用户消息到列表
--- a/src/views/home/agent/components/Preview.vue
+++ b/src/views/home/agent/components/Preview.vue
@@ -53,12 +53,12 @@
 		</template>
 		<template v-else-if="type === 'url'">
 			<div class="url-list flex">
-				<div class="url-item" v-for="item in urlList" :key="item">
-					<div class="url-title" @click="handleClickUrl(item)">
+				<div class="url-item flex flex-col" v-for="item in urlList" :key="item">
+					<div class="url-title" v-ellipsis="3" @click="handleClickUrl(item)">
 						{{ item }}
 						<img src="@/assets/images/link-outer.png" class="link-outer" />
 					</div>
-					<div class="url-link">{{ item }}</div>
+					<div class="url-link" v-ellipsis="3">{{ item }}</div>
 				</div>
 			</div>
 		</template>
@@ -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;
--- 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
--- a/src/views/home/components/Input.vue
+++ b/src/views/home/components/Input.vue
@@ -35,8 +35,36 @@
 			</div>
 			<div class="operate flex align-center space-between">
 				<div class="left flex align-center">
-					<div class="attach flex flex-center" @click="triggerFileUpload">
-						<img src="@/assets/icons/attach.svg" alt="" />
+					<div class="agent-operate flex flex-center">
+						<el-popover
+							placement="top-end"
+							trigger="click"
+							popper-class="agent-plus-popover"
+						>
+							<template #reference>
+								<SvgIcon name="plus" color="#0D0D0D" size="16" />
+							</template>
+							<template #default>
+								<div class="agent-modal flex flex-col">
+									<div class="file flex align-center" @click="triggerFileUpload">
+										<img src="@/assets/icons/attach.svg" class="file-icon" />
+										<span>Upload files</span>
+									</div>
+									<div class="gap"></div>
+									<div class="report flex align-center" @click="toogltReportTag">
+										<SvgIcon color="#5A5A5A" name="light" size="11" />
+										<span>Trending report</span>
+									</div>
+								</div>
+							</template>
+						</el-popover>
+					</div>
+					<div
+						class="attach flex flex-center"
+						@click="triggerFileUpload"
+						v-if="!isAgentMode"
+					>
+						<img src="@/assets/icons/attach.svg" />
 					</div>
 					<input
 						ref="fileInputRef"
@@ -186,7 +214,7 @@
 			class="report-btn flex space-between align-center"
 			@click="toogltReportTag"
 		>
-			<SvgIcon class="light-icon" name="light" size="16" />
+			<SvgIcon class="light-icon" color="#FFDB56" name="light" size="16" />
 			<span>{{ $t('Input.trendingReport') }}</span>
 		</div>
 		<Preview v-model="showPreview" :url="previewUrl" />
@@ -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;
+			}
+		}
+	}
 </style>