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,6 +1,7 @@
 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() {
@@ -17,7 +18,7 @@ export default function App() {
                     <h1>Yaklang 代理管理</h1>
                 </header>
                 <main className="popup-content">
-          <ProxySwitch />
+                    <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;
+}