From 5dc98745de6a0e0a3cc0c8c73e44902a3b8da2cd Mon Sep 17 00:00:00 2001
From: go0p <gp827782797@qq.com>
Date: Mon, 14 Apr 2025 17:58:05 +0800
Subject: [PATCH] fix popup ui

---
 src/components/ProxySwitch/index.css | 136 ++++++++++++++++-----------
 src/components/ProxySwitch/index.tsx |  17 +++-
 src/entrypoints/popup/App.css        |  53 +++++++----
 src/entrypoints/popup/App.tsx        |  22 +----
 4 files changed, 136 insertions(+), 92 deletions(-)

diff --git a/src/components/ProxySwitch/index.css b/src/components/ProxySwitch/index.css
index 4a2e7c9..a32d85c 100644
--- a/src/components/ProxySwitch/index.css
+++ b/src/components/ProxySwitch/index.css
@@ -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;
 } 
\ No newline at end of file
diff --git a/src/components/ProxySwitch/index.tsx b/src/components/ProxySwitch/index.tsx
index 48cac86..4c9fcad 100644
--- a/src/components/ProxySwitch/index.tsx
+++ b/src/components/ProxySwitch/index.tsx
@@ -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>
diff --git a/src/entrypoints/popup/App.css b/src/entrypoints/popup/App.css
index 77cb0b1..aa2b23e 100644
--- a/src/entrypoints/popup/App.css
+++ b/src/entrypoints/popup/App.css
@@ -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);
+}
diff --git a/src/entrypoints/popup/App.tsx b/src/entrypoints/popup/App.tsx
index e389576..1ffc099 100644
--- a/src/entrypoints/popup/App.tsx
+++ b/src/entrypoints/popup/App.tsx
@@ -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>
     );
 }