diff --git a/src/components/ProxySwitch/index.css b/src/components/ProxySwitch/index.css index a32d85c..780989f 100644 --- a/src/components/ProxySwitch/index.css +++ b/src/components/ProxySwitch/index.css @@ -214,6 +214,7 @@ body { color: var(--yakit-primary); } +/* 全局样式重置,确保菜单项样式不受默认样式影响 */ .proxy-switch-container { position: relative; width: 100%; @@ -222,6 +223,52 @@ body { box-shadow: none; } +/* 确保菜单没有边框和阴影 */ +.proxy-switch-container .ant-menu { + border: none !important; + border-right: none !important; + box-shadow: none !important; +} + +/* 确保所有菜单项正确对齐和布局 */ +.proxy-switch-container .ant-menu-item { + margin: 4px 8px !important; + border-radius: 6px !important; + height: 36px !important; + line-height: 36px !important; + position: relative !important; +} + +/* 图标对齐 */ +.proxy-switch-container .ant-menu-item .anticon, +.proxy-switch-container .ant-menu-item img { + position: absolute !important; + left: 16px !important; + top: 50% !important; + transform: translateY(-50%) !important; +} + +/* 选中态和悬停态 */ +.proxy-switch-container .ant-menu-item.ant-menu-item-selected { + background-color: var(--yakit-primary) !important; + color: white !important; +} + +.proxy-switch-container .ant-menu-item:hover { + background-color: #f5f5f5 !important; +} + +.proxy-switch-container .ant-menu-item.ant-menu-item-selected:hover { + background-color: var(--yakit-primary-hover) !important; +} + +/* 确保分割线样式 */ +.proxy-switch-container .ant-menu-item-divider { + margin: 4px 0 !important; + height: 1px !important; + background-color: #f0f0f0 !important; +} + .panel-watermark { position: absolute; right: 0; @@ -248,16 +295,53 @@ body { z-index: 1; } -/* 为[直接连接]菜单项添加橙色背景 */ -.ant-menu[data-menu-id="direct"] .ant-menu-item.ant-menu-item-selected, -.ant-menu .ant-menu-item[data-menu-id="direct"] { +/* 为[直接连接]菜单项添加橙色背景,但仅在被选中时 */ +.ant-menu .ant-menu-item.menu-id-direct.ant-menu-item-selected { background-color: var(--yakit-primary) !important; color: white !important; } -.ant-menu[data-menu-id="direct"] .ant-menu-item.ant-menu-item-selected .anticon, -.ant-menu[data-menu-id="direct"] .ant-menu-item.ant-menu-item-selected span, -.ant-menu .ant-menu-item[data-menu-id="direct"] .anticon, -.ant-menu .ant-menu-item[data-menu-id="direct"] span { +.ant-menu .ant-menu-item.menu-id-direct.ant-menu-item-selected .anticon, +.ant-menu .ant-menu-item.menu-id-direct.ant-menu-item-selected span { color: white !important; +} + +/* 覆盖 Ant Design 的宽度计算,确保菜单项占据全宽 */ +.proxy-switch-container .ant-menu .ant-menu-item, +.ant-menu-light .ant-menu-item, +.ant-menu-vertical .ant-menu-item, +.ant-menu-inline .ant-menu-item, +.ant-menu .ant-menu-item { + width: 100% !important; + margin-inline: 0 !important; + margin-block: 4px !important; + text-align: center !important; + height: 40px !important; + line-height: 40px !important; + padding-inline: 16px !important; + overflow: hidden !important; + text-overflow: ellipsis !important; +} + +/* 让文本的容器也占满全宽 */ +.proxy-switch-container .ant-menu .ant-menu-item .ant-menu-title-content, +.ant-menu .ant-menu-item .ant-menu-title-content { + display: block !important; + width: 100% !important; + text-align: center !important; +} + +/* 活动项样式 */ +.ant-menu .ant-menu-item.active-item::after { + content: "✓"; + position: absolute; + right: 16px; + top: 50%; + transform: translateY(-50%); + color: var(--yakit-primary); + font-weight: bold; +} + +.ant-menu .ant-menu-item.ant-menu-item-selected.active-item::after { + color: white; } \ No newline at end of file diff --git a/src/components/ProxySwitch/index.tsx b/src/components/ProxySwitch/index.tsx index 4c9fcad..b79e961 100644 --- a/src/components/ProxySwitch/index.tsx +++ b/src/components/ProxySwitch/index.tsx @@ -205,13 +205,9 @@ export const ProxySwitch: React.FC = () => { const items: MenuProps['items'] = [ ...FIXED_MODES.map(mode => ({ key: mode.key, - label: ( -
- {mode.name} - {currentMode === mode.key && 🟢} -
- ), + label: mode.name, icon: mode.icon, + className: `${currentMode === mode.key ? 'active-item' : ''} menu-id-${mode.key}`, })), {type: 'divider'} ]; @@ -221,13 +217,9 @@ export const ProxySwitch: React.FC = () => { items.push( ...customProxies.map(proxy => ({ key: proxy.key, - label: ( -
- {proxy.name} - {currentMode === proxy.key && } -
- ), + label: proxy.name, icon: YAK, + className: `${currentMode === proxy.key ? 'active-item' : ''} menu-id-${proxy.key}`, })) ); items.push({type: 'divider'}); @@ -238,6 +230,7 @@ export const ProxySwitch: React.FC = () => { key: 'setting', label: '代理设置', icon: , + className: 'menu-id-setting', }); // 添加新建代理选项 @@ -245,6 +238,7 @@ export const ProxySwitch: React.FC = () => { key: 'add', label: '添加代理', icon: , + className: 'menu-id-add', }); return items; @@ -257,7 +251,6 @@ export const ProxySwitch: React.FC = () => { selectedKeys={[currentMode]} items={buildMenuItems()} onClick={({key}) => handleModeChange(key)} - data-menu-id={currentMode} /> {isLoading &&
切换中...
}