@@ -123,19 +110,11 @@ export function Header(props: { navbar: boolean; toggleNavbar: () => void }) {
}
function UserCenter() {
- return
{"用户"}
+ return
用户
}
-export function Navbar(props: {
- navbar: boolean
- setNavbar: (v: boolean) => void
-}) {
- const { navbar, setNavbar } = props
- const closeNavBarIfMobile = () => {
- if (window.innerWidth < 768) {
- setNavbar(false)
- }
- }
+export function Navbar() {
+ const { navbar } = useLayout()
return (
)
}
-function NavTitle(props: { label: string }) {
- return (
-
-
- {props.label}
-
-
-
- )
-}
-
function NavItem(props: {
href: string
icon?: ReactNode
@@ -212,6 +228,7 @@ function NavItem(props: {
expand?: boolean
}) {
const [open, setOpen] = useState(false)
+ const { setNavbar } = useLayout()
const handleOpenChange = (open: boolean) => {
if (!props.expand) {
@@ -219,6 +236,12 @@ function NavItem(props: {
}
}
+ const closeNavBarIfMobile = () => {
+ if (window.innerWidth < 768) {
+ setNavbar(false)
+ }
+ }
+
return (
@@ -230,6 +253,7 @@ function NavItem(props: {
`group-data-[expand=true]:px-4`,
)}
to={props.href}
+ onClick={closeNavBarIfMobile}
>
{props.icon}
diff --git a/src/admin/coupon/page.tsx b/src/admin/coupon/page.tsx
new file mode 100644
index 0000000..919a30e
--- /dev/null
+++ b/src/admin/coupon/page.tsx
@@ -0,0 +1,5 @@
+import Page from "@/components/page"
+
+export default function CouponPage() {
+ return 优惠券
+}
diff --git a/src/admin/dashboard/page.tsx b/src/admin/dashboard/page.tsx
index d117759..b0432dc 100644
--- a/src/admin/dashboard/page.tsx
+++ b/src/admin/dashboard/page.tsx
@@ -1,5 +1,415 @@
+import { useState } from "react"
+import { EditInfoDialog } from "@/components/composites/dialogs/editInfoDialog"
+import DataTable from "@/components/data-table"
import Page from "@/components/page"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+import b3 from "../assets/b3.webp"
+import b5 from "../assets/b5.webp"
+import b6 from "../assets/b6.webp"
+import b7 from "../assets/b7.webp"
+import b8 from "../assets/b8.webp"
+import b9 from "../assets/b9.webp"
+import b10 from "../assets/b10.webp"
+import b11 from "../assets/b11.webp"
+import b12 from "../assets/b12.webp"
+import banner from "../assets/banner.webp"
+import banner2 from "../assets/banner2.webp"
export default function DashboardPage() {
- return 账户总览页面
+ const balanceData = {
+ balance: 68.6,
+ hCoin: 68.6,
+ }
+
+ const accountInfo = {
+ phone: "191****1234",
+ qq: "123456123",
+ wechat: "123456123",
+ email: "123456123@qq.com",
+ taobao: "123456123",
+ }
+
+ const recentOrders = [
+ {
+ date: "2025.04.01",
+ product: "极光IP",
+ plan: "天卡（尊享）",
+ price: 3.0,
+ connections: 1,
+ account: "jx1234",
+ orderAmount: 3.0,
+ paidAmount: 3.0,
+ },
+ {
+ date: "2025.04.01",
+ product: "极光IP",
+ plan: "天卡（尊享）",
+ price: 3.0,
+ connections: 1,
+ account: "jx1234",
+ orderAmount: 3.0,
+ paidAmount: 3.0,
+ },
+ {
+ date: "2025.04.01",
+ product: "极光IP",
+ plan: "天卡（尊享）",
+ price: 3.0,
+ connections: 1,
+ account: "jx1234",
+ orderAmount: 3.0,
+ paidAmount: 3.0,
+ },
+ {
+ date: "2025.04.01",
+ product: "极光IP",
+ plan: "天卡（尊享）",
+ price: 3.0,
+ connections: 1,
+ account: "jx1234",
+ orderAmount: 3.0,
+ paidAmount: 3.0,
+ },
+ ]
+
+ const consumptionData = {
+ today: 2365,
+ month: 312365,
+ todayRefund: 2365,
+ year: 256562,
+ monthRefund: 30,
+ todayRecharge: 50,
+ monthRecharge: 20,
+ }
+
+ const ipAccountData = {
+ using: 30,
+ total: 50,
+ expired: 20,
+ yearConsumption: 2365,
+ }
+ const [editDialogOpen, setEditDialogOpen] = useState(false)
+ const handleSaveInfo = (data: any) => {
+ console.log("保存的信息:", data)
+ // 这里调用你的 API 保存数据
+ }
+ return (
+
+ {/* banner */}
+
+
+
+
+
+ 可用余额(元)
+
+
+
+
+ {balanceData.balance}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {balanceData.hCoin}
+
+
+
+
+
+
+
最近订单
+
+ row.original.price.toFixed(2),
+ },
+ { accessorKey: "connections", header: "总连接数" },
+ { accessorKey: "account", header: "账号" },
+ {
+ accessorKey: "orderAmount",
+ header: "订单金额（元）",
+ cell: ({ row }) => row.original.orderAmount.toFixed(2),
+ },
+ {
+ accessorKey: "paidAmount",
+ header: "实付金额（元）",
+ cell: ({ row }) => row.original.paidAmount.toFixed(2),
+ },
+ ]}
+ />
+
+
+
+
消费信息
+
+
+
+
+
+
今日消费
+
+ {consumptionData.today}
+
+
+
+
+
+
+
当月消费
+
+ {consumptionData.month}
+
+
+
+
+
+
+
今日退款
+
+ {consumptionData.todayRefund}
+
+
+
+
+
+
+
本年消费
+
+ {consumptionData.year}
+
+
+
+
+
+
+
今日充值
+
+ {consumptionData.todayRecharge}
+
+
+
+
+
+
+
当月充值
+
+ {consumptionData.monthRecharge}
+
+
+
+
+
+
+
当月退款
+
+ {consumptionData.monthRefund}
+
+
+
+
+
+
账号信息
+
+
+
{accountInfo.phone}
+
+
+
+
+
+
+
+
+ 密码
+
+ ********
+
+
+
+ QQ
+
+ {accountInfo.qq || "未绑定"}
+
+
+
+ 微信号
+
+ {accountInfo.wechat || "未绑定"}
+
+
+
+ 淘宝会员
+
+ {accountInfo.taobao || "未绑定"}
+
+
+
+ 邮箱
+
+ {accountInfo.email || "未绑定"}
+
+
+
+
+
+
+
+
+
IP账号
+
+
+
+
+
+
{ipAccountData.using}
+
使用中
+
+
+
+
+
+
{ipAccountData.total}
+
总个数
+
+
+
+
+
+
{ipAccountData.expired}
+
已过期
+
+
+
-
-
-
-
+
+
+
+
+
+
+
-
-
-
+
+
+
-
+
-
-
+
+
- {/* 用 Outlet 替代 {props.children} */}
-
-
-
-
+ 验证身份中...
+
+ )
+
+ // if (!isValid) {
+ // return (
+ //
+ // )
+ // }
+
+ return <>{children}
+}
diff --git a/src/components/composites/dialogs/editInfoDialog.tsx b/src/components/composites/dialogs/editInfoDialog.tsx
new file mode 100644
index 0000000..4d4de77
--- /dev/null
+++ b/src/components/composites/dialogs/editInfoDialog.tsx
@@ -0,0 +1,149 @@
+import { Eye, EyeOff } from "lucide-react"
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+
+interface EditInfoDialogProps {
+ open: boolean
+ onOpenChange: (open: boolean) => void
+ initialData?: {
+ username: string
+ taobao: string
+ password: string
+ email: string
+ wechat: string
+ qq: string
+ }
+ onSave?: (data: any) => void
+}
+
+export function EditInfoDialog({
+ open,
+ onOpenChange,
+ initialData = {
+ username: "191****1234",
+ taobao: "191****1234",
+ password: "********",
+ email: "123456123@qq.com",
+ wechat: "",
+ qq: "",
+ },
+ onSave,
+}: EditInfoDialogProps) {
+ const [formData, setFormData] = useState(initialData)
+ const [showPassword, setShowPassword] = useState(false)
+
+ const handleChange = (field: string, value: string) => {
+ setFormData(prev => ({ ...prev, [field]: value }))
+ }
+
+ const handleSubmit = () => {
+ onSave?.(formData)
+ onOpenChange(false)
+ }
+
+ return (
+
+ )
+}
diff --git a/src/components/data-table.tsx b/src/components/data-table.tsx
new file mode 100644
index 0000000..d62a085
--- /dev/null
+++ b/src/components/data-table.tsx
@@ -0,0 +1,123 @@
+import {
+ type ColumnDef,
+ flexRender,
+ getCoreRowModel,
+ useReactTable,
+} from "@tanstack/react-table"
+import { Loader } from "lucide-react"
+import { Pagination, type PaginationProps } from "@/components/ui/pagination"
+import {
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ Table as TableRoot,
+ TableRow,
+} from "@/components/ui/table"
+import { cn } from "@/lib/utils"
+
+export type DataTableProps = {
+ data: T[]
+ status: "load" | "done" | "fail"
+ columns: ColumnDef[]
+ pagination?: PaginationProps
+ classNames?: {
+ headRow?: string
+ dataRow?: string
+ }
+}
+
+export default function DataTable>(
+ props: DataTableProps,
+) {
+ const table = useReactTable({
+ data: props.data,
+ columns: props.columns,
+ getCoreRowModel: getCoreRowModel(),
+ manualPagination: true,
+ rowCount: props.pagination?.total ?? props.data.length,
+ state: {
+ pagination: {
+ pageIndex: props.pagination?.page ?? 0,
+ pageSize: props.pagination?.size ?? props.data.length,
+ },
+ columnFilters: [],
+ },
+ autoResetPageIndex: false,
+ })
+ console.log("data length:", props.data.length)
+ console.log("pageSize:", props.pagination?.size ?? props.data.length)
+ console.log("rows:", table.getRowModel().rows.length)
+ return (
+ <>
+ {/* 数据表 */}
+
+
+
+ {table.getHeaderGroups().map(group => (
+
+ {group.headers.map(header => (
+
+ {header.isPlaceholder
+ ? null
+ : flexRender(
+ header.column.columnDef.header,
+ header.getContext(),
+ )}
+
+ ))}
+
+ ))}
+
+
+ {props.status === "fail" ? (
+
+
+ 加载失败
+
+
+ ) : !props.data?.length ? (
+
+
+ 暂无数据
+
+
+ ) : (
+ table.getRowModel().rows.map(row => (
+
+ {row.getVisibleCells().map(cell => (
+
+ {flexRender(
+ cell.column.columnDef.cell,
+ cell.getContext(),
+ )}
+
+ ))}
+
+ ))
+ )}
+
+
+ {props.status === "load" && (
+
+
+ 加载中
+
+ )}
+
+
+ 共 {total} 条记录，每页
+
+ 条
+
+
+
+
+
+ handlePageChange(currentPage - 1)}
+ className={
+ currentPage === 1 ? "opacity-50 pointer-events-none" : ""
+ }
+ />
+
+
+ {paginationItems.map((pageNum, index) => {
+ if (pageNum === -1) {
+ return (
+
+
+
+ )
+ }
+
+ return (
+
+ handlePageChange(pageNum)}
+ >
+ {pageNum}
+
+
+ )
+ })}
+
+
+ handlePageChange(currentPage + 1)}
+ className={
+ currentPage === totalPages
+ ? "opacity-50 pointer-events-none"
+ : ""
+ }
+ />
+
+
+
+
|
+ )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+ return (
+ |
+ )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+ return (
+ |
+ )
+}
+
+function TableCaption({
+ className,
+ ...props
+}: React.ComponentProps<"caption">) {
+ return (
+
+ )
+}
+
+export {
+ Table,
+ TableBody,
+ TableCaption,
+ TableCell,
+ TableFooter,
+ TableHead,
+ TableHeader,
+ TableRow,
+}
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
index 59622b6..8345225 100644
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -1,7 +1,9 @@
-import * as React from "react"
-import { Tooltip as TooltipPrimitive } from "radix-ui"
+"use client"
-import { cn } from "@/lib/utils/index"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import type * as React from "react"
+
+import { cn } from "@/lib/utils"
function TooltipProvider({
delayDuration = 0,
@@ -19,7 +21,11 @@ function TooltipProvider({
function Tooltip({
...props
}: React.ComponentProps) {
- return
+ return (
+
+
+
+ )
}
function TooltipTrigger({
@@ -40,13 +46,16 @@ function TooltipContent({
data-slot="tooltip-content"
sideOffset={sideOffset}
className={cn(
- "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
- className
+ "bg-card border animate-in fade-in-0 zoom-in-95 ",
+ "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+ "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+ "z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-sm text-balance",
+ className,
)}
{...props}
>
{children}
-
+ {/* */}
)
diff --git a/src/components/wrap.tsx b/src/components/wrap.tsx
index c577dca..cfbe681 100644
--- a/src/components/wrap.tsx
+++ b/src/components/wrap.tsx
@@ -7,7 +7,7 @@ export type WrapProps = {
export default function Wrap(props: WrapProps) {
return (
-
+
{props.children}
)
diff --git a/src/home/header.tsx b/src/home/header.tsx
index aa21121..18fa6ee 100644
--- a/src/home/header.tsx
+++ b/src/home/header.tsx
@@ -34,7 +34,7 @@ export default function Header() {
IP线路表
软件下载
帮助/教程
-
下载客户端
+ {/*
下载客户端 */}
diff --git a/src/home/index.tsx b/src/home/index.tsx
index b1bc808..43c0bf7 100644
--- a/src/home/index.tsx
+++ b/src/home/index.tsx
@@ -1,4 +1,5 @@
import type { ReactNode } from "react"
+import { useNavigate } from "react-router-dom"
import Wrap from "@/components/wrap"
import banner from "./_assets/banner.webp"
import s1 from "./_assets/s1.webp"
@@ -16,6 +17,11 @@ import s12 from "./_assets/s12.webp"
import Common from "./_components/header/common"
export default function HomePage() {
+ const navigate = useNavigate()
+
+ const handleFreeTrial = () => {
+ navigate("/login")
+ }
return (
<>
@@ -51,6 +57,7 @@ export default function HomePage() {