Skip to content

phsl / new-api

Go to a project
Commit ddd6706c by 1808837298@qq.com
Options

feat: Enhance mobile UI responsiveness and layout for ChannelsTable and SiderBar

parent e28ad368
Showing with 185 additions and 83 deletions
web/src/components/Footer.js
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState, useContext } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { getFooterHTML, getSystemName } from '../helpers'; import { getFooterHTML, getSystemName } from '../helpers';
import { Layout, Tooltip } from '@douyinfe/semi-ui'; import { Layout, Tooltip } from '@douyinfe/semi-ui';
import { StyleContext } from '../context/Style/index.js';
const FooterBar = () => { const FooterBar = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const systemName = getSystemName(); const systemName = getSystemName();
const [footer, setFooter] = useState(getFooterHTML()); const [footer, setFooter] = useState(getFooterHTML());
const [styleState] = useContext(StyleContext);
let remainCheckTimes = 5; let remainCheckTimes = 5;
const loadFooter = () => { const loadFooter = () => {
...@@ -57,7 +59,10 @@ const FooterBar = () => { ...@@ -57,7 +59,10 @@ const FooterBar = () => {
}, []); }, []);
return ( return (
<div style={{ textAlign: 'center' }}> <div style={{
textAlign: 'center',
paddingBottom: styleState?.isMobile ? '112px' : '5px',
}}>
{footer ? ( {footer ? (
<div <div
className='custom-footer' className='custom-footer'
......
web/src/components/PageLayout.js
...@@ -71,7 +71,12 @@ const PageLayout = () => { ...@@ -71,7 +71,12 @@ const PageLayout = () => {
const isSidebarCollapsed = localStorage.getItem('default_collapse_sidebar') === 'true'; const isSidebarCollapsed = localStorage.getItem('default_collapse_sidebar') === 'true';
return ( return (
<Layout style={{ height: '100vh', display: 'flex', flexDirection: 'column' }}> <Layout style={{
height: '100vh',
display: 'flex',
flexDirection: 'column',
overflow: 'hidden'
}}>
<Header style={{ <Header style={{
padding: 0, padding: 0,
height: 'auto', height: 'auto',
...@@ -87,44 +92,49 @@ const PageLayout = () => { ...@@ -87,44 +92,49 @@ const PageLayout = () => {
<Layout style={{ <Layout style={{
marginTop: '56px', marginTop: '56px',
height: 'calc(100vh - 56px)', height: 'calc(100vh - 56px)',
overflow: styleState.isMobile ? 'auto' : 'hidden' overflow: 'auto',
display: 'flex',
flexDirection: 'column'
}}> }}>
{styleState.showSider && ( {styleState.showSider && (
<Sider style={{ <Sider style={{
height: 'calc(100vh - 56px)',
position: 'fixed', position: 'fixed',
left: 0, left: 0,
top: '56px', top: '56px',
zIndex: 90, zIndex: 99,
overflowY: 'auto', background: 'var(--semi-color-bg-1)',
overflowX: 'hidden', boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
width: 'auto',
background: 'transparent',
boxShadow: 'none',
border: 'none', border: 'none',
paddingRight: '5px' paddingRight: '0',
transition: 'transform 0.3s ease',
height: 'calc(100vh - 56px)',
}}> }}>
<SiderBar /> <SiderBar />
</Sider> </Sider>
)} )}
<Layout style={{ <Layout style={{
marginLeft: styleState.showSider ? (isSidebarCollapsed ? '60px' : '200px') : '0', marginLeft: styleState.isMobile ? '0' : (styleState.showSider ? (isSidebarCollapsed ? '60px' : '200px') : '0'),
transition: 'margin-left 0.3s ease', transition: 'margin-left 0.3s ease',
height: '100%', flex: '1 1 auto',
overflow: 'auto' display: 'flex',
flexDirection: 'column'
}}> }}>
<Content <Content
style={{ style={{
height: '100%', flex: '1 0 auto',
overflowY: 'auto', overflowY: 'auto',
WebkitOverflowScrolling: 'touch', WebkitOverflowScrolling: 'touch',
padding: styleState.shouldInnerPadding? '24px': '0', padding: styleState.shouldInnerPadding? '24px': '0',
position: 'relative' position: 'relative',
paddingBottom: styleState.isMobile ? '80px' : '0' // 移动端底部额外内边距
}} }}
> >
<App /> <App />
</Content> </Content>
<Layout.Footer> <Layout.Footer style={{
flex: '0 0 auto',
width: '100%'
}}>
<FooterBar /> <FooterBar />
</Layout.Footer> </Layout.Footer>
</Layout> </Layout>
......
web/src/components/SiderBar.js
...@@ -33,6 +33,7 @@ import { setStatusData } from '../helpers/data.js'; ...@@ -33,6 +33,7 @@ import { setStatusData } from '../helpers/data.js';
import { stringToColor } from '../helpers/render.js'; import { stringToColor } from '../helpers/render.js';
import { useSetTheme, useTheme } from '../context/Theme/index.js'; import { useSetTheme, useTheme } from '../context/Theme/index.js';
import { StyleContext } from '../context/Style/index.js'; import { StyleContext } from '../context/Style/index.js';
import Text from '@douyinfe/semi-ui/lib/es/typography/text';
// 自定义侧边栏按钮样式 // 自定义侧边栏按钮样式
const navItemStyle = { const navItemStyle = {
...@@ -298,16 +299,16 @@ const SiderBar = () => { ...@@ -298,16 +299,16 @@ const SiderBar = () => {
className="custom-sidebar-nav" className="custom-sidebar-nav"
style={{ style={{
width: isCollapsed ? '60px' : '200px', width: isCollapsed ? '60px' : '200px',
height: '100%', boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
boxShadow: '0 1px 6px rgba(0, 0, 0, 0.08)',
borderRight: '1px solid var(--semi-color-border)', borderRight: '1px solid var(--semi-color-border)',
background: 'var(--semi-color-bg-0)', background: 'var(--semi-color-bg-1)',
borderRadius: '0 8px 8px 0', borderRadius: styleState.isMobile ? '0' : '0 8px 8px 0',
transition: 'all 0.3s ease', transition: 'all 0.3s ease',
position: 'relative', position: 'relative',
zIndex: 95, zIndex: 95,
height: '100%',
overflowY: 'auto', overflowY: 'auto',
WebkitOverflowScrolling: 'touch' // Improve scrolling on iOS devices WebkitOverflowScrolling: 'touch', // Improve scrolling on iOS devices
}} }}
defaultIsCollapsed={ defaultIsCollapsed={
localStorage.getItem('default_collapse_sidebar') === 'true' localStorage.getItem('default_collapse_sidebar') === 'true'
...@@ -419,7 +420,7 @@ const SiderBar = () => { ...@@ -419,7 +420,7 @@ const SiderBar = () => {
<Divider style={dividerStyle} /> <Divider style={dividerStyle} />
{/* Workspace Section */} {/* Workspace Section */}
{!isCollapsed && <div style={groupLabelStyle}>{t('控制台')}</div>} {!isCollapsed && <Text style={groupLabelStyle}>{t('控制台')}</Text>}
{workspaceItems.map((item) => ( {workspaceItems.map((item) => (
<Nav.Item <Nav.Item
key={item.itemKey} key={item.itemKey}
...@@ -436,7 +437,7 @@ const SiderBar = () => { ...@@ -436,7 +437,7 @@ const SiderBar = () => {
<Divider style={dividerStyle} /> <Divider style={dividerStyle} />
{/* Admin Section */} {/* Admin Section */}
{!isCollapsed && <div style={groupLabelStyle}>{t('管理员')}</div>} {!isCollapsed && <Text style={groupLabelStyle}>{t('管理员')}</Text>}
{adminItems.map((item) => ( {adminItems.map((item) => (
<Nav.Item <Nav.Item
key={item.itemKey} key={item.itemKey}
...@@ -453,7 +454,7 @@ const SiderBar = () => { ...@@ -453,7 +454,7 @@ const SiderBar = () => {
<Divider style={dividerStyle} /> <Divider style={dividerStyle} />
{/* Finance Management Section */} {/* Finance Management Section */}
{!isCollapsed && <div style={groupLabelStyle}>{t('个人中心')}</div>} {!isCollapsed && <Text style={groupLabelStyle}>{t('个人中心')}</Text>}
{financeItems.map((item) => ( {financeItems.map((item) => (
<Nav.Item <Nav.Item
key={item.itemKey} key={item.itemKey}
...@@ -465,12 +466,10 @@ const SiderBar = () => { ...@@ -465,12 +466,10 @@ const SiderBar = () => {
))} ))}
<Nav.Footer <Nav.Footer
collapseButton={true}
style={{ style={{
borderTop: '1px solid var(--semi-color-border)', paddingBottom: styleState?.isMobile ? '112px' : '0',
padding: '12px 0',
marginTop: 'auto'
}} }}
collapseButton={true}
collapseText={(collapsed)=> collapseText={(collapsed)=>
{ {
if(collapsed){ if(collapsed){
......
web/src/index.css
...@@ -82,6 +82,16 @@ body { ...@@ -82,6 +82,16 @@ body {
.semi-navigation-horizontal .semi-navigation-header { .semi-navigation-horizontal .semi-navigation-header {
margin-right: 0; margin-right: 0;
} }
/* 确保移动端内容可滚动 */
.semi-layout-content {
-webkit-overflow-scrolling: touch !important;
}
/* 隐藏在移动设备上 */
.hide-on-mobile {
display: none !important;
}
} }
.semi-table-tbody > .semi-table-row > .semi-table-row-cell { .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
...@@ -162,14 +172,14 @@ code { ...@@ -162,14 +172,14 @@ code {
} }
} }
.semi-navigation-vertical { /*.semi-navigation-vertical {*/
/*flex: 0 0 auto;*/ /* !*flex: 0 0 auto;*!*/
/*display: flex;*/ /* !*display: flex;*!*/
/*flex-direction: column;*/ /* !*flex-direction: column;*!*/
/*width: 100%;*/ /* !*width: 100%;*!*/
height: 100%; /* height: 100%;*/
overflow: hidden; /* overflow: hidden;*/
} /*}*/
.main-content { .main-content {
padding: 4px; padding: 4px;
...@@ -184,12 +194,6 @@ code { ...@@ -184,12 +194,6 @@ code {
font-size: 1.1em; font-size: 1.1em;
} }
@media only screen and (max-width: 600px) {
.hide-on-mobile {
display: none !important;
}
}
/* 顶部栏样式 */ /* 顶部栏样式 */
.topnav { .topnav {
padding: 0 16px; padding: 0 16px;
...@@ -248,8 +252,9 @@ code { ...@@ -248,8 +252,9 @@ code {
} }
/* Custom sidebar shadow */ /* Custom sidebar shadow */
.custom-sidebar-nav { /*.custom-sidebar-nav {*/
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08) !important; /* box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08) !important;*/
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08) !important; /* -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08) !important;*/
-moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08) !important; /* -moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08) !important;*/
} /* min-height: 100%;*/
/*}*/
web/vite.config.js
...@@ -52,6 +52,7 @@ export default defineConfig({ ...@@ -52,6 +52,7 @@ export default defineConfig({
}, },
}, },
server: { server: {
host: '0.0.0.0',
proxy: { proxy: {
'/api': { '/api': {
target: 'http://localhost:3000', target: 'http://localhost:3000',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment