mirror of
https://github.com/Syngnat/GoNavi.git
synced 2026-05-31 13:39:48 +08:00
✨ feat(connection): 新增数据库连接图标功能并修复达梦数据库列表为空
- 图标组件：新增 DatabaseIcons.tsx，10 种品牌 SVG logo + 7 种彩色文字标签覆盖全部数据源 - 品牌资源：下载 MySQL/PG/Redis/MongoDB/ClickHouse/SQLite/MariaDB/Doris/Sphinx/DuckDB 的 SVG（CC0 许可） - 类型扩展：SavedConnection 新增 iconType/iconColor 支持自定义图标和颜色 - 外观配置：ConnectionModal 新增"外观"配置区（图标选择器 + 14 色选择器 + 预览面板） - 数据源选择：Step1 数据源类型卡片全部统一为品牌图标 - 达梦修复：dameng_metadata.go 增加原生 SQL 查询和诊断日志，改善数据库列表获取 - refs #114 - refs #266
This commit is contained in:
Syngnat
@@ -1,6 +1,7 @@
|
||||
import React, { useState, useEffect, useRef, useMemo } from 'react';
|
||||
import { Modal, Form, Input, InputNumber, Button, message, Checkbox, Divider, Select, Alert, Card, Row, Col, Typography, Collapse, Space, Table, Tag } from 'antd';
|
||||
import { DatabaseOutlined, ConsoleSqlOutlined, FileTextOutlined, CloudServerOutlined, AppstoreAddOutlined, CloudOutlined, CheckCircleFilled, CloseCircleFilled, LinkOutlined, EditOutlined, AppstoreOutlined } from '@ant-design/icons';
|
||||
import { DatabaseOutlined, ConsoleSqlOutlined, FileTextOutlined, CloudServerOutlined, AppstoreAddOutlined, CloudOutlined, CheckCircleFilled, CloseCircleFilled, LinkOutlined, EditOutlined, AppstoreOutlined, BgColorsOutlined } from '@ant-design/icons';
|
||||
import { getDbIcon, getDbDefaultColor, getDbIconLabel, DB_ICON_TYPES, PRESET_ICON_COLORS } from './DatabaseIcons';
|
||||
import { useStore } from '../store';
|
||||
import { buildOverlayWorkbenchTheme } from '../utils/overlayWorkbenchTheme';
|
||||
import { normalizeOpacityForPlatform, resolveAppearanceValues } from '../utils/appearance';
|
||||
@@ -105,7 +106,9 @@ const ConnectionModal: React.FC<{
|
||||
const [dbType, setDbType] = useState('mysql');
|
||||
const [step, setStep] = useState(1); // 1: Select Type, 2: Configure
|
||||
const [activeGroup, setActiveGroup] = useState(0); // Active category index in step 1
|
||||
const [activeConfigSection, setActiveConfigSection] = useState<'basic' | 'network'>('basic');
|
||||
const [activeConfigSection, setActiveConfigSection] = useState<'basic' | 'network' | 'appearance'>('basic');
|
||||
const [customIconType, setCustomIconType] = useState<string | undefined>(undefined);
|
||||
const [customIconColor, setCustomIconColor] = useState<string | undefined>(undefined);
|
||||
const [activeNetworkConfig, setActiveNetworkConfig] = useState<'ssl' | 'ssh' | 'proxy' | 'httpTunnel'>('ssl');
|
||||
const [testResult, setTestResult] = useState<{ type: 'success' | 'error', message: string } | null>(null);
|
||||
const [testErrorLogOpen, setTestErrorLogOpen] = useState(false);
|
||||
@@ -1061,6 +1064,8 @@ const ConnectionModal: React.FC<{
|
||||
setRedisDbList([]);
|
||||
setMongoMembers([]);
|
||||
setUriFeedback(null);
|
||||
setCustomIconType(undefined);
|
||||
setCustomIconColor(undefined);
|
||||
setTypeSelectWarning(null);
|
||||
setDriverStatusLoaded(false);
|
||||
void refreshDriverStatus();
|
||||
@@ -1146,6 +1151,8 @@ const ConnectionModal: React.FC<{
|
||||
mongoReplicaPassword: config.mongoReplicaPassword || ''
|
||||
});
|
||||
setUseSSL(!!config.useSSL);
|
||||
setCustomIconType(initialValues.iconType);
|
||||
setCustomIconColor(initialValues.iconColor);
|
||||
setUseSSH(config.useSSH || false);
|
||||
setUseProxy(hasProxy);
|
||||
setUseHttpTunnel(hasHttpTunnel);
|
||||
@@ -1212,7 +1219,9 @@ const ConnectionModal: React.FC<{
|
||||
name: values.name || (isFileDatabaseType(values.type) ? (values.type === 'duckdb' ? 'DuckDB DB' : 'SQLite DB') : (values.type === 'redis' ? `Redis ${displayHost}` : displayHost)),
|
||||
config: config,
|
||||
includeDatabases: values.includeDatabases,
|
||||
includeRedisDatabases: isRedisType ? values.includeRedisDatabases : undefined
|
||||
includeRedisDatabases: isRedisType ? values.includeRedisDatabases : undefined,
|
||||
iconType: customIconType,
|
||||
iconColor: customIconColor,
|
||||
};
|
||||
|
||||
if (initialValues) {
|
||||
@@ -1735,32 +1744,32 @@ const ConnectionModal: React.FC<{
|
||||
|
||||
const dbTypeGroups = [
|
||||
{ label: '关系型数据库', items: [
|
||||
{ key: 'mysql', name: 'MySQL', icon: <ConsoleSqlOutlined style={{ fontSize: 24, color: '#00758F' }} /> },
|
||||
{ key: 'mariadb', name: 'MariaDB', icon: <ConsoleSqlOutlined style={{ fontSize: 24, color: '#003545' }} /> },
|
||||
{ key: 'diros', name: 'Doris', icon: <ConsoleSqlOutlined style={{ fontSize: 24, color: '#0050b3' }} /> },
|
||||
{ key: 'sphinx', name: 'Sphinx', icon: <ConsoleSqlOutlined style={{ fontSize: 24, color: '#2F5D62' }} /> },
|
||||
{ key: 'clickhouse', name: 'ClickHouse', icon: <DatabaseOutlined style={{ fontSize: 24, color: '#FFCC01' }} /> },
|
||||
{ key: 'postgres', name: 'PostgreSQL', icon: <DatabaseOutlined style={{ fontSize: 24, color: '#336791' }} /> },
|
||||
{ key: 'sqlserver', name: 'SQL Server', icon: <DatabaseOutlined style={{ fontSize: 24, color: '#CC2927' }} /> },
|
||||
{ key: 'sqlite', name: 'SQLite', icon: <FileTextOutlined style={{ fontSize: 24, color: '#003B57' }} /> },
|
||||
{ key: 'duckdb', name: 'DuckDB', icon: <FileTextOutlined style={{ fontSize: 24, color: '#f59e0b' }} /> },
|
||||
{ key: 'oracle', name: 'Oracle', icon: <DatabaseOutlined style={{ fontSize: 24, color: '#F80000' }} /> },
|
||||
{ key: 'mysql', name: 'MySQL', icon: getDbIcon('mysql', undefined, 36) },
|
||||
{ key: 'mariadb', name: 'MariaDB', icon: getDbIcon('mariadb', undefined, 36) },
|
||||
{ key: 'diros', name: 'Doris', icon: getDbIcon('diros', undefined, 36) },
|
||||
{ key: 'sphinx', name: 'Sphinx', icon: getDbIcon('sphinx', undefined, 36) },
|
||||
{ key: 'clickhouse', name: 'ClickHouse', icon: getDbIcon('clickhouse', undefined, 36) },
|
||||
{ key: 'postgres', name: 'PostgreSQL', icon: getDbIcon('postgres', undefined, 36) },
|
||||
{ key: 'sqlserver', name: 'SQL Server', icon: getDbIcon('sqlserver', undefined, 36) },
|
||||
{ key: 'sqlite', name: 'SQLite', icon: getDbIcon('sqlite', undefined, 36) },
|
||||
{ key: 'duckdb', name: 'DuckDB', icon: getDbIcon('duckdb', undefined, 36) },
|
||||
{ key: 'oracle', name: 'Oracle', icon: getDbIcon('oracle', undefined, 36) },
|
||||
]},
|
||||
{ label: '国产数据库', items: [
|
||||
{ key: 'dameng', name: 'Dameng (达梦)', icon: <CloudServerOutlined style={{ fontSize: 24, color: '#1890ff' }} /> },
|
||||
{ key: 'kingbase', name: 'Kingbase (人大金仓)', icon: <DatabaseOutlined style={{ fontSize: 24, color: '#faad14' }} /> },
|
||||
{ key: 'highgo', name: 'HighGo (瀚高)', icon: <DatabaseOutlined style={{ fontSize: 24, color: '#00a854' }} /> },
|
||||
{ key: 'vastbase', name: 'Vastbase (海量)', icon: <DatabaseOutlined style={{ fontSize: 24, color: '#1a6dff' }} /> },
|
||||
{ key: 'dameng', name: 'Dameng (达梦)', icon: getDbIcon('dameng', undefined, 36) },
|
||||
{ key: 'kingbase', name: 'Kingbase (人大金仓)', icon: getDbIcon('kingbase', undefined, 36) },
|
||||
{ key: 'highgo', name: 'HighGo (瀚高)', icon: getDbIcon('highgo', undefined, 36) },
|
||||
{ key: 'vastbase', name: 'Vastbase (海量)', icon: getDbIcon('vastbase', undefined, 36) },
|
||||
]},
|
||||
{ label: 'NoSQL', items: [
|
||||
{ key: 'mongodb', name: 'MongoDB', icon: <CloudServerOutlined style={{ fontSize: 24, color: '#47A248' }} /> },
|
||||
{ key: 'redis', name: 'Redis', icon: <CloudOutlined style={{ fontSize: 24, color: '#DC382D' }} /> },
|
||||
{ key: 'mongodb', name: 'MongoDB', icon: getDbIcon('mongodb', undefined, 36) },
|
||||
{ key: 'redis', name: 'Redis', icon: getDbIcon('redis', undefined, 36) },
|
||||
]},
|
||||
{ label: '时序数据库', items: [
|
||||
{ key: 'tdengine', name: 'TDengine', icon: <DatabaseOutlined style={{ fontSize: 24, color: '#2F54EB' }} /> },
|
||||
{ key: 'tdengine', name: 'TDengine', icon: getDbIcon('tdengine', undefined, 36) },
|
||||
]},
|
||||
{ label: '其他', items: [
|
||||
{ key: 'custom', name: 'Custom (自定义)', icon: <AppstoreAddOutlined style={{ fontSize: 24, color: '#595959' }} /> },
|
||||
{ key: 'custom', name: 'Custom (自定义)', icon: getDbIcon('custom', undefined, 36) },
|
||||
]},
|
||||
];
|
||||
|
||||
@@ -2512,16 +2521,101 @@ const ConnectionModal: React.FC<{
|
||||
/>
|
||||
)}
|
||||
{(() => {
|
||||
const sectionItems: Array<{ key: 'basic' | 'network'; title: string; description: string; icon: React.ReactNode }> = [
|
||||
const sectionItems: Array<{ key: 'basic' | 'network' | 'appearance'; title: string; description: string; icon: React.ReactNode }> = [
|
||||
{ key: 'basic', title: '基础信息', description: '名称、地址、认证、URI 与数据库范围', icon: <DatabaseOutlined /> },
|
||||
...(!isCustom && !isFileDb ? [{ key: 'network' as const, title: '网络与安全', description: 'SSL、SSH、代理与高级连接', icon: <CloudOutlined /> }] : []),
|
||||
{ key: 'appearance', title: '外观', description: '自定义图标与颜色', icon: <BgColorsOutlined /> },
|
||||
];
|
||||
const resolvedSection = sectionItems.some((item) => item.key === activeConfigSection)
|
||||
? activeConfigSection
|
||||
: sectionItems[0]?.key || 'basic';
|
||||
|
||||
const effectiveIconType = customIconType || dbType;
|
||||
const effectiveIconColor = customIconColor || getDbDefaultColor(effectiveIconType);
|
||||
|
||||
const appearanceSection = (
|
||||
<div style={{ display: 'grid', gap: 18 }}>
|
||||
<div style={{ ...modalInnerSectionStyle, padding: 16 }}>
|
||||
<div style={{ marginBottom: 12, fontSize: 13, fontWeight: 700, color: darkMode ? '#f5f7ff' : '#162033' }}>图标</div>
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
|
||||
{DB_ICON_TYPES.map((iconKey) => {
|
||||
const isActive = effectiveIconType === iconKey;
|
||||
return (
|
||||
<button
|
||||
key={iconKey}
|
||||
type="button"
|
||||
title={getDbIconLabel(iconKey)}
|
||||
onClick={() => setCustomIconType(iconKey === dbType ? undefined : iconKey)}
|
||||
style={{
|
||||
width: 44, height: 44, borderRadius: 10,
|
||||
display: 'grid', placeItems: 'center',
|
||||
border: `2px solid ${isActive ? effectiveIconColor : (darkMode ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)')}`,
|
||||
background: isActive
|
||||
? (darkMode ? 'rgba(255,255,255,0.08)' : 'rgba(24,144,255,0.06)')
|
||||
: 'transparent',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 120ms ease',
|
||||
}}
|
||||
>
|
||||
{getDbIcon(iconKey, isActive ? effectiveIconColor : undefined, 22)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div style={{ marginTop: 6, fontSize: 11, color: darkMode ? 'rgba(255,255,255,0.45)' : 'rgba(0,0,0,0.35)' }}>
|
||||
当前：{getDbIconLabel(effectiveIconType)}
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ ...modalInnerSectionStyle, padding: 16 }}>
|
||||
<div style={{ marginBottom: 12, fontSize: 13, fontWeight: 700, color: darkMode ? '#f5f7ff' : '#162033' }}>颜色</div>
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center' }}>
|
||||
{PRESET_ICON_COLORS.map((presetColor) => {
|
||||
const isActive = effectiveIconColor === presetColor;
|
||||
return (
|
||||
<button
|
||||
key={presetColor}
|
||||
type="button"
|
||||
onClick={() => setCustomIconColor(presetColor === getDbDefaultColor(effectiveIconType) ? undefined : presetColor)}
|
||||
style={{
|
||||
width: 28, height: 28, borderRadius: 8,
|
||||
background: presetColor,
|
||||
border: isActive ? `2.5px solid ${darkMode ? '#fff' : '#162033'}` : '2px solid transparent',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 120ms ease',
|
||||
boxShadow: isActive ? `0 0 0 2px ${presetColor}40` : 'none',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
<input
|
||||
type="color"
|
||||
value={effectiveIconColor}
|
||||
onChange={(e) => setCustomIconColor(e.target.value === getDbDefaultColor(effectiveIconType) ? undefined : e.target.value)}
|
||||
title="自定义颜色"
|
||||
style={{ width: 28, height: 28, border: 'none', padding: 0, cursor: 'pointer', borderRadius: 6, background: 'transparent' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ ...modalInnerSectionStyle, padding: 16, display: 'flex', alignItems: 'center', gap: 14 }}>
|
||||
<div style={{ fontSize: 13, fontWeight: 700, color: darkMode ? '#f5f7ff' : '#162033' }}>预览</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||||
{getDbIcon(effectiveIconType, effectiveIconColor, 24)}
|
||||
<span style={{ fontSize: 14, color: darkMode ? '#e0e0e0' : '#333' }}>{form.getFieldValue('name') || '连接名称'}</span>
|
||||
</div>
|
||||
{(customIconType || customIconColor) && (
|
||||
<Button size="small" type="link" onClick={() => { setCustomIconType(undefined); setCustomIconColor(undefined); }}>
|
||||
重置为默认
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const currentSectionContent = resolvedSection === 'basic'
|
||||
? baseInfoSection
|
||||
: networkSecuritySection;
|
||||
: resolvedSection === 'appearance'
|
||||
? appearanceSection
|
||||
: networkSecuritySection;
|
||||
|
||||
if (sectionItems.length <= 1) {
|
||||
return currentSectionContent;
|
||||
|
||||
217
frontend/src/components/DatabaseIcons.tsx
Normal file
217
frontend/src/components/DatabaseIcons.tsx
Normal file
@@ -0,0 +1,217 @@
|
||||
import React from 'react';
|
||||
|
||||
// ─── 公共接口 ───────────────────────────────────────────────
|
||||
|
||||
export interface DbIconProps {
|
||||
size?: number;
|
||||
color?: string;
|
||||
}
|
||||
|
||||
// ─── 默认色表 ───────────────────────────────────────────────
|
||||
|
||||
const DB_DEFAULT_COLORS: Record<string, string> = {
|
||||
mysql: '#00758F',
|
||||
mariadb: '#003545',
|
||||
postgres: '#336791',
|
||||
redis: '#DC382D',
|
||||
mongodb: '#47A248',
|
||||
kingbase: '#1890FF',
|
||||
dameng: '#E6002D',
|
||||
oracle: '#F80000',
|
||||
sqlserver: '#CC2927',
|
||||
clickhouse: '#FFBF00',
|
||||
sqlite: '#003B57',
|
||||
duckdb: '#FFC107',
|
||||
vastbase: '#0066CC',
|
||||
highgo: '#00A86B',
|
||||
tdengine: '#2962FF',
|
||||
diros: '#0050B3',
|
||||
sphinx: '#2F5D62',
|
||||
custom: '#888888',
|
||||
};
|
||||
|
||||
export const getDbDefaultColor = (type: string): string =>
|
||||
DB_DEFAULT_COLORS[type?.toLowerCase()] || DB_DEFAULT_COLORS.custom;
|
||||
|
||||
// ─── 有品牌 SVG 文件的数据库类型（文件在 /db-icons/ 下） ────
|
||||
|
||||
const BRAND_SVG_TYPES = new Set([
|
||||
'mysql', 'mariadb', 'postgres', 'redis', 'mongodb', 'clickhouse', 'sqlite',
|
||||
'diros', 'sphinx', 'duckdb',
|
||||
]);
|
||||
|
||||
/** 品牌 SVG 图标：用 <img> 加载 /db-icons/*.svg */
|
||||
const BrandSvgIcon: React.FC<{ type: string; size: number; color?: string }> = ({ type, size, color }) => {
|
||||
const bgColor = color || getDbDefaultColor(type);
|
||||
return (
|
||||
<span style={{
|
||||
display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
|
||||
width: size, height: size, borderRadius: size * 0.22,
|
||||
background: '#fff', border: `1.5px solid ${bgColor}`,
|
||||
flexShrink: 0, overflow: 'hidden',
|
||||
}}>
|
||||
<img
|
||||
src={`/db-icons/${type}.svg`}
|
||||
alt={type}
|
||||
width={size * 0.7}
|
||||
height={size * 0.7}
|
||||
style={{ display: 'block' }}
|
||||
/>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
// ─── 彩色标签图标（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 (
|
||||
<svg width={size} height={size} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="1" y="1" width="22" height="22" rx="5" fill={color}/>
|
||||
<text
|
||||
x="12" y="12" dominantBaseline="central" textAnchor="middle"
|
||||
fontSize={textSize} fontWeight="800" fontFamily="system-ui,-apple-system,sans-serif"
|
||||
fill="#fff" letterSpacing={label.length > 2 ? -0.5 : 0}
|
||||
>
|
||||
{label}
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
// ─── 各数据库图标 ───────────────────────────────────────────
|
||||
|
||||
// 有品牌 SVG 的数据库
|
||||
const MySQLIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<BrandSvgIcon type="mysql" size={size} color={color} />
|
||||
);
|
||||
const MariaDBIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<BrandSvgIcon type="mariadb" size={size} color={color} />
|
||||
);
|
||||
const PostgresIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<BrandSvgIcon type="postgres" size={size} color={color} />
|
||||
);
|
||||
const RedisIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<BrandSvgIcon type="redis" size={size} color={color} />
|
||||
);
|
||||
const MongoDBIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<BrandSvgIcon type="mongodb" size={size} color={color} />
|
||||
);
|
||||
const ClickHouseIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<BrandSvgIcon type="clickhouse" size={size} color={color} />
|
||||
);
|
||||
const SQLiteIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<BrandSvgIcon 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" />
|
||||
);
|
||||
const SQLServerIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<ColorBadge size={size} color={color || DB_DEFAULT_COLORS.sqlserver} label="SS" />
|
||||
);
|
||||
const DorisIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<BrandSvgIcon type="diros" size={size} color={color} />
|
||||
);
|
||||
const SphinxIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<BrandSvgIcon type="sphinx" size={size} color={color} />
|
||||
);
|
||||
const DuckDBIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<BrandSvgIcon 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" />
|
||||
);
|
||||
const DamengIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<ColorBadge size={size} color={color || DB_DEFAULT_COLORS.dameng} label="DM" />
|
||||
);
|
||||
const VastBaseIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<ColorBadge size={size} color={color || DB_DEFAULT_COLORS.vastbase} label="VB" />
|
||||
);
|
||||
const HighGoIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<ColorBadge size={size} color={color || DB_DEFAULT_COLORS.highgo} label="HG" />
|
||||
);
|
||||
const TDengineIcon: React.FC<DbIconProps> = ({ size = 16, color }) => (
|
||||
<ColorBadge size={size} color={color || DB_DEFAULT_COLORS.tdengine} label="TD" />
|
||||
);
|
||||
|
||||
/** Custom — 齿轮图标 */
|
||||
const CustomIcon: React.FC<DbIconProps> = ({ size = 16, color }) => {
|
||||
const c = color || DB_DEFAULT_COLORS.custom;
|
||||
return (
|
||||
<svg width={size} height={size} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="1" y="1" width="22" height="22" rx="5" fill={c}/>
|
||||
<circle cx="12" cy="12" r="3.5" stroke="#fff" strokeWidth="1.5" fill="none"/>
|
||||
<path d="M12 4v2.5M12 17.5V20M4 12h2.5M17.5 12H20M6.34 6.34l1.77 1.77M15.89 15.89l1.77 1.77M6.34 17.66l1.77-1.77M15.89 8.11l1.77-1.77" stroke="#fff" strokeWidth="1.3" strokeLinecap="round"/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
// ─── 图标注册表 ─────────────────────────────────────────────
|
||||
|
||||
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,
|
||||
diros: DorisIcon,
|
||||
sphinx: SphinxIcon,
|
||||
postgres: PostgresIcon,
|
||||
redis: RedisIcon,
|
||||
mongodb: MongoDBIcon,
|
||||
kingbase: KingBaseIcon,
|
||||
dameng: DamengIcon,
|
||||
oracle: OracleIcon,
|
||||
sqlserver: SQLServerIcon,
|
||||
clickhouse: ClickHouseIcon,
|
||||
sqlite: SQLiteIcon,
|
||||
duckdb: DuckDBIcon,
|
||||
vastbase: VastBaseIcon,
|
||||
highgo: HighGoIcon,
|
||||
tdengine: TDengineIcon,
|
||||
custom: CustomIcon,
|
||||
};
|
||||
|
||||
/** 可选图标类型列表（用于图标选择器 UI） */
|
||||
export const DB_ICON_TYPES: string[] = [
|
||||
'mysql', 'mariadb', 'postgres', 'redis', 'mongodb',
|
||||
'oracle', 'sqlserver', 'sqlite', 'duckdb', 'clickhouse',
|
||||
'kingbase', 'dameng', 'vastbase', 'highgo', 'tdengine', 'custom',
|
||||
];
|
||||
|
||||
/** 该类型是否有品牌 SVG 文件 */
|
||||
export const hasBrandSvg = (type: string): boolean => BRAND_SVG_TYPES.has(type?.toLowerCase());
|
||||
|
||||
/** 获取数据库图标 React 节点 */
|
||||
export const getDbIcon = (type: string, color?: string, size?: number): React.ReactNode => {
|
||||
const key = (type || 'custom').toLowerCase();
|
||||
const Component = DB_ICON_MAP[key] || CustomIcon;
|
||||
return <Component size={size} color={color} />;
|
||||
};
|
||||
|
||||
/** 获取数据库图标显示名称（中文） */
|
||||
export const getDbIconLabel = (type: string): string => {
|
||||
const labels: Record<string, string> = {
|
||||
mysql: 'MySQL', mariadb: 'MariaDB', postgres: 'PostgreSQL',
|
||||
redis: 'Redis', mongodb: 'MongoDB', oracle: 'Oracle',
|
||||
sqlserver: 'SQL Server', clickhouse: 'ClickHouse', sqlite: 'SQLite',
|
||||
duckdb: 'DuckDB', kingbase: '金仓', dameng: '达梦',
|
||||
vastbase: 'VastBase', highgo: '瀚高', tdengine: 'TDengine',
|
||||
custom: '自定义',
|
||||
};
|
||||
return labels[type?.toLowerCase()] || type;
|
||||
};
|
||||
|
||||
/** 预设颜色列表 */
|
||||
export const PRESET_ICON_COLORS: string[] = [
|
||||
'#336791', '#00758F', '#DC382D', '#47A248', '#F80000',
|
||||
'#CC2927', '#1890FF', '#E6002D', '#FFBF00', '#2962FF',
|
||||
'#00A86B', '#0066CC', '#FF6B35', '#7C3AED',
|
||||
];
|
||||
@@ -35,6 +35,7 @@ import { Tree, message, Dropdown, MenuProps, Input, Button, Modal, Form, Badge,
|
||||
import { useStore } from '../store';
|
||||
import { buildOverlayWorkbenchTheme } from '../utils/overlayWorkbenchTheme';
|
||||
import { SavedConnection } from '../types';
|
||||
import { getDbIcon } from './DatabaseIcons';
|
||||
import { DBGetDatabases, DBGetTables, DBQuery, DBShowCreateTable, ExportTable, OpenSQLFile, ExecuteSQLFile, CancelSQLFileExecution, CreateDatabase, RenameDatabase, DropDatabase, RenameTable, DropTable, DropView, DropFunction, RenameView } from '../../wailsjs/go/app/App';
|
||||
import { EventsOn } from '../../wailsjs/runtime/runtime';
|
||||
import { normalizeOpacityForPlatform, resolveAppearanceValues } from '../utils/appearance';
|
||||
@@ -329,7 +330,7 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
|
||||
return {
|
||||
title: conn.name,
|
||||
key: conn.id,
|
||||
icon: conn.config.type === 'redis' ? <CloudOutlined style={{ color: '#DC382D' }} /> : <HddOutlined />,
|
||||
icon: getDbIcon(conn.iconType || conn.config.type, conn.iconColor, 22),
|
||||
type: 'connection',
|
||||
dataRef: conn,
|
||||
isLeaf: false,
|
||||
@@ -3603,7 +3604,7 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
|
||||
}
|
||||
|
||||
const statusBadge = node.type === 'connection' || node.type === 'database' ? (
|
||||
<Badge status={status} style={{ marginRight: 8 }} />
|
||||
<Badge status={status} style={{ marginLeft: 4, marginRight: 8 }} />
|
||||
) : null;
|
||||
|
||||
const displayTitle = String(node.title ?? '');
|
||||
|
||||
Reference in New Issue
Block a user