样式修改

2026-06-04 11:08:42 +08:00
1 parent 062f984262
commit 5b686824c5
@@ -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>