dachui/affiliate_dash
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: support merchant team roles and permissions

Browse Source
This commit is contained in:
yml2213
2026-08-13 11:41:34 +08:00
parent 6c98fa557e
commit a4791decb0
21 changed files with 969 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/Dashboard.tsx
+97 -72
View File
@@ -103,8 +103,15 @@ function CustomStatusLine({
export default function Dashboard() {
const [stats, setStats] = useState<DashboardStats | null>(null)
const [loading, setLoading] = useState(true)
const { user, isAdmin } = useAuth()
const { user, isAdmin, merchantPermissions } = useAuth()
const navigate = useNavigate()
const can = (permission: string) => isAdmin || merchantPermissions.includes(permission)
const canOrders = can('orders:manage')
const canProducts = can('products:manage')
const canMembers = can('members:manage')
const canWallet = can('wallet:view')
const canAPI = can('api:manage')
const canCallbacks = can('callbacks:manage')
useEffect(() => {
dashboardApi
@@ -144,12 +151,16 @@ export default function Dashboard() {
欢迎回到 Skin Hub 游戏皮肤分销管理平台。以下是系统的最新业务状态与发货订单追踪数据。
</p>
<div className="dash-quick-launch">
<button className="dash-quick-btn" type="button" onClick={() => navigate('/merchant-orders')}>
<PlusOutlined /> 发货订单管理
</button>
<button className="dash-quick-btn" type="button" onClick={() => navigate('/merchant-wallet')}>
<WalletOutlined /> 积分流水查看
</button>
{canOrders && (
<button className="dash-quick-btn" type="button" onClick={() => navigate('/merchant-orders')}>
<PlusOutlined /> 发货订单管理
</button>
)}
{can('wallet:ledger') && (
<button className="dash-quick-btn" type="button" onClick={() => navigate('/merchant-wallet')}>
<WalletOutlined /> 积分流水查看
</button>
)}
{isAdmin && (
<>
<button className="dash-quick-btn" type="button" onClick={() => navigate('/platform-merchants')}>
@@ -166,42 +177,49 @@ export default function Dashboard() {
</div>
</div>
{/* 第一组：核心业务指标 */}
<Typography.Title level={5} style={{ marginBottom: 14, fontWeight: 700, color: '#1e293b' }}>
基础数据指标
</Typography.Title>
<Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
<Col xs={24} sm={12} lg={8}>
<ModernMetricCard
title={stats?.scope === 'platform' ? '平台可售商品' : '商户上架商品'}
value={stats?.active_product_count ?? 0}
icon={<ShoppingOutlined />}
iconTheme=""
footerText="活跃商品库"
footerValue="已上线"
/>
</Col>
<Col xs={24} sm={12} lg={8}>
<ModernMetricCard
title={stats?.scope === 'platform' ? '平台启用商户' : '当前合作商户'}
value={stats?.active_merchant_count ?? 0}
icon={<ShopOutlined />}
iconTheme="metric-card-icon--purple"
footerText="商户状态"
footerValue="正常运行"
/>
</Col>
<Col xs={24} sm={12} lg={8}>
<ModernMetricCard
title="平台成员账号"
value={stats?.user_count ?? 0}
icon={<TeamOutlined />}
iconTheme="metric-card-icon--emerald"
footerText="团队成员"
footerValue="活跃"
/>
</Col>
<Col xs={24} sm={12} lg={8}>
{(canProducts || canMembers || canOrders) && (
<>
<Typography.Title level={5} style={{ marginBottom: 14, fontWeight: 700, color: '#1e293b' }}>
业务概览
</Typography.Title>
<Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
{canProducts && (
<Col xs={24} sm={12} lg={8}>
<ModernMetricCard
title={stats?.scope === 'platform' ? '平台可售商品' : '商户上架商品'}
value={stats?.active_product_count ?? 0}
icon={<ShoppingOutlined />}
footerText="活跃商品库"
footerValue="已上线"
/>
</Col>
)}
{isAdmin && (
<Col xs={24} sm={12} lg={8}>
<ModernMetricCard
title="平台启用商户"
value={stats?.active_merchant_count ?? 0}
icon={<ShopOutlined />}
iconTheme="metric-card-icon--purple"
footerText="商户状态"
footerValue="正常运行"
/>
</Col>
)}
{canMembers && (
<Col xs={24} sm={12} lg={8}>
<ModernMetricCard
title={isAdmin ? '平台成员账号' : '团队成员'}
value={stats?.user_count ?? 0}
icon={<TeamOutlined />}
iconTheme="metric-card-icon--emerald"
footerText="团队成员"
footerValue="活跃"
/>
</Col>
)}
{canOrders && <>
<Col xs={24} sm={12} lg={8}>
<ModernMetricCard
title="累计订单总数"
value={stats?.order_count ?? 0}
@@ -211,7 +229,7 @@ export default function Dashboard() {
footerValue={`${stats?.today_order_count ?? 0} 单`}
/>
</Col>
<Col xs={24} sm={12} lg={8}>
<Col xs={24} sm={12} lg={8}>
<ModernMetricCard
title="今日订单总量"
value={stats?.today_order_count ?? 0}
@@ -221,7 +239,7 @@ export default function Dashboard() {
footerValue={`${ratio(stats?.today_order_count ?? 0, stats?.order_count ?? 0)}%`}
/>
</Col>
<Col xs={24} sm={12} lg={8}>
<Col xs={24} sm={12} lg={8}>
<ModernMetricCard
title="待处理/待发货订单"
value={stats?.paid_order_count ?? 0}
@@ -231,14 +249,19 @@ export default function Dashboard() {
footerValue={(stats?.paid_order_count ?? 0) > 0 ? '需处理' : '无积压'}
/>
</Col>
</Row>
</>}
</Row>
</>
)}
{/* 第二组：积分与资金监控 */}
<Typography.Title level={5} style={{ marginBottom: 14, fontWeight: 700, color: '#1e293b' }}>
积分变动与账户额度
</Typography.Title>
<Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
<Col xs={24} sm={12} lg={6}>
{canWallet && (
<>
<Typography.Title level={5} style={{ marginBottom: 14, fontWeight: 700, color: '#1e293b' }}>
经营与账户
</Typography.Title>
<Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
{canOrders && <>
<Col xs={24} sm={12} lg={6}>
<ModernMetricCard
title="累计成交积分"
value={stats?.total_sales ?? 0}
@@ -247,7 +270,7 @@ export default function Dashboard() {
iconTheme="metric-card-icon--emerald"
/>
</Col>
<Col xs={24} sm={12} lg={6}>
<Col xs={24} sm={12} lg={6}>
<ModernMetricCard
title="今日成交积分"
value={stats?.today_sales ?? 0}
@@ -256,7 +279,7 @@ export default function Dashboard() {
iconTheme="metric-card-icon--amber"
/>
</Col>
<Col xs={24} sm={12} lg={6}>
<Col xs={24} sm={12} lg={6}>
<ModernMetricCard
title="平台扣费/手续费"
value={stats?.total_fees ?? 0}
@@ -265,7 +288,8 @@ export default function Dashboard() {
iconTheme="metric-card-icon--purple"
/>
</Col>
<Col xs={24} sm={12} lg={6}>
</>}
{canWallet && <Col xs={24} sm={12} lg={6}>
<ModernMetricCard
title="账户可用余额"
value={stats?.wallet_available_balance ?? 0}
@@ -273,12 +297,13 @@ export default function Dashboard() {
icon={<WalletOutlined />}
iconTheme=""
/>
</Col>
</Row>
</Col>}
</Row>
</>
)}
{/* 第三组：订单发货分布与 API 监控 */}
<Row gutter={[20, 20]}>
<Col xs={24} lg={14}>
{(canOrders || canAPI || canCallbacks) && <Row gutter={[20, 20]}>
{canOrders && <Col xs={24} lg={canAPI || canCallbacks ? 14 : 24}>
<Card title="发货订单状态占比分布" style={{ height: '100%' }}>
<CustomStatusLine
label="待发货 (paid)"
@@ -316,44 +341,44 @@ export default function Dashboard() {
tagClass="status-tag--gray"
/>
</Card>
</Col>
<Col xs={24} lg={10}>
</Col>}
{(canAPI || canCallbacks) && <Col xs={24} lg={canOrders ? 10 : 24}>
<Card title="接口密钥与 Webhook 回调监控" style={{ height: '100%' }}>
<Row gutter={[16, 20]}>
<Col span={12}>
{canAPI && <Col span={12}>
<Statistic
title="API 密钥 (活跃/总量)"
value={stats?.active_api_client_count ?? 0}
prefix={<ApiOutlined style={{ color: '#2563eb' }} />}
suffix={`/ ${numberText(stats?.api_client_count)}`}
/>
</Col>
<Col span={12}>
</Col>}
{canCallbacks && <Col span={12}>
<Statistic
title="Webhook 回调订阅"
value={stats?.callback_subscription_count ?? 0}
prefix={<CheckCircleOutlined style={{ color: '#16a34a' }} />}
/>
</Col>
<Col span={12}>
</Col>}
{canCallbacks && <Col span={12}>
<Statistic
title="待投递回调队列"
value={stats?.pending_callback_count ?? 0}
prefix={<ClockCircleOutlined style={{ color: '#d97706' }} />}
/>
</Col>
<Col span={12}>
</Col>}
{canCallbacks && <Col span={12}>
<Statistic
title="投递失败回调"
value={stats?.failed_callback_count ?? 0}
prefix={<CloseCircleOutlined style={{ color: '#dc2626' }} />}
valueStyle={(stats?.failed_callback_count ?? 0) > 0 ? { color: '#dc2626' } : undefined}
/>
</Col>
</Col>}
</Row>
</Card>
</Col>
</Row>
</Col>}
</Row>}
</div>
)
}
frontend/src/pages/MerchantCenter.tsx
+103 -36
View File
@@ -23,6 +23,7 @@ import type {
FulfillmentOrder,
Merchant,
MerchantMember,
MerchantRole,
MerchantProduct,
PageResult,
WalletAccount,
@@ -33,9 +34,9 @@ import {
defaultCallbackFormValues,
eventsToValue,
featuresToList,
memberRoleOptions,
productOptionLabel,
resolveEnabledTab,
rolePermissionOptions,
roleText,
scopeOptions,
tabFromSearch,
@@ -58,6 +59,7 @@ export default function MerchantCenter({ fixedTab, title = '商户中心' }: Mer
const routeTab = useMemo(() => fixedTab ?? tabFromSearch(location.search), [fixedTab, location.search])
const [merchant, setMerchant] = useState<Merchant | null>(null)
const [merchantRole, setMerchantRole] = useState<MerchantMember['role']>()
const [merchantPermissions, setMerchantPermissions] = useState<string[]>([])
const [activeTab, setActiveTab] = useState<MerchantCenterTab>(routeTab ?? 'products')
const [products, setProducts] = useState<PageResult<MerchantProduct>>({ list: [], total: 0, page: 1, size: 10 })
const [orders, setOrders] = useState<PageResult<FulfillmentOrder>>({ list: [], total: 0, page: 1, size: 10 })
@@ -67,11 +69,14 @@ export default function MerchantCenter({ fixedTab, title = '商户中心' }: Mer
const [apiClients, setApiClients] = useState<ApiClient[]>([])
const [callback, setCallback] = useState<CallbackSubscription | null>(null)
const [members, setMembers] = useState<MerchantMember[]>([])
const [roles, setRoles] = useState<MerchantRole[]>([])
const [loading, setLoading] = useState(false)
const [apiClientOpen, setApiClientOpen] = useState(false)
const [apiCredential, setApiCredential] = useState<ApiCredential | null>(null)
const [callbackCredential, setCallbackCredential] = useState<CallbackCredential | null>(null)
const [memberOpen, setMemberOpen] = useState(false)
const [roleOpen, setRoleOpen] = useState(false)
const [editingRole, setEditingRole] = useState<MerchantRole | null>(null)
const [manualOrderOpen, setManualOrderOpen] = useState(false)
const [manualOrderSubmitting, setManualOrderSubmitting] = useState(false)
const [manualOrderProducts, setManualOrderProducts] = useState<MerchantProduct[]>([])
@@ -80,10 +85,15 @@ export default function MerchantCenter({ fixedTab, title = '商户中心' }: Mer
const [apiClientForm] = Form.useForm()
const [callbackForm] = Form.useForm()
const [memberForm] = Form.useForm()
const [roleForm] = Form.useForm()
const [manualOrderForm] = Form.useForm()
const canManage = merchantRole === 'owner' || merchantRole === 'operator'
const canFinance = merchantRole === 'owner' || merchantRole === 'finance'
const hasPermission = useCallback((permission: string) => merchantPermissions.includes(permission), [merchantPermissions])
const canManage = hasPermission('products:manage')
const canOrderManage = hasPermission('orders:manage')
const canAPIManage = hasPermission('api:manage')
const canCallbacksManage = hasPermission('callbacks:manage')
const canFinance = hasPermission('wallet:ledger')
const enabledFeatures = useMemo(() => new Set(featuresToList(merchant?.features)), [merchant?.features])
const hasFeature = useCallback((feature: string) => !merchant || enabledFeatures.has(feature), [enabledFeatures, merchant])
const manualOrderProductOptions = useMemo(() => manualOrderProducts.map((item) => ({
@@ -136,6 +146,12 @@ export default function MerchantCenter({ fixedTab, title = '商户中心' }: Mer
const data = await merchantApi.current()
setMerchant(data.merchant)
setMerchantRole(data.role)
const nextPermissions = [...new Set(data.permissions || [])].sort()
setMerchantPermissions((current) => (
current.length === nextPermissions.length && current.every((value, index) => value === nextPermissions[index])
? current
: nextPermissions
))
return data
}, [])
@@ -152,26 +168,26 @@ export default function MerchantCenter({ fixedTab, title = '商户中心' }: Mer
const loadWallet = useCallback(async (
page = ledger.page,
size = ledger.size,
role = merchantRole,
permissions = merchantPermissions,
filters?: { reference_no?: string; type?: string },
) => {
const walletData = await merchantApi.wallet()
setWallet(walletData)
if (role === 'owner' || role === 'finance') {
if (permissions.includes('wallet:ledger')) {
const ledgerData = await merchantApi.ledger({ page, size, ...filters })
setLedger(ledgerData)
} else {
setLedger({ list: [], total: 0, page, size })
}
}, [ledger.page, ledger.size, merchantRole])
}, [ledger.page, ledger.size, merchantPermissions])
const loadAPIClients = useCallback(async () => {
const clientData = await merchantApi.apiClients()
setApiClients(clientData || [])
}, [])
const loadCallbacks = useCallback(async (role = merchantRole) => {
if (role !== 'owner' && role !== 'operator') {
const loadCallbacks = useCallback(async (permissions = merchantPermissions) => {
if (!permissions.includes('callbacks:manage')) {
setCallback(null)
callbackForm.resetFields()
return
@@ -183,18 +199,20 @@ export default function MerchantCenter({ fixedTab, title = '商户中心' }: Mer
events: eventsToValue(callbackData.events),
status: callbackData.status,
} : defaultCallbackFormValues())
}, [callbackForm, merchantRole])
}, [callbackForm, merchantPermissions])
const loadMembers = useCallback(async (role = merchantRole) => {
if (role !== 'owner' && role !== 'operator') {
const loadMembers = useCallback(async (permissions = merchantPermissions) => {
if (!permissions.includes('members:manage')) {
setMembers([])
setRoles([])
return
}
const memberData = await merchantApi.members()
const [memberData, roleData] = await Promise.all([merchantApi.members(), merchantApi.roles()])
setMembers(memberData || [])
}, [merchantRole])
setRoles(roleData || [])
}, [merchantPermissions])
const loadActiveTab = useCallback(async (role = merchantRole, tab = activeTab) => {
const loadActiveTab = useCallback(async (permissions = merchantPermissions, tab = activeTab) => {
switch (tab) {
case 'products':
await loadProducts()
@@ -203,19 +221,19 @@ export default function MerchantCenter({ fixedTab, title = '商户中心' }: Mer
await loadOrders()
return
case 'wallet':
await loadWallet(undefined, undefined, role)
await loadWallet(undefined, undefined, permissions)
return
case 'api':
await loadAPIClients()
return
case 'callbacks':
await loadCallbacks(role)
await loadCallbacks(permissions)
return
case 'members':
await loadMembers(role)
await loadMembers(permissions)
return
}
}, [activeTab, loadAPIClients, loadCallbacks, loadMembers, loadOrders, loadProducts, loadWallet, merchantRole])
}, [activeTab, loadAPIClients, loadCallbacks, loadMembers, loadOrders, loadProducts, loadWallet, merchantPermissions])
const loadAll = useCallback(async () => {
setLoading(true)
@@ -225,7 +243,7 @@ export default function MerchantCenter({ fixedTab, title = '商户中心' }: Mer
if (!fixedTab && nextTab !== activeTab) {
setActiveTab(nextTab)
}
await loadActiveTab(current.role, nextTab)
await loadActiveTab(current.permissions || [], nextTab)
} catch (e) {
message.error(e instanceof Error ? e.message : '加载失败')
} finally {
@@ -254,7 +272,7 @@ export default function MerchantCenter({ fixedTab, title = '商户中心' }: Mer
const handleWalletFilter = async () => {
const values = await walletFilterForm.validateFields()
loadWallet(1, ledger.size, merchantRole, {
loadWallet(1, ledger.size, merchantPermissions, {
reference_no: values.reference_no || undefined,
type: values.type || undefined,
})
@@ -262,16 +280,16 @@ export default function MerchantCenter({ fixedTab, title = '商户中心' }: Mer
const handleWalletFilterReset = () => {
walletFilterForm.resetFields()
loadWallet(1, ledger.size, merchantRole, {})
loadWallet(1, ledger.size, merchantPermissions, {})
}
const handleLoadLedger = useCallback((page: number, size: number) => {
const values = walletFilterForm.getFieldsValue()
loadWallet(page, size, merchantRole, {
loadWallet(page, size, merchantPermissions, {
reference_no: values.reference_no || undefined,
type: values.type || undefined,
})
}, [loadWallet, merchantRole, walletFilterForm])
}, [loadWallet, merchantPermissions, walletFilterForm])
const newManualClientOrderNo = () => {
const suffix = window.crypto?.randomUUID?.().replaceAll('-', '') || `${Date.now()}${Math.random().toString(36).slice(2)}`
@@ -389,9 +407,10 @@ export default function MerchantCenter({ fixedTab, title = '商户中心' }: Mer
const values = await memberForm.validateFields()
try {
await merchantApi.addMember({
user_id: values.user_id,
username: values.username,
password: values.password,
nickname: values.nickname,
role: values.role,
is_default: values.is_default,
})
setMemberOpen(false)
message.success('成员已添加')
@@ -401,6 +420,23 @@ export default function MerchantCenter({ fixedTab, title = '商户中心' }: Mer
}
}
const submitRole = async () => {
const values = await roleForm.validateFields()
try {
if (editingRole) {
await merchantApi.updateRole(editingRole.id, { name: values.name, permissions: values.permissions || [] })
} else {
await merchantApi.createRole({ ...values, permissions: values.permissions || [] })
}
setRoleOpen(false)
setEditingRole(null)
message.success(editingRole ? '角色已更新' : '角色已创建')
loadMembers()
} catch (e) {
message.error(e instanceof Error ? e.message : '创建失败')
}
}
const toggleAPIClient = async (record: ApiClient) => {
try {
await merchantApi.updateApiClientStatus(record.id, record.status === 'active' ? 'disabled' : 'active')
@@ -426,19 +462,39 @@ export default function MerchantCenter({ fixedTab, title = '商户中心' }: Mer
<ProductsTab loading={loading} products={products} canManage={canManage} onToggleProduct={openProductToggle} onLoadProducts={loadProducts} />
) },
{ key: 'orders', label: '发货订单', disabled: !hasFeature('orders'), children: (
<OrdersTab loading={loading} orders={orders} orderSource={orderSource} canManage={canManage} onCreateManualOrder={openManualOrderCreate} onOrderSourceChange={changeOrderSource} onLoadOrders={loadOrders} onCopyLink={copyDeliveryLink} onOpenLink={openDeliveryLink} onRevokeLink={revokeDeliveryLink} onRestoreLink={restoreDeliveryLink} />
<OrdersTab loading={loading} orders={orders} orderSource={orderSource} canManage={canOrderManage} onCreateManualOrder={openManualOrderCreate} onOrderSourceChange={changeOrderSource} onLoadOrders={loadOrders} onCopyLink={copyDeliveryLink} onOpenLink={openDeliveryLink} onRevokeLink={revokeDeliveryLink} onRestoreLink={restoreDeliveryLink} />
) },
{ key: 'wallet', label: '钱包', disabled: !hasFeature('wallet'), children: (
<WalletTab loading={loading} wallet={wallet} canFinance={canFinance} ledger={ledger} form={walletFilterForm} onFilter={handleWalletFilter} onResetFilter={handleWalletFilterReset} onLoadLedger={handleLoadLedger} />
) },
{ key: 'api', label: 'API 密钥', disabled: !hasFeature('api'), children: (
<ApiKeysTab loading={loading} clients={apiClients} clientMax={apiClientMax} isAdmin={isAdmin} canManage={canManage} form={apiClientForm} onOpenCreate={() => setApiClientOpen(true)} onNavigateDocs={() => navigate('/open-api')} onNavigateDebug={() => navigate('/api-debug')} onToggleClient={toggleAPIClient} onDeleteClient={deleteAPIClient} />
<ApiKeysTab loading={loading} clients={apiClients} clientMax={apiClientMax} isAdmin={isAdmin} canManage={canAPIManage} form={apiClientForm} onOpenCreate={() => setApiClientOpen(true)} onNavigateDocs={() => navigate('/open-api')} onNavigateDebug={() => navigate('/api-debug')} onToggleClient={toggleAPIClient} onDeleteClient={deleteAPIClient} />
) },
{ key: 'callbacks', label: '回调', disabled: !hasFeature('callbacks'), children: (
<CallbacksTab canManage={canManage} callback={callback} form={callbackForm} onSubmit={submitCallback} onRotateSecret={rotateCallbackSecret} />
<CallbacksTab canManage={canCallbacksManage} callback={callback} form={callbackForm} onSubmit={submitCallback} onRotateSecret={rotateCallbackSecret} />
) },
{ key: 'members', label: '成员', children: (
<MembersTab loading={loading} members={members} isOwner={merchantRole === 'owner'} form={memberForm} onOpenAdd={() => setMemberOpen(true)} />
<MembersTab
loading={loading}
members={members}
roles={roles}
canManage={hasPermission('members:manage')}
form={memberForm}
onOpenAdd={() => setMemberOpen(true)}
onOpenCreateRole={() => {
setEditingRole(null)
setRoleOpen(true)
}}
onEditRole={(role) => {
setEditingRole(role)
roleForm.setFieldsValue({
name: role.name,
code: role.code,
permissions: role.permissions.split(',').filter(Boolean),
})
setRoleOpen(true)
}}
/>
) },
]
const fixedTabContent = tabItems.find((item) => item.key === fixedTab)?.children
@@ -541,17 +597,28 @@ export default function MerchantCenter({ fixedTab, title = '商户中心' }: Mer
{callbackCredential && <SecretBlock secret={callbackCredential.secret} />}
</Modal>
<Modal title="添加成员" open={memberOpen} onOk={submitMember} onCancel={() => setMemberOpen(false)} destroyOnClose>
<Modal title="添加员工" open={memberOpen} onOk={submitMember} onCancel={() => setMemberOpen(false)} destroyOnClose>
<Form form={memberForm} layout="vertical" style={{ marginTop: 16 }}>
<Form.Item name="user_id" label="用户 ID" rules={[{ required: true }]}>
<InputNumber min={1} precision={0} style={{ width: '100%' }} />
<Form.Item name="username" label="员工用户名" rules={[{ required: true, min: 3, message: '请输入至少 3 位用户名' }]}>
<Input maxLength={64} />
</Form.Item>
<Form.Item name="role" label="角色" rules={[{ required: true }]}>
<Select options={memberRoleOptions} />
<Form.Item name="password" label="初始密码" rules={[{ required: true, min: 6, message: '密码至少 6 位' }]}>
<Input.Password maxLength={128} />
</Form.Item>
<Form.Item name="is_default" label="默认商户">
<Select options={[{ value: true, label: '是' }, { value: false, label: '否' }]} />
<Form.Item name="nickname" label="员工姓名">
<Input maxLength={64} />
</Form.Item>
<Form.Item name="role" label="团队角色" rules={[{ required: true }]}>
<Select options={roles.map((item) => ({ value: item.code, label: item.name }))} />
</Form.Item>
</Form>
</Modal>
<Modal title={editingRole ? `编辑角色：${editingRole.name}` : '新建团队角色'} open={roleOpen} onOk={submitRole} onCancel={() => { setRoleOpen(false); setEditingRole(null) }} destroyOnClose>
<Form form={roleForm} layout="vertical" style={{ marginTop: 16 }}>
<Form.Item name="name" label="角色名称" rules={[{ required: true }]}><Input maxLength={64} placeholder="例如：客服" /></Form.Item>
{!editingRole && <Form.Item name="code" label="角色编码" rules={[{ required: true, pattern: /^[a-z0-9][a-z0-9-]{1,63}$/, message: '使用 2-64 位小写字母、数字或连字符' }]}><Input maxLength={64} placeholder="例如：support" /></Form.Item>}
<Form.Item name="permissions" label="权限"><Select mode="multiple" options={rolePermissionOptions} /></Form.Item>
</Form>
</Modal>
</div>
frontend/src/pages/PlatformMerchants.tsx
+13 -1
View File
@@ -1,4 +1,5 @@
import { useCallback, useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import {
Button,
Checkbox,
@@ -30,6 +31,7 @@ const featureOptions = [
]
export default function PlatformMerchants() {
const navigate = useNavigate()
const [data, setData] = useState<PageResult<Merchant>>({ list: [], total: 0, page: 1, size: 10 })
const [loading, setLoading] = useState(false)
const [createOpen, setCreateOpen] = useState(false)
@@ -272,7 +274,7 @@ export default function PlatformMerchants() {
{
title: '操作',
key: 'action',
width: 180,
width: 240,
fixed: 'right',
render: (_, record) => (
<Space size={0}>
@@ -284,6 +286,16 @@ export default function PlatformMerchants() {
>
分配商品
</Button>
<Button
type="link"
size="small"
onClick={() => {
localStorage.setItem('merchant_id', String(record.id))
navigate('/merchant-members')
}}
>
成员
</Button>
<Button
type="link"
size="small"
frontend/src/pages/merchantCenterTabs.tsx
+34 -11
View File
@@ -20,6 +20,7 @@ import type {
CallbackSubscription,
FulfillmentOrder,
MerchantMember,
MerchantRole,
MerchantProduct,
PageResult,
WalletAccount,
@@ -31,6 +32,7 @@ import {
money,
orderStatusMap,
pageConfig,
rolePermissionText,
roleText,
scopeLabel,
} from './merchantCenterUtils'
@@ -660,20 +662,27 @@ export function CallbacksTab({
export function MembersTab({
loading,
members,
isOwner,
roles,
canManage,
form,
onOpenAdd,
onOpenCreateRole,
onEditRole,
}: {
loading: boolean
members: MerchantMember[]
isOwner: boolean
roles: MerchantRole[]
canManage: boolean
form: FormInstance
onOpenAdd: () => void
onOpenCreateRole: () => void
onEditRole: (role: MerchantRole) => void
}) {
const roleNames = new Map(roles.map((item) => [item.code, item.name]))
const memberColumns: ColumnsType<MerchantMember> = [
{ title: '用户', dataIndex: ['user', 'username'], render: (_, r) => r.user?.username || `#${r.user_id}` },
{ title: '昵称', dataIndex: ['user', 'nickname'], render: (_, r) => r.user?.nickname || '-' },
{ title: '角色', dataIndex: 'role', width: 120, render: memberRoleTag },
{ title: '角色', dataIndex: 'role', width: 140, render: (value) => <Tag color="blue">{roleNames.get(value) || roleText(value)}</Tag> },
{ title: '默认', dataIndex: 'is_default', width: 80, render: (v) => (v ? <Tag color="blue">默认</Tag> : '-') },
{ title: '状态', dataIndex: 'status', width: 90, render: (v) => (v === 1 ? <Tag color="green">启用</Tag> : <Tag>禁用</Tag>) },
]
@@ -681,14 +690,32 @@ export function MembersTab({
return (
<Space direction="vertical" style={{ width: '100%' }} size="middle">
<Space style={{ width: '100%', justifyContent: 'space-between' }}>
<Typography.Text type="secondary">成员角色独立于平台账号角色。</Typography.Text>
{isOwner && <Button type="primary" icon={<PlusOutlined />} onClick={() => {
<Typography.Text type="secondary">成员仅属于当前商户；角色和权限也在当前商户内独立配置。</Typography.Text>
{canManage && <Space>
<Button onClick={() => {
form.resetFields()
onOpenCreateRole()
}}>新建角色</Button>
<Button type="primary" icon={<PlusOutlined />} onClick={() => {
form.resetFields()
form.setFieldsValue({ role: 'operator' })
onOpenAdd()
}}>添加成员</Button>}
}}>添加员工</Button>
</Space>}
</Space>
<Table rowKey="id" loading={loading} columns={memberColumns} dataSource={members} tableLayout="fixed" />
<Card size="small" title="团队角色">
<Table
rowKey={(role) => role.id || role.code}
size="small"
pagination={false}
dataSource={roles}
columns={[
{ title: '角色', dataIndex: 'name', width: 160, render: (name, role) => <Space><Tag color={role.code === 'owner' ? 'gold' : 'blue'}>{name}</Tag>{role.code === 'owner' && <Typography.Text type="secondary">固定</Typography.Text>}</Space> },
{ title: '权限', dataIndex: 'permissions', render: (permissions) => permissions ? permissions.split(',').map((item: string) => <Tag key={item}>{rolePermissionText(item)}</Tag>) : '-' },
{ title: '操作', width: 90, render: (_, role) => role.code === 'owner' ? '-' : <Button type="link" size="small" disabled={!canManage} onClick={() => onEditRole(role)}>编辑</Button> },
]}
/>
</Card>
</Space>
)
}
@@ -761,10 +788,6 @@ function ledgerTypeTag(value: string) {
return <Tag color={item.color}>{item.text}</Tag>
}
function memberRoleTag(value: MerchantMember['role']) {
return <Tag color={value === 'owner' ? 'gold' : 'blue'}>{roleText(value)}</Tag>
}
function scopesTag(value: string) {
const scopes = (value || '').split(',').filter(Boolean)
if (scopes.length === 0) {
frontend/src/pages/merchantCenterUtils.ts
+16 -1
View File
@@ -12,9 +12,24 @@ export const memberRoleOptions = [
{ value: 'owner', label: '负责人' },
{ value: 'operator', label: '运营' },
{ value: 'finance', label: '财务' },
{ value: 'viewer', label: '只读' },
{ value: 'support', label: '客服' },
]
export const rolePermissionOptions = [
{ value: 'products:manage', label: '商品管理' },
{ value: 'orders:manage', label: '订单与发货管理' },
{ value: 'wallet:view', label: '查看钱包与充值记录' },
{ value: 'wallet:ledger', label: '查看积分明细' },
{ value: 'recharge:manage', label: '申请充值与管理余额告警' },
{ value: 'api:manage', label: '管理 API 密钥' },
{ value: 'callbacks:manage', label: '管理回调' },
{ value: 'members:manage', label: '管理团队成员与角色' },
]
export function rolePermissionText(permission: string) {
return rolePermissionOptions.find((item) => item.value === permission)?.label || permission
}
export const apiClientMax = 5
export const scopeOptions = [