OmniAI Developer
192be0e701
- 新增 BetaApplicationModal 组件，支持文本输入、单/多选、签字等交互 - 顶部通知铃铛左侧添加「内测申请」按钮（脉冲动画） - 电商功能介绍页等比例放大，减少空白，布局更紧凑 - 右侧卡片区域放大，卡片内容清晰可见
284 lines
12 KiB
TypeScript
284 lines
12 KiB
TypeScript
import { CloseOutlined, ExperimentOutlined } from "@ant-design/icons";
|
||
import { useState } from "react";
|
||
|
||
interface BetaApplicationModalProps {
|
||
open: boolean;
|
||
onClose: () => void;
|
||
}
|
||
|
||
/* ── Form state ── */
|
||
interface BetaFormData {
|
||
name: string;
|
||
phone: string;
|
||
wechat: string;
|
||
industry: string;
|
||
company: string;
|
||
city: string;
|
||
aiTools: string;
|
||
aiDuration: string;
|
||
aiTrack: string;
|
||
aiDirection: string[];
|
||
weeklyUsage: string;
|
||
feedbackWilling: string;
|
||
wantFeature: string[];
|
||
selfStatement: string;
|
||
signature: string;
|
||
agreeRules: boolean;
|
||
}
|
||
|
||
const INITIAL_FORM: BetaFormData = {
|
||
name: "",
|
||
phone: "",
|
||
wechat: "",
|
||
industry: "",
|
||
company: "",
|
||
city: "",
|
||
aiTools: "",
|
||
aiDuration: "",
|
||
aiTrack: "",
|
||
aiDirection: [],
|
||
weeklyUsage: "",
|
||
feedbackWilling: "",
|
||
wantFeature: [],
|
||
selfStatement: "",
|
||
signature: "",
|
||
agreeRules: false,
|
||
};
|
||
|
||
/* ── Option groups (from the docx) ── */
|
||
const AI_DURATION_OPTIONS = ["1年以内", "1-3年", "3-5年", "5年以上"];
|
||
const AI_TRACK_OPTIONS = ["是，长期承接相关业务", "业余创作", "新手学习"];
|
||
const AI_DIRECTION_OPTIONS = [
|
||
"AI短剧批量制作", "漫剧剧情生成", "自媒体短视频", "电商图文及视频素材",
|
||
"MCN商业内容", "企业宣传视频", "个人兴趣创作", "其他",
|
||
];
|
||
const WEEKLY_USAGE_OPTIONS = ["7次及以上", "1-3次", "空闲时间使用"];
|
||
const FEEDBACK_OPTIONS = ["全力配合深度反馈", "简单体验留言", "仅使用不反馈"];
|
||
const WANT_FEATURE_OPTIONS = [
|
||
"一站式短剧漫剧完整AIGC工作流", "电商素材自动化创作流程",
|
||
"多模态智能中枢全能创作", "批量自动化创作流程", "全新未公开AI创作玩法",
|
||
];
|
||
|
||
/* ── Helper: single-select radio group ── */
|
||
function RadioGroup({
|
||
name, options, value, onChange,
|
||
}: {
|
||
name: string;
|
||
options: string[];
|
||
value: string;
|
||
onChange: (v: string) => void;
|
||
}) {
|
||
return (
|
||
<div className="beta-radio-group">
|
||
{options.map((opt) => (
|
||
<label key={opt} className="beta-radio">
|
||
<input
|
||
type="radio"
|
||
name={name}
|
||
checked={value === opt}
|
||
onChange={() => onChange(opt)}
|
||
/>
|
||
<span>{opt}</span>
|
||
</label>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/* ── Helper: multi-select checkbox group ── */
|
||
function CheckboxGroup({
|
||
options, value, onChange,
|
||
}: {
|
||
options: string[];
|
||
value: string[];
|
||
onChange: (v: string[]) => void;
|
||
}) {
|
||
return (
|
||
<div className="beta-checkbox-group">
|
||
{options.map((opt) => (
|
||
<label key={opt} className="beta-checkbox">
|
||
<input
|
||
type="checkbox"
|
||
checked={value.includes(opt)}
|
||
onChange={() => {
|
||
if (value.includes(opt)) {
|
||
onChange(value.filter((item) => item !== opt));
|
||
} else {
|
||
onChange([...value, opt]);
|
||
}
|
||
}}
|
||
/>
|
||
<span>{opt}</span>
|
||
</label>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/* ── Helper: text field ── */
|
||
function TextField({
|
||
label, value, onChange, placeholder,
|
||
}: {
|
||
label: string;
|
||
value: string;
|
||
onChange: (v: string) => void;
|
||
placeholder?: string;
|
||
}) {
|
||
return (
|
||
<div className="beta-text-field">
|
||
<span className="beta-text-field__label">{label}</span>
|
||
<input
|
||
type="text"
|
||
className="beta-text-field__input"
|
||
value={value}
|
||
onChange={(e) => onChange(e.target.value)}
|
||
placeholder={placeholder ?? "请填写"}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const BetaApplicationModal = ({ open, onClose }: BetaApplicationModalProps) => {
|
||
const [form, setForm] = useState<BetaFormData>(INITIAL_FORM);
|
||
|
||
const update = <K extends keyof BetaFormData>(key: K, value: BetaFormData[K]) => {
|
||
setForm((prev) => ({ ...prev, [key]: value }));
|
||
};
|
||
|
||
if (!open) return null;
|
||
|
||
return (
|
||
<div className="beta-application-modal" role="dialog" aria-modal="true" aria-labelledby="beta-modal-title">
|
||
<button type="button" className="beta-application-modal__backdrop" onClick={onClose} aria-label="关闭内测申请弹窗" />
|
||
|
||
<section className="beta-application-modal__panel">
|
||
{/* ── Header ── */}
|
||
<header className="beta-modal-header">
|
||
<div className="beta-modal-header__left">
|
||
<ExperimentOutlined className="beta-modal-header__icon" />
|
||
<div>
|
||
<h2 id="beta-modal-title">OmniAI 内测体验官申请表</h2>
|
||
<p className="beta-modal-header__subtitle">封闭限量内测 · 仅限 <strong>30 人</strong> · 赠送 <strong>500 元</strong> 通用调用积分</p>
|
||
</div>
|
||
</div>
|
||
<button type="button" className="beta-modal-header__close" onClick={onClose} aria-label="关闭">
|
||
<CloseOutlined />
|
||
</button>
|
||
</header>
|
||
|
||
{/* ── Body (scrollable document) ── */}
|
||
<div className="beta-modal-body">
|
||
|
||
{/* 一、个人基础信息 */}
|
||
<section className="beta-doc-section">
|
||
<h3 className="beta-doc-section__title">一、个人基础信息</h3>
|
||
<div className="beta-doc-grid">
|
||
<TextField label="姓名 / 常用昵称" value={form.name} onChange={(v) => update("name", v)} />
|
||
<TextField label="联系手机号码" value={form.phone} onChange={(v) => update("phone", v)} />
|
||
<TextField label="微信账号" value={form.wechat} onChange={(v) => update("wechat", v)} />
|
||
<TextField label="所在行业 / 职业" value={form.industry} onChange={(v) => update("industry", v)} />
|
||
<TextField label="所属公司 / 机构" value={form.company} onChange={(v) => update("company", v)} />
|
||
<TextField label="所在城市" value={form.city} onChange={(v) => update("city", v)} />
|
||
</div>
|
||
</section>
|
||
|
||
{/* 二、AI从业与使用经历 */}
|
||
<section className="beta-doc-section">
|
||
<h3 className="beta-doc-section__title">二、AI 从业与使用经历</h3>
|
||
<div className="beta-doc-grid">
|
||
<TextField label="日常常用 AI 创作工具有哪些" value={form.aiTools} onChange={(v) => update("aiTools", v)} placeholder="例如：Midjourney / Stable Diffusion / ChatGPT 等" />
|
||
<div className="beta-form-group">
|
||
<span className="beta-form-group__label">AI 内容创作从业时长</span>
|
||
<RadioGroup name="aiDuration" options={AI_DURATION_OPTIONS} value={form.aiDuration} onChange={(v) => update("aiDuration", v)} />
|
||
</div>
|
||
<div className="beta-form-group">
|
||
<span className="beta-form-group__label">是否深耕 AI 短剧、漫剧、数字视频、电商赛道</span>
|
||
<RadioGroup name="aiTrack" options={AI_TRACK_OPTIONS} value={form.aiTrack} onChange={(v) => update("aiTrack", v)} />
|
||
</div>
|
||
<div className="beta-form-group beta-form-group--full">
|
||
<span className="beta-form-group__label">日常主要创作方向（可多选）</span>
|
||
<CheckboxGroup options={AI_DIRECTION_OPTIONS} value={form.aiDirection} onChange={(v) => update("aiDirection", v)} />
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 三、内测使用意向调研 */}
|
||
<section className="beta-doc-section">
|
||
<h3 className="beta-doc-section__title">三、内测使用意向调研</h3>
|
||
<div className="beta-doc-grid">
|
||
<div className="beta-form-group">
|
||
<span className="beta-form-group__label">每周可稳定登录使用内测平台次数</span>
|
||
<RadioGroup name="weeklyUsage" options={WEEKLY_USAGE_OPTIONS} value={form.weeklyUsage} onChange={(v) => update("weeklyUsage", v)} />
|
||
</div>
|
||
<div className="beta-form-group">
|
||
<span className="beta-form-group__label">是否愿意积极反馈产品 BUG、优化建议、功能需求</span>
|
||
<RadioGroup name="feedback" options={FEEDBACK_OPTIONS} value={form.feedbackWilling} onChange={(v) => update("feedbackWilling", v)} />
|
||
</div>
|
||
<div className="beta-form-group beta-form-group--full">
|
||
<span className="beta-form-group__label">本次最想体验 OmniAI 核心功能（可多选）</span>
|
||
<CheckboxGroup options={WANT_FEATURE_OPTIONS} value={form.wantFeature} onChange={(v) => update("wantFeature", v)} />
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 四、申请自述 */}
|
||
<section className="beta-doc-section">
|
||
<h3 className="beta-doc-section__title">四、申请自述 <em className="beta-required">（必填）</em></h3>
|
||
<p className="beta-doc-section__desc">请简述自身 AI 创作优势、业务需求，以及加入本次封闭内测的理由：</p>
|
||
<textarea
|
||
className="beta-textarea"
|
||
value={form.selfStatement}
|
||
onChange={(e) => update("selfStatement", e.target.value)}
|
||
placeholder="请在此填写您的申请自述（必填）…"
|
||
rows={6}
|
||
/>
|
||
</section>
|
||
|
||
{/* 五、内测规则知情同意书 */}
|
||
<section className="beta-doc-section">
|
||
<h3 className="beta-doc-section__title">五、内测规则知情同意书</h3>
|
||
<ol className="beta-rules-list">
|
||
<li>本次为封闭限量内测，仅限 <strong>30 人</strong>，按照资质匹配度 + 申请顺序筛选；</li>
|
||
<li>内测赠送 <strong>500 元</strong> 通用调用积分，仅限内测期间使用，不可提现、不可转让、不可兑换现金；</li>
|
||
<li>内测版本含未上线测试功能，存在功能不稳定、界面调整、参数优化等情况，申请人自愿理解包容；</li>
|
||
<li>严禁私自泄露内测专属工作流、内部功能、测试接口、未发布技术方案等内部资料；</li>
|
||
<li>审核通过后，官方将在 <strong>48 小时</strong> 内发放内测账号、登录权限及免费积分；</li>
|
||
<li>正式版上线后，优质内测体验官可享受专属永久优惠权限与平台荣誉称号。</li>
|
||
</ol>
|
||
|
||
<label className="beta-agree-row">
|
||
<input
|
||
type="checkbox"
|
||
checked={form.agreeRules}
|
||
onChange={(e) => update("agreeRules", e.target.checked)}
|
||
/>
|
||
<span>本人已完整阅读并同意以上全部内测规则，自愿遵守内测所有管理要求。</span>
|
||
</label>
|
||
|
||
<div className="beta-doc-grid beta-doc-grid--two">
|
||
<TextField label="申请人确认签字" value={form.signature} onChange={(v) => update("signature", v)} placeholder="请签署姓名" />
|
||
<div className="beta-text-field">
|
||
<span className="beta-text-field__label">申请填写日期</span>
|
||
<input type="text" className="beta-text-field__input" value="2026年 月 日" readOnly />
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
|
||
{/* ── Footer ── */}
|
||
<footer className="beta-modal-footer">
|
||
<button type="button" className="beta-modal-footer__btn beta-modal-footer__btn--secondary" onClick={onClose}>
|
||
关闭
|
||
</button>
|
||
<button type="button" className="beta-modal-footer__btn beta-modal-footer__btn--primary" onClick={onClose}>
|
||
提交申请
|
||
</button>
|
||
</footer>
|
||
</section>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default BetaApplicationModal;
|