[mod] 调整界面

Borber · Sep 26, 2023 · e26e758 · e26e758
1 parent a3f44cb
commit e26e758
Show file tree

Hide file tree

Showing 18 changed files with 220 additions and 310 deletions.
diff --git a/crates/gui/.eslintrc.json b/crates/gui/.eslintrc.json
@@ -16,6 +16,7 @@
     },
     "ignorePatterns": ["src/assets", "src/css", "src/*.css"],
     "rules": {
+        "semi": ["error", "never"],
         "simple-import-sort/imports": "error",
         "simple-import-sort/exports": "error"
     }

diff --git a/crates/gui/package.json b/crates/gui/package.json
@@ -14,17 +14,17 @@
     "dependencies": {
         "@solidjs/router": "^0.8.3",
         "@tauri-apps/api": "^1.4.0",
-        "solid-js": "^1.7.11",
-        "solid-spinner": "^0.1.9",
+        "solid-js": "^1.7.12",
+        "solid-spinner": "^0.2.0",
         "solid-toast": "^0.5.0",
         "solid-transition-group": "^0.2.3"
     },
     "devDependencies": {
         "@tauri-apps/cli": "^1.4.0",
-        "@types/node": "^20.5.7",
-        "@typescript-eslint/eslint-plugin": "^6.5.0",
-        "@typescript-eslint/parser": "^6.5.0",
-        "eslint": "^8.48.0",
+        "@types/node": "^20.7.0",
+        "@typescript-eslint/eslint-plugin": "^6.7.3",
+        "@typescript-eslint/parser": "^6.7.3",
+        "eslint": "^8.50.0",
         "eslint-plugin-simple-import-sort": "^10.0.0",
         "eslint-plugin-solid": "^0.13.0",
         "typescript": "^5.2.2",

diff --git a/crates/gui/src/App.tsx b/crates/gui/src/App.tsx
@@ -1,24 +1,13 @@
-import './App.css'
-import './css/TopBar.css'
+import "./App.css"
+import "./css/TopBar.css"
 
-import { useRoutes } from '@solidjs/router'
-import { lazy, onMount } from 'solid-js'
-import { Toaster } from 'solid-toast'
+import { useRoutes } from "@solidjs/router"
+import { lazy, onMount } from "solid-js"
+import { Toaster } from "solid-toast"
 
-import Control from './components/Control'
-import SideBar from './components/SideBar'
-import TopBar from './components/TopBar'
-
-// interface Node {
-//     rid: string
-//     title: string
-//     urls: Url[]
-// }
-
-// interface Url {
-//     format: string
-//     url: string
-// }
+import Control from "./components/Control"
+import SideBar from "./components/SideBar"
+import TopBar from "./components/TopBar"
 
 const App = () => {
     onMount(async () => {
@@ -37,15 +26,15 @@ const App = () => {
     })
 
     const setupWindow = async () => {
-        const appWindow = (await import('@tauri-apps/api/window')).appWindow
+        const appWindow = (await import("@tauri-apps/api/window")).appWindow
         appWindow.show()
     }
 
     const routes = [
-        { path: '/', component: lazy(() => import('./pages/Home')) },
-        { path: '/good', component: lazy(() => import('./pages/Good')) },
-        { path: '/chart', component: lazy(() => import('./pages/Chart')) },
-        { path: '/setting', component: lazy(() => import('./pages/Setting')) },
+        { path: "/", component: lazy(() => import("./pages/Home")) },
+        { path: "/good", component: lazy(() => import("./pages/Good")) },
+        { path: "/chart", component: lazy(() => import("./pages/Chart")) },
+        { path: "/setting", component: lazy(() => import("./pages/Setting")) },
     ]
 
     const Routes = useRoutes(routes)
@@ -64,11 +53,11 @@ const App = () => {
                 position="bottom-center"
                 gutter={8}
                 toastOptions={{
-                    className: '',
+                    className: "",
                     duration: 5000,
                     style: {
-                        background: '#0f0f0fc9',
-                        color: '#fff',
+                        background: "#0f0f0fc9",
+                        color: "#fff",
                     },
                 }}
             />

diff --git a/crates/gui/src/components/Control.tsx b/crates/gui/src/components/Control.tsx
@@ -1,7 +1,7 @@
-import '../css/Control.css'
+import "../css/Control.css"
 
-import { appWindow } from '@tauri-apps/api/window'
-import { Show } from 'solid-js'
+import { appWindow } from "@tauri-apps/api/window"
+import { Show } from "solid-js"
 
 // TODO 修复最小化, 隐藏时的渲染bug
 
@@ -61,8 +61,7 @@ const Control = (props: BarProps) => {
                     <div
                         class="control-item"
                         title="最小化"
-                        onClick={() => appWindow.minimize()}
-                    >
+                        onClick={() => appWindow.minimize()}>
                         {Minimize()}
                     </div>
                 </Show>
@@ -75,8 +74,7 @@ const Control = (props: BarProps) => {
                     <div
                         class="control-item control-item-close"
                         onClick={() => appWindow.close()}
-                        title="关闭"
-                    >
+                        title="关闭">
                         {Close()}
                     </div>
                 </Show>

diff --git a/crates/gui/src/components/GoodItem.tsx b/crates/gui/src/components/GoodItem.tsx
@@ -1,25 +1,25 @@
-import '../css/GoodItem.css'
+import "../css/GoodItem.css"
 
-import { AddIcon, CopyIcon, PlayIcon } from '../icon/icon'
+import { AddIcon, CopyIcon, PlayIcon } from "../icon/icon"
 
 interface Url {
-    format: string
-    url: string
+    format: string;
+    url: string;
 }
 
 interface GoodItemProps {
-    live: string
-    rid: string
-    title: string
-    anchor: string
-    urls: Url[]
-    img?: string
+    live: string;
+    rid: string;
+    title: string;
+    anchor: string;
+    urls: Url[];
+    img?: string;
 }
 
 const GoodItem = (props: GoodItemProps) => {
     return (
         <div class="good-item">
-            <img class="good-img" src={props.img ?? '/src/assets/no_img.png'} />
+            <img class="good-img" src={props.img ?? "/src/assets/no_img.png"} />
             <div class="good-panel">
                 <div class="good-title">{props.title}</div>
                 <div class="good-info">快来看</div>

diff --git a/crates/gui/src/components/Live.tsx b/crates/gui/src/components/Live.tsx
@@ -1,27 +1,27 @@
-import '../css/Live.css'
+import "../css/Live.css"
 
-import { CopyIcon, PlayIcon } from '../icon/icon'
+import { CopyIcon, PlayIcon } from "../icon/icon"
 
 interface Url {
-    format: string
-    url: string
+    format: string;
+    url: string;
 }
 
 interface LiveProps {
-    live: string
-    rid: string
-    title: string
-    anchor: string
-    urls: Url[]
-    img?: string
+    live: string;
+    rid: string;
+    title: string;
+    anchor: string;
+    urls: Url[];
+    img?: string;
 }
 
 // TODO 减少内阴影的使用, 按钮的样式应该简洁一些
 
 const Live = (props: LiveProps) => {
     return (
         <div class="live">
-            <img class="live-img" src={props.img ?? '/src/assets/no_img.png'} />
+            <img class="live-img" src={props.img ?? "/src/assets/no_img.png"} />
             <div class="live-panel">
                 <div class="live-title">{props.title}</div>
                 <div class="live-control">

diff --git a/crates/gui/src/components/Panel.tsx b/crates/gui/src/components/Panel.tsx
@@ -1,33 +1,31 @@
-import '../css/Panel.css'
+import "../css/Panel.css"
 
-import { Accessor, For, Setter } from 'solid-js'
+import { Accessor, For, Setter } from "solid-js"
 
-import allLives from '../model/Live'
+import allLives from "../model/Live"
 
 interface LiveProps {
-    flag: Setter<boolean>
-    live: Accessor<string>
-    setLive: Setter<string>
+    flag: Setter<boolean>;
+    live: Accessor<string>;
+    setLive: Setter<string>;
 }
 
 const Panel = (props: LiveProps) => {
     return (
         <div
             class="not-draggable panel"
             onMouseEnter={() => props.flag(true)}
-            onMouseLeave={() => props.flag(false)}
-        >
+            onMouseLeave={() => props.flag(false)}>
             <div class="panel-container">
                 <For each={allLives()}>
                     {(item) => (
                         <div
                             class="panel-item"
                             classList={{
-                                'panel-item-activate':
+                                "panel-item-activate":
                                     props.live() === item.cmd,
                             }}
-                            onClick={() => props.setLive(item.cmd)}
-                        >
+                            onClick={() => props.setLive(item.cmd)}>
                             {item.name}
                         </div>
                     )}

diff --git a/crates/gui/src/components/SideBar.tsx b/crates/gui/src/components/SideBar.tsx
@@ -1,10 +1,10 @@
-import '../css/SideBar.css'
+import "../css/SideBar.css"
 
-import { useLocation } from '@solidjs/router'
-import { createMemo } from 'solid-js'
+import { useLocation } from "@solidjs/router"
+import { createMemo } from "solid-js"
 
-import { ChartIcon, GoodIcon, HomeIcon, SettingIcon } from '../icon/icon'
-import SideItem from './SideItem'
+import { ChartIcon, GoodIcon, HomeIcon, SettingIcon } from "../icon/icon"
+import SideItem from "./SideItem"
 
 const SideBar = () => {
     const pathname = createMemo(() => {

diff --git a/crates/gui/src/components/SideItem.tsx b/crates/gui/src/components/SideItem.tsx
@@ -1,23 +1,22 @@
-import '../css/SideItem.css'
+import "../css/SideItem.css"
 
-import { A } from '@solidjs/router'
-import { JSX } from 'solid-js/jsx-runtime'
+import { A } from "@solidjs/router"
+import { JSX } from "solid-js/jsx-runtime"
 
 const SideItem = (props: {
-    children: JSX.Element
-    path: string
-    bottom?: boolean
-    pathname: () => string
+    children: JSX.Element;
+    path: string;
+    bottom?: boolean;
+    pathname: () => string;
 }) => {
     return (
         <A href={props.path} class="side-link">
             <div
                 class="side-item"
                 classList={{
-                    'side-item-bottom': props.bottom,
-                    'side-item-selected': props.pathname() == props.path,
-                }}
-            >
+                    "side-item-bottom": props.bottom,
+                    "side-item-selected": props.pathname() == props.path,
+                }}>
                 {props.children}
             </div>
         </A>

diff --git a/crates/gui/src/components/TopBar.tsx b/crates/gui/src/components/TopBar.tsx
@@ -1,28 +1,28 @@
-import { invoke } from '@tauri-apps/api'
-import { createSignal } from 'solid-js'
-import { Spinner, SpinnerType } from 'solid-spinner'
-import toast from 'solid-toast'
-import { Transition } from 'solid-transition-group'
+import { invoke } from "@tauri-apps/api"
+import { createSignal } from "solid-js"
+import { Spinner, SpinnerType } from "solid-spinner"
+import toast from "solid-toast"
+import { Transition } from "solid-transition-group"
 
-import { AddIcon, SyncIcon } from '../icon/icon'
-import { Resp } from '../model/Resp'
-import Panel from './Panel'
+import { AddIcon, SyncIcon } from "../icon/icon"
+import { Resp } from "../model/Resp"
+import Panel from "./Panel"
 
 const TopBar = () => {
     const [refresh, setRefresh] = createSignal(false)
-    const [rid, setRid] = createSignal('')
+    const [rid, setRid] = createSignal("")
     const [onInput, setInput] = createSignal(false)
     const [onPanel, setPanel] = createSignal(false)
-    const [live, setLive] = createSignal('bili')
+    const [live, setLive] = createSignal("bili")
 
     const add = async () => {
-        await invoke<Resp<boolean>>('add_subscribe', {
+        await invoke<Resp<boolean>>("subscribe_add", {
             live: live(),
             rid: rid(),
         }).then((p) => {
             if (p.code === 0) {
                 console.log(p.data)
-                toast.success('添加成功')
+                toast.success("添加成功")
             } else {
                 toast.error(p.msg)
             }
@@ -61,8 +61,7 @@ const TopBar = () => {
                 class="top-bar-btn"
                 onClick={async () => {
                     await add()
-                }}
-            >
+                }}>
                 <AddIcon size={16} />
             </button>
             <Transition name="slide-fade">

diff --git a/crates/gui/src/index.tsx b/crates/gui/src/index.tsx
@@ -1,16 +1,16 @@
 /* @refresh reload */
-import './styles.css'
+import "./styles.css"
 
-import { Router } from '@solidjs/router'
-import { render } from 'solid-js/web'
+import { Router } from "@solidjs/router"
+import { render } from "solid-js/web"
 
-import App from './App'
+import App from "./App"
 
 render(
     () => (
         <Router>
             <App />
         </Router>
     ),
-    document.getElementById('root') as HTMLElement
+    document.getElementById("root") as HTMLElement
 )
diff --git a/crates/gui/src/model/Live.tsx b/crates/gui/src/model/Live.tsx
@@ -73,8 +73,8 @@ const allLives = (): LiveItem[] => {
             name: "wink",
             cmd: "wink",
         },
-    ];
-    return lives;
-};
+    ]
+    return lives
+}
 
-export default allLives;
+export default allLives
diff --git a/crates/gui/src/model/Record.tsx b/crates/gui/src/model/Record.tsx
@@ -1,4 +1,4 @@
 export interface SubscribeRecord {
-    live: string
-    rid: string
+    live: string;
+    rid: string;
 }