From bec4f72cc659b215f67162d90c9e29d772a778b0 Mon Sep 17 00:00:00 2001 From: Gweesin Chan <42909374+gweesin@users.noreply.github.com> Date: Tue, 29 Apr 2025 02:03:19 +0000 Subject: [PATCH] =?UTF-8?q?feat:=20=E7=A7=BB=E5=8A=A8=E7=AB=AF=E5=93=8D?= =?UTF-8?q?=E5=BA=94=E5=BC=8F=E5=A2=9E=E5=BC=BA=20(#1266)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 弹出层支持响应式宽度 * feat: 优化折叠效果 * feat: 优化移动端折叠体验 * fix: ssr 编译报错 * fix: 修复 PC 切移动端时不会自动折叠的问题 * feat: 支持仅自己可见开关 (#1261) * feat: 支持仅自己可见开关 * fix: 私密视频投稿失败 * chore: 移除迁移脚本 * fix: 修复 is_only_self 覆盖界面原先额外字段配置问题 * fix: ncp and sass should not production dependencies (#1265) * feat: 抖音真原画 (#1267) * feat: 抖音真原画 * add webui option * Update __init__.py --------- Co-authored-by: ForgQi <34411314+ForgQi@users.noreply.github.com> * feat: 优化移动端折叠体验 * chore: rebase master，重新提交 lock --------- Co-authored-by: XuanRan_Nyan <31968665+xxxxuanran@users.noreply.github.com> Co-authored-by: ForgQi <34411314+ForgQi@users.noreply.github.com> --- app/globals.css | 4 + app/history/page.tsx | 1 + app/layout.tsx | 19 ++- app/ui/OverrideModal.tsx | 2 +- app/ui/TemplateModal.tsx | 18 +-- app/ui/UserList.tsx | 4 + app/upload-manager/page.tsx | 6 +- package-lock.json | 270 +++++++++++++++++++++++++++++++++++- package.json | 1 + 9 files changed, 308 insertions(+), 17 deletions(-) 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={