Login UI
This commit is contained in:
parent
ec30073c14
commit
613e88ca87
50
README_ZH.md
50
README_ZH.md
@ -1,50 +0,0 @@
|
||||
<p align="left">
|
||||
<a href="https://github.com/xijaja/wails-template-solid-ts">English</a> |
|
||||
<strong>中文</strong>
|
||||
</p>
|
||||
<h1 align="center">wails-template-solid-ts</h1>
|
||||
|
||||
<p align="center">Wails 的模版，开箱即用的 Vite, Solid, TypeScript 并支持热重载</p>
|
||||
|
||||
## 使用模版
|
||||
|
||||
```bash
|
||||
wails init -n my-wails-solid -t https://github.com/xijaja/wails-template-solid-ts
|
||||
```
|
||||
|
||||
## 启动调试
|
||||
|
||||
在工程目录中执行 `wails dev` 即可启动。
|
||||
|
||||
如果你想在浏览器中调试，请在另一个终端进入 `frontend` 目录，然后执行 `npm run dev` ，前端开发服务器将在 http://localhost:34115 上运行。
|
||||
|
||||
## Tailwindcss
|
||||
|
||||
如果你需要使用 tailwindcss 和 postcss ，请进入 `frontend` 目录，
|
||||
然后执行命令：
|
||||
|
||||
```bash
|
||||
# 安装
|
||||
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
|
||||
|
||||
# 初始化 tailwind.config.cjs 和 postcss.config.cjs
|
||||
npx tailwindcss init tailwind.config.cjs -p
|
||||
```
|
||||
|
||||
创建 tailwind.css 文件并写入：
|
||||
|
||||
```css
|
||||
@import "tailwindcss/base";
|
||||
@import "tailwindcss/components";
|
||||
@import "tailwindcss/utilities";
|
||||
```
|
||||
|
||||
最后，在 `frontend/src/index.tsx` 中引入：
|
||||
|
||||
```tsx
|
||||
import "./tailwind.css";
|
||||
```
|
||||
|
||||
## 构建
|
||||
|
||||
给你的项目打包，请执行命令： `wails build` 。
|
||||
@ -2,18 +2,21 @@
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
|
||||
<title>Solid App</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
|
||||
<title>Solid App</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body data-theme="black">
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
|
||||
<script src="/src/index.tsx" type="module"></script>
|
||||
<script src="/src/index.tsx" type="module"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,22 +1,13 @@
|
||||
import { Route, HashRouter as Router } from "@solidjs/router";
|
||||
import type { Component } from "solid-js";
|
||||
|
||||
import { Login } from "./routes/Login";
|
||||
|
||||
const App: Component = () => (
|
||||
<div>
|
||||
<header >
|
||||
<p>
|
||||
Edit <code>src/App.tsx</code> and save to reload.
|
||||
</p>
|
||||
<a
|
||||
href="https://github.com/solidjs/solid"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Learn Solid
|
||||
</a>
|
||||
<button class="btn btn-primary">
|
||||
AAAA
|
||||
</button>
|
||||
</header>
|
||||
<Router>
|
||||
<Route path="/" component={Login} />
|
||||
</Router>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
@ -1,3 +1,9 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
html {
|
||||
font-family: "Inter", sans-serif;
|
||||
font-optical-sizing: auto;
|
||||
font-variation-settings: "slnt" 0;
|
||||
}
|
||||
|
||||
40
frontend/src/routes/Login.tsx
Normal file
40
frontend/src/routes/Login.tsx
Normal file
@ -0,0 +1,40 @@
|
||||
export function Login() {
|
||||
return (
|
||||
<div class="w-screen h-screen flex items-center justify-center">
|
||||
<div class="w-80">
|
||||
<h1 class="text-center font-black text-xl">Login</h1>
|
||||
<label class="form-control" for="login-server">
|
||||
<div class="label">
|
||||
<span class="label-text text-xs">Server URL</span>
|
||||
</div>
|
||||
<input id="login-server" type="text"
|
||||
class="input input-bordered"
|
||||
placeholder="https://"
|
||||
/>
|
||||
</label>
|
||||
<label class="form-control" for="login-username">
|
||||
<div class="label">
|
||||
<span class="label-text text-xs">Username</span>
|
||||
</div>
|
||||
<input id="login-username" type="text"
|
||||
class="input input-bordered"
|
||||
placeholder="username"
|
||||
/>
|
||||
</label>
|
||||
<label class="form-control" for="login-password">
|
||||
<div class="label">
|
||||
<span class="label-text text-xs">Password</span>
|
||||
</div>
|
||||
<input id="login-password" type="password"
|
||||
class="input input-bordered"
|
||||
placeholder="********"
|
||||
/>
|
||||
</label>
|
||||
<br />
|
||||
<div class="text-center">
|
||||
<button class="btn btn-primary">Login</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -9,6 +9,39 @@ export default {
|
||||
daisyui,
|
||||
],
|
||||
daisyui: {
|
||||
themes: ["black"],
|
||||
themes: [
|
||||
"light",
|
||||
"dark",
|
||||
"cupcake",
|
||||
"bumblebee",
|
||||
"emerald",
|
||||
"corporate",
|
||||
"synthwave",
|
||||
"retro",
|
||||
"cyberpunk",
|
||||
"valentine",
|
||||
"halloween",
|
||||
"garden",
|
||||
"forest",
|
||||
"aqua",
|
||||
"lofi",
|
||||
"pastel",
|
||||
"fantasy",
|
||||
"wireframe",
|
||||
"black",
|
||||
"luxury",
|
||||
"dracula",
|
||||
"cmyk",
|
||||
"autumn",
|
||||
"business",
|
||||
"acid",
|
||||
"lemonade",
|
||||
"night",
|
||||
"coffee",
|
||||
"winter",
|
||||
"dim",
|
||||
"nord",
|
||||
"sunset",
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user