353 lines
13 KiB
TypeScript
353 lines
13 KiB
TypeScript
import { ArrowLeft, CheckCircle2, ImagePlus, Send, X } from 'lucide-react';
|
||
import { useRef, useState } from 'react';
|
||
|
||
import type { ProfileFeedbackEvidenceItemInput } from '../../../packages/shared/src/contracts/runtime';
|
||
|
||
const MIN_FEEDBACK_DESCRIPTION_LENGTH = 10;
|
||
const MAX_FEEDBACK_DESCRIPTION_LENGTH = 200;
|
||
const MAX_FEEDBACK_EVIDENCE_COUNT = 4;
|
||
const MAX_CONTACT_PHONE_LENGTH = 40;
|
||
const MAX_FEEDBACK_EVIDENCE_BYTES = 1_048_576;
|
||
const MAX_FEEDBACK_EVIDENCE_TOTAL_BYTES = 4_194_304;
|
||
|
||
export type PlatformFeedbackPayload = {
|
||
description: string;
|
||
contactPhone?: string | null;
|
||
evidenceItems: ProfileFeedbackEvidenceItemInput[];
|
||
};
|
||
|
||
export type PlatformFeedbackViewProps = {
|
||
onBack: () => void;
|
||
onSubmit?: (payload: PlatformFeedbackPayload) => void | Promise<unknown>;
|
||
};
|
||
|
||
type EvidencePreview = {
|
||
id: string;
|
||
fileName: string;
|
||
contentType: string;
|
||
sizeBytes: number;
|
||
dataUrl: string;
|
||
};
|
||
|
||
function buildEvidencePreviewId(file: File, index: number) {
|
||
return `${file.name}:${file.size}:${file.lastModified}:${index}`;
|
||
}
|
||
|
||
function readFileAsDataUrl(file: File) {
|
||
return new Promise<string>((resolve, reject) => {
|
||
const reader = new FileReader();
|
||
reader.onload = () => {
|
||
if (typeof reader.result === 'string') {
|
||
resolve(reader.result);
|
||
} else {
|
||
reject(new Error('图片读取失败'));
|
||
}
|
||
};
|
||
reader.onerror = () => reject(new Error('图片读取失败'));
|
||
reader.readAsDataURL(file);
|
||
});
|
||
}
|
||
|
||
export function PlatformFeedbackView({
|
||
onBack,
|
||
onSubmit,
|
||
}: PlatformFeedbackViewProps) {
|
||
const evidenceInputRef = useRef<HTMLInputElement | null>(null);
|
||
const [description, setDescription] = useState('');
|
||
const [contactPhone, setContactPhone] = useState('');
|
||
const [evidencePreviews, setEvidencePreviews] = useState<EvidencePreview[]>([]);
|
||
const [error, setError] = useState<string | null>(null);
|
||
const [notice, setNotice] = useState<string | null>(null);
|
||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||
const [submitted, setSubmitted] = useState(false);
|
||
|
||
const descriptionLength = description.length;
|
||
|
||
const showTemporaryNotice = (message: string) => {
|
||
setNotice(message);
|
||
window.setTimeout(() => setNotice(null), 1600);
|
||
};
|
||
|
||
const updateDescription = (value: string) => {
|
||
setDescription(value.slice(0, MAX_FEEDBACK_DESCRIPTION_LENGTH));
|
||
setError(null);
|
||
setSubmitted(false);
|
||
};
|
||
|
||
const updateContactPhone = (value: string) => {
|
||
setContactPhone(value.slice(0, MAX_CONTACT_PHONE_LENGTH));
|
||
setError(null);
|
||
setSubmitted(false);
|
||
};
|
||
|
||
const openEvidencePicker = () => {
|
||
evidenceInputRef.current?.click();
|
||
};
|
||
|
||
const addEvidenceFiles = (files: FileList | null) => {
|
||
const selectedFiles = files ? Array.from(files) : [];
|
||
if (evidenceInputRef.current) {
|
||
evidenceInputRef.current.value = '';
|
||
}
|
||
if (selectedFiles.length === 0) {
|
||
return;
|
||
}
|
||
|
||
if (selectedFiles.some((file) => !file.type.startsWith('image/'))) {
|
||
setError('反馈凭证只支持图片类型');
|
||
return;
|
||
}
|
||
const remainingCount = MAX_FEEDBACK_EVIDENCE_COUNT - evidencePreviews.length;
|
||
if (remainingCount <= 0 || selectedFiles.length > remainingCount) {
|
||
setError('最多上传四张凭证');
|
||
}
|
||
|
||
const nextFiles = selectedFiles.slice(0, Math.max(remainingCount, 0));
|
||
if (nextFiles.length === 0) {
|
||
return;
|
||
}
|
||
|
||
if (nextFiles.some((file) => file.size > MAX_FEEDBACK_EVIDENCE_BYTES)) {
|
||
setError('单张反馈凭证不能超过 1MB');
|
||
return;
|
||
}
|
||
const currentTotalBytes = evidencePreviews.reduce(
|
||
(total, preview) => total + preview.sizeBytes,
|
||
0,
|
||
);
|
||
const nextTotalBytes = nextFiles.reduce(
|
||
(total, file) => total + file.size,
|
||
currentTotalBytes,
|
||
);
|
||
if (nextTotalBytes > MAX_FEEDBACK_EVIDENCE_TOTAL_BYTES) {
|
||
setError('反馈凭证总大小不能超过 4MB');
|
||
return;
|
||
}
|
||
|
||
Promise.all(
|
||
nextFiles.map(async (file, index) => ({
|
||
id: buildEvidencePreviewId(file, evidencePreviews.length + index),
|
||
fileName: file.name,
|
||
contentType: file.type,
|
||
sizeBytes: file.size,
|
||
dataUrl: await readFileAsDataUrl(file),
|
||
})),
|
||
)
|
||
.then((nextPreviews) => {
|
||
setEvidencePreviews((currentPreviews) => [
|
||
...currentPreviews,
|
||
...nextPreviews,
|
||
]);
|
||
setError(null);
|
||
setSubmitted(false);
|
||
})
|
||
.catch((readError: unknown) => {
|
||
setError(readError instanceof Error ? readError.message : '图片读取失败');
|
||
});
|
||
};
|
||
|
||
const removeEvidencePreview = (id: string) => {
|
||
setEvidencePreviews((currentPreviews) =>
|
||
currentPreviews.filter((preview) => preview.id !== id),
|
||
);
|
||
setError(null);
|
||
setSubmitted(false);
|
||
};
|
||
|
||
const submitFeedback = () => {
|
||
if (isSubmitting) {
|
||
return;
|
||
}
|
||
|
||
const trimmedDescription = description.trim();
|
||
const trimmedContactPhone = contactPhone.trim();
|
||
if (trimmedDescription.length < MIN_FEEDBACK_DESCRIPTION_LENGTH) {
|
||
setError('请填写10个字以上的问题描述');
|
||
setSubmitted(false);
|
||
return;
|
||
}
|
||
if (trimmedDescription.length > MAX_FEEDBACK_DESCRIPTION_LENGTH) {
|
||
setError('问题描述不能超过 200 字');
|
||
setSubmitted(false);
|
||
return;
|
||
}
|
||
if (trimmedContactPhone.length > MAX_CONTACT_PHONE_LENGTH) {
|
||
setError('联系电话不能超过 40 字');
|
||
setSubmitted(false);
|
||
return;
|
||
}
|
||
if (evidencePreviews.length > MAX_FEEDBACK_EVIDENCE_COUNT) {
|
||
setError('最多上传四张凭证');
|
||
setSubmitted(false);
|
||
return;
|
||
}
|
||
|
||
setIsSubmitting(true);
|
||
setError(null);
|
||
void Promise.resolve(
|
||
onSubmit?.({
|
||
description: trimmedDescription,
|
||
contactPhone: trimmedContactPhone || null,
|
||
evidenceItems: evidencePreviews.map((preview) => ({
|
||
fileName: preview.fileName,
|
||
contentType: preview.contentType,
|
||
sizeBytes: preview.sizeBytes,
|
||
dataUrl: preview.dataUrl,
|
||
})),
|
||
}),
|
||
)
|
||
.then(() => setSubmitted(true))
|
||
.catch((submitError: unknown) => {
|
||
setSubmitted(false);
|
||
setError(submitError instanceof Error ? submitError.message : '提交失败');
|
||
})
|
||
.finally(() => setIsSubmitting(false));
|
||
};
|
||
|
||
return (
|
||
<div className="platform-page-stage platform-remap-surface min-h-0 flex-1 overflow-y-auto text-[var(--platform-text-strong)]">
|
||
<div className="mx-auto flex min-h-full w-full max-w-[30rem] flex-col px-4 pb-6 pt-4">
|
||
<header className="flex shrink-0 items-center gap-3 pb-3">
|
||
<button
|
||
type="button"
|
||
onClick={onBack}
|
||
aria-label="返回我的页签"
|
||
className="platform-button platform-button--ghost h-10 w-10 shrink-0 justify-center rounded-full p-0"
|
||
>
|
||
<ArrowLeft className="h-[1.125rem] w-[1.125rem]" />
|
||
</button>
|
||
<div className="min-w-0 text-base font-black text-[var(--platform-text-strong)]">
|
||
帮助与反馈
|
||
</div>
|
||
</header>
|
||
|
||
<main className="flex flex-1 flex-col gap-3">
|
||
<div className="text-sm font-semibold text-[var(--platform-text-soft)]">
|
||
反馈问题
|
||
</div>
|
||
|
||
<section className="platform-subpanel rounded-[1.2rem] px-4 py-4">
|
||
<label
|
||
htmlFor="profile-feedback-description"
|
||
className="block text-base font-semibold text-[var(--platform-text-strong)]"
|
||
>
|
||
问题描述
|
||
</label>
|
||
<textarea
|
||
id="profile-feedback-description"
|
||
value={description}
|
||
maxLength={MAX_FEEDBACK_DESCRIPTION_LENGTH}
|
||
onChange={(event) => updateDescription(event.target.value)}
|
||
placeholder="请填写10个字以上的问题描述以便我们提供更好的帮助，温馨提醒您请勿填写身份证号等个人隐私信息。"
|
||
className="mt-3 min-h-[10.5rem] w-full resize-none border-0 bg-transparent text-sm leading-6 text-[var(--platform-text-strong)] outline-none placeholder:text-[var(--platform-text-soft)]"
|
||
/>
|
||
<div className="text-right text-xs text-[var(--platform-text-soft)]">
|
||
{descriptionLength}/{MAX_FEEDBACK_DESCRIPTION_LENGTH}
|
||
</div>
|
||
</section>
|
||
|
||
<section className="platform-subpanel rounded-[1.2rem] px-4 py-4">
|
||
<div className="text-base font-semibold text-[var(--platform-text-strong)]">
|
||
上传凭证(提供问题截图)
|
||
</div>
|
||
<div className="mt-4 flex flex-wrap gap-3">
|
||
{evidencePreviews.map((preview) => (
|
||
<div
|
||
key={preview.id}
|
||
className="relative h-[5.75rem] w-[5.75rem] overflow-hidden rounded-xl border border-[var(--platform-subpanel-border)] bg-[var(--platform-input-fill)]"
|
||
>
|
||
<img
|
||
src={preview.dataUrl}
|
||
alt="反馈凭证预览"
|
||
className="h-full w-full object-cover"
|
||
/>
|
||
<button
|
||
type="button"
|
||
onClick={() => removeEvidencePreview(preview.id)}
|
||
aria-label="移除上传凭证"
|
||
className="absolute right-1 top-1 flex h-5 w-5 items-center justify-center rounded-full bg-black/55 text-white"
|
||
>
|
||
<X className="h-3 w-3" />
|
||
</button>
|
||
</div>
|
||
))}
|
||
{evidencePreviews.length < MAX_FEEDBACK_EVIDENCE_COUNT ? (
|
||
<button
|
||
type="button"
|
||
onClick={openEvidencePicker}
|
||
className="flex h-[5.75rem] w-[5.75rem] flex-col items-center justify-center rounded-xl border border-dashed border-[var(--platform-subpanel-border)] bg-[var(--platform-input-fill)] text-[var(--platform-text-soft)] transition hover:border-[var(--platform-surface-hover-border)] hover:text-[var(--platform-text-strong)]"
|
||
>
|
||
<ImagePlus className="h-6 w-6" />
|
||
<span className="mt-2 text-xs font-medium">上传凭证</span>
|
||
<span className="mt-0.5 text-[11px]">(最多四张)</span>
|
||
</button>
|
||
) : null}
|
||
</div>
|
||
<input
|
||
ref={evidenceInputRef}
|
||
type="file"
|
||
accept="image/*"
|
||
multiple
|
||
className="hidden"
|
||
onChange={(event) => addEvidenceFiles(event.target.files)}
|
||
/>
|
||
</section>
|
||
|
||
<section className="platform-subpanel rounded-[1.2rem] px-4 py-4">
|
||
<label
|
||
htmlFor="profile-feedback-phone"
|
||
className="block text-base font-semibold text-[var(--platform-text-strong)]"
|
||
>
|
||
联系电话
|
||
</label>
|
||
<input
|
||
id="profile-feedback-phone"
|
||
type="tel"
|
||
value={contactPhone}
|
||
maxLength={MAX_CONTACT_PHONE_LENGTH}
|
||
onChange={(event) => updateContactPhone(event.target.value)}
|
||
placeholder="选填，如您填写则将会同步开发者与您联系"
|
||
className="mt-3 w-full border-0 bg-transparent text-sm leading-6 text-[var(--platform-text-strong)] outline-none placeholder:text-[var(--platform-text-soft)]"
|
||
/>
|
||
</section>
|
||
|
||
{error ? (
|
||
<div className="rounded-[1.2rem] border border-[var(--platform-button-danger-border)] bg-[var(--platform-button-danger-fill)] px-4 py-3 text-sm font-medium text-[var(--platform-button-danger-text)]">
|
||
{error}
|
||
</div>
|
||
) : null}
|
||
{submitted ? (
|
||
<div className="flex items-center gap-2 rounded-[1.2rem] border border-[var(--platform-success-border)] bg-[var(--platform-success-bg)] px-4 py-3 text-sm font-medium text-[var(--platform-success-text)]">
|
||
<CheckCircle2 className="h-4 w-4" />
|
||
反馈已提交
|
||
</div>
|
||
) : null}
|
||
{notice ? (
|
||
<div className="rounded-[1.2rem] border border-[var(--platform-cool-border)] bg-[var(--platform-cool-bg)] px-4 py-3 text-sm font-medium text-[var(--platform-cool-text)]">
|
||
{notice}
|
||
</div>
|
||
) : null}
|
||
|
||
<button
|
||
type="button"
|
||
onClick={submitFeedback}
|
||
disabled={isSubmitting}
|
||
className="platform-button platform-button--primary mt-2 h-12 w-full justify-center text-base disabled:cursor-not-allowed disabled:opacity-60"
|
||
>
|
||
<Send className="h-4 w-4" />
|
||
{isSubmitting ? '提交中' : '提交'}
|
||
</button>
|
||
|
||
<button
|
||
type="button"
|
||
onClick={() => showTemporaryNotice('反馈记录暂未开放')}
|
||
className="self-center px-3 py-2 text-sm font-semibold text-[var(--platform-cool-text)]"
|
||
>
|
||
查看反馈与投诉记录
|
||
</button>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|