mirror of
https://github.com/yaklang/yaklang-chrome-extension.git
synced 2026-09-22 03:10:43 +08:00
fix popup ui
This commit is contained in:
go0p
@@ -6,6 +6,9 @@
|
||||
.proxy-menu {
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
overflow: hidden;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
@@ -112,31 +115,46 @@ body {
|
||||
|
||||
.ant-menu {
|
||||
border: none !important;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
|
||||
padding: 4px 0 !important;
|
||||
width: 180px !important;
|
||||
box-shadow: none !important;
|
||||
padding: 0 !important;
|
||||
width: 100% !important;
|
||||
background: white !important;
|
||||
}
|
||||
|
||||
.ant-menu-item {
|
||||
height: 28px !important;
|
||||
line-height: 28px !important;
|
||||
margin: 0 !important;
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
margin: 4px 8px !important;
|
||||
padding: 0 16px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
|
||||
.ant-menu-item:hover {
|
||||
background-color: #f5f5f5 !important;
|
||||
color: var(--yakit-primary) !important;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
.ant-menu-item.ant-menu-item-selected {
|
||||
background-color: var(--yakit-primary) !important;
|
||||
color: white !important;
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
|
||||
.ant-menu-item.ant-menu-item-selected:hover {
|
||||
background-color: var(--yakit-primary-hover) !important;
|
||||
}
|
||||
|
||||
.ant-menu-item .anticon,
|
||||
.ant-menu-item img {
|
||||
font-size: 16px;
|
||||
margin-right: 8px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.menu-item-selected {
|
||||
background-color: #e6f7ff !important;
|
||||
.ant-menu-item.ant-menu-item-selected .anticon,
|
||||
.ant-menu-item.ant-menu-item-selected img {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.ant-menu-item-divider {
|
||||
@@ -145,67 +163,63 @@ body {
|
||||
background-color: #f0f0f0 !important;
|
||||
}
|
||||
|
||||
.ant-menu-item:last-child {
|
||||
margin-top: 4px !important;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
/* Checked item style (for the 2080 with checkmark) */
|
||||
.ant-menu-item.checked::after {
|
||||
content: "✓";
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
color: var(--yakit-primary);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 移除多余的样式 */
|
||||
.ant-menu-root {
|
||||
background: transparent !important;
|
||||
.ant-menu-item.ant-menu-item-selected.checked::after {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 调整整体容器大小 */
|
||||
.ant-menu-root {
|
||||
width: 180px !important;
|
||||
min-height: auto !important;
|
||||
}
|
||||
|
||||
/* 添加代理按钮样式 */
|
||||
.menu-item-add {
|
||||
color: #666 !important;
|
||||
}
|
||||
|
||||
.menu-item-add:hover {
|
||||
background-color: #f5f5f5 !important;
|
||||
color: var(--yakit-primary) !important;
|
||||
}
|
||||
|
||||
.menu-item-add .anticon {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.menu-item-add:hover .anticon {
|
||||
/* Loading state */
|
||||
.loading-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 10;
|
||||
font-size: 14px;
|
||||
color: var(--yakit-primary);
|
||||
}
|
||||
|
||||
.menu-loading {
|
||||
pointer-events: none;
|
||||
opacity: 0.7;
|
||||
/* Remove conflicting styles */
|
||||
.panel-watermark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-item-loading {
|
||||
transition: all 0.3s ease;
|
||||
/* Improve bottom actions */
|
||||
.ant-menu-item:nth-last-child(1),
|
||||
.ant-menu-item:nth-last-child(2) {
|
||||
border-top: 1px solid #f0f0f0;
|
||||
margin-top: 4px !important;
|
||||
}
|
||||
|
||||
.menu-item-selected {
|
||||
transition: all 0.3s ease;
|
||||
background-color: var(--yakit-primary-5) !important;
|
||||
.ant-menu-item:nth-last-child(1) .anticon,
|
||||
.ant-menu-item:nth-last-child(2) .anticon {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 添加过渡效果 */
|
||||
.ant-menu-item {
|
||||
transition: all 0.3s ease !important;
|
||||
}
|
||||
|
||||
.ant-menu-item .menu-icon {
|
||||
transition: color 0.3s ease;
|
||||
.ant-menu-item:nth-last-child(1):hover .anticon,
|
||||
.ant-menu-item:nth-last-child(2):hover .anticon {
|
||||
color: var(--yakit-primary);
|
||||
}
|
||||
|
||||
.proxy-switch-container {
|
||||
position: relative;
|
||||
width: 180px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.panel-watermark {
|
||||
@@ -232,4 +246,18 @@ body {
|
||||
.ant-menu-item-divider {
|
||||
position: relative;
|
||||
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"] {
|
||||
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 {
|
||||
color: white !important;
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, {useEffect, useState} from 'react';
|
||||
import {Menu} from 'antd';
|
||||
import {DisconnectOutlined, SettingOutlined, PlusOutlined} from '@ant-design/icons';
|
||||
import {DisconnectOutlined, SettingOutlined, PlusOutlined, CheckOutlined} from '@ant-design/icons';
|
||||
import {browser,} from 'wxt/browser';
|
||||
import type {MenuProps} from 'antd';
|
||||
import type {ProxyConfig} from '@/types/proxy';
|
||||
@@ -205,7 +205,12 @@ export const ProxySwitch: React.FC = () => {
|
||||
const items: MenuProps['items'] = [
|
||||
...FIXED_MODES.map(mode => ({
|
||||
key: mode.key,
|
||||
label: mode.name,
|
||||
label: (
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
|
||||
<span>{mode.name}</span>
|
||||
{currentMode === mode.key && <span>🟢</span>}
|
||||
</div>
|
||||
),
|
||||
icon: mode.icon,
|
||||
})),
|
||||
{type: 'divider'}
|
||||
@@ -216,7 +221,12 @@ export const ProxySwitch: React.FC = () => {
|
||||
items.push(
|
||||
...customProxies.map(proxy => ({
|
||||
key: proxy.key,
|
||||
label: proxy.name,
|
||||
label: (
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
|
||||
<span>{proxy.name}</span>
|
||||
{currentMode === proxy.key && <CheckOutlined style={{ color: 'var(--yakit-primary)' }} />}
|
||||
</div>
|
||||
),
|
||||
icon: <img src={YAK_ICON_URL} alt="YAK" style={{width: 16, height: 16}}/>,
|
||||
}))
|
||||
);
|
||||
@@ -247,6 +257,7 @@ export const ProxySwitch: React.FC = () => {
|
||||
selectedKeys={[currentMode]}
|
||||
items={buildMenuItems()}
|
||||
onClick={({key}) => handleModeChange(key)}
|
||||
data-menu-id={currentMode}
|
||||
/>
|
||||
{isLoading && <div className="loading-overlay">切换中...</div>}
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
#root {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -42,32 +42,49 @@
|
||||
}
|
||||
|
||||
.popup-container {
|
||||
/*width: 320px;*/
|
||||
/*min-height: 400px;*/
|
||||
min-width: 190px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
background-color: var(--yakit-primary);
|
||||
color: white;
|
||||
padding: 12px 16px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.popup-header h1 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
padding: 4px 8px;
|
||||
background-color: #fff;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* Ensure the proxy menu takes full width */
|
||||
.popup-content .proxy-switch-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.popup-content .proxy-switch-container .ant-menu {
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* Customize scrollbar */
|
||||
.popup-content::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.popup-content::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.popup-content::-webkit-scrollbar-thumb {
|
||||
background: var(--yakit-primary);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.popup-content::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--yakit-primary-hover);
|
||||
}
|
||||
|
||||
@@ -1,26 +1,14 @@
|
||||
import React from 'react';
|
||||
import {ConfigProvider} from 'antd';
|
||||
import {ProxySwitch} from '@/components/ProxySwitch';
|
||||
import '@/styles/global.css'
|
||||
import './App.css';
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: {
|
||||
colorPrimary: "#F28B44",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<div className="popup-container">
|
||||
<header className="popup-header">
|
||||
<h1>Yaklang 代理管理</h1>
|
||||
</header>
|
||||
<main className="popup-content">
|
||||
<ProxySwitch/>
|
||||
</main>
|
||||
</div>
|
||||
</ConfigProvider>
|
||||
<div className="popup-container">
|
||||
<main className="popup-content">
|
||||
<ProxySwitch/>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user