Merge pull request #155 from besscroft/feature-icon

feat: 添加修改 favicon 和名称功能。
besscroft · Nov 14, 2024 · 9f994ee · 9f994ee
2 parents 63cda51 + f36025b
commit 9f994ee
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 32 deletions.
diff --git a/app/admin/settings/preferences/page.tsx b/app/admin/settings/preferences/page.tsx
@@ -4,27 +4,29 @@ import React, { useEffect, useState } from 'react'
 import useSWR from 'swr'
 import { fetcher } from '~/lib/utils/fetcher'
 import { toast } from 'sonner'
-import { Input } from '~/components/ui/input'
 import { ReloadIcon } from '@radix-ui/react-icons'
 import { Button } from '~/components/ui/button'
-import { Label } from '~/components/ui/label'
 
 export default function Preferences() {
   const [title, setTitle] = useState('')
+  const [customFaviconUrl, setCustomFaviconUrl] = useState('')
+  const [customAuthor, setCustomAuthor] = useState('')
   const [loading, setLoading] = useState(false)
 
-  const { data, isValidating, isLoading } = useSWR('/api/v1/settings/get-custom-title', fetcher)
+  const { data, isValidating, isLoading } = useSWR('/api/v1/settings/get-custom-info', fetcher)
 
   async function updateTitle() {
     try {
       setLoading(true)
-      await fetch('/api/v1/settings/update-custom-title', {
+      await fetch('/api/v1/settings/update-custom-info', {
         method: 'PUT',
         headers: {
           'Content-Type': 'application/json',
         },
         body: JSON.stringify({
           title: title,
+          customFaviconUrl: customFaviconUrl,
+          customAuthor: customAuthor,
         }),
       }).then(res => res.json())
       toast.success('修改成功！')
@@ -36,7 +38,9 @@ export default function Preferences() {
   }
 
   useEffect(() => {
-    setTitle(data?.config_value || '')
+    setTitle(data?.find((item: any) => item.config_key === 'custom_title')?.config_value || '')
+    setCustomFaviconUrl(data?.find((item: any) => item.config_key === 'custom_favicon_url')?.config_value || '')
+    setCustomAuthor(data?.find((item: any) => item.config_key === 'custom_author')?.config_value || '')
   }, [data])
 
   return (
@@ -57,6 +61,38 @@ export default function Preferences() {
           className="mt-1 w-full border-none p-0 focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm"
         />
       </label>
+      <label
+        htmlFor="customFaviconUrl"
+        className="w-full sm:w-64 block overflow-hidden rounded-md border border-gray-200 px-3 py-2 shadow-sm focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600"
+      >
+        <span className="text-xs font-medium text-gray-700"> favicon </span>
+
+        <input
+          type="text"
+          id="customFaviconUrl"
+          disabled={isValidating || isLoading}
+          value={customFaviconUrl || ''}
+          placeholder="请输入 favicon 地址"
+          onChange={(e) => setCustomFaviconUrl(e.target.value)}
+          className="mt-1 w-full border-none p-0 focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm"
+        />
+      </label>
+      <label
+        htmlFor="customAuthor"
+        className="w-full sm:w-64 block overflow-hidden rounded-md border border-gray-200 px-3 py-2 shadow-sm focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600"
+      >
+        <span className="text-xs font-medium text-gray-700"> 网站归属者名称 </span>
+
+        <input
+          type="text"
+          id="customAuthor"
+          disabled={isValidating || isLoading}
+          value={customAuthor || ''}
+          placeholder="请输入网站归属者名称。"
+          onChange={(e) => setCustomAuthor(e.target.value)}
+          className="mt-1 w-full border-none p-0 focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm"
+        />
+      </label>
       <div className="flex w-full sm:w-64 items-center justify-center space-x-1">
         <Button
           variant="outline"

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -7,7 +7,7 @@ import { ProgressBarProviders } from '~/app/providers/progress-bar-providers'
 import { ButtonStoreProvider } from '~/app/providers/button-store-Providers'
 
 import '~/style/globals.css'
-import { fetchCustomTitle } from '~/server/db/query'
+import { fetchCustomInfo } from '~/server/db/query'
 
 type Props = {
   params: { id: string }
@@ -19,11 +19,11 @@ export async function generateMetadata(
   parent: ResolvingMetadata
 ): Promise<Metadata> {
 
-  const data = await fetchCustomTitle()
+  const data = await fetchCustomInfo()
 
   return {
-    title: data?.config_value || 'PicImpact',
-    icons: { icon: './favicon.ico' },
+    title: data?.find((item: any) => item.config_key === 'custom_title')?.config_value || 'PicImpact',
+    icons: { icon: data?.find((item: any) => item.config_key === 'custom_favicon_url')?.config_value || './favicon.ico' },
   }
 }
 

diff --git a/components/layout/Logo.tsx b/components/layout/Logo.tsx
@@ -1,16 +1,19 @@
 import Image from 'next/image'
 import favicon from '~/public/favicon.svg'
 import Link from 'next/link'
+import { fetchCustomInfo } from '~/server/db/query'
+
+export default async function Logo() {
+  const data = await fetchCustomInfo()
 
-export default function Logo() {
   return (
     <Link href="/" className="select-none">
       <Image
-        src={favicon}
+        src={data?.find((item: any) => item.config_key === 'custom_favicon_url')?.config_value || favicon}
         alt="Logo"
         width={36}
         height={36}
       />
     </Link>
- );
+  );
 }
diff --git a/hono/settings.ts b/hono/settings.ts
@@ -1,15 +1,15 @@
 import 'server-only'
-import { fetchCustomTitle, fetchR2Info, fetchS3Info, fetchSecretKey, fetchUserById } from '~/server/db/query'
+import { fetchCustomInfo, fetchR2Info, fetchS3Info, fetchSecretKey, fetchUserById } from '~/server/db/query'
 import { Config } from '~/types'
-import { updateAListConfig, updateCustomTitle, updatePassword, updateR2Config, updateS3Config } from '~/server/db/operate'
+import { updateAListConfig, updateCustomInfo, updatePassword, updateR2Config, updateS3Config } from '~/server/db/operate'
 import { auth } from '~/server/auth'
 import CryptoJS from 'crypto-js'
 import { Hono } from 'hono'
 
 const app = new Hono()
 
-app.get('/get-custom-title', async (c) => {
-  const data = await fetchCustomTitle();
+app.get('/get-custom-info', async (c) => {
+  const data = await fetchCustomInfo();
   return c.json(data)
 })
 
@@ -64,10 +64,20 @@ app.put('/update-s3-info', async (c) => {
   return c.json(data)
 })
 
-app.put('/update-custom-title', async (c) => {
+app.put('/update-custom-info', async (c) => {
   const query = await c.req.json()
-  const data = await updateCustomTitle(query.title);
-  return c.json(data)
+  try {
+    await updateCustomInfo(query.title, query.customFaviconUrl, query.customAuthor);
+    return c.json({
+      code: 200,
+      message: '更新成功！'
+    })
+  } catch (e) {
+    return Response.json({
+      code: 500,
+      message: '更新失败！'
+    })
+  }
 })
 
 app.put('/update-password', async (c) => {

diff --git a/instrumentation.ts b/instrumentation.ts
@@ -39,6 +39,8 @@ export async function register() {
             { config_key: 'auth_enable', config_value: 'false', detail: '是否启用双因素验证' },
             { config_key: 'auth_temp_secret', config_value: '', detail: '双因素验证临时种子密钥' },
             { config_key: 'auth_secret', config_value: '', detail: '双因素验证种子密钥' },
+            { config_key: 'custom_favicon_url', config_value: '', detail: '用户自定义的 favicon 地址' },
+            { config_key: 'custom_author', config_value: '', detail: '网站归属者名称' },
           ],
           skipDuplicates: true,
         })

diff --git a/server/db/operate.ts b/server/db/operate.ts
@@ -378,17 +378,36 @@ export async function updateCopyrightShow(id: string, show: number) {
   return resultRow
 }
 
-export async function updateCustomTitle(title: string) {
-  const resultRow = await db.configs.update({
-    where: {
-      config_key: 'custom_title'
-    },
-    data: {
-      config_value: title,
-      updatedAt: new Date()
-    }
+export async function updateCustomInfo(title: string, customFaviconUrl: string, customAuthor: string) {
+  await db.$transaction(async (tx) => {
+    await tx.configs.update({
+      where: {
+        config_key: 'custom_title'
+      },
+      data: {
+        config_value: title,
+        updatedAt: new Date()
+      }
+    })
+    await tx.configs.update({
+      where: {
+        config_key: 'custom_favicon_url'
+      },
+      data: {
+        config_value: customFaviconUrl,
+        updatedAt: new Date()
+      }
+    })
+    await tx.configs.update({
+      where: {
+        config_key: 'custom_author'
+      },
+      data: {
+        config_value: customAuthor,
+        updatedAt: new Date()
+      }
+    })
   })
-  return resultRow
 }
 
 export async function saveAuthTemplateSecret(token: string) {

diff --git a/server/db/query.ts b/server/db/query.ts
@@ -500,10 +500,12 @@ export async function fetchSecretKey() {
   return find
 }
 
-export async function fetchCustomTitle() {
-  const find = await db.configs.findFirst({
+export async function fetchCustomInfo() {
+  const find = await db.configs.findMany({
     where: {
-      config_key: 'custom_title'
+      config_key: {
+        in: ['custom_title', 'custom_favicon_url', 'custom_author']
+      }
     },
     select: {
       id: true,