From df3a49becf6f62b1a327c43e1e79c5a0e687d962 Mon Sep 17 00:00:00 2001 From: Syngnat Date: Sun, 14 Jun 2026 13:07:57 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(icons):=20=E8=A1=A5=E9=BD=90?= =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=95=B0=E6=8D=AE=E6=BA=90=E5=93=81=E7=89=8C?= =?UTF-8?q?=E5=9B=BE=E6=A0=87=E8=B5=84=E6=BA=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/public/db-icons/chroma.svg | 7 +++++ frontend/public/db-icons/gaussdb.svg | 7 +++++ frontend/public/db-icons/goldendb.svg | 6 +++++ frontend/public/db-icons/iotdb.svg | 7 +++++ frontend/public/db-icons/kafka.svg | 11 ++++++++ frontend/public/db-icons/mqtt.svg | 9 +++++++ frontend/public/db-icons/qdrant.svg | 7 +++++ frontend/public/db-icons/rabbitmq.svg | 9 +++++++ frontend/public/db-icons/rocketmq.svg | 6 +++++ .../src/components/DatabaseIcons.test.tsx | 27 ++++++++++++------- frontend/src/components/DatabaseIcons.tsx | 20 +++++++------- 11 files changed, 98 insertions(+), 18 deletions(-) create mode 100644 frontend/public/db-icons/chroma.svg create mode 100644 frontend/public/db-icons/gaussdb.svg create mode 100644 frontend/public/db-icons/goldendb.svg create mode 100644 frontend/public/db-icons/iotdb.svg create mode 100644 frontend/public/db-icons/kafka.svg create mode 100644 frontend/public/db-icons/mqtt.svg create mode 100644 frontend/public/db-icons/qdrant.svg create mode 100644 frontend/public/db-icons/rabbitmq.svg create mode 100644 frontend/public/db-icons/rocketmq.svg 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 @@ + + Chroma + + + + + 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 @@ + + GaussDB + + + + + 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 @@ + + GoldenDB + + + + 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 @@ + + Apache IoTDB + + + + + 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 @@ + + Kafka + + + + + + + + + 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 @@ + + MQTT + + + + + + + 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 @@ + + Qdrant + + + + + 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 @@ + + RabbitMQ + + + + + + + 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 @@ + + RocketMQ + + + + 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 }) => (