fix: 移除 @radix-ui/themes，修改 tag 卡片

besscroft · Apr 12, 2024 · 63fe5d5 · 63fe5d5
1 parent df5966a
commit 63fe5d5
Show file tree

Hide file tree

Showing 7 changed files with 142 additions and 799 deletions.
diff --git a/app/admin/tag/page.tsx b/app/admin/tag/page.tsx
@@ -3,6 +3,8 @@ import TagList from '~/components/admin/tag/TagList'
 import { Card, CardHeader } from '@nextui-org/card'
 import RefreshButton from '~/components/RefreshButton'
 import { HandleProps } from '~/types'
+import {Button} from "@nextui-org/react";
+import React from "react";
 
 export default async function List() {
 
@@ -25,7 +27,17 @@ export default async function List() {
               <h4 className="text-small font-semibold leading-none text-default-600 select-none">标签管理</h4>
             </div>
           </div>
-          <RefreshButton {...props} />
+          <div className="flex items-center space-x-2">
+            <Button
+              color="primary"
+              radius="full"
+              size="sm"
+              variant="shadow"
+            >
+              新增
+            </Button>
+            <RefreshButton {...props} />
+          </div>
         </CardHeader>
       </Card>
       <TagList {...props} />

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -3,11 +3,9 @@ import type { Metadata } from 'next'
 import { NextUIProviders } from '~/app/providers/next-ui-providers'
 import { ToasterProviders } from '~/app/providers/toaster-providers'
 import { SessionProviders } from '~/app/providers/session-providers'
-import { ThemeProviders } from '~/app/providers/theme-providers'
 import { ProgressBarProviders } from '~/app/providers/progress-bar-providers'
 
 import '~/style/globals.css'
-import '@radix-ui/themes/styles.css'
 
 export const metadata: Metadata = {
   title: "PicImpact",
@@ -28,11 +26,9 @@ export default function RootLayout({
         <SessionProviders>
           <NextUIProviders>
             <ToasterProviders />
-            <ThemeProviders>
-              <ProgressBarProviders>
-                {children}
-              </ProgressBarProviders>
-            </ThemeProviders>
+            <ProgressBarProviders>
+              {children}
+            </ProgressBarProviders>
           </NextUIProviders>
         </SessionProviders>
       </body>

diff --git a/app/providers/theme-providers.tsx b/app/providers/theme-providers.tsx
diff --git a/components/admin/tag/DefaultTag.tsx b/components/admin/tag/DefaultTag.tsx
@@ -0,0 +1,47 @@
+'use client'
+
+import { Card, CardBody, CardFooter, CardHeader, Chip, Popover, PopoverContent, PopoverTrigger } from '@nextui-org/react'
+import { CaretSortIcon } from '@radix-ui/react-icons'
+import React from 'react'
+
+export default function DefaultTag() {
+  return (
+    <Card>
+      <CardHeader className="flex gap-3">
+        <p>首页</p>
+        <Popover placement="top">
+          <PopoverTrigger className="cursor-pointer">
+            <Chip className="select-none" color="success" variant="shadow">/</Chip>
+          </PopoverTrigger>
+          <PopoverContent>
+            <div className="px-1 py-2 select-none">
+              <div className="text-small font-bold">路由</div>
+              <div className="text-tiny">可以访问的一级路径</div>
+            </div>
+          </PopoverContent>
+        </Popover>
+      </CardHeader>
+      <CardBody>
+        <p>首页为默认路由，无法调整</p>
+      </CardBody>
+      <CardFooter className="flex space-x-1 select-none">
+        <Chip color="success" variant="shadow">显示</Chip>
+        <Popover placement="top">
+          <PopoverTrigger className="cursor-pointer">
+            <Chip
+              color="primary"
+              variant="shadow"
+              startContent={<CaretSortIcon />}
+            >-1</Chip>
+          </PopoverTrigger>
+          <PopoverContent>
+            <div className="px-1 py-2 select-none">
+              <div className="text-small font-bold">排序</div>
+              <div className="text-tiny">首页优先级最高</div>
+            </div>
+          </PopoverContent>
+        </Popover>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/components/admin/tag/TagList.tsx b/components/admin/tag/TagList.tsx
@@ -11,7 +11,8 @@ import {
   ContextMenuItem,
   ContextMenuTrigger,
 } from '~/components/ContextMenu'
-import {toast} from "sonner";
+import { toast } from 'sonner'
+import DefaultTag from '~/components/admin/tag/DefaultTag'
 
 interface DataType {
   id: number;
@@ -29,7 +30,9 @@ export default function TagList(props : Readonly<HandleProps>) {
     <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
       {
         !isLoading && !error && data ?
-          data.map((tag: DataType) => (
+          <>
+            <DefaultTag />
+            {data.map((tag: DataType) => (
             <ContextMenu key={tag.id}>
               <ContextMenuTrigger>
                 <Card>
@@ -80,9 +83,10 @@ export default function TagList(props : Readonly<HandleProps>) {
                 <ContextMenuItem className="cursor-pointer" onClick={() => toast.warning('还没写！')}>删除</ContextMenuItem>
               </ContextMenuContent>
             </ContextMenu>
-          ))
+            ))}
+          </>
           : error ?
-            <p>没数据哦！</p>
+            <DefaultTag />
             : <p>加载中...</p>
       }
     </div>

diff --git a/package.json b/package.json
@@ -17,7 +17,6 @@
     "@prisma/client": "^5.12.1",
     "@radix-ui/react-context-menu": "^2.1.5",
     "@radix-ui/react-icons": "^1.3.0",
-    "@radix-ui/themes": "^3.0.2",
     "antd": "^5.16.1",
     "canvas-confetti": "^1.9.2",
     "class-variance-authority": "^0.7.0",