openclaw_product_manager/clouddisk-project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

前端: 使用CDN加载React,无需构建直接运行

Browse Source
This commit is contained in:
Frontend Developer 2026-03-10 09:47:28 +00:00
parent c7808b3f17
commit 90ca1cc1fc
1 changed files with 74 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
frontend/src/renderer/index.html
View File

@ -4,9 +4,81 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CloudDisk</title> <title>CloudDisk</title>
<link rel="stylesheet" href="https://unpkg.com/antd@5.12.0/dist/reset.css">
<style>
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
#root { min-height: 100vh; }
</style>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root">Loading...</div>
<script src="./renderer.js"></script>
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/antd@5.12.0/dist/antd.min.js"></script>
<script src="https://unpkg.com/@ant-design/icons@5.2.6/dist/index.umd.min.js"></script>
<script>
// Simple app without JSX
const { Button, Layout, Menu, Input, Table, Modal, Upload, Progress, Breadcrumb, Avatar, Dropdown, Spin, message, notification } = antd;
const { FolderOutlined, FileOutlined, UploadOutlined, DeleteOutlined, DownloadOutlined, ShareAltOutlined, UserOutlined, SettingOutlined, LogoutOutlined, HomeOutlined, ClockCircleOutlined, CloudOutlined } = icons;
const { Header, Sider, Content } = Layout;
function App() {
const [user, setUser] = React.useState(null);
const [files, setFiles] = React.useState([]);
const [currentPath, setCurrentPath] = React.useState([]);
const [isLoggedIn, setIsLoggedIn] = React.useState(false);
const menuItems = [
{ key: 'files', icon: React.createElement(FolderOutlined), label: '我的文件' },
{ key: 'recent', icon: React.createElement(ClockCircleOutlined), label: '最近访问' },
{ key: 'shared', icon: React.createElement(ShareAltOutlined), label: '共享文件' },
{ key: 'trash', icon: React.createElement(DeleteOutlined), label: '回收站' },
];
if (!isLoggedIn) {
return React.createElement('div', { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh', background: '#f0f2f5' } },
React.createElement('div', { style: { width: '400px', padding: '40px', background: 'white', borderRadius: '8px', boxShadow: '0 2px 8px rgba(0,0,0,0.1)' } },
React.createElement('h1', { style: { textAlign: 'center', marginBottom: '30px' } }, 'CloudDisk'),
React.createElement(Input, { placeholder: '用户名', style: { marginBottom: '16px' } }),
React.createElement(Input.Password, { placeholder: '密码', style: { marginBottom: '16px' } }),
React.createElement(Button, { type: 'primary', block: true }, '登录')
)
);
}
return React.createElement(Layout, { style: { minHeight: '100vh' } },
React.createElement(Header, { style: { background: '#1890ff', padding: '0 20px', color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'space-between' } },
React.createElement('span', { style: { fontSize: '20px', fontWeight: 'bold' } }, 'CloudDisk'),
React.createElement(Avatar, { icon: React.createElement(UserOutlined) })
),
React.createElement(Layout, {},
React.createElement(Sider, { width: 200, style: { background: '#fff' } },
React.createElement(Menu, { mode: 'inline', defaultSelectedKeys: ['files'], items: menuItems, style: { height: '100%' } })
),
React.createElement(Layout, { style: { padding: '20px', background: '#fff' } },
React.createElement('div', { style: { marginBottom: '16px' } },
React.createElement(Upload, { showUploadList: false },
React.createElement(Button, { icon: React.createElement(UploadOutlined) }, '上传文件')
),
React.createElement(Button, { icon: React.createElement(FolderOutlined), style: { marginLeft: '8px' } }, '新建文件夹')
),
React.createElement(Table, {
dataSource: files,
columns: [
{ title: '名称', dataIndex: 'name', key: 'name' },
{ title: '大小', dataIndex: 'size', key: 'size', render: (v) => v ? (v/1024/1024).toFixed(2) + ' MB' : '-' },
{ title: '修改时间', dataIndex: 'updated_at', key: 'updated_at' }
],
rowKey: 'id'
})
)
)
);
}
ReactDOM.createRoot(document.getElementById('root')).render(React.createElement(App));
</script>
</body> </body>
</html> </html>