GithubBackup/MyGoNavi
1
0
Fork 0
mirror of https://github.com/Syngnat/GoNavi.git synced 2026-06-18 20:49:45 +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

7
frontend/public/db-icons/chroma.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>Chroma</title>
<circle cx="8.5" cy="12" r="4.3" fill="#7C3AED" opacity="0.96"/>
<circle cx="14.7" cy="8.7" r="4" fill="#EC4899" opacity="0.88"/>
<circle cx="14.7" cy="15.3" r="4" fill="#22C55E" opacity="0.88"/>
<circle cx="11.8" cy="12" r="2.2" fill="#FFFFFF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 358 B

7
frontend/public/db-icons/gaussdb.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>GaussDB</title>
<circle cx="12" cy="12" r="2.2" fill="#0B7FAB"/>
<ellipse cx="12" cy="12" rx="7.2" ry="4.8" fill="none" stroke="#0B7FAB" stroke-width="2"/>
<ellipse cx="12" cy="12" rx="7.2" ry="4.8" fill="none" stroke="#38BDF8" stroke-width="2" opacity="0.9" transform="rotate(60 12 12)"/>
<circle cx="18.6" cy="10.1" r="1.6" fill="#38BDF8"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 439 B

6
frontend/public/db-icons/goldendb.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>GoldenDB</title>
<path d="M5 15.8 12 5l7 10.8H5Z" fill="#F59E0B"/>
<path d="M7.3 14.2 12 7.2l4.7 7H7.3Z" fill="#FCD34D"/>
<rect x="6" y="16.6" width="12" height="2.4" rx="1.2" fill="#B45309"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 287 B

7
frontend/public/db-icons/iotdb.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>Apache IoTDB</title>
<ellipse cx="12" cy="6.1" rx="5.8" ry="2.6" fill="#14B8A6"/>
<path d="M6.2 6.1v8.2c0 1.5 2.6 2.7 5.8 2.7s5.8-1.2 5.8-2.7V6.1" fill="#0F766E"/>
<ellipse cx="12" cy="14.3" rx="5.8" ry="2.6" fill="#14B8A6"/>
<path d="M7.4 11.6h2.1l1.3-2.1 2.1 3.9 1.3-1.8h2.4" fill="none" stroke="#FFFFFF" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 471 B

11
frontend/public/db-icons/kafka.svg Normal file
View File

@@ -0,0 +1,11 @@
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>Kafka</title>
<circle cx="12" cy="12" r="2.2" fill="#111827"/>
<circle cx="12" cy="5.2" r="1.8" fill="#111827"/>
<circle cx="12" cy="18.8" r="1.8" fill="#111827"/>
<circle cx="6.1" cy="8.6" r="1.8" fill="#111827"/>
<circle cx="17.9" cy="8.6" r="1.8" fill="#111827"/>
<circle cx="6.1" cy="15.4" r="1.8" fill="#111827"/>
<circle cx="17.9" cy="15.4" r="1.8" fill="#111827"/>
<path d="M12 7.1v2.7M12 14.2v2.7M7.8 9.6l2.1 1.1M16.2 9.6 14.1 10.7M7.8 14.4l2.1-1.1M16.2 14.4l-2.1-1.1" fill="none" stroke="#111827" stroke-width="1.6" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 654 B

9
frontend/public/db-icons/mqtt.svg Normal file
View File

@@ -0,0 +1,9 @@
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>MQTT</title>
<circle cx="12" cy="12" r="2.4" fill="#0EA5A4"/>
<circle cx="6.1" cy="8.2" r="2" fill="#14B8A6"/>
<circle cx="17.9" cy="8.2" r="2" fill="#14B8A6"/>
<circle cx="7.5" cy="17.1" r="1.8" fill="#0F766E"/>
<circle cx="16.5" cy="17.1" r="1.8" fill="#0F766E"/>
<path d="M7.7 9.1 10 11M16.3 9.1 14 11M8.8 15.7l1.5-2M15.2 15.7l-1.5-2" fill="none" stroke="#0EA5A4" stroke-width="1.6" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 511 B

7
frontend/public/db-icons/qdrant.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>Qdrant</title>
<path d="M12 4.5a7.5 7.5 0 1 0 5.3 12.8" fill="none" stroke="#DC244C" stroke-width="3" stroke-linecap="round"/>
<path d="M15.8 15.8 19 19" fill="none" stroke="#DC244C" stroke-width="3" stroke-linecap="round"/>
<circle cx="16.9" cy="7.4" r="1.7" fill="#F59E0B"/>
<circle cx="7.7" cy="16.8" r="1.7" fill="#7C3AED"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 425 B

9
frontend/public/db-icons/rabbitmq.svg Normal file
View File

@@ -0,0 +1,9 @@
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>RabbitMQ</title>
<path d="M8.8 9.2V5.7c0-1.2.7-2.2 1.7-2.2s1.7 1 1.7 2.2v3.1" fill="#FF6B35"/>
<path d="M13 8.6V4.7c0-1.2.7-2.2 1.7-2.2s1.7 1 1.7 2.2v4.6" fill="#FF6B35"/>
<path d="M6 13.2A6 5.8 0 1 1 18 13.2C18 16.4 15.3 19 12 19s-6-2.6-6-5.8Z" fill="#FF6B35"/>
<circle cx="10" cy="13.1" r="1" fill="#FFFFFF"/>
<circle cx="14" cy="13.1" r="1" fill="#FFFFFF"/>
<path d="M10.3 16c.9.8 2.5.8 3.4 0" fill="none" stroke="#FFFFFF" stroke-width="1.4" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 570 B

6
frontend/public/db-icons/rocketmq.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>RocketMQ</title>
<path d="M15.4 4.4c-3.6 0-6.3 2.2-7.6 6.1l-3.1 1.8 2.2 1.2-.6 2.7 2.7-.6 1.2 2.2 1.8-3.1c3.9-1.3 6.1-4 6.1-7.6 0-.8-.1-1.5-.3-2.3-.8-.2-1.5-.4-2.4-.4Z" fill="#EA580C"/>
<circle cx="13.6" cy="8.8" r="1.8" fill="#FFFFFF"/>
<path d="M7.4 16.7 5 19.1" fill="none" stroke="#FDBA74" stroke-width="1.8" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 432 B

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" />