2 changed files with 583 additions and 0 deletions
|
After Width: | Height: | Size: 430 B |
@ -0,0 +1,582 @@ |
|||
<template> |
|||
<div |
|||
v-show="visible" |
|||
class="four-t-panel" |
|||
:class="{ 'four-t-panel-ready': layoutReady }" |
|||
:style="panelStyle" |
|||
> |
|||
<div class="four-t-panel-header" @mousedown="onDragStart"> |
|||
<span class="four-t-panel-title">4T</span> |
|||
<div class="four-t-header-actions" @mousedown.stop> |
|||
<el-button |
|||
v-if="!isEditMode" |
|||
type="primary" |
|||
size="mini" |
|||
@mousedown.stop |
|||
@click="enterEditMode" |
|||
> |
|||
编辑 |
|||
</el-button> |
|||
<template v-else> |
|||
<el-button |
|||
type="success" |
|||
size="mini" |
|||
@mousedown.stop |
|||
@click="saveAndExitEdit" |
|||
> |
|||
保存 |
|||
</el-button> |
|||
<el-button |
|||
size="mini" |
|||
@mousedown.stop |
|||
@click="cancelEdit" |
|||
> |
|||
取消 |
|||
</el-button> |
|||
</template> |
|||
<i class="el-icon-close close-btn" @mousedown.stop @click="$emit('update:visible', false)" title="关闭"></i> |
|||
</div> |
|||
</div> |
|||
<div class="four-t-panel-body"> |
|||
<div |
|||
v-for="section in sections" |
|||
:key="section.key" |
|||
class="four-t-section" |
|||
> |
|||
<div class="four-t-section-header"> |
|||
<span class="four-t-section-title">{{ section.title }}</span> |
|||
<div |
|||
v-if="isEditMode" |
|||
class="four-t-add-btn four-t-add-btn-inline" |
|||
@click="addImage(section.key)" |
|||
title="插入图片" |
|||
> |
|||
<i class="el-icon-plus"></i> |
|||
</div> |
|||
</div> |
|||
<div class="four-t-section-content four-t-content-box"> |
|||
<el-input |
|||
v-model="localData[section.key].text" |
|||
type="textarea" |
|||
:autosize="{ minRows: 2, maxRows: 8 }" |
|||
:placeholder="isEditMode ? '请输入文本内容' : ''" |
|||
:disabled="!isEditMode" |
|||
class="four-t-textarea" |
|||
/> |
|||
<div v-if="localData[section.key].images.length > 0" class="four-t-images-inline"> |
|||
<div |
|||
v-for="(img, idx) in localData[section.key].images" |
|||
:key="idx" |
|||
class="four-t-image-item" |
|||
> |
|||
<img :src="img" alt="插入的图片" /> |
|||
<i |
|||
v-if="isEditMode" |
|||
class="el-icon-close remove-img" |
|||
@click="removeImage(section.key, idx)" |
|||
></i> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div |
|||
class="four-t-resize-handle" |
|||
@mousedown="onResizeStart" |
|||
title="拖动调整大小" |
|||
></div> |
|||
<input |
|||
ref="fileInput" |
|||
type="file" |
|||
accept="image/*" |
|||
style="display: none" |
|||
@change="onFileSelected" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { save4TData, get4TData } from '@/api/system/routes' |
|||
|
|||
const SECTIONS = [ |
|||
{ key: 'threat', title: 'THREAT' }, |
|||
{ key: 'task', title: 'TASK' }, |
|||
{ key: 'target', title: 'TARGET' }, |
|||
{ key: 'tactic', title: 'TACTIC' } |
|||
] |
|||
|
|||
const defaultData = () => ({ |
|||
threat: { text: '', images: [] }, |
|||
task: { text: '', images: [] }, |
|||
target: { text: '', images: [] }, |
|||
tactic: { text: '', images: [] } |
|||
}) |
|||
|
|||
export default { |
|||
name: 'FourTPanel', |
|||
props: { |
|||
visible: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
roomId: { |
|||
type: [String, Number], |
|||
default: null |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
sections: SECTIONS, |
|||
localData: defaultData(), |
|||
isEditMode: false, |
|||
editDataBackup: null, |
|||
isDragging: false, |
|||
dragStartX: 0, |
|||
dragStartY: 0, |
|||
panelLeft: null, |
|||
panelTop: null, |
|||
panelWidth: 420, |
|||
panelHeight: 480, |
|||
isResizing: false, |
|||
resizeStartX: 0, |
|||
resizeStartY: 0, |
|||
resizeStartW: 0, |
|||
resizeStartH: 0, |
|||
layoutReady: false, |
|||
} |
|||
}, |
|||
computed: { |
|||
panelStyle() { |
|||
const left = this.panelLeft != null ? this.panelLeft : (window.innerWidth - this.panelWidth) - 20 |
|||
const top = this.panelTop != null ? this.panelTop : 80 |
|||
return { |
|||
left: `${left}px`, |
|||
top: `${top}px`, |
|||
width: `${this.panelWidth}px`, |
|||
height: `${this.panelHeight}px` |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
visible: { |
|||
handler(val) { |
|||
if (val && this.roomId) { |
|||
this.loadData() |
|||
} |
|||
}, |
|||
immediate: true |
|||
}, |
|||
roomId: { |
|||
handler(val) { |
|||
if (val && this.visible) { |
|||
this.loadData() |
|||
} |
|||
}, |
|||
immediate: true |
|||
} |
|||
}, |
|||
methods: { |
|||
async loadData() { |
|||
this.layoutReady = false |
|||
if (!this.roomId) { |
|||
this.layoutReady = true |
|||
return |
|||
} |
|||
try { |
|||
const res = await get4TData({ roomId: this.roomId }) |
|||
let d = res && res.data |
|||
if (d) { |
|||
if (typeof d === 'string') { |
|||
try { |
|||
d = JSON.parse(d) |
|||
} catch (e) { |
|||
this.layoutReady = true |
|||
return |
|||
} |
|||
} |
|||
this.localData = { |
|||
threat: { text: d.threat?.text || '', images: d.threat?.images || [] }, |
|||
task: { text: d.task?.text || '', images: d.task?.images || [] }, |
|||
target: { text: d.target?.text || '', images: d.target?.images || [] }, |
|||
tactic: { text: d.tactic?.text || '', images: d.tactic?.images || [] } |
|||
} |
|||
if (d.panelSize) { |
|||
const w = Number(d.panelSize.width) |
|||
const h = Number(d.panelSize.height) |
|||
if (!isNaN(w) && w >= 320 && w <= 800) this.panelWidth = w |
|||
if (!isNaN(h) && h >= 300 && h <= window.innerHeight - 60) this.panelHeight = h |
|||
} |
|||
if (d.panelPosition) { |
|||
const left = Number(d.panelPosition.left) |
|||
const top = Number(d.panelPosition.top) |
|||
if (!isNaN(left) && left >= 0) this.panelLeft = Math.min(left, window.innerWidth - this.panelWidth) |
|||
if (!isNaN(top) && top >= 0) this.panelTop = Math.min(top, window.innerHeight - this.panelHeight) |
|||
} |
|||
} |
|||
} catch (e) { |
|||
console.warn('加载4T数据失败:', e) |
|||
} finally { |
|||
this.layoutReady = true |
|||
} |
|||
}, |
|||
|
|||
enterEditMode() { |
|||
this.editDataBackup = JSON.parse(JSON.stringify(this.localData)) |
|||
this.isEditMode = true |
|||
}, |
|||
|
|||
saveAndExitEdit() { |
|||
if (!this.roomId) { |
|||
this.$message.warning('请先进入任务房间后再保存') |
|||
return |
|||
} |
|||
this.isEditMode = false |
|||
this.editDataBackup = null |
|||
this.$message.success('保存成功') |
|||
this.saveData().catch(() => {}) |
|||
}, |
|||
|
|||
cancelEdit() { |
|||
if (this.editDataBackup) { |
|||
this.localData = JSON.parse(JSON.stringify(this.editDataBackup)) |
|||
} |
|||
this.isEditMode = false |
|||
this.editDataBackup = null |
|||
this.$message.info('已取消编辑') |
|||
}, |
|||
|
|||
async saveData() { |
|||
if (!this.roomId) { |
|||
this.$message.warning('请先进入任务房间后再保存') |
|||
return |
|||
} |
|||
try { |
|||
const payload = { |
|||
...this.localData, |
|||
panelSize: { width: this.panelWidth, height: this.panelHeight } |
|||
} |
|||
if (this.panelLeft != null && this.panelTop != null) { |
|||
payload.panelPosition = { left: this.panelLeft, top: this.panelTop } |
|||
} |
|||
await save4TData({ |
|||
roomId: this.roomId, |
|||
data: JSON.stringify(payload) |
|||
}) |
|||
} catch (e) { |
|||
console.error('保存4T失败:', e) |
|||
this.$message.error('保存4T内容失败，请检查网络或权限') |
|||
} |
|||
}, |
|||
|
|||
addImage(sectionKey) { |
|||
this.pendingAddSection = sectionKey |
|||
this.$refs.fileInput && this.$refs.fileInput.click() |
|||
}, |
|||
|
|||
onFileSelected(e) { |
|||
const file = e.target.files && e.target.files[0] |
|||
if (!file || !file.type.startsWith('image/')) return |
|||
const reader = new FileReader() |
|||
reader.onload = (ev) => { |
|||
const base64 = ev.target.result |
|||
if (this.pendingAddSection && this.localData[this.pendingAddSection]) { |
|||
this.localData[this.pendingAddSection].images.push(base64) |
|||
} |
|||
this.pendingAddSection = null |
|||
} |
|||
reader.readAsDataURL(file) |
|||
e.target.value = '' |
|||
}, |
|||
|
|||
removeImage(sectionKey, index) { |
|||
if (this.localData[sectionKey] && this.localData[sectionKey].images) { |
|||
this.localData[sectionKey].images.splice(index, 1) |
|||
} |
|||
}, |
|||
|
|||
onDragStart(e) { |
|||
// 关闭按钮已用 @mousedown.stop 阻止冒泡，此处直接开始拖动 |
|||
e.preventDefault() |
|||
this.isDragging = true |
|||
const currentLeft = this.panelLeft != null ? this.panelLeft : (window.innerWidth - this.panelWidth - 20) |
|||
const currentTop = this.panelTop != null ? this.panelTop : 80 |
|||
this.dragStartX = e.clientX - currentLeft |
|||
this.dragStartY = e.clientY - currentTop |
|||
document.addEventListener('mousemove', this.onDragMove) |
|||
document.addEventListener('mouseup', this.onDragEnd) |
|||
}, |
|||
|
|||
onDragMove(e) { |
|||
if (!this.isDragging) return |
|||
e.preventDefault() |
|||
let left = e.clientX - this.dragStartX |
|||
let top = e.clientY - this.dragStartY |
|||
left = Math.max(0, Math.min(window.innerWidth - this.panelWidth, left)) |
|||
top = Math.max(0, Math.min(window.innerHeight - this.panelHeight, top)) |
|||
this.panelLeft = left |
|||
this.panelTop = top |
|||
}, |
|||
|
|||
onDragEnd() { |
|||
this.isDragging = false |
|||
document.removeEventListener('mousemove', this.onDragMove) |
|||
document.removeEventListener('mouseup', this.onDragEnd) |
|||
if (this.roomId) this.saveData() |
|||
}, |
|||
|
|||
onResizeStart(e) { |
|||
e.preventDefault() |
|||
e.stopPropagation() |
|||
this.isResizing = true |
|||
this.resizeStartX = e.clientX |
|||
this.resizeStartY = e.clientY |
|||
this.resizeStartW = this.panelWidth |
|||
this.resizeStartH = this.panelHeight |
|||
document.addEventListener('mousemove', this.onResizeMove) |
|||
document.addEventListener('mouseup', this.onResizeEnd) |
|||
}, |
|||
|
|||
onResizeMove(e) { |
|||
if (!this.isResizing) return |
|||
e.preventDefault() |
|||
const dx = e.clientX - this.resizeStartX |
|||
const dy = e.clientY - this.resizeStartY |
|||
let w = Math.max(320, Math.min(800, this.resizeStartW + dx)) |
|||
let h = Math.max(300, Math.min(window.innerHeight - 60, this.resizeStartH + dy)) |
|||
this.panelWidth = w |
|||
this.panelHeight = h |
|||
}, |
|||
|
|||
onResizeEnd() { |
|||
this.isResizing = false |
|||
document.removeEventListener('mousemove', this.onResizeMove) |
|||
document.removeEventListener('mouseup', this.onResizeEnd) |
|||
if (this.roomId) this.saveData() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.four-t-panel { |
|||
position: fixed; |
|||
opacity: 0; |
|||
pointer-events: none; |
|||
transition: opacity 0.15s ease-out; |
|||
background: rgba(255, 255, 255, 0.95); |
|||
backdrop-filter: blur(10px); |
|||
border: 1px solid rgba(0, 138, 255, 0.2); |
|||
border-radius: 8px; |
|||
box-shadow: 0 4px 20px rgba(0, 138, 255, 0.15); |
|||
z-index: 200; |
|||
overflow: hidden; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.four-t-panel-header { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 8px 12px; |
|||
background: rgba(0, 138, 255, 0.1); |
|||
border-bottom: 1px solid rgba(0, 138, 255, 0.15); |
|||
cursor: move; |
|||
user-select: none; |
|||
} |
|||
|
|||
.four-t-panel-title { |
|||
font-weight: 600; |
|||
color: #008aff; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.four-t-header-actions { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 8px; |
|||
} |
|||
|
|||
.four-t-header-actions .el-button { |
|||
margin: 0; |
|||
} |
|||
|
|||
.close-btn { |
|||
cursor: pointer; |
|||
font-size: 16px; |
|||
color: #606266; |
|||
} |
|||
.close-btn:hover { |
|||
color: #008aff; |
|||
} |
|||
|
|||
.four-t-panel-body { |
|||
display: grid; |
|||
grid-template-columns: 1fr 1fr; |
|||
grid-template-rows: 1fr 1fr; |
|||
gap: 12px; |
|||
padding: 12px; |
|||
flex: 1; |
|||
min-height: 0; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.four-t-section { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 8px; |
|||
background: #fff; |
|||
border: 1px solid #e4e7ed; |
|||
border-radius: 6px; |
|||
padding: 10px; |
|||
min-height: 0; |
|||
flex: 1; |
|||
} |
|||
|
|||
.four-t-section-header { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
flex-shrink: 0; |
|||
gap: 8px; |
|||
} |
|||
|
|||
.four-t-section-title { |
|||
font-weight: 600; |
|||
font-size: 12px; |
|||
color: #606266; |
|||
user-select: none; |
|||
} |
|||
|
|||
.four-t-add-btn-inline { |
|||
flex-shrink: 0; |
|||
width: 28px; |
|||
height: 28px; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.four-t-section-content { |
|||
display: flex; |
|||
flex-direction: column; |
|||
flex: 1; |
|||
min-height: 0; |
|||
gap: 0; |
|||
} |
|||
|
|||
.four-t-content-box { |
|||
border: 1px solid #dcdfe6; |
|||
border-radius: 4px; |
|||
padding: 8px; |
|||
background: #fff; |
|||
overflow-y: auto; |
|||
flex: 1; |
|||
min-height: 60px; |
|||
} |
|||
|
|||
.four-t-section-content .four-t-textarea { |
|||
flex: 0 0 auto; |
|||
display: block; |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.four-t-section-content .four-t-textarea >>> .el-textarea { |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.four-t-section-content .four-t-textarea >>> textarea.el-textarea__inner { |
|||
font-size: 12px; |
|||
border: none !important; |
|||
padding: 0 !important; |
|||
resize: none; |
|||
box-sizing: border-box; |
|||
min-height: 36px !important; |
|||
background: transparent !important; |
|||
} |
|||
.four-t-section-content >>> .el-textarea.is-disabled .el-textarea__inner { |
|||
background: transparent !important; |
|||
color: #606266; |
|||
cursor: default; |
|||
} |
|||
|
|||
.four-t-images-inline { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
gap: 6px; |
|||
margin-top: 8px; |
|||
align-items: flex-start; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.four-t-image-item { |
|||
position: relative; |
|||
width: 64px; |
|||
height: 64px; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.four-t-image-item img { |
|||
width: 100%; |
|||
height: 100%; |
|||
object-fit: cover; |
|||
border-radius: 4px; |
|||
border: 1px solid #e4e7ed; |
|||
display: block; |
|||
} |
|||
|
|||
.four-t-image-item .remove-img { |
|||
position: absolute; |
|||
top: -4px; |
|||
right: -4px; |
|||
width: 16px; |
|||
height: 16px; |
|||
background: #f56c6c; |
|||
color: #fff; |
|||
border-radius: 50%; |
|||
font-size: 10px; |
|||
cursor: pointer; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.four-t-add-btn { |
|||
width: 36px; |
|||
height: 36px; |
|||
border: 1px dashed #dcdfe6; |
|||
border-radius: 4px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
cursor: pointer; |
|||
color: #909399; |
|||
font-size: 18px; |
|||
transition: all 0.2s; |
|||
} |
|||
|
|||
.four-t-add-btn:hover { |
|||
border-color: #008aff; |
|||
color: #008aff; |
|||
background: rgba(0, 138, 255, 0.05); |
|||
} |
|||
|
|||
.four-t-resize-handle { |
|||
position: absolute; |
|||
right: 0; |
|||
bottom: 0; |
|||
width: 20px; |
|||
height: 20px; |
|||
cursor: nwse-resize; |
|||
user-select: none; |
|||
z-index: 10; |
|||
/* 右下角三角形拖拽区域 */ |
|||
background: linear-gradient(to top left, transparent 50%, rgba(0, 138, 255, 0.2) 50%); |
|||
} |
|||
.four-t-resize-handle:hover { |
|||
background: linear-gradient(to top left, transparent 50%, rgba(0, 138, 255, 0.4) 50%); |
|||
} |
|||
|
|||
.four-t-panel.four-t-panel-ready { |
|||
opacity: 1; |
|||
pointer-events: auto; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue