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

src/views/Ideas.vue

@@ -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);