Merge pull request #20 from besscroft/dev

v0.6.4
besscroft · May 9, 2024 · 1c7fcf0 · 1c7fcf0
2 parents cf9425d + d2b02ee
commit 1c7fcf0
Show file tree

Hide file tree

Showing 38 changed files with 124 additions and 358 deletions.
diff --git a/README.md b/README.md
@@ -8,9 +8,9 @@ PicImpact
   <img src="https://img.shields.io/github/repo-size/besscroft/PicImpact?style=flat-square&color=328657" alt="存储库大小">
 </p>
 
-### 无障碍支持
-
-已经在尽力支持了，主要基于 [WAI-ARIA 规范](https://developer.mozilla.org/zh-CN/docs/Learn/Accessibility/WAI-ARIA_basics)，有爱，无障碍！
+<p align="center">
+    <img src=picimpact.png width=384 />
+</p>
 
 ### 如何部署
 
@@ -126,6 +126,10 @@ PicImpact 欢迎各种贡献，包括但不限于改进，新功能，文档和
 
 > 事实上不是过于老旧的浏览器，一般都是能用的。
 
+### 无障碍支持
+
+已经在尽力支持了，主要基于 [WAI-ARIA 规范](https://developer.mozilla.org/zh-CN/docs/Learn/Accessibility/WAI-ARIA_basics)，有爱，无障碍！
+
 ### 技术栈
 
 - Web框架：

diff --git a/app/admin/page.tsx b/app/admin/page.tsx
@@ -12,6 +12,7 @@ export default async function Admin() {
     result: any[]
   }> => {
     'use server'
+    // @ts-ignore
     return await fetchImagesAnalysis()
   }
 

diff --git a/app/admin/settings/about/page.tsx b/app/admin/settings/about/page.tsx
@@ -3,7 +3,7 @@
 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 { ExternalLink, Github } from 'lucide-react'
 import Link from 'next/link'
 
 export default function About() {

diff --git a/app/admin/settings/backup/page.tsx b/app/admin/settings/backup/page.tsx
@@ -109,12 +109,14 @@ export default function Backup() {
           icon={<CloudDownloadOutlined />}
           loading={backupLoading}
           onClick={() => backup()}
+          aria-label="备份"
         >备份</Button>
         <Upload {...picimpactProps}>
           <Button
             className="!w-full sm:!w-64  !block"
             icon={<CloudUploadOutlined />}
             loading={restorePicImpactLoading}
+            aria-label="选择备份文件（本机迁移）"
           >选择备份文件（本机迁移）</Button>
         </Upload>
         <p>如果您在线上环境，请确保您的数据库单次会话时长以及事务的支持，否则会还原数据失败！</p>

diff --git a/app/admin/settings/layout.tsx b/app/admin/settings/layout.tsx
@@ -20,6 +20,7 @@ export default function AdminLayout({
             color="primary"
             variant={pathname === '/admin/settings/preferences' ? 'bordered': 'light'}
             onClick={() => router.push('/admin/settings/preferences')}
+            aria-label="首选项"
           >
             首选项
           </Button>
@@ -28,6 +29,7 @@ export default function AdminLayout({
             color="primary"
             variant={pathname === '/admin/settings/password' ? 'bordered': 'light'}
             onClick={() => router.push('/admin/settings/password')}
+            aria-label="密码修改"
           >
             密码修改
           </Button>
@@ -36,6 +38,7 @@ export default function AdminLayout({
             color="primary"
             variant={pathname === '/admin/settings/storages' ? 'bordered': 'light'}
             onClick={() => router.push('/admin/settings/storages')}
+            aria-label="存储"
           >
             存储
           </Button>
@@ -44,6 +47,7 @@ export default function AdminLayout({
             color="primary"
             variant={pathname === '/admin/settings/backup' ? 'bordered': 'light'}
             onClick={() => router.push('/admin/settings/backup')}
+            aria-label="备份"
           >
             备份
           </Button>
@@ -52,6 +56,7 @@ export default function AdminLayout({
             color="primary"
             variant={pathname === '/admin/settings/about' ? 'bordered': 'light'}
             onClick={() => router.push('/admin/settings/about')}
+            aria-label="关于"
           >
             关于
           </Button>

diff --git a/app/admin/settings/password/page.tsx b/app/admin/settings/password/page.tsx
@@ -121,6 +121,7 @@ export default function PassWord() {
               setTwoPassword('')
               setThreePassword('')
             }}
+            aria-label="重置"
           >
             重置
           </Button>
@@ -129,6 +130,7 @@ export default function PassWord() {
             variant="bordered"
             isLoading={loading}
             onClick={() => updatePassword()}
+            aria-label="提交"
           >
             提交
           </Button>

diff --git a/app/admin/settings/preferences/page.tsx b/app/admin/settings/preferences/page.tsx
@@ -10,7 +10,7 @@ export default function Preferences() {
   const [title, setTitle] = useState('')
   const [loading, setLoading] = useState(false)
 
-  const { data } = useSWR('/api/get-custom-title', fetcher)
+  const { data } = useSWR('/api/v1/get-custom-title', fetcher)
 
   async function updateTitle() {
     try {
@@ -54,6 +54,7 @@ export default function Preferences() {
             variant="bordered"
             isLoading={loading}
             onClick={() => updateTitle()}
+            aria-label="提交"
           >
             提交
           </Button>

diff --git a/app/api/get-link/route.ts b/app/api/get-link/route.ts
diff --git a/app/api/get-custom-title/route.ts → app/api/v1/get-custom-title/route.ts b/app/api/get-custom-title/route.ts → app/api/v1/get-custom-title/route.ts
diff --git a/components/Masonry.tsx b/components/Masonry.tsx
@@ -74,6 +74,7 @@ export default function Masonry(props : Readonly<ImageHandleProps>) {
               onClick={() => {
                 setSize(size + 1)
               }}
+              aria-label="加载更多"
             >
               加载更多
             </Button>

diff --git a/components/MasonryItem.tsx b/components/MasonryItem.tsx
@@ -6,13 +6,16 @@ import {
 } from '~/components/ui/Dialog'
 import { useButtonStore } from '~/app/providers/button-store-Providers'
 import { ImageType } from '~/types'
-import { Image, Tabs, Tab, Card, CardHeader, Table, TableHeader, TableColumn, TableBody, TableRow, TableCell } from '@nextui-org/react'
-import { Aperture, Camera } from 'lucide-react'
+import { Image, Tabs, Tab, Card, CardHeader, Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Button } from '@nextui-org/react'
+import { Aperture, Camera, Image as ImageIcon, Languages, CalendarDays, X, SunMedium, MoonStar } from 'lucide-react'
+import * as React from 'react'
+import { useTheme } from 'next-themes'
 
 export default function MasonryItem() {
   const { MasonryView, MasonryViewData, setMasonryView, setMasonryViewData } = useButtonStore(
     (state) => state,
   )
+  const { theme, setTheme } = useTheme()
 
   return (
     <Dialog
@@ -26,8 +29,36 @@ export default function MasonryItem() {
       }}
     >
       <DialogContent className="flex flex-col">
-        <div>
-          <p>{MasonryViewData.detail}</p>
+        <div className="flex items-center">
+          <div className="flex-1">
+            <p>{MasonryViewData.detail}</p>
+          </div>
+          <div className="flex items-center space-x-4">
+            <Button
+              isIconOnly
+              variant="shadow"
+              size="sm"
+              aria-label="切换主题"
+              className="bg-white dark:bg-gray-800"
+              onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
+            >
+              {theme === 'light' ? <SunMedium size={20} /> : <MoonStar size={20} />}
+            </Button>
+            <Button
+              isIconOnly
+              variant="shadow"
+              size="sm"
+              aria-label="关闭"
+              className="bg-white dark:bg-gray-800"
+              onClick={() => {
+                setMasonryView(false)
+                setMasonryViewData({} as ImageType)
+              }}
+            >
+              <X size={20}/>
+              <span className="sr-only">Close</span>
+            </Button>
+          </div>
         </div>
         <div className="h-full flex flex-col space-y-2 md:grid md:gap-2 md:grid-cols-3 xl:gap-4">
           <div className="md:col-span-2 md:flex md:justify-center md:max-h-[90vh]">
@@ -44,32 +75,47 @@ export default function MasonryItem() {
               <Tab
                 key="detail"
                 title={
-                  <div className="flex items-center space-x-2">
-                    <Aperture/>
+                  <div className="flex items-center space-x-2 select-none">
+                    <ImageIcon />
                     <span>详情</span>
                   </div>
                 }
               >
                 <div className="flex flex-col space-y-2">
                   <Card className="py-4" shadow="sm">
                     <CardHeader className="pb-0 pt-2 px-4 flex-col items-start">
-                      <p className="text-tiny uppercase font-bold">相机</p>
+                      <div className="flex items-center space-x-1">
+                        <Camera size={20}/>
+                        <p className="text-tiny uppercase font-bold select-none">相机</p>
+                      </div>
                       <h4 className="font-bold text-large">{MasonryViewData?.exif?.model || 'N&A'}</h4>
                     </CardHeader>
                   </Card>
                   <Card className="py-4" shadow="sm">
                     <CardHeader className="pb-0 pt-2 px-4 flex-col items-start">
-                      <p className="text-tiny uppercase font-bold">相片描述</p>
+                      <div className="flex items-center space-x-1">
+                        <Languages size={20}/>
+                        <p className="text-tiny uppercase font-bold select-none">相片描述</p>
+                      </div>
                       <h4 className="font-bold text-large">{MasonryViewData.detail || 'N&A'}</h4>
                     </CardHeader>
                   </Card>
+                  <Card className="py-4" shadow="sm">
+                    <CardHeader className="pb-0 pt-2 px-4 flex-col items-start">
+                      <div className="flex items-center space-x-1">
+                        <CalendarDays size={20}/>
+                        <p className="text-tiny uppercase font-bold select-none">拍摄时间</p>
+                      </div>
+                      <h4 className="font-bold text-large">{MasonryViewData?.exif?.data_time || 'N&A'}</h4>
+                    </CardHeader>
+                  </Card>
                 </div>
               </Tab>
               <Tab
                 key="exif"
                 title={
-                  <div className="flex items-center space-x-2">
-                    <Camera />
+                  <div className="flex items-center space-x-2 select-none">
+                    <Aperture />
                     <span>Exif</span>
                   </div>
                 }

diff --git a/components/RefreshButton.tsx b/components/RefreshButton.tsx
@@ -15,6 +15,7 @@ export default function RefreshButton(props: Readonly<HandleProps>) {
       size="sm"
       variant="shadow"
       isLoading={isLoading}
+      aria-label="刷新"
       onClick={async () => {
         await mutate()
       }}

diff --git a/components/admin/list/ImageEditSheet.tsx b/components/admin/list/ImageEditSheet.tsx
@@ -161,6 +161,7 @@ export default function ImageEditSheet(props : Readonly<ImageServerHandleProps &
               color="primary"
               variant="shadow"
               onClick={() => submit()}
+              aria-label="更新"
             >
               更新
             </Button>

diff --git a/components/admin/list/ListProps.tsx b/components/admin/list/ListProps.tsx
@@ -142,6 +142,7 @@ export default function ListProps(props : Readonly<ImageServerHandleProps>) {
                 await totalMutate()
                 await mutate()
               }}
+              aria-label="刷新"
             >
               刷新
             </Button>
@@ -167,7 +168,7 @@ export default function ListProps(props : Readonly<ImageServerHandleProps>) {
                     <Badge content={image.tag_values.split(",").length} color="primary">
                       <Popover placement="top" shadow="sm">
                         <PopoverTrigger className="cursor-pointer">
-                          <Chip variant="shadow" className="flex-1">{image.tag_names.length > 8 ? image.tag_names.substring(0, 8) + '...' : image.tag_names}</Chip>
+                          <Chip variant="shadow" className="flex-1" aria-label="标签">{image.tag_names.length > 8 ? image.tag_names.substring(0, 8) + '...' : image.tag_names}</Chip>
                         </PopoverTrigger>
                         <PopoverContent>
                           <div className="px-1 py-2 select-none">
@@ -180,7 +181,7 @@ export default function ListProps(props : Readonly<ImageServerHandleProps>) {
                     :
                     <Popover placement="top" shadow="sm">
                       <PopoverTrigger className="cursor-pointer">
-                        <Chip variant="shadow" className="flex-1">{image.tag_names}</Chip>
+                        <Chip variant="shadow" className="flex-1" aria-label="标签">{image.tag_names}</Chip>
                       </PopoverTrigger>
                       <PopoverContent>
                         <div className="px-1 py-2 select-none">
@@ -198,6 +199,7 @@ export default function ListProps(props : Readonly<ImageServerHandleProps>) {
                       setImageViewData(image)
                       setImageView(true)
                     }}
+                    aria-label="查看图片"
                   >
                     <ScanSearch size={20} />
                   </Button>
@@ -237,6 +239,7 @@ export default function ListProps(props : Readonly<ImageServerHandleProps>) {
                         color="primary"
                         variant="shadow"
                         startContent={<ArrowDown10 size={20} />}
+                        aria-label="排序"
                       >{image.sort}</Chip>
                     </PopoverTrigger>
                     <PopoverContent>
@@ -255,6 +258,7 @@ export default function ListProps(props : Readonly<ImageServerHandleProps>) {
                       setImageEditData(image)
                       setImageEdit(true)
                     }}
+                    aria-label="编辑图片"
                   >
                     <Pencil size={20} />
                   </Button>
@@ -265,6 +269,7 @@ export default function ListProps(props : Readonly<ImageServerHandleProps>) {
                       setImage(image)
                       setIsOpen(true)
                     }}
+                    aria-label="删除图片"
                   >
                     <Trash size={20} />
                   </Button>
@@ -304,13 +309,15 @@ export default function ListProps(props : Readonly<ImageServerHandleProps>) {
                 setImage({} as ImageType)
                 setIsOpen(false)
               }}
+              aria-label="不删除"
             >
               算了
             </Button>
             <Button
               color="primary"
               isLoading={deleteLoading}
               onClick={() => deleteImage()}
+              aria-label="确认删除"
             >
               是的
             </Button>

diff --git a/components/admin/settings/storages/AListEditSheet.tsx b/components/admin/settings/storages/AListEditSheet.tsx
@@ -79,6 +79,7 @@ export default function AListEditSheet() {
               color="primary"
               variant="shadow"
               onClick={() => submit()}
+              aria-label="更新"
             >
               更新
             </Button>

diff --git a/components/admin/settings/storages/AListTabs.tsx b/components/admin/settings/storages/AListTabs.tsx
@@ -34,6 +34,7 @@ export default function AListTabs() {
               radius="full"
               isLoading={isValidating}
               onClick={() => mutate()}
+              aria-label="刷新"
             >
               刷新
             </Button>
@@ -46,6 +47,7 @@ export default function AListTabs() {
                 setAListEdit(true)
                 setAListEditData(JSON.parse(JSON.stringify(data)))
               }}
+              aria-label="编辑"
             >
               编辑
             </Button>

diff --git a/components/admin/settings/storages/R2EditSheet.tsx b/components/admin/settings/storages/R2EditSheet.tsx
@@ -79,6 +79,7 @@ export default function S3EditSheet() {
               color="primary"
               variant="shadow"
               onClick={() => submit()}
+              aria-label="更新"
             >
               更新
             </Button>

diff --git a/components/admin/settings/storages/R2Tabs.tsx b/components/admin/settings/storages/R2Tabs.tsx
@@ -34,6 +34,7 @@ export default function R2Tabs() {
               radius="full"
               isLoading={isValidating}
               onClick={() => mutate()}
+              aria-label="刷新"
             >
               刷新
             </Button>
@@ -46,6 +47,7 @@ export default function R2Tabs() {
                 setR2Edit(true)
                 setR2EditData(JSON.parse(JSON.stringify(data)))
               }}
+              aria-label="编辑"
             >
               编辑
             </Button>