yml/order_site
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

增加打手登录设备管理与三台设备限制

Browse Source
This commit is contained in:
yml2213
2026-08-17 15:26:40 +08:00
parent 8d18daa0fe
commit f938ab0cba
13 changed files with 722 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/src/lib/http.ts
+1
View File
@@ -140,6 +140,7 @@ function shouldClearWorkerSession(errorCode: string) {
'worker_auth_expired',
'worker_auth_user_invalid',
'worker_auth_stale',
'worker_auth_device_revoked',
].includes(errorCode)
}
apps/frontend/src/pages/worker/WorkerLoginPage.tsx
+125 -2
View File
@@ -7,11 +7,18 @@ import {
ThunderboltOutlined,
UserOutlined,
} from '@ant-design/icons'
import { App, Button, Form, Input, Space, Tabs } from 'antd'
import { Alert, App, Button, Form, Input, Modal, Space, Table, Tabs, Typography } from 'antd'
import { useEffect, useState } from 'react'
import { Navigate, useNavigate } from 'react-router'
import { loginWorker, registerWorker, sendWorkerSmsCode } from '@/services/worker'
import {
deleteWorkerSessionWithCredentials,
loginWorker,
manageWorkerSessions,
registerWorker,
sendWorkerSmsCode,
} from '@/services/worker'
import type { WorkerSessionDevice } from '@/types/worker-platform'
import { hasWorkerSession, setWorkerSession } from '@/utils/worker-auth'
import { isWorkerPasswordStrong, WORKER_PASSWORD_RULE_MESSAGE } from '@/utils/worker-password'
@@ -40,7 +47,11 @@ export default function WorkerLoginPage() {
const { message, modal } = App.useApp()
const [loading, setLoading] = useState(false)
const [registerForm] = Form.useForm()
const [deviceForm] = Form.useForm<{ username: string; password: string }>()
const [countdown, setCountdown] = useState(0)
const [deviceManagerOpen, setDeviceManagerOpen] = useState(false)
const [deviceManagerLoading, setDeviceManagerLoading] = useState(false)
const [managedDevices, setManagedDevices] = useState<WorkerSessionDevice[]>([])
useEffect(() => {
if (countdown <= 0) return
@@ -71,12 +82,48 @@ export default function WorkerLoginPage() {
void navigate('/hall', { replace: true })
}
} catch (error) {
if (String((error as { errorCode?: string })?.errorCode || '') === 'worker_device_limit') {
deviceForm.setFieldsValue(values)
setDeviceManagerOpen(true)
await loadManagedDevices(values)
return
}
message.error(error instanceof Error ? error.message : '登录失败')
} finally {
setLoading(false)
}
}
async function loadManagedDevices(values?: { username: string; password: string }) {
const credentials = values || deviceForm.getFieldsValue()
if (!credentials.username || !credentials.password) {
return
}
setDeviceManagerLoading(true)
try {
const response = await manageWorkerSessions(credentials)
setManagedDevices(response.data.items)
} catch (error) {
message.error(error instanceof Error ? error.message : '读取登录设备失败')
} finally {
setDeviceManagerLoading(false)
}
}
async function removeManagedDevice(device: WorkerSessionDevice) {
const credentials = deviceForm.getFieldsValue()
setDeviceManagerLoading(true)
try {
await deleteWorkerSessionWithCredentials({ ...credentials, sessionId: device.sessionId })
message.success('登录设备已删除，请重新登录')
await loadManagedDevices(credentials)
} catch (error) {
message.error(error instanceof Error ? error.message : '删除登录设备失败')
} finally {
setDeviceManagerLoading(false)
}
}
async function requestSmsCode() {
const phone = String(registerForm.getFieldValue('phone') || '').trim()
if (!/^1[3-9]\d{9}$/.test(phone)) {
@@ -214,6 +261,14 @@ export default function WorkerLoginPage() {
>
登录
</Button>
<Button
type="link"
icon={<GlobalOutlined />}
block
onClick={() => setDeviceManagerOpen(true)}
>
登录设备管理
</Button>
</Form>
</>
),
@@ -322,6 +377,74 @@ export default function WorkerLoginPage() {
</div>
</section>
</div>
<Modal
title="登录设备管理"
open={deviceManagerOpen}
width={isMobileViewport() ? '92%' : 720}
destroyOnHidden
footer={null}
onCancel={() => setDeviceManagerOpen(false)}
>
<Form
form={deviceForm}
layout="vertical"
onFinish={(values) => void loadManagedDevices(values)}
style={{ marginBottom: 16 }}
>
<Form.Item name="username" rules={[{ required: true, message: '请输入账号' }]}>
<Input prefix={<UserOutlined />} placeholder="手机号 / 昵称 / 账号" />
</Form.Item>
<Form.Item name="password" rules={[{ required: true, message: '请输入密码' }]}>
<Input.Password prefix={<LockOutlined />} placeholder="密码" />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" loading={deviceManagerLoading}>
查询
</Button>
</Form.Item>
</Form>
<Alert
showIcon
type="info"
message="验证账号密码后，可删除旧设备。所有 PC 和手机合计最多同时在线 3 台。"
style={{ marginBottom: 16 }}
/>
<Table
size="small"
rowKey="sessionId"
loading={deviceManagerLoading}
dataSource={managedDevices}
pagination={false}
columns={[
{
title: '设备',
render: (_, item) => (
<Space direction="vertical" size={0}>
<Typography.Text strong>{item.deviceName || item.deviceType}</Typography.Text>
<Typography.Text type="secondary">{item.ipAddress || '未知 IP'}</Typography.Text>
</Space>
),
},
{
title: '最近活动',
render: (_, item) => item.lastSeenAt.replace('T', ' ').slice(0, 19),
},
{
title: '操作',
width: 100,
render: (_, item) => (
<Button danger type="link" onClick={() => void removeManagedDevice(item)}>
删除
</Button>
),
},
]}
/>
</Modal>
</main>
)
}
function isMobileViewport() {
return typeof window !== 'undefined' && window.innerWidth < 768
}
apps/frontend/src/pages/worker/WorkerProfilePage.tsx
+87
View File
@@ -2,6 +2,7 @@ import {
BankOutlined,
CopyOutlined,
CustomerServiceOutlined,
GlobalOutlined,
LockOutlined,
LogoutOutlined,
ReloadOutlined,
@@ -44,6 +45,8 @@ import {
createWorkerWithdrawRequest,
fetchWorkerFinanceRequests,
fetchWorkerProfile,
fetchWorkerSessions,
deleteWorkerSession,
fetchWorkerWalletLedgers,
logoutWorker,
} from '@/services/worker'
@@ -51,6 +54,7 @@ import type {
UploadedFile,
WorkerFinanceRequest,
WorkerProfileSummary,
WorkerSessionDevice,
WorkerUser,
WorkerWalletLedger,
} from '@/types/worker-platform'
@@ -104,6 +108,7 @@ export default function WorkerProfilePage() {
const [withdrawalAccountOpen, setWithdrawalAccountOpen] = useState(false)
const [passwordOpen, setPasswordOpen] = useState(false)
const [contactOpen, setContactOpen] = useState(false)
const [devicesOpen, setDevicesOpen] = useState(false)
const [submittingRecharge, setSubmittingRecharge] = useState(false)
const [submittingWithdraw, setSubmittingWithdraw] = useState(false)
const [submittingWithdrawalAccount, setSubmittingWithdrawalAccount] = useState(false)
@@ -115,6 +120,13 @@ export default function WorkerProfilePage() {
const selectedWithdrawChannel = Form.useWatch('accountChannel', withdrawForm)
const selectedWithdrawalAccountChannel = Form.useWatch('accountChannel', withdrawalAccountForm)
const devicesQuery = useQuery({
queryKey: ['worker-sessions'],
queryFn: () => fetchWorkerSessions(),
enabled: devicesOpen,
retry: false,
})
const profileQuery = useQuery({
queryKey: ['worker-profile'],
queryFn: () => fetchWorkerProfile(),
@@ -186,6 +198,16 @@ export default function WorkerProfilePage() {
}
}
async function removeWorkerDevice(device: WorkerSessionDevice) {
try {
await deleteWorkerSession(device.sessionId)
message.success('登录设备已删除')
await devicesQuery.refetch()
} catch (error) {
message.error(error instanceof Error ? error.message : '删除登录设备失败')
}
}
function openRechargeModal() {
if (!canUseFinanceActions) {
message.warning('当前账号尚未通过审核，暂时不能发起充值申请')
@@ -611,6 +633,19 @@ export default function WorkerProfilePage() {
</div>
<span>修改密码</span>
</button>
<button
type="button"
className="worker-profile-mobile-tool-item"
onClick={() => setDevicesOpen(true)}
>
<div
className="worker-profile-mobile-tool-icon"
style={{ background: '#f0fdfa', color: '#0f766e' }}
>
<GlobalOutlined />
</div>
<span>登录设备</span>
</button>
<button
type="button"
className="worker-profile-mobile-tool-item"
@@ -1120,6 +1155,9 @@ export default function WorkerProfilePage() {
<Button icon={<LockOutlined />} onClick={() => setPasswordOpen(true)}>
修改密码
</Button>
<Button icon={<GlobalOutlined />} onClick={() => setDevicesOpen(true)}>
登录设备
</Button>
<Button icon={<CustomerServiceOutlined />} onClick={() => setContactOpen(true)}>
联系管理员
</Button>
@@ -1626,6 +1664,55 @@ export default function WorkerProfilePage() {
</Form>
</Modal>
<Modal
title="登录设备"
open={devicesOpen}
width={isMobile ? '92%' : 720}
destroyOnHidden
footer={null}
onCancel={() => setDevicesOpen(false)}
>
<Alert
showIcon
type="info"
message={`所有设备合计最多同时在线 ${devicesQuery.data?.data.maxDevices || 3} 台，删除旧设备后才能在新设备登录。`}
/>
<Table
size="small"
loading={devicesQuery.isLoading || devicesQuery.isFetching}
rowKey="sessionId"
dataSource={devicesQuery.data?.data.items || []}
pagination={false}
style={{ marginTop: 16 }}
columns={[
{
title: '设备',
render: (_, item) => (
<Space direction="vertical" size={0}>
<Typography.Text strong>{item.deviceName || item.deviceType}</Typography.Text>
<Typography.Text type="secondary">{item.ipAddress || '未知 IP'}</Typography.Text>
</Space>
),
},
{ title: '最近活动', render: (_, item) => formatDateTime(item.lastSeenAt) },
{
title: '操作',
width: 100,
render: (_, item) => (
<Button
danger
type="link"
disabled={item.current}
onClick={() => void removeWorkerDevice(item)}
>
{item.current ? '当前设备' : '删除'}
</Button>
),
},
]}
/>
</Modal>
<Modal
title="修改密码"
open={passwordOpen}
apps/frontend/src/services/worker.ts
+34 -2
View File
@@ -1,4 +1,4 @@
import { apiGet, apiPost } from '@/lib/http'
import { apiDelete, apiGet, apiPost } from '@/lib/http'
import type {
CollectLookupResponse,
UploadedFile,
@@ -12,9 +12,11 @@ import type {
WorkerLoginResponse,
WorkerOrderOverviewResponse,
WorkerProfileResponse,
WorkerSessionDevice,
WorkerUser,
WorkerWalletLedger,
} from '@/types/worker-platform'
import { getWorkerDeviceId } from '@/utils/worker-auth'
export function sendWorkerSmsCode(payload: { phone: string }) {
return apiPost<{ sent: boolean; expiresInSeconds: number; provider: string }>(
@@ -37,7 +39,37 @@ export function registerWorker(payload: {
}
export function loginWorker(payload: { username: string; password: string }) {
return apiPost<WorkerLoginResponse>('/api/v1/worker/auth/login', payload)
const userAgent = navigator.userAgent
const isMobile = /Android|iPhone|iPad|iPod|Mobile/i.test(userAgent)
return apiPost<WorkerLoginResponse>('/api/v1/worker/auth/login', {
...payload,
deviceId: getWorkerDeviceId(),
deviceType: isMobile ? 'mobile' : 'pc',
deviceName: isMobile ? '手机浏览器' : 'PC 浏览器',
})
}
export function fetchWorkerSessions() {
return apiGet<{ maxDevices: number; items: WorkerSessionDevice[] }>('/api/v1/worker/auth/devices')
}
export function deleteWorkerSession(sessionId: string) {
return apiDelete<{ deleted: boolean }>(`/api/v1/worker/auth/devices/${sessionId}`)
}
export function manageWorkerSessions(payload: { username: string; password: string }) {
return apiPost<{ maxDevices: number; items: WorkerSessionDevice[] }>(
'/api/v1/worker/auth/devices/manage/list',
payload,
)
}
export function deleteWorkerSessionWithCredentials(payload: {
username: string
password: string
sessionId: string
}) {
return apiPost<{ deleted: boolean }>('/api/v1/worker/auth/devices/manage/delete', payload)
}
export function fetchWorkerSession() {
apps/frontend/src/types/worker-platform.ts
+13
View File
@@ -37,6 +37,19 @@ export type WorkerUser = {
reviewedAt: string | null
}
export type WorkerSessionDevice = {
sessionId: string
deviceId: string
deviceType: string
deviceName: string
userAgent: string
ipAddress: string
issuedAt: string
lastSeenAt: string
expiresAt: string
current: boolean
}
export type WorkerProfileSummary = {
acceptedOrderCount: number
activeOrderCount: number
apps/frontend/src/utils/worker-auth.ts
+13
View File
@@ -3,11 +3,24 @@ const WORKER_EXPIRES_AT_KEY = 'order-site-worker-token-expires-at'
const WORKER_ID_KEY = 'order-site-worker-id'
const WORKER_USERNAME_KEY = 'order-site-worker-username'
const WORKER_STATUS_KEY = 'order-site-worker-status'
const WORKER_DEVICE_ID_KEY = 'order-site-worker-device-id'
export function getWorkerToken() {
return localStorage.getItem(WORKER_TOKEN_KEY) || ''
}
export function getWorkerDeviceId() {
let deviceId = localStorage.getItem(WORKER_DEVICE_ID_KEY) || ''
if (!deviceId) {
deviceId =
typeof crypto.randomUUID === 'function'
? crypto.randomUUID()
: `${Date.now()}-${Math.random().toString(36).slice(2)}`
localStorage.setItem(WORKER_DEVICE_ID_KEY, deviceId)
}
return deviceId
}
export function getWorkerTokenExpiresAt() {
return localStorage.getItem(WORKER_EXPIRES_AT_KEY) || ''
}