diff --git a/src/App.css b/src/App.css index 4c1b0c2..850acc8 100644 --- a/src/App.css +++ b/src/App.css @@ -1,2 +1,20 @@ -@import "tailwindcss"; -@plugin "daisyui"; +@import 'tailwindcss'; +@plugin 'daisyui'; + +html, +body, +#root { + padding: 0; + margin: 0; + width: 100vw; + height: 100vh; + justify-items: center; + box-sizing: border-box; + overflow: hidden; +} + +*, +*::before, +*::after { + box-sizing: inherit; +} diff --git a/src/App.tsx b/src/App.tsx index 981cc99..0160fc0 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,12 +1,8 @@ -import "./App.css"; +import './App.css'; +import { Home } from '~/pages'; function App() { - - return ( -
- 首页 -
- ); + return ; } export default App; diff --git a/src/assets/avatar.jpg b/src/assets/avatar.jpg new file mode 100644 index 0000000..10368e2 Binary files /dev/null and b/src/assets/avatar.jpg differ diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx new file mode 100644 index 0000000..4862b86 --- /dev/null +++ b/src/components/layout/Footer.tsx @@ -0,0 +1,14 @@ +const Footer = () => { + return ( + + ); +}; + +export default Footer; diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx new file mode 100644 index 0000000..de26f95 --- /dev/null +++ b/src/components/layout/Header.tsx @@ -0,0 +1,68 @@ +import { Component, Show } from 'solid-js'; +import avatarSvg from '~/assets/avatar.jpg'; + +interface HeaderProps { + isAvatar?: boolean; +} + +const Header: Component = ({ isAvatar = true }) => { + return ( +
+ 工具集 + + +
+ + + +
    +
  • 个人信息
    • +
  • 退出登录
    • +
+
+ +
+ ); +}; + +export default Header; diff --git a/src/components/layout/Main.tsx b/src/components/layout/Main.tsx new file mode 100644 index 0000000..36a8328 --- /dev/null +++ b/src/components/layout/Main.tsx @@ -0,0 +1,17 @@ +import { A } from '@solidjs/router'; + +const Main = () => { + return ( +
+ +
+ ); +}; + +export default Main; diff --git a/src/components/layout/index.ts b/src/components/layout/index.ts new file mode 100644 index 0000000..b0b2538 --- /dev/null +++ b/src/components/layout/index.ts @@ -0,0 +1,5 @@ +import Header from './Header'; +import Main from './Main'; +import Footer from './Footer'; + +export { Header, Main, Footer }; diff --git a/src/components/ui/Card.tsx b/src/components/ui/Card.tsx new file mode 100644 index 0000000..2cf4c28 --- /dev/null +++ b/src/components/ui/Card.tsx @@ -0,0 +1,19 @@ +import { Component, JSX } from 'solid-js'; + +interface CardProps { + title: string; + children?: JSX.Element; +} + +const Card: Component = ({ title, children }) => { + return ( +
+ {title} +
+ {children} +
+
+ ); +}; + +export default Card; diff --git a/src/components/ui/index.tsx b/src/components/ui/index.tsx new file mode 100644 index 0000000..8c371a2 --- /dev/null +++ b/src/components/ui/index.tsx @@ -0,0 +1,3 @@ +import Card from './Card'; + +export { Card }; diff --git a/src/index.tsx b/src/index.tsx index 26b5517..7d34e4c 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,5 +1,32 @@ /* @refresh reload */ -import { render } from "solid-js/web"; -import App from "./App"; +import { render } from 'solid-js/web'; +import { Router } from '@solidjs/router'; +import { children, lazy } from 'solid-js'; -render(() => , document.getElementById("root") as HTMLElement); +const wrapper = document.getElementById('root'); + +if (!wrapper) { + throw new Error('Wrapper div not found'); +} + +const routes = [ + { + path: '/', + component: lazy(() => import('~/App')), + }, + { + path: '/auth', + children: [ + { + path: '/login', + component: lazy(() => import('~/pages/Login')), + }, + { + path: '/register', + component: lazy(() => import('~/pages/Register')), + }, + ], + }, +]; + +render(() => {routes}, wrapper); diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx new file mode 100644 index 0000000..74e72e0 --- /dev/null +++ b/src/pages/Home.tsx @@ -0,0 +1,13 @@ +import { Header, Main, Footer } from '~/components/layout'; + +const Home = () => { + return ( +
+
+
+
+
+ ); +}; + +export default Home; diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx new file mode 100644 index 0000000..b5b970f --- /dev/null +++ b/src/pages/Login.tsx @@ -0,0 +1,40 @@ +import { A } from '@solidjs/router'; +import { Header, Footer } from '~/components/layout'; +import { Card } from '~/components/ui'; + +const Login = () => { + return ( +
+
+
+ + + +
+ +
+
+
+ + 没有账号请 + + 注册 + + +
+ +
+
+
+ ); +}; + +export default Login; diff --git a/src/pages/Register.tsx b/src/pages/Register.tsx new file mode 100644 index 0000000..8174998 --- /dev/null +++ b/src/pages/Register.tsx @@ -0,0 +1,39 @@ +import { A } from '@solidjs/router'; +import { Header, Footer } from '~/components/layout'; +import { Card } from '~/components/ui'; + +const Register = () => { + return ( +
+
+
+ + + +
+ +
+
+ + 有账号请 + + 登录 + + +
+ +
+
+ ); +}; + +export default Register; diff --git a/src/pages/index.ts b/src/pages/index.ts new file mode 100644 index 0000000..d07e851 --- /dev/null +++ b/src/pages/index.ts @@ -0,0 +1,5 @@ +import Home from './Home'; +import Login from './Login'; +import Register from './Register'; + +export { Home, Login, Register };