前端: 修复所有Electron加载问题,内联所有代码不需要额外JS文件
This commit is contained in:
parent
90ca1cc1fc
commit
4b395fe2c3
@ -8,6 +8,13 @@
|
||||
<style>
|
||||
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
|
||||
#root { min-height: 100vh; }
|
||||
.login-container { display: flex; justify-content: center; align-items: center; height: 100vh; background: #f0f2f5; }
|
||||
.login-box { width: 400px; padding: 40px; background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
|
||||
.login-title { text-align: center; margin-bottom: 30px; font-size: 24px; }
|
||||
.main-layout { min-height: 100vh; }
|
||||
.header { background: #1890ff; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; color: white; font-size: 20px; font-weight: bold; }
|
||||
.toolbar { padding: 16px; background: #fff; border-bottom: 1px solid #f0f0f0; }
|
||||
.file-list { padding: 16px; background: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -16,19 +23,25 @@
|
||||
<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 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 { Button, Layout, Menu, Input, Table, Avatar, Spin } = antd;
|
||||
const { FolderOutlined, FileOutlined, UploadOutlined, DeleteOutlined, DownloadOutlined, ShareAltOutlined, UserOutlined, ClockCircleOutlined, HomeOutlined } = icons;
|
||||
const { Header, Sider, Content } = Layout;
|
||||
|
||||
// App Component
|
||||
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 [loading, setLoading] = React.useState(false);
|
||||
const [username, setUsername] = React.useState('');
|
||||
const [password, setPassword] = React.useState('');
|
||||
|
||||
const handleLogin = () => {
|
||||
if (username && password) {
|
||||
setIsLoggedIn(true);
|
||||
}
|
||||
};
|
||||
|
||||
const menuItems = [
|
||||
{ key: 'files', icon: React.createElement(FolderOutlined), label: '我的文件' },
|
||||
@ -38,46 +51,51 @@
|
||||
];
|
||||
|
||||
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('div', { className: 'login-container' },
|
||||
React.createElement('div', { className: 'login-box' },
|
||||
React.createElement('h1', { className: 'login-title' }, 'CloudDisk'),
|
||||
React.createElement(Input, {
|
||||
placeholder: '用户名',
|
||||
value: username,
|
||||
onChange: (e) => setUsername(e.target.value),
|
||||
style: { marginBottom: '16px' }
|
||||
}),
|
||||
React.createElement(Input.Password, {
|
||||
placeholder: '密码',
|
||||
value: password,
|
||||
onChange: (e) => setPassword(e.target.value),
|
||||
style: { marginBottom: '16px' }
|
||||
}),
|
||||
React.createElement(Button, {
|
||||
type: 'primary',
|
||||
block: true,
|
||||
onClick: handleLogin
|
||||
}, '登录')
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
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) })
|
||||
return React.createElement(Layout, { className: 'main-layout' },
|
||||
React.createElement(Header, { className: 'header' },
|
||||
React.createElement('span', null, 'CloudDisk'),
|
||||
React.createElement(Avatar, { icon: React.createElement(UserOutlined), style: { cursor: 'pointer' } })
|
||||
),
|
||||
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(Content, { style: { padding: '20px', background: '#fff' } },
|
||||
React.createElement('div', { className: 'toolbar' },
|
||||
React.createElement(Button, { icon: React.createElement(UploadOutlined), style: { marginRight: '8px' } }, '上传文件'),
|
||||
React.createElement(Button, { icon: React.createElement(FolderOutlined) }, '新建文件夹')
|
||||
),
|
||||
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'
|
||||
})
|
||||
React.createElement('p', { style: { color: '#999', textAlign: 'center', marginTop: '50px' } }, '暂无文件，请上传文件开始使用')
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
// Render
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(React.createElement(App));
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user