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