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

feat(order-service): 优化用户引导图配置与展示

Browse Source
This commit is contained in:
yml2213
2026-11-04 21:26:26 +08:00
parent e3a66309a0
commit 3a557e8bda
9 changed files with 283 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/src/pages/admin/panels/OrderServicePanel.tsx
+47 -13
View File
@@ -71,6 +71,7 @@ type OrderServiceFormValues = {
name: string
title: string
description: string
guideImageDescription: string
submitText: string
successText: string
postSubmitText: string
@@ -230,6 +231,14 @@ function buildPresetFields(keys: string[]) {
})
}
function resolveGuideImage(value: unknown): UploadedFile | null {
if (!value || typeof value !== 'object' || Array.isArray(value)) return null
const source = value as Record<string, unknown>
const url = String(source.url || '').trim()
const objectKey = String(source.objectKey || source.object_key || '').trim()
return url || objectKey ? (value as UploadedFile) : null
}
export default function OrderServicePanel() {
const { message } = App.useApp()
const queryClient = useQueryClient()
@@ -275,7 +284,10 @@ export default function OrderServicePanel() {
).length
const selectedCategory = categories.find((item) => item.categoryId === selectedCategoryId) || null
const profile = (selectedCategoryId ? profileByCategoryId.get(selectedCategoryId) : null) || null
const guideFiles = useMemo(() => (guideImage ? [guideImage as UploadedFile] : []), [guideImage])
const guideFiles = useMemo(() => {
const image = resolveGuideImage(guideImage)
return image ? [image] : []
}, [guideImage])
const handleGuideImageChange = useCallback((files: UploadedFile[]) => {
setGuideImage(files[0] || null)
}, [])
@@ -302,6 +314,7 @@ export default function OrderServicePanel() {
name: nextProfile?.name || selectedCategory?.name || '',
title: nextProfile?.title || '',
description: nextProfile?.description || '',
guideImageDescription: nextProfile?.guideImageDescription || '',
submitText: nextProfile?.submitText || '提交资料',
successText: nextProfile?.successText || '资料已提交，请等待处理',
postSubmitText: nextProfile?.postSubmitText || DEFAULT_POST_SUBMIT_TEXT,
@@ -315,7 +328,7 @@ export default function OrderServicePanel() {
nextProfile ? nextProfile.fields : buildPresetFields(GAME_BASIC_PRESET_KEYS),
),
)
setGuideImage(nextProfile?.guideImage || null)
setGuideImage(resolveGuideImage(nextProfile?.guideImage))
}
async function refresh() {
@@ -413,6 +426,7 @@ export default function OrderServicePanel() {
title: values.title || '',
description: values.description || '',
guideImage: guideImage || {},
guideImageDescription: values.guideImageDescription || '',
fields: normalizedFields,
screenshots: values.screenshots,
autoPublish: values.autoPublish,
@@ -652,7 +666,7 @@ export default function OrderServicePanel() {
/>
</div>
<div className="order-service-basic-grid">
<div>
<div className="order-service-basic-fields">
<Row gutter={[12, 0]}>
<Col xs={24} md={12}>
<Form.Item label="配置名称" name="name" rules={[{ required: true }]}>
@@ -699,16 +713,36 @@ export default function OrderServicePanel() {
</Row>
</div>
<div className="order-service-guide">
<Text strong>用户引导图</Text>
<Text type="secondary">首版一张，展示在字段上方</Text>
<ImageUpload
scene="order-service"
scope="admin"
maxCount={1}
value={guideFiles}
onChange={handleGuideImageChange}
uploader={uploadGuideImage}
/>
<div className="order-service-guide-head">
<Text strong>用户引导图</Text>
<Text type="secondary">
一张，显示在客户页“买家主页截图”上传区右侧，可点击放大查看
</Text>
</div>
<div className="order-service-guide-upload">
<ImageUpload
scene="order-service"
scope="admin"
maxCount={1}
value={guideFiles}
onChange={handleGuideImageChange}
uploader={uploadGuideImage}
/>
</div>
<Form.Item
className="order-service-guide-description"
extra="选填，显示在引导图下方；建议说明截图范围或关键识别信息。"
label="图片说明"
name="guideImageDescription"
>
<Input.TextArea
autoSize={{ minRows: 2, maxRows: 4 }}
disabled={!guideImage}
maxLength={200}
placeholder="例如：请截取买家个人主页，并确认游戏 ID 清晰可见"
showCount
/>
</Form.Item>
</div>
</div>
</section>
apps/frontend/src/pages/public/OrderServicePage.tsx
+43 -26
View File
@@ -601,6 +601,8 @@ function OrderServiceForm({
label: '截图',
helpText: '',
}
const guideImageUrl =
item.guideImage && 'url' in item.guideImage ? String(item.guideImage.url || '').trim() : ''
return (
<Card size="small" className="collect-link-order-card">
@@ -618,14 +620,6 @@ function OrderServiceForm({
{item.title ? <Title level={5}>{item.title}</Title> : null}
{item.description ? <Text type="secondary">{item.description}</Text> : null}
{item.guideImage && 'url' in item.guideImage && item.guideImage.url ? (
<img
alt="填写引导图"
src={String(item.guideImage.url)}
style={{ width: '100%', borderRadius: 8 }}
/>
) : null}
{item.fields && item.fields.length > 0 ? (
<Form layout="vertical" initialValues={item.values || {}} onFinish={onSubmit}>
{item.fields.map((field) => (
@@ -672,24 +666,47 @@ function OrderServiceForm({
}
extra={rule.helpText}
>
<ImageUpload
scene="collect-material"
scope="collect"
maxCount={rule.maxCount}
showPasteHint
captureGlobalPaste
value={screenshots}
onChange={onScreenshotsChange}
uploader={async (file, scene) => {
const response = await uploadOrderServiceFile(
file,
scene,
code,
item.workOrderId,
)
return response.data.file
}}
/>
<div
className={`collect-link-screenshot-control ${guideImageUrl ? 'has-guide' : ''}`}
>
<div className="collect-link-screenshot-upload">
<ImageUpload
scene="collect-material"
scope="collect"
maxCount={rule.maxCount}
showPasteHint
captureGlobalPaste
value={screenshots}
onChange={onScreenshotsChange}
uploader={async (file, scene) => {
const response = await uploadOrderServiceFile(
file,
scene,
code,
item.workOrderId,
)
return response.data.file
}}
/>
</div>
{guideImageUrl ? (
<aside className="collect-link-guide-example">
<Image
alt="买家主页截图填写示例"
height={88}
preview={{ mask: '查看大图' }}
src={guideImageUrl}
width={128}
/>
<div className="collect-link-guide-copy">
<Text strong>截图填写参考</Text>
<Text type="secondary">
{item.guideImageDescription?.trim() || '点击图片可查看大图'}
</Text>
</div>
</aside>
) : null}
</div>
</Form.Item>
) : null}
apps/frontend/src/services/admin/worker-platform.ts
+2
View File
@@ -1143,6 +1143,7 @@ export type AdminOrderServiceProfile = {
title: string
description: string
guideImage: UploadedFile | Record<string, unknown>
guideImageDescription: string
fields: OrderServiceField[]
screenshots: {
enabled: boolean
@@ -1192,6 +1193,7 @@ export function saveAdminOrderServiceProfile(payload: {
title?: string
description?: string
guideImage?: UploadedFile | Record<string, unknown>
guideImageDescription?: string
fields: OrderServiceField[]
screenshots: {
enabled: boolean
apps/frontend/src/services/worker.ts
+1
View File
@@ -613,6 +613,7 @@ export type OrderServiceItem = {
screenshots?: UploadedFile[]
screenshotsRule?: OrderServiceScreenshots
guideImage?: UploadedFile | Record<string, unknown>
guideImageDescription?: string
acceptanceImageUrls?: string[]
acceptanceVideo?: {
url: string
apps/frontend/src/styles/admin.css
+42 -27
View File
@@ -1858,26 +1858,59 @@
.order-service-basic-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 230px;
gap: 18px;
gap: 14px;
}
.order-service-basic-grid .ant-form-item {
margin-bottom: 12px;
}
.order-service-basic-fields {
min-width: 0;
}
.order-service-guide {
display: grid;
grid-template-columns: minmax(180px, 220px) minmax(260px, 1fr);
grid-template-rows: auto 1fr;
align-items: start;
align-content: start;
gap: 4px;
padding: 12px;
gap: 12px 18px;
padding: 14px;
background: #f8fafc;
border: 1px dashed #d9e1ec;
border-radius: 10px;
}
.order-service-guide .ant-upload-wrapper {
margin-top: 6px;
.order-service-guide-head {
grid-column: 1 / -1;
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 4px 10px;
}
.order-service-guide-head .ant-typography:last-child {
font-size: 12px;
}
.order-service-guide-upload {
min-width: 0;
}
.order-service-guide-upload .ant-upload-list-item-container,
.order-service-guide-upload .ant-upload-select {
width: 180px !important;
height: 140px !important;
}
.order-service-guide-description.ant-form-item {
margin-bottom: 0;
}
.order-service-guide-description .ant-form-item-extra {
margin-top: 2px;
font-size: 11px;
}
.order-service-status-step-grid {
@@ -2170,10 +2203,6 @@
grid-template-columns: minmax(120px, 1fr) minmax(140px, 1fr) 110px 64px 104px;
}
.order-service-basic-grid {
grid-template-columns: minmax(0, 1fr) 200px;
}
.order-service-status-step-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@@ -2206,21 +2235,8 @@
padding: 16px 16px 0;
}
.order-service-basic-grid {
grid-template-columns: 1fr;
}
.order-service-guide {
grid-template-columns: minmax(0, 1fr) 160px;
}
.order-service-guide > :not(.ant-upload-wrapper) {
grid-column: 1;
}
.order-service-guide .ant-upload-wrapper {
grid-column: 2;
grid-row: 1 / span 3;
grid-template-columns: minmax(160px, 200px) minmax(0, 1fr);
}
.order-service-section-head {
@@ -2270,12 +2286,11 @@
.order-service-guide {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.order-service-guide > :not(.ant-upload-wrapper),
.order-service-guide .ant-upload-wrapper {
.order-service-guide-head {
grid-column: 1;
grid-row: auto;
}
.order-service-status-step-grid {
apps/frontend/src/styles/client.css
+100
View File
@@ -1060,6 +1060,64 @@
margin-top: 18px;
}
.collect-link-screenshot-control {
display: grid;
gap: 14px;
align-items: start;
}
.collect-link-screenshot-control.has-guide {
grid-template-columns: 120px minmax(180px, 260px);
gap: 16px;
}
.collect-link-guide-example {
display: grid;
grid-template-columns: 1fr;
gap: 6px;
min-width: 0;
max-width: 100%;
align-content: start;
justify-items: start;
}
.collect-link-guide-example .ant-image {
display: block;
width: 128px !important;
height: 88px !important;
overflow: hidden;
border: 1px solid #dbe3ee;
border-radius: 7px;
cursor: zoom-in;
}
.collect-link-guide-example .ant-image-img {
display: block;
width: 128px !important;
height: 88px !important;
object-fit: cover;
object-position: center;
}
.collect-link-guide-copy {
display: grid;
align-content: center;
gap: 3px;
min-width: 0;
}
.collect-link-guide-copy .ant-typography:first-child {
color: #334155;
font-size: 12px;
}
.collect-link-guide-copy .ant-typography:last-child {
max-width: 220px;
font-size: 11px;
line-height: 1.55;
white-space: pre-wrap;
}
.collect-link-actions {
display: flex;
justify-content: flex-end;
@@ -1086,6 +1144,21 @@
padding: 18px;
}
.collect-link-screenshot-control.has-guide {
grid-template-columns: 112px minmax(160px, 220px);
gap: 12px;
}
.collect-link-guide-example .ant-image {
width: 116px !important;
height: 80px !important;
}
.collect-link-guide-example .ant-image-img {
width: 116px !important;
height: 80px !important;
}
.collect-link-actions {
justify-content: stretch;
}
@@ -1104,6 +1177,33 @@
padding: 14px;
}
.collect-link-screenshot-control.has-guide {
grid-template-columns: 104px minmax(0, 1fr);
gap: 8px;
}
.collect-link-guide-example {
gap: 5px;
}
.collect-link-guide-example .ant-image {
width: 96px !important;
height: 68px !important;
}
.collect-link-guide-example .ant-image-img {
width: 96px !important;
height: 68px !important;
}
.collect-link-guide-copy .ant-typography:first-child {
font-size: 11px;
}
.collect-link-guide-copy .ant-typography:last-child {
font-size: 10px;
}
.collect-link-success {
min-height: 320px;
padding: 16px 4px 4px;