调整列表字段和枚举值转换

2026-01-05 09:14:41 +08:00
parent a27e856f07
commit 054b8954c4
23 changed files with 571 additions and 222 deletions
--- a/.npmrc
+++ b/.npmrc
@@ -0,0 +1 @@
+registry=https://registry.npmmirror.com
--- a/42
+++ b/42
@@ -0,0 +1,42 @@
+FROM oven/bun:1.3.2-alpine AS base
+
+# 依赖缓存阶段
+FROM base AS deps
+WORKDIR /app
+
+COPY package.json bun.lock .npmrc ./
+RUN bun install --frozen-lockfile
+
+# 构建阶段
+FROM base AS builder
+WORKDIR /app
+
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN bun run build
+
+# 生产阶段
+FROM base AS runner
+WORKDIR /app
+
+ENV NEXT_TELEMETRY_DISABLED=1
+ENV NODE_ENV=production
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT=3000
+ENV HOSTNAME="0.0.0.0"
+
+CMD ["bun", "server.js"]
--- a/src/actions/batch.ts
+++ b/src/actions/batch.ts
@@ -1,7 +1,7 @@
 import type { PageRecord } from "@/lib/api"
-import type { User } from "@/models/user"
+import type { Batch } from "@/models/batch"
 import { callByUser } from "./base"

 export async function getPageBatch(params: { page: number; size: number }) {
-  return callByUser<PageRecord<User>>("/api/admin/batch/page", params)
+  return callByUser<PageRecord<Batch>>("/api/admin/batch/page", params)
 }
--- a/src/actions/bill.ts
+++ b/src/actions/bill.ts
@@ -1,7 +1,7 @@
 import type { PageRecord } from "@/lib/api"
-import type { User } from "@/models/user"
+import type { Billing } from "@/models/billing"
 import { callByUser } from "./base"

 export async function getPageBill(params: { page: number; size: number }) {
-  return callByUser<PageRecord<User>>("/api/admin/bill/page", params)
+  return callByUser<PageRecord<Billing>>("/api/admin/bill/page", params)
 }
--- a/src/actions/channel.ts
+++ b/src/actions/channel.ts
@@ -1,7 +1,7 @@
 import type { PageRecord } from "@/lib/api"
-import type { User } from "@/models/user"
+import type { Channel } from "@/models/channel"
 import { callByUser } from "./base"

 export async function getPageChannel(params: { page: number; size: number }) {
-  return callByUser<PageRecord<User>>("/api/admin/channel/page", params)
+  return callByUser<PageRecord<Channel>>("/api/admin/channel/page", params)
 }
--- a/src/actions/resources.ts
+++ b/src/actions/resources.ts
@@ -1,14 +1,20 @@
 import type { PageRecord } from "@/lib/api"
-import type { User } from "@/models/user"
+import type { Resources } from "@/models/resources"
 import { callByUser } from "./base"

 export async function listResourceLong(params: { page: number; size: number }) {
-  return callByUser<PageRecord<User>>("/api/admin/resource/long/page", params)
+  return callByUser<PageRecord<Resources>>(
+    "/api/admin/resource/long/page",
+    params,
+  )
 }

 export async function listResourceShort(params: {
  page: number
  size: number
 }) {
-  return callByUser<PageRecord<User>>("/api/admin/resource/short/page", params)
+  return callByUser<PageRecord<Resources>>(
+    "/api/admin/resource/short/page",
+    params,
+  )
 }
--- a/src/actions/trade.ts
+++ b/src/actions/trade.ts
@@ -1,7 +1,7 @@
 import type { PageRecord } from "@/lib/api"
-import type { User } from "@/models/user"
+import type { Trade } from "@/models/trade"
 import { callByUser } from "./base"

 export async function getPageTrade(params: { page: number; size: number }) {
-  return callByUser<PageRecord<User>>("/api/admin/trade/page", params)
+  return callByUser<PageRecord<Trade>>("/api/admin/trade/page", params)
 }
--- a/src/app/(root)/(dashboard)/page.tsx
+++ b/src/app/(root)/(dashboard)/page.tsx
@@ -12,9 +12,7 @@ export default function DashboardPage(props: DashboardPageProps) {
            <h1 className="text-xl font-bold text-gray-800">
              IP代理管理控制台
            </h1>
-            <p className="text-gray-500 mt-1">
-              上次更新: {new Date().toLocaleString("zh-CN")}
-            </p>
+            <p className="text-gray-500 mt-1">上次更新: -</p>
          </div>
          <div className="flex space-x-3">
            <button className="px-4 py-2 bg-gray-100 text-gray-700 border border-gray-200 rounded-md hover:bg-gray-200 transition-colors text-sm font-medium">
@@ -189,8 +187,8 @@ export default function DashboardPage(props: DashboardPageProps) {
                            ? "warning"
                            : "active"
                      }
-                      requests={Math.floor(Math.random() * 10000)}
-                      successRate={`${95 + Math.floor(Math.random() * 5)}%`}
+                      requests={1}
+                      successRate={`2%`}
                    />
                  ))}
                </tbody>
--- a/src/app/(root)/appbar.tsx
+++ b/src/app/(root)/appbar.tsx
@@ -1,8 +1,21 @@
 "use client"
+import {
+  BadgeQuestionMarkIcon,
+  BellIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  InboxIcon,
+  LogOutIcon,
+  SearchIcon,
+  SettingsIcon,
+  UserIcon,
+} from "lucide-react"
 import Image from "next/image"
 import Link from "next/link"
 import { usePathname } from "next/navigation"
 import { useEffect, useRef, useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"

 export default function Appbar() {
  const [currentUser] = useState({
@@ -84,10 +97,18 @@ export default function Appbar() {
      content: "内容管理",
      articles: "文章管理",
      media: "媒体库",
-      users: "用户管理",
+      user: "用户管理",
      roles: "角色权限",
      settings: "系统设置",
      logs: "系统日志",
+      proxy: "",
+      nodes: "节点列表",
+      trade: "交易明细",
+      billing: "账单详情",
+      resources: "套餐管理",
+      batch: "使用记录",
+      channel: "IP管理",
+      pools: "IP池管理",
    }

    return labels[path] || path
@@ -103,19 +124,7 @@ export default function Appbar() {
        {breadcrumbs.map((crumb, index) => (
          <div key={crumb.path} className="flex items-center">
            {index > 0 && (
-              <svg
-                className="mx-2 h-4 w-4 text-gray-400"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M9 5l7 7-7 7"
-                />
-              </svg>
+              <ChevronRightIcon size={18} className="text-gray-400" />
            )}
            <Link
              href={crumb.path}
@@ -135,61 +144,39 @@ export default function Appbar() {
      <div className="flex items-center space-x-4">
        {/* 搜索框 */}
        <div className="hidden md:block relative">
-          <input
-            type="text"
-            placeholder="搜索..."
-            className="pl-10 pr-4 py-2 bg-gray-100 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent w-56"
-          />
-          <svg
-            className="h-4 w-4 text-gray-400 absolute left-3 top-2.5"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+          <div className="relative">
+            <SearchIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+            <Input
+              type="text"
+              placeholder="搜索..."
+              className="pl-10 pr-4 py-2 bg-gray-100 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent w-56"
            />
-          </svg>
+          </div>
        </div>

        {/* 通知图标 */}
        <div className="relative" ref={notificationRef}>
-          <button
+          <Button
            onClick={() => setShowNotifications(!showNotifications)}
-            className="relative p-2 rounded-full text-gray-600 hover:bg-gray-100 hover:text-gray-800 transition-colors"
+            className="relative p-2 rounded-full text-gray-600 bg-gray-100 hover:bg-gray-100 hover:text-gray-800 transition-colors"
            aria-label="通知"
          >
-            <svg
-              className="h-6 w-6"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
-              />
-            </svg>
+            <BellIcon />
            {unreadCount > 0 && (
              <span className="absolute top-1 right-1 h-4 w-4 text-xs flex items-center justify-center rounded-full bg-red-500 text-white">
                {unreadCount}
              </span>
            )}
-          </button>
+          </Button>

          {/* 通知下拉面板 */}
          {showNotifications && (
            <div className="absolute right-0 mt-2 w-80 bg-white rounded-md shadow-lg py-1 z-20 border border-gray-200">
              <div className="px-4 py-2 border-b border-gray-100 flex justify-between items-center">
                <h3 className="font-medium text-gray-800">通知</h3>
-                <button className="text-xs text-blue-600 hover:text-blue-800">
+                <Button className="text-xs text-blue-600 hover:text-blue-800">
                  全部标为已读
-                </button>
+                </Button>
              </div>

              <div className="max-h-72 overflow-y-auto">
@@ -216,19 +203,7 @@ export default function Appbar() {
                  ))
                ) : (
                  <div className="py-8 px-4 text-center">
-                    <svg
-                      className="w-12 h-12 text-gray-300 mx-auto"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={1}
-                        d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
-                      />
-                    </svg>
+                    <InboxIcon size={18} />
                    <p className="mt-2 text-sm text-gray-500">暂无通知</p>
                  </div>
                )}
@@ -251,9 +226,9 @@ export default function Appbar() {

        {/* 用户下拉菜单 */}
        <div className="relative" ref={dropdownRef}>
-          <button
+          <Button
            onClick={() => setShowDropdown(!showDropdown)}
-            className="flex items-center space-x-2 rounded-lg hover:bg-gray-100 p-2 transition-colors"
+            className="flex items-center space-x-2 rounded-lg text-gray-800 bg-gray-100 hover:bg-gray-100 p-2 transition-colors"
            aria-label="用户菜单"
          >
            <div className="h-8 w-8 rounded-full bg-blue-100 text-blue-800 flex items-center justify-center overflow-hidden border-2 border-white shadow-sm">
@@ -275,20 +250,8 @@ export default function Appbar() {
              </p>
              <p className="text-xs text-gray-500">{currentUser.role}</p>
            </div>
-            <svg
-              className="h-4 w-4 text-gray-400 hidden md:block"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M19 9l-7 7-7-7"
-              />
-            </svg>
-          </button>
+            <ChevronDownIcon />
+          </Button>

          {/* 用户下拉内容 */}
          {showDropdown && (
@@ -303,64 +266,22 @@ export default function Appbar() {
                  href="/profile"
                  className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                >
-                  <svg
-                    className="mr-3 h-5 w-5 text-gray-500"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-                    />
-                  </svg>
-                  个人资料
+                  <UserIcon size={18} />
+                  <span className="pl-3">个人资料</span>
                </Link>
                <Link
                  href="/settings/account"
                  className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                >
-                  <svg
-                    className="mr-3 h-5 w-5 text-gray-500"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
-                    />
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                    />
-                  </svg>
-                  账号设置
+                  <SettingsIcon size={18} />
+                  <span className="pl-3">账号设置</span>
                </Link>
                <Link
                  href="/system/help"
                  className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                >
-                  <svg
-                    className="mr-3 h-5 w-5 text-gray-500"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                    />
-                  </svg>
-                  帮助中心
+                  <BadgeQuestionMarkIcon size={18} />
+                  <span className="pl-3">帮助中心</span>
                </Link>
              </div>

@@ -369,20 +290,8 @@ export default function Appbar() {
                  href="/login"
                  className="flex items-center px-4 py-2 text-sm text-red-600 hover:bg-gray-100"
                >
-                  <svg
-                    className="mr-3 h-5 w-5 text-red-500"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
-                    />
-                  </svg>
-                  退出登录
+                  <LogOutIcon size={18} />
+                  <span className="pl-3">退出登录</span>
                </Link>
              </div>
            </div>
--- a/src/app/(root)/batch/page.tsx
+++ b/src/app/(root)/batch/page.tsx
@@ -1,27 +1,35 @@
 "use client"
+import { format } from "date-fns"
 import { Suspense } from "react"
 import { getPageBatch } from "@/actions/batch"
 import { DataTable, useDataTable } from "@/components/data-table"
-import type { User } from "@/models/user"
+import type { Batch } from "@/models/batch"

-export default function UserPage() {
-  const table = useDataTable<User>((page, size) => getPageBatch({ page, size }))
+export default function BatchPage() {
+  const table = useDataTable<Batch>((page, size) =>
+    getPageBatch({ page, size }),
+  )
  console.log(table, "table")

  return (
-    <Suspense>
-      <DataTable<User>
+    <Suspense fallback={<div>Loading...</div>}>
+      <DataTable<Batch>
        {...table}
        columns={[
          { header: "ID", accessorKey: "id" },
          { header: "批次号", accessorKey: "batch_no" },
-          { header: "城市", accessorKey: "city" },
          { header: "省份", accessorKey: "prov" },
-          { header: "数量", accessorKey: "count" },
+          { header: "城市", accessorKey: "city" },
          { header: "提取IP", accessorKey: "ip" },
          { header: "运营商", accessorKey: "isp" },
-          { header: "可用资源", accessorKey: "resource_id" },
-          { header: "时间", accessorKey: "time" },
+          { header: "提取数量", accessorKey: "count" },
+          { header: "资源数量", accessorKey: "resource_id" },
+          {
+            header: "提取时间",
+            accessorKey: "time",
+            cell: ({ row }) =>
+              format(new Date(row.original.time), "yyyy-MM-dd HH:mm"),
+          },
        ]}
      />
    </Suspense>
--- a/src/app/(root)/billing/page.tsx
+++ b/src/app/(root)/billing/page.tsx
@@ -1,26 +1,95 @@
 "use client"
+import { format } from "date-fns"
+import { CreditCard } from "lucide-react"
 import { Suspense } from "react"
 import { getPageBill } from "@/actions/bill"
 import { DataTable, useDataTable } from "@/components/data-table"
-import type { User } from "@/models/user"
+import type { Billing } from "@/models/billing"

-export default function UserPage() {
-  const table = useDataTable<User>((page, size) => getPageBill({ page, size }))
+export default function BillingPage() {
+  const table = useDataTable<Billing>((page, size) =>
+    getPageBill({ page, size }),
+  )
  console.log(table, "table")

  return (
    <Suspense>
-      <DataTable<User>
+      <DataTable<Billing>
        {...table}
        columns={[
          { header: "ID", accessorKey: "id" },
          { header: "账单号", accessorKey: "bill_no" },
-          { header: "信息", accessorKey: "info" },
-          { header: "金额", accessorKey: "amount" },
-          { header: "可用资源", accessorKey: "resource_id" },
-          { header: "类型", accessorKey: "type" },
-          { header: "创建时间", accessorKey: "created_at" },
-          { header: "更新时间", accessorKey: "updated_at" },
+          {
+            header: "账单详情",
+            accessorKey: "info",
+            cell: ({ row }) => {
+              const bill = row.original
+              console.log(bill, "bill")
+
+              return (
+                <div className="flex items-center gap-2">
+                  {/* 类型展示 */}
+                  <div className="shrink-0">
+                    {bill.type === 1 && (
+                      <div className="flex gap-2 items-center bg-orange-50 w-fit px-2 py-1 rounded-md">
+                        <CreditCard size={16} />
+                        <span>消费</span>
+                      </div>
+                    )}
+                    {bill.type === 2 && (
+                      <div className="flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md">
+                        <CreditCard size={16} />
+                        <span>退款</span>
+                      </div>
+                    )}
+                    {bill.type === 3 && (
+                      <div className="flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md">
+                        <CreditCard size={16} />
+                        <span>充值</span>
+                      </div>
+                    )}
+                  </div>
+
+                  {/* 账单详情 */}
+                  <div className="text-sm">{bill.info}</div>
+                </div>
+              )
+            },
+          },
+          {
+            header: "支付信息",
+            accessorKey: "amount",
+            cell: ({ row }) => {
+              const amount =
+                typeof row.original.amount === "string"
+                  ? parseFloat(row.original.amount)
+                  : row.original.amount || 0
+              return (
+                <div className="flex gap-1">
+                  <span
+                    className={
+                      amount > 0 ? "text-green-500" : "text-orange-500"
+                    }
+                  >
+                    ￥{amount.toFixed(2)}
+                  </span>
+                </div>
+              )
+            },
+          },
+          // { header: "资源数量", accessorKey: "resource_id" },
+          {
+            header: "创建时间",
+            accessorKey: "created_at",
+            cell: ({ row }) =>
+              format(new Date(row.original.created_at), "yyyy-MM-dd HH:mm"),
+          },
+          {
+            header: "更新时间",
+            accessorKey: "updated_at",
+            cell: ({ row }) =>
+              format(new Date(row.original.updated_at), "yyyy-MM-dd HH:mm"),
+          },
        ]}
      />
    </Suspense>
--- a/src/app/(root)/channel/page.tsx
+++ b/src/app/(root)/channel/page.tsx
@@ -1,35 +1,106 @@
 "use client"
+import { format } from "date-fns"
 import { Suspense } from "react"
 import { getPageChannel } from "@/actions/channel"
 import { DataTable, useDataTable } from "@/components/data-table"
-import type { User } from "@/models/user"
+import { Badge } from "@/components/ui/badge"
+import type { Channel } from "@/models/channel"

-export default function UserPage() {
-  const table = useDataTable<User>((page, size) =>
+export default function ChannelPage() {
+  const table = useDataTable<Channel>((page, size) =>
    getPageChannel({ page, size }),
  )
-  console.log(table, "table")

  return (
    <Suspense>
-      <DataTable<User>
+      <DataTable<Channel>
        {...table}
        columns={[
          { header: "ID", accessorKey: "id" },
          { header: "批次号", accessorKey: "batch_no" },
-          { header: "边缘节点", accessorKey: "edge_ref" },
          { header: "省份", accessorKey: "filter_prov" },
          { header: "城市", accessorKey: "filter_city" },
-          { header: "运营商", accessorKey: "filter_isp" },
-          { header: "主机", accessorKey: "host" },
-          { header: "端口", accessorKey: "port" },
-          { header: "密码", accessorKey: "password" },
-          { header: "代理号", accessorKey: "proxy_id" },
-          { header: "可用资源", accessorKey: "resource_id" },
-          { header: "用户名", accessorKey: "username" },
-          { header: "创建时间", accessorKey: "created_at" },
-          { header: "更新时间", accessorKey: "updated_at" },
-          { header: "过期时间", accessorKey: "expired_at" },
+          {
+            header: "运营商",
+            accessorKey: "filter_isp",
+            cell: ({ row }) => {
+              const value = row.getValue("filter_isp")
+              if (!value || value === "all") return "不限"
+              if (value === 1) return "电信"
+              if (value === 2) return "联通"
+              if (value === 3) return "移动"
+              return String(value)
+            },
+          },
+          {
+            header: "代理地址",
+            accessorKey: "host",
+            cell: ({ row }) => {
+              const ip = row.original.host
+              const port = row.original.port
+              return (
+                <span>
+                  {ip}:{port}{" "}
+                </span>
+              )
+            },
+          },
+          {
+            header: "认证方式",
+            cell: ({ row }) => {
+              const channel = row.original
+              console.log(channel, "channel")
+
+              const hasWhitelist =
+                channel.whitelists && channel.whitelists.trim() !== ""
+              const hasAuth = channel.username && channel.password
+
+              return (
+                <div className="flex flex-col gap-1 min-w-0">
+                  {hasWhitelist ? (
+                    <div className="flex flex-col">
+                      <span>白名单</span>
+                      <div className="flex flex-wrap gap-1 max-w-50">
+                        {channel.whitelists.split(",").map(ip => (
+                          <Badge key={ip.trim()} variant="secondary">
+                            {ip.trim()}
+                          </Badge>
+                        ))}
+                      </div>
+                    </div>
+                  ) : hasAuth ? (
+                    <div className="flex flex-col">
+                      <span>账号密码</span>
+                      <Badge variant="secondary">
+                        {channel.username}:{channel.password}
+                      </Badge>
+                    </div>
+                  ) : (
+                    <span className="text-sm text-gray-400">无认证</span>
+                  )}
+                </div>
+              )
+            },
+          },
+          { header: "资源数量", accessorKey: "resource_id" },
+          {
+            header: "创建时间",
+            accessorKey: "created_at",
+            cell: ({ row }) =>
+              format(new Date(row.original.created_at), "yyyy-MM-dd HH:mm"),
+          },
+          {
+            header: "更新时间",
+            accessorKey: "updated_at",
+            cell: ({ row }) =>
+              format(new Date(row.original.updated_at), "yyyy-MM-dd HH:mm"),
+          },
+          {
+            header: "过期时间",
+            accessorKey: "expired_at",
+            cell: ({ row }) =>
+              format(new Date(row.original.expired_at), "yyyy-MM-dd HH:mm"),
+          },
        ]}
      />
    </Suspense>
--- a/src/app/(root)/proxy/sources/page.tsx
+++ b/src/app/(root)/proxy/sources/page.tsx
@@ -1,11 +1,5 @@
-import {ReactNode} from 'react'
-
-export type ProxySourcesPageProps = {
-  
-}
+export type ProxySourcesPageProps = {}

 export default function ProxySourcesPage(props: ProxySourcesPageProps) {
-  return (
-    
-  )
+  return <div></div>
 }
--- a/src/app/(root)/resources/page.tsx
+++ b/src/app/(root)/resources/page.tsx
@@ -3,9 +3,9 @@ import { Suspense } from "react"
 import { listResourceLong, listResourceShort } from "@/actions/resources"
 import { DataTable, useDataTable } from "@/components/data-table"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import type { User } from "@/models/user"
+import type { Resources } from "@/models/resources"

-export default function UserPage() {
+export default function ResourcesPage() {
  return (
    <div>
      <Tabs defaultValue="short">
@@ -41,12 +41,11 @@ interface ResourceListProps {
 function ResourceList({ resourceType }: ResourceListProps) {
  const isLong = resourceType === "long"
  const listFn = isLong ? listResourceLong : listResourceShort
-  const table = useDataTable<User>((page, size) => listFn({ page, size }))
-  console.log(table, "table")
+  const table = useDataTable<Resources>((page, size) => listFn({ page, size }))

  return (
    <Suspense>
-      <DataTable<User>
+      <DataTable<Resources>
        {...table}
        columns={[
          { header: "ID", accessorKey: "id" },
--- a/src/app/(root)/trade/page.tsx
+++ b/src/app/(root)/trade/page.tsx
@@ -1,30 +1,128 @@
 "use client"
+import { format } from "date-fns"
+import { CheckCircle, Clock, XCircle } from "lucide-react"
 import { Suspense } from "react"
 import { getPageTrade } from "@/actions/trade"
 import { DataTable, useDataTable } from "@/components/data-table"
-import type { User } from "@/models/user"
+import type { Trade } from "@/models/trade"

-export default function UserPage() {
-  const table = useDataTable<User>((page, size) => getPageTrade({ page, size }))
+export default function TradePage() {
+  const table = useDataTable<Trade>((page, size) =>
+    getPageTrade({ page, size }),
+  )
  console.log(table, "table")

  return (
    <Suspense>
-      <DataTable<User>
+      <DataTable<Trade>
        {...table}
        columns={[
          { header: "ID", accessorKey: "id" },
          { header: "套餐号", accessorKey: "inner_no" },
-          { header: "支付方式", accessorKey: "method" },
-          { header: "支付金额", accessorKey: "payment" },
-          { header: "支付平台", accessorKey: "platform" },
-          { header: "已退款", accessorKey: "refunded" },
-          { header: "支付状态", accessorKey: "status" },
+          {
+            header: "支付方式",
+            accessorKey: "method",
+            cell: ({ row }) => {
+              const methodMap: Record<number, string> = {
+                1: "支付宝",
+                2: "微信",
+                3: "其他",
+                4: "支付宝",
+                5: "微信",
+              }
+              return (
+                <div>{methodMap[row.original.method as number] || "未知"}</div>
+              )
+            },
+          },
+          {
+            header: "支付金额",
+            accessorKey: "payment",
+            cell: ({ row }) => {
+              const payment =
+                typeof row.original.payment === "string"
+                  ? parseFloat(row.original.payment)
+                  : row.original.payment || 0
+              return (
+                <div className="flex gap-1">
+                  <span
+                    className={
+                      payment > 0 ? "text-green-500" : "text-orange-500"
+                    }
+                  >
+                    ￥{payment.toFixed(2)}
+                  </span>
+                </div>
+              )
+            },
+          },
+          {
+            header: "支付平台",
+            accessorKey: "platform",
+            cell: ({ row }) => {
+              const platform = row.original.platform
+              if (!platform) return <span>-</span>
+              return (
+                <div className="flex items-center gap-2">
+                  {platform === 1 ? (
+                    <span>电脑网站</span>
+                  ) : platform === 2 ? (
+                    <span>手机网站</span>
+                  ) : (
+                    <span>-</span>
+                  )}
+                </div>
+              )
+            },
+          },
+          // { header: "已退款", accessorKey: "refunded" },
+          {
+            header: "支付状态",
+            accessorKey: "status",
+            cell: ({ row }) => {
+              const status = row.original.status
+
+              switch (status) {
+                case 0:
+                  return (
+                    <div className="flex items-center gap-2 text-yellow-600">
+                      <Clock className="h-4 w-4" />
+                      <span>待支付</span>
+                    </div>
+                  )
+                case 1:
+                  return (
+                    <div className="flex items-center gap-2 text-green-600">
+                      <CheckCircle className="h-4 w-4" />
+                      <span>支付成功</span>
+                    </div>
+                  )
+                case 2:
+                  return (
+                    <div className="flex items-center gap-2 text-gray-500">
+                      <XCircle className="h-4 w-4" />
+                      <span>取消支付</span>
+                    </div>
+                  )
+                default:
+                  return <span className="text-gray-400">-</span>
+              }
+            },
+          },
          { header: "购买套餐", accessorKey: "subject" },
          { header: "类型", accessorKey: "type" },
-          { header: "创建时间", accessorKey: "created_at" },
-          { header: "更新时间", accessorKey: "updated_at" },
-          { header: "过期时间", accessorKey: "canceled_at" },
+          {
+            header: "创建时间",
+            accessorKey: "created_at",
+            cell: ({ row }) =>
+              format(new Date(row.original.created_at), "yyyy-MM-dd HH:mm"),
+          },
+          {
+            header: "更新时间",
+            accessorKey: "updated_at",
+            cell: ({ row }) =>
+              format(new Date(row.original.updated_at), "yyyy-MM-dd HH:mm"),
+          },
        ]}
      />
    </Suspense>
--- a/src/app/(root)/user/page.tsx
+++ b/src/app/(root)/user/page.tsx
@@ -1,7 +1,9 @@
 "use client"
+import { format } from "date-fns"
 import { Suspense } from "react"
 import { bindAdmin, getPageUsers } from "@/actions/user"
 import { DataTable, useDataTable } from "@/components/data-table"
+import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { useFetch } from "@/hooks/data"
 import type { User } from "@/models/user"
@@ -22,13 +24,68 @@ export default function UserPage() {
            { header: "手机", accessorKey: "phone" },
            { header: "邮箱", accessorKey: "email" },
            { header: "姓名", accessorKey: "name" },
-            { header: "余额", accessorKey: "balance" },
-            { header: "认证状态", accessorKey: "id_type" },
-            { header: "账号状态", accessorKey: "status" },
+            {
+              header: "余额",
+              accessorKey: "balance",
+              cell: ({ row }) => {
+                const balance =
+                  typeof row.original.balance === "string"
+                    ? parseFloat(row.original.balance)
+                    : row.original.balance || 0
+                return (
+                  <div className="flex gap-1">
+                    <span
+                      className={
+                        balance > 0 ? "text-green-500" : "text-orange-500"
+                      }
+                    >
+                      ￥{balance.toFixed(2)}
+                    </span>
+                  </div>
+                )
+              },
+            },
+            {
+              header: "认证状态",
+              accessorKey: "id_type",
+              cell: ({ row }) => {
+                const status = row.original.id_type
+                return (
+                  <Badge
+                    variant={status === 1 ? "default" : "secondary"}
+                    className={
+                      status === 1
+                        ? "bg-green-100 text-green-800"
+                        : "bg-gray-100 text-gray-800"
+                    }
+                  >
+                    {status === 1 ? "已认证" : "未认证"}
+                  </Badge>
+                )
+              },
+            },
+            {
+              header: "账号状态",
+              accessorKey: "status",
+              cell: ({ row }) => {
+                const status = row.original.status
+                return status === 1 ? "正常" : ""
+              },
+            },
            { header: "联系方式", accessorKey: "contact_wechat" },
            { header: "管理员", accessorKey: "admin_id" },
-            { header: "最后登录时间", accessorKey: "last_login" },
-            { header: "创建时间", accessorKey: "created_at" },
+            {
+              header: "最后登录时间",
+              accessorKey: "last_login",
+              cell: ({ row }) =>
+                format(new Date(row.original.last_login), "yyyy-MM-dd HH:mm"),
+            },
+            {
+              header: "创建时间",
+              accessorKey: "created_at",
+              cell: ({ row }) =>
+                format(new Date(row.original.created_at), "yyyy-MM-dd HH:mm"),
+            },
            {
              header: "操作",
              cell: ctx => (
--- a/src/components/ui/badge.tsx
+++ b/src/components/ui/badge.tsx
@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,4 +1,4 @@
-import { clsx, type ClassValue } from "clsx"
+import { type ClassValue, clsx } from "clsx"
 import { twMerge } from "tailwind-merge"

 export function cn(...inputs: ClassValue[]) {
--- a/src/models/batch.ts
+++ b/src/models/batch.ts
@@ -0,0 +1,11 @@
+export type Batch = {
+  id: number
+  batch_no: string
+  prov: string
+  city: string
+  ip: string
+  isp: string
+  count: string
+  resource_id: string
+  time: string
+}
--- a/src/models/billing.ts
+++ b/src/models/billing.ts
@@ -0,0 +1,7 @@
+export type Billing = {
+  type: number
+  info: string
+  amount: number
+  created_at: Date
+  updated_at: Date
+}
--- a/src/models/channel.ts
+++ b/src/models/channel.ts
@@ -0,0 +1,15 @@
+export type Channel = {
+  id: number
+  batch_no: string
+  filter_prov: string
+  filter_city: string
+  filter_isp: string
+  host: string
+  port: string
+  whitelists: string
+  username: string
+  password: string
+  created_at: Date
+  updated_at: Date
+  expired_at: Date
+}
--- a/src/models/resources.ts
+++ b/src/models/resources.ts
@@ -0,0 +1,8 @@
+export type Resources = {
+  id: number
+  resource_no: string
+  active: string
+  type: string
+  created_at: Date
+  updated_at: Date
+}
--- a/src/models/trade.ts
+++ b/src/models/trade.ts
@@ -0,0 +1,10 @@
+export type Trade = {
+  id: number
+  inner_no: string
+  method: number
+  payment: string
+  platform: number
+  status: number
+  created_at: Date
+  updated_at: Date
+}