lxy/DevFlow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复: 多视图UX(知识库窄屏CSS+任务详情路由+项目灵感视图)

Browse Source
This commit is contained in:
绝尘
2026-06-16 02:33:16 +08:00
parent 10e4945e5a
commit 73ed4bd637
13 changed files with 70 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/i18n/en/dashboard.ts
View File

@@ -35,9 +35,7 @@ export default {
stage: {
planning: 'Planning',
coding: 'Coding',
paused: 'Paused',
done: 'Done',
cancelled: 'Cancelled',
},
ideaStatus: {
draft: 'Draft',

3
src/i18n/en/ideas.ts
View File

@@ -72,6 +72,9 @@ export default {
titlePlaceholder: 'Describe your idea in one sentence...',
descPlaceholder: 'More details (optional)...',
// Deep link not found
notFound: 'Idea not found or deleted',
// Native dialog text (confirm / alert)
confirmDelete: 'Delete idea "{title}"? This cannot be undone.',
promoteFailed: 'Promotion failed',

7
src/i18n/en/projects.ts
View File

@@ -39,11 +39,8 @@ export default {
// Status labels (PROJECT_STATUS_LABELS values in constants/project.ts use these keys)
status: {
planning: '📐 Planning',
in_progress: '💻 In Progress',
paused: '⏸ Paused',
completed: '✅ Completed',
cancelled: '❌ Cancelled',
active: '🚀 In Progress',
completed: '✅ Completed',
},
// Error fallbacks (user-visible via state.error)
err: {
@@ -55,6 +52,8 @@ export default {
restoreFailed: 'Failed to restore project',
purgeFailed: 'Failed to delete permanently',
loadWorkflowFailed: 'Failed to load workflow records',
approveFailed: 'Approval operation failed',
cancelFailed: 'Cancel approval failed',
},
},
}

2
src/i18n/zh-CN/dashboard.ts
View File

@@ -35,9 +35,7 @@ export default {
stage: {
planning: '规划中',
coding: '编码中',
paused: '已暂停',
done: '已完成',
cancelled: '已取消',
},
ideaStatus: {
draft: '草稿',

3
src/i18n/zh-CN/ideas.ts
View File

@@ -72,6 +72,9 @@ export default {
titlePlaceholder: '一句话描述你的灵感...',
descPlaceholder: '详细说明（可选）...',
// 深链不存在提示
notFound: '灵感不存在或已删除',
// 原生对话框文案（confirm / alert）
confirmDelete: '确定删除灵感「{title}」?此操作不可撤销。',
promoteFailed: '立项失败',

7
src/i18n/zh-CN/projects.ts
View File

@@ -38,11 +38,8 @@ export default {
// 状态文案(constants/project.ts 的 PROJECT_STATUS_LABELS 值走此 key)
status: {
planning: '📐 规划中',
in_progress: '💻 进行中',
paused: '⏸ 已暂停',
completed: '✅ 已完成',
cancelled: '❌ 已取消',
active: '🚀 进行中',
completed: '✅ 已完成',
},
// 错误回退(state.error 用户可见)
err: {
@@ -54,6 +51,8 @@ export default {
restoreFailed: '恢复项目失败',
purgeFailed: '彻底删除失败',
loadWorkflowFailed: '加载工作流记录失败',
approveFailed: '审批操作失败',
cancelFailed: '取消审批失败',
},
},
}

6
src/router/index.ts
View File

@@ -47,6 +47,12 @@ const routes = [
component: () => import('../views/Tasks.vue'),
meta: { title: '任务', icon: 'icon-thunder' },
},
{
path: '/tasks/:id',
name: 'TaskDetail',
component: () => import('../views/TaskDetail.vue'),
meta: { title: '任务详情', icon: 'icon-thunder' },
},
{
path: '/knowledge',
name: 'Knowledge',

12
src/stores/project/tasks.ts
View File

@@ -27,10 +27,14 @@ export function createTasksStore() {
}
async function updateTask(id: string, field: string, value: string) {
await taskApi.update(id, field, value)
const idx = state.tasks.findIndex(t => t.id === id)
if (idx >= 0) {
(state.tasks[idx] as any)[field] = value
try {
await taskApi.update(id, field, value)
const idx = state.tasks.findIndex(t => t.id === id)
if (idx >= 0) {
(state.tasks[idx] as any)[field] = value
}
} catch (e: any) {
state.error = e?.toString() ?? t('tasks.err.updateFailed')
}
}

2
src/stores/project/workflow.ts
View File

@@ -89,6 +89,7 @@ export function createWorkflowStore() {
state.pendingApproval = null
} catch (error) {
console.error('审批失败:', error)
state.error = error?.toString() ?? t('projects.err.approveFailed')
}
}
@@ -105,6 +106,7 @@ export function createWorkflowStore() {
state.pendingApproval = null
} catch (error) {
console.error('取消审批失败:', error)
state.error = error?.toString() ?? t('projects.err.cancelFailed')
}
}

10
src/views/Dashboard.vue
View File

@@ -126,15 +126,13 @@ const stats = computed(() => [
])
function getProjectStage(status: string): { stage: string; stageLabelKey: string; progress: number } {
// stage(颜色档)与 stageLabelKey(文案)语义必须一致：
// planning/cancelled 不再借用 coding/testing 颜色(否则颜色撒谎),改用专属颜色档。
// F-09 对齐:project status 死键(in_progress/paused/cancelled)已从后端映射移除,
// 此处 switch 同步收敛,与 constants/project.ts 的 PROJECT_STAGE_INFO 语义一致。
switch (status) {
case 'planning': return { stage: 'planning', stageLabelKey: 'planning', progress: 20 }
case 'in_progress': return { stage: 'coding', stageLabelKey: 'coding', progress: 55 }
case 'paused': return { stage: 'testing', stageLabelKey: 'paused', progress: 40 }
case 'active': return { stage: 'coding', stageLabelKey: 'coding', progress: 55 }
case 'completed': return { stage: 'release', stageLabelKey: 'done', progress: 100 }
case 'cancelled': return { stage: 'cancelled', stageLabelKey: 'cancelled', progress: 0 }
default: return { stage: 'coding', stageLabelKey: 'coding', progress: 30 }
default: return { stage: 'planning', stageLabelKey: 'planning', progress: 20 }
}
}

82
src/views/Ideas.vue
View File

@@ -206,8 +206,8 @@
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { Message } from '@arco-design/web-vue'
import { useProjectStore } from '../stores/project'
@@ -219,6 +219,7 @@ import type { IdeaRecord } from '../api/types'
const { t } = useI18n()
const router = useRouter()
const route = useRoute()
const store = useProjectStore()
// 确认弹层状态机抽至 composables/useConfirm(原 4 视图重复:Projects/ProjectDetail/Ideas/Settings)
@@ -448,6 +449,27 @@ async function onStatusChange(e: Event) {
onMounted(async () => {
ensureLoaded() // 后台预热 Markdown 渲染器(模块单例,与 AiChat/TaskDetail 共享),不阻塞
await store.loadIdeas()
// 从路由参数恢复选中灵感（修复 /ideas/:id 直接访问空白页 B-260615-36）
if (route.params.id) {
const id = route.params.id as string
const exists = store.ideas.some(i => i.id === id)
if (!exists) {
Message.warning(t('ideas.notFound'))
}
selectedId.value = id
}
})
// 同组件内路由变化时同步 selectedId（列表点击跳 /ideas/:id）
watch(() => route.params.id, (id) => {
if (id) {
const ideaId = id as string
const exists = store.ideas.some(i => i.id === ideaId)
if (!exists) {
Message.warning(t('ideas.notFound'))
}
selectedId.value = ideaId
}
})
</script>
@@ -811,62 +833,8 @@ onMounted(async () => {
margin-bottom: var(--df-gap-page);
}
/* ===== 灵感描述 Markdown 渲染(B-260615-25,样式同 TaskDetail B-24 .ai-md 收敛) ===== */
/* ===== 灵感描述 Markdown 渲染(B-260615-25,基础样式收敛至全局 ai-md.css) ===== */
.detail-desc.ai-md { white-space: normal; color: var(--df-text-secondary); }
.detail-desc.ai-md :deep(p) { margin: 0 0 6px; }
.detail-desc.ai-md :deep(p:last-child) { margin-bottom: 0; }
.detail-desc.ai-md :deep(ul), .detail-desc.ai-md :deep(ol) { margin: 4px 0; padding-left: 20px; }
.detail-desc.ai-md :deep(li) { margin: 2px 0; line-height: 1.5; }
.detail-desc.ai-md :deep(code) {
font-family: var(--df-font-mono);
font-size: 12px;
padding: 1px 5px;
background: rgba(255,255,255,0.06);
border-radius: var(--df-radius-sm);
color: var(--df-accent);
}
.detail-desc.ai-md :deep(pre) {
margin: 8px 0;
padding: 10px 12px;
background: var(--df-bg);
border: 0.5px solid var(--df-border);
border-radius: var(--df-radius);
overflow-x: auto;
}
.detail-desc.ai-md :deep(pre code) {
padding: 0;
background: transparent;
border-radius: 0;
color: var(--df-text-secondary);
font-size: 12px;
line-height: 1.5;
}
.detail-desc.ai-md :deep(blockquote) {
margin: 6px 0;
padding: 4px 12px;
border-left: 2px solid var(--df-accent);
color: var(--df-text-secondary);
}
.detail-desc.ai-md :deep(h1), .detail-desc.ai-md :deep(h2), .detail-desc.ai-md :deep(h3) {
font-weight: 500;
color: var(--df-text);
margin: 8px 0 4px;
}
.detail-desc.ai-md :deep(h1) { font-size: 16px; }
.detail-desc.ai-md :deep(h2) { font-size: 14px; }
.detail-desc.ai-md :deep(h3) { font-size: 13px; }
.detail-desc.ai-md :deep(a) { color: var(--df-accent); text-decoration: none; }
.detail-desc.ai-md :deep(a:hover) { text-decoration: underline; }
.detail-desc.ai-md :deep(strong) { font-weight: 500; color: var(--df-text); }
.detail-desc.ai-md :deep(hr) { border: none; border-top: 0.5px solid var(--df-border); margin: 8px 0; }
.detail-desc.ai-md :deep(table) {
width: 100%; border-collapse: collapse; margin: 6px 0;
font-size: 12px; overflow-x: auto; display: block;
}
.detail-desc.ai-md :deep(th), .detail-desc.ai-md :deep(td) {
padding: 4px 8px; border: 0.5px solid var(--df-border); text-align: left;
}
.detail-desc.ai-md :deep(th) { font-weight: 500; background: var(--df-bg); }
.detail-section {
margin-bottom: var(--df-gap-page);

66
src/views/Knowledge.vue
View File

@@ -564,7 +564,7 @@ onMounted(() => {
/* ===== 左右分栏 ===== */
.kn-layout {
display: grid; grid-template-columns: 360px 1fr; gap: var(--df-gap-page);
display: grid; grid-template-columns: minmax(240px, 360px) 1fr; gap: var(--df-gap-page);
flex: 1; min-height: 0;
}
.kn-list-panel, .kn-detail-panel {
@@ -573,7 +573,7 @@ onMounted(() => {
border-radius: var(--df-radius-lg);
overflow: hidden; display: flex; flex-direction: column;
}
.kn-detail-panel { overflow-y: auto; padding: 20px; }
.kn-detail-panel { overflow-y: auto; padding: 20px; min-width: 0; }
/* 左侧搜索 + 分类 */
.search-bar { padding: 12px 12px 0; }
@@ -631,62 +631,8 @@ onMounted(() => {
.detail-field label { display: block; font-size: 12px; color: var(--df-text-secondary); margin-bottom: 4px; }
.detail-content { font-size: 13px; color: var(--df-text); line-height: 1.6; white-space: pre-wrap; }
/* ===== 知识内容 Markdown 渲染(B-260615-25,样式同 TaskDetail B-24 .ai-md 收敛) ===== */
/* ===== 知识内容 Markdown 渲染(B-260615-25,基础样式收敛至全局 ai-md.css) ===== */
.detail-content.ai-md { white-space: normal; }
.detail-content.ai-md :deep(p) { margin: 0 0 6px; }
.detail-content.ai-md :deep(p:last-child) { margin-bottom: 0; }
.detail-content.ai-md :deep(ul), .detail-content.ai-md :deep(ol) { margin: 4px 0; padding-left: 20px; }
.detail-content.ai-md :deep(li) { margin: 2px 0; line-height: 1.5; }
.detail-content.ai-md :deep(code) {
font-family: var(--df-font-mono);
font-size: 12px;
padding: 1px 5px;
background: rgba(255,255,255,0.06);
border-radius: var(--df-radius-sm);
color: var(--df-accent);
}
.detail-content.ai-md :deep(pre) {
margin: 8px 0;
padding: 10px 12px;
background: var(--df-bg);
border: 0.5px solid var(--df-border);
border-radius: var(--df-radius);
overflow-x: auto;
}
.detail-content.ai-md :deep(pre code) {
padding: 0;
background: transparent;
border-radius: 0;
color: var(--df-text-secondary);
font-size: 12px;
line-height: 1.5;
}
.detail-content.ai-md :deep(blockquote) {
margin: 6px 0;
padding: 4px 12px;
border-left: 2px solid var(--df-accent);
color: var(--df-text-secondary);
}
.detail-content.ai-md :deep(h1), .detail-content.ai-md :deep(h2), .detail-content.ai-md :deep(h3) {
font-weight: 500;
color: var(--df-text);
margin: 8px 0 4px;
}
.detail-content.ai-md :deep(h1) { font-size: 16px; }
.detail-content.ai-md :deep(h2) { font-size: 14px; }
.detail-content.ai-md :deep(h3) { font-size: 13px; }
.detail-content.ai-md :deep(a) { color: var(--df-accent); text-decoration: none; }
.detail-content.ai-md :deep(a:hover) { text-decoration: underline; }
.detail-content.ai-md :deep(strong) { font-weight: 500; color: var(--df-text); }
.detail-content.ai-md :deep(hr) { border: none; border-top: 0.5px solid var(--df-border); margin: 8px 0; }
.detail-content.ai-md :deep(table) {
width: 100%; border-collapse: collapse; margin: 6px 0;
font-size: 12px; overflow-x: auto; display: block;
}
.detail-content.ai-md :deep(th), .detail-content.ai-md :deep(td) {
padding: 4px 8px; border: 0.5px solid var(--df-border); text-align: left;
}
.detail-content.ai-md :deep(th) { font-weight: 500; background: var(--df-bg); }
.detail-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag { font-size: 11px; padding: 2px 8px; border-radius: var(--df-radius-xs); background: rgba(108,99,255,0.1); color: var(--df-accent); }
.muted { color: var(--df-text-dim); font-size: 12px; }
@@ -778,4 +724,10 @@ onMounted(() => {
.form-input:focus, .form-select:focus { border-color: var(--df-accent); }
.form-textarea { min-height: 80px; resize: vertical; font-family: inherit; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
/* ===== 响应式:窄屏详情标题防竖线化(B-260616-19) ===== */
@media (max-width: 760px) {
.kn-layout { grid-template-columns: 1fr; }
.detail-title { font-size: 15px; }
}
</style>

62
src/views/ProjectDetail.vue
View File

@@ -272,7 +272,7 @@ const currentProject = computed(() =>
)
// B-260615-25:项目描述 Markdown 渲染(复用 AiChat/TaskDetail 同款渲染器,模块级单例),
// useRendered 封装 computed(读 mdReady 触发响应式 + renderMd)+ ensureLoaded(幂等预热)
const { rendered: renderedDesc, ensureLoaded: ensureMdLoaded } = useRendered(
const { rendered: renderedDesc, ensureLoaded } = useRendered(
() => currentProject.value?.description ?? '',
)
const stageKey = computed(() => currentProject.value?.status ?? 'planning')
@@ -378,7 +378,7 @@ async function relocateDir() {
await checkPath()
} catch (e: any) {
console.error('重定位失败:', e)
Message.error(t('projectDetail.relocateFailed', { msg: e?.toString() ?? '未知错误' }))
Message.error(t('projectDetail.relocateFailed', { msg: e?.toString() ?? t('common.unknownError') }))
}
}
@@ -456,7 +456,7 @@ watch(() => store.pendingApproval, (newApproval) => {
// ── 生命周期 ──
onMounted(async () => {
ensureMdLoaded() // 后台预热 Markdown 渲染器(模块单例,与 AiChat/TaskDetail 共享),不阻塞
ensureLoaded() // 后台预热 Markdown 渲染器(模块单例,与 AiChat/TaskDetail 共享),不阻塞
await store.loadProjects()
await store.loadTasks() // 全量加载,详情页用 computed 过滤本项目(避免覆盖全局 tasks 单例)
unlisten = await store.startEventListener()
@@ -544,62 +544,8 @@ onUnmounted(() => {
border: 0.5px solid var(--df-border);
}
/* ===== 项目描述 Markdown 渲染(B-260615-25,样式同 TaskDetail B-24 .ai-md 收敛) ===== */
/* ===== 项目描述 Markdown 渲染(B-260615-25,基础样式收敛至全局 ai-md.css) ===== */
.description.ai-md { font-size: 14px; color: var(--df-text); line-height: 1.6; }
.description.ai-md :deep(p) { margin: 0 0 6px; }
.description.ai-md :deep(p:last-child) { margin-bottom: 0; }
.description.ai-md :deep(ul), .description.ai-md :deep(ol) { margin: 4px 0; padding-left: 20px; }
.description.ai-md :deep(li) { margin: 2px 0; line-height: 1.5; }
.description.ai-md :deep(code) {
font-family: var(--df-font-mono);
font-size: 12px;
padding: 1px 5px;
background: rgba(255,255,255,0.06);
border-radius: var(--df-radius-sm);
color: var(--df-accent);
}
.description.ai-md :deep(pre) {
margin: 8px 0;
padding: 10px 12px;
background: var(--df-bg);
border: 0.5px solid var(--df-border);
border-radius: var(--df-radius);
overflow-x: auto;
}
.description.ai-md :deep(pre code) {
padding: 0;
background: transparent;
border-radius: 0;
color: var(--df-text-secondary);
font-size: 12px;
line-height: 1.5;
}
.description.ai-md :deep(blockquote) {
margin: 6px 0;
padding: 4px 12px;
border-left: 2px solid var(--df-accent);
color: var(--df-text-secondary);
}
.description.ai-md :deep(h1), .description.ai-md :deep(h2), .description.ai-md :deep(h3) {
font-weight: 500;
color: var(--df-text);
margin: 8px 0 4px;
}
.description.ai-md :deep(h1) { font-size: 16px; }
.description.ai-md :deep(h2) { font-size: 14px; }
.description.ai-md :deep(h3) { font-size: 13px; }
.description.ai-md :deep(a) { color: var(--df-accent); text-decoration: none; }
.description.ai-md :deep(a:hover) { text-decoration: underline; }
.description.ai-md :deep(strong) { font-weight: 500; color: var(--df-text); }
.description.ai-md :deep(hr) { border: none; border-top: 0.5px solid var(--df-border); margin: 8px 0; }
.description.ai-md :deep(table) {
width: 100%; border-collapse: collapse; margin: 6px 0;
font-size: 12px; overflow-x: auto; display: block;
}
.description.ai-md :deep(th), .description.ai-md :deep(td) {
padding: 4px 8px; border: 0.5px solid var(--df-border); text-align: left;
}
.description.ai-md :deep(th) { font-weight: 500; background: var(--df-bg); }
</style>
<style scoped>