From 67d561a40808932fbcb40dcaa6f4f38008d0c4e3 Mon Sep 17 00:00:00 2001
From: tianma-if <yingwaizhiying@gmail.com>
Date: Sun, 6 Sep 2026 16:52:08 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=B2=BE=E7=AE=80=E6=9E=B6?=
 =?UTF-8?q?=E6=9E=84=E5=9B=BE=E7=BB=84=E4=BB=B6=E9=80=89=E6=8B=A9=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/components/DiagramEditorPane.test.mjs | 4 +++-
 apps/web/src/components/DiagramEditorPane.tsx      | 9 +--------
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/components/DiagramEditorPane.test.mjs b/apps/web/src/components/DiagramEditorPane.test.mjs
index db41885a..2672f035 100644
--- a/apps/web/src/components/DiagramEditorPane.test.mjs
+++ b/apps/web/src/components/DiagramEditorPane.test.mjs
@@ -98,7 +98,7 @@ describe("diagram editor canvas surface", () => {
 
   test("provides architecture components, boundaries, semantic edges, and editable labels", () => {
     expect(source).toContain('document.kind === "architecture"');
-    expect(source).toContain('addNode("service")');
+    expect(source).not.toContain('onClick={() => addNode("service")}');
     expect(source).toContain('{ shape: "database", icon: Database');
     expect(source).toContain('{ shape: "boundary", icon: Box');
     expect(source).toContain('t("diagram.architectureConnectHint")');
@@ -128,6 +128,8 @@ describe("diagram editor canvas surface", () => {
     expect(source).toContain("<Collapsible key={category.id} defaultOpen>");
     expect(source).toContain("category.items.filter");
     expect(source).toContain('className="grid grid-cols-7 gap-1 px-1 pb-2"');
+    expect(source).toContain('text-xs font-semibold');
+    expect(source).not.toContain('{category.items.length}</span>');
     expect(source).toContain('<TooltipContent side="top">');
     expect(source).toContain('aria-label={label}');
     expect(source).toContain('options.label ??');
diff --git a/apps/web/src/components/DiagramEditorPane.tsx b/apps/web/src/components/DiagramEditorPane.tsx
index ce412d9e..4e3ac4d7 100644
--- a/apps/web/src/components/DiagramEditorPane.tsx
+++ b/apps/web/src/components/DiagramEditorPane.tsx
@@ -343,10 +343,9 @@ const ArchitectureComponentLibrary = ({
           {categories.length > 0 ? categories.map((category) => (
             <Collapsible key={category.id} defaultOpen>
               <DropdownMenuItem asChild onSelect={(event) => event.preventDefault()}>
-                <CollapsibleTrigger className="group flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm font-semibold text-slate-700 hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-green)]">
+                <CollapsibleTrigger className="group flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs font-semibold text-slate-700 hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-green)]">
                   <ChevronDown className="h-4 w-4 text-slate-400 transition-transform group-data-[state=closed]:-rotate-90" />
                   {t(category.labelKey)}
-                  <span className="ml-auto text-xs font-normal text-slate-400">{category.items.length}</span>
                 </CollapsibleTrigger>
               </DropdownMenuItem>
               <CollapsibleContent>
@@ -2083,12 +2082,6 @@ export const DiagramEditorPane = ({
               </Tooltip>
             ) : document.kind === "architecture" ? (
               <>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button size="sm" variant="soft" onClick={() => addNode("service")}><Server className="h-4 w-4" />{t("diagram.addService")}</Button>
-                  </TooltipTrigger>
-                  <TooltipContent>{t("diagram.architectureShortcuts")}</TooltipContent>
-                </Tooltip>
                 <ArchitectureComponentLibrary
                   onAdd={(item) => addNode(item.shape, {
                     label: t(item.labelKey),