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

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>