feat(knowledge): 笔记页实体可点击筛选 + chip 美化

- 实体改为按钮：点击即在左侧列表筛出提及该实体的知识（清空来源/状态筛选）
- chip 加阴影/hover 上浮/类型 ring 标签/实体区 Sparkles 图标，更精致

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend-web/src/pages/KnowledgeBasePage.tsx

@@ -9,6 +9,7 @@ import {
   RefreshCw,
   Save,
   Search,
+  Sparkles,
   Trash2,
   X,
 } from "lucide-react";
@@ -415,7 +416,13 @@ function VaultPageDialog({
   );
 }
 
-function NoteDetail({ noteId }: { noteId: string }) {
+function NoteDetail({
+  noteId,
+  onEntityClick,
+}: {
+  noteId: string;
+  onEntityClick?: (name: string) => void;
+}) {
   const navigate = useNavigate();
   const { data: note, isLoading } = useKnowledgeNote(noteId);
   const { data: wikiLinks } = useNoteWikilinks(noteId);
@@ -578,22 +585,28 @@ function NoteDetail({ noteId }: { noteId: string }) {
 
               {note.entities && note.entities.length > 0 ? (
                 <div className="mb-4 flex flex-wrap items-center gap-1.5">
-                  <span className="text-muted-foreground mr-0.5 text-xs">实体</span>
+                  <span className="text-muted-foreground mr-0.5 inline-flex items-center gap-1 text-xs">
+                    <Sparkles className="size-3" /> 实体
+                  </span>
                   {note.entities.map((ent) => {
                     const meta = entityMeta(ent.entity_type);
                     return (
-                      <span
+                      <button
+                        type="button"
                         key={`${ent.name}-${ent.entity_type ?? ""}`}
+                        onClick={() => onEntityClick?.(ent.name)}
+                        title={`筛选提及「${ent.name}」的知识`}
                         className={cn(
-                          "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium",
+                          "group inline-flex cursor-pointer items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium shadow-sm transition-all hover:-translate-y-px hover:shadow",
                           meta.className,
                         )}
-                        title={meta.label}
                       >
-                        <span className="size-1.5 rounded-full bg-current opacity-60" />
-                        {ent.name}
-                        <span className="opacity-60">{meta.label}</span>
-                      </span>
+                        <span className="size-1.5 shrink-0 rounded-full bg-current opacity-70 transition-transform group-hover:scale-125" />
+                        <span>{ent.name}</span>
+                        <span className="rounded-sm px-1 text-[10px] opacity-70 ring-1 ring-current ring-inset">
+                          {meta.label}
+                        </span>
+                      </button>
                     );
                   })}
                 </div>
@@ -779,7 +792,14 @@ export default function KnowledgeBasePage() {
 
         <div className="min-h-0">
           {noteId ? (
-            <NoteDetail noteId={noteId} />
+            <NoteDetail
+              noteId={noteId}
+              onEntityClick={(name) => {
+                setKeyword(name);
+                setSourceType("all");
+                setStatus("all");
+              }}
+            />
           ) : (
             <div className="text-muted-foreground flex h-full items-center justify-center text-sm">
               从左侧选择一条知识查看详情