diff --git a/frontend/public/db-icons/chroma.svg b/frontend/public/db-icons/chroma.svg
new file mode 100644
index 0000000..1a22d29
--- /dev/null
+++ b/frontend/public/db-icons/chroma.svg
@@ -0,0 +1,7 @@
+
diff --git a/frontend/public/db-icons/gaussdb.svg b/frontend/public/db-icons/gaussdb.svg
new file mode 100644
index 0000000..a43e8fa
--- /dev/null
+++ b/frontend/public/db-icons/gaussdb.svg
@@ -0,0 +1,7 @@
+
diff --git a/frontend/public/db-icons/goldendb.svg b/frontend/public/db-icons/goldendb.svg
new file mode 100644
index 0000000..72df461
--- /dev/null
+++ b/frontend/public/db-icons/goldendb.svg
@@ -0,0 +1,6 @@
+
diff --git a/frontend/public/db-icons/iotdb.svg b/frontend/public/db-icons/iotdb.svg
new file mode 100644
index 0000000..4d1b940
--- /dev/null
+++ b/frontend/public/db-icons/iotdb.svg
@@ -0,0 +1,7 @@
+
diff --git a/frontend/public/db-icons/kafka.svg b/frontend/public/db-icons/kafka.svg
new file mode 100644
index 0000000..7bc2988
--- /dev/null
+++ b/frontend/public/db-icons/kafka.svg
@@ -0,0 +1,11 @@
+
diff --git a/frontend/public/db-icons/mqtt.svg b/frontend/public/db-icons/mqtt.svg
new file mode 100644
index 0000000..f82a854
--- /dev/null
+++ b/frontend/public/db-icons/mqtt.svg
@@ -0,0 +1,9 @@
+
diff --git a/frontend/public/db-icons/qdrant.svg b/frontend/public/db-icons/qdrant.svg
new file mode 100644
index 0000000..8e26bb2
--- /dev/null
+++ b/frontend/public/db-icons/qdrant.svg
@@ -0,0 +1,7 @@
+
diff --git a/frontend/public/db-icons/rabbitmq.svg b/frontend/public/db-icons/rabbitmq.svg
new file mode 100644
index 0000000..69072e6
--- /dev/null
+++ b/frontend/public/db-icons/rabbitmq.svg
@@ -0,0 +1,9 @@
+
diff --git a/frontend/public/db-icons/rocketmq.svg b/frontend/public/db-icons/rocketmq.svg
new file mode 100644
index 0000000..a5dec65
--- /dev/null
+++ b/frontend/public/db-icons/rocketmq.svg
@@ -0,0 +1,6 @@
+
diff --git a/frontend/src/components/DatabaseIcons.test.tsx b/frontend/src/components/DatabaseIcons.test.tsx
index 7cf5f09..d74a57a 100644
--- a/frontend/src/components/DatabaseIcons.test.tsx
+++ b/frontend/src/components/DatabaseIcons.test.tsx
@@ -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');
+ 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');
+ 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');
+ 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');
+ 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');
+ 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');
+ 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');
+ 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');
+ 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');
+ expect(markup).toContain('goldendb.svg');
+ expect(markup).toContain('alt="goldendb"');
});
it('wraps database icons in a consistent frame for sidebar sizing', () => {
diff --git a/frontend/src/components/DatabaseIcons.tsx b/frontend/src/components/DatabaseIcons.tsx
index e842906..0cc8696 100644
--- a/frontend/src/components/DatabaseIcons.tsx
+++ b/frontend/src/components/DatabaseIcons.tsx
@@ -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 图标：用 ![]()
加载 /db-icons/*.svg */
@@ -179,10 +181,10 @@ const OpenGaussIcon: React.FC = ({ size = 16, color }) => (
);
const GaussDBIcon: React.FC = ({ size = 16, color }) => (
-
+
);
const GoldenDBIcon: React.FC = ({ size = 16, color }) => (
-
+
);
const HighGoIcon: React.FC = ({ size = 16, color }) => (
@@ -194,25 +196,25 @@ const TDengineIcon: React.FC = ({ size = 16, color }) => (
);
const IoTDBIcon: React.FC = ({ size = 16, color }) => (
-
+
);
const RocketMQIcon: React.FC = ({ size = 16, color }) => (
-
+
);
const MQTTIcon: React.FC = ({ size = 16, color }) => (
-
+
);
const KafkaIcon: React.FC = ({ size = 16, color }) => (
-
+
);
const RabbitMQIcon: React.FC = ({ size = 16, color }) => (
-
+
);
const ChromaIcon: React.FC = ({ size = 16, color }) => (
-
+
);
const QdrantIcon: React.FC = ({ size = 16, color }) => (
-
+
);
const JVMIcon: React.FC = ({ size = 16, color }) => (