Merge branch 'main' of gitee.com:wg123/video-gen into main
This commit is contained in:
18610128193
@@ -3,7 +3,7 @@ import {
|
||||
Button, Card, Space, Table, Tag, Typography, message, Modal, Form, Input, Select, InputNumber,
|
||||
} from 'antd';
|
||||
import {
|
||||
HistoryOutlined, ReloadOutlined, PlusOutlined, EyeOutlined, EditOutlined, DeleteOutlined,
|
||||
MenuOutlined, ReloadOutlined, PlusOutlined, EyeOutlined, EditOutlined, DeleteOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { getOauthAppList, createOauthApp, getOauthApp, updateOauthApp, deleteOauthApp } from '../api';
|
||||
import { formatDate } from '../utils/formatDate';
|
||||
@@ -41,7 +41,7 @@ const AdminOauthAppList: React.FC = () => {
|
||||
setApps(res.items || []);
|
||||
setTotal(res.total || 0);
|
||||
} catch {
|
||||
message.error('加载授权应用列表失败');
|
||||
message.error('加载应用管理列表失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
@@ -119,7 +119,7 @@ const AdminOauthAppList: React.FC = () => {
|
||||
const handleDelete = (id: string) => {
|
||||
Modal.confirm({
|
||||
title: '确认删除',
|
||||
content: '确定要删除这个授权应用吗？',
|
||||
content: '确定要删除这个应用管理吗？',
|
||||
okText: '删除',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
@@ -206,8 +206,8 @@ const AdminOauthAppList: React.FC = () => {
|
||||
<Card variant="outlined" style={{ borderRadius: 12, border: '1px solid #f0f0f5' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
|
||||
<Space>
|
||||
<HistoryOutlined style={{ fontSize: 18, color: '#6366f1' }} />
|
||||
<Typography.Text strong style={{ fontSize: 16 }}>授权应用列表</Typography.Text>
|
||||
<MenuOutlined style={{ fontSize: 18, color: '#6366f1' }} />
|
||||
<Typography.Text strong style={{ fontSize: 16 }}>应用管理列表</Typography.Text>
|
||||
</Space>
|
||||
<Space>
|
||||
<Button icon={<ReloadOutlined />} onClick={() => load()}>刷新</Button>
|
||||
@@ -231,7 +231,7 @@ const AdminOauthAppList: React.FC = () => {
|
||||
</Card>
|
||||
|
||||
<Modal
|
||||
title="创建授权应用"
|
||||
title="创建应用管理"
|
||||
open={createModalVisible}
|
||||
onOk={handleCreate}
|
||||
onCancel={() => {
|
||||
@@ -299,7 +299,7 @@ const AdminOauthAppList: React.FC = () => {
|
||||
</Modal>
|
||||
|
||||
<Modal
|
||||
title="授权应用详情"
|
||||
title="应用管理详情"
|
||||
open={detailModalVisible}
|
||||
onCancel={() => {
|
||||
setDetailModalVisible(false);
|
||||
@@ -333,7 +333,7 @@ const AdminOauthAppList: React.FC = () => {
|
||||
</Modal>
|
||||
|
||||
<Modal
|
||||
title="更新授权应用"
|
||||
title="更新应用管理"
|
||||
open={updateModalVisible}
|
||||
onOk={handleSaveUpdate}
|
||||
onCancel={() => {
|
||||
|
||||
@@ -163,10 +163,10 @@ const AuthorizationPage: React.FC = () => {
|
||||
}));
|
||||
|
||||
return (
|
||||
<div style={{ padding: 24, minHeight: '94vh', background: '#f8fafc' }}>
|
||||
<div style={{ padding: 12, minHeight: '94vh', background: '#f8fafc' }}>
|
||||
{/* 页面标题 */}
|
||||
<div style={{ marginBottom: 20 }}>
|
||||
<h1 style={{ fontSize: 24, fontWeight: 600, color: '#1e293b', marginBottom: 8 }}>
|
||||
<div>
|
||||
<h1 style={{lineHeight: '28px', fontSize: 24, fontWeight: 600, color: '#1e293b', marginBottom: 8, marginTop: 0 }}>
|
||||
授权管理
|
||||
</h1>
|
||||
</div>
|
||||
@@ -175,13 +175,11 @@ const AuthorizationPage: React.FC = () => {
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 12, marginBottom: 16 }}>
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
size="medium"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={handleAuthorize}
|
||||
loading={loading}
|
||||
style={{
|
||||
height: 40,
|
||||
padding: '0 24px',
|
||||
borderRadius: 8,
|
||||
fontSize: 14,
|
||||
fontWeight: 500,
|
||||
|
||||
@@ -258,13 +258,12 @@ const GeneratedRecord: React.FC = () => {
|
||||
style={{
|
||||
width: 160,
|
||||
height: 120,
|
||||
position: 'relative',
|
||||
borderRadius: 4,
|
||||
overflow: 'hidden',
|
||||
cursor: 'pointer',
|
||||
overflow: 'hidden',
|
||||
boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
|
||||
transition: 'transform 0.2s, box-shadow 0.2s',
|
||||
position: 'relative',
|
||||
backgroundColor: '#f1f5f9',
|
||||
}}
|
||||
onClick={!isSelectionMode ? onClick : undefined}
|
||||
onMouseEnter={(e) => {
|
||||
@@ -280,49 +279,6 @@ const GeneratedRecord: React.FC = () => {
|
||||
}
|
||||
}}
|
||||
>
|
||||
{/* 加载占位符 - 显示渐变背景和加载状态 */}
|
||||
{!isLoading && !isLoaded && !isError && (
|
||||
<div style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
background: 'linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%)',
|
||||
}}>
|
||||
<div style={{
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: 8,
|
||||
backgroundColor: '#cbd5e1',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}>
|
||||
{mediaType === 'video' ? (
|
||||
<VideoCameraOutlined style={{ color: '#64748b', fontSize: 16 }} />
|
||||
) : (
|
||||
<PictureOutlined style={{ color: '#64748b', fontSize: 16 }} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 视频无封面时直接显示占位符 */}
|
||||
{mediaType === 'video' && !item.videoCoverUrl && !isError && (
|
||||
<div style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: '#1e293b',
|
||||
}}>
|
||||
<VideoCameraOutlined style={{ color: '#64748b', fontSize: 24 }} />
|
||||
<Text style={{ fontSize: 12, color: '#94a3b8', marginTop: 4 }}>暂无封面</Text>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 媒体内容 - 当isLoading为true时开始渲染，加载完成后显示 */}
|
||||
{((mediaType === 'video' && item.videoCoverUrl) || mediaType === 'image') && (isLoading || isLoaded) && !isError && (
|
||||
@@ -391,6 +347,51 @@ const GeneratedRecord: React.FC = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 加载占位符 - 显示渐变背景和加载状态 */}
|
||||
{!isLoading && !isLoaded && !isError && (
|
||||
<div style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
background: 'linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%)',
|
||||
}}>
|
||||
<div style={{
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: 8,
|
||||
backgroundColor: '#cbd5e1',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}>
|
||||
{mediaType === 'video' ? (
|
||||
<VideoCameraOutlined style={{ color: '#64748b', fontSize: 16 }} />
|
||||
) : (
|
||||
<PictureOutlined style={{ color: '#64748b', fontSize: 16 }} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 视频无封面时直接显示占位符 */}
|
||||
{mediaType === 'video' && !item.videoCoverUrl && !isError && (
|
||||
<div style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: '#1e293b',
|
||||
}}>
|
||||
<VideoCameraOutlined style={{ color: '#64748b', fontSize: 24 }} />
|
||||
<Text style={{ fontSize: 12, color: '#94a3b8', marginTop: 4 }}>暂无封面</Text>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{/* 过期占位符 */}
|
||||
{isExpired && (
|
||||
<div style={{
|
||||
@@ -572,9 +573,7 @@ const GeneratedRecord: React.FC = () => {
|
||||
message.warning('请先选择要上传的文件');
|
||||
return;
|
||||
}
|
||||
|
||||
setUploading(true);
|
||||
|
||||
// 模拟批量上传过程
|
||||
for (let i = 0; i < uploadFiles.length; i++) {
|
||||
const file = uploadFiles[i];
|
||||
@@ -586,7 +585,6 @@ const GeneratedRecord: React.FC = () => {
|
||||
setUploadProgress(prev => ({ ...prev, [file.uid]: progress }));
|
||||
}
|
||||
}
|
||||
|
||||
// 上传完成
|
||||
await new Promise(resolve => setTimeout(resolve, 500));
|
||||
message.success(`成功上传 ${uploadFiles.length} 个文件`);
|
||||
|
||||
Reference in New Issue
Block a user