mirror of
https://github.com/Grasscutters/Cultivation.git
synced 2025-12-15 00:24:45 +01:00
(feat:layout) Scaffold a good layout
This commit is contained in:
KingRainbow44
@@ -2,12 +2,11 @@ root = true
|
|||||||
|
|
||||||
[*]
|
[*]
|
||||||
charset = utf-8
|
charset = utf-8
|
||||||
end_of_line = lf
|
|
||||||
insert_final_newline = true
|
insert_final_newline = true
|
||||||
trim_trailing_whitespace = true
|
trim_trailing_whitespace = true
|
||||||
max_line_length = 120
|
max_line_length = 120
|
||||||
indent_size = 4
|
indent_size = 4
|
||||||
indent_style = space
|
indent_style = space
|
||||||
|
|
||||||
[*.json]
|
[{*.html,*.json}]
|
||||||
indent_size = 2
|
indent_size = 2
|
||||||
|
|||||||
11
.prettierrc
Normal file
11
.prettierrc
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"arrowParens": "always",
|
||||||
|
"bracketSpacing": true,
|
||||||
|
"jsxSingleQuote": false,
|
||||||
|
"jsxBracketSameLine": false,
|
||||||
|
"semi": true,
|
||||||
|
"singleQuote": false,
|
||||||
|
"tabWidth": 4,
|
||||||
|
"trailingComma": "none",
|
||||||
|
"useTabs": false
|
||||||
|
}
|
||||||
@@ -4,11 +4,10 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Tauri + Peact + TS</title>
|
<title>Cultivation</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body id="root">
|
||||||
<div id="root"></div>
|
|
||||||
<script type="module" src="/src/main.tsx"></script>
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -10,9 +10,13 @@
|
|||||||
"tauri": "tauri"
|
"tauri": "tauri"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"react": "npm:@preact/compat",
|
||||||
|
"react-dom": "npm:@preact/compat",
|
||||||
|
"@fluentui/react-components": "^9.41.0",
|
||||||
"@tauri-apps/api": "^1.5.1",
|
"@tauri-apps/api": "^1.5.1",
|
||||||
"preact": "^10.16.0",
|
"preact": "^10.16.0",
|
||||||
"react-icons": "^4.12.0",
|
"react-icons": "^4.12.0",
|
||||||
|
"react-router-dom": "^6.20.0",
|
||||||
"zustand": "^4.4.6"
|
"zustand": "^4.4.6"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|||||||
@@ -1,7 +0,0 @@
|
|||||||
.logo.vite:hover {
|
|
||||||
filter: drop-shadow(0 0 2em #747bff);
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo.preact:hover {
|
|
||||||
filter: drop-shadow(0 0 2em #673ab8);
|
|
||||||
}
|
|
||||||
53
src/App.tsx
53
src/App.tsx
@@ -1,53 +0,0 @@
|
|||||||
import { useState } from "preact/hooks";
|
|
||||||
import preactLogo from "./assets/preact.svg";
|
|
||||||
import { invoke } from "@tauri-apps/api/tauri";
|
|
||||||
import "./App.css";
|
|
||||||
|
|
||||||
function App() {
|
|
||||||
const [greetMsg, setGreetMsg] = useState("");
|
|
||||||
const [name, setName] = useState("");
|
|
||||||
|
|
||||||
async function greet() {
|
|
||||||
// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
|
|
||||||
setGreetMsg(await invoke("greet", { name }));
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div class="container">
|
|
||||||
<h1>Welcome to Tauri!</h1>
|
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
<a href="https://vitejs.dev" target="_blank">
|
|
||||||
<img src="/vite.svg" class="logo vite" alt="Vite logo" />
|
|
||||||
</a>
|
|
||||||
<a href="https://tauri.app" target="_blank">
|
|
||||||
<img src="/tauri.svg" class="logo tauri" alt="Tauri logo" />
|
|
||||||
</a>
|
|
||||||
<a href="https://preactjs.com" target="_blank">
|
|
||||||
<img src={preactLogo} class="logo preact" alt="Preact logo" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p>Click on the Tauri, Vite, and Preact logos to learn more.</p>
|
|
||||||
|
|
||||||
<form
|
|
||||||
class="row"
|
|
||||||
onSubmit={(e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
greet();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
id="greet-input"
|
|
||||||
onInput={(e) => setName(e.currentTarget.value)}
|
|
||||||
placeholder="Enter a name..."
|
|
||||||
/>
|
|
||||||
<button type="submit">Greet</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<p>{greetMsg}</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default App;
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="27.68" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 296"><path fill="#673AB8" d="m128 0l128 73.9v147.8l-128 73.9L0 221.7V73.9z"/><path fill="#FFF" d="M34.865 220.478c17.016 21.78 71.095 5.185 122.15-34.704c51.055-39.888 80.24-88.345 63.224-110.126c-17.017-21.78-71.095-5.184-122.15 34.704c-51.055 39.89-80.24 88.346-63.224 110.126Zm7.27-5.68c-5.644-7.222-3.178-21.402 7.573-39.253c11.322-18.797 30.541-39.548 54.06-57.923c23.52-18.375 48.303-32.004 69.281-38.442c19.922-6.113 34.277-5.075 39.92 2.148c5.644 7.223 3.178 21.403-7.573 39.254c-11.322 18.797-30.541 39.547-54.06 57.923c-23.52 18.375-48.304 32.004-69.281 38.441c-19.922 6.114-34.277 5.076-39.92-2.147Z"/><path fill="#FFF" d="M220.239 220.478c17.017-21.78-12.169-70.237-63.224-110.126C105.96 70.464 51.88 53.868 34.865 75.648c-17.017 21.78 12.169 70.238 63.224 110.126c51.055 39.889 105.133 56.485 122.15 34.704Zm-7.27-5.68c-5.643 7.224-19.998 8.262-39.92 2.148c-20.978-6.437-45.761-20.066-69.28-38.441c-23.52-18.376-42.74-39.126-54.06-57.923c-10.752-17.851-13.218-32.03-7.575-39.254c5.644-7.223 19.999-8.261 39.92-2.148c20.978 6.438 45.762 20.067 69.281 38.442c23.52 18.375 42.739 39.126 54.06 57.923c10.752 17.85 13.218 32.03 7.574 39.254Z"/><path fill="#FFF" d="M127.552 167.667c10.827 0 19.603-8.777 19.603-19.604c0-10.826-8.776-19.603-19.603-19.603c-10.827 0-19.604 8.777-19.604 19.603c0 10.827 8.777 19.604 19.604 19.604Z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.5 KiB |
4
src/constants.ts
Normal file
4
src/constants.ts
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
export const PageRoutes = {
|
||||||
|
HOME: "/",
|
||||||
|
SETTINGS: "/settings"
|
||||||
|
};
|
||||||
15
src/main.tsx
15
src/main.tsx
@@ -1,5 +1,14 @@
|
|||||||
import { render } from "preact";
|
import { render } from "preact";
|
||||||
import App from "./App";
|
|
||||||
import "./styles.css";
|
|
||||||
|
|
||||||
render(<App />, document.getElementById("root")!);
|
import { createBrowserRouter, RouterProvider } from "react-router-dom";
|
||||||
|
|
||||||
|
import App from "@ui/App";
|
||||||
|
|
||||||
|
export const router = createBrowserRouter([
|
||||||
|
{ path: "*", element: <App /> }
|
||||||
|
]);
|
||||||
|
|
||||||
|
render(
|
||||||
|
<RouterProvider router={router} />,
|
||||||
|
document.getElementById("root")!
|
||||||
|
);
|
||||||
|
|||||||
109
src/styles.css
109
src/styles.css
@@ -1,109 +0,0 @@
|
|||||||
:root {
|
|
||||||
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 24px;
|
|
||||||
font-weight: 400;
|
|
||||||
|
|
||||||
color: #0f0f0f;
|
|
||||||
background-color: #f6f6f6;
|
|
||||||
|
|
||||||
font-synthesis: none;
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
-webkit-text-size-adjust: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
margin: 0;
|
|
||||||
padding-top: 10vh;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
height: 6em;
|
|
||||||
padding: 1.5em;
|
|
||||||
will-change: filter;
|
|
||||||
transition: 0.75s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo.tauri:hover {
|
|
||||||
filter: drop-shadow(0 0 2em #24c8db);
|
|
||||||
}
|
|
||||||
|
|
||||||
.row {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
font-weight: 500;
|
|
||||||
color: #646cff;
|
|
||||||
text-decoration: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
color: #535bf2;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
input,
|
|
||||||
button {
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
padding: 0.6em 1.2em;
|
|
||||||
font-size: 1em;
|
|
||||||
font-weight: 500;
|
|
||||||
font-family: inherit;
|
|
||||||
color: #0f0f0f;
|
|
||||||
background-color: #ffffff;
|
|
||||||
transition: border-color 0.25s;
|
|
||||||
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:hover {
|
|
||||||
border-color: #396cd8;
|
|
||||||
}
|
|
||||||
button:active {
|
|
||||||
border-color: #396cd8;
|
|
||||||
background-color: #e8e8e8;
|
|
||||||
}
|
|
||||||
|
|
||||||
input,
|
|
||||||
button {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#greet-input {
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
:root {
|
|
||||||
color: #f6f6f6;
|
|
||||||
background-color: #2f2f2f;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
color: #24c8db;
|
|
||||||
}
|
|
||||||
|
|
||||||
input,
|
|
||||||
button {
|
|
||||||
color: #ffffff;
|
|
||||||
background-color: #0f0f0f98;
|
|
||||||
}
|
|
||||||
button:active {
|
|
||||||
background-color: #0f0f0f69;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
22
src/ui/App.tsx
Normal file
22
src/ui/App.tsx
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
import { Route, Routes } from "react-router-dom";
|
||||||
|
|
||||||
|
import TopBar from "@components/TopBar.tsx";
|
||||||
|
import Launcher from "@ui/layout/Launcher.tsx";
|
||||||
|
|
||||||
|
import { PageRoutes } from "@app/constants.ts";
|
||||||
|
|
||||||
|
import "@css/App.scss";
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<div className={"App"}>
|
||||||
|
<TopBar />
|
||||||
|
|
||||||
|
<Routes>
|
||||||
|
<Route path={PageRoutes.HOME} element={<Launcher />} />
|
||||||
|
</Routes>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
9
src/ui/components/InfoBoard.tsx
Normal file
9
src/ui/components/InfoBoard.tsx
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
function InfoBoard() {
|
||||||
|
return (
|
||||||
|
<div className={"InfoBoard"}>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default InfoBoard;
|
||||||
9
src/ui/components/NewsFeed.tsx
Normal file
9
src/ui/components/NewsFeed.tsx
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
function NewsFeed() {
|
||||||
|
return (
|
||||||
|
<div class={"NewsFeed"}>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default NewsFeed;
|
||||||
9
src/ui/components/TopBar.tsx
Normal file
9
src/ui/components/TopBar.tsx
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
function TopBar() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default TopBar;
|
||||||
0
src/ui/css/App.scss
Normal file
0
src/ui/css/App.scss
Normal file
24
src/ui/layout/Launcher.tsx
Normal file
24
src/ui/layout/Launcher.tsx
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
import NewsFeed from "@components/NewsFeed.tsx";
|
||||||
|
import InfoBoard from "@components/InfoBoard.tsx";
|
||||||
|
import { Button } from "@fluentui/react-components";
|
||||||
|
|
||||||
|
function Launcher() {
|
||||||
|
return (
|
||||||
|
<div className={"App_Body"}>
|
||||||
|
<div>
|
||||||
|
<NewsFeed />
|
||||||
|
<InfoBoard />
|
||||||
|
|
||||||
|
<Button>
|
||||||
|
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Launcher;
|
||||||
1
src/vite-env.d.ts
vendored
1
src/vite-env.d.ts
vendored
@@ -1 +0,0 @@
|
|||||||
/// <reference types="vite/client" />
|
|
||||||
@@ -19,7 +19,19 @@
|
|||||||
"strict": true,
|
"strict": true,
|
||||||
"noUnusedLocals": true,
|
"noUnusedLocals": true,
|
||||||
"noUnusedParameters": true,
|
"noUnusedParameters": true,
|
||||||
"noFallthroughCasesInSwitch": true
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
|
||||||
|
/* Path aliases */
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@app/*": ["src/*"],
|
||||||
|
"@ui/*": ["src/ui/*"],
|
||||||
|
"@css/*": ["src/ui/css/*"],
|
||||||
|
"@components/*": ["src/ui/components/*"],
|
||||||
|
"@backend/*": ["src/backend/*"],
|
||||||
|
"react": ["./node_modules/preact/compat/"],
|
||||||
|
"react-dom": ["./node_modules/preact/compat/"]
|
||||||
|
},
|
||||||
},
|
},
|
||||||
"include": ["src"],
|
"include": ["src"],
|
||||||
"references": [{ "path": "./tsconfig.node.json" }]
|
"references": [{ "path": "./tsconfig.node.json" }]
|
||||||
|
|||||||
Reference in New Issue
Block a user