mirror of
https://github.com/Syngnat/GoNavi.git
synced 2026-08-04 04:47:49 +08:00
🐛 fix(database-icons): 替换数据源官方图标并修正透明底展示
- 为 OceanBase、GaussDB、GoldenDB、Kafka、RocketMQ 等数据源替换官方品牌资源 - 扩展 DatabaseIcons 对 svg/png/ico 的统一加载与底色边框控制 - 补充图标资源断言测试并移除未使用的字母块 fallback
This commit is contained in:
Syngnat
@@ -4,91 +4,40 @@ import { renderToStaticMarkup } from 'react-dom/server';
|
||||
|
||||
import { DB_ICON_TYPES, getDbIcon, getDbIconLabel } from './DatabaseIcons';
|
||||
|
||||
const BRAND_ICON_CASES: Array<[string, string, string]> = [
|
||||
['elasticsearch', 'Elasticsearch', 'elasticsearch.svg'],
|
||||
['oceanbase', 'OceanBase', 'oceanbase.png'],
|
||||
['oracle', 'Oracle', 'oracle.ico'],
|
||||
['starrocks', 'StarRocks', 'starrocks.png'],
|
||||
['kingbase', '金仓', 'kingbase.ico'],
|
||||
['dameng', '达梦', 'dameng.png'],
|
||||
['vastbase', 'VastBase', 'vastbase.svg'],
|
||||
['opengauss', 'OpenGauss', 'opengauss.ico'],
|
||||
['gaussdb', 'GaussDB', 'gaussdb.ico'],
|
||||
['goldendb', 'GoldenDB', 'goldendb.ico'],
|
||||
['highgo', '瀚高', 'highgo.ico'],
|
||||
['iris', 'InterSystems IRIS', 'iris.png'],
|
||||
['tdengine', 'TDengine', 'tdengine.ico'],
|
||||
['iotdb', 'Apache IoTDB', 'iotdb.svg'],
|
||||
['rocketmq', 'RocketMQ', 'rocketmq.png'],
|
||||
['mqtt', 'MQTT', 'mqtt.svg'],
|
||||
['kafka', 'Kafka', 'kafka.png'],
|
||||
['rabbitmq', 'RabbitMQ', 'rabbitmq.svg'],
|
||||
['chroma', 'Chroma', 'chroma.svg'],
|
||||
['qdrant', 'Qdrant', 'qdrant.svg'],
|
||||
['jvm', 'JVM', 'jvm.ico'],
|
||||
];
|
||||
|
||||
describe('DatabaseIcons', () => {
|
||||
it('includes InterSystems IRIS in the selectable database icons', () => {
|
||||
expect(DB_ICON_TYPES).toContain('iris');
|
||||
expect(getDbIconLabel('iris')).toBe('InterSystems IRIS');
|
||||
});
|
||||
|
||||
it('includes Elasticsearch in the selectable database icons', () => {
|
||||
expect(DB_ICON_TYPES).toContain('elasticsearch');
|
||||
expect(getDbIconLabel('elasticsearch')).toBe('Elasticsearch');
|
||||
const markup = renderToStaticMarkup(<>{getDbIcon('elasticsearch', undefined, 22)}</>);
|
||||
expect(markup).toContain('elasticsearch.svg');
|
||||
expect(markup).toContain('alt="elasticsearch"');
|
||||
});
|
||||
|
||||
it('includes Chroma in the selectable database icons', () => {
|
||||
expect(DB_ICON_TYPES).toContain('chroma');
|
||||
expect(getDbIconLabel('chroma')).toBe('Chroma');
|
||||
const markup = renderToStaticMarkup(<>{getDbIcon('chroma', undefined, 22)}</>);
|
||||
expect(markup).toContain('chroma.svg');
|
||||
expect(markup).toContain('alt="chroma"');
|
||||
});
|
||||
|
||||
it('includes Qdrant in the selectable database icons', () => {
|
||||
expect(DB_ICON_TYPES).toContain('qdrant');
|
||||
expect(getDbIconLabel('qdrant')).toBe('Qdrant');
|
||||
const markup = renderToStaticMarkup(<>{getDbIcon('qdrant', undefined, 22)}</>);
|
||||
expect(markup).toContain('qdrant.svg');
|
||||
expect(markup).toContain('alt="qdrant"');
|
||||
});
|
||||
|
||||
it('includes Apache IoTDB in the selectable database icons', () => {
|
||||
expect(DB_ICON_TYPES).toContain('iotdb');
|
||||
expect(getDbIconLabel('iotdb')).toBe('Apache IoTDB');
|
||||
const markup = renderToStaticMarkup(<>{getDbIcon('iotdb', undefined, 22)}</>);
|
||||
expect(markup).toContain('iotdb.svg');
|
||||
expect(markup).toContain('alt="iotdb"');
|
||||
});
|
||||
|
||||
it('includes RocketMQ in the selectable database icons', () => {
|
||||
expect(DB_ICON_TYPES).toContain('rocketmq');
|
||||
expect(getDbIconLabel('rocketmq')).toBe('RocketMQ');
|
||||
const markup = renderToStaticMarkup(<>{getDbIcon('rocketmq', undefined, 22)}</>);
|
||||
expect(markup).toContain('rocketmq.svg');
|
||||
expect(markup).toContain('alt="rocketmq"');
|
||||
});
|
||||
|
||||
it('includes MQTT in the selectable database icons', () => {
|
||||
expect(DB_ICON_TYPES).toContain('mqtt');
|
||||
expect(getDbIconLabel('mqtt')).toBe('MQTT');
|
||||
const markup = renderToStaticMarkup(<>{getDbIcon('mqtt', undefined, 22)}</>);
|
||||
expect(markup).toContain('mqtt.svg');
|
||||
expect(markup).toContain('alt="mqtt"');
|
||||
});
|
||||
|
||||
it('includes Kafka in the selectable database icons', () => {
|
||||
expect(DB_ICON_TYPES).toContain('kafka');
|
||||
expect(getDbIconLabel('kafka')).toBe('Kafka');
|
||||
const markup = renderToStaticMarkup(<>{getDbIcon('kafka', undefined, 22)}</>);
|
||||
expect(markup).toContain('kafka.svg');
|
||||
expect(markup).toContain('alt="kafka"');
|
||||
});
|
||||
|
||||
it('includes RabbitMQ in the selectable database icons', () => {
|
||||
expect(DB_ICON_TYPES).toContain('rabbitmq');
|
||||
expect(getDbIconLabel('rabbitmq')).toBe('RabbitMQ');
|
||||
const markup = renderToStaticMarkup(<>{getDbIcon('rabbitmq', undefined, 22)}</>);
|
||||
expect(markup).toContain('rabbitmq.svg');
|
||||
expect(markup).toContain('alt="rabbitmq"');
|
||||
});
|
||||
|
||||
it('includes GaussDB in the selectable database icons', () => {
|
||||
expect(DB_ICON_TYPES).toContain('gaussdb');
|
||||
expect(getDbIconLabel('gaussdb')).toBe('GaussDB');
|
||||
const markup = renderToStaticMarkup(<>{getDbIcon('gaussdb', undefined, 22)}</>);
|
||||
expect(markup).toContain('gaussdb.svg');
|
||||
expect(markup).toContain('alt="gaussdb"');
|
||||
});
|
||||
|
||||
it('includes GoldenDB in the selectable database icons', () => {
|
||||
expect(DB_ICON_TYPES).toContain('goldendb');
|
||||
expect(getDbIconLabel('goldendb')).toBe('GoldenDB');
|
||||
const markup = renderToStaticMarkup(<>{getDbIcon('goldendb', undefined, 22)}</>);
|
||||
expect(markup).toContain('goldendb.svg');
|
||||
expect(markup).toContain('alt="goldendb"');
|
||||
});
|
||||
for (const [type, label, asset] of BRAND_ICON_CASES) {
|
||||
it(`includes ${label} in the selectable database icons`, () => {
|
||||
expect(DB_ICON_TYPES).toContain(type);
|
||||
expect(getDbIconLabel(type)).toBe(label);
|
||||
const markup = renderToStaticMarkup(<>{getDbIcon(type, undefined, 22)}</>);
|
||||
expect(markup).toContain(asset);
|
||||
expect(markup).toContain(`alt="${type}"`);
|
||||
});
|
||||
}
|
||||
|
||||
it('wraps database icons in a consistent frame for sidebar sizing', () => {
|
||||
const mysqlMarkup = renderToStaticMarkup(<>{getDbIcon('mysql', undefined, 22)}</>);
|
||||
|
||||
@@ -67,31 +67,90 @@ const DB_DEFAULT_COLORS: Record<string, string> = {
|
||||
export const getDbDefaultColor = (type: string): string =>
|
||||
DB_DEFAULT_COLORS[type?.toLowerCase()] || DB_DEFAULT_COLORS.custom;
|
||||
|
||||
// ─── 有品牌 SVG 文件的数据库类型（文件在 /db-icons/ 下） ────
|
||||
type BrandAssetConfig = {
|
||||
background?: string;
|
||||
borderColor?: string;
|
||||
iconScale?: number;
|
||||
src: string;
|
||||
};
|
||||
|
||||
const BRAND_SVG_TYPES = new Set([
|
||||
'mysql', 'mariadb', 'postgres', 'redis', 'mongodb', 'clickhouse', 'sqlite',
|
||||
'diros', 'sphinx', 'duckdb', 'sqlserver', 'elasticsearch',
|
||||
'gaussdb', 'goldendb', 'iotdb', 'rocketmq', 'mqtt', 'kafka', 'rabbitmq',
|
||||
'chroma', 'qdrant',
|
||||
]);
|
||||
// ─── 官方品牌资源（文件在 /db-icons/ 下） ────────────────────
|
||||
|
||||
/** 品牌 SVG 图标：用 <img> 加载 /db-icons/*.svg */
|
||||
const BrandSvgIcon: React.FC<{ type: string; size: number; color?: string }> = ({ type, size, color }) => {
|
||||
const bgColor = color || getDbDefaultColor(type);
|
||||
const BRAND_ASSET_CONFIGS: Record<string, BrandAssetConfig> = {
|
||||
mysql: { src: '/db-icons/mysql.svg' },
|
||||
mariadb: { src: '/db-icons/mariadb.svg' },
|
||||
oceanbase: { src: '/db-icons/oceanbase.png', iconScale: 0.72 },
|
||||
postgres: { src: '/db-icons/postgres.svg' },
|
||||
redis: { src: '/db-icons/redis.svg' },
|
||||
mongodb: { src: '/db-icons/mongodb.svg' },
|
||||
elasticsearch: { src: '/db-icons/elasticsearch.svg' },
|
||||
jvm: { src: '/db-icons/jvm.ico', iconScale: 0.72 },
|
||||
kingbase: { src: '/db-icons/kingbase.ico', iconScale: 0.72 },
|
||||
dameng: { src: '/db-icons/dameng.png', iconScale: 0.72 },
|
||||
oracle: { src: '/db-icons/oracle.ico', iconScale: 0.72 },
|
||||
sqlserver: { src: '/db-icons/sqlserver.svg' },
|
||||
clickhouse: { src: '/db-icons/clickhouse.svg' },
|
||||
sqlite: { src: '/db-icons/sqlite.svg' },
|
||||
duckdb: { src: '/db-icons/duckdb.svg' },
|
||||
vastbase: { src: '/db-icons/vastbase.svg', iconScale: 0.84 },
|
||||
opengauss: { src: '/db-icons/opengauss.ico', iconScale: 0.72 },
|
||||
gaussdb: { src: '/db-icons/gaussdb.ico', iconScale: 0.72 },
|
||||
goldendb: { src: '/db-icons/goldendb.ico', iconScale: 0.72 },
|
||||
highgo: { src: '/db-icons/highgo.ico', iconScale: 0.72 },
|
||||
iris: { src: '/db-icons/iris.png', iconScale: 0.72 },
|
||||
tdengine: { src: '/db-icons/tdengine.ico', iconScale: 0.72 },
|
||||
iotdb: {
|
||||
src: '/db-icons/iotdb.svg',
|
||||
background: '#0F766E',
|
||||
borderColor: '#0F766E',
|
||||
iconScale: 0.82,
|
||||
},
|
||||
rocketmq: {
|
||||
src: '/db-icons/rocketmq.png',
|
||||
background: '#0F172A',
|
||||
borderColor: '#EA580C',
|
||||
iconScale: 0.84,
|
||||
},
|
||||
mqtt: {
|
||||
src: '/db-icons/mqtt.svg',
|
||||
background: '#0F172A',
|
||||
borderColor: '#0EA5A4',
|
||||
iconScale: 0.84,
|
||||
},
|
||||
kafka: { src: '/db-icons/kafka.png', iconScale: 0.8 },
|
||||
rabbitmq: { src: '/db-icons/rabbitmq.svg', iconScale: 0.74 },
|
||||
chroma: { src: '/db-icons/chroma.svg', iconScale: 0.9 },
|
||||
qdrant: { src: '/db-icons/qdrant.svg', iconScale: 0.74 },
|
||||
diros: { src: '/db-icons/diros.svg' },
|
||||
starrocks: {
|
||||
src: '/db-icons/starrocks.png',
|
||||
background: '#0B1021',
|
||||
borderColor: '#00A6A6',
|
||||
iconScale: 0.84,
|
||||
},
|
||||
sphinx: { src: '/db-icons/sphinx.svg' },
|
||||
};
|
||||
|
||||
const BRAND_ASSET_TYPES = new Set(Object.keys(BRAND_ASSET_CONFIGS));
|
||||
|
||||
/** 品牌图标：用 <img> 加载官方 svg/png/ico 资源 */
|
||||
const BrandAssetIcon: React.FC<{ type: string; size: number; color?: string }> = ({ type, size, color }) => {
|
||||
const config = BRAND_ASSET_CONFIGS[type.toLowerCase()];
|
||||
const bgColor = color || config?.borderColor || getDbDefaultColor(type);
|
||||
const iconScale = config?.iconScale ?? 0.64;
|
||||
return (
|
||||
<IconFrame size={size}>
|
||||
<span style={{
|
||||
display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
|
||||
width: size, height: size, borderRadius: size * 0.22,
|
||||
background: '#fff', border: `1.5px solid ${bgColor}`,
|
||||
background: config?.background || '#fff', border: `1.5px solid ${bgColor}`,
|
||||
flexShrink: 0, overflow: 'hidden', boxSizing: 'border-box',
|
||||
}}>
|
||||
<img
|
||||
src={`/db-icons/${type}.svg`}
|
||||
src={config?.src || `/db-icons/${type}.svg`}
|
||||
alt={type}
|
||||
width={Math.round(size * 0.64)}
|
||||
height={Math.round(size * 0.64)}
|
||||
width={Math.round(size * iconScale)}
|
||||
height={Math.round(size * iconScale)}
|
||||
style={{ display: 'block', objectFit: 'contain' }}
|
||||
/>
|
||||
</span>
|
||||
@@ -99,128 +158,105 @@ const BrandSvgIcon: React.FC<{ type: string; size: number; color?: string }> = (
|
||||
);
|
||||
};
|
||||
|
||||
// ─── 彩色标签图标（fallback） ──────────────────────────────
|
||||
|
||||
/** 通用彩色标签：填充背景 + 白色粗体缩写 */
|
||||
const ColorBadge: React.FC<{ size: number; color: string; label: string }> = ({ size, color, label }) => {
|
||||
const textSize = label.length <= 2 ? size * 0.48 : size * 0.38;
|
||||
return (
|
||||
<IconFrame size={size}>
|
||||
<svg width={size} height={size} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0" y="0" width="24" height="24" rx="5" fill={color}/>
|
||||
<text
|
||||
x="12" y="12" dominantBaseline="central" textAnchor="middle"
|
||||
fontSize={textSize} fontWeight="800"
|
||||
style={{ fontFamily: 'var(--gn-font-sans, "Inter", "PingFang SC", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif)' }}
|
||||
fill="#fff" letterSpacing={label.length > 2 ? -0.5 : 0}
|
||||
>
|
||||
{label}
|
||||
</text>
|
||||
</svg>
|
||||
</IconFrame>
|
||||
);
|
||||
};
|
||||
|
||||
// ─── 各数据库图标 ───────────────────────────────────────────
|
||||
|
||||
// 有品牌 SVG 的数据库
|
||||
// 有品牌官方资源的数据库
|
||||
const MySQLIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<BrandSvgIcon type="mysql" size={size} color={color} />
|
||||
<BrandAssetIcon type="mysql" size={size} color={color} />
|
||||
);
|
||||
const MariaDBIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<BrandSvgIcon type="mariadb" size={size} color={color} />
|
||||
<BrandAssetIcon type="mariadb" size={size} color={color} />
|
||||
);
|
||||
const OceanBaseIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<ColorBadge size={size} color={color || DB_DEFAULT_COLORS.oceanbase} label="OB" />
|
||||
<BrandAssetIcon type="oceanbase" size={size} color={color} />
|
||||
);
|
||||
const PostgresIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<BrandSvgIcon type="postgres" size={size} color={color} />
|
||||
<BrandAssetIcon type="postgres" size={size} color={color} />
|
||||
);
|
||||
const RedisIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<BrandSvgIcon type="redis" size={size} color={color} />
|
||||
<BrandAssetIcon type="redis" size={size} color={color} />
|
||||
);
|
||||
const MongoDBIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<BrandSvgIcon type="mongodb" size={size} color={color} />
|
||||
<BrandAssetIcon type="mongodb" size={size} color={color} />
|
||||
);
|
||||
const ClickHouseIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<BrandSvgIcon type="clickhouse" size={size} color={color} />
|
||||
<BrandAssetIcon type="clickhouse" size={size} color={color} />
|
||||
);
|
||||
const SQLiteIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<BrandSvgIcon type="sqlite" size={size} color={color} />
|
||||
<BrandAssetIcon type="sqlite" size={size} color={color} />
|
||||
);
|
||||
|
||||
// 无品牌 SVG → 彩色文字标签
|
||||
const OracleIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<ColorBadge size={size} color={color || DB_DEFAULT_COLORS.oracle} label="Or" />
|
||||
<BrandAssetIcon type="oracle" size={size} color={color} />
|
||||
);
|
||||
const SQLServerIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<BrandSvgIcon type="sqlserver" size={size} color={color} />
|
||||
<BrandAssetIcon type="sqlserver" size={size} color={color} />
|
||||
);
|
||||
const DorisIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<BrandSvgIcon type="diros" size={size} color={color} />
|
||||
<BrandAssetIcon type="diros" size={size} color={color} />
|
||||
);
|
||||
const StarRocksIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<ColorBadge size={size} color={color || DB_DEFAULT_COLORS.starrocks} label="SR" />
|
||||
<BrandAssetIcon type="starrocks" size={size} color={color} />
|
||||
);
|
||||
const SphinxIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<BrandSvgIcon type="sphinx" size={size} color={color} />
|
||||
<BrandAssetIcon type="sphinx" size={size} color={color} />
|
||||
);
|
||||
const DuckDBIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<BrandSvgIcon type="duckdb" size={size} color={color} />
|
||||
<BrandAssetIcon type="duckdb" size={size} color={color} />
|
||||
);
|
||||
const KingBaseIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<ColorBadge size={size} color={color || DB_DEFAULT_COLORS.kingbase} label="KB" />
|
||||
<BrandAssetIcon type="kingbase" size={size} color={color} />
|
||||
);
|
||||
const DamengIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<ColorBadge size={size} color={color || DB_DEFAULT_COLORS.dameng} label="DM" />
|
||||
<BrandAssetIcon type="dameng" size={size} color={color} />
|
||||
);
|
||||
const VastBaseIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<ColorBadge size={size} color={color || DB_DEFAULT_COLORS.vastbase} label="VB" />
|
||||
<BrandAssetIcon type="vastbase" size={size} color={color} />
|
||||
);
|
||||
const OpenGaussIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<ColorBadge size={size} color={color || DB_DEFAULT_COLORS.opengauss} label="OG" />
|
||||
<BrandAssetIcon type="opengauss" size={size} color={color} />
|
||||
);
|
||||
const GaussDBIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<BrandSvgIcon type="gaussdb" size={size} color={color} />
|
||||
<BrandAssetIcon type="gaussdb" size={size} color={color} />
|
||||
);
|
||||
const GoldenDBIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<BrandSvgIcon type="goldendb" size={size} color={color} />
|
||||
<BrandAssetIcon type="goldendb" size={size} color={color} />
|
||||
);
|
||||
const HighGoIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<ColorBadge size={size} color={color || DB_DEFAULT_COLORS.highgo} label="HG" />
|
||||
<BrandAssetIcon type="highgo" size={size} color={color} />
|
||||
);
|
||||
const IrisIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<ColorBadge size={size} color={color || DB_DEFAULT_COLORS.iris} label="IR" />
|
||||
<BrandAssetIcon type="iris" size={size} color={color} />
|
||||
);
|
||||
const TDengineIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<ColorBadge size={size} color={color || DB_DEFAULT_COLORS.tdengine} label="TD" />
|
||||
<BrandAssetIcon type="tdengine" size={size} color={color} />
|
||||
);
|
||||
const IoTDBIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<BrandSvgIcon type="iotdb" size={size} color={color} />
|
||||
<BrandAssetIcon type="iotdb" size={size} color={color} />
|
||||
);
|
||||
const RocketMQIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<BrandSvgIcon type="rocketmq" size={size} color={color} />
|
||||
<BrandAssetIcon type="rocketmq" size={size} color={color} />
|
||||
);
|
||||
const MQTTIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<BrandSvgIcon type="mqtt" size={size} color={color} />
|
||||
<BrandAssetIcon type="mqtt" size={size} color={color} />
|
||||
);
|
||||
const KafkaIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<BrandSvgIcon type="kafka" size={size} color={color} />
|
||||
<BrandAssetIcon type="kafka" size={size} color={color} />
|
||||
);
|
||||
const RabbitMQIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<BrandSvgIcon type="rabbitmq" size={size} color={color} />
|
||||
<BrandAssetIcon type="rabbitmq" size={size} color={color} />
|
||||
);
|
||||
const ChromaIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<BrandSvgIcon type="chroma" size={size} color={color} />
|
||||
<BrandAssetIcon type="chroma" size={size} color={color} />
|
||||
);
|
||||
const QdrantIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<BrandSvgIcon type="qdrant" size={size} color={color} />
|
||||
<BrandAssetIcon type="qdrant" size={size} color={color} />
|
||||
);
|
||||
const JVMIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<ColorBadge size={size} color={color || DB_DEFAULT_COLORS.jvm} label="JVM" />
|
||||
<BrandAssetIcon type="jvm" size={size} color={color} />
|
||||
);
|
||||
const ElasticsearchIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<BrandSvgIcon type="elasticsearch" size={size} color={color} />
|
||||
<BrandAssetIcon type="elasticsearch" size={size} color={color} />
|
||||
);
|
||||
|
||||
/** Custom — 齿轮图标 */
|
||||
@@ -239,13 +275,6 @@ const CustomIcon: React.FC<DbIconProps> = ({ size = 16, color }) => {
|
||||
|
||||
// ─── 图标注册表 ─────────────────────────────────────────────
|
||||
|
||||
const DorisIconFallback: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<ColorBadge size={size} color={color || DB_DEFAULT_COLORS.diros} label="Do" />
|
||||
);
|
||||
const SphinxIconFallback: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<ColorBadge size={size} color={color || DB_DEFAULT_COLORS.sphinx} label="Sp" />
|
||||
);
|
||||
|
||||
const DB_ICON_MAP: Record<string, React.FC<DbIconProps>> = {
|
||||
mysql: MySQLIcon,
|
||||
mariadb: MariaDBIcon,
|
||||
@@ -289,8 +318,8 @@ export const DB_ICON_TYPES: string[] = [
|
||||
'kingbase', 'dameng', 'vastbase', 'opengauss', 'gaussdb', 'goldendb', 'highgo', 'iris', 'tdengine', 'iotdb', 'rocketmq', 'mqtt', 'kafka', 'rabbitmq', 'chroma', 'qdrant', 'elasticsearch', 'custom',
|
||||
];
|
||||
|
||||
/** 该类型是否有品牌 SVG 文件 */
|
||||
export const hasBrandSvg = (type: string): boolean => BRAND_SVG_TYPES.has(type?.toLowerCase());
|
||||
/** 该类型是否有品牌图标资源 */
|
||||
export const hasBrandSvg = (type: string): boolean => BRAND_ASSET_TYPES.has(type?.toLowerCase());
|
||||
|
||||
/** 获取数据库图标 React 节点 */
|
||||
export const getDbIcon = (type: string, color?: string, size?: number): React.ReactNode => {
|
||||
|
||||
Reference in New Issue
Block a user