完善首页接口

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lanhu-admin",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "private": true,
   "scripts": {
     "dev": "next dev -H 0.0.0.0 -p 3001 --turbopack",

src/actions/cust.ts

@@ -44,7 +44,11 @@ export async function createCust(data: {
   return callByUser<PageRecord<User>>("/api/admin/user/create", data)
 }
 
-export async function getDeposit(params: { user_id: number; amount: string }) {
+export async function getDeposit(params: {
+  user_id: number
+  amount: string
+  remark: string
+}) {
   return callByUser<PageRecord<User>>(
     "/api/admin/user/update/balance-inc",
     params,
@@ -54,6 +58,7 @@ export async function getDeposit(params: { user_id: number; amount: string }) {
 export async function getDeduction(params: {
   user_id: number
   amount: string
+  remark: string
 }) {
   return callByUser<PageRecord<User>>(
     "/api/admin/user/update/balance-dec",

src/actions/dashboard.ts

@@ -0,0 +1,23 @@
+"use server"
+
+import type {
+  DashboardExtractable,
+  DashboardOverview,
+  DashboardTrendItem,
+} from "@/models/dashboard"
+import { callByUser } from "./base"
+
+export async function getOverview() {
+  return callByUser<DashboardOverview>("/api/admin/home/overview", {})
+}
+
+export async function getTrend(params: {
+  date_start: string
+  date_end: string
+}) {
+  return callByUser<DashboardTrendItem[]>("/api/admin/home/trend", params)
+}
+
+export async function getExtractable() {
+  return callByUser<DashboardExtractable>("/api/admin/home/extractable", {})
+}

src/actions/gateway.ts

@@ -27,3 +27,9 @@ export async function updateGateway(data: { id: number; status: number }) {
 export async function clear(data: { proxy_id: number }) {
   return callByUser<PageRecord>("/api/admin/channel/sync/clear-expired", data)
 }
+export async function createProxyPort(data: { id: number }) {
+  return callByUser<PageRecord>("/api/admin/proxy/sync/ports", data)
+}
+export async function createProxyChains(data: { id: number }) {
+  return callByUser<PageRecord>("/api/admin/proxy/sync/chains", data)
+}

src/actions/resources.ts

@@ -12,6 +12,7 @@ export interface ResourceListParams {
   created_at_start?: Date
   created_at_end?: Date
   expired?: boolean
+  resource_type?: number
 }
 
 export async function listResourceLong(params: ResourceListParams) {
@@ -71,3 +72,7 @@ export async function ResourceShort(params: {
     params,
   )
 }
+
+export async function listResource(params: ResourceListParams) {
+  return callByUser<PageRecord<Resources>>("/api/admin/resource/page", params)
+}

src/actions/trade.ts

@@ -30,3 +30,46 @@ export async function getTrade(params: {
 }) {
   return callByUser<PageRecord<Trade>>("/api/admin/trade/page/of-user", params)
 }
+
+export async function updateTradeRemark(params: {
+  trade_no: string
+  remark: string
+}) {
+  return callByUser<PageRecord<Trade>>("/api/admin/trade/update/remark", params)
+}
+
+type PayCloseData = {
+  Status: 0 | 1 | 2
+  TransId: string
+}
+
+export async function getTradeCheckk(params: {
+  trade_no: string
+  method: number
+}) {
+  return callByUser<PayCloseData>("/api/admin/trade/check", params)
+}
+
+export async function tradeComplete(params: {
+  trade_no: string
+  method: number
+  user_id: number
+}) {
+  return callByUser<PayCloseData>("/api/admin/trade/complete", params)
+}
+
+export async function tradeConvert(params: {
+  trade_no: string
+  method: number
+  user_id: number
+}) {
+  return callByUser<PayCloseData>("/api/admin/trade/convert", params)
+}
+
+export async function tradeCancel(params: {
+  trade_no: string
+  method: number
+  user_id: number
+}) {
+  return callByUser<PayCloseData>("/api/admin/trade/cancel", params)
+}

src/app/(root)/(dashboard)/data.ts

@@ -0,0 +1,68 @@
+import { useCallback, useEffect, useRef, useState } from "react"
+import type { ApiResponse } from "@/lib/api"
+
+export function useData<T>(load: () => Promise<ApiResponse<T>>) {
+  const request = useRef(0)
+  const [state, setState] = useState<{
+    source: typeof load
+    data: T | null
+    loading: boolean
+    error: string | null
+    updatedAt: Date | null
+  }>({ source: load, data: null, loading: true, error: null, updatedAt: null })
+
+  const reload = useCallback(async () => {
+    const id = ++request.current
+    setState(prev => ({
+      source: load,
+      data: prev.source === load ? prev.data : null,
+      updatedAt: prev.source === load ? prev.updatedAt : null,
+      loading: true,
+      error: null,
+    }))
+
+    try {
+      const resp = await load()
+      if (id !== request.current) return
+
+      if (resp.success) {
+        setState({
+          source: load,
+          data: resp.data,
+          loading: false,
+          error: null,
+          updatedAt: new Date(),
+        })
+      } else {
+        setState(prev => ({
+          ...prev,
+          loading: false,
+          error: resp.message || "请求失败，请重试",
+        }))
+      }
+    } catch {
+      if (id !== request.current) return
+      setState(prev => ({
+        ...prev,
+        loading: false,
+        error: "请求失败，请重试",
+      }))
+    }
+  }, [load])
+
+  useEffect(() => {
+    void reload()
+    return () => {
+      request.current++
+    }
+  }, [reload])
+
+  const current = state.source === load
+  return {
+    data: current ? state.data : null,
+    loading: !current || state.loading,
+    error: current ? state.error : null,
+    updatedAt: current ? state.updatedAt : null,
+    reload,
+  }
+}

src/app/(root)/(dashboard)/page.tsx

@@ -1,12 +1,15 @@
 "use client"
 
-import { format, subDays } from "date-fns"
+import {
+  differenceInCalendarDays,
+  format,
+  isValid,
+  parseISO,
+  subDays,
+} from "date-fns"
 import {
   Activity,
-  ArrowDownRight,
-  ArrowUpRight,
   BarChart3,
-  Calendar,
   DoorOpenIcon,
   Server,
   TrendingUp,
@@ -14,13 +17,11 @@ import {
   Users,
 } from "lucide-react"
 import Link from "next/link"
-import { useMemo, useState } from "react"
-import {
-  SimpleBarChart,
-  SimpleHorizontalBarChart,
-  SimpleLineChart,
-} from "@/components/charts"
+import { useCallback, useMemo, useState } from "react"
+import { getExtractable, getOverview, getTrend } from "@/actions/dashboard"
+import { SimpleBarChart, SimpleLineChart } from "@/components/charts"
 import { Page } from "@/components/page"
+import { useData } from "./data"
 
 type TimeRange = "today" | "7d" | "30d" | "90d" | "custom"
 
@@ -32,97 +33,99 @@ const timeRangeLabels: Record<TimeRange, string> = {
   custom: "自定义",
 }
 
-function mulberry32(seed: number) {
-  let t = seed
-  return () => {
-    t |= 0
-    t = (t + 0x6d2b79f5) | 0
-    let n = Math.imul(t ^ (t >>> 15), 1 | t)
-    n = (n + Math.imul(n ^ (n >>> 7), 61 | n)) ^ n
-    return ((n ^ (n >>> 14)) >>> 0) / 4294967296
+function getDateRange(range: Exclude<TimeRange, "custom">) {
+  const now = new Date()
+  const days = { today: 0, "7d": 6, "30d": 29, "90d": 89 }
+  return {
+    date_start: format(subDays(now, days[range]), "yyyy-MM-dd"),
+    date_end: format(now, "yyyy-MM-dd"),
   }
 }
 
 export default function DashboardPage() {
-  const [timeRange, setTimeRange] = useState<TimeRange>("7d")
+  const [period, setPeriod] = useState(() => ({
+    key: "7d" as TimeRange,
+    ...getDateRange("7d"),
+  }))
   const [showCustomPicker, setShowCustomPicker] = useState(false)
   const [startDate, setStartDate] = useState("")
   const [endDate, setEndDate] = useState("")
+  const [dateError, setDateError] = useState<string | null>(null)
 
-  const chartData = useMemo(() => {
-    const days = 14
-    const seed = 42
-    const rng = mulberry32(seed)
-    const proxyData = []
-    const tradeData = []
-    const customerData = []
-    const extractData = []
+  const overviewState = useData(getOverview)
+  const extractableState = useData(getExtractable)
+  const loadTrend = useCallback(
+    () =>
+      getTrend({ date_start: period.date_start, date_end: period.date_end }),
+    [period.date_start, period.date_end],
+  )
+  const trendState = useData(loadTrend)
+  const overview = overviewState.data
+  const extractable = extractableState.data
 
-    for (let i = days - 1; i >= 0; i--) {
-      const date = subDays(new Date(), i)
-      const dateStr = format(date, "MM-dd")
-      proxyData.push({
-        date: dateStr,
-        value: Math.floor(rng() * 50) + 80,
-      })
-      tradeData.push({
-        date: dateStr,
-        value: Math.floor(rng() * 3000) + 5000,
-      })
-      customerData.push({
-        date: dateStr,
-        value: Math.floor(rng() * 20) + 5,
-      })
-      extractData.push({
-        date: dateStr,
-        value: Math.floor(rng() * 800) + 1200,
-      })
-    }
-
-    const userData = [
-      { name: "张三", activity: 287 },
-      { name: "李四", activity: 245 },
-      { name: "王五", activity: 198 },
-      { name: "赵六", activity: 156 },
-      { name: "孙七", activity: 132 },
-      { name: "周八", activity: 98 },
-      { name: "吴九", activity: 76 },
-    ]
-
-    return { proxyData, tradeData, customerData, extractData, userData }
-  }, [])
-
-  // 处理自定义日期按钮点击
-  const handleCustomClick = () => {
-    setShowCustomPicker(true)
-    setTimeRange("custom")
-    // 清空之前的日期
-    setStartDate("")
-    setEndDate("")
-  }
-
-  // 处理日期确认
-  const handleDateConfirm = () => {
-    if (startDate && endDate) {
-      console.log("自定义日期范围:", startDate, "~", endDate)
+  const handleTimeRangeChange = (key: TimeRange) => {
+    setDateError(null)
+    if (key === "custom") {
+      setStartDate(period.date_start)
+      setEndDate(period.date_end)
+      setShowCustomPicker(true)
+    } else {
+      setPeriod({ key, ...getDateRange(key) })
       setShowCustomPicker(false)
     }
   }
 
-  // 处理取消
+  const handleDateConfirm = () => {
+    const start = parseISO(startDate)
+    const end = parseISO(endDate)
+    if (!isValid(start) || !isValid(end)) {
+      setDateError("请选择有效的开始和结束日期")
+      return
+    }
+    const days = differenceInCalendarDays(end, start) + 1
+    if (days < 1) {
+      setDateError("结束日期不能早于开始日期")
+      return
+    }
+    if (days > 366) {
+      setDateError("日期范围不能超过 366 天")
+      return
+    }
+    setDateError(null)
+    setPeriod({ key: "custom", date_start: startDate, date_end: endDate })
+    setShowCustomPicker(false)
+  }
+
   const handleCancel = () => {
     setShowCustomPicker(false)
-    setTimeRange("7d")
+    setDateError(null)
   }
 
+  const chartData = useMemo(() => {
+    const trendData = trendState.data ?? []
+    const proxyData = trendData.map(item => ({
+      date: item.date.slice(5),
+      value: item.active_channel_count,
+    }))
+    const tradeData = trendData.map(item => ({
+      date: item.date.slice(5),
+      value: Number.parseFloat(item.trade_amount) || 0,
+    }))
+    const customerData = trendData.map(item => ({
+      date: item.date.slice(5),
+      value: item.new_customer_count,
+    }))
+    const extractData = trendData.map(item => ({
+      date: item.date.slice(5),
+      value: item.extract_count,
+    }))
+    return { proxyData, tradeData, customerData, extractData }
+  }, [trendState.data])
+
   return (
     <Page className="overflow-auto">
-      {/* 欢迎栏 */}
       <div className="bg-card rounded-lg border p-2 flex flex-col sm:flex-row sm:items-center justify-between gap-3">
-        <div>
-          <h1 className="text-lg font-bold">IP代理管理控制台</h1>
-          <p className="text-sm text-muted-foreground mt-1">上次更新: --</p>
-        </div>
+        <h1 className="text-lg font-bold">IP代理管理控制台</h1>
         <div className="flex gap-2 flex-wrap">
           <Link
             href="/cust"
@@ -149,58 +152,51 @@ export default function DashboardPage() {
       </div>
 
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
-        {/* 指标卡片 */}
         <div className="lg:col-span-2 space-y-4">
           <div className="space-y-3">
+            <DataStatus {...overviewState} />
             <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
               <StatCard
                 title="待认领客户数量"
-                value="--"
-                change="--"
-                trend="up"
+                value={
+                  overview ? String(overview.pending_customer_count) : "--"
+                }
                 icon={Users}
                 iconColor="text-cyan-600"
                 iconBg="bg-cyan-50 border-cyan-100"
               />
               <StatCard
                 title="活跃代理数"
-                value="--"
-                change="--"
-                trend="up"
+                value={overview ? String(overview.active_channel_count) : "--"}
                 icon={Server}
                 iconColor="text-blue-600"
                 iconBg="bg-blue-50 border-blue-100"
               />
               <StatCard
                 title="今日交易额"
-                value="--"
-                change="--"
-                trend="up"
+                value={overview ? `￥${overview.today_trade_amount}` : "--"}
                 icon={TrendingUp}
                 iconColor="text-amber-600"
                 iconBg="bg-amber-50 border-amber-100"
               />
               <StatCard
                 title="今日提取数量"
-                value="--"
-                change="--"
-                trend="up"
+                value={overview ? String(overview.today_extract_count) : "--"}
                 icon={BarChart3}
                 iconColor="text-rose-600"
                 iconBg="bg-rose-50 border-rose-100"
               />
               <StatCard
                 title="今日新增客户"
-                value="--"
-                change="--"
-                trend="up"
+                value={
+                  overview ? String(overview.today_new_customer_count) : "--"
+                }
                 icon={UserPlus}
                 iconColor="text-blue-600"
                 iconBg="bg-blue-50 border-blue-100"
               />
             </div>
 
-            {/* 时间筛选栏 */}
             <div className="flex flex-col sm:flex-row sm:items-center justify-end gap-3">
               <div className="flex items-center gap-2">
                 <span className="text-sm text-muted-foreground">数据周期</span>
@@ -209,16 +205,11 @@ export default function DashboardPage() {
                   {(Object.keys(timeRangeLabels) as TimeRange[]).map(key => (
                     <button
                       key={key}
-                      onClick={() => {
-                        if (key === "custom") {
-                          handleCustomClick()
-                        } else {
-                          setTimeRange(key)
-                          setShowCustomPicker(false)
-                        }
-                      }}
+                      type="button"
+                      onClick={() => handleTimeRangeChange(key)}
+                      aria-pressed={period.key === key}
                       className={`px-3 py-1.5 text-xs font-medium transition-colors ${
-                        timeRange === key && !showCustomPicker
+                        period.key === key
                           ? "bg-primary text-primary-foreground"
                           : "text-muted-foreground hover:bg-accent"
                       }`}
@@ -229,23 +220,31 @@ export default function DashboardPage() {
                 </div>
               </div>
 
-              {/* 点击自定义时显示 */}
               {showCustomPicker && (
                 <div className="flex gap-2 items-center p-1 rounded-md">
                   <input
                     type="date"
+                    aria-label="开始日期"
                     className="px-2 py-1 border rounded text-sm bg-background"
                     value={startDate}
-                    onChange={e => setStartDate(e.target.value)}
+                    onChange={e => {
+                      setStartDate(e.target.value)
+                      setDateError(null)
+                    }}
                   />
                   <span className="text-muted-foreground">~</span>
                   <input
                     type="date"
+                    aria-label="结束日期"
                     className="px-2 py-1 border rounded text-sm bg-background"
                     value={endDate}
-                    onChange={e => setEndDate(e.target.value)}
+                    onChange={e => {
+                      setEndDate(e.target.value)
+                      setDateError(null)
+                    }}
                   />
                   <button
+                    type="button"
                     onClick={handleDateConfirm}
                     disabled={!startDate || !endDate}
                     className="px-3 py-1 bg-primary text-primary-foreground rounded text-sm disabled:opacity-50 disabled:cursor-not-allowed"
@@ -253,6 +252,7 @@ export default function DashboardPage() {
                     确定
                   </button>
                   <button
+                    type="button"
                     onClick={handleCancel}
                     className="px-3 py-1 border rounded text-sm hover:bg-accent"
                   >
@@ -261,103 +261,98 @@ export default function DashboardPage() {
                 </div>
               )}
             </div>
-          </div>
-
-          {/* 图表区域 */}
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-            {/* 每日活跃代理 */}
-            <div className="bg-card rounded-lg border p-4">
-              <h3 className="font-semibold text-sm mb-4">每日活跃代理</h3>
-              <SimpleLineChart
-                data={chartData.proxyData}
-                dataKey="value"
-                xAxisKey="date"
-                stroke="#3b82f6"
-                height={250}
-              />
-            </div>
-
-            {/* 每日交易额 */}
-            <div className="bg-card rounded-lg border p-4">
-              <h3 className="font-semibold text-sm mb-4">每日交易额</h3>
-              <SimpleBarChart
-                data={chartData.tradeData}
-                dataKey="value"
-                xAxisKey="date"
-                fill="#f59e0b"
-                height={250}
-              />
-            </div>
-
-            {/* 每日新增客户 */}
-            <div className="bg-card rounded-lg border p-4">
-              <h3 className="font-semibold text-sm mb-4">每日新增客户</h3>
-              <SimpleLineChart
-                data={chartData.customerData}
-                dataKey="value"
-                xAxisKey="date"
-                stroke="#10b981"
-                height={250}
-              />
-            </div>
-
-            {/* 每日提取量 */}
-            <div className="bg-card rounded-lg border p-4">
-              <h3 className="font-semibold text-sm mb-4">每日提取量</h3>
-              <SimpleBarChart
-                data={chartData.extractData}
-                dataKey="value"
-                xAxisKey="date"
-                fill="#ef4444"
-                height={250}
-              />
+            {dateError && (
+              <p role="alert" className="text-sm text-destructive">
+                {dateError}
+              </p>
+            )}
+            <div className="flex flex-wrap items-center justify-between gap-2">
+              <span className="text-sm text-muted-foreground">
+                {period.date_start} ~ {period.date_end}
+              </span>
+              <DataStatus {...trendState} showStale={false} />
             </div>
           </div>
+
+          {trendState.loading || trendState.error ? (
+            <div className="bg-card rounded-lg border p-4 h-64 flex items-center justify-center text-sm text-muted-foreground">
+              {trendState.loading
+                ? "正在加载趋势数据…"
+                : "趋势数据加载失败，请重试"}
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+              <div className="bg-card rounded-lg border p-4">
+                <h3 className="font-semibold text-sm mb-4">每日活跃代理</h3>
+                <SimpleLineChart
+                  data={chartData.proxyData}
+                  dataKey="value"
+                  xAxisKey="date"
+                  stroke="#3b82f6"
+                  height={250}
+                />
+              </div>
+              <div className="bg-card rounded-lg border p-4">
+                <h3 className="font-semibold text-sm mb-4">每日交易额</h3>
+                <SimpleBarChart
+                  data={chartData.tradeData}
+                  dataKey="value"
+                  xAxisKey="date"
+                  fill="#f59e0b"
+                  height={250}
+                />
+              </div>
+              <div className="bg-card rounded-lg border p-4">
+                <h3 className="font-semibold text-sm mb-4">每日新增客户</h3>
+                <SimpleLineChart
+                  data={chartData.customerData}
+                  dataKey="value"
+                  xAxisKey="date"
+                  stroke="#10b981"
+                  height={250}
+                />
+              </div>
+              <div className="bg-card rounded-lg border p-4">
+                <h3 className="font-semibold text-sm mb-4">每日提取量</h3>
+                <SimpleBarChart
+                  data={chartData.extractData}
+                  dataKey="value"
+                  xAxisKey="date"
+                  fill="#ef4444"
+                  height={250}
+                />
+              </div>
+            </div>
+          )}
         </div>
 
-        {/*套餐统计 */}
         <div className="lg:col-span-1 space-y-4">
           <div className="bg-card rounded-lg border">
             <div className="p-5 border-b">
               <h2 className="font-semibold">套餐统计</h2>
             </div>
             <div className="p-5">
+              <div className="mb-4">
+                <DataStatus {...extractableState} />
+              </div>
               <div className="flex flex-col gap-4">
                 <ResourceItem
                   label="长效套餐"
-                  active="--"
-                  total="--"
-                  color="bg-blue-500"
+                  total={extractable ? String(extractable.long) : "--"}
                 />
                 <ResourceItem
                   label="短效套餐"
-                  active="--"
-                  total="--"
-                  color="bg-emerald-500"
+                  total={extractable ? String(extractable.short) : "--"}
                 />
                 <div className="pt-3 border-t flex justify-between text-sm">
-                  <span className="text-muted-foreground">总可用IP</span>
-                  <span className="font-semibold">--</span>
+                  <span className="text-muted-foreground">总可提取量</span>
+                  <span className="font-semibold">
+                    {extractable ? extractable.long + extractable.short : "--"}
+                  </span>
                 </div>
               </div>
             </div>
           </div>
-
-          {/* 最近活跃用户 */}
-          <div className="bg-card rounded-lg border">
-            <div className="p-5 border-b">
-              <h2 className="font-semibold">最近活跃用户</h2>
-            </div>
-            <div className="p-4">
-              <SimpleHorizontalBarChart
-                data={chartData.userData}
-                dataKey="activity"
-                labelKey="name"
-                fill="#6366f1"
-                width={300}
-              />
-            </div>
-          </div>
         </div>
       </div>
     </Page>
@@ -367,16 +362,12 @@ export default function DashboardPage() {
 function StatCard({
   title,
   value,
-  change,
-  trend,
   icon: Icon,
   iconColor,
   iconBg,
 }: {
   title: string
   value: string
-  change: string
-  trend: "up" | "down"
   icon: React.ComponentType<{ className?: string }>
   iconColor: string
   iconBg: string
@@ -387,19 +378,6 @@ function StatCard({
         <div className="flex-1 min-w-0">
           <p className="text-xs text-muted-foreground truncate">{title}</p>
           <p className="text-xl font-bold mt-1 truncate">{value}</p>
-          <div className="flex items-center gap-1 mt-1.5">
-            {trend === "up" ? (
-              <ArrowUpRight className="h-3 w-3 text-green-600 shrink-0" />
-            ) : (
-              <ArrowDownRight className="h-3 w-3 text-red-600 shrink-0" />
-            )}
-            <span
-              className={`text-xs font-medium ${trend === "up" ? "text-green-600" : "text-red-600"}`}
-            >
-              {change}
-            </span>
-            <span className="text-xs text-muted-foreground">较昨日</span>
-          </div>
         </div>
         <div className={`p-2 rounded-md border shrink-0 ${iconBg}`}>
           <Icon className={`h-5 w-5 ${iconColor}`} />
@@ -409,31 +387,56 @@ function StatCard({
   )
 }
 
-function ResourceItem({
-  label,
-  active,
-  total,
-  color,
-}: {
-  label: string
-  active: string
-  total: string
-  color: string
-}) {
+function ResourceItem({ label, total }: { label: string; total: string }) {
   return (
-    <div>
-      <div className="flex justify-between text-sm mb-1.5">
-        <span className="text-muted-foreground">{label}</span>
-        <span className="font-medium">
-          {active} / {total}
-        </span>
-      </div>
-      <div className="w-full h-2 bg-muted rounded-full overflow-hidden">
-        <div
-          className={`h-full ${color} rounded-full transition-all`}
-          style={{ width: "0%" }}
-        />
-      </div>
+    <div className="flex justify-between text-sm">
+      <span className="text-muted-foreground">{label}</span>
+      <span className="font-medium">{total}</span>
+    </div>
+  )
+}
+
+function DataStatus({
+  data,
+  loading,
+  error,
+  updatedAt,
+  reload,
+  showStale = true,
+}: {
+  data: unknown
+  loading: boolean
+  error: string | null
+  updatedAt: Date | null
+  reload: () => Promise<void>
+  showStale?: boolean
+}) {
+  return (
+    <div
+      className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground"
+      aria-live="polite"
+    >
+      {loading ? (
+        <span>
+          {data && showStale ? "正在更新，当前显示上次数据…" : "正在加载…"}
+        </span>
+      ) : error ? (
+        <span role="alert" className="text-destructive">
+          {error}
+          {data && showStale ? "，当前显示上次数据" : ""}
+        </span>
+      ) : null}
+      {updatedAt && (showStale || (!loading && !error)) && (
+        <span>更新时间：{format(updatedAt, "yyyy-MM-dd HH:mm:ss")}</span>
+      )}
+      <button
+        type="button"
+        disabled={loading}
+        onClick={() => void reload()}
+        className="underline underline-offset-2 hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed"
+      >
+        {error ? "重试" : "刷新"}
+      </button>
     </div>
   )
 }

src/app/(root)/_navigation/index.tsx

@@ -1,7 +1,6 @@
 "use client"
 import {
   Activity,
-  BarChart3,
   ChevronsLeft,
   ChevronsRight,
   CircleDollarSign,
@@ -252,6 +251,12 @@ const menuSections: { title: string; items: NavItemProps[] }[] = [
         label: "套餐管理",
         requiredScope: ScopeResourceRead,
       },
+      {
+        href: "/resources-new",
+        icon: Package,
+        label: "新套餐管理",
+        requiredScope: ScopeResourceRead,
+      },
       {
         href: "/batch",
         icon: ClipboardList,

src/app/(root)/appbar.tsx

@@ -84,6 +84,7 @@ export default function Appbar(props: { admin: Admin }) {
       gateway: "网关列表",
       couponList: "已发放优惠券",
       new: "新建文章",
+      "resources-new": "新套餐管理",
     }
 
     if (labels[path]) return labels[path]

src/app/(root)/balance/page.tsx

@@ -87,6 +87,20 @@ export default function BalancePage() {
     <Page>
       <form onSubmit={onFilter} className="bg-card p-4 rounded-lg">
         <div className="flex items-end gap-4">
+          <Controller
+            name="created_at_start"
+            control={control}
+            render={({ field, fieldState }) => (
+              <Field
+                data-invalid={fieldState.invalid}
+                className="w-40 flex-none"
+              >
+                <FieldLabel>过期时间</FieldLabel>
+                <Input type="date" {...field} />
+                <FieldError>{fieldState.error?.message}</FieldError>
+              </Field>
+            )}
+          />
           <Controller
             name="phone"
             control={control}
@@ -115,21 +129,8 @@ export default function BalancePage() {
               </Field>
             )}
           />
-          <Controller
-            name="created_at_start"
-            control={control}
-            render={({ field, fieldState }) => (
-              <Field
-                data-invalid={fieldState.invalid}
-                className="w-40 flex-none"
-              >
-                <FieldLabel>开始时间</FieldLabel>
-                <Input type="date" {...field} />
-                <FieldError>{fieldState.error?.message}</FieldError>
-              </Field>
-            )}
-          />
-          <Controller
+
+          {/* <Controller
             name="created_at_end"
             control={control}
             render={({ field, fieldState }) => (
@@ -142,7 +143,7 @@ export default function BalancePage() {
                 <FieldError>{fieldState.error?.message}</FieldError>
               </Field>
             )}
-          />
+          /> */}
 
           <Button type="submit">搜索</Button>
           <Button

src/app/(root)/billing/page.tsx

@@ -80,9 +80,6 @@ type FilterSchema = z.infer<typeof filterSchema>
 
 export default function BillingPage() {
   const searchParams = useSearchParams()
-  const innerNo = searchParams.get("inner_no")
-  const billNo = searchParams.get("bill_no")
-  const resourceNo = searchParams.get("resource_no")
   const [skuOptions, setSkuOptions] = useState<SkuOption[]>([])
   const [loading, setLoading] = useState(true)
   const [skuProductCode, setSkuProductCode] = useState<ProductCode>(
@@ -90,19 +87,37 @@ export default function BillingPage() {
   )
   const router = useRouter()
 
-  const { control, handleSubmit, reset, getValues } = useForm<FilterSchema>({
-    resolver: zodResolver(filterSchema),
-    defaultValues: {
-      bill_no: billNo || "",
-      inner_no: innerNo || "",
-      created_at_start: "",
-      created_at_end: "",
-      phone: "",
-      resource_no: resourceNo || "",
-      sku_code: "all",
-      product_code: "",
-    },
-  })
+  const { control, handleSubmit, reset, getValues, setValue } =
+    useForm<FilterSchema>({
+      resolver: zodResolver(filterSchema),
+      defaultValues: {
+        bill_no: searchParams.get("bill_no") || "",
+        inner_no: searchParams.get("inner_no") || "",
+        created_at_start: "",
+        created_at_end: "",
+        phone: "",
+        resource_no: searchParams.get("resource_no") || "",
+        sku_code: "all",
+        product_code: "",
+      },
+    })
+
+  useEffect(() => {
+    const params = {
+      resource_no: searchParams.get("resource_no"),
+      bill_no: searchParams.get("bill_no"),
+      inner_no: searchParams.get("inner_no"),
+    }
+    if (params.resource_no !== getValues("resource_no")) {
+      setValue("resource_no", params.resource_no || "")
+    }
+    if (params.bill_no !== getValues("bill_no")) {
+      setValue("bill_no", params.bill_no || "")
+    }
+    if (params.inner_no !== getValues("inner_no")) {
+      setValue("inner_no", params.inner_no || "")
+    }
+  }, [searchParams, setValue, getValues])
 
   useEffect(() => {
     setLoading(true)

src/app/(root)/channel/page.tsx

@@ -118,6 +118,7 @@ export default function ChannelPage() {
   const onFilter = handleSubmit(() => {
     table.pagination.onPageChange(1)
   })
+  console.log(table, "table")
 
   return (
     <Page>
@@ -291,56 +292,63 @@ export default function ChannelPage() {
               accessorFn: row => row.user?.phone || "-",
             },
             {
-              header: "套餐号",
+              header: "套餐号/提取编号",
               accessorKey: "resource.resource_no",
               cell: ({ row }) => {
                 const resource_no = row.original.resource?.resource_no
+                const batchNo = row.original.batch_no
                 const type = row.original.resource?.type
                 return (
-                  <Link
-                    href={`./resources?resource_no=${resource_no}&type=${type}`}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="text-blue-600"
-                  >
-                    {resource_no}
-                  </Link>
+                  <div className="flex flex-col font-mono text-xs">
+                    <span>
+                      套餐号&ensp;&ensp;：
+                      <Link
+                        href={`./resources?resource_no=${resource_no}&type=${type}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-blue-600"
+                      >
+                        {resource_no}
+                      </Link>
+                    </span>
+                    <span>
+                      提取编号：
+                      <Link
+                        href={`./batch?batch_no=${batchNo}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-blue-600"
+                      >
+                        {batchNo}
+                      </Link>
+                    </span>
+                  </div>
                 )
               },
             },
             {
-              header: "提取编号",
-              accessorKey: "batch_no",
+              header: "网关",
+              accessorKey: "host",
               cell: ({ row }) => {
-                const batchNo = row.original.batch_no
                 return (
-                  <Link
-                    href={`./batch?batch_no=${batchNo}`}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="text-blue-600"
-                  >
-                    {batchNo}
-                  </Link>
+                  <span>
+                    {row.original.host}:{row.original.port}
+                  </span>
                 )
               },
             },
             {
               header: "节点",
-              accessorFn: row => row.ip || row.edge_ref || row.edge_id,
+              accessorFn: row => row.edge_ref || row.ip || row.edge_id,
             },
             {
-              header: "自动配置",
+              header: "地区",
               cell: ({ row }) => {
                 const prov = row.original.filter_prov
                 const city = row.original.filter_city
-                const isp = row.original.filter_isp
                 const parts = []
                 if (prov && prov !== "all") parts.push(prov)
                 if (city && city !== "all") parts.push(city)
-                if (isp && isp !== "all") {
-                  parts.push(ispMap[Number(isp)] || isp)
-                }
                 return (
                   <div className="text-sm">
                     {parts.length > 0 ? parts.join(" / ") : "不限"}
@@ -349,14 +357,11 @@ export default function ChannelPage() {
               },
             },
             {
-              header: "网关地址",
-              accessorKey: "host",
+              header: "运营商",
+              // accessorFn: row => row.filter_isp || "",
               cell: ({ row }) => {
-                return (
-                  <span>
-                    {row.original.host}:{row.original.port}
-                  </span>
-                )
+                const isp = row.original.filter_isp
+                return ispMap[Number(isp)] || isp
               },
             },
             {

src/app/(root)/cust/deduction.tsx

@@ -18,6 +18,7 @@ import {
 } from "@/components/ui/dialog"
 import { Field, FieldError, FieldLabel } from "@/components/ui/field"
 import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
 import type { User } from "@/models/user"
 
 const Schema = z.object({
@@ -26,6 +27,7 @@ const Schema = z.object({
     .min(1, "请输入扣款金额")
     .refine(val => !Number.isNaN(Number(val)), "请输入有效的数字")
     .refine(val => Number(val) >= 0, "金额不能为负数"),
+  remark: z.string().min(1, "请输入操作说明"),
 })
 
 type FormValues = z.infer<typeof Schema>
@@ -52,6 +54,7 @@ export function DeductionDialog({
     resolver: zodResolver(Schema),
     defaultValues: {
       deduction: "",
+      remark: "",
     },
   })
 
@@ -61,6 +64,7 @@ export function DeductionDialog({
       const result = await getDeduction({
         user_id: user.id,
         amount: data.deduction,
+        remark: data.remark,
       })
 
       if (result.success) {
@@ -123,6 +127,15 @@ export function DeductionDialog({
               />
               <FieldError>{errors.deduction?.message}</FieldError>
             </Field>
+            <Field data-invalid={!!errors.remark}>
+              <FieldLabel>操作说明</FieldLabel>
+              <Textarea
+                placeholder="请输入操作说明（必填）"
+                {...register("remark")}
+                rows={3}
+              />
+              <FieldError>{errors.remark?.message}</FieldError>
+            </Field>
           </div>
 
           <DialogFooter>

src/app/(root)/cust/deposit.tsx

@@ -18,6 +18,7 @@ import {
 } from "@/components/ui/dialog"
 import { Field, FieldError, FieldLabel } from "@/components/ui/field"
 import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
 import type { User } from "@/models/user"
 
 const Schema = z.object({
@@ -26,6 +27,7 @@ const Schema = z.object({
     .min(1, "请输入余额")
     .refine(val => !Number.isNaN(Number(val)), "请输入有效的数字")
     .refine(val => Number(val) >= 0, "余额不能为负数"),
+  remark: z.string().min(1, "请输入操作说明"),
 })
 
 type FormValues = z.infer<typeof Schema>
@@ -49,6 +51,7 @@ export function DepositDialog({ user, onSuccess }: UpdateDepositDialogProps) {
     resolver: zodResolver(Schema),
     defaultValues: {
       deposit: "",
+      remark: "",
     },
   })
 
@@ -58,6 +61,7 @@ export function DepositDialog({ user, onSuccess }: UpdateDepositDialogProps) {
       const result = await getDeposit({
         user_id: user.id,
         amount: data.deposit,
+        remark: data.remark,
       })
 
       if (result.success) {
@@ -120,6 +124,15 @@ export function DepositDialog({ user, onSuccess }: UpdateDepositDialogProps) {
               />
               <FieldError>{errors.deposit?.message}</FieldError>
             </Field>
+            <Field data-invalid={!!errors.remark}>
+              <FieldLabel>操作说明</FieldLabel>
+              <Textarea
+                placeholder="请输入操作说明（必填）"
+                {...register("remark")}
+                rows={3}
+              />
+              <FieldError>{errors.remark?.message}</FieldError>
+            </Field>
           </div>
 
           <DialogFooter>

src/app/(root)/gateway/page.tsx

@@ -3,11 +3,23 @@
 import { format } from "date-fns"
 import { Suspense, useCallback, useState } from "react"
 import { toast } from "sonner"
-import { clear, getGatewayPage, updateGateway } from "@/actions/gateway"
+import {
+  clear,
+  createProxyChains,
+  createProxyPort,
+  getGatewayPage,
+  updateGateway,
+} from "@/actions/gateway"
 import { Auth } from "@/components/auth"
 import { DataTable, useDataTable } from "@/components/data-table"
 import { Page } from "@/components/page"
 import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
 import { ScopeChannelWriteClearExpired, ScopeProxyWrite } from "@/lib/scopes"
 import type { Gateway } from "@/models/gateway"
 import CreatePage from "./create"
@@ -64,6 +76,46 @@ export default function GatewayPage() {
     }
   }
 
+  const createPort = async (val: Gateway) => {
+    setLoading(true)
+    try {
+      const result = await createProxyPort({
+        id: val.id,
+      })
+
+      if (result.success) {
+        toast.success(`重建端口池成功！`)
+      } else {
+        toast.error(result.message || "请稍后重试一下~")
+      }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : error
+      toast.error(`清理过期连接失败: ${message}`)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const createChains = async (val: Gateway) => {
+    setLoading(true)
+    try {
+      const result = await createProxyChains({
+        id: val.id,
+      })
+
+      if (result.success) {
+        toast.success(`重建代理链成功！！！`)
+      } else {
+        toast.error(result.message || "请稍后重试一下~")
+      }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : error
+      toast.error(`清理过期连接失败: ${message}`)
+    } finally {
+      setLoading(false)
+    }
+  }
+
   return (
     <Page>
       <div className="flex justify-between items-stretch">
@@ -122,26 +174,52 @@ export default function GatewayPage() {
               id: "action",
               meta: { pin: "right" },
               header: "操作",
-              cell: ({ row }) => (
-                <div className="flex gap-2">
-                  <Button
-                    onClick={() =>
-                      handleToggle(row.original.id, row.original.status)
-                    }
-                    disabled={loading}
-                    variant={
-                      row.original.status === 0 ? "default" : "destructive"
-                    }
-                  >
-                    {row.original.status === 0 ? "启用" : "停用"}
-                  </Button>
-                  <Auth scope={ScopeChannelWriteClearExpired}>
-                    <Button onClick={() => clearExpired(row.original)}>
-                      清理过期连接
+              cell: ({ row }) => {
+                return (
+                  <div className="flex gap-2 ">
+                    <Button
+                      onClick={() =>
+                        handleToggle(row.original.id, row.original.status)
+                      }
+                      disabled={loading}
+                      variant={
+                        row.original.status === 0 ? "default" : "destructive"
+                      }
+                      size="sm"
+                    >
+                      {row.original.status === 0 ? "启用" : "停用"}
                     </Button>
-                  </Auth>
-                </div>
-              ),
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button size="sm" variant="outline">
+                          打开菜单
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end" className="w-8">
+                        <Auth scope={ScopeChannelWriteClearExpired}>
+                          <DropdownMenuItem
+                            onClick={() => clearExpired(row.original)}
+                          >
+                            清理过期连接
+                          </DropdownMenuItem>
+                        </Auth>
+                        <Auth scope={ScopeProxyWrite}>
+                          <DropdownMenuItem
+                            onClick={() => createPort(row.original)}
+                          >
+                            重建端口池
+                          </DropdownMenuItem>
+                          <DropdownMenuItem
+                            onClick={() => createChains(row.original)}
+                          >
+                            重建代理链
+                          </DropdownMenuItem>
+                        </Auth>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </div>
+                )
+              },
             },
           ]}
         />

src/app/(root)/resources-new/page.tsx

@@ -0,0 +1,630 @@
+"use client"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { format, isBefore, isSameDay } from "date-fns"
+import { Box, Loader2, Timer } from "lucide-react"
+import { useRouter, useSearchParams } from "next/navigation"
+import { Suspense, useCallback, useMemo, useState } from "react"
+import { Controller, useForm } from "react-hook-form"
+import { toast } from "sonner"
+import { z } from "zod"
+import { listResource, updateResource } from "@/actions/resources"
+import { DataTable, useDataTable } from "@/components/data-table"
+import { Page } from "@/components/page"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field"
+import { Input } from "@/components/ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import type { Resources } from "@/models/resources"
+
+const filterSchema = z
+  .object({
+    user_phone: z.string().optional(),
+    resource_no: z.string().optional(),
+    status: z.string().optional(),
+    type: z.string().optional(),
+    created_at_start: z.string().optional(),
+    created_at_end: z.string().optional(),
+    expired: z.string().optional(),
+    resource_type: z.string().optional(),
+  })
+  .superRefine((data, ctx) => {
+    if (data.created_at_start && data.created_at_end) {
+      const start = new Date(data.created_at_start)
+      const end = new Date(data.created_at_end)
+
+      if (end < start) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "结束时间不能早于开始时间",
+          path: ["created_at_end"],
+        })
+      }
+    }
+  })
+
+type FormValues = z.infer<typeof filterSchema>
+
+interface FilterParams {
+  user_phone?: string
+  resource_no?: string
+  active?: boolean
+  mode?: number
+  created_at_start?: Date
+  created_at_end?: Date
+  expired?: boolean
+  resource_type?: number
+}
+
+// 获取资源类型
+function getResourceType(resource: Resources): number {
+  if ("short" in resource && resource.short) {
+    return resource.short.type
+  }
+  if ("long" in resource && resource.long) {
+    return resource.long.type
+  }
+  return resource.type
+}
+
+// 获取资源详情对象
+function getResourceDetail(resource: Resources) {
+  if ("short" in resource && resource.short) {
+    return resource.short
+  }
+  if ("long" in resource && resource.long) {
+    return resource.long
+  }
+  return null
+}
+
+// 获取过期时间
+function getExpireAt(resource: Resources): Date | null | undefined {
+  if ("short" in resource && resource.short) {
+    return resource.short.expire_at
+  }
+  if ("long" in resource && resource.long) {
+    return resource.long.expire_at
+  }
+  return undefined
+}
+
+function getName(resource: Resources): string | null | undefined {
+  if ("short" in resource && resource.short) {
+    return resource.short.sku?.name
+  }
+  if ("long" in resource && resource.long) {
+    return resource.long.sku?.name
+  }
+  return undefined
+}
+
+// 获取最近使用时间
+function getLastAt(resource: Resources): Date | null | undefined {
+  if ("short" in resource && resource.short) {
+    return resource.short.last_at
+  }
+  if ("long" in resource && resource.long) {
+    return resource.long.last_at
+  }
+  return undefined
+}
+
+// 资源类型徽章
+function ResourceTypeBadge({ resource }: { resource: Resources }) {
+  const type = getResourceType(resource)
+  if (type === 1) {
+    return (
+      <div className="flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md">
+        <Timer size={20} />
+        <span>包时</span>
+      </div>
+    )
+  }
+  if (type === 2) {
+    return (
+      <div className="flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md">
+        <Box size={20} />
+        <span>包量</span>
+      </div>
+    )
+  }
+  return null
+}
+
+// 过期徽章
+function ExpireBadge({ expireAt }: { expireAt: Date | null | undefined }) {
+  if (!expireAt) return null
+  if (isBefore(expireAt, new Date())) {
+    return <Badge variant="destructive">过期</Badge>
+  }
+  return null
+}
+
+// 格式化日期
+function formatDateTime(date: Date | null | undefined) {
+  if (!date) return ""
+  return format(date, "yyyy-MM-dd HH:mm:ss")
+}
+
+// 计算今日使用量
+function getTodayUsage(lastAt: Date | null | undefined, daily: number) {
+  if (lastAt && isSameDay(lastAt, new Date())) {
+    return daily
+  }
+  return 0
+}
+
+export default function ResourcesPage() {
+  return (
+    <Page>
+      <ResourceList />
+    </Page>
+  )
+}
+
+function ResourceList() {
+  const searchParams = useSearchParams()
+  const resourceNo = searchParams.get("resource_no")
+  const listFn = listResource
+  const [updatingId, setUpdatingId] = useState<number | null>(null)
+  const router = useRouter()
+  const { control, handleSubmit, reset, getValues } = useForm<FormValues>({
+    resolver: zodResolver(filterSchema),
+    defaultValues: {
+      user_phone: "",
+      resource_no: resourceNo || "",
+      status: "all",
+      type: "all",
+      created_at_start: "",
+      created_at_end: "",
+      expired: "all",
+      resource_type: "all",
+    },
+  })
+
+  const fetchResources = useCallback(
+    (page: number, size: number) => {
+      const result: FilterParams = {}
+      const filters = getValues()
+      if (filters.user_phone?.trim())
+        result.user_phone = filters.user_phone.trim()
+      if (filters.resource_no?.trim())
+        result.resource_no = filters.resource_no.trim()
+      if (filters.status && filters.status !== "all") {
+        result.active = filters.status === "0"
+      }
+      if (filters.type && filters.type !== "all") {
+        result.mode = Number(filters.type)
+      }
+      if (filters.resource_type && filters.resource_type !== "all") {
+        result.resource_type = Number(filters.resource_type)
+      }
+      if (filters.expired && filters.expired !== "all") {
+        result.expired = filters.expired === "1"
+      }
+      if (filters.created_at_start)
+        result.created_at_start = new Date(filters.created_at_start)
+      if (filters.created_at_end)
+        result.created_at_end = new Date(filters.created_at_end)
+      return listFn({ page, size, ...result })
+    },
+    [listFn, getValues],
+  )
+
+  const table = useDataTable<Resources>(fetchResources)
+
+  const handleStatusChange = useCallback(
+    async (resource: Resources, newStatusValue: string) => {
+      const newActive = newStatusValue === "0"
+      if (newActive === resource.active) return
+      setUpdatingId(resource.id)
+      try {
+        await updateResource({
+          id: resource.id,
+          active: newActive,
+        })
+        toast.success("更新成功", {
+          description: `资源状态已更新为${newActive ? "启用" : "禁用"}`,
+        })
+        table.refresh()
+      } catch (error) {
+        console.error("更新状态失败:", error)
+        toast.error("更新失败", {
+          description: error instanceof Error ? error.message : "请稍后重试",
+        })
+      } finally {
+        setUpdatingId(null)
+      }
+    },
+    [table],
+  )
+  const handleCheckipChange = useCallback(
+    async (resource: Resources) => {
+      const newCheckip = !resource.checkip
+      setUpdatingId(resource.id)
+      try {
+        await updateResource({
+          id: resource.id,
+          checkip: newCheckip,
+        })
+        toast.success("更新成功", {
+          description: `IP检查已${newCheckip ? "启用IP检查" : "停用IP检查"}`,
+        })
+        table.refresh()
+      } catch (error) {
+        console.error("更新IP检查状态失败:", error)
+        toast.error("更新失败", {
+          description: error instanceof Error ? error.message : "请稍后重试",
+        })
+      } finally {
+        setUpdatingId(null)
+      }
+    },
+    [table],
+  )
+  const onFilter = handleSubmit(() => {
+    table.pagination.onPageChange(1)
+  })
+
+  const columns = useMemo(
+    () => [
+      {
+        header: "会员号",
+        accessorFn: (row: Resources) => row.user?.phone || "",
+      },
+      {
+        header: "套餐",
+        cell: ({ row }: { row: { original: Resources } }) => {
+          const resourceNo = row.original.resource_no
+          const name = getName(row.original)
+          const expireAt = getExpireAt(row.original)
+          return (
+            <div className="flex flex-col gap-1">
+              <div>{name}</div>
+              <div className="flex items-center gap-2">
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <span className="text-xs text-gray-500">{resourceNo}</span>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end" className="w-40">
+                    <DropdownMenuItem
+                      onClick={() => {
+                        router.push(`/billing?resource_no=${resourceNo}`)
+                      }}
+                    >
+                      账单详情
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      onClick={() => {
+                        router.push(`/batch?resource_no=${resourceNo}`)
+                      }}
+                    >
+                      提取记录
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      onClick={() => {
+                        router.push(`/channel?resource_no=${resourceNo}`)
+                      }}
+                    >
+                      IP管理
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+                <ExpireBadge expireAt={expireAt} />
+              </div>
+            </div>
+          )
+        },
+      },
+      {
+        header: "产品",
+        cell: ({ row }: { row: { original: Resources } }) => {
+          const isLong = row.original.code === "long"
+          return <span>{isLong ? "长效" : "短效"}</span>
+        },
+      },
+      {
+        header: "类型",
+        cell: ({ row }: { row: { original: Resources } }) => {
+          return <ResourceTypeBadge resource={row.original} />
+        },
+      },
+      {
+        header: "IP时效",
+        cell: ({ row }: { row: { original: Resources } }) => {
+          const detail = getResourceDetail(row.original)
+          const live = detail?.live
+          if (live === undefined) return "-"
+          return <span>{`${live}分钟`}</span>
+        },
+      },
+      {
+        header: "使用情况",
+        cell: ({ row }: { row: { original: Resources } }) => {
+          const detail = getResourceDetail(row.original)
+          const type = getResourceType(row.original)
+
+          if (!detail) return <span>-</span>
+
+          if (type === 1) {
+            // 包时
+            const todayUsage = getTodayUsage(detail.last_at, detail.daily || 0)
+            return (
+              <div className="flex gap-1">
+                <span>
+                  {todayUsage}/{detail.quota}
+                </span>
+              </div>
+            )
+          } else {
+            return (
+              <div className="flex gap-1">
+                {detail.used < detail.quota ? (
+                  <span className="text-green-500">正常</span>
+                ) : (
+                  <span className="text-red-500">已用完</span>
+                )}
+                <span>|</span>
+                <span>
+                  {detail.used}/{detail.quota}
+                </span>
+              </div>
+            )
+          }
+        },
+      },
+      {
+        header: "最近使用时间",
+        cell: ({ row }: { row: { original: Resources } }) => {
+          const lastAt = getLastAt(row.original)
+          return lastAt ? formatDateTime(lastAt) : "暂未使用"
+        },
+      },
+      {
+        header: "开通时间",
+        cell: ({ row }: { row: { original: Resources } }) => {
+          return formatDateTime(row.original.created_at)
+        },
+      },
+      {
+        header: "到期时间",
+        cell: ({ row }: { row: { original: Resources } }) => {
+          return formatDateTime(getExpireAt(row.original))
+        },
+      },
+      {
+        id: "action",
+        meta: { pin: "right" },
+        header: "操作",
+        cell: ({ row }: { row: { original: Resources } }) => {
+          const resource = row.original
+          const isLoading = updatingId === resource.id
+          const currentActive = resource.active
+          return (
+            <div className="flex items-center gap-2">
+              <Select
+                value={currentActive ? "0" : "1"}
+                onValueChange={val => handleStatusChange(resource, val)}
+                disabled={isLoading}
+              >
+                <SelectTrigger className="min-w-20">
+                  <SelectValue placeholder="状态" />
+                </SelectTrigger>
+                <SelectContent className="min-w-(--radix-select-trigger-width)">
+                  <SelectItem value="0">启用</SelectItem>
+                  <SelectItem value="1">禁用</SelectItem>
+                </SelectContent>
+              </Select>
+              {isLoading && (
+                <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+              )}
+              <Button
+                onClick={() => handleCheckipChange(resource)}
+                variant={resource.checkip ? "destructive" : "default"}
+                disabled={isLoading}
+              >
+                {resource.checkip ? "停用IP检查" : "启用IP检查"}
+              </Button>
+            </div>
+          )
+        },
+      },
+    ],
+    [updatingId, handleStatusChange, handleCheckipChange, router],
+  )
+
+  return (
+    <div className="flex flex-col gap-3 overflow-hidden">
+      <form onSubmit={onFilter} className="bg-card p-4 rounded-lg flex-none">
+        <div className="flex flex-wrap items-end gap-4">
+          <Controller
+            name="user_phone"
+            control={control}
+            render={({ field, fieldState }) => (
+              <Field
+                data-invalid={fieldState.invalid}
+                className="w-40 flex-none"
+              >
+                <FieldLabel>会员号</FieldLabel>
+                <Input {...field} placeholder="请输入会员号" clearable />
+                <FieldError>{fieldState.error?.message}</FieldError>
+              </Field>
+            )}
+          />
+          <Controller
+            name="resource_no"
+            control={control}
+            render={({ field, fieldState }) => (
+              <Field
+                data-invalid={fieldState.invalid}
+                className="w-40 flex-none"
+              >
+                <FieldLabel>套餐号</FieldLabel>
+                <Input {...field} placeholder="请输入套餐号" clearable />
+                <FieldError>{fieldState.error?.message}</FieldError>
+              </Field>
+            )}
+          />
+          <Controller
+            name="resource_type"
+            control={control}
+            render={({ field, fieldState }) => (
+              <Field data-invalid={fieldState.invalid} className="w-32">
+                <FieldLabel>产品</FieldLabel>
+                <Select value={field.value} onValueChange={field.onChange}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="全部" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">全部</SelectItem>
+                    <SelectItem value="1">短效</SelectItem>
+                    <SelectItem value="2">长效</SelectItem>
+                  </SelectContent>
+                </Select>
+                <FieldError>{fieldState.error?.message}</FieldError>
+              </Field>
+            )}
+          />
+          <Controller
+            name="type"
+            control={control}
+            render={({ field, fieldState }) => (
+              <Field data-invalid={fieldState.invalid} className="w-32">
+                <FieldLabel>类型</FieldLabel>
+                <Select value={field.value} onValueChange={field.onChange}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="全部" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">全部</SelectItem>
+                    <SelectItem value="1">包时</SelectItem>
+                    <SelectItem value="2">包量</SelectItem>
+                  </SelectContent>
+                </Select>
+                <FieldError>{fieldState.error?.message}</FieldError>
+              </Field>
+            )}
+          />
+          <Controller
+            name="status"
+            control={control}
+            render={({ field, fieldState }) => (
+              <Field data-invalid={fieldState.invalid} className="w-32">
+                <FieldLabel>状态</FieldLabel>
+                <Select value={field.value} onValueChange={field.onChange}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="全部" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">全部</SelectItem>
+                    <SelectItem value="0">启用</SelectItem>
+                    <SelectItem value="1">禁用</SelectItem>
+                  </SelectContent>
+                </Select>
+                <FieldError>{fieldState.error?.message}</FieldError>
+              </Field>
+            )}
+          />
+          <Controller
+            name="expired"
+            control={control}
+            render={({ field, fieldState }) => (
+              <Field data-invalid={fieldState.invalid} className="w-32">
+                <FieldLabel>是否过期</FieldLabel>
+                <Select value={field.value} onValueChange={field.onChange}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="全部" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">全部</SelectItem>
+                    <SelectItem value="0">未过期</SelectItem>
+                    <SelectItem value="1">已过期</SelectItem>
+                  </SelectContent>
+                </Select>
+                <FieldError>{fieldState.error?.message}</FieldError>
+              </Field>
+            )}
+          />
+          <Controller
+            name="created_at_start"
+            control={control}
+            render={({ field, fieldState }) => (
+              <Field
+                data-invalid={fieldState.invalid}
+                className="w-40 flex-none"
+              >
+                <FieldLabel>开始时间</FieldLabel>
+                <Input type="date" {...field} clearable />
+                <FieldError>{fieldState.error?.message}</FieldError>
+              </Field>
+            )}
+          />
+          <Controller
+            name="created_at_end"
+            control={control}
+            render={({ field, fieldState }) => (
+              <Field
+                data-invalid={fieldState.invalid}
+                className="w-40 flex-none"
+              >
+                <FieldLabel>结束时间</FieldLabel>
+                <Input type="date" {...field} clearable />
+                <FieldError>{fieldState.error?.message}</FieldError>
+              </Field>
+            )}
+          />
+        </div>
+        <FieldGroup className="flex-row justify-start mt-4 gap-2">
+          <Button type="submit">搜索</Button>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => {
+              router.replace("./resources")
+              reset({
+                user_phone: "",
+                resource_no: "",
+                status: "all",
+                type: "all",
+                created_at_start: "",
+                created_at_end: "",
+                expired: "all",
+              })
+              table.pagination.onPageChange(1)
+            }}
+          >
+            重置
+          </Button>
+        </FieldGroup>
+      </form>
+
+      <Suspense fallback={<div className="text-center p-4">加载中...</div>}>
+        <DataTable<Resources>
+          {...table}
+          columns={columns}
+          classNames={{
+            root: "flex-auto overflow-hidden",
+          }}
+        />
+      </Suspense>
+    </div>
+  )
+}

src/app/(root)/resources/page.tsx

@@ -209,7 +209,10 @@ export default function ResourcesPage() {
         >
           <ResourceList resourceType="short" />
         </TabsContent>
-        <TabsContent value="long" className="flex flex-col gap-4">
+        <TabsContent
+          value="long"
+          className="flex flex-col gap-4 overflow-hidden"
+        >
           <ResourceList resourceType="long" />
         </TabsContent>
       </Tabs>
@@ -268,7 +271,6 @@ function ResourceList({ resourceType }: ResourceListProps) {
   )
 
   const table = useDataTable<Resources>(fetchResources)
-  console.log(table, "table")
 
   const handleStatusChange = useCallback(
     async (resource: Resources, newStatusValue: string) => {

src/app/(root)/trade/page.tsx

@@ -1,15 +1,32 @@
 "use client"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { format } from "date-fns"
-import { CheckCircle, Clock, XCircle } from "lucide-react"
+import { CheckCircle, Clock, Loader2, XCircle } from "lucide-react"
 import Link from "next/link"
 import { Suspense, useCallback, useState } from "react"
 import { Controller, useForm } from "react-hook-form"
+import { toast } from "sonner"
 import { z } from "zod"
-import { getPageTrade } from "@/actions/trade"
+import {
+  getPageTrade,
+  getTradeCheckk,
+  tradeCancel,
+  tradeComplete,
+  tradeConvert,
+  updateTradeRemark,
+} from "@/actions/trade"
 import { DataTable, useDataTable } from "@/components/data-table"
 import { Page } from "@/components/page"
 import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
 import { Field, FieldError, FieldLabel } from "@/components/ui/field"
 import { Input } from "@/components/ui/input"
 import {
@@ -294,6 +311,21 @@ export default function TradePage() {
                 )
               },
             },
+            {
+              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>￥{amount.toFixed(2)}</span>
+                  </div>
+                )
+              },
+            },
             {
               header: "支付状态",
               accessorKey: "status",
@@ -365,9 +397,261 @@ export default function TradePage() {
               },
             },
             { header: "渠道订单号", accessorKey: "outer_no" },
+            {
+              header: "备注信息",
+              accessorKey: "remark",
+            },
+            {
+              header: "操作",
+              id: "actions",
+              meta: { pin: "right" },
+              cell: ({ row }) => (
+                <div className="flex gap-2">
+                  {row.original.status === 0 && (
+                    <CheckOrder
+                      trade={row.original}
+                      onSuccess={table.refresh}
+                    />
+                  )}
+                  <UpdateRole trade={row.original} onSuccess={table.refresh} />
+                </div>
+              ),
+            },
           ]}
         />
       </Suspense>
     </Page>
   )
 }
+type PayCloseData = {
+  Status: 0 | 1 | 2
+  TransId?: string
+}
+function CheckOrder(props: { trade: Trade; onSuccess: () => void }) {
+  const [open, setOpen] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [data, setData] = useState<PayCloseData | null>(null)
+
+  const handleCheck = useCallback(async () => {
+    setLoading(true)
+    try {
+      const res = await getTradeCheckk({
+        trade_no: props.trade.inner_no,
+        method: Number(props.trade.method),
+      })
+
+      if (res.success) {
+        setData(res.data)
+      } else {
+        toast.error(res.message)
+      }
+      setOpen(true)
+    } catch (error) {
+      const message = error instanceof Error ? error.message : error
+      toast.error(`检查失败，请重试: ${message}`)
+    } finally {
+      setLoading(false)
+    }
+  }, [props])
+
+  const headerClick = useCallback(async () => {
+    setLoading(true)
+    try {
+      const result = await tradeComplete({
+        trade_no: props.trade.inner_no,
+        method: Number(props.trade.method),
+        user_id: Number(props.trade.user_id),
+      })
+
+      if (result.success) {
+        toast.success("订单已完成")
+        props.onSuccess?.()
+      } else {
+        toast.error(result.message)
+      }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : error
+      toast.error(`检查失败，请重试: ${message}`)
+    } finally {
+      setLoading(false)
+    }
+  }, [props])
+
+  const convert = useCallback(async () => {
+    setLoading(true)
+    try {
+      const result = await tradeConvert({
+        trade_no: props.trade.inner_no,
+        method: Number(props.trade.method),
+        user_id: Number(props.trade.user_id),
+      })
+
+      if (result.success) {
+        toast.success("补到余额完成")
+        props.onSuccess?.()
+      } else {
+        toast.error(result.message)
+      }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : error
+      toast.error(`补到余额失败，请重试: ${message}`)
+    } finally {
+      setLoading(false)
+    }
+  }, [props])
+
+  const cancel = useCallback(async () => {
+    setLoading(true)
+    try {
+      const result = await tradeCancel({
+        trade_no: props.trade.inner_no,
+        method: Number(props.trade.method),
+        user_id: Number(props.trade.user_id),
+      })
+
+      if (result.success) {
+        toast.success("取消订单完成")
+        props.onSuccess?.()
+      } else {
+        toast.error(result.message)
+      }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : error
+      toast.error(`取消订单失败，请重试: ${message}`)
+    } finally {
+      setLoading(false)
+    }
+  }, [props])
+
+  return (
+    <>
+      <Button size="sm" onClick={handleCheck} disabled={loading}>
+        {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : "检查订单"}
+      </Button>
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>订单检查结果</DialogTitle>
+          </DialogHeader>
+
+          {data && (
+            <div className="py-4">
+              <div
+                className={`p-4 rounded-lg ${data.Status === 1 ? "bg-green-100" : "bg-red-100"}`}
+              >
+                <p className="font-medium">创建时间：{data?.TransId}</p>
+                <p className="mt-2">
+                  支付状态：
+                  {data?.Status === 1
+                    ? "已支付"
+                    : data?.Status === 0
+                      ? "未支付"
+                      : "已取消"}
+                </p>
+              </div>
+            </div>
+          )}
+          {data && data?.Status === 1 && (
+            <div className="flex gap-4 items-center justify-center">
+              <Button size="sm" className="w-32" onClick={headerClick}>
+                完成订单
+              </Button>
+              <Button size="sm" className="w-32" onClick={convert}>
+                补到余额
+              </Button>
+            </div>
+          )}
+          {data && data?.Status === 0 && (
+            <Button size="sm" className="w-32" onClick={cancel}>
+              取消订单
+            </Button>
+          )}
+
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button variant="outline">关闭</Button>
+            </DialogClose>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
+
+function UpdateRole(props: { trade: Trade; onSuccess?: () => void }) {
+  const [open, setOpen] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const { register, handleSubmit, reset } = useForm<{
+    remark: string
+  }>({
+    defaultValues: { remark: "" },
+  })
+  const handleOpenChange = (isOpen: boolean) => {
+    setOpen(isOpen)
+    if (isOpen) {
+      reset({ remark: props.trade.remark ?? "" })
+    }
+  }
+
+  const submitEditRemark = async (data: { remark: string }) => {
+    try {
+      setLoading(true)
+      const response = await updateTradeRemark({
+        trade_no: props.trade.inner_no || "",
+        remark: data.remark,
+      })
+
+      if (!response.success) {
+        throw new Error(response.message)
+      }
+      toast.success("备注修改成功")
+      setOpen(false)
+      props.onSuccess?.()
+    } catch (error) {
+      toast.error(
+        `修改备注失败：${error instanceof Error ? error.message : String(error)}`,
+      )
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogTrigger asChild>
+        <Button size="sm">修改备注</Button>
+      </DialogTrigger>
+
+      <DialogContent>
+        <form onSubmit={handleSubmit(submitEditRemark)} id="edit-remark-form">
+          <DialogHeader>
+            <DialogTitle>修改备注</DialogTitle>
+          </DialogHeader>
+
+          <div className="py-4">
+            <Field className="flex flex-col gap-1">
+              <FieldLabel>备注信息</FieldLabel>
+              <Input
+                {...register("remark")}
+                placeholder="请输入备注信息"
+                clearable
+              />
+            </Field>
+          </div>
+
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button variant="ghost" disabled={loading}>
+                取消
+              </Button>
+            </DialogClose>
+            <Button type="submit" form="edit-remark-form" disabled={loading}>
+              {loading ? "保存中..." : "保存"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}

src/components/charts/SimpleBarChart.tsx

@@ -93,8 +93,8 @@ export function SimpleBarChart({
         className="w-full h-full"
         preserveAspectRatio="xMidYMid meet"
       >
-        {yLabels.map(yl => (
-          <g key={yl.label}>
+        {yLabels.map((yl, i) => (
+          <g key={i}>
             <line
               x1={padding.left}
               y1={yl.y}

src/components/charts/SimpleLineChart.tsx

@@ -100,8 +100,8 @@ export function SimpleLineChart({
           </linearGradient>
         </defs>
 
-        {yLabels.map(yl => (
-          <g key={yl.label}>
+        {yLabels.map((yl, i) => (
+          <g key={i}>
             <line
               x1={padding.left}
               y1={yl.y}

src/models/dashboard.ts

@@ -0,0 +1,20 @@
+export type DashboardOverview = {
+  active_channel_count: number
+  pending_customer_count: number
+  today_extract_count: number
+  today_new_customer_count: number
+  today_trade_amount: string
+}
+
+export type DashboardTrendItem = {
+  date: string
+  active_channel_count: number
+  trade_amount: string
+  new_customer_count: number
+  extract_count: number
+}
+
+export type DashboardExtractable = {
+  short: number
+  long: number
+}

src/models/resources.ts

@@ -11,6 +11,7 @@ type ResourceBase = {
   deleted_at: Date | null
   user: User
   checkip: boolean
+  code: string
 }
 
 type ResourceShort = {

src/models/trade.ts

@@ -15,4 +15,6 @@ export type Trade = {
   canceled_at: Date
   updated_at: Date
   user?: User
+  remark: string
+  amount: string
 }