138 lines
3.1 KiB
Vue
138 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, onUnmounted } from 'vue'
|
|
import type { IRawStepTask } from '@/stores'
|
|
import SvgIcon from '@/components/SvgIcon/index.vue'
|
|
|
|
const props = defineProps<{
|
|
task: IRawStepTask
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'save', taskId: string, content: string): void
|
|
}>()
|
|
|
|
const isEditing = ref(false)
|
|
const editingContent = ref('')
|
|
const editorRef = ref<HTMLElement>()
|
|
|
|
const startEditing = () => {
|
|
editingContent.value = props.task.TaskContent || ''
|
|
isEditing.value = true
|
|
}
|
|
|
|
const save = () => {
|
|
const trimmed = editingContent.value.trim()
|
|
emit('save', props.task.Id!, trimmed)
|
|
isEditing.value = false
|
|
}
|
|
|
|
const cancel = () => {
|
|
isEditing.value = false
|
|
}
|
|
|
|
const handleKeydown = (event: KeyboardEvent) => {
|
|
if (event.key === 'Enter') {
|
|
event.preventDefault()
|
|
save()
|
|
} else if (event.key === 'Escape') {
|
|
cancel()
|
|
}
|
|
}
|
|
|
|
// 点击外部保存
|
|
const handleClickOutside = (event: MouseEvent) => {
|
|
if (isEditing.value && editorRef.value && !editorRef.value.contains(event.target as Node)) {
|
|
save()
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
document.addEventListener('click', handleClickOutside)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
document.removeEventListener('click', handleClickOutside)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div ref="editorRef" v-if="isEditing" class="w-full">
|
|
<el-input
|
|
v-model="editingContent"
|
|
type="textarea"
|
|
:autosize="{ minRows: 2, maxRows: 4 }"
|
|
placeholder="请输入任务内容"
|
|
@keydown="handleKeydown"
|
|
class="task-content-editor"
|
|
size="small"
|
|
/>
|
|
</div>
|
|
<div v-else @dblclick="startEditing" class="w-full cursor-pointer task-content-wrapper">
|
|
<slot name="display">
|
|
<div class="text-[14px] text-[var(--color-text-secondary)] task-content-display">
|
|
{{ task.TaskContent }}
|
|
</div>
|
|
</slot>
|
|
<div class="edit-icon-bg" @click.stop="startEditing">
|
|
<svg-icon icon-class="Edit" class="edit-icon-svg" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.task-content-wrapper {
|
|
position: relative;
|
|
padding: 4px;
|
|
border: 2px solid transparent;
|
|
border-radius: 7px;
|
|
box-sizing: border-box;
|
|
transition: border-color 0.3s ease;
|
|
|
|
&:hover {
|
|
border-color: var(--color-task-edit-hover-border) !important;
|
|
}
|
|
|
|
.edit-icon-bg {
|
|
position: absolute;
|
|
right: -1px;
|
|
bottom: -1px;
|
|
width: 26px;
|
|
height: 22px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
cursor: pointer;
|
|
background: var(--color-edit-icon-bg);
|
|
border-radius: 8px 0px 7px 0px;
|
|
|
|
.edit-icon-svg {
|
|
color: var(--color-text-detail);
|
|
}
|
|
}
|
|
|
|
&:hover .edit-icon-bg {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.task-content-editor {
|
|
:deep(.el-textarea__inner) {
|
|
font-size: 14px;
|
|
color: var(--color-text-secondary);
|
|
background: transparent;
|
|
border: 1px solid var(--color-task-edit-hover-border) !important;
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
resize: none;
|
|
}
|
|
}
|
|
|
|
.task-content-display {
|
|
min-height: 40px;
|
|
word-break: break-word;
|
|
white-space: pre-wrap;
|
|
}
|
|
</style>
|