GithubBackup/MyGoNavi
1
0
Fork 0
mirror of https://github.com/Syngnat/GoNavi.git synced 2026-07-06 18:41:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

✨ feat(icons): 补齐新增数据源品牌图标资源

Browse Source
This commit is contained in:
Syngnat
2026-06-14 13:07:57 +08:00
parent ca9eb65fdd
commit df3a49becf
11 changed files with 98 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/components/DatabaseIcons.test.tsx
View File

@@ -22,63 +22,72 @@ describe('DatabaseIcons', () => {
expect(DB_ICON_TYPES).toContain('chroma');
expect(getDbIconLabel('chroma')).toBe('Chroma');
const markup = renderToStaticMarkup(<>{getDbIcon('chroma', undefined, 22)}</>);
expect(markup).toContain('>Ch</text>');
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('>Qd</text>');
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('>Io</text>');
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('>Rm</text>');
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('>Mq</text>');
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('>Kf</text>');
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('>RM</text>');
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('>GS</text>');
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('>GD</text>');
expect(markup).toContain('goldendb.svg');
expect(markup).toContain('alt="goldendb"');
});
it('wraps database icons in a consistent frame for sidebar sizing', () => {

20
frontend/src/components/DatabaseIcons.tsx
View File

@@ -72,6 +72,8 @@ export const getDbDefaultColor = (type: string): 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',
]);
/** 品牌 SVG 图标：用 <img> 加载 /db-icons/*.svg */
@@ -179,10 +181,10 @@ const OpenGaussIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
<ColorBadge size={size} color={color || DB_DEFAULT_COLORS.opengauss} label="OG" />
);
const GaussDBIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
<ColorBadge size={size} color={color || DB_DEFAULT_COLORS.gaussdb} label="GS" />
<BrandSvgIcon type="gaussdb" size={size} color={color} />
);
const GoldenDBIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
<ColorBadge size={size} color={color || DB_DEFAULT_COLORS.goldendb} label="GD" />
<BrandSvgIcon 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" />
@@ -194,25 +196,25 @@ const TDengineIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
<ColorBadge size={size} color={color || DB_DEFAULT_COLORS.tdengine} label="TD" />
);
const IoTDBIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
<ColorBadge size={size} color={color || DB_DEFAULT_COLORS.iotdb} label="Io" />
<BrandSvgIcon type="iotdb" size={size} color={color} />
);
const RocketMQIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
<ColorBadge size={size} color={color || DB_DEFAULT_COLORS.rocketmq} label="Rm" />
<BrandSvgIcon type="rocketmq" size={size} color={color} />
);
const MQTTIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
<ColorBadge size={size} color={color || DB_DEFAULT_COLORS.mqtt} label="Mq" />
<BrandSvgIcon type="mqtt" size={size} color={color} />
);
const KafkaIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
<ColorBadge size={size} color={color || DB_DEFAULT_COLORS.kafka} label="Kf" />
<BrandSvgIcon type="kafka" size={size} color={color} />
);
const RabbitMQIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
<ColorBadge size={size} color={color || DB_DEFAULT_COLORS.rabbitmq} label="RM" />
<BrandSvgIcon type="rabbitmq" size={size} color={color} />
);
const ChromaIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
<ColorBadge size={size} color={color || DB_DEFAULT_COLORS.chroma} label="Ch" />
<BrandSvgIcon type="chroma" size={size} color={color} />
);
const QdrantIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
<ColorBadge size={size} color={color || DB_DEFAULT_COLORS.qdrant} label="Qd" />
<BrandSvgIcon 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" />