新建体验升级：彩色协议图标体系 + Apifox 式卡片新建面板

- 新增 KindIcon：6 协议 + 目录的彩色圆角方块图标（渐变底 + 白色图形 + 内高光），全应用统一配色
- 新增 NewMenu 下拉面板：双列网格卡片（图标 + 名称 + 副标题）、分组标题、通栏「新建目录 / 选择位置新建…」
- 新建弹窗类型选择、侧栏树非 HTTP 请求行、标签页图标全部换用彩色 KindIcon
- 浏览器验证：面板开合/创建联动、弹窗选中态、树与标签页图标；53 项测试全绿

packages/ui/src/components/KindIcon.tsx

@@ -0,0 +1,47 @@
+/**
+ * 协议彩色图标：饱和渐变圆角方块 + 白色图形（对齐 Apifox / Apipost 的新建面板视觉）。
+ * 新建面板、新建弹窗、侧栏树、标签页共用同一套配色，保证全应用一致。
+ */
+import type { RequestKind } from "@opsxapi/core";
+import { Icon, type IconName } from "./icons";
+
+export const KIND_COLORS: Record<RequestKind | "folder", { color: string; icon: IconName; label: string }> = {
+  http: { color: "#3b82f6", icon: "globe", label: "HTTP" },
+  graphql: { color: "#ec4899", icon: "hexagon", label: "GraphQL" },
+  websocket: { color: "#f97316", icon: "zap", label: "WebSocket" },
+  sse: { color: "#0ea5e9", icon: "radio", label: "SSE" },
+  socketio: { color: "#14b8a6", icon: "plug-zap", label: "Socket.IO" },
+  mqtt: { color: "#10b981", icon: "mailbox", label: "MQTT" },
+  folder: { color: "#8b5cf6", icon: "folder-plus", label: "目录" },
+};
+
+export function KindIcon({
+  kind,
+  size = 28,
+  className,
+}: {
+  kind: RequestKind | "folder";
+  size?: number;
+  className?: string;
+}) {
+  const meta = KIND_COLORS[kind];
+  return (
+    <span
+      className={className}
+      aria-hidden="true"
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: size,
+        height: size,
+        borderRadius: Math.max(5, Math.round(size * 0.3)),
+        background: `linear-gradient(135deg, ${meta.color}, color-mix(in srgb, ${meta.color} 72%, #000))`,
+        boxShadow: "inset 0 1px 0 rgba(255,255,255,0.25), 0 1px 2px rgba(0,0,0,0.18)",
+        flexShrink: 0,
+      }}
+    >
+      <Icon name={meta.icon} size={Math.round(size * 0.56)} style={{ color: "#fff", strokeWidth: 2.2 }} />
+    </span>
+  );
+}