42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
import { useState } from 'react'
|
||
import { ConfigProvider } from '@arco-design/web-react'
|
||
import '@arco-design/web-react/dist/css/arco.css'
|
||
import '../App.css'
|
||
import { LoginPage } from '../pages/login'
|
||
import { ProjectPage } from '../pages/project'
|
||
import { projects } from '../features/projects/project-data'
|
||
import type { ChannelKey, Screen, Theme } from '../features/projects/project-types'
|
||
|
||
function App() {
|
||
const [screen, setScreen] = useState<Screen>('login')
|
||
const [theme, setTheme] = useState<Theme>('light')
|
||
const [activeProject, setActiveProject] = useState(projects[0])
|
||
const [activeChannel, setActiveChannel] = useState<ChannelKey>('overview')
|
||
const [selectedItem, setSelectedItem] = useState('Inbox 待处理（36）')
|
||
|
||
const dark = theme === 'dark'
|
||
|
||
return (
|
||
<ConfigProvider>
|
||
<main className={dark ? 'app theme-dark' : 'app'}>
|
||
{screen === 'login' ? (
|
||
<LoginPage onLogin={() => setScreen('workbench')} />
|
||
) : (
|
||
<ProjectPage
|
||
activeProject={activeProject}
|
||
activeChannel={activeChannel}
|
||
selectedItem={selectedItem}
|
||
theme={theme}
|
||
onSelectProject={setActiveProject}
|
||
onSelectChannel={setActiveChannel}
|
||
onSelectItem={setSelectedItem}
|
||
onToggleTheme={() => setTheme(dark ? 'light' : 'dark')}
|
||
/>
|
||
)}
|
||
</main>
|
||
</ConfigProvider>
|
||
)
|
||
}
|
||
|
||
export default App
|