xueteng/video-flow-b
1
0
Fork 0
forked from 77media/video-flow
Code Pull Requests Activity

区分移动端输入框，新增类名，去设置字体大小

Browse Source
This commit is contained in:
北枳 2025-09-30 16:24:53 +08:00
parent 5644f3f11b
commit 41ebf2c447
8 changed files with 18 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/globals.css
View File

@ -307,6 +307,6 @@ body {
} }
} }
textarea, input { .mobile-textarea, .mobile-input {
font-size: 16px !important; font-size: 16px !important;
} }

7
app/signup/page.tsx
View File

@ -9,6 +9,7 @@ import { GoogleLoginButton } from "@/components/ui/google-login-button";
import { Eye, EyeOff, Mail, PartyPopper } from "lucide-react"; import { Eye, EyeOff, Mail, PartyPopper } from "lucide-react";
import { isGoogleLoginEnabled } from "@/lib/server-config"; import { isGoogleLoginEnabled } from "@/lib/server-config";
import { fetchSettingByCode } from "@/api/serversetting"; import { fetchSettingByCode } from "@/api/serversetting";
import { useDeviceType } from "@/hooks/useDeviceType";
export default function SignupPage() { export default function SignupPage() {
const [name, setName] = useState(""); const [name, setName] = useState("");
@ -31,7 +32,7 @@ export default function SignupPage() {
const [showGoogleLogin, setShowGoogleLogin] = useState(false); const [showGoogleLogin, setShowGoogleLogin] = useState(false);
const [showRedirectModal, setShowRedirectModal] = useState(false); const [showRedirectModal, setShowRedirectModal] = useState(false);
const router = useRouter(); const router = useRouter();
const { isMobile } = useDeviceType();
// Handle scroll indicator for small screens and load SSO config // Handle scroll indicator for small screens and load SSO config
React.useEffect(() => { React.useEffect(() => {
try { try {
@ -448,7 +449,7 @@ export default function SignupPage() {
onFocus={() => setEmailFocused(true)} onFocus={() => setEmailFocused(true)}
onBlur={() => setEmailFocused(false)} onBlur={() => setEmailFocused(false)}
required required
className="w-full px-4 py-3 rounded-lg bg-black/30 border border-white/20 text-white placeholder-gray-400 focus:outline-none focus:ring-1 focus:border-custom-blue/80" className={`w-full px-4 py-3 rounded-lg bg-black/30 border border-white/20 text-white placeholder-gray-400 focus:outline-none focus:ring-1 focus:border-custom-blue/80 ${isMobile ? 'mobile-input' : ''}`}
/> />
</div> </div>
@ -473,7 +474,7 @@ export default function SignupPage() {
required required
className={`w-full px-4 py-3 pr-12 rounded-lg bg-black/30 border border-white/20 text-white placeholder-gray-400 focus:outline-none focus:ring-1 focus:border-custom-blue/80 ${ className={`w-full px-4 py-3 pr-12 rounded-lg bg-black/30 border border-white/20 text-white placeholder-gray-400 focus:outline-none focus:ring-1 focus:border-custom-blue/80 ${
passwordError ? "border-red-500/50" : "border-white/20" passwordError ? "border-red-500/50" : "border-white/20"
}`} } ${isMobile ? 'mobile-input' : ''}`}
/> />
<button <button
type="button" type="button"

2
components/ChatInputBox/ChatInputBox.tsx
View File

@ -356,7 +356,7 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
value={script} value={script}
onChange={(e) => setScript(e.target.value)} onChange={(e) => setScript(e.target.value)}
placeholder="Describe the story you want to make..." placeholder="Describe the story you want to make..."
className={`w-full pl-[10px] pr-[10px] py-[14px] rounded-[10px] leading-[20px] text-sm border-none bg-transparent text-white placeholder:text-white/[0.40] focus:outline-none resize-none overflow-y-auto transition-all duration-300 ease-in-out ${isMobile ? '' : 'max-h-[120px]'}`} className={`w-full pl-[10px] pr-[10px] py-[14px] rounded-[10px] leading-[20px] text-sm border-none bg-transparent text-white placeholder:text-white/[0.40] focus:outline-none resize-none overflow-y-auto transition-all duration-300 ease-in-out ${isMobile ? 'mobile-textarea' : 'max-h-[120px]'}`}
style={{ style={{
minHeight: noData ? "128px" : (isMobile ? (isInputFocused ? "96px" : "48px") : "unset"), minHeight: noData ? "128px" : (isMobile ? (isInputFocused ? "96px" : "48px") : "unset"),
maxHeight: isMobile ? (isInputFocused ? "200px" : (persistedMobileMaxHeight ? `${persistedMobileMaxHeight}px` : "120px")) : undefined, maxHeight: isMobile ? (isInputFocused ? "200px" : (persistedMobileMaxHeight ? `${persistedMobileMaxHeight}px` : "120px")) : undefined,

2
components/ChatInputBox/H5PhotoStoryDrawer.tsx
View File

@ -305,7 +305,7 @@ export const H5PhotoStoryDrawer = ({
updateCharacterName(avatar.name, newName); updateCharacterName(avatar.name, newName);
} }
}} }}
className="w-full max-w-[72px] md:max-w-[80px] text-center text-xs md:text-sm text-white/80 bg-transparent border-none outline-none focus:ring-1 focus:ring-blue-400/50 rounded px-1 py-0.5" className="w-full max-w-[72px] md:max-w-[80px] text-center text-xs md:text-sm text-white/80 bg-transparent border-none outline-none focus:ring-1 focus:ring-blue-400/50 rounded px-1 py-0.5 mobile-input"
/> />
</div> </div>
))} ))}

8
components/ChatInputBox/H5TemplateDrawer.tsx
View File

@ -276,7 +276,7 @@ export const H5TemplateDrawer = ({
setSelectedTemplate(updatedTemplate); setSelectedTemplate(updatedTemplate);
}} }}
placeholder={role.user_tips} placeholder={role.user_tips}
className="w-[20rem] px-3 py-2 pr-12 bg-white/0 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30 transition-all duration-200 text-sm" className="w-[20rem] px-3 py-2 pr-12 bg-white/0 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30 transition-all duration-200 text-sm mobile-input"
/> />
<div className="absolute right-2 top-1/2 -translate-y-1/2"> <div className="absolute right-2 top-1/2 -translate-y-1/2">
<ActionButton <ActionButton
@ -404,7 +404,7 @@ export const H5TemplateDrawer = ({
setSelectedTemplate(updatedTemplate); setSelectedTemplate(updatedTemplate);
}} }}
placeholder="Enter description for AI image generation..." placeholder="Enter description for AI image generation..."
className="w-[20rem] px-3 py-2 pr-12 bg-white/0 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30 transition-all duration-200 text-sm" className="w-[20rem] px-3 py-2 pr-12 bg-white/0 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30 transition-all duration-200 text-sm mobile-input"
/> />
<div className="absolute right-2 top-1/2 -translate-y-1/2"> <div className="absolute right-2 top-1/2 -translate-y-1/2">
<ActionButton <ActionButton
@ -576,7 +576,7 @@ export const H5TemplateDrawer = ({
data-alt="h5-template-free-input-top" data-alt="h5-template-free-input-top"
value={selectedTemplate?.freeInput[0].free_input_text || ""} value={selectedTemplate?.freeInput[0].free_input_text || ""}
placeholder={selectedTemplate?.freeInput[0].user_tips || ""} placeholder={selectedTemplate?.freeInput[0].user_tips || ""}
className="w-full flex-1 px-3 py-2 pr-16 bg-white/0 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30 transition-all duration-200 text-sm" className="w-full flex-1 px-3 py-2 pr-16 bg-white/0 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30 transition-all duration-200 text-sm mobile-textarea"
onChange={(e) => { onChange={(e) => {
// 更新自由输入文字字段 // 更新自由输入文字字段
const updatedTemplate = { const updatedTemplate = {
@ -601,7 +601,7 @@ export const H5TemplateDrawer = ({
data-alt="h5-template-free-input-bottom" data-alt="h5-template-free-input-bottom"
value={selectedTemplate.freeInput[0].free_input_text || ""} value={selectedTemplate.freeInput[0].free_input_text || ""}
placeholder={selectedTemplate.freeInput[0].user_tips} placeholder={selectedTemplate.freeInput[0].user_tips}
className="w-full px-3 py-2 pr-12 bg-white/0 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30 transition-all duration-200 text-sm" className="w-full px-3 py-2 pr-12 bg-white/0 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30 transition-all duration-200 text-sm mobile-input"
onChange={(e) => { onChange={(e) => {
const updatedTemplate = { const updatedTemplate = {
...selectedTemplate!, ...selectedTemplate!,

2
components/SmartChatBox/InputBar.tsx
View File

@ -286,7 +286,7 @@ const { isMobile, isTablet, isDesktop } = useDeviceType();
<textarea <textarea
ref={textareaRef} ref={textareaRef}
placeholder="Describe your idea..." placeholder="Describe your idea..."
className="w-full pl-2 pr-2 py-4 rounded-2 leading-4 text-sm border-none bg-transparent text-white placeholder:text-white/[0.40] focus:outline-none resize-none min-h-[48px] max-h-[120px] overflow-y-auto" className={`w-full pl-2 pr-2 py-4 rounded-2 leading-4 text-sm border-none bg-transparent text-white placeholder:text-white/[0.40] focus:outline-none resize-none min-h-[48px] max-h-[120px] overflow-y-auto ${isMobile ? 'mobile-textarea' : ''}`}
rows={1} rows={1}
value={text} value={text}
onChange={(e) => setText(e.target.value)} onChange={(e) => setText(e.target.value)}

2
components/layout/H5TopBar.tsx
View File

@ -388,7 +388,7 @@ export default function H5TopBar({ onSelectHomeTab }: H5TopBarProps) {
value={customAmount} value={customAmount}
onChange={(e) => setCustomAmount(e.target.value)} onChange={(e) => setCustomAmount(e.target.value)}
placeholder="Custom amount" placeholder="Custom amount"
className="w-[120px] h-9 px-2 text-sm bg-white/10 text-black dark:text-white placeholder-black/40 dark:placeholder-white/60 border border-black/20 dark:border-white/20 rounded focus:outline-none" className="w-[120px] h-9 px-2 text-sm bg-white/10 text-black dark:text-white placeholder-black/40 dark:placeholder-white/60 border border-black/20 dark:border-white/20 rounded focus:outline-none mobile-input"
min={1} min={1}
/> />
<button <button

7
components/pages/login.tsx
View File

@ -11,6 +11,7 @@ import { GoogleLoginButton } from "@/components/ui/google-login-button";
import { Eye, EyeOff } from "lucide-react"; import { Eye, EyeOff } from "lucide-react";
import { isGoogleLoginEnabled } from "@/lib/server-config"; import { isGoogleLoginEnabled } from "@/lib/server-config";
import Footer from "@/components/common/Footer"; import Footer from "@/components/common/Footer";
import { useDeviceType } from "@/hooks/useDeviceType";
export default function Login() { export default function Login() {
const [email, setEmail] = useState(""); const [email, setEmail] = useState("");
@ -26,7 +27,7 @@ export default function Login() {
const [showGoogleLogin, setShowGoogleLogin] = useState(false); const [showGoogleLogin, setShowGoogleLogin] = useState(false);
const router = useRouter(); const router = useRouter();
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const { isMobile } = useDeviceType();
/** 密码验证函数 */ /** 密码验证函数 */
/** /**
* Password validation function with English prompts * Password validation function with English prompts
@ -213,7 +214,7 @@ export default function Login() {
<input <input
placeholder="Email" placeholder="Email"
required required
className="form-control" className={`form-control ${isMobile ? 'mobile-input' : ''}`}
type="text" type="text"
value={email} value={email}
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
@ -237,7 +238,7 @@ export default function Login() {
required required
className={`form-control pr-10 ${ className={`form-control pr-10 ${
passwordError ? "border-red-500/50" : "" passwordError ? "border-red-500/50" : ""
}`} } ${isMobile ? 'mobile-input' : ''}`}
type={showPassword ? "text" : "password"} type={showPassword ? "text" : "password"}
value={password} value={password}
onChange={handlePasswordChange} onChange={handlePasswordChange}