chore docs codes

2025-05-31 11:50:09 +08:00
parent bb1fcd8c37
commit 4e74053017
10 changed files with 78 additions and 67 deletions
@@ -1,6 +1,6 @@
 <div align="center">
  <h1>WR.DO</h1>
-  <p><a href="https://discord.gg/AHPQYuZu3m">Discord</a> · English | <a href="/README-zh.md">简体中文</a></p>
+  <p><a href="https://wr.do/docs/developer">开发文档</a> · <a href="https://discord.gg/AHPQYuZu3m">Discord</a> · English | <a href="/README-zh.md">简体中文</a></p>
  <p>生成短链接, 创建 DNS 记录, 管理临时邮箱</p>
  <!-- <img src="https://wr.do/_static/images/light-preview.png"/> -->
 </div>
@@ -1,6 +1,6 @@
 <div align="center">
  <h1>WR.DO</h1>
-  <p><a href="https://discord.gg/AHPQYuZu3m">Discord</a> · English | <a href="/README-zh.md">简体中文</a></p>
+  <p><a href="https://wr.do/docs/developer">Docs</a> · <a href="https://discord.gg/AHPQYuZu3m">Discord</a> · English | <a href="/README-zh.md">简体中文</a></p>
  <p>Make Short Links, Manage DNS Records, Receive Emails.</p>
 </div>

@@ -23,7 +23,6 @@ import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
-  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
@@ -470,23 +469,24 @@ export default function UserUrlsList({ user, action }: UrlListProps) {
          data.list.map((short) => (
            <div
              className={cn(
-                "h-24 rounded-lg border bg-neutral-50/50 p-1 dark:bg-neutral-800",
+                "h-24 rounded-lg border p-1 shadow-inner dark:bg-neutral-800",
              )}
              key={short.id}
            >
-              <div className="flex h-full flex-col rounded-lg border border-dotted bg-white px-3 py-1.5 shadow backdrop-blur-lg dark:bg-black">
+              <div className="flex h-full flex-col rounded-lg border border-dotted bg-white px-3 py-1.5 backdrop-blur-lg dark:bg-black">
                <div className="flex items-center justify-between gap-1">
                  <BlurImage
                    src={`https://unavatar.io/${extractHostname(short.target)}?fallback=https://wr.do/logo.png`}
                    alt="logo"
                    width={30}
                    height={30}
+                    className="rounded-md"
                  />
                  <div className="ml-2 mr-auto flex flex-col justify-between truncate">
                    {/* url */}
                    <div className="flex items-center">
                      <Link
-                        className="overflow-hidden text-ellipsis whitespace-normal text-sm font-semibold text-slate-600 hover:text-blue-400 hover:underline dark:text-slate-400"
+                        className="overflow-hidden text-ellipsis whitespace-normal text-sm font-semibold text-slate-600 hover:text-blue-400 hover:underline dark:text-slate-300"
                        href={`https://${short.prefix}/s/${short.url}${short.password ? `?password=${short.password}` : ""}`}
                        target="_blank"
                        prefetch={false}
@@ -501,6 +501,17 @@ export default function UserUrlsList({ user, action }: UrlListProps) {
                          "duration-250 transition-all group-hover:opacity-100",
                        )}
                      />
+                      <Button
+                        className="duration-250 size-[26px] p-1.5 text-foreground transition-all hover:border hover:text-foreground dark:text-foreground"
+                        size="sm"
+                        variant="ghost"
+                        onClick={() => {
+                          setSelectedUrl(short);
+                          setShowQrcode(!isShowQrcode);
+                        }}
+                      >
+                        <Icons.qrcode className="size-4" />
+                      </Button>
                      {short.password && (
                        <Icons.lock className="size-3 text-neutral-600 dark:text-neutral-400" />
                      )}
@@ -532,38 +543,6 @@ export default function UserUrlsList({ user, action }: UrlListProps) {
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent>
-                      <DropdownMenuItem asChild>
-                        <Button
-                          className="flex w-full items-center gap-2"
-                          size="sm"
-                          variant="ghost"
-                          onClick={() => {
-                            setCurrentEditUrl(short);
-                            setShowForm(false);
-                            setFormType("edit");
-                            setShowForm(!isShowForm);
-                          }}
-                        >
-                          <PenLine className="size-4" />
-                          Edit URL
-                        </Button>
-                      </DropdownMenuItem>
-                      <DropdownMenuSeparator />
-                      <DropdownMenuItem asChild>
-                        <Button
-                          className="flex w-full items-center gap-2"
-                          size="sm"
-                          variant="ghost"
-                          onClick={() => {
-                            setSelectedUrl(short);
-                            setShowQrcode(!isShowQrcode);
-                          }}
-                        >
-                          <Icons.qrcode className="size-4" />
-                          QR Code
-                        </Button>
-                      </DropdownMenuItem>
-                      <DropdownMenuSeparator />
                      <DropdownMenuItem asChild>
                        <Button
                          className="flex w-full items-center gap-2"
@@ -582,19 +561,54 @@ export default function UserUrlsList({ user, action }: UrlListProps) {
                          Analytics
                        </Button>
                      </DropdownMenuItem>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem asChild>
+                        <Button
+                          className="flex w-full items-center gap-2"
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => {
+                            setCurrentEditUrl(short);
+                            setShowForm(false);
+                            setFormType("edit");
+                            setShowForm(!isShowForm);
+                          }}
+                        >
+                          <PenLine className="size-4" />
+                          Edit URL
+                        </Button>
+                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </div>

                <div className="mt-auto flex items-center justify-end gap-1.5 text-xs text-muted-foreground">
-                  <span>
-                    Expiration:
-                    {expirationTime(short.expiration, short.updatedAt)}
-                  </span>
+                  <TooltipProvider>
+                    <Tooltip delayDuration={200}>
+                      <TooltipTrigger className="truncate">
+                        {short.userName ?? "Anonymous"}
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        {short.userName ?? "Anonymous"}
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
                  <Separator
                    className="h-4/5"
                    orientation="vertical"
                  ></Separator>
+                  {short.expiration !== "-1" && (
+                    <>
+                      <span>
+                        Expiration:{" "}
+                        {expirationTime(short.expiration, short.updatedAt)}
+                      </span>
+                      <Separator
+                        className="h-4/5"
+                        orientation="vertical"
+                      ></Separator>
+                    </>
+                  )}
                  {timeAgo(short.updatedAt as Date)}
                  <Switch
                    className="scale-[0.6]"
@@ -9,6 +9,7 @@ import { Callout } from "@/components/shared/callout";
 import { CopyButton } from "@/components/shared/copy-button";

 import { DocsLang } from "../shared/docs-lang";
+import { Separator } from "../ui/separator";

 const components = {
  h1: ({ className, ...props }) => (
@@ -3,10 +3,12 @@
 import Link from "next/link";
 import { usePathname } from "next/navigation";

+import { Separator } from "../ui/separator";
+
 export function DocsLang({ en, zh }: { en: string; zh: string }) {
  const pathname = usePathname();
  return (
-    <div className="flex items-center gap-2">
+    <div className="flex items-center gap-1.5">
      {pathname !== en ? (
        <Link href={en} className="text-blue-500 hover:underline">
          English
@@ -14,13 +16,13 @@ export function DocsLang({ en, zh }: { en: string; zh: string }) {
      ) : (
        <p className="text-muted-foreground">English</p>
      )}
-      <span className="text-muted-foreground">|</span>
+      <div className="h-[20px] w-px shrink-0 border bg-border text-neutral-400"></div>
      {pathname !== zh ? (
        <Link href={zh} className="text-blue-500 hover:underline">
-          中文
+          简体中文
        </Link>
      ) : (
-        <p className="text-muted-foreground">中文</p>
+        <p className="text-muted-foreground">简体中文</p>
      )}
    </div>
  );
@@ -426,7 +426,7 @@ export default function QRCodeEditor({

      {/* Api Key Mask */}
      {!user.apiKey && (
-        <div className="absolute left-0 top-0 flex size-full flex-col items-center justify-center gap-2 bg-neutral-100/20 px-4 backdrop-blur">
+        <div className="absolute left-0 top-0 z-20 flex size-full flex-col items-center justify-center gap-2 bg-neutral-100/20 px-4 backdrop-blur">
          <p className="text-center text-sm">
            Please create a <strong>api key</strong> before use this feature.{" "}
            <br /> Learn more about{" "}
@@ -2,6 +2,7 @@ import { User } from "@prisma/client";
 import { AvatarProps } from "@radix-ui/react-avatar";

 import { generateGradientClasses } from "@/lib/enums";
+import { cn } from "@/lib/utils";
 import { Avatar, AvatarImage } from "@/components/ui/avatar";

 interface UserAvatarProps extends AvatarProps {
@@ -11,23 +12,14 @@ interface UserAvatarProps extends AvatarProps {
 export function UserAvatar({ user, ...props }: UserAvatarProps) {
  return (
    <Avatar {...props}>
-      {user.image ? (
-        <AvatarImage
-          alt="Picture"
-          src={user.image}
-          referrerPolicy="no-referrer"
-        />
-      ) : (
-        <RandomAvatar text={user.name || user.email || ""} />
-      )}
+      <AvatarImage
+        alt="Picture"
+        src={
+          user.image ??
+          `https://unavatar.io/${user.email}?ttl=1h&fallback=https://wr.do/_static/avatar.png`
+        }
+        referrerPolicy="no-referrer"
+      />
    </Avatar>
  );
 }
-
-export function RandomAvatar({ text }: { text?: string }) {
-  return (
-    <div
-      className={`flex size-full shrink-0 items-center justify-center rounded-full text-white ${generateGradientClasses(text || "wr.do")}`}
-    ></div>
-  );
-}
@@ -7,9 +7,11 @@ description: 选择你的部署方式

 ## 使用 Vercel 部署（推荐）

-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/oiov/wr.do.git&project-name=wrdo&env=DATABASE_URL&env=AUTH_SECRET&env=RESEND_API_KEY&env=NEXT_PUBLIC_EMAIL_R2_DOMAIN&env=NEXT_PUBLIC_OPEN_SIGNUP&env=GITHUB_TOKEN)
+<Callout type="warning" twClass="mt-4">
+  请在部署前先创建你的数据库实例。 
+</Callout>

-记得填写必要的环境变量。
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/oiov/wr.do.git&project-name=wrdo&env=DATABASE_URL&env=AUTH_SECRET&env=RESEND_API_KEY&env=NEXT_PUBLIC_EMAIL_R2_DOMAIN&env=NEXT_PUBLIC_OPEN_SIGNUP&env=GITHUB_TOKEN)

 ## 使用 Docker Compose 部署