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-20 20:04:43 +08:00
parent 20b1066ba3
commit 6539e0fb21
15 changed files with 291 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/src/components/worker/WorkerAnnouncementBanner.tsx
+30
View File
@@ -0,0 +1,30 @@
import { SoundOutlined } from '@ant-design/icons'
import { useQuery } from '@tanstack/react-query'
import { fetchWorkerAnnouncement } from '@/services/worker'
export default function WorkerAnnouncementBanner() {
const announcementQuery = useQuery({
queryKey: ['worker-announcement'],
queryFn: fetchWorkerAnnouncement,
retry: false,
})
const announcement = announcementQuery.data?.data
const content = String(announcement?.content || '').trim()
if (!announcement?.enabled || !content) return null
return (
<section className="worker-announcement" aria-label="平台公告">
<span className="worker-announcement-label">
<SoundOutlined /> 公告
</span>
<div className="worker-announcement-viewport">
<div className="worker-announcement-track">
<span>{content}</span>
<span aria-hidden="true">{content}</span>
</div>
</div>
</section>
)
}
apps/frontend/src/layouts/WorkerLayout.tsx
+3
View File
@@ -14,6 +14,7 @@ import { useIsMobile } from '@/utils/use-is-mobile'
import { clearWorkerSession, getWorkerStatus, getWorkerUsername } from '@/utils/worker-auth'
import { getWorkerToken } from '@/utils/worker-auth'
import { useRealtimeEvents, type RealtimeEvent } from '@/hooks/useRealtimeEvents'
import WorkerAnnouncementBanner from '@/components/worker/WorkerAnnouncementBanner'
const menuItems: MenuProps['items'] = [
{ key: '/hall', icon: <ShoppingOutlined />, label: '抢单大厅' },
@@ -89,6 +90,7 @@ export default function WorkerLayout() {
</header>
<main className="worker-mobile-content">
<WorkerAnnouncementBanner />
<Outlet />
</main>
@@ -146,6 +148,7 @@ export default function WorkerLayout() {
</Layout.Sider>
<Layout className="admin-main-shell">
<Layout.Content className="admin-content">
<WorkerAnnouncementBanner />
<Outlet />
</Layout.Content>
</Layout>
apps/frontend/src/pages/admin/AdminWorkerPlatformPage.tsx
+6
View File
@@ -7,6 +7,7 @@ import PageHeader from '@/components/admin/PageHeader'
import { fetchAdminWorkerPlatformSummary } from '@/services/admin'
import { getAdminRole } from '@/utils/admin-auth'
import CategoriesPanel from './panels/CategoriesPanel'
import AnnouncementPanel from './panels/AnnouncementPanel'
import CancelRequestsPanel from './panels/CancelRequestsPanel'
import FinancePanel from './panels/FinancePanel'
import FeedbacksPanel from './panels/FeedbacksPanel'
@@ -56,6 +57,9 @@ export default function AdminWorkerPlatformPage() {
{ key: 'orders', label: '接单工单', children: <WorkOrdersPanel /> },
{ key: 'cancel-requests', label: '撤单审核', children: <CancelRequestsPanel /> },
{ key: 'feedbacks', label: '问题反馈', children: <FeedbacksPanel /> },
...(isAdmin
? [{ key: 'announcement', label: '公告管理', children: <AnnouncementPanel /> }]
: []),
{ key: 'rules', label: '接单模板', children: <ProductRulesPanel /> },
{ key: 'product-match', label: '匹配诊断', children: <ProductMatchPanel /> },
{ key: 'categories', label: '分类', children: <CategoriesPanel /> },
@@ -79,6 +83,7 @@ function loadActiveTabPreference(): string {
return saved === 'orders' ||
saved === 'cancel-requests' ||
saved === 'feedbacks' ||
saved === 'announcement' ||
saved === 'rules' ||
saved === 'product-match' ||
saved === 'categories' ||
@@ -99,6 +104,7 @@ function isWorkerPlatformTab(tab: string | null): tab is string {
'orders',
'cancel-requests',
'feedbacks',
'announcement',
'rules',
'product-match',
'categories',
apps/frontend/src/pages/admin/panels/AnnouncementPanel.tsx
+61
View File
@@ -0,0 +1,61 @@
import { useQuery, useQueryClient } from '@tanstack/react-query'
import { App, Button, Card, Form, Input, Space, Switch, Typography } from 'antd'
import { useEffect, useState } from 'react'
import { fetchAdminWorkerAnnouncement, saveAdminWorkerAnnouncement } from '@/services/admin'
import type { WorkerAnnouncementConfig } from '@/types/worker-platform'
export default function AnnouncementPanel() {
const { message } = App.useApp()
const queryClient = useQueryClient()
const [form] = Form.useForm<WorkerAnnouncementConfig>()
const [saving, setSaving] = useState(false)
const announcementQuery = useQuery({
queryKey: ['admin-worker-announcement'],
queryFn: fetchAdminWorkerAnnouncement,
})
useEffect(() => {
if (announcementQuery.data?.data) form.setFieldsValue(announcementQuery.data.data)
}, [announcementQuery.data, form])
async function saveAnnouncement(values: WorkerAnnouncementConfig) {
setSaving(true)
try {
await saveAdminWorkerAnnouncement({
enabled: values.enabled !== false,
content: String(values.content || '').trim(),
})
await queryClient.invalidateQueries({ queryKey: ['admin-worker-announcement'] })
message.success('公告已保存')
} catch (error) {
message.error(error instanceof Error ? error.message : '保存公告失败')
} finally {
setSaving(false)
}
}
return (
<Card title="打手端滚动公告" bordered={false}>
<Form form={form} layout="vertical" onFinish={saveAnnouncement} style={{ maxWidth: 760 }}>
<Form.Item name="enabled" valuePropName="checked" label="展示公告">
<Switch />
</Form.Item>
<Form.Item
name="content"
label="公告内容"
rules={[{ required: true, whitespace: true, message: '请填写公告内容' }]}
extra="公告会显示在打手端各页面顶部并横向滚动。"
>
<Input.TextArea rows={4} maxLength={300} showCount placeholder="请输入打手端公告内容" />
</Form.Item>
<Space>
<Button type="primary" htmlType="submit" loading={saving}>
保存公告
</Button>
<Typography.Text type="secondary">关闭后打手端不显示公告栏。</Typography.Text>
</Space>
</Form>
</Card>
)
}
apps/frontend/src/services/admin/worker-platform.ts
+9
View File
@@ -17,6 +17,7 @@ import type {
WorkerOrderFeedback,
WorkerPlatformNotificationConfig,
WorkerProductMatchConfig,
WorkerAnnouncementConfig,
WorkerLevel,
WorkerListResponse,
WorkerUser,
@@ -41,6 +42,14 @@ export function fetchAdminWorkerPlatformSummary() {
}>('/api/v1/admin/worker-platform/summary')
}
export function fetchAdminWorkerAnnouncement() {
return apiGet<WorkerAnnouncementConfig>('/api/v1/admin/worker-platform/announcement')
}
export function saveAdminWorkerAnnouncement(payload: WorkerAnnouncementConfig) {
return apiPost<WorkerAnnouncementConfig>('/api/v1/admin/worker-platform/announcement', payload)
}
export function fetchAdminWorkerCancelRequests(
status: 'pending' | 'approved' | 'rejected' = 'pending',
) {
apps/frontend/src/services/worker.ts
+5
View File
@@ -8,6 +8,7 @@ import type {
WorkerFinanceRequest,
WorkerCancelRequest,
WorkerCancelRequestRisk,
WorkerAnnouncementConfig,
WorkerOrderFeedback,
WorkerHallOrdersResponse,
WorkerLeaderboardResponse,
@@ -130,6 +131,10 @@ export function fetchWorkerProfile() {
return apiGet<WorkerProfileResponse>('/api/v1/worker/profile')
}
export function fetchWorkerAnnouncement() {
return apiGet<WorkerAnnouncementConfig>('/api/v1/worker/announcement')
}
export function fetchWorkerWalletLedgers(params?: Record<string, unknown>) {
return apiGet<WorkerListResponse<WorkerWalletLedger>>(
'/api/v1/worker/profile/wallet-ledgers',
apps/frontend/src/styles/worker.css
+66
View File
@@ -20,6 +20,59 @@
flex-wrap: wrap;
}
.worker-announcement {
display: flex;
align-items: center;
gap: 10px;
height: 42px;
margin: 0 0 16px;
padding: 0 14px;
overflow: hidden;
border: 1px solid #ffe0a3;
border-radius: 8px;
background: #fffaf0;
color: #a86600;
}
.worker-announcement-label {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 5px;
padding: 3px 8px;
border-radius: 6px;
background: #f59f00;
color: #fff;
font-size: 13px;
font-weight: 600;
}
.worker-announcement-viewport {
min-width: 0;
overflow: hidden;
white-space: nowrap;
}
.worker-announcement-track {
display: inline-flex;
min-width: max-content;
gap: 56px;
animation: worker-announcement-scroll 22s linear infinite;
}
.worker-announcement:hover .worker-announcement-track {
animation-play-state: paused;
}
@keyframes worker-announcement-scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-50% - 28px));
}
}
.worker-page-head h3,
.worker-page-head > .ant-typography {
margin: 0 !important;
@@ -2023,6 +2076,19 @@ body {
}
@media (max-width: 720px) {
.worker-announcement {
height: 38px;
margin-bottom: 10px;
padding: 0 10px;
gap: 8px;
font-size: 13px;
}
.worker-announcement-label {
padding: 3px 6px;
font-size: 12px;
}
.worker-page-head {
align-items: stretch;
flex-direction: column;
apps/frontend/src/types/worker-platform.ts
+5
View File
@@ -185,6 +185,11 @@ export type WorkerProductMatchConfig = {
legacyFallbackEnabled: boolean
}
export type WorkerAnnouncementConfig = {
enabled: boolean
content: string
}
export type WorkerWithdrawalAccount = {
accountChannel: string
accountName: string