From 7ab035d9ba4d1b019513346291c189e7a570f70f Mon Sep 17 00:00:00 2001
From: pompurin404 <pompurin404@mihomo.party>
Date: Sun, 11 Aug 2024 11:25:40 +0800
Subject: [PATCH] fix styles

---
 src/renderer/src/App.tsx                       |  2 +-
 src/renderer/src/assets/main.css               |  4 ++++
 src/renderer/src/components/base/base-page.tsx |  2 +-
 .../src/components/base/base-setting-item.tsx  |  2 +-
 src/renderer/src/components/logs/log-item.tsx  |  2 +-
 .../components/profiles/edit-info-modal.tsx    |  2 +-
 .../src/components/profiles/profile-item.tsx   |  9 ++++-----
 .../src/components/proxies/proxy-item.tsx      |  2 +-
 .../components/resources/proxy-provider.tsx    |  4 ++--
 .../src/components/resources/rule-provider.tsx |  4 ++--
 .../src/components/rules/rule-item.tsx         |  6 +++---
 .../src/components/sider/conn-card.tsx         |  6 ++----
 src/renderer/src/components/sider/dns-card.tsx |  4 +---
 src/renderer/src/components/sider/log-card.tsx |  4 +---
 .../src/components/sider/mihomo-core-card.tsx  |  4 ++--
 .../sider/outbound-mode-switcher.tsx           | 18 +++---------------
 .../src/components/sider/override-card.tsx     |  4 +---
 .../src/components/sider/profile-card.tsx      |  8 ++++----
 .../src/components/sider/proxy-card.tsx        |  8 +++-----
 .../src/components/sider/resource-card.tsx     |  2 +-
 .../src/components/sider/rule-card.tsx         |  8 +++-----
 .../src/components/sider/sniff-card.tsx        |  2 +-
 .../src/components/sider/sysproxy-switcher.tsx |  2 +-
 .../src/components/sider/tun-switcher.tsx      |  4 +---
 src/renderer/src/pages/connections.tsx         |  4 ++--
 src/renderer/src/pages/dns.tsx                 | 16 ++++++++--------
 src/renderer/src/pages/proxies.tsx             |  4 ++--
 src/renderer/src/pages/settings.tsx            |  2 +-
 src/renderer/src/pages/sniffer.tsx             |  4 ++--
 src/renderer/src/pages/syspeoxy.tsx            |  6 +++---
 src/renderer/src/pages/tun.tsx                 |  6 +++---
 31 files changed, 66 insertions(+), 89 deletions(-)

diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index 8311931..d74a4db 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -37,7 +37,7 @@ const App: React.FC = () => {
       <div className="side w-[250px] h-full overflow-y-auto no-scrollbar">
         <div className="sticky top-0 z-40 backdrop-blur bg-background/40 h-[48px]">
           <div className="flex justify-between p-2">
-            <h3 className="select-none text-lg font-bold leading-[32px]">Mihomo Party</h3>
+            <h3 className="text-lg font-bold leading-[32px]">Mihomo Party</h3>
             <UpdaterButton />
             <Button
               size="sm"
diff --git a/src/renderer/src/assets/main.css b/src/renderer/src/assets/main.css
index b8a4ccb..3eb73c4 100644
--- a/src/renderer/src/assets/main.css
+++ b/src/renderer/src/assets/main.css
@@ -7,6 +7,10 @@
   src: url('./NotoColorEmoji.ttf');
 }
 
+* {
+  user-select: none;
+}
+
 *:focus {
   outline: none;
 }
diff --git a/src/renderer/src/components/base/base-page.tsx b/src/renderer/src/components/base/base-page.tsx
index 9aa49ba..6b4b624 100644
--- a/src/renderer/src/components/base/base-page.tsx
+++ b/src/renderer/src/components/base/base-page.tsx
@@ -17,7 +17,7 @@ const BasePage = forwardRef<HTMLDivElement, Props>((props, ref) => {
     <div ref={contentRef} className="w-full h-full overflow-y-auto custom-scrollbar">
       <div className="sticky top-0 z-40 h-[48px] w-full backdrop-blur bg-background/40">
         <div className="p-2 flex justify-between">
-          <div className="select-none title h-full text-lg leading-[32px]">{props.title}</div>
+          <div className="title h-full text-lg leading-[32px]">{props.title}</div>
           <div className="header h-full">{props.header}</div>
         </div>
         <Divider />
diff --git a/src/renderer/src/components/base/base-setting-item.tsx b/src/renderer/src/components/base/base-setting-item.tsx
index 6fb7f15..f6dd26d 100644
--- a/src/renderer/src/components/base/base-setting-item.tsx
+++ b/src/renderer/src/components/base/base-setting-item.tsx
@@ -16,7 +16,7 @@ const SettingItem: React.FC<Props> = (props) => {
     <>
       <div className="h-[32px] w-full flex justify-between">
         <div className="h-full flex items-center">
-          <h4 className="h-full select-none text-md leading-[32px]">{title}</h4>
+          <h4 className="h-full text-md leading-[32px]">{title}</h4>
           <div>{actions}</div>
         </div>
         {children}
diff --git a/src/renderer/src/components/logs/log-item.tsx b/src/renderer/src/components/logs/log-item.tsx
index 76120cb..570006c 100644
--- a/src/renderer/src/components/logs/log-item.tsx
+++ b/src/renderer/src/components/logs/log-item.tsx
@@ -11,7 +11,7 @@ const LogItem: React.FC<IMihomoLogInfo> = (props) => {
   const { type, payload, time } = props
   return (
     <Card className="m-2">
-      <CardHeader className="pb-0 pt-1 select-none">
+      <CardHeader className="pb-0 pt-1">
         <div className={`mr-2 text-lg font-bold text-${colorMap[type]}`}>
           {props.type.toUpperCase()}
         </div>
diff --git a/src/renderer/src/components/profiles/edit-info-modal.tsx b/src/renderer/src/components/profiles/edit-info-modal.tsx
index c178164..5ffc6b2 100644
--- a/src/renderer/src/components/profiles/edit-info-modal.tsx
+++ b/src/renderer/src/components/profiles/edit-info-modal.tsx
@@ -37,7 +37,7 @@ const EditInfoModal: React.FC<Props> = (props) => {
         <ModalBody>
           {values.type === 'remote' && item.extra?.expire && (
             <SettingItem title="订阅到期时间">
-              <div className="select-none h-[32px] leading-[32px]">
+              <div className="h-[32px] leading-[32px]">
                 {dayjs.unix(item.extra.expire).format('YYYY-MM-DD')}
               </div>
             </SettingItem>
diff --git a/src/renderer/src/components/profiles/profile-item.tsx b/src/renderer/src/components/profiles/profile-item.tsx
index ff5bb76..f819fb2 100644
--- a/src/renderer/src/components/profiles/profile-item.tsx
+++ b/src/renderer/src/components/profiles/profile-item.tsx
@@ -135,7 +135,7 @@ const ProfileItem: React.FC<Props> = (props) => {
         <CardBody className="pb-1">
           <div className="flex justify-between h-[32px]">
             <h3
-              className={`select-none text-ellipsis whitespace-nowrap overflow-hidden text-md font-bold leading-[32px] ${isCurrent ? 'text-white' : 'text-foreground'}`}
+              className={`text-ellipsis whitespace-nowrap overflow-hidden text-md font-bold leading-[32px] ${isCurrent ? 'text-white' : 'text-foreground'}`}
             >
               {info?.name}
             </h3>
@@ -187,7 +187,7 @@ const ProfileItem: React.FC<Props> = (props) => {
           </div>
           {info.type === 'remote' && (
             <div
-              className={`mt-2 flex select-none justify-between ${isCurrent ? 'text-white' : 'text-foreground'}`}
+              className={`mt-2 flex justify-between ${isCurrent ? 'text-white' : 'text-foreground'}`}
             >
               <small>{extra ? `${calcTraffic(usage)}/${calcTraffic(total)}` : undefined}</small>
               <small>{dayjs(info.updated).fromNow()}</small>
@@ -195,7 +195,7 @@ const ProfileItem: React.FC<Props> = (props) => {
           )}
           {info.type === 'local' && (
             <div
-              className={`mt-2 flex select-none justify-between ${isCurrent ? 'text-white' : 'text-foreground'}`}
+              className={`mt-2 flex justify-between ${isCurrent ? 'text-white' : 'text-foreground'}`}
             >
               <Chip
                 size="sm"
@@ -212,8 +212,7 @@ const ProfileItem: React.FC<Props> = (props) => {
             <Progress
               className="w-full"
               classNames={{
-                indicator: isCurrent ? 'bg-white' : 'bg-foreground',
-                label: 'select-none'
+                indicator: isCurrent ? 'bg-white' : 'bg-foreground'
               }}
               value={calcPercent(extra?.upload, extra?.download, extra?.total)}
             />
diff --git a/src/renderer/src/components/proxies/proxy-item.tsx b/src/renderer/src/components/proxies/proxy-item.tsx
index a0dfd2c..0304360 100644
--- a/src/renderer/src/components/proxies/proxy-item.tsx
+++ b/src/renderer/src/components/proxies/proxy-item.tsx
@@ -62,7 +62,7 @@ const ProxyItem: React.FC<Props> = (props) => {
       radius="sm"
     >
       <CardBody className="p-2">
-        <div className="flex select-none justify-between items-center">
+        <div className="flex justify-between items-center">
           <div>
             <div className="flag-emoji inline text-ellipsis whitespace-nowrap overflow-hidden">
               {proxy.name}
diff --git a/src/renderer/src/components/resources/proxy-provider.tsx b/src/renderer/src/components/resources/proxy-provider.tsx
index 6cc453b..5353379 100644
--- a/src/renderer/src/components/resources/proxy-provider.tsx
+++ b/src/renderer/src/components/resources/proxy-provider.tsx
@@ -66,7 +66,7 @@ const ProxyProvider: React.FC = () => {
               divider={!provider.subscriptionInfo && index !== providers.length - 1}
             >
               {
-                <div className="flex select-none h-[32px] leading-[32px] text-default-500">
+                <div className="flex h-[32px] leading-[32px] text-default-500">
                   <div>{dayjs(provider.updatedAt).fromNow()}</div>
                   <Button
                     isIconOnly
@@ -92,7 +92,7 @@ const ProxyProvider: React.FC = () => {
                 }
               >
                 {provider.subscriptionInfo && (
-                  <div className="select-none h-[32px] leading-[32px] text-default-500">
+                  <div className="h-[32px] leading-[32px] text-default-500">
                     {dayjs.unix(provider.subscriptionInfo.Expire).format('YYYY-MM-DD')}
                   </div>
                 )}
diff --git a/src/renderer/src/components/resources/rule-provider.tsx b/src/renderer/src/components/resources/rule-provider.tsx
index 52c94a9..12f7229 100644
--- a/src/renderer/src/components/resources/rule-provider.tsx
+++ b/src/renderer/src/components/resources/rule-provider.tsx
@@ -60,7 +60,7 @@ const RuleProvider: React.FC = () => {
               }
             >
               {
-                <div className="flex select-none h-[32px] leading-[32px] text-default-500">
+                <div className="flex h-[32px] leading-[32px] text-default-500">
                   <div>{dayjs(provider.updatedAt).fromNow()}</div>
                   <Button
                     isIconOnly
@@ -79,7 +79,7 @@ const RuleProvider: React.FC = () => {
               title={<div className="text-default-500">{provider.format}</div>}
               divider={index !== providers.length - 1}
             >
-              <div className="select-none h-[32px] leading-[32px] text-default-500">
+              <div className="h-[32px] leading-[32px] text-default-500">
                 {provider.vehicleType}::{provider.behavior}
               </div>
             </SettingItem>
diff --git a/src/renderer/src/components/rules/rule-item.tsx b/src/renderer/src/components/rules/rule-item.tsx
index e399104..21eb5de 100644
--- a/src/renderer/src/components/rules/rule-item.tsx
+++ b/src/renderer/src/components/rules/rule-item.tsx
@@ -6,10 +6,10 @@ const RuleItem: React.FC<IMihomoRulesDetail> = (props) => {
   return (
     <Card className="mb-2 mx-2">
       <CardBody className="w-full">
-        <div className="select-none text-ellipsis whitespace-nowrap overflow-hidden">{payload}</div>
+        <div className="text-ellipsis whitespace-nowrap overflow-hidden">{payload}</div>
         <div className="flex justify-start text-default-500">
-          <div className="select-none">{type}</div>
-          <div className="select-none ml-2">{proxy}</div>
+          <div>{type}</div>
+          <div className="ml-2">{proxy}</div>
         </div>
       </CardBody>
     </Card>
diff --git a/src/renderer/src/components/sider/conn-card.tsx b/src/renderer/src/components/sider/conn-card.tsx
index a02def3..dd02dd3 100644
--- a/src/renderer/src/components/sider/conn-card.tsx
+++ b/src/renderer/src/components/sider/conn-card.tsx
@@ -43,7 +43,7 @@ const ConnCard: React.FC = () => {
               className={`${match ? 'text-white' : 'text-foreground'} text-[24px]`}
             />
           </Button>
-          <div className={`p-2 w-full select-none ${match ? 'text-white' : 'text-foreground'} `}>
+          <div className={`p-2 w-full ${match ? 'text-white' : 'text-foreground'} `}>
             <div className="flex justify-between">
               <div className="w-full text-right mr-2">{calcTraffic(upload)}/s</div>
               <FaCircleArrowUp className="h-[24px] leading-[24px]" />
@@ -56,9 +56,7 @@ const ConnCard: React.FC = () => {
         </div>
       </CardBody>
       <CardFooter className="pt-1">
-        <h3 className={`select-none text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>
-          连接
-        </h3>
+        <h3 className={`text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>连接</h3>
       </CardFooter>
     </Card>
   )
diff --git a/src/renderer/src/components/sider/dns-card.tsx b/src/renderer/src/components/sider/dns-card.tsx
index e68b1d8..c5e08d8 100644
--- a/src/renderer/src/components/sider/dns-card.tsx
+++ b/src/renderer/src/components/sider/dns-card.tsx
@@ -45,9 +45,7 @@ const DNSCard: React.FC = () => {
         </div>
       </CardBody>
       <CardFooter className="pt-1">
-        <h3 className={`select-none text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>
-          DNS
-        </h3>
+        <h3 className={`text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>DNS</h3>
       </CardFooter>
     </Card>
   )
diff --git a/src/renderer/src/components/sider/log-card.tsx b/src/renderer/src/components/sider/log-card.tsx
index 9d9bbec..c3261be 100644
--- a/src/renderer/src/components/sider/log-card.tsx
+++ b/src/renderer/src/components/sider/log-card.tsx
@@ -28,9 +28,7 @@ const LogCard: React.FC = () => {
         </div>
       </CardBody>
       <CardFooter className="pt-1">
-        <h3 className={`select-none text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>
-          日志
-        </h3>
+        <h3 className={`text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>日志</h3>
       </CardFooter>
     </Card>
   )
diff --git a/src/renderer/src/components/sider/mihomo-core-card.tsx b/src/renderer/src/components/sider/mihomo-core-card.tsx
index 3cc48e1..bff2cef 100644
--- a/src/renderer/src/components/sider/mihomo-core-card.tsx
+++ b/src/renderer/src/components/sider/mihomo-core-card.tsx
@@ -40,7 +40,7 @@ const MihomoCoreCard: React.FC = () => {
       <CardBody>
         <div className="flex justify-between h-[32px]">
           <h3
-            className={`select-none text-md font-bold leading-[32px] ${match ? 'text-white' : 'text-foreground'} `}
+            className={`text-md font-bold leading-[32px] ${match ? 'text-white' : 'text-foreground'} `}
           >
             {version?.version ?? '-'}
           </h3>
@@ -64,7 +64,7 @@ const MihomoCoreCard: React.FC = () => {
       </CardBody>
       <CardFooter className="pt-1">
         <div
-          className={`flex justify-between w-full select-none text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}
+          className={`flex justify-between w-full text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}
         >
           <h4>内核设置</h4>
           <h4>{calcTraffic(mem)}</h4>
diff --git a/src/renderer/src/components/sider/outbound-mode-switcher.tsx b/src/renderer/src/components/sider/outbound-mode-switcher.tsx
index 46ba5ba..c4c96a7 100644
--- a/src/renderer/src/components/sider/outbound-mode-switcher.tsx
+++ b/src/renderer/src/components/sider/outbound-mode-switcher.tsx
@@ -19,21 +19,9 @@ const OutboundModeSwitcher: React.FC = () => {
       selectedKey={mode}
       onSelectionChange={(key: Key) => onChangeMode(key as OutboundMode)}
     >
-      <Tab
-        className={`select-none ${mode === 'rule' ? 'font-bold' : ''}`}
-        key="rule"
-        title="规则"
-      />
-      <Tab
-        className={`select-none ${mode === 'global' ? 'font-bold' : ''}`}
-        key="global"
-        title="全局"
-      />
-      <Tab
-        className={`select-none ${mode === 'direct' ? 'font-bold' : ''}`}
-        key="direct"
-        title="直连"
-      />
+      <Tab className={`${mode === 'rule' ? 'font-bold' : ''}`} key="rule" title="规则" />
+      <Tab className={`${mode === 'global' ? 'font-bold' : ''}`} key="global" title="全局" />
+      <Tab className={`${mode === 'direct' ? 'font-bold' : ''}`} key="direct" title="直连" />
     </Tabs>
   )
 }
diff --git a/src/renderer/src/components/sider/override-card.tsx b/src/renderer/src/components/sider/override-card.tsx
index 3ecb734..220b62c 100644
--- a/src/renderer/src/components/sider/override-card.tsx
+++ b/src/renderer/src/components/sider/override-card.tsx
@@ -37,9 +37,7 @@ const OverrideCard: React.FC = () => {
         </div>
       </CardBody>
       <CardFooter className="pt-1">
-        <h3 className={`select-none text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>
-          覆写
-        </h3>
+        <h3 className={`text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>覆写</h3>
       </CardFooter>
     </Card>
   )
diff --git a/src/renderer/src/components/sider/profile-card.tsx b/src/renderer/src/components/sider/profile-card.tsx
index 186c21a..b10b861 100644
--- a/src/renderer/src/components/sider/profile-card.tsx
+++ b/src/renderer/src/components/sider/profile-card.tsx
@@ -43,7 +43,7 @@ const ProfileCard: React.FC = () => {
         <CardBody className="pb-1">
           <div className="flex justify-between h-[32px]">
             <h3
-              className={`select-none text-ellipsis whitespace-nowrap overflow-hidden text-md font-bold leading-[32px] ${match ? 'text-white' : 'text-foreground'} `}
+              className={`text-ellipsis whitespace-nowrap overflow-hidden text-md font-bold leading-[32px] ${match ? 'text-white' : 'text-foreground'} `}
             >
               {info?.name}
             </h3>
@@ -85,7 +85,7 @@ const ProfileCard: React.FC = () => {
           </div>
           {info.type === 'remote' && (
             <div
-              className={`mt-2 flex select-none justify-between ${match ? 'text-white' : 'text-foreground'} `}
+              className={`mt-2 flex justify-between ${match ? 'text-white' : 'text-foreground'} `}
             >
               <small>{extra ? `${calcTraffic(usage)}/${calcTraffic(total)}` : undefined}</small>
               <small>{dayjs(info.updated).fromNow()}</small>
@@ -93,7 +93,7 @@ const ProfileCard: React.FC = () => {
           )}
           {info.type === 'local' && (
             <div
-              className={`mt-2 flex select-none justify-between ${match ? 'text-white' : 'text-foreground'}`}
+              className={`mt-2 flex justify-between ${match ? 'text-white' : 'text-foreground'}`}
             >
               <Chip
                 size="sm"
@@ -109,7 +109,7 @@ const ProfileCard: React.FC = () => {
           {extra && (
             <Progress
               className="w-full"
-              classNames={{ indicator: match ? 'bg-white' : 'bg-foreground', label: 'select-none' }}
+              classNames={{ indicator: match ? 'bg-white' : 'bg-foreground' }}
               value={calcPercent(extra?.upload, extra?.download, extra?.total)}
             />
           )}
diff --git a/src/renderer/src/components/sider/proxy-card.tsx b/src/renderer/src/components/sider/proxy-card.tsx
index 9195b6d..7ddd53c 100644
--- a/src/renderer/src/components/sider/proxy-card.tsx
+++ b/src/renderer/src/components/sider/proxy-card.tsx
@@ -39,11 +39,11 @@ const ProxyCard: React.FC = () => {
               match
                 ? {
                     base: 'border-white',
-                    content: 'text-white select-none'
+                    content: 'text-white'
                   }
                 : {
                     base: 'border-primary',
-                    content: 'text-primary select-none'
+                    content: 'text-primary'
                   }
             }
             size="sm"
@@ -55,9 +55,7 @@ const ProxyCard: React.FC = () => {
         </div>
       </CardBody>
       <CardFooter className="pt-1">
-        <h3 className={`select-none text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>
-          代理组
-        </h3>
+        <h3 className={`text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>代理组</h3>
       </CardFooter>
     </Card>
   )
diff --git a/src/renderer/src/components/sider/resource-card.tsx b/src/renderer/src/components/sider/resource-card.tsx
index 2fa49eb..e1f4f4a 100644
--- a/src/renderer/src/components/sider/resource-card.tsx
+++ b/src/renderer/src/components/sider/resource-card.tsx
@@ -30,7 +30,7 @@ const ResourceCard: React.FC = () => {
         </div>
       </CardBody>
       <CardFooter className="pt-1">
-        <h3 className={`select-none text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>
+        <h3 className={`text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>
           外部资源
         </h3>
       </CardFooter>
diff --git a/src/renderer/src/components/sider/rule-card.tsx b/src/renderer/src/components/sider/rule-card.tsx
index 7401718..335bd93 100644
--- a/src/renderer/src/components/sider/rule-card.tsx
+++ b/src/renderer/src/components/sider/rule-card.tsx
@@ -36,11 +36,11 @@ const RuleCard: React.FC = () => {
               match
                 ? {
                     base: 'border-white',
-                    content: 'text-white select-none'
+                    content: 'text-white'
                   }
                 : {
                     base: 'border-primary',
-                    content: 'text-primary select-none'
+                    content: 'text-primary'
                   }
             }
             size="sm"
@@ -52,9 +52,7 @@ const RuleCard: React.FC = () => {
         </div>
       </CardBody>
       <CardFooter className="pt-1">
-        <h3 className={`select-none text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>
-          规则
-        </h3>
+        <h3 className={`text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>规则</h3>
       </CardFooter>
     </Card>
   )
diff --git a/src/renderer/src/components/sider/sniff-card.tsx b/src/renderer/src/components/sider/sniff-card.tsx
index 62a37ea..896b9fd 100644
--- a/src/renderer/src/components/sider/sniff-card.tsx
+++ b/src/renderer/src/components/sider/sniff-card.tsx
@@ -45,7 +45,7 @@ const SniffCard: React.FC = () => {
         </div>
       </CardBody>
       <CardFooter className="pt-1">
-        <h3 className={`select-none text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>
+        <h3 className={`text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>
           域名嗅探
         </h3>
       </CardFooter>
diff --git a/src/renderer/src/components/sider/sysproxy-switcher.tsx b/src/renderer/src/components/sider/sysproxy-switcher.tsx
index 989ce3c..0d5b28a 100644
--- a/src/renderer/src/components/sider/sysproxy-switcher.tsx
+++ b/src/renderer/src/components/sider/sysproxy-switcher.tsx
@@ -49,7 +49,7 @@ const SysproxySwitcher: React.FC = () => {
         </div>
       </CardBody>
       <CardFooter className="pt-1">
-        <h3 className={`select-none text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>
+        <h3 className={`text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>
           系统代理
         </h3>
       </CardFooter>
diff --git a/src/renderer/src/components/sider/tun-switcher.tsx b/src/renderer/src/components/sider/tun-switcher.tsx
index f864be6..8f5b146 100644
--- a/src/renderer/src/components/sider/tun-switcher.tsx
+++ b/src/renderer/src/components/sider/tun-switcher.tsx
@@ -76,9 +76,7 @@ const TunSwitcher: React.FC = () => {
           </div>
         </CardBody>
         <CardFooter className="pt-1">
-          <h3
-            className={`select-none text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}
-          >
+          <h3 className={`text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>
             虚拟网卡
           </h3>
         </CardFooter>
diff --git a/src/renderer/src/pages/connections.tsx b/src/renderer/src/pages/connections.tsx
index 2128598..84a4d06 100644
--- a/src/renderer/src/pages/connections.tsx
+++ b/src/renderer/src/pages/connections.tsx
@@ -58,7 +58,7 @@ const Connections: React.FC = () => {
       title="连接"
       header={
         <div className="flex">
-          <div className="flex items-center select-none">
+          <div className="flex items-center">
             <span className="mx-1 text-gray-400">
               下载: {calcTraffic(connectionsInfo?.downloadTotal ?? 0)}{' '}
             </span>
@@ -99,7 +99,7 @@ const Connections: React.FC = () => {
         }}
         isHeaderSticky
         isStriped
-        className="h-[calc(100vh-100px)] p-2 select-none"
+        className="h-[calc(100vh-100px)] p-2"
       >
         <TableHeader>
           <TableColumn key="type">类型</TableColumn>
diff --git a/src/renderer/src/pages/dns.tsx b/src/renderer/src/pages/dns.tsx
index a941b39..1e497a2 100644
--- a/src/renderer/src/pages/dns.tsx
+++ b/src/renderer/src/pages/dns.tsx
@@ -160,9 +160,9 @@ const DNS: React.FC = () => {
             selectedKey={values.enhancedMode}
             onSelectionChange={(key: Key) => setValues({ ...values, enhancedMode: key as DnsMode })}
           >
-            <Tab key="fake-ip" title="虚假IP" className="select-none" />
-            <Tab key="redir-host" title="真实IP" className="select-none" />
-            <Tab key="normal" title="取消映射" className="select-none" />
+            <Tab key="fake-ip" title="虚假IP" />
+            <Tab key="redir-host" title="真实IP" />
+            <Tab key="normal" title="取消映射" />
           </Tabs>
         </SettingItem>
         {values.enhancedMode === 'fake-ip' ? (
@@ -178,7 +178,7 @@ const DNS: React.FC = () => {
               />
             </SettingItem>
             <div className="flex flex-col items-stretch">
-              <h3 className="select-none">真实IP回应</h3>
+              <h3>真实IP回应</h3>
               {renderListInputs('fakeIPFilter', '例: +.lan')}
             </div>
             <Divider className="my-2" />
@@ -204,12 +204,12 @@ const DNS: React.FC = () => {
         </SettingItem>
 
         <div className="flex flex-col items-stretch">
-          <h3 className="select-none">代理节点域名解析</h3>
+          <h3>代理节点域名解析</h3>
           {renderListInputs('proxyServerNameserver', '例: tls://223.5.5.5')}
         </div>
         <Divider className="my-2" />
         <div className="flex flex-col items-stretch">
-          <h3 className="select-none">DNS服务器</h3>
+          <h3>DNS服务器</h3>
           {renderListInputs('nameserver', '例: tls://223.5.5.5')}
         </div>
         <Divider className="my-2" />
@@ -245,7 +245,7 @@ const DNS: React.FC = () => {
                         }
                       />
                     </div>
-                    <span className="select-none mx-2">:</span>
+                    <span className="mx-2">:</span>
                     <div className="flex-[6] flex">
                       <Input
                         size="sm"
@@ -313,7 +313,7 @@ const DNS: React.FC = () => {
                     }
                   />
                 </div>
-                <span className="select-none mx-2">:</span>
+                <span className="mx-2">:</span>
                 <div className="flex-[6] flex">
                   <Input
                     size="sm"
diff --git a/src/renderer/src/pages/proxies.tsx b/src/renderer/src/pages/proxies.tsx
index 94b1fe7..406607d 100644
--- a/src/renderer/src/pages/proxies.tsx
+++ b/src/renderer/src/pages/proxies.tsx
@@ -171,7 +171,7 @@ const Proxies: React.FC = () => {
                         />
                       ) : null}
                       <div className="text-ellipsis overflow-hidden whitespace-nowrap">
-                        <div className="inline flag-emoji h-[32px] select-none text-md leading-[32px]">
+                        <div className="inline flag-emoji h-[32px] text-md leading-[32px]">
                           {groups[index].name}
                         </div>
 
@@ -189,7 +189,7 @@ const Proxies: React.FC = () => {
                     </div>
                     <div className="flex">
                       {proxyDisplayMode === 'full' && (
-                        <Chip size="sm" className="my-1 mr-2 select-none">
+                        <Chip size="sm" className="my-1 mr-2">
                           {groups[index].all.length}
                         </Chip>
                       )}
diff --git a/src/renderer/src/pages/settings.tsx b/src/renderer/src/pages/settings.tsx
index f75cd40..15408bf 100644
--- a/src/renderer/src/pages/settings.tsx
+++ b/src/renderer/src/pages/settings.tsx
@@ -208,7 +208,7 @@ const Settings: React.FC = () => {
           </Button>
         </SettingItem>
         <SettingItem title="应用版本">
-          <div className="select-none">v{version}</div>
+          <div>v{version}</div>
         </SettingItem>
       </SettingCard>
     </BasePage>
diff --git a/src/renderer/src/pages/sniffer.tsx b/src/renderer/src/pages/sniffer.tsx
index c73c8de..1674792 100644
--- a/src/renderer/src/pages/sniffer.tsx
+++ b/src/renderer/src/pages/sniffer.tsx
@@ -153,7 +153,7 @@ const Sniffer: React.FC = () => {
           />
         </SettingItem>
         <div className="flex flex-col items-stretch">
-          <h3 className="select-none">跳过嗅探域名</h3>
+          <h3>跳过嗅探域名</h3>
           {[...values.skipDomain, ''].map((d, index) => (
             <div key={index} className="flex mt-2">
               <Input
@@ -179,7 +179,7 @@ const Sniffer: React.FC = () => {
         </div>
         <Divider className="my-2" />
         <div className="flex flex-col items-stretch">
-          <h3 className="select-none mb-2">强制嗅探域名</h3>
+          <h3 className="mb-2">强制嗅探域名</h3>
           {[...values.forceDomain, ''].map((d, index) => (
             <div key={index} className="flex mb-2">
               <Input
diff --git a/src/renderer/src/pages/syspeoxy.tsx b/src/renderer/src/pages/syspeoxy.tsx
index ecfb0c6..385f6ca 100644
--- a/src/renderer/src/pages/syspeoxy.tsx
+++ b/src/renderer/src/pages/syspeoxy.tsx
@@ -134,8 +134,8 @@ const Sysproxy: React.FC = () => {
             selectedKey={values.mode}
             onSelectionChange={(key: Key) => setValues({ ...values, mode: key as SysProxyMode })}
           >
-            <Tab className="select-none" key="manual" title="手动" />
-            <Tab className="select-none" key="auto" title="PAC" />
+            <Tab key="manual" title="手动" />
+            <Tab key="auto" title="PAC" />
           </Tabs>
         </SettingItem>
         {platform === 'win32' && (
@@ -171,7 +171,7 @@ const Sysproxy: React.FC = () => {
               </Button>
             </SettingItem>
             <div className="flex flex-col items-stretch">
-              <h3 className="select-none mb-2">代理绕过</h3>
+              <h3 className="mb-2">代理绕过</h3>
               {[...values.bypass, ''].map((domain, index) => (
                 <div key={index} className="mb-2 flex">
                   <Input
diff --git a/src/renderer/src/pages/tun.tsx b/src/renderer/src/pages/tun.tsx
index 7009c64..fdccbc7 100644
--- a/src/renderer/src/pages/tun.tsx
+++ b/src/renderer/src/pages/tun.tsx
@@ -91,9 +91,9 @@ const Tun: React.FC = () => {
             selectedKey={values.stack}
             onSelectionChange={(key: Key) => setValues({ ...values, stack: key as TunStack })}
           >
-            <Tab key="gvisor" title="用户" className="select-none" />
-            <Tab key="mixed" title="混合" className="select-none" />
-            <Tab key="system" title="系统" className="select-none" />
+            <Tab key="gvisor" title="用户" />
+            <Tab key="mixed" title="混合" />
+            <Tab key="system" title="系统" />
           </Tabs>
         </SettingItem>
         <SettingItem title="Tun 网卡名称" divider>