Login UI
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">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<meta name="theme-color" content="#000000" />
|
<meta name="theme-color" content="#000000" />
|
||||||
<link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
|
<link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
|
||||||
<title>Solid App</title>
|
<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>
|
</head>
|
||||||
|
|
||||||
<body data-theme="black">
|
<body data-theme="black">
|
||||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|
||||||
<script src="/src/index.tsx" type="module"></script>
|
<script src="/src/index.tsx" type="module"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,22 +1,13 @@
|
||||||
|
import { Route, HashRouter as Router } from "@solidjs/router";
|
||||||
import type { Component } from "solid-js";
|
import type { Component } from "solid-js";
|
||||||
|
|
||||||
|
import { Login } from "./routes/Login";
|
||||||
|
|
||||||
const App: Component = () => (
|
const App: Component = () => (
|
||||||
<div>
|
<div>
|
||||||
<header >
|
<Router>
|
||||||
<p>
|
<Route path="/" component={Login} />
|
||||||
Edit <code>src/App.tsx</code> and save to reload.
|
</Router>
|
||||||
</p>
|
|
||||||
<a
|
|
||||||
href="https://github.com/solidjs/solid"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
Learn Solid
|
|
||||||
</a>
|
|
||||||
<button class="btn btn-primary">
|
|
||||||
AAAA
|
|
||||||
</button>
|
|
||||||
</header>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,9 @@
|
||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-family: "Inter", sans-serif;
|
||||||
|
font-optical-sizing: auto;
|
||||||
|
font-variation-settings: "slnt" 0;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
],
|
],
|
||||||
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