修复提取IP表格字段和页面展示 & 前端设置白名单添加数量限制 & 修复长效套餐购买数量和提取数量默认值和递增减

src/app/admin/channels/page.tsx

@@ -155,34 +155,52 @@ export default function ChannelsPage(props: ChannelsPageProps) {
         }}
         columns={[
           {
-            header: '代理地址', cell: ({row}) => `${row.original.proxy_host}:${row.original.proxy_port}`,
+            header: '代理地址', cell: ({row}) => {
+              const channel = row.original
+              const ip = channel.proxy?.ip
+              const port = channel.port
+              return `${ip}:${port}`
+            },
           },
           {
-            header: '认证方式', cell: ({row}) => {
+            header: '认证方式',
+            cell: ({row}) => {
+              const channel = row.original
+              const hasWhitelist = channel.whitelists && channel.whitelists.trim() !== ''
+              const hasAuth = channel.username && channel.password
+
               return (
-                <div className="flex flex-col gap-1">
-                  {row.original.auth_ip && (
-                    <>
-                      <span className="text-weak">IP 白名单</span>
-                      <span>{row.original.whitelists.replaceAll(',', ', ')}</span>
-                    </>
-                  )}
-                  {row.original.auth_pass && (
-                    <>
-                      <span className="text-weak">账号密码</span>
-                      <span>
-                        {row.original.username}
-                        :
-                        {row.original.password}
-                      </span>
-                    </>
+                <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-[200px]">
+                        {channel.whitelists.split(',').map((ip, index) => (
+                          <span
+                            key={index}
+                            className="inline-block px-2 py-0.5 bg-gray-100 rounded text-xs text-gray-700 break-all"
+                          >
+                            {ip.trim()}
+                          </span>
+                        ))}
+                      </div>
+                    </div>
+                  ) : hasAuth ? (
+                    <div className="flex flex-col">
+                      <span>账号密码</span>
+                      <div className="px-2 py-1 bg-gray-100 rounded text-sm text-gray-700 font-mono break-all max-w-[120px]">
+                        {channel.username}:{channel.password}
+                      </div>
+                    </div>
+                  ) : (
+                    <span className="text-sm text-gray-400">无认证</span>
                   )}
                 </div>
               )
             },
           },
           {
-            header: '过期时间', cell: ({row}) => format(row.original.expiration, 'yyyy-MM-dd HH:mm:ss'),
+            header: '过期时间', cell: ({row}) => format(row.original.expired_at, 'yyyy-MM-dd HH:mm:ss'),
           },
           {
             header: '操作', cell: ({row}) => <span>-</span>,