107 lines
3.7 KiB
TypeScript
107 lines
3.7 KiB
TypeScript
import { useEffect, useState } from 'react'
|
|
import { useQuery, useQueryClient } from '@tanstack/react-query'
|
|
import { Alert, App, Button, Card, Form, Input, Space, Typography } from 'antd'
|
|
import { ReloadOutlined } from '@ant-design/icons'
|
|
|
|
import { fetchCrashConfig, updateCrashConfig } from '@/features/admin/api'
|
|
import { AdminPageHeader } from '@/features/admin/components/AdminPageHeader'
|
|
import { useAdminSessionStore } from '@/stores/adminSession'
|
|
|
|
function errorText(error: unknown) {
|
|
const response = (error as { response?: { data?: { message?: string } } })?.response
|
|
return response?.data?.message || (error instanceof Error ? error.message : '请求失败')
|
|
}
|
|
|
|
export function AdminCrashConfigPage() {
|
|
const { message } = App.useApp()
|
|
const queryClient = useQueryClient()
|
|
const [form] = Form.useForm<{ default_qrcode_url: string; order_copy_template: string }>()
|
|
const [saving, setSaving] = useState(false)
|
|
const permissions = useAdminSessionStore(state => state.admin?.permissions)
|
|
const canView = Boolean(permissions?.includes('*') || permissions?.includes('mohong:config'))
|
|
const canManage = Boolean(permissions?.includes('*') || permissions?.includes('mohong:config'))
|
|
|
|
const configQuery = useQuery({
|
|
queryKey: ['admin-crash-config'],
|
|
queryFn: fetchCrashConfig,
|
|
enabled: canView,
|
|
})
|
|
|
|
useEffect(() => {
|
|
if (!configQuery.data) return
|
|
form.setFieldsValue(configQuery.data)
|
|
}, [configQuery.data, form])
|
|
|
|
if (!canView) {
|
|
return (
|
|
<div className="admin-page">
|
|
<AdminPageHeader eyebrow="JIEYOU OPS · 摸红" title="撞车配置" />
|
|
<Alert type="warning" showIcon message="当前账号没有撞车配置权限" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="admin-page">
|
|
<AdminPageHeader
|
|
eyebrow="JIEYOU OPS · 摸红"
|
|
title="撞车配置"
|
|
description="维护撞车订单默认固定二维码与订单一键复制模板。"
|
|
extra={
|
|
<Button
|
|
icon={<ReloadOutlined />}
|
|
loading={configQuery.isFetching}
|
|
onClick={() => void configQuery.refetch()}
|
|
>
|
|
刷新
|
|
</Button>
|
|
}
|
|
/>
|
|
|
|
<Card>
|
|
<Form form={form} layout="vertical" requiredMark={false}>
|
|
<Form.Item
|
|
name="default_qrcode_url"
|
|
label="默认固定二维码图片 URL"
|
|
extra="订单未指定商品二维码时使用该图片"
|
|
>
|
|
<Input placeholder="https://..." />
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="order_copy_template"
|
|
label="订单一键复制模板"
|
|
extra="支持变量：{{order_no}} {{created_at}} {{items}} {{quantity}} {{amount}} {{buyer_name}} {{buyer_phone}}"
|
|
>
|
|
<Input.TextArea rows={8} />
|
|
</Form.Item>
|
|
<Space>
|
|
<Button
|
|
type="primary"
|
|
loading={saving}
|
|
disabled={!canManage}
|
|
onClick={async () => {
|
|
const values = await form.validateFields()
|
|
setSaving(true)
|
|
try {
|
|
await updateCrashConfig(values)
|
|
message.success('配置已保存')
|
|
await queryClient.invalidateQueries({ queryKey: ['admin-crash-config'] })
|
|
} catch (error) {
|
|
message.error(errorText(error))
|
|
} finally {
|
|
setSaving(false)
|
|
}
|
|
}}
|
|
>
|
|
保存配置
|
|
</Button>
|
|
<Typography.Text type="secondary">
|
|
模板留空将回退到后端默认模板
|
|
</Typography.Text>
|
|
</Space>
|
|
</Form>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|