feat: 移动端响应式增强 (#1266)
* 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>
This commit is contained in:
9 files changed
+308
-17
No files matched your search
@@ -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;
|
||||
}
|
||||
@@ -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}
|
||||
|
||||
+14
-5
@@ -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<any>([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 })
|
||||
// />
|
||||
<Image src="/logo.png" alt="{}" height={10} width={20}></Image>
|
||||
}
|
||||
style={{ justifyContent: 'flex-start' }}
|
||||
style={isCollapsed ? { flexDirection: 'column', paddingLeft: 0, paddingRight: 0, paddingBottom: 0, gap: '8px' } : { justifyContent: 'flex-start' }}
|
||||
text="BILIUP"
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
flexGrow: 1,
|
||||
display: 'flex',
|
||||
display: width <= 640 ? 'none' : 'flex',
|
||||
flexDirection: 'row-reverse',
|
||||
alignSelf: 'flex-end',
|
||||
zIndex: 2,
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -249,7 +249,7 @@ const OverrideModal: React.FC<TemplateModalProps> = ({ children, entity, onOk })
|
||||
title="配置覆写"
|
||||
visible={visible}
|
||||
onOk={handleOk}
|
||||
style={{ width: 600 }}
|
||||
style={{ width: 'min(600px, 90vw)' }}
|
||||
onCancel={handleCancel}
|
||||
bodyStyle={{
|
||||
overflow: 'auto',
|
||||
|
||||
@@ -121,7 +121,7 @@ const TemplateModal: React.FC<TemplateModalProps> = ({ 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<TemplateModalProps> = ({ children, entity, onOk })
|
||||
style={{ width: 176 }}
|
||||
helpText="视频保存格式。不支持stream-gears下载器和Youtube平台。"
|
||||
/>
|
||||
|
||||
|
||||
<Collapse keepDOM>
|
||||
<Collapse.Panel header="更多设置" itemKey="processors">
|
||||
<Form.TimePicker
|
||||
@@ -228,19 +228,19 @@ const TemplateModal: React.FC<TemplateModalProps> = ({ children, entity, onOk })
|
||||
下载器需使用ffmpeg或streamlink
|
||||
</div>
|
||||
}
|
||||
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 }}
|
||||
/>
|
||||
|
||||
|
||||
<ArrayField field="excluded_keywords">
|
||||
{({ add, arrayFields }) => (
|
||||
<Form.Section text="不录制关键词">
|
||||
@@ -271,7 +271,7 @@ const TemplateModal: React.FC<TemplateModalProps> = ({ children, entity, onOk })
|
||||
</Form.Section>
|
||||
)}
|
||||
</ArrayField>
|
||||
|
||||
|
||||
<ArrayField field="preprocessor">
|
||||
{({ add, arrayFields }) => (
|
||||
<Form.Section text="下载前处理">
|
||||
|
||||
@@ -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<Element, MouseEvent> | React.KeyboardEvent<Element>) => void
|
||||
@@ -41,6 +42,7 @@ const UserList: React.FC<UserListProps> = ({ 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<UserListProps> = ({ onCancel, visible }) => {
|
||||
<SideSheet
|
||||
title={<Typography.Title heading={4}>用户管理</Typography.Title>}
|
||||
visible={visible}
|
||||
width={Math.min(448, width ?? Number.MIN_VALUE)}
|
||||
footer={
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
|
||||
<Button
|
||||
@@ -173,6 +176,7 @@ const UserList: React.FC<UserListProps> = ({ onCancel, visible }) => {
|
||||
title="新建"
|
||||
visible={modalVisible}
|
||||
onOk={handleOk}
|
||||
style={{ width: 'min(600px, 90vw)' }}
|
||||
afterClose={handleAfterClose} //>=1.16.0
|
||||
onCancel={handleCancel}
|
||||
closeOnEsc={true}
|
||||
|
||||
@@ -102,14 +102,18 @@ export default function Union() {
|
||||
size="medium"
|
||||
title="文件选择"
|
||||
okText="上传"
|
||||
style={{ width: 'min(600px, 90vw)' }}
|
||||
visible={visibleModal}
|
||||
onOk={handleOk}
|
||||
afterClose={handleAfterClose}
|
||||
onCancel={handleCancel}
|
||||
bodyStyle={{
|
||||
overflow: 'auto',
|
||||
}}
|
||||
closeOnEsc={true}
|
||||
>
|
||||
<Transfer
|
||||
style={{ width: 568, height: 416 }}
|
||||
style={{ height: 416 }}
|
||||
dataSource={data}
|
||||
draggable
|
||||
value={transferData}
|
||||
|
||||
Reference in new issue
Block a user