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="p-2 flex justify-between">
+      <div className="sticky top-0 z-40 h-[49px] w-full backdrop-blur bg-background/40">
+        <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,18 +7,20 @@ const colorMap = {
   info: 'primary',
   debug: 'default'
 }
-const LogItem: React.FC<IMihomoLogInfo> = (props) => {
-  const { type, payload, time } = props
+const LogItem: React.FC<IMihomoLogInfo & { index: number }> = (props) => {
+  const { type, payload, time, index } = props
   return (
-    <Card className="m-2">
-      <CardHeader className="pb-0 pt-1">
-        <div className={`mr-2 text-lg font-bold text-${colorMap[type]}`}>
-          {props.type.toUpperCase()}
-        </div>
-        <small className="text-default-500">{time}</small>
-      </CardHeader>
-      <CardBody className="pt-0 text-sm">{payload}</CardBody>
-    </Card>
+    <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()}
+          </div>
+          <small className="text-default-500">{time}</small>
+        </CardHeader>
+        <CardBody className="pt-0 text-sm">{payload}</CardBody>
+      </Card>
+    </div>
   )
 }
 

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

@@ -1,18 +1,20 @@
 import { Card, CardBody } from '@nextui-org/react'
 import React from 'react'
 
-const RuleItem: React.FC<IMihomoRulesDetail> = (props) => {
-  const { type, payload, proxy } = props
+const RuleItem: React.FC<IMihomoRulesDetail & { index: number }> = (props) => {
+  const { type, payload, proxy, index } = props
   return (
-    <Card className="mb-2 mx-2">
-      <CardBody className="w-full">
-        <div className="text-ellipsis whitespace-nowrap overflow-hidden">{payload}</div>
-        <div className="flex justify-start text-default-500">
-          <div>{type}</div>
-          <div className="ml-2">{proxy}</div>
-        </div>
-      </CardBody>
-    </Card>
+    <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">
+            <div>{type}</div>
+            <div className="ml-2">{proxy}</div>
+          </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,14 +83,17 @@ const Connections: React.FC = () => {
           connection={selectedConnection}
         />
       )}
-      <div className="overflow-x-auto sticky top-[49px] z-40 backdrop-blur bg-background/40 flex p-2">
-        <Input
-          variant="bordered"
-          size="sm"
-          value={filter}
-          placeholder="筛选过滤"
-          onValueChange={setFilter}
-        />
+      <div className="overflow-x-auto sticky top-[49px] z-40">
+        <div className="flex p-2">
+          <Input
+            variant="bordered"
+            size="sm"
+            value={filter}
+            placeholder="筛选过滤"
+            onValueChange={setFilter}
+          />
+        </div>
+        <Divider />
       </div>
       <Table
         onRowAction={(id: Key) => {

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="w-full flex">
+      <div className="sticky top-[49px] z-40">
+        <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) => {
-          const log = filteredLogs[index]
+        itemContent={(i, log) => {
           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,62 +133,65 @@ const Override: React.FC = () => {
         </>
       }
     >
-      <div className="sticky top-[48px] z-40 backdrop-blur bg-background/40 flex p-2">
-        <Input
-          variant="bordered"
-          size="sm"
-          value={url}
-          onValueChange={setUrl}
-          endContent={
-            <Button
-              size="sm"
-              isIconOnly
-              variant="light"
-              onPress={() => {
-                navigator.clipboard.readText().then((text) => {
-                  setUrl(text)
-                })
-              }}
-            >
-              <MdContentPaste className="text-lg" />
-            </Button>
-          }
-        />
-        <Button
-          size="sm"
-          color="primary"
-          className="ml-2"
-          isDisabled={url === ''}
-          isLoading={importing}
-          onPress={handleImport}
-        >
-          导入
-        </Button>
-        <Button
-          size="sm"
-          color="primary"
-          className="ml-2"
-          onPress={() => {
-            getFilePath(['js', 'yaml']).then(async (files) => {
-              if (files?.length) {
-                const content = await readTextFile(files[0])
-                const fileName = files[0].split('/').pop()?.split('\\').pop()
-                await addOverrideItem({
-                  name: fileName,
-                  type: 'local',
-                  file: content,
-                  ext: fileName?.endsWith('.js') ? 'js' : 'yaml'
-                })
-              }
-            })
-          }}
-        >
-          打开
-        </Button>
+      <div className="sticky top-[49px] z-40 backdrop-blur bg-background/40">
+        <div className="flex p-2">
+          <Input
+            variant="bordered"
+            size="sm"
+            value={url}
+            onValueChange={setUrl}
+            endContent={
+              <Button
+                size="sm"
+                isIconOnly
+                variant="light"
+                onPress={() => {
+                  navigator.clipboard.readText().then((text) => {
+                    setUrl(text)
+                  })
+                }}
+              >
+                <MdContentPaste className="text-lg" />
+              </Button>
+            }
+          />
+          <Button
+            size="sm"
+            color="primary"
+            className="ml-2"
+            isDisabled={url === ''}
+            isLoading={importing}
+            onPress={handleImport}
+          >
+            导入
+          </Button>
+          <Button
+            size="sm"
+            color="primary"
+            className="ml-2"
+            onPress={() => {
+              getFilePath(['js', 'yaml']).then(async (files) => {
+                if (files?.length) {
+                  const content = await readTextFile(files[0])
+                  const fileName = files[0].split('/').pop()?.split('\\').pop()
+                  await addOverrideItem({
+                    name: fileName,
+                    type: 'local',
+                    file: content,
+                    ext: fileName?.endsWith('.js') ? 'js' : 'yaml'
+                  })
+                }
+              })
+            }}
+          >
+            打开
+          </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,70 +122,73 @@ const Profiles: React.FC = () => {
         </Button>
       }
     >
-      <div className="sticky top-[48px] z-40 backdrop-blur bg-background/40 flex p-2">
-        <Input
-          variant="bordered"
-          size="sm"
-          value={url}
-          onValueChange={setUrl}
-          endContent={
-            <>
-              <Button
-                size="sm"
-                isIconOnly
-                variant="light"
-                onPress={() => {
-                  navigator.clipboard.readText().then((text) => {
-                    setUrl(text)
-                  })
-                }}
-              >
-                <MdContentPaste className="text-lg" />
-              </Button>
-              <Checkbox
-                className="whitespace-nowrap"
-                checked={useProxy}
-                onValueChange={setUseProxy}
-              >
-                代理
-              </Checkbox>
-            </>
-          }
-        />
-
-        <Button
-          size="sm"
-          color="primary"
-          className="ml-2"
-          isDisabled={url === ''}
-          isLoading={importing}
-          onPress={handleImport}
-        >
-          导入
-        </Button>
-        <Button
-          size="sm"
-          color="primary"
-          className="ml-2"
-          onPress={async () => {
-            try {
-              const files = await getFilePath(['yml', 'yaml'])
-              if (files?.length) {
-                const content = await readTextFile(files[0])
-                const fileName = files[0].split('/').pop()?.split('\\').pop()
-                await addProfileItem({ name: fileName, type: 'local', file: content })
-              }
-            } catch (e) {
-              alert(e)
+      <div className="sticky top-[49px] z-40 backdrop-blur bg-background/40">
+        <div className="flex p-2">
+          <Input
+            variant="bordered"
+            size="sm"
+            value={url}
+            onValueChange={setUrl}
+            endContent={
+              <>
+                <Button
+                  size="sm"
+                  isIconOnly
+                  variant="light"
+                  onPress={() => {
+                    navigator.clipboard.readText().then((text) => {
+                      setUrl(text)
+                    })
+                  }}
+                >
+                  <MdContentPaste className="text-lg" />
+                </Button>
+                <Checkbox
+                  className="whitespace-nowrap"
+                  checked={useProxy}
+                  onValueChange={setUseProxy}
+                >
+                  代理
+                </Checkbox>
+              </>
             }
-          }}
-        >
-          打开
-        </Button>
+          />
+
+          <Button
+            size="sm"
+            color="primary"
+            className="ml-2"
+            isDisabled={url === ''}
+            isLoading={importing}
+            onPress={handleImport}
+          >
+            导入
+          </Button>
+          <Button
+            size="sm"
+            color="primary"
+            className="ml-2"
+            onPress={async () => {
+              try {
+                const files = await getFilePath(['yml', 'yaml'])
+                if (files?.length) {
+                  const content = await readTextFile(files[0])
+                  const fileName = files[0].split('/').pop()?.split('\\').pop()
+                  await addProfileItem({ name: fileName, type: 'local', file: content })
+                }
+              } catch (e) {
+                alert(e)
+              }
+            }}
+          >
+            打开
+          </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, {
-    refreshInterval: 5000
-  })
+  const { data: rules } = useSWR<IMihomoRulesInfo>('mihomoRules', mihomoRules)
   const [filter, setFilter] = useState('')
 
   const filteredRules = useMemo(() => {
@@ -24,20 +22,29 @@ const Rules: React.FC = () => {
 
   return (
     <BasePage title="分流规则">
-      <div className="sticky top-[49px] z-40 backdrop-blur bg-background/40 flex p-2">
-        <Input
-          variant="bordered"
-          size="sm"
-          value={filter}
-          placeholder="筛选过滤"
-          onValueChange={setFilter}
-        />
+      <div className="sticky top-[50px] z-40">
+        <div className="flex p-2">
+          <Input
+            variant="bordered"
+            size="sm"
+            value={filter}
+            placeholder="筛选过滤"
+            onValueChange={setFilter}
+          />
+        </div>
+        <Divider />
       </div>
       <Virtuoso
-        style={{ height: 'calc(100vh - 100px)' }}
+        style={{ height: 'calc(100vh - 100px)', marginTop: '1px' }}
         data={filteredRules}
-        itemContent={(_, rule) => (
-          <RuleItem type={rule.type} payload={rule.payload} proxy={rule.proxy} size={rule.size} />
+        itemContent={(i, rule) => (
+          <RuleItem
+            index={i}
+            type={rule.type}
+            payload={rule.payload}
+            proxy={rule.proxy}
+            size={rule.size}
+          />
         )}
       />
     </BasePage>