🐛 fix: 修改样式

apps/admin/app/dashboard/user/page.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { Display } from '@/components/display';
 import { ProTable, ProTableActions } from '@/components/pro-table';
 import {
   createUser,
@@ -12,7 +11,6 @@ import {
 import { useSubscribe } from '@/store/subscribe';
 import { formatDate } from '@/utils/common';
 import { useQuery } from '@tanstack/react-query';
-import { Badge } from '@workspace/ui/components/badge';
 import { Button } from '@workspace/ui/components/button';
 import {
   DropdownMenu,
@@ -20,6 +18,13 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@workspace/ui/components/dropdown-menu';
+import { Input } from '@workspace/ui/components/input';
+import {
+  Popover,
+  PopoverClose,
+  PopoverContent,
+  PopoverTrigger,
+} from '@workspace/ui/components/popover';
 import { ScrollArea } from '@workspace/ui/components/scroll-area';
 import {
   Sheet,
@@ -31,6 +36,7 @@ import {
 import { Switch } from '@workspace/ui/components/switch';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
 import { ConfirmButton } from '@workspace/ui/custom-components/confirm-button';
+import { FilePenLine } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
@@ -38,11 +44,69 @@ import { useRef, useState } from 'react';
 import { toast } from 'sonner';
 import { UserDetail } from './user-detail';
 import UserForm from './user-form';
-import { AuthMethodsForm } from './user-profile/auth-methods-form';
 import { BasicInfoForm } from './user-profile/basic-info-form';
 import { NotifySettingsForm } from './user-profile/notify-settings-form';
 import UserSubscription from './user-subscription';
 
+function getDeviceTypeInfo(userAgent = '') {
+  let deviceType = 'Unknown';
+  const ua = userAgent.toLowerCase();
+
+  if (ua.includes('android')) {
+    deviceType = 'Android';
+  } else if (ua.includes('iphone') || ua.includes('ios')) {
+    deviceType = 'iPhone';
+  } else if (ua.includes('ipad')) {
+    deviceType = 'iPad';
+  } else if (ua.includes('mac os') || ua.includes('mac')) {
+    deviceType = 'Mac';
+  } else if (ua.includes('windows')) {
+    deviceType = 'Windows';
+  } else if (ua.includes('linux')) {
+    deviceType = 'Linux';
+  }
+
+  return { deviceType };
+}
+
+// 为 RemarkForm 组件定义 props 类型
+interface RemarkFormProps {
+  initialRemark?: string | null;
+  onSave: (remark: string) => void;
+  CloseComponent: React.ComponentType<{ asChild?: boolean; children: React.ReactNode }>;
+}
+
+// 新的子组件，在管理它自己的备注状态
+const RemarkForm: React.FC<RemarkFormProps> = ({ onSave, initialRemark, CloseComponent }) => {
+  const [remark, setRemark] = useState<string>(initialRemark ?? '');
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setRemark(event.target.value);
+  };
+
+  const handleSaveClick = () => {
+    onSave(remark);
+  };
+
+  return (
+    <>
+      <div className='mb-2 text-sm font-semibold'>备注</div>
+      <Input
+        type='text'
+        value={remark}
+        onChange={handleInputChange}
+        placeholder='在此输入备注...'
+        className='w-full'
+      />
+      <CloseComponent asChild>
+        <Button onClick={handleSaveClick} variant='default' size={'sm'} className={'mt-2'}>
+          保存
+        </Button>
+      </CloseComponent>
+    </>
+  );
+};
+
 export default function Page() {
   const t = useTranslations('user');
   const [loading, setLoading] = useState(false);
@@ -56,6 +120,7 @@ export default function Page() {
     user_id: sp.get('user_id') || undefined,
     subscribe_id: sp.get('subscribe_id') || undefined,
     user_subscribe_id: sp.get('user_subscribe_id') || undefined,
+    device_id: sp.get('device_id') || undefined,
   };
 
   return (
@@ -128,20 +193,96 @@ export default function Page() {
         },
         {
           accessorKey: 'auth_methods',
-          header: t('userName'),
+          header: '绑定邮箱',
           cell: ({ row }) => {
-            const method = row.original.auth_methods?.[0];
+            const method = row.original.auth_methods;
             return (
               <div>
-                <Badge className='mr-1 uppercase' title={method?.verified ? t('verified') : ''}>
+                <Popover>
-                  {method?.auth_type}
+                  <PopoverTrigger>
-                </Badge>
+                    <div className={'flex items-center'}>
-                {method?.auth_identifier}
+                      {method?.find((v) => v.auth_type === 'email')?.auth_identifier || '待绑定'}
+                      {row.original?.remark ? `（${row.original.remark}）` : ''}
+                      <FilePenLine size={14} className={'text-primary ml-2'} />
+                    </div>
+                  </PopoverTrigger>
+                  <PopoverContent className={'w-64'}>
+                    <RemarkForm
+                      initialRemark={row.original.remark}
+                      CloseComponent={PopoverClose}
+                      onSave={async (remark) => {
+                        const {
+                          auth_methods,
+                          user_devices,
+                          enable_balance_notify,
+                          enable_login_notify,
+                          enable_subscribe_notify,
+                          enable_trade_notify,
+                          updated_at,
+                          created_at,
+                          id,
+                          ...rest
+                        } = row.original;
+                        await updateUserBasicInfo({
+                          user_id: id,
+                          ...rest,
+                          remark,
+                        } as unknown as API.UpdateUserBasiceInfoRequest);
+                        toast.success(t('updateSuccess'));
+                        ref.current?.refresh();
+                      }}
+                    />
+                  </PopoverContent>
+                </Popover>
               </div>
             );
           },
         },
         {
+          accessorKey: 'user_devices',
+          header: '绑定设备',
+          cell: ({ row }) => {
+            const devices = row?.original.user_devices ?? [];
+
+            return (
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+                {devices.map((v, index) => {
+                  const { deviceType } = getDeviceTypeInfo(v.user_agent);
+
+                  return (
+                    <div key={v.id + '_wrapper'}>
+                      <div
+                        style={{
+                          padding: '4px 6px',
+                          background: '#f8f8f8',
+                          borderRadius: '4px',
+                          border: '1px solid #e0e0e0',
+                          fontSize: '12px',
+                          lineHeight: '16px',
+                        }}
+                      >
+                        <div style={{ fontWeight: 500 }}>
+                          ID：{v.id}（{deviceType}）
+                        </div>
+                      </div>
+
+                      {index !== devices.length - 1 && (
+                        <div
+                          style={{
+                            height: '1px',
+                            background: '#eee',
+                            margin: '4px 0',
+                          }}
+                        ></div>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            );
+          },
+        },
+        /*{
           accessorKey: 'balance',
           header: t('balance'),
           cell: ({ row }) => <Display type='currency' value={row.getValue('balance')} />,
@@ -155,7 +296,7 @@ export default function Page() {
           accessorKey: 'commission',
           header: t('commission'),
           cell: ({ row }) => <Display type='currency' value={row.getValue('commission')} />,
-        },
+        },*/
         {
           accessorKey: 'refer_code',
           header: t('inviteCode'),
@@ -203,6 +344,10 @@ export default function Page() {
           key: 'user_subscribe_id',
           placeholder: t('subscriptionId'),
         },
+        {
+          key: 'device_id',
+          placeholder: '设备id',
+        },
       ]}
       actions={{
         render: (row) => {
@@ -281,7 +426,7 @@ function ProfileSheet({ userId }: { userId: number }) {
               <TabsList className='mb-3'>
                 <TabsTrigger value='basic'>{t('basicInfoTitle')}</TabsTrigger>
                 <TabsTrigger value='notify'>{t('notifySettingsTitle')}</TabsTrigger>
-                <TabsTrigger value='auth'>{t('authMethodsTitle')}</TabsTrigger>
+                {/*<TabsTrigger value='auth'>{t('authMethodsTitle')}</TabsTrigger>*/}
               </TabsList>
               <TabsContent value='basic' className='mt-0'>
                 <BasicInfoForm user={user} refetch={refetch as any} />
@@ -289,9 +434,9 @@ function ProfileSheet({ userId }: { userId: number }) {
               <TabsContent value='notify' className='mt-0'>
                 <NotifySettingsForm user={user} refetch={refetch as any} />
               </TabsContent>
-              <TabsContent value='auth' className='mt-0'>
+              {/*<TabsContent value='auth' className='mt-0'>
                 <AuthMethodsForm user={user} refetch={refetch as any} />
-              </TabsContent>
+              </TabsContent>*/}
             </Tabs>
           </ScrollArea>
         )}

apps/admin/app/dashboard/user/user-detail.tsx

@@ -148,7 +148,8 @@ export function UserDetail({ id }: { id: number }) {
 
   const identifier =
     data?.auth_methods.find((m) => m.auth_type === 'email')?.auth_identifier ||
-    data?.auth_methods[0]?.auth_identifier;
+    `设备Id：${data?.user_devices[0]?.id}` ||
+    '账号不存在';
 
   return (
     <HoverCard>

apps/admin/package.json

@@ -21,7 +21,7 @@
     "js-yaml": "^4.1.0",
     "mlkem-wasm": "^0.0.6",
     "nanoid": "^5.1.5",
-    "next": "^15.5.2",
+    "next": "15.5.7",
     "next-intl": "^3.26.3",
     "next-runtime-env": "^3.3.0",
     "next-themes": "^0.4.6",

apps/admin/services/admin/typings.d.ts

@@ -2360,6 +2360,7 @@ declare namespace API {
     id: number;
     avatar: string;
     balance: number;
+    remark: string;
     commission: number;
     referral_percentage: number;
     only_first_purchase: boolean;

apps/user/package.json

@@ -20,7 +20,7 @@
     "framer-motion": "^12.23.12",
     "gray-matter": "^4.0.3",
     "lucide-react": "^0.542.0",
-    "next": "^15.5.2",
+    "next": "15.5.7",
     "next-intl": "^3.26.3",
     "next-runtime-env": "^3.3.0",
     "next-themes": "^0.4.6",

bun.lock

@@ -115,7 +115,7 @@
         "js-yaml": "^4.1.0",
         "mlkem-wasm": "^0.0.6",
         "nanoid": "^5.1.5",
-        "next": "^15.5.2",
+        "next": "15.5.7",
         "next-intl": "^3.26.3",
         "next-runtime-env": "^3.3.0",
         "next-themes": "^0.4.6",
@@ -151,7 +151,7 @@
         "framer-motion": "^12.23.12",
         "gray-matter": "^4.0.3",
         "lucide-react": "^0.542.0",
-        "next": "^15.5.2",
+        "next": "15.5.7",
         "next-intl": "^3.26.3",
         "next-runtime-env": "^3.3.0",
         "next-themes": "^0.4.6",
@@ -528,27 +528,27 @@
 
     "@netlify/plugin-nextjs": ["@netlify/plugin-nextjs@5.14.0", "", {}, "sha512-8WEnVm88Ed6v6j/D0iqXDSnAW8Mf9P2CDVgBG3x2+vkiEI48X6Na7KnoQRyi6oulgA6foHIPWqgQIClsPiW20A=="],
 
-    "@next/env": ["@next/env@15.5.6", "", {}, "sha512-3qBGRW+sCGzgbpc5TS1a0p7eNxnOarGVQhZxfvTdnV0gFI61lX7QNtQ4V1TSREctXzYn5NetbUsLvyqwLFJM6Q=="],
+    "@next/env": ["@next/env@15.5.7", "", {}, "sha512-4h6Y2NyEkIEN7Z8YxkA27pq6zTkS09bUSYC0xjd0NpwFxjnIKeZEeH591o5WECSmjpUhLn3H2QLJcDye3Uzcvg=="],
 
     "@next/eslint-plugin-next": ["@next/eslint-plugin-next@15.5.6", "", { "dependencies": { "fast-glob": "3.3.1" } }, "sha512-YxDvsT2fwy1j5gMqk3ppXlsgDopHnkM4BoxSVASbvvgh5zgsK8lvWerDzPip8k3WVzsTZ1O7A7si1KNfN4OZfQ=="],
 
-    "@next/swc-darwin-arm64": ["@next/swc-darwin-arm64@15.5.6", "", { "os": "darwin", "cpu": "arm64" }, "sha512-ES3nRz7N+L5Umz4KoGfZ4XX6gwHplwPhioVRc25+QNsDa7RtUF/z8wJcbuQ2Tffm5RZwuN2A063eapoJ1u4nPg=="],
+    "@next/swc-darwin-arm64": ["@next/swc-darwin-arm64@15.5.7", "", { "os": "darwin", "cpu": "arm64" }, "sha512-IZwtxCEpI91HVU/rAUOOobWSZv4P2DeTtNaCdHqLcTJU4wdNXgAySvKa/qJCgR5m6KI8UsKDXtO2B31jcaw1Yw=="],
 
-    "@next/swc-darwin-x64": ["@next/swc-darwin-x64@15.5.6", "", { "os": "darwin", "cpu": "x64" }, "sha512-JIGcytAyk9LQp2/nuVZPAtj8uaJ/zZhsKOASTjxDug0SPU9LAM3wy6nPU735M1OqacR4U20LHVF5v5Wnl9ptTA=="],
+    "@next/swc-darwin-x64": ["@next/swc-darwin-x64@15.5.7", "", { "os": "darwin", "cpu": "x64" }, "sha512-UP6CaDBcqaCBuiq/gfCEJw7sPEoX1aIjZHnBWN9v9qYHQdMKvCKcAVs4OX1vIjeE+tC5EIuwDTVIoXpUes29lg=="],
 
-    "@next/swc-linux-arm64-gnu": ["@next/swc-linux-arm64-gnu@15.5.6", "", { "os": "linux", "cpu": "arm64" }, "sha512-qvz4SVKQ0P3/Im9zcS2RmfFL/UCQnsJKJwQSkissbngnB/12c6bZTCB0gHTexz1s6d/mD0+egPKXAIRFVS7hQg=="],
+    "@next/swc-linux-arm64-gnu": ["@next/swc-linux-arm64-gnu@15.5.7", "", { "os": "linux", "cpu": "arm64" }, "sha512-NCslw3GrNIw7OgmRBxHtdWFQYhexoUCq+0oS2ccjyYLtcn1SzGzeM54jpTFonIMUjNbHmpKpziXnpxhSWLcmBA=="],
 
-    "@next/swc-linux-arm64-musl": ["@next/swc-linux-arm64-musl@15.5.6", "", { "os": "linux", "cpu": "arm64" }, "sha512-FsbGVw3SJz1hZlvnWD+T6GFgV9/NYDeLTNQB2MXoPN5u9VA9OEDy6fJEfePfsUKAhJufFbZLgp0cPxMuV6SV0w=="],
+    "@next/swc-linux-arm64-musl": ["@next/swc-linux-arm64-musl@15.5.7", "", { "os": "linux", "cpu": "arm64" }, "sha512-nfymt+SE5cvtTrG9u1wdoxBr9bVB7mtKTcj0ltRn6gkP/2Nu1zM5ei8rwP9qKQP0Y//umK+TtkKgNtfboBxRrw=="],
 
-    "@next/swc-linux-x64-gnu": ["@next/swc-linux-x64-gnu@15.5.6", "", { "os": "linux", "cpu": "x64" }, "sha512-3QnHGFWlnvAgyxFxt2Ny8PTpXtQD7kVEeaFat5oPAHHI192WKYB+VIKZijtHLGdBBvc16tiAkPTDmQNOQ0dyrA=="],
+    "@next/swc-linux-x64-gnu": ["@next/swc-linux-x64-gnu@15.5.7", "", { "os": "linux", "cpu": "x64" }, "sha512-hvXcZvCaaEbCZcVzcY7E1uXN9xWZfFvkNHwbe/n4OkRhFWrs1J1QV+4U1BN06tXLdaS4DazEGXwgqnu/VMcmqw=="],
 
-    "@next/swc-linux-x64-musl": ["@next/swc-linux-x64-musl@15.5.6", "", { "os": "linux", "cpu": "x64" }, "sha512-OsGX148sL+TqMK9YFaPFPoIaJKbFJJxFzkXZljIgA9hjMjdruKht6xDCEv1HLtlLNfkx3c5w2GLKhj7veBQizQ=="],
+    "@next/swc-linux-x64-musl": ["@next/swc-linux-x64-musl@15.5.7", "", { "os": "linux", "cpu": "x64" }, "sha512-4IUO539b8FmF0odY6/SqANJdgwn1xs1GkPO5doZugwZ3ETF6JUdckk7RGmsfSf7ws8Qb2YB5It33mvNL/0acqA=="],
 
-    "@next/swc-win32-arm64-msvc": ["@next/swc-win32-arm64-msvc@15.5.6", "", { "os": "win32", "cpu": "arm64" }, "sha512-ONOMrqWxdzXDJNh2n60H6gGyKed42Ieu6UTVPZteXpuKbLZTH4G4eBMsr5qWgOBA+s7F+uB4OJbZnrkEDnZ5Fg=="],
+    "@next/swc-win32-arm64-msvc": ["@next/swc-win32-arm64-msvc@15.5.7", "", { "os": "win32", "cpu": "arm64" }, "sha512-CpJVTkYI3ZajQkC5vajM7/ApKJUOlm6uP4BknM3XKvJ7VXAvCqSjSLmM0LKdYzn6nBJVSjdclx8nYJSa3xlTgQ=="],
 
     "@next/swc-win32-ia32-msvc": ["@next/swc-win32-ia32-msvc@14.2.33", "", { "os": "win32", "cpu": "ia32" }, "sha512-pc9LpGNKhJ0dXQhZ5QMmYxtARwwmWLpeocFmVG5Z0DzWq5Uf0izcI8tLc+qOpqxO1PWqZ5A7J1blrUIKrIFc7Q=="],
 
-    "@next/swc-win32-x64-msvc": ["@next/swc-win32-x64-msvc@15.5.6", "", { "os": "win32", "cpu": "x64" }, "sha512-pxK4VIjFRx1MY92UycLOOw7dTdvccWsNETQ0kDHkBlcFH1GrTLUjSiHU1ohrznnux6TqRHgv5oflhfIWZwVROQ=="],
+    "@next/swc-win32-x64-msvc": ["@next/swc-win32-x64-msvc@15.5.7", "", { "os": "win32", "cpu": "x64" }, "sha512-gMzgBX164I6DN+9/PGA+9dQiwmTkE4TloBNx8Kv9UiGARsr9Nba7IpcBRA1iTV9vwlYnrE3Uy6I7Aj6qLjQuqw=="],
 
     "@noble/curves": ["@noble/curves@2.0.1", "", { "dependencies": { "@noble/hashes": "2.0.1" } }, "sha512-vs1Az2OOTBiP4q0pwjW5aF0xp9n4MxVrmkFBxc6EKZc6ddYx5gaZiAsZoq0uRRXWbi3AT/sBqn05eRPtn1JCPw=="],
 
@@ -1918,7 +1918,7 @@
 
     "netmask": ["netmask@2.0.2", "", {}, "sha512-dBpDMdxv9Irdq66304OLfEmQ9tbNRFnFTuZiLo+bD+r332bBmMJ8GBLXklIXXgxd3+v9+KUnZaUR5PJMa75Gsg=="],
 
-    "next": ["next@15.5.6", "", { "dependencies": { "@next/env": "15.5.6", "@swc/helpers": "0.5.15", "caniuse-lite": "^1.0.30001579", "postcss": "8.4.31", "styled-jsx": "5.1.6" }, "optionalDependencies": { "@next/swc-darwin-arm64": "15.5.6", "@next/swc-darwin-x64": "15.5.6", "@next/swc-linux-arm64-gnu": "15.5.6", "@next/swc-linux-arm64-musl": "15.5.6", "@next/swc-linux-x64-gnu": "15.5.6", "@next/swc-linux-x64-musl": "15.5.6", "@next/swc-win32-arm64-msvc": "15.5.6", "@next/swc-win32-x64-msvc": "15.5.6", "sharp": "^0.34.3" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.51.1", "babel-plugin-react-compiler": "*", "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "babel-plugin-react-compiler", "sass"], "bin": { "next": "dist/bin/next" } }, "sha512-zTxsnI3LQo3c9HSdSf91O1jMNsEzIXDShXd4wVdg9y5shwLqBXi4ZtUUJyB86KGVSJLZx0PFONvO54aheGX8QQ=="],
+    "next": ["next@15.5.7", "", { "dependencies": { "@next/env": "15.5.7", "@swc/helpers": "0.5.15", "caniuse-lite": "^1.0.30001579", "postcss": "8.4.31", "styled-jsx": "5.1.6" }, "optionalDependencies": { "@next/swc-darwin-arm64": "15.5.7", "@next/swc-darwin-x64": "15.5.7", "@next/swc-linux-arm64-gnu": "15.5.7", "@next/swc-linux-arm64-musl": "15.5.7", "@next/swc-linux-x64-gnu": "15.5.7", "@next/swc-linux-x64-musl": "15.5.7", "@next/swc-win32-arm64-msvc": "15.5.7", "@next/swc-win32-x64-msvc": "15.5.7", "sharp": "^0.34.3" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.51.1", "babel-plugin-react-compiler": "*", "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "babel-plugin-react-compiler", "sass"], "bin": { "next": "dist/bin/next" } }, "sha512-+t2/0jIJ48kUpGKkdlhgkv+zPTEOoXyr60qXe68eB/pl3CMJaLeIGjzp5D6Oqt25hCBiBTt8wEeeAzfJvUKnPQ=="],
 
     "next-intl": ["next-intl@3.26.5", "", { "dependencies": { "@formatjs/intl-localematcher": "^0.5.4", "negotiator": "^1.0.0", "use-intl": "^3.26.5" }, "peerDependencies": { "next": "^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0 || ^19.0.0" } }, "sha512-EQlCIfY0jOhRldiFxwSXG+ImwkQtDEfQeSOEQp6ieAGSLWGlgjdb/Ck/O7wMfC430ZHGeUKVKax8KGusTPKCgg=="],
 

packages/ui/src/components/popover.tsx

@@ -10,6 +10,7 @@ const Popover = PopoverPrimitive.Root;
 const PopoverTrigger = PopoverPrimitive.Trigger;
 
 const PopoverAnchor = PopoverPrimitive.Anchor;
+const PopoverClose = PopoverPrimitive.Close;
 
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
@@ -30,4 +31,4 @@ const PopoverContent = React.forwardRef<
 ));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };
+export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger };

packages/ui/src/custom-components/pro-table/pro-table.tsx

@@ -109,7 +109,7 @@ export function ProTable<
   const [rowCount, setRowCount] = useState<number>(0);
   const [pagination, setPagination] = useState({
     pageIndex: 0,
-    pageSize: 10,
+    pageSize: 200,
   });
   const loading = useRef(false);