adjust styles

src/main/core/manager.ts

@@ -101,6 +101,7 @@ async function checkProfile(): Promise<void> {
 }
 
 export async function autoGrantCorePermition(corePath: string): Promise<void> {
+  if (process.platform === 'win32') return
   const { encryptedPassword } = await getAppConfig()
   const execPromise = promisify(exec)
   if (encryptedPassword && isEncryptionAvailable()) {

src/renderer/src/components/base/base-page.tsx

@@ -15,8 +15,8 @@ const BasePage = forwardRef<HTMLDivElement, Props>((props, ref) => {
 
   return (
     <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="sticky top-0 z-40 h-[49px] w-full backdrop-blur bg-background/40">
-        <div className="p-2 flex justify-between">
+        <div className="p-2 flex justify-between h-[48px]">
           <div className="title h-full text-lg leading-[32px]">{props.title}</div>
           <div className="header h-full">{props.header}</div>
         </div>

src/renderer/src/components/logs/log-item.tsx

@@ -7,10 +7,11 @@ const colorMap = {
   info: 'primary',
   debug: 'default'
 }
-const LogItem: React.FC<IMihomoLogInfo> = (props) => {
+const LogItem: React.FC<IMihomoLogInfo & { index: number }> = (props) => {
-  const { type, payload, time } = props
+  const { type, payload, time, index } = props
   return (
-    <Card className="m-2">
+    <div className={`px-2 pb-2 ${index === 0 ? 'pt-2' : ''}`}>
+      <Card>
         <CardHeader className="pb-0 pt-1">
           <div className={`mr-2 text-lg font-bold text-${colorMap[type]}`}>
             {props.type.toUpperCase()}
@@ -19,6 +20,7 @@ const LogItem: React.FC<IMihomoLogInfo> = (props) => {
         </CardHeader>
         <CardBody className="pt-0 text-sm">{payload}</CardBody>
       </Card>
+    </div>
   )
 }
 

src/renderer/src/components/rules/rule-item.tsx

@@ -1,10 +1,11 @@
 import { Card, CardBody } from '@nextui-org/react'
 import React from 'react'
 
-const RuleItem: React.FC<IMihomoRulesDetail> = (props) => {
+const RuleItem: React.FC<IMihomoRulesDetail & { index: number }> = (props) => {
-  const { type, payload, proxy } = props
+  const { type, payload, proxy, index } = props
   return (
-    <Card className="mb-2 mx-2">
+    <div className={`w-full px-2 pb-2 ${index === 0 ? 'pt-2' : ''}`}>
+      <Card>
         <CardBody className="w-full">
           <div className="text-ellipsis whitespace-nowrap overflow-hidden">{payload}</div>
           <div className="flex justify-start text-default-500">
@@ -13,6 +14,7 @@ const RuleItem: React.FC<IMihomoRulesDetail> = (props) => {
           </div>
         </CardBody>
       </Card>
+    </div>
   )
 }
 

src/renderer/src/pages/connections.tsx

@@ -6,7 +6,7 @@ import {
   stopMihomoConnections
 } from '@renderer/utils/ipc'
 import { Key, useEffect, useMemo, useState } from 'react'
-import { Button, Input } from '@nextui-org/react'
+import { Button, Divider, Input } from '@nextui-org/react'
 import { IoCloseCircle } from 'react-icons/io5'
 import { calcTraffic } from '@renderer/utils/calc'
 import { Table, TableHeader, TableColumn, TableBody, TableRow, TableCell } from '@nextui-org/react'
@@ -83,7 +83,8 @@ const Connections: React.FC = () => {
           connection={selectedConnection}
         />
       )}
-      <div className="overflow-x-auto sticky top-[49px] z-40 backdrop-blur bg-background/40 flex p-2">
+      <div className="overflow-x-auto sticky top-[49px] z-40">
+        <div className="flex p-2">
           <Input
             variant="bordered"
             size="sm"
@@ -92,6 +93,8 @@ const Connections: React.FC = () => {
             onValueChange={setFilter}
           />
         </div>
+        <Divider />
+      </div>
       <Table
         onRowAction={(id: Key) => {
           setSelectedConnection(connections.find((c) => c.id === (id as string)))

src/renderer/src/pages/logs.tsx

@@ -2,7 +2,7 @@ import BasePage from '@renderer/components/base/base-page'
 import { startMihomoLogs, stopMihomoLogs } from '@renderer/utils/ipc'
 import LogItem from '@renderer/components/logs/log-item'
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { Button, Input } from '@nextui-org/react'
+import { Button, Divider, Input } from '@nextui-org/react'
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso'
 
 const Logs: React.FC = () => {
@@ -45,8 +45,8 @@ const Logs: React.FC = () => {
 
   return (
     <BasePage title="实时日志">
-      <div className="sticky top-[49px] z-40 backdrop-blur bg-background/40 flex p-2">
+      <div className="sticky top-[49px] z-40">
-        <div className="w-full flex">
+        <div className="w-full flex p-2">
           <Input
             variant="bordered"
             size="sm"
@@ -66,17 +66,19 @@ const Logs: React.FC = () => {
             追踪
           </Button>
         </div>
+        <Divider />
       </div>
       <Virtuoso
         autoFocus
         ref={virtuosoRef}
         style={{ height: 'calc(100vh - 100px)' }}
+        data={filteredLogs}
         totalCount={filteredLogs.length}
-        itemContent={(index) => {
+        itemContent={(i, log) => {
-          const log = filteredLogs[index]
           return (
             <LogItem
-              key={log.payload + index}
+              index={i}
+              key={log.payload + i}
               time={log.time}
               type={log.type}
               payload={log.payload}

src/renderer/src/pages/override.tsx

@@ -1,4 +1,4 @@
-import { Button, Input } from '@nextui-org/react'
+import { Button, Divider, Input } from '@nextui-org/react'
 import BasePage from '@renderer/components/base/base-page'
 import { getFilePath, readTextFile } from '@renderer/utils/ipc'
 import { useEffect, useRef, useState } from 'react'
@@ -133,7 +133,8 @@ const Override: React.FC = () => {
         </>
       }
     >
-      <div className="sticky top-[48px] z-40 backdrop-blur bg-background/40 flex p-2">
+      <div className="sticky top-[49px] z-40 backdrop-blur bg-background/40">
+        <div className="flex p-2">
           <Input
             variant="bordered"
             size="sm"
@@ -186,9 +187,11 @@ const Override: React.FC = () => {
             打开
           </Button>
         </div>
+        <Divider />
+      </div>
       <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd}>
         <div
-          className={`${fileOver ? 'blur-sm' : ''} grid sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2 mx-2`}
+          className={`${fileOver ? 'blur-sm' : ''} grid sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2 m-2`}
         >
           <SortableContext
             items={sortedItems.map((item) => {

src/renderer/src/pages/profiles.tsx

@@ -1,4 +1,4 @@
-import { Button, Checkbox, Input } from '@nextui-org/react'
+import { Button, Checkbox, Divider, Input } from '@nextui-org/react'
 import BasePage from '@renderer/components/base/base-page'
 import ProfileItem from '@renderer/components/profiles/profile-item'
 import { useProfileConfig } from '@renderer/hooks/use-profile-config'
@@ -122,7 +122,8 @@ const Profiles: React.FC = () => {
         </Button>
       }
     >
-      <div className="sticky top-[48px] z-40 backdrop-blur bg-background/40 flex p-2">
+      <div className="sticky top-[49px] z-40 backdrop-blur bg-background/40">
+        <div className="flex p-2">
           <Input
             variant="bordered"
             size="sm"
@@ -183,9 +184,11 @@ const Profiles: React.FC = () => {
             打开
           </Button>
         </div>
+        <Divider />
+      </div>
       <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd}>
         <div
-          className={`${fileOver ? 'blur-sm' : ''} grid sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2 mx-2`}
+          className={`${fileOver ? 'blur-sm' : ''} grid sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2 m-2`}
         >
           <SortableContext
             items={sortedItems.map((item) => {

src/renderer/src/pages/rules.tsx

@@ -2,14 +2,12 @@ import BasePage from '@renderer/components/base/base-page'
 import RuleItem from '@renderer/components/rules/rule-item'
 import { Virtuoso } from 'react-virtuoso'
 import { useMemo, useState } from 'react'
-import { Input } from '@nextui-org/react'
+import { Divider, Input } from '@nextui-org/react'
 import useSWR from 'swr'
 import { mihomoRules } from '@renderer/utils/ipc'
 
 const Rules: React.FC = () => {
-  const { data: rules } = useSWR<IMihomoRulesInfo>('mihomoRules', mihomoRules, {
+  const { data: rules } = useSWR<IMihomoRulesInfo>('mihomoRules', mihomoRules)
-    refreshInterval: 5000
-  })
   const [filter, setFilter] = useState('')
 
   const filteredRules = useMemo(() => {
@@ -24,7 +22,8 @@ const Rules: React.FC = () => {
 
   return (
     <BasePage title="分流规则">
-      <div className="sticky top-[49px] z-40 backdrop-blur bg-background/40 flex p-2">
+      <div className="sticky top-[50px] z-40">
+        <div className="flex p-2">
           <Input
             variant="bordered"
             size="sm"
@@ -33,11 +32,19 @@ const Rules: React.FC = () => {
             onValueChange={setFilter}
           />
         </div>
+        <Divider />
+      </div>
       <Virtuoso
-        style={{ height: 'calc(100vh - 100px)' }}
+        style={{ height: 'calc(100vh - 100px)', marginTop: '1px' }}
         data={filteredRules}
-        itemContent={(_, rule) => (
+        itemContent={(i, rule) => (
-          <RuleItem type={rule.type} payload={rule.payload} proxy={rule.proxy} size={rule.size} />
+          <RuleItem
+            index={i}
+            type={rule.type}
+            payload={rule.payload}
+            proxy={rule.proxy}
+            size={rule.size}
+          />
         )}
       />
     </BasePage>