feat: 登录注册表单体验优化、工作台滚动按钮交互增强、主题层视觉精修
ProfilePage.tsx（登录/注册表单优化）： - 新增邮箱格式、手机号、密码强度前端校验逻辑 - 输入框内联校验提示（CheckCircleFilled图标+绿色文字） - 登录态展示区增加平台能力Stats（Studio/Assets/Team） - 表单增加kicker标签区分"账户登录"/"新用户注册" - 手机验证码tab标签精简为"手机" WorkbenchPage.tsx（工作台滚动交互增强）： - 新增滚动操作按钮显隐状态管理（scrollActionsVisible/direction） - 滚动时自动展示上下滚动按钮，950ms后自动隐藏 - scrollMessagesToLatest触发时间接展示滚动按钮 - 组件卸载时清理定时器避免内存泄漏 dark-green.css（主题层视觉精修）： - 工作台激活态页面背景增加微光渐变和径向光晕 - 消息表面区域增加内边距和scrollbar-gutter稳定布局 - 消息列表最大宽度约束为1040px，左右padding自适应 - 消息气泡增加边框、背景、阴影层次感 - AI助手气泡与用户气泡差异化背景色 - 头像增加微边框和accent色区分 - 作者标签字号和颜色精细调整
This commit is contained in:
@@ -235,6 +235,9 @@ function ProfilePage({
|
||||
const packageLabel = session?.user.activePackages?.[0]?.name || "按量积分";
|
||||
const avatarUrl = session?.user.avatarUrl || localAvatarUrl || null;
|
||||
const displayedBio = profileBio.trim() || "这个人还没有填写个性签名";
|
||||
const emailLooksValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim());
|
||||
const phoneLooksValid = /^1[3-9]\d{9}$/.test(phone.trim());
|
||||
const passwordLooksReady = password.length >= (mode === "register" ? 6 : 1);
|
||||
|
||||
useEffect(() => {
|
||||
setLocalAvatarUrl(session?.user.avatarUrl || readLocalProfileValue(userId, "avatar"));
|
||||
@@ -812,12 +815,30 @@ function ProfilePage({
|
||||
<source src={AUTH_SHOWCASE_VIDEO_URL} type="video/mp4" />
|
||||
</video>
|
||||
<div className="auth-page__video-overlay">
|
||||
<h1 className="auth-page__brand">OmniAI</h1>
|
||||
<p className="auth-page__tagline">一句话，从创意到成片</p>
|
||||
<div className="auth-page__features">
|
||||
<span>AI 视频生成</span>
|
||||
<span>AI 图片创作</span>
|
||||
<span>AI 电商素材</span>
|
||||
<div className="auth-page__showcase-content">
|
||||
<div className="auth-page__brand-row">
|
||||
<h1 className="auth-page__brand">OmniAI</h1>
|
||||
</div>
|
||||
<p className="auth-page__tagline">一句话，从创意到成片</p>
|
||||
<div className="auth-page__features">
|
||||
<span>AI 视频生成</span>
|
||||
<span>AI 图片创作</span>
|
||||
<span>AI 电商素材</span>
|
||||
</div>
|
||||
<div className="auth-page__showcase-stats" aria-label="平台能力">
|
||||
<span>
|
||||
<strong>Studio</strong>
|
||||
创作工作台
|
||||
</span>
|
||||
<span>
|
||||
<strong>Assets</strong>
|
||||
资产沉淀
|
||||
</span>
|
||||
<span>
|
||||
<strong>Team</strong>
|
||||
团队协作
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -829,6 +850,7 @@ function ProfilePage({
|
||||
<span className="auth-page__logo">
|
||||
<img src={AUTH_LOGO_URL} alt="OmniAI" />
|
||||
</span>
|
||||
<span className="auth-page__form-kicker">{mode === "login" ? "账户登录" : "新用户注册"}</span>
|
||||
<h2 className="auth-page__title">{mode === "login" ? "欢迎回来" : "创建账号"}</h2>
|
||||
<p className="auth-page__subtitle">
|
||||
{mode === "login" ? "登录后继续你的 AI 创作之旅" : "注册即可免费体验全部功能"}
|
||||
@@ -868,7 +890,8 @@ function ProfilePage({
|
||||
<MailOutlined /> 邮箱
|
||||
</button>
|
||||
<button type="button" className={authTab === "phone" ? "is-active" : ""} onClick={() => { setAuthTab("phone"); setFieldErrors({}); }}>
|
||||
<MobileOutlined /> 手机验证码
|
||||
<MobileOutlined />
|
||||
<span className="auth-page__tab-label-short">手机</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -924,6 +947,11 @@ function ProfilePage({
|
||||
autoComplete={mode === "login" ? "current-password" : "new-password"}
|
||||
/>
|
||||
{fieldErrors.password ? <span className="auth-page__field-error">{fieldErrors.password}</span> : null}
|
||||
{mode === "register" && passwordLooksReady && !fieldErrors.password ? (
|
||||
<span className="auth-page__field-hint">
|
||||
<CheckCircleFilled /> 密码长度符合要求
|
||||
</span>
|
||||
) : null}
|
||||
</label>
|
||||
{mode === "login" ? (
|
||||
<div className="auth-page__forgot">
|
||||
@@ -961,6 +989,11 @@ function ProfilePage({
|
||||
autoComplete="email"
|
||||
/>
|
||||
{fieldErrors.email ? <span className="auth-page__field-error">{fieldErrors.email}</span> : null}
|
||||
{emailLooksValid && !fieldErrors.email ? (
|
||||
<span className="auth-page__field-hint">
|
||||
<CheckCircleFilled /> 邮箱格式正确
|
||||
</span>
|
||||
) : null}
|
||||
</label>
|
||||
<label className={`auth-page__field${fieldErrors.password ? " auth-page__field--error" : ""}`}>
|
||||
<span>
|
||||
@@ -975,6 +1008,11 @@ function ProfilePage({
|
||||
autoComplete={mode === "login" ? "current-password" : "new-password"}
|
||||
/>
|
||||
{fieldErrors.password ? <span className="auth-page__field-error">{fieldErrors.password}</span> : null}
|
||||
{mode === "register" && passwordLooksReady && !fieldErrors.password ? (
|
||||
<span className="auth-page__field-hint">
|
||||
<CheckCircleFilled /> 密码长度符合要求
|
||||
</span>
|
||||
) : null}
|
||||
</label>
|
||||
</>
|
||||
) : null}
|
||||
@@ -990,6 +1028,11 @@ function ProfilePage({
|
||||
<input type="tel" value={phone} onChange={(event) => { setPhone(event.target.value); clearFieldError("phone"); }} onBlur={() => handleFieldBlur("phone", phone)} placeholder="输入手机号" autoComplete="tel" />
|
||||
</div>
|
||||
{fieldErrors.phone ? <span className="auth-page__field-error">{fieldErrors.phone}</span> : null}
|
||||
{phoneLooksValid && !fieldErrors.phone ? (
|
||||
<span className="auth-page__field-hint">
|
||||
<CheckCircleFilled /> 手机号格式正确
|
||||
</span>
|
||||
) : null}
|
||||
</label>
|
||||
<label className={`auth-page__field${fieldErrors.smsCode ? " auth-page__field--error" : ""}`}>
|
||||
<span>
|
||||
@@ -1015,6 +1058,11 @@ function ProfilePage({
|
||||
</span>
|
||||
<input type="password" value={password} onChange={(event) => { setPassword(event.target.value); clearFieldError("password"); }} onBlur={() => handleFieldBlur("password", password)} placeholder="至少 6 位" autoComplete="new-password" />
|
||||
{fieldErrors.password ? <span className="auth-page__field-error">{fieldErrors.password}</span> : null}
|
||||
{passwordLooksReady && !fieldErrors.password ? (
|
||||
<span className="auth-page__field-hint">
|
||||
<CheckCircleFilled /> 密码长度符合要求
|
||||
</span>
|
||||
) : null}
|
||||
</label>
|
||||
) : null}
|
||||
</>
|
||||
|
||||
@@ -236,6 +236,7 @@ function WorkbenchPage({
|
||||
const keepaliveTasksRef = useRef<Record<string, WorkbenchKeepaliveTask>>(readStoredKeepaliveTasks());
|
||||
const taskAbortControllersRef = useRef<Map<string, AbortController>>(new Map());
|
||||
const lastScrollTopRef = useRef(0);
|
||||
const scrollActionsHideTimerRef = useRef<number | null>(null);
|
||||
const shouldFollowNewMessagesRef = useRef(true);
|
||||
const pendingScrollToLatestRef = useRef(true);
|
||||
const renderedMessageIdsRef = useRef<string[]>([]);
|
||||
@@ -273,6 +274,8 @@ function WorkbenchPage({
|
||||
const [promptSelectionRange, setPromptSelectionRange] = useState({ start: 0, end: 0 });
|
||||
const [mentionActiveIndex, setMentionActiveIndex] = useState(0);
|
||||
const [composerHidden, setComposerHidden] = useState(false);
|
||||
const [scrollActionsVisible, setScrollActionsVisible] = useState(false);
|
||||
const [scrollActionDirection, setScrollActionDirection] = useState<"top" | "bottom" | null>(null);
|
||||
const [workspaceStarted, setWorkspaceStarted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -441,6 +444,27 @@ function WorkbenchPage({
|
||||
"--accent-glow": `0 0 24px rgba(${accentRgb}, 0.22)`,
|
||||
} as CSSProperties;
|
||||
|
||||
const revealScrollActionsTemporarily = useCallback((direction: "top" | "bottom") => {
|
||||
setScrollActionDirection(direction);
|
||||
setScrollActionsVisible(true);
|
||||
if (scrollActionsHideTimerRef.current !== null) {
|
||||
window.clearTimeout(scrollActionsHideTimerRef.current);
|
||||
}
|
||||
scrollActionsHideTimerRef.current = window.setTimeout(() => {
|
||||
setScrollActionsVisible(false);
|
||||
setScrollActionDirection(null);
|
||||
scrollActionsHideTimerRef.current = null;
|
||||
}, 950);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (scrollActionsHideTimerRef.current !== null) {
|
||||
window.clearTimeout(scrollActionsHideTimerRef.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
const scrollMessagesToLatest = useCallback((behavior: ScrollBehavior = "smooth") => {
|
||||
const scroll = () => {
|
||||
const surface = messagesSurfaceRef.current;
|
||||
@@ -451,6 +475,7 @@ function WorkbenchPage({
|
||||
|
||||
setComposerHidden(false);
|
||||
shouldFollowNewMessagesRef.current = true;
|
||||
revealScrollActionsTemporarily("bottom");
|
||||
surface.scrollTo({ top: surface.scrollHeight, behavior });
|
||||
lastScrollTopRef.current = surface.scrollTop;
|
||||
};
|
||||
@@ -459,7 +484,7 @@ function WorkbenchPage({
|
||||
scroll();
|
||||
window.setTimeout(scroll, 80);
|
||||
});
|
||||
}, []);
|
||||
}, [revealScrollActionsTemporarily]);
|
||||
|
||||
const imageSettingGroups = useMemo<WorkbenchFieldGroup[]>(
|
||||
() => [
|
||||
@@ -1373,6 +1398,9 @@ function WorkbenchPage({
|
||||
const delta = top - lastScrollTopRef.current;
|
||||
const atTop = top <= edgeThreshold;
|
||||
const atBottom = top + surface.clientHeight >= surface.scrollHeight - edgeThreshold;
|
||||
if (surface.scrollHeight > surface.clientHeight + edgeThreshold && Math.abs(delta) > 1) {
|
||||
revealScrollActionsTemporarily(delta > 0 ? "bottom" : "top");
|
||||
}
|
||||
shouldFollowNewMessagesRef.current = atBottom;
|
||||
if (atTop || atBottom) {
|
||||
setComposerHidden(false);
|
||||
@@ -1384,7 +1412,7 @@ function WorkbenchPage({
|
||||
|
||||
surface.addEventListener("scroll", handleScroll, { passive: true });
|
||||
return () => surface.removeEventListener("scroll", handleScroll);
|
||||
}, [hasActivatedWorkspace]);
|
||||
}, [hasActivatedWorkspace, revealScrollActionsTemporarily]);
|
||||
|
||||
const scrollMessagesSurface = useCallback((direction: "top" | "bottom") => {
|
||||
const surface = messagesSurfaceRef.current;
|
||||
@@ -1392,8 +1420,9 @@ function WorkbenchPage({
|
||||
|
||||
const top = direction === "top" ? 0 : surface.scrollHeight;
|
||||
setComposerHidden(false);
|
||||
revealScrollActionsTemporarily(direction);
|
||||
surface.scrollTo({ top, behavior: "smooth" });
|
||||
}, []);
|
||||
}, [revealScrollActionsTemporarily]);
|
||||
|
||||
const closeToolbarMenus = () => setToolbarMenuId(null);
|
||||
const toggleToolbarMenu = (menuId: Exclude<ToolbarMenuId, null>) => {
|
||||
@@ -3022,10 +3051,13 @@ function WorkbenchPage({
|
||||
{renderComposerToolbar(false, isGenerating)}
|
||||
</div>
|
||||
</section>
|
||||
<div className="wb-chat-scroll-actions" aria-label="聊天滚动">
|
||||
<div
|
||||
className={`wb-chat-scroll-actions${scrollActionsVisible ? " is-visible" : ""}${scrollActionDirection ? ` is-${scrollActionDirection}` : ""}`}
|
||||
aria-label="聊天滚动"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="wb-chat-scroll-actions__button"
|
||||
className="wb-chat-scroll-actions__button wb-chat-scroll-actions__button--top"
|
||||
title="返回聊天顶部"
|
||||
aria-label="返回聊天顶部"
|
||||
onClick={() => scrollMessagesSurface("top")}
|
||||
@@ -3034,7 +3066,7 @@ function WorkbenchPage({
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="wb-chat-scroll-actions__button"
|
||||
className="wb-chat-scroll-actions__button wb-chat-scroll-actions__button--bottom"
|
||||
title="到达聊天底部"
|
||||
aria-label="到达聊天底部"
|
||||
onClick={() => scrollMessagesSurface("bottom")}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user