Merge branch 'dhk-1' into 'master'

Dhk 1

See merge request knowledge-base-bj/deerflow-server!88

frontend-web/src/components/workspace/settings/memory-settings-page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { PenLineIcon, PlusIcon, SearchIcon, Trash2Icon } from "lucide-react";
+import { PenLineIcon, PlusIcon, SearchIcon, Trash2Icon, Heart, BookOpen, Map, Zap, Target, ShieldAlert } from "lucide-react";
 import { useMemo, useState } from "react";
 import { toast } from "sonner";
 
@@ -464,13 +464,41 @@ const HISTORY_LABELS: Record<string, string> = {
   longTermBackground: "长期背景",
 };
 
+const CATEGORY_LABELS: Record<string, Record<string, string>> = {
+  zh: {
+    preference: "偏好",
+    knowledge: "知识",
+    context: "背景",
+    behavior: "行为",
+    goal: "目标",
+    correction: "纠偏",
+  },
+  en: {
+    preference: "Preference",
+    knowledge: "Knowledge",
+    context: "Context",
+    behavior: "Behavior",
+    goal: "Goal",
+    correction: "Correction",
+  },
+};
+
 const CATEGORY_COLORS: Record<string, string> = {
-  preference: "bg-blue-100 text-blue-700",
-  knowledge: "bg-green-100 text-green-700",
-  context: "bg-yellow-100 text-yellow-700",
-  behavior: "bg-purple-100 text-purple-700",
-  goal: "bg-orange-100 text-orange-700",
-  correction: "bg-red-100 text-red-700",
+  preference: "bg-blue-50 text-blue-700 border border-blue-200/50 dark:bg-blue-950/30 dark:text-blue-400 dark:border-blue-900/30",
+  knowledge: "bg-green-50 text-green-700 border border-green-200/50 dark:bg-green-950/30 dark:text-green-400 dark:border-green-900/30",
+  context: "bg-amber-50 text-amber-700 border border-amber-200/50 dark:bg-amber-950/30 dark:text-amber-400 dark:border-amber-900/30",
+  behavior: "bg-purple-50 text-purple-700 border border-purple-200/50 dark:bg-purple-950/30 dark:text-purple-400 dark:border-purple-900/30",
+  goal: "bg-orange-50 text-orange-700 border border-orange-200/50 dark:bg-orange-950/30 dark:text-orange-400 dark:border-orange-900/30",
+  correction: "bg-red-50 text-red-700 border border-red-200/50 dark:bg-red-950/30 dark:text-red-400 dark:border-red-900/30",
+};
+
+const CATEGORY_ICONS: Record<string, React.ElementType> = {
+  preference: Heart,
+  knowledge: BookOpen,
+  context: Map,
+  behavior: Zap,
+  goal: Target,
+  correction: ShieldAlert,
 };
 
 /** V1 记忆只读视图:展示 memory.json 的全部字段，Tab 布局。 */
@@ -484,6 +512,9 @@ function MemoryV1View({
     memory_usage: string;
   };
 }) {
+  const { locale } = useI18n();
+  const isZh = locale.startsWith("zh");
+  const labelMap = isZh ? CATEGORY_LABELS.zh : CATEGORY_LABELS.en;
   const ctxEntries = Object.entries(memory.user_context ?? {}).filter(([, v]) => v);
   const historyEntries = Object.entries(memory.history ?? {}).filter(([, v]) => v);
 
@@ -519,37 +550,63 @@ function MemoryV1View({
                 暂无事实记录，对话后系统会自动提取。
               </div>
             ) : (
-              <div className="space-y-2">
-                {memory.facts.map((fact) => (
-                  <div key={fact.id} className="rounded-md border p-3 space-y-1.5">
-                    <div className="flex items-center gap-2">
-                      <span
-                        className={`rounded px-1.5 py-0.5 text-xs font-medium ${
-                          CATEGORY_COLORS[fact.category] ?? "bg-gray-100 text-gray-700"
-                        }`}
-                      >
-                        {fact.category}
-                      </span>
-                      <div className="flex-1 h-1.5 rounded-full bg-muted overflow-hidden">
-                        <div
-                          className="h-full rounded-full bg-primary"
-                          style={{ width: `${Math.round(fact.confidence * 100)}%` }}
-                        />
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 pt-2">
+                {memory.facts.map((fact) => {
+                  const categoryLabel = labelMap[fact.category] ?? fact.category;
+                  const Icon = CATEGORY_ICONS[fact.category] ?? PlusIcon;
+                  return (
+                    <div
+                      key={fact.id}
+                      className="group relative flex flex-col justify-between rounded-xl border border-border/40 bg-gradient-to-br from-card to-card/50 hover:from-card hover:to-card hover:border-primary/30 hover:shadow-md hover:-translate-y-0.5 transition-all duration-300 p-5 space-y-4 dark:border-[#213D5E]/40 dark:from-[#022248]/40 dark:to-[#022248]/10 dark:hover:from-[#022248]/60 dark:hover:to-[#022248]/30 overflow-hidden"
+                    >
+                      {/* Subtle top highlight */}
+                      <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+
+                      <div className="space-y-4">
+                        <div className="flex items-center justify-between gap-2">
+                          <span
+                            className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium border shadow-sm ${
+                              CATEGORY_COLORS[fact.category] ?? "bg-gray-100 text-gray-700 border-gray-200"
+                            }`}
+                          >
+                            <Icon className="w-3.5 h-3.5" />
+                            {categoryLabel}
+                          </span>
+                          <div className="flex flex-col items-end gap-1">
+                            <span className="text-[11px] text-muted-foreground font-semibold tracking-wider">
+                              {Math.round(fact.confidence * 100)}%
+                            </span>
+                            {/* Confidence Progress Bar */}
+                            <div className="h-1 w-12 rounded-full bg-muted overflow-hidden">
+                              <div
+                                className="h-full rounded-full bg-primary transition-all duration-500"
+                                style={{ width: `${Math.round(fact.confidence * 100)}%` }}
+                              />
+                            </div>
+                          </div>
+                        </div>
+
+                        <p className="text-[14px] text-foreground/90 leading-relaxed whitespace-pre-wrap [overflow-wrap:anywhere]">
+                          {desensitize(fact.content)}
+                        </p>
                       </div>
-                      <span className="text-xs text-muted-foreground shrink-0">
-                        {Math.round(fact.confidence * 100)}%
-                      </span>
+
+                      {fact.sourceError && (
+                        <div className="mt-auto pt-2">
+                          <div className="rounded-lg bg-red-50/80 dark:bg-red-950/30 border border-red-100 dark:border-red-900/50 p-3 text-xs text-red-600 dark:text-red-400 shadow-sm">
+                            <div className="flex items-center gap-1.5 font-semibold mb-1">
+                              <ShieldAlert className="w-3.5 h-3.5" />
+                              <span>避免</span>
+                            </div>
+                            <p className="leading-relaxed opacity-90">{desensitize(fact.sourceError)}</p>
+                          </div>
+                        </div>
+                      )}
                     </div>
-                    <p className="text-sm whitespace-pre-wrap [overflow-wrap:anywhere]">{desensitize(fact.content)}</p>
-                    {fact.sourceError && (
-                      <p className="rounded bg-red-50 px-2 py-1 text-xs text-red-600 dark:bg-[#311629] dark:text-[#EE212C]">
-                        避免：{desensitize(fact.sourceError)}
-                      </p>
-                    )}
-                  </div>
-                ))}
+                  );
+                })}
               </div>
-             )}
+            )}
           </div>
         </TabsContent>
 

frontend-web/src/open-canvas/pages/AIWritingPage.tsx

@@ -102,17 +102,99 @@ import {
 // Panel IDs used as keys in the v4 Layout map
 const WRITING_ID = 'aw-writing';
 const DRAFT_ID   = 'aw-draft';
+// 初始问答阶段（idle）专用的两栏 ID：左=问答助手，右=写作配置表单
+const SETUP_CHAT_ID = 'aw-setup-chat';
+const SETUP_FORM_ID = 'aw-setup-form';
 
 // Match the original canvas page proportions (chat=35, artifact=65)
 const DEFAULT_LAYOUT = { [WRITING_ID]: 35, [DRAFT_ID]: 65 };
+// idle 阶段镜像原比例：问答框在左占大头(65)，配置表单在右占小头(35)
+const SETUP_LAYOUT = { [SETUP_CHAT_ID]: 65, [SETUP_FORM_ID]: 35 };
 
 /**
- * 右侧面板：未开始写作（idle）时显示「写作助手 Q&A」，帮用户聊清并回填左侧表单；
- * 一旦开始写作（status !== idle）就切回草稿预览。
+ * 写作配置表单面板（写作助手回填的目标），抽出复用：idle 时在右栏，开始写作后在左栏。
  */
-function AIWritingRightPanel() {
+function WritingFormPanel({ hideAdvancedFields }: { hideAdvancedFields: boolean }) {
+  return (
+    // 与原布局保持相同的 flex-1 min-h-0 包裹，确保内部 h-full 正确解析
+    <div className="flex-1 min-h-0 overflow-hidden">
+      <AIWritingPanel hideAdvancedFields={hideAdvancedFields} />
+    </div>
+  );
+}
+
+/**
+ * 根据写作状态切换两套左右布局：
+ *  - idle（初始问答阶段）：左=「写作助手 Q&A」，右=「写作配置选项」表单；
+ *  - 开始写作后：回到原布局——左=写作配置/时间线面板，右=草稿预览。
+ */
+function AIWritingLayout({ hideAdvancedFields }: { hideAdvancedFields: boolean }) {
+  const layoutRef = useRef<GroupImperativeHandle>(null);
   const { state } = useAIWriting();
-  return state.status === 'idle' ? <WritingSetupChat /> : <AIWritingDraftPanel />;
+
+  if (state.status === 'idle') {
+    return (
+      <ResizablePanelGroup
+        orientation="horizontal"
+        groupRef={layoutRef}
+        defaultLayout={SETUP_LAYOUT}
+        className="h-full"
+      >
+        {/* 左侧：写作助手 Q&A */}
+        <ResizablePanel
+          id={SETUP_CHAT_ID}
+          defaultSize={65}
+          minSize={40}
+          className="overflow-hidden"
+        >
+          <WritingSetupChat />
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        {/* 右侧：写作配置选项表单 */}
+        <ResizablePanel
+          id={SETUP_FORM_ID}
+          defaultSize={35}
+          minSize={20}
+          className="overflow-hidden flex flex-col"
+        >
+          <WritingFormPanel hideAdvancedFields={hideAdvancedFields} />
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    );
+  }
+
+  return (
+    <ResizablePanelGroup
+      orientation="horizontal"
+      groupRef={layoutRef}
+      defaultLayout={DEFAULT_LAYOUT}
+      className="h-full"
+    >
+      {/* 左侧：AI 写作面板，与原画布页左侧等宽 */}
+      <ResizablePanel
+        id={WRITING_ID}
+        defaultSize={35}
+        minSize={20}
+        className="overflow-hidden flex flex-col"
+      >
+        <WritingFormPanel hideAdvancedFields={hideAdvancedFields} />
+      </ResizablePanel>
+
+      <ResizableHandle withHandle />
+
+      {/* 右侧：草稿预览面板 */}
+      <ResizablePanel
+        id={DRAFT_ID}
+        defaultSize={65}
+        minSize={40}
+        className="overflow-hidden"
+      >
+        <AIWritingDraftPanel />
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  );
 }
 
 export default function AIWritingPage({
@@ -120,8 +202,6 @@ export default function AIWritingPage({
 }: {
   hideAdvancedFields?: boolean;
 } = {}) {
-  const layoutRef = useRef<GroupImperativeHandle>(null);
-
   return (
     <CanvasThreadProvider>
     <CanvasGraphProvider>
@@ -131,37 +211,7 @@ export default function AIWritingPage({
       <TooltipProvider delayDuration={300}>
         <div className="h-full flex flex-col overflow-hidden bg-background">
           <div className="flex-1 min-h-0 overflow-hidden">
-            <ResizablePanelGroup
-              orientation="horizontal"
-              groupRef={layoutRef}
-              defaultLayout={DEFAULT_LAYOUT}
-              className="h-full"
-            >
-              {/* 左侧：AI 写作面板，与原画布页左侧等宽 */}
-              <ResizablePanel
-                id={WRITING_ID}
-                defaultSize={35}
-                minSize={20}
-                className="overflow-hidden flex flex-col"
-              >
-                {/* 与原布局保持相同的 flex-1 min-h-0 包裹，确保内部 h-full 正确解析 */}
-                <div className="flex-1 min-h-0 overflow-hidden">
-                  <AIWritingPanel hideAdvancedFields={hideAdvancedFields} />
-                </div>
-              </ResizablePanel>
-
-              <ResizableHandle withHandle />
-
-              {/* 右侧：草稿预览面板 */}
-              <ResizablePanel
-                id={DRAFT_ID}
-                defaultSize={65}
-                minSize={40}
-                className="overflow-hidden"
-              >
-                <AIWritingRightPanel />
-              </ResizablePanel>
-            </ResizablePanelGroup>
+            <AIWritingLayout hideAdvancedFields={hideAdvancedFields} />
           </div>
         </div>
       </TooltipProvider>