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;
}

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 { isGoogleLoginEnabled } from "@/lib/server-config";
import { fetchSettingByCode } from "@/api/serversetting";
import { useDeviceType } from "@/hooks/useDeviceType";
export default function SignupPage() {
const [name, setName] = useState("");
@ -31,7 +32,7 @@ export default function SignupPage() {
const [showGoogleLogin, setShowGoogleLogin] = useState(false);
const [showRedirectModal, setShowRedirectModal] = useState(false);
const router = useRouter();
const { isMobile } = useDeviceType();
// Handle scroll indicator for small screens and load SSO config
React.useEffect(() => {
try {
@ -448,7 +449,7 @@ export default function SignupPage() {
onFocus={() => setEmailFocused(true)}
onBlur={() => setEmailFocused(false)}
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>
@ -473,7 +474,7 @@ export default function SignupPage() {
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 ${
passwordError ? "border-red-500/50" : "border-white/20"
}`}
} ${isMobile ? 'mobile-input' : ''}`}
/>
<button
type="button"

2
components/ChatInputBox/ChatInputBox.tsx
View File

@ -356,7 +356,7 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
value={script}
onChange={(e) => setScript(e.target.value)}
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={{
minHeight: noData ? "128px" : (isMobile ? (isInputFocused ? "96px" : "48px") : "unset"),
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);
}
}}
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>
))}

8
components/ChatInputBox/H5TemplateDrawer.tsx
View File

@ -276,7 +276,7 @@ export const H5TemplateDrawer = ({
setSelectedTemplate(updatedTemplate);
}}
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">
<ActionButton
@ -404,7 +404,7 @@ export const H5TemplateDrawer = ({
setSelectedTemplate(updatedTemplate);
}}
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">
<ActionButton
@ -576,7 +576,7 @@ export const H5TemplateDrawer = ({
data-alt="h5-template-free-input-top"
value={selectedTemplate?.freeInput[0].free_input_text || ""}
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) => {
// 更新自由输入文字字段
const updatedTemplate = {
@ -601,7 +601,7 @@ export const H5TemplateDrawer = ({
data-alt="h5-template-free-input-bottom"
value={selectedTemplate.freeInput[0].free_input_text || ""}
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) => {
const updatedTemplate = {
...selectedTemplate!,

2
components/SmartChatBox/InputBar.tsx
View File

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