fix styles

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"

src/renderer/src/assets/main.css

@@ -7,6 +7,10 @@
   src: url('./NotoColorEmoji.ttf');
 }
 
+* {
+  user-select: none;
+}
+
 *:focus {
   outline: none;
 }

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 />

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}

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>

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>

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',
+                indicator: isCurrent ? 'bg-white' : 'bg-foreground'
-                label: 'select-none'
               }}
               value={calcPercent(extra?.upload, extra?.download, extra?.total)}
             />

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}

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>
                 )}

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>

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>{type}</div>
-          <div className="select-none ml-2">{proxy}</div>
+          <div className="ml-2">{proxy}</div>
         </div>
       </CardBody>
     </Card>

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 className={`text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>连接</h3>
-          连接
-        </h3>
       </CardFooter>
     </Card>
   )

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'}`}>
+        <h3 className={`text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>DNS</h3>
-          DNS
-        </h3>
       </CardFooter>
     </Card>
   )

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 className={`text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>日志</h3>
-          日志
-        </h3>
       </CardFooter>
     </Card>
   )

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>

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
+      <Tab className={`${mode === 'rule' ? 'font-bold' : ''}`} key="rule" title="规则" />
-        className={`select-none ${mode === 'rule' ? 'font-bold' : ''}`}
+      <Tab className={`${mode === 'global' ? 'font-bold' : ''}`} key="global" title="全局" />
-        key="rule"
+      <Tab className={`${mode === 'direct' ? 'font-bold' : ''}`} key="direct" title="直连" />
-        title="规则"
-      />
-      <Tab
-        className={`select-none ${mode === 'global' ? 'font-bold' : ''}`}
-        key="global"
-        title="全局"
-      />
-      <Tab
-        className={`select-none ${mode === 'direct' ? 'font-bold' : ''}`}
-        key="direct"
-        title="直连"
-      />
     </Tabs>
   )
 }

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 className={`text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>覆写</h3>
-          覆写
-        </h3>
       </CardFooter>
     </Card>
   )

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)}
             />
           )}

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 className={`text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>代理组</h3>
-          代理组
-        </h3>
       </CardFooter>
     </Card>
   )

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>

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 className={`text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>规则</h3>
-          规则
-        </h3>
       </CardFooter>
     </Card>
   )

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>

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>

src/renderer/src/components/sider/tun-switcher.tsx

@@ -76,9 +76,7 @@ const TunSwitcher: React.FC = () => {
           </div>
         </CardBody>
         <CardFooter className="pt-1">
-          <h3
+          <h3 className={`text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}>
-            className={`select-none text-md font-bold ${match ? 'text-white' : 'text-foreground'}`}
-          >
             虚拟网卡
           </h3>
         </CardFooter>

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>

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="fake-ip" title="虚假IP" />
-            <Tab key="redir-host" title="真实IP" className="select-none" />
+            <Tab key="redir-host" title="真实IP" />
-            <Tab key="normal" title="取消映射" className="select-none" />
+            <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"

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>
                       )}

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>

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

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 key="manual" title="手动" />
-            <Tab className="select-none" key="auto" title="PAC" />
+            <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

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="gvisor" title="用户" />
-            <Tab key="mixed" title="混合" className="select-none" />
+            <Tab key="mixed" title="混合" />
-            <Tab key="system" title="系统" className="select-none" />
+            <Tab key="system" title="系统" />
           </Tabs>
         </SettingItem>
         <SettingItem title="Tun 网卡名称" divider>