diff --git a/app/globals.css b/app/globals.css index 9be8b01..664efb9 100644 --- a/app/globals.css +++ b/app/globals.css @@ -64,3 +64,7 @@ body::-webkit-scrollbar-thumb:hover, html::-webkit-scrollbar-thumb:hover { background: var(--semi-color-fill-1) } + +.semi-navigation-header-logo { + width: fit-content !important; +} \ No newline at end of file diff --git a/app/history/page.tsx b/app/history/page.tsx index a9eb44b..fe5b020 100644 --- a/app/history/page.tsx +++ b/app/history/page.tsx @@ -110,6 +110,7 @@ export default function Home() { visible={visible} onCancel={handleCancel} closeOnEsc={true} + style={{ width: 'min(600px, 90vw)' }} size="large" bodyStyle={{ height: 500 }} footer={null} diff --git a/app/layout.tsx b/app/layout.tsx index c93343b..af4a2fd 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,7 +1,7 @@ 'use client' import './globals.css' import styles from './page.module.css' -import { useCallback, useMemo, useState } from 'react' +import { useCallback, useMemo, useState, useEffect } from 'react' import Link from 'next/link' import { usePathname } from 'next/navigation' import { Button, Nav } from '@douyinfe/semi-ui' @@ -21,6 +21,7 @@ import { import Image from 'next/image' import ThemeButton from './ui/ThemeButton' import { useSystemTheme, useTheme } from './lib/utils' +import { useWindowSize } from 'react-use'; export default function RootLayout({ children }: { children: React.ReactNode }) { const { Sider } = SeLayout @@ -32,7 +33,9 @@ export default function RootLayout({ children }: { children: React.ReactNode }) const [openKeys, setOpenKeys] = useState(initOpenKeys) const [selectedKeys, setSelectedKeys] = useState([pathname.slice(1)]) - const [isCollapsed, setIsCollapsed] = useState(false) + + const { width } = useWindowSize() + const [isCollapsed, setIsCollapsed] = useState(width <= 640) const [mode, setMode] = useState( (typeof window !== 'undefined' && localStorage.getItem('mode')) || 'auto' ) @@ -40,6 +43,13 @@ export default function RootLayout({ children }: { children: React.ReactNode }) useTheme(mode, systemTheme) let navStyle = isCollapsed ? { height: '100%', overflow: 'visible' } : { height: '100%' } + // 兼容 PC 切移动端 + useEffect(() => { + if (width <= 640) { + setIsCollapsed(true) + } + }, [width]); + const items = useMemo( () => [ @@ -261,15 +271,14 @@ export default function RootLayout({ children }: { children: React.ReactNode }) // /> {} } - style={{ justifyContent: 'flex-start' }} + style={isCollapsed ? { flexDirection: 'column', paddingLeft: 0, paddingRight: 0, paddingBottom: 0, gap: '8px' } : { justifyContent: 'flex-start' }} text="BILIUP" >
diff --git a/app/ui/OverrideModal.tsx b/app/ui/OverrideModal.tsx index ffd31c5..3a5e804 100644 --- a/app/ui/OverrideModal.tsx +++ b/app/ui/OverrideModal.tsx @@ -249,7 +249,7 @@ const OverrideModal: React.FC = ({ children, entity, onOk }) title="配置覆写" visible={visible} onOk={handleOk} - style={{ width: 600 }} + style={{ width: 'min(600px, 90vw)' }} onCancel={handleCancel} bodyStyle={{ overflow: 'auto', diff --git a/app/ui/TemplateModal.tsx b/app/ui/TemplateModal.tsx index b6924c9..657dd73 100644 --- a/app/ui/TemplateModal.tsx +++ b/app/ui/TemplateModal.tsx @@ -121,7 +121,7 @@ const TemplateModal: React.FC = ({ children, entity, onOk }) title="录播管理" visible={visible} onOk={handleOk} - style={{ width: 600 }} + style={{ width: 'min(600px, 90vw)' }} onCancel={handleCancel} bodyStyle={{ overflow: 'auto', @@ -215,7 +215,7 @@ const TemplateModal: React.FC = ({ children, entity, onOk }) style={{ width: 176 }} helpText="视频保存格式。不支持stream-gears下载器和Youtube平台。" /> - + = ({ children, entity, onOk }) 下载器需使用ffmpeg或streamlink
} - label={{ - text: '录制时间范围', - optional: true, - style: { + label={{ + text: '录制时间范围', + optional: true, + style: { fontSize: '18px', marginBottom: '4px', paddingBottom: '8px', borderBottom: '1px solid var(--semi-color-border)', - } + } }} style={{ width: 176 }} /> - + {({ add, arrayFields }) => ( @@ -271,7 +271,7 @@ const TemplateModal: React.FC = ({ children, entity, onOk }) )} - + {({ add, arrayFields }) => ( diff --git a/app/ui/UserList.tsx b/app/ui/UserList.tsx index 209ea04..f691a28 100644 --- a/app/ui/UserList.tsx +++ b/app/ui/UserList.tsx @@ -29,6 +29,7 @@ import { FormApi } from '@douyinfe/semi-ui/lib/es/form' import useSWRMutation from 'swr/mutation' import { useBiliUsers } from '../lib/use-streamers' import QRcode from '@/app/ui/QRcode' +import { useWindowSize } from 'react-use'; type UserListProps = { onCancel?: (e: React.MouseEvent | React.KeyboardEvent) => void @@ -41,6 +42,7 @@ const UserList: React.FC = ({ onCancel, visible }) => { const { biliUsers: list } = useBiliUsers() const [modalVisible, setVisible] = useState(false) const [confirmLoading, setConfirmLoading] = useState(false) + const { width } = useWindowSize() const showDialog = () => { setVisible(true) } @@ -131,6 +133,7 @@ const UserList: React.FC = ({ onCancel, visible }) => { 用户管理} visible={visible} + width={Math.min(448, width ?? Number.MIN_VALUE)} footer={