wood/Q58Connect
1
0
Fork 0
mirror of https://github.com/woodchen-ink/Q58Connect.git synced 2025-07-19 06:21:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

修复一下移动端效果

Browse Source
This commit is contained in:
wood chen 2025-02-22 15:41:27 +08:00
parent 54b3d8e661
commit 0fe8bfc6aa
2 changed files with 19 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/app/()/page.tsx
View File

@ -148,7 +148,7 @@ export default function HomePage() {
<Section className="border-t bg-gray-50 py-24 dark:bg-gray-800"> <Section className="border-t bg-gray-50 py-24 dark:bg-gray-800">
<Container> <Container>
<div className="mx-auto max-w-4xl"> <div className="mx-auto max-w-4xl">
<Card className="overflow-hidden border-2 p-6"> <Card className="overflow-hidden border-2 p-2 sm:p-6">
<CardHeader className="bg-white dark:bg-gray-900"> <CardHeader className="bg-white dark:bg-gray-900">
<CardTitle className="text-2xl"> <CardTitle className="text-2xl">
接入应用 (授权码模式) 接入应用 (授权码模式)
@ -159,7 +159,7 @@ export default function HomePage() {
适用于有后端服务器的应用。 适用于有后端服务器的应用。
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent className="bg-white p-0 dark:bg-gray-900"> <CardContent className="overflow-x-auto bg-white p-0 dark:bg-gray-900">
<Tabs defaultValue="auth" className="w-full"> <Tabs defaultValue="auth" className="w-full">
<TabsList className="grid w-full grid-cols-3"> <TabsList className="grid w-full grid-cols-3">
<TabsTrigger value="auth"> <TabsTrigger value="auth">
@ -202,7 +202,7 @@ export default function HomePage() {
<Alert className="border-l-4 border-l-primary"> <Alert className="border-l-4 border-l-primary">
<Code2 className="h-4 w-4" /> <Code2 className="h-4 w-4" />
<AlertTitle>请求地址</AlertTitle> <AlertTitle>请求地址</AlertTitle>
<AlertDescription className="font-mono"> <AlertDescription className="whitespace-pre-wrap break-words font-mono text-xs sm:text-sm">
GET https://connect.q58.club/oauth/authorize GET https://connect.q58.club/oauth/authorize
</AlertDescription> </AlertDescription>
</Alert> </Alert>
@ -229,7 +229,7 @@ window.location.href = authUrl;`}
<p className="mb-2"> <p className="mb-2">
用户授权后，将重定向到您的回调地址： 用户授权后，将重定向到您的回调地址：
</p> </p>
<pre className="mt-2 overflow-x-auto rounded bg-gray-100 p-4 dark:bg-gray-800"> <pre className="mt-2 overflow-x-auto whitespace-pre-wrap break-words rounded bg-gray-100 p-2 text-xs dark:bg-gray-800 sm:p-4 sm:text-sm">
<code className="text-sm"> <code className="text-sm">
https://your-app.com/callback?code=ac_xxxxxx... https://your-app.com/callback?code=ac_xxxxxx...
</code> </code>
@ -267,7 +267,7 @@ window.location.href = authUrl;`}
<Alert className="border-l-4 border-l-primary"> <Alert className="border-l-4 border-l-primary">
<Code2 className="h-4 w-4" /> <Code2 className="h-4 w-4" />
<AlertTitle>请求地址</AlertTitle> <AlertTitle>请求地址</AlertTitle>
<AlertDescription className="font-mono"> <AlertDescription className="whitespace-pre-wrap break-words font-mono text-xs sm:text-sm">
POST POST
https://connect.q58.club/api/oauth/access_token https://connect.q58.club/api/oauth/access_token
</AlertDescription> </AlertDescription>
@ -294,7 +294,7 @@ window.location.href = authUrl;`}
<ArrowDownToLine className="h-4 w-4" /> <ArrowDownToLine className="h-4 w-4" />
<AlertTitle>响应数据</AlertTitle> <AlertTitle>响应数据</AlertTitle>
<AlertDescription> <AlertDescription>
<pre className="mt-2 overflow-x-auto rounded bg-gray-100 p-4 dark:bg-gray-800"> <pre className="mt-2 overflow-x-auto whitespace-pre-wrap break-words rounded bg-gray-100 p-2 text-xs dark:bg-gray-800 sm:p-4 sm:text-sm">
<code className="text-sm"> <code className="text-sm">
{`{ {`{
"access_token": "at_xxxxxxxx", // 访问令牌 "access_token": "at_xxxxxxxx", // 访问令牌
@ -328,7 +328,7 @@ window.location.href = authUrl;`}
<Alert className="border-l-4 border-l-primary"> <Alert className="border-l-4 border-l-primary">
<Code2 className="h-4 w-4" /> <Code2 className="h-4 w-4" />
<AlertTitle>请求地址</AlertTitle> <AlertTitle>请求地址</AlertTitle>
<AlertDescription className="font-mono"> <AlertDescription className="whitespace-pre-wrap break-words font-mono text-xs sm:text-sm">
GET https://connect.q58.club/api/oauth/user GET https://connect.q58.club/api/oauth/user
</AlertDescription> </AlertDescription>
</Alert> </Alert>
@ -348,7 +348,7 @@ window.location.href = authUrl;`}
<ArrowDownToLine className="h-4 w-4" /> <ArrowDownToLine className="h-4 w-4" />
<AlertTitle>响应数据</AlertTitle> <AlertTitle>响应数据</AlertTitle>
<AlertDescription> <AlertDescription>
<pre className="mt-2 overflow-x-auto rounded bg-gray-100 p-4 dark:bg-gray-800"> <pre className="mt-2 overflow-x-auto whitespace-pre-wrap break-words rounded bg-gray-100 p-2 text-xs dark:bg-gray-800 sm:p-4 sm:text-sm">
<code className="text-sm"> <code className="text-sm">
{`{ {`{
"id": "user_xxx", // 用户唯一标识 "id": "user_xxx", // 用户唯一标识

14
src/components/ui/code-block.tsx
View File

@ -3,6 +3,8 @@
import { useState } from "react"; import { useState } from "react";
import { Check, Copy } from "lucide-react"; import { Check, Copy } from "lucide-react";
import { cn } from "@/lib/utils";
function CopyButton({ text }: { text: string }) { function CopyButton({ text }: { text: string }) {
const [copied, setCopied] = useState(false); const [copied, setCopied] = useState(false);
@ -26,10 +28,16 @@ function CopyButton({ text }: { text: string }) {
); );
} }
export function CodeBlock({ children }: { children: string }) { export function CodeBlock({
children,
className,
}: {
children: string;
className?: string;
}) {
return ( return (
<div className="relative"> <div className={cn("relative", className)}>
<pre className="overflow-x-auto rounded-lg bg-gray-100 p-4 dark:bg-gray-800"> <pre className="overflow-x-auto rounded-lg bg-gray-100 p-4 dark:bg-gray-800 sm:text-sm">
<code className="text-sm">{children}</code> <code className="text-sm">{children}</code>
</pre> </pre>
<CopyButton text={children} /> <CopyButton text={children} />