fix:project over the title and close backgroud task

This commit is contained in:
p
2026-01-17 20:52:33 +08:00
parent 59ab8f8935
commit e72d29621f
2 changed files with 68 additions and 8 deletions
+66 -6
View File
@@ -2,7 +2,7 @@
<div class="home-view">
<div class="header">
<h2>My Projects</h2>
<el-button type="primary" @click="dialogVisible = true">New Project</el-button>
<el-button type="primary" @click="openCreateDialog">New Project</el-button>
</div>
<el-row :gutter="20">
@@ -10,11 +10,14 @@
<el-card shadow="hover" class="project-card" @click="goToProject(project.id)">
<template #header>
<div class="card-header">
<span>{{ project.title }}</span>
<span class="project-title" :title="project.title">{{ project.title }}</span>
<div class="actions">
<el-button type="text" icon="Edit" @click.stop="openEditDialog(project)"></el-button>
<el-button type="text" icon="Delete" @click.stop="deleteProject(project.id)"></el-button>
</div>
</div>
</template>
<p>{{ project.description || 'No description' }}</p>
<p class="project-desc">{{ project.description || 'No description' }}</p>
<div class="footer">
<span>{{ new Date(project.updated_at).toLocaleDateString() }}</span>
</div>
@@ -22,7 +25,7 @@
</el-col>
</el-row>
<el-dialog v-model="dialogVisible" title="Create New Project">
<el-dialog v-model="dialogVisible" :title="isEdit ? 'Edit Project' : 'Create New Project'">
<el-form :model="form">
<el-form-item label="Title">
<el-input v-model="form.title" />
@@ -33,7 +36,7 @@
</el-form>
<template #footer>
<el-button @click="dialogVisible = false">Cancel</el-button>
<el-button type="primary" @click="createProject">Create</el-button>
<el-button type="primary" @click="saveProject">{{ isEdit ? 'Save' : 'Create' }}</el-button>
</template>
</el-dialog>
</div>
@@ -48,7 +51,8 @@ import { ElMessage } from 'element-plus'
const router = useRouter()
const projects = ref([])
const dialogVisible = ref(false)
const form = ref({ title: '', description: '' })
const isEdit = ref(false)
const form = ref({ id: '', title: '', description: '' })
const fetchProjects = async () => {
try {
@@ -59,6 +63,26 @@ const fetchProjects = async () => {
}
}
const openCreateDialog = () => {
isEdit.value = false
form.value = { title: '', description: '' }
dialogVisible.value = true
}
const openEditDialog = (project) => {
isEdit.value = true
form.value = { id: project.id, title: project.title, description: project.description }
dialogVisible.value = true
}
const saveProject = async () => {
if (isEdit.value) {
await updateProject()
} else {
await createProject()
}
}
const createProject = async () => {
try {
const res = await axios.post('/api/v1/projects/', form.value)
@@ -70,6 +94,20 @@ const createProject = async () => {
}
}
const updateProject = async () => {
try {
await axios.put(`/api/v1/projects/${form.value.id}`, {
title: form.value.title,
description: form.value.description
})
ElMessage.success('Updated successfully')
dialogVisible.value = false
fetchProjects()
} catch (error) {
ElMessage.error('Failed to update project')
}
}
const deleteProject = async (id) => {
try {
await axios.delete(`/api/v1/projects/${id}`)
@@ -106,4 +144,26 @@ onMounted(fetchProjects)
justify-content: space-between;
align-items: center;
}
.project-title {
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 60%;
display: inline-block;
}
.actions {
display: flex;
gap: 4px;
}
.project-desc {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
height: 3em;
color: #666;
font-size: 0.9em;
}
</style>
+1 -1
View File
@@ -113,7 +113,7 @@ const imageVersion = ref(Date.now())
// Task State
const activeTasks = ref([])
const isTaskManagerCollapsed = ref(false)
const isTaskManagerCollapsed = ref(true)
const taskPollingInterval = ref(null)
// Dialog State