fix: 布局调整，关于页面完成

besscroft · Apr 17, 2024 · 196eae1 · 196eae1
1 parent b65feb3
commit 196eae1
Show file tree

Hide file tree

Showing 17 changed files with 125 additions and 37 deletions.
diff --git a/app/admin/layout.tsx b/app/admin/layout.tsx
@@ -12,7 +12,7 @@ export default function AdminLayout({
     <>
       <div className="flex flex-col h-screen">
         <DashHeader/>
-        <div className="grid flex-1 sm:grid-cols-[200px_1fr] h-full w-full bg-gray-100 dark:bg-zinc-900">
+        <div className="grid flex-1 sm:grid-cols-[200px_1fr] h-full w-full bg-gray-50 dark:bg-zinc-900">
           <aside className="hidden w-[200px] flex-col sm:flex">
             <BaseSide/>
           </aside>

diff --git a/app/admin/page.tsx b/app/admin/page.tsx
@@ -1,23 +1,48 @@
-import { getCurrentUser } from '~/server/lib/user'
 import { Card, CardBody } from '@nextui-org/card'
+import { Button } from '@nextui-org/react'
+import Link from 'next/link'
+import { Star, MessageSquareHeart } from 'lucide-react'
 
 export default async function Admin() {
-  const user = await getCurrentUser()
 
   return (
-    <div className="flex flex-col space-y-2 h-full flex-1">
-      <Card>
-        <CardBody>
-          {user ?
-            <p>控制台（已登录）</p>
-            :
-            '控制台（未登录）'
-          }
+    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 sm:gap-6 md:gap-8 mt-4">
+      <Card isBlurred shadow="sm" className="h-48">
+        <CardBody className="flex flex-col p2 space-y-4">
+          <span className="font-light">照片数据</span>
+          <span className="text-xl font-semibold">10张</span>
+          <span className="font-light">显示照片</span>
+          <span className="text-xl font-semibold">1张</span>
         </CardBody>
       </Card>
-      <Card className="flex-1">
-        <CardBody>
-          <p>{JSON.stringify(user)}</p>
+      <Card isBlurred shadow="sm" className="h-48">
+        <CardBody className="grid grid-cols-2 gap-4">
+          <div className="flex flex-col space-y-4">
+            <span className="font-light">首页精选</span>
+            <span className="text-xl font-semibold">3 张</span>
+          </div>
+          <div className="flex flex-col space-y-4">
+            <span className="font-light">首页精选</span>
+            <span className="text-xl font-semibold">3 张</span>
+          </div>
+        </CardBody>
+      </Card>
+      <Card isBlurred shadow="sm" className="h-48">
+        <CardBody className="flex flex-col space-y-2">
+          <span className="flex items-center">
+          <span className="pr-6">如果您觉得项目不错</span>
+          <span className="h-px flex-1 bg-black"></span>
+        </span>
+          <Link href="https://github.com/besscroft/PicImpact" target="_blank">
+            <Button startContent={<Star size={20} />} variant="bordered">Star</Button>
+          </Link>
+          <span className="flex items-center">
+          <span className="pr-6">如果您有 Bug 反馈和建议</span>
+          <span className="h-px flex-1 bg-black"></span>
+        </span>
+          <Link href="https://github.com/besscroft/kamera/issues/new" target="_blank">
+            <Button startContent={<MessageSquareHeart size={20} />} variant="bordered">反馈 | 建议</Button>
+          </Link>
         </CardBody>
       </Card>
     </div>

diff --git a/app/admin/settings/about/page.tsx b/app/admin/settings/about/page.tsx
@@ -1,6 +1,56 @@
+'use client'
 
-export default async function About() {
+import favicon from '~/public/favicon.svg'
+import Image from 'next/image'
+import { Divider, Avatar } from '@nextui-org/react'
+import { BookOpenCheck, ExternalLink, Github } from 'lucide-react'
+import Link from 'next/link'
+
+export default function About() {
   return (
-    <p>关于</p>
+    <div className="flex flex-col space-y-2 h-full flex-1 w-full mx-auto items-center p-2">
+      <Image
+        className="my-4"
+        src={favicon}
+        alt="Logo"
+        width={64}
+        height={64}
+      />
+      <span>令人惊叹的在线 ⌈相片集⌋</span>
+      <Divider className="my-4" />
+      <div className="flex flex-col w-full">
+        <Link
+          className="flex items-center w-full p-2 hover:bg-slate-100"
+          href="https://picimpact.heming.dev/"
+          target="_blank"
+        >
+          <BookOpenCheck />
+          <span className="flex-1 px-2">文档</span>
+          <ExternalLink />
+        </Link>
+        <Link
+          className="flex items-center w-full p-2 hover:bg-slate-100"
+          href="https://github.com/besscroft/PicImpact"
+          target="_blank"
+        >
+          <Github />
+          <span className="flex-1 px-2">GitHub</span>
+          <ExternalLink />
+        </Link>
+      </div>
+      <Divider className="my-4" />
+      <div className="flex flex-col w-full">
+        <span>开发者</span>
+        <Link
+          className="flex items-center w-full p-2 hover:bg-slate-100"
+          href="https://github.com/besscroft"
+          target="_blank"
+        >
+          <Avatar src="https://besscroft.com/uploads/avatar.jpg" />
+          <span className="flex-1 px-2">Bess Croft</span>
+          <ExternalLink />
+        </Link>
+      </div>
+    </div>
   )
 }
diff --git a/app/admin/settings/layout.tsx b/app/admin/settings/layout.tsx
@@ -3,7 +3,7 @@
 import { usePathname } from 'next/navigation'
 import { cn } from '~/utils'
 import { Listbox, ListboxItem } from '@nextui-org/react'
-import { SlidersHorizontal, Server, Info } from 'lucide-react'
+import { SlidersHorizontal, Server, Info, ArrowLeft } from 'lucide-react'
 import { useRouter } from 'next-nprogress-bar'
 
 export default function AdminLayout({
@@ -18,7 +18,7 @@ export default function AdminLayout({
   const buttonClasses = 'active:scale-95 duration-200 ease-in-out'
   return (
     <div className="h-full flex">
-      <div className={cn('min-w-64 sm:border-r-2 h-full',
+      <div className={cn('min-w-64 sm:border-r-1 h-full',
         pathname === '/admin/settings' ? 'block sm:flex-none flex-1' : 'hidden sm:block'
       )}>
         <Listbox
@@ -60,6 +60,14 @@ export default function AdminLayout({
         </Listbox>
       </div>
       <div className={pathname === '/admin/settings' ? 'hidden sm:block flex-1' : 'block flex-1'}>
+        <div className={cn(
+          'flex items-center p-2 border-b-1',
+          pathname === '/admin/settings' ? 'hidden' : 'block'
+        )}>
+          <div className="flex items-center cursor-pointer" onClick={() => router.back()}>
+            <ArrowLeft /><span>返回</span>
+          </div>
+        </div>
         {children}
       </div>
     </div>

diff --git a/app/admin/settings/preferences/page.tsx b/app/admin/settings/preferences/page.tsx
@@ -1,6 +1,8 @@
+export default function Preferences() {
 
-export default async function Preferences() {
   return (
-    <p>首选项</p>
+    <div className="flex flex-col space-y-2 h-full flex-1">
+      首选项
+    </div>
   )
 }
diff --git a/app/admin/settings/storages/page.tsx b/app/admin/settings/storages/page.tsx
@@ -1,11 +1,10 @@
 'use client'
-import React from 'react'
 
 import { Tabs, Tab } from '@nextui-org/react'
 import AListTabs from '~/components/admin/settings/AListTabs'
 import S3Tabs from '~/components/admin/settings/S3Tabs'
 
-export default async function Storages() {
+export default function Storages() {
   return (
     <div className="flex flex-col space-y-2 h-full flex-1">
       <Tabs aria-label="存储选项卡" radius="md" variant="light">

diff --git a/components/admin/list/ListProps.tsx b/components/admin/list/ListProps.tsx
@@ -67,7 +67,7 @@ export default function ListProps(props : Readonly<HandleListProps>) {
 
   return (
     <div className="flex flex-col space-y-2 h-full flex-1">
-      <Card>
+      <Card shadow="sm">
         <CardHeader className="justify-between">
           <div className="flex gap-5">
             <div className="flex flex-col gap-1 items-start justify-center">
@@ -97,7 +97,7 @@ export default function ListProps(props : Readonly<HandleListProps>) {
               {data.map((image: ImageType) => (
                 <ContextMenu key={image.id}>
                   <ContextMenuTrigger>
-                    <Card className="h-64">
+                    <Card shadow="sm" className="h-64">
                       <CardHeader className="flex gap-3">
                         <Chip variant="shadow">{image.tag}</Chip>
                       </CardHeader>

diff --git a/components/admin/settings/AListTabs.tsx b/components/admin/settings/AListTabs.tsx
@@ -14,7 +14,7 @@ export default function AListTabs() {
 
   return (
     <div className="space-y-2">
-      <Card>
+      <Card shadow="sm">
         <CardHeader className="justify-between">
           <div className="flex gap-5">
             <div className="flex flex-col gap-1 items-start justify-center">

diff --git a/components/admin/settings/S3Tabs.tsx b/components/admin/settings/S3Tabs.tsx
@@ -14,7 +14,7 @@ export default function S3Tabs() {
 
   return (
     <div className="space-y-2">
-      <Card>
+      <Card shadow="sm">
         <CardHeader className="justify-between">
           <div className="flex gap-5">
             <div className="flex flex-col gap-1 items-start justify-center">

diff --git a/components/admin/settings/SettingsTab.tsx b/components/admin/settings/SettingsTab.tsx
@@ -1,12 +1,11 @@
 '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>
+      <Card shadow="sm">
         <CardHeader className="justify-between">
           <div className="flex gap-5">
             <div className="flex flex-col gap-1 items-start justify-center">

diff --git a/components/admin/tag/DefaultTag.tsx b/components/admin/tag/DefaultTag.tsx
@@ -6,7 +6,7 @@ import { ArrowDown10 } from 'lucide-react'
 
 export default function DefaultTag() {
   return (
-    <Card>
+    <Card shadow="sm">
       <CardHeader className="flex gap-3">
         <p>首页</p>
         <Popover placement="top">

diff --git a/components/admin/tag/TagList.tsx b/components/admin/tag/TagList.tsx
@@ -72,7 +72,7 @@ export default function TagList(props : Readonly<HandleProps>) {
               {data.map((tag: TagType) => (
                 <ContextMenu key={tag.id}>
                   <ContextMenuTrigger>
-                    <Card>
+                    <Card shadow="sm">
                       <CardHeader className="flex gap-3">
                         <p>{tag.name}</p>
                         <Popover placement="top">

diff --git a/components/admin/upload/FileUpload.tsx b/components/admin/upload/FileUpload.tsx
@@ -201,7 +201,7 @@ export default function FileUpload() {
 
   return (
     <div className="flex flex-col space-y-2 h-full flex-1">
-      <Card>
+      <Card shadow="sm">
         <CardHeader className="justify-between">
           <div className="flex gap-5">
             <div className="flex flex-col gap-1 items-start justify-center">
@@ -219,7 +219,7 @@ export default function FileUpload() {
           </Button>
         </CardHeader>
       </Card>
-      <Card className="flex-1">
+      <Card shadow="sm" className="flex-1">
         <CardHeader className="flex flex-col space-y-1 pb-1">
           <div className="flex w-full justify-between space-x-1">
             <Select

diff --git a/components/layout/DashHeader.tsx b/components/layout/DashHeader.tsx
@@ -1,10 +1,15 @@
-import { Navbar, NavbarBrand, NavbarContent, NavbarItem, Link } from '@nextui-org/react'
+'use client'
+
+import { Navbar, NavbarBrand, NavbarContent, NavbarItem } from '@nextui-org/react'
 import Logo from '~/components/layout/Logo'
 import DynamicNavbar from '~/components/layout/DynamicNavbar'
+import { usePathname } from 'next/navigation'
 
 export default function DashHeader() {
+  const pathname = usePathname()
+
   return (
-    <Navbar>
+    <Navbar className={pathname.startsWith('/admin/settings/') ? 'hidden sm:flex' : 'flex'}>
       <NavbarBrand>
         <Logo />
       </NavbarBrand>

diff --git a/components/layout/DropMenu.tsx b/components/layout/DropMenu.tsx
@@ -25,7 +25,7 @@ export const DropMenu = () => {
   if(!mounted) return null
 
   return (
-    <Dropdown>
+    <Dropdown shadow="sm">
       <DropdownTrigger>
         <Avatar
           className="cursor-pointer"

diff --git a/components/layout/DynamicNavbar.tsx b/components/layout/DynamicNavbar.tsx
@@ -1,7 +1,7 @@
 import VaulDrawer from '~/components/layout/VaulDrawer'
 import { DropMenu } from '~/components/layout/DropMenu'
 
-export default async function DynamicNavbar() {
+export default function DynamicNavbar() {
   return (
     <>
       <div className="flex sm:hidden">

diff --git a/components/layout/Logo.tsx b/components/layout/Logo.tsx
@@ -7,7 +7,7 @@ export default function Logo() {
     <Link href="/">
       <Image
         src={favicon}
-        alt="Picture of the author"
+        alt="Logo"
         width={36}
         height={36}
       />