feat: 支持视频上传、预览及移动端适配
Some checks failed
test/timeline-frontend/pipeline/head There was a failure building this commit
Some checks failed
test/timeline-frontend/pipeline/head There was a failure building this commit
1. 功能增强: - 支持视频文件的上传、存储及缩略图自动生成 - 新增视频播放组件,支持在画廊和时间线中预览视频 - 引入 STOMP 协议支持 WebSocket 实时通知功能 - 增加分享页面(SSR 友好),支持通过 shareId 访问公开内容 2. 移动端优化: - 新增 BottomNav 底部导航组件,优化移动端交互体验 - 引入 useIsMobile 钩子,实现响应式布局切换 - 优化时间线卡片在小屏幕下的显示效果 3. 架构与组件: - 新增 ClientOnly 组件解决 SSR 激活不一致问题 - 新增 ResponsiveGrid 响应式网格布局组件 - 完善 Nginx 配置,增加 MinIO 对象存储代理 - 优化图片懒加载组件 TimelineImage,支持低分辨率占位图
This commit is contained in:
19
src/components/BottomNav/BottomNav.less
Normal file
19
src/components/BottomNav/BottomNav.less
Normal file
@@ -0,0 +1,19 @@
|
||||
.bottom-nav {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
z-index: 100;
|
||||
|
||||
.ant-menu {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
border: none;
|
||||
|
||||
.ant-menu-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
32
src/components/BottomNav/index.tsx
Normal file
32
src/components/BottomNav/index.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import React from 'react';
|
||||
import { Menu } from 'antd';
|
||||
import { HomeOutlined, UserOutlined, ClockCircleOutlined } from '@ant-design/icons';
|
||||
import { history, useLocation } from '@umijs/max';
|
||||
import './BottomNav.less';
|
||||
|
||||
const BottomNav: React.FC = () => {
|
||||
const location = useLocation();
|
||||
|
||||
const items = [
|
||||
{ key: '/', icon: <HomeOutlined />, label: '首页' },
|
||||
{ key: '/story', icon: <ClockCircleOutlined />, label: '时间线' },
|
||||
{ key: '/profile', icon: <UserOutlined />, label: '我的' },
|
||||
];
|
||||
|
||||
const onClick = (e: any) => {
|
||||
history.push(e.key);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bottom-nav">
|
||||
<Menu
|
||||
onClick={onClick}
|
||||
selectedKeys={[location.pathname]}
|
||||
mode="horizontal"
|
||||
items={items}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BottomNav;
|
||||
Reference in New Issue
Block a user