🐛 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/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;

eslint.config.js

@@ -1,4 +0,0 @@
-import { config } from '@workspace/eslint-config/base';
-
-/** @type {import("eslint").Linter.Config} */
-export default config;

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);