From c330db0bf3c4fc41d891c09fea5305757b7302ab Mon Sep 17 00:00:00 2001
From: dongmucat <1127093059@qq.com>
Date: Mon, 27 Apr 2026 14:54:39 +0800
Subject: [PATCH] feat(ui): display user ID on dashboard and profile settings
 pages

---
 web/e2e/user-id-display.spec.ts    | 42 ++++++++++++++++++++++++++++++
 web/src/i18n/locales/en.json       |  6 +++--
 web/src/i18n/locales/zh.json       |  6 +++--
 web/src/pages/dashboard.tsx        |  1 +
 web/src/pages/settings/profile.tsx |  5 ++++
 5 files changed, 56 insertions(+), 4 deletions(-)
 create mode 100644 web/e2e/user-id-display.spec.ts

diff --git a/web/e2e/user-id-display.spec.ts b/web/e2e/user-id-display.spec.ts
new file mode 100644
index 00000000..0f3f0485
--- /dev/null
+++ b/web/e2e/user-id-display.spec.ts
@@ -0,0 +1,42 @@
+import { expect, test } from '@playwright/test'
+import { setEnglishLocale } from './helpers/auth-fixtures'
+import { registerSession } from './helpers/session'
+
+test.describe('User ID Display', () => {
+  test.beforeEach(async ({ page }, testInfo) => {
+    await setEnglishLocale(page)
+    await registerSession(page, testInfo)
+  })
+
+  test('shows user ID in dashboard account card', async ({ page }) => {
+    await page.goto('/dashboard')
+    await expect(page.getByText('Account Information')).toBeVisible()
+
+    const userIdText = page.getByText('User ID', { exact: false })
+    await expect(userIdText).toBeVisible()
+
+    // The dashboard renders "User ID: <value>" in a single element.
+    // Verify the value is not empty by checking the text content is longer than just the label.
+    const content = await userIdText.textContent()
+    const valueAfterLabel = content?.replace(/^.*User ID[:\s]*/i, '').trim() ?? ''
+    expect(valueAfterLabel.length).toBeGreaterThan(0)
+  })
+
+  test('shows user ID on profile settings page', async ({ page }) => {
+    await page.goto('/settings/profile')
+    await expect(page.getByRole('heading', { name: 'Profile Settings' })).toBeVisible()
+
+    const label = page.getByText('User ID', { exact: true })
+    await expect(label).toBeVisible()
+
+    // The value is rendered in a sibling <p> element right after the label.
+    // Locate the value paragraph within the same container.
+    const container = page.locator('.space-y-2', { has: label })
+    const value = container.locator('p')
+    await expect(value).toBeVisible()
+
+    const text = await value.textContent()
+    expect(text?.trim()).not.toBe('')
+    expect(text?.trim()).not.toBe('-')
+  })
+})
diff --git a/web/src/i18n/locales/en.json b/web/src/i18n/locales/en.json
index 1f67f236..e9d5242a 100644
--- a/web/src/i18n/locales/en.json
+++ b/web/src/i18n/locales/en.json
@@ -326,7 +326,8 @@
     "reportsTitle": "Report Management",
     "viewReports": "View skill reports",
     "previewMore": "...",
-    "previewMoreLabel": "View All"
+    "previewMoreLabel": "View All",
+    "userId": "User ID"
   },
   "mySkills": {
     "title": "My Skills",
@@ -699,7 +700,8 @@
     "reviewHint": "Some changes require admin review before taking effect.",
     "partiallyAppliedTitle": "Partially Applied",
     "partiallyAppliedDescription": "Some changes were applied immediately. Others are pending admin review.",
-    "noChanges": "No changes to save."
+    "noChanges": "No changes to save.",
+    "userId": "User ID"
   },
   "security": {
     "title": "Security Settings",
diff --git a/web/src/i18n/locales/zh.json b/web/src/i18n/locales/zh.json
index ed4180a1..28d5e705 100644
--- a/web/src/i18n/locales/zh.json
+++ b/web/src/i18n/locales/zh.json
@@ -326,7 +326,8 @@
     "reportsTitle": "举报管理",
     "viewReports": "查看技能举报",
     "previewMore": "...",
-    "previewMoreLabel": "查看全部"
+    "previewMoreLabel": "查看全部",
+    "userId": "用户 ID"
   },
   "mySkills": {
     "title": "我的技能",
@@ -699,7 +700,8 @@
     "reviewHint": "部分修改需要管理员审核后生效。",
     "partiallyAppliedTitle": "部分已生效",
     "partiallyAppliedDescription": "部分修改已立即生效，其余修改正在等待管理员审核。",
-    "noChanges": "没有需要保存的修改。"
+    "noChanges": "没有需要保存的修改。",
+    "userId": "用户 ID"
   },
   "security": {
     "title": "安全设置",
diff --git a/web/src/pages/dashboard.tsx b/web/src/pages/dashboard.tsx
index 89ff5d70..056942c8 100644
--- a/web/src/pages/dashboard.tsx
+++ b/web/src/pages/dashboard.tsx
@@ -52,6 +52,7 @@ export function DashboardPage() {
             <div className="space-y-1.5">
               <div className="text-xl font-semibold font-heading">{user?.displayName}</div>
               <div className="text-sm text-muted-foreground">{user?.email}</div>
+              <div className="text-sm text-muted-foreground">{t('dashboard.userId')}: {user?.userId}</div>
               <div className="text-xs text-muted-foreground flex items-center gap-2">
                 <span className="w-2 h-2 rounded-full bg-emerald-500" />
                 {t('dashboard.loginVia', { provider: user?.oauthProvider })}
diff --git a/web/src/pages/settings/profile.tsx b/web/src/pages/settings/profile.tsx
index dfb4a09c..97f418ad 100644
--- a/web/src/pages/settings/profile.tsx
+++ b/web/src/pages/settings/profile.tsx
@@ -207,6 +207,11 @@ export function ProfileSettingsPage() {
             </div>
           ) : null}
 
+          <div className="space-y-2">
+            <label className="text-sm font-medium">{t('profile.userId')}</label>
+            <p className="text-sm text-muted-foreground">{user?.userId || '-'}</p>
+          </div>
+
           <form className="space-y-4" onSubmit={handleSubmit}>
             {/* Dynamic fields */}
             {Object.entries(fieldPolicies).map(([field, policy]) => {