fix: 系统设置功能和页面

besscroft · Apr 8, 2024 · a70857b · a70857b
1 parent 8a77976
commit a70857b
Show file tree

Hide file tree

Showing 8 changed files with 224 additions and 16 deletions.
diff --git a/app/admin/settings/page.tsx b/app/admin/settings/page.tsx
@@ -1,32 +1,23 @@
 'use client'
 
 import React from 'react'
-import {Tabs, Tab, Card, CardBody} from '@nextui-org/react'
+import { Tabs, Tab } from '@nextui-org/react'
+import SettingsTab from '~/components/SettingsTab'
+import AListTabs from '~/components/AListTabs'
+import S3Tabs from '~/components/S3Tabs'
 
 export default async function Settings() {
   return (
     <div className="flex flex-col space-y-2 h-full flex-1">
       <Tabs aria-label="设置选项卡" radius="md" variant="light">
         <Tab key="system" title="系统">
-          <Card>
-            <CardBody>
-              系统设置
-            </CardBody>
-          </Card>
+          <SettingsTab />
         </Tab>
         <Tab key="s3" title="S3">
-          <Card>
-            <CardBody>
-              S3 设置
-            </CardBody>
-          </Card>
+          <S3Tabs />
         </Tab>
         <Tab key="alist" title="AList">
-          <Card>
-            <CardBody>
-              AList 设置
-            </CardBody>
-          </Card>
+          <AListTabs />
         </Tab>
       </Tabs>
     </div>

diff --git a/app/api/alist-info/route.ts b/app/api/alist-info/route.ts
@@ -0,0 +1,7 @@
+import 'server-only'
+import { fetchAListInfo } from '~/server/lib/query'
+
+export async function GET() {
+  const data = await fetchAListInfo();
+  return Response.json(data)
+}
diff --git a/app/api/s3-info/route.ts b/app/api/s3-info/route.ts
@@ -0,0 +1,7 @@
+import 'server-only'
+import { fetchS3Info } from '~/server/lib/query'
+
+export async function GET() {
+  const data = await fetchS3Info();
+  return Response.json(data)
+}
diff --git a/components/AListTabs.tsx b/components/AListTabs.tsx
@@ -0,0 +1,67 @@
+'use client'
+
+import { Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Skeleton, Card, CardHeader, Button } from '@nextui-org/react'
+import useSWR from 'swr'
+import { fetcher } from '~/utils/fetcher'
+import { toast } from 'sonner'
+
+export default function AListTabs() {
+  const { data, error, isLoading } = useSWR('/api/alist-info', fetcher)
+
+  if (error) {
+    toast.error('请求失败！')
+  }
+
+  return (
+    <div className="space-y-2">
+      <Card>
+        <CardHeader className="justify-between">
+          <div className="flex gap-5">
+            <div className="flex flex-col gap-1 items-start justify-center">
+              <h4 className="text-small font-semibold leading-none text-default-600">AList 配置信息</h4>
+            </div>
+          </div>
+          <Button
+            color="primary"
+            variant="light"
+            radius="full"
+            onClick={() => toast.info('还没写')}
+          >
+            编辑
+          </Button>
+        </CardHeader>
+      </ Card>
+      {
+        !isLoading && data ?
+          <Table aria-label="S3 设置">
+            <TableHeader>
+              <TableColumn>Key</TableColumn>
+              <TableColumn>Value</TableColumn>
+            </TableHeader>
+            <TableBody emptyContent={"No rows to display."}>
+              {
+                data.map((item: any) => (
+                  <TableRow key={item.id}>
+                    <TableCell>{item.config_key}</TableCell>
+                    <TableCell>{item.config_value || 'N&A'}</TableCell>
+                  </TableRow>
+                ))
+              }
+            </TableBody>
+          </Table>
+          :
+          <div className="w-full p-2 space-y-4">
+            <Skeleton className="w-full rounded-md">
+              <div className="h-4 w-full rounded-md bg-white"></div>
+            </Skeleton>
+            <Skeleton className="w-full rounded-md">
+              <div className="h-4 w-full rounded-md bg-white"></div>
+            </Skeleton>
+            <Skeleton className="w-full rounded-md">
+              <div className="h-4 w-full rounded-md bg-white"></div>
+            </Skeleton>
+          </div>
+      }
+    </div>
+  )
+}
diff --git a/components/S3Tabs.tsx b/components/S3Tabs.tsx
@@ -0,0 +1,67 @@
+'use client'
+
+import { Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Skeleton, Card, CardHeader, Button } from '@nextui-org/react'
+import useSWR from 'swr'
+import { fetcher } from '~/utils/fetcher'
+import { toast } from 'sonner'
+
+export default function S3Tabs() {
+  const { data, error, isLoading } = useSWR('/api/s3-info', fetcher)
+
+  if (error) {
+    toast.error('请求失败！')
+  }
+
+  return (
+    <div className="space-y-2">
+      <Card>
+        <CardHeader className="justify-between">
+          <div className="flex gap-5">
+            <div className="flex flex-col gap-1 items-start justify-center">
+              <h4 className="text-small font-semibold leading-none text-default-600">S3 配置信息</h4>
+            </div>
+          </div>
+          <Button
+            color="primary"
+            variant="light"
+            radius="full"
+            onClick={() => toast.info('还没写')}
+          >
+            编辑
+          </Button>
+        </CardHeader>
+      </ Card>
+      {
+        !isLoading && data ?
+          <Table aria-label="S3 设置">
+            <TableHeader>
+              <TableColumn>Key</TableColumn>
+              <TableColumn>Value</TableColumn>
+            </TableHeader>
+            <TableBody emptyContent={"No rows to display."}>
+              {
+                data.map((item: any) => (
+                  <TableRow key={item.id}>
+                    <TableCell>{item.config_key}</TableCell>
+                    <TableCell>{item.config_value || 'N&A'}</TableCell>
+                  </TableRow>
+                ))
+              }
+            </TableBody>
+          </Table>
+          :
+          <div className="w-full p-2 space-y-4">
+            <Skeleton className="w-full rounded-md">
+              <div className="h-4 w-full rounded-md bg-white"></div>
+            </Skeleton>
+            <Skeleton className="w-full rounded-md">
+              <div className="h-4 w-full rounded-md bg-white"></div>
+            </Skeleton>
+            <Skeleton className="w-full rounded-md">
+              <div className="h-4 w-full rounded-md bg-white"></div>
+            </Skeleton>
+          </div>
+      }
+    </div>
+  )
+}
diff --git a/components/SettingsTab.tsx b/components/SettingsTab.tsx
@@ -0,0 +1,20 @@
+'use client'
+
+import { Card, CardHeader, Button } from '@nextui-org/react'
+import { toast } from 'sonner'
+
+export default function SettingsTab() {
+  return (
+    <div className="space-y-2">
+      <Card>
+        <CardHeader className="justify-between">
+          <div className="flex gap-5">
+            <div className="flex flex-col gap-1 items-start justify-center">
+              <h4 className="text-small font-semibold leading-none text-default-600">系统设置</h4>
+            </div>
+          </div>
+        </CardHeader>
+      </ Card>
+    </div>
+  )
+}
diff --git a/server/lib/query.ts b/server/lib/query.ts
@@ -0,0 +1,48 @@
+'use server'
+
+import { db } from '~/server/lib/db'
+
+export async function fetchS3Info() {
+  const findConfig = await db.configs.findMany({
+    where: {
+      config_key: {
+        in: [
+          'accesskey_id',
+          'accesskey_secret',
+          'region',
+          'endpoint',
+          'bucket',
+          'storage_folder',
+          'cdn_url'
+        ]
+      }
+    },
+    select: {
+      id: true,
+      config_key: true,
+      config_value: true
+    }
+  })
+
+  return findConfig;
+}
+
+export async function fetchAListInfo() {
+  const findConfig = await db.configs.findMany({
+    where: {
+      config_key: {
+        in: [
+          'alist_url',
+          'alist_token'
+        ]
+      }
+    },
+    select: {
+      id: true,
+      config_key: true,
+      config_value: true
+    }
+  })
+
+  return findConfig;
+}
diff --git a/utils/fetcher.ts b/utils/fetcher.ts
@@ -0,0 +1 @@
+export const fetcher = (url: string) => fetch(url).then((res) => res.json());