fix popup ui

src/entrypoints/options/main.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { createRoot } from 'react-dom/client';
+import {createRoot} from 'react-dom/client';
 import App from './App';
+import '@/styles/global.css'
 import './style.css';
 
 const root = createRoot(document.getElementById('app')!);
-root.render(<App />); 
+root.render(<App/>);

src/entrypoints/popup/App.css

@@ -42,8 +42,8 @@
 }
 
 .popup-container {
-  width: 320px;
-  min-height: 400px;
+  /*width: 320px;*/
+  /*min-height: 400px;*/
   display: flex;
   flex-direction: column;
   padding: 0;
@@ -52,7 +52,7 @@
 }
 
 .popup-header {
-  background-color: #F28B44;
+  background-color: var(--yakit-primary);
   color: white;
   padding: 12px 16px;
   text-align: center;

src/entrypoints/popup/App.tsx

@@ -1,25 +1,26 @@
 import React from 'react';
-import { ConfigProvider } from 'antd';
-import { ProxySwitch } from '../../components/ProxySwitch';
+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>
-  );
+    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>
+    );
 }

src/entrypoints/popup/style.css

@@ -27,8 +27,6 @@ body {
   margin: 0;
   display: flex;
   place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
 }
 
 h1 {

src/styles/global.css

@@ -0,0 +1,58 @@
+:root {
+    --yakit-primary: #F28B44;
+    --yakit-primary-hover: #f4a061;
+    --yakit-primary-active: #e87633;
+    --yakit-primary-5: #fff5eb;
+    --yakit-primary-10: rgba(242, 139, 68, 0.1);
+    
+    /* 添加其他全局变量 */
+    --border-color: #f0f0f0;
+    --text-color: #333;
+    --icon-color: #666;
+    
+    /* 菜单相关变量 */
+    --menu-item-height: 28px;
+    --menu-padding: 4px;
+    --menu-width: 180px;
+}
+
+.ant-btn-primary {
+    background-color: var(--yakit-primary) !important;
+}
+
+.ant-btn-primary:hover {
+    background-color: var(--yakit-primary-hover) !important;
+}
+
+.ant-btn-primary:active {
+    background-color: var(--yakit-primary-active) !important;
+}
+
+.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
+    background-color: var(--yakit-primary-5) !important;
+}
+
+.ant-select-focused .ant-select-selector,
+.ant-input-focused,
+.ant-input:focus,
+.ant-input-number-focused,
+.ant-input-number:focus {
+    border-color: var(--yakit-primary) !important;
+    box-shadow: 0 0 0 2px var(--yakit-primary-10) !important;
+}
+
+.ant-btn:not(.ant-btn-primary):hover {
+    color: var(--yakit-primary) !important;
+    border-color: var(--yakit-primary) !important;
+}
+
+/* 移除所有滚动条 */
+::-webkit-scrollbar {
+    display: none;
+}
+
+/* 确保所有内容都在视口内 */
+html, body {
+    overflow: hidden;
+    height: fit-content;
+}