Skip to content

Commit 87006aa

Browse files
author
马琪斌
committed
chore: 🤖 优化UI
1 parent fb69245 commit 87006aa

File tree

10 files changed

+715
-244
lines changed

10 files changed

+715
-244
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,4 @@ tests/
55
!.env.example
66
!migrations/
77
.vercel
8+
public/assets/css/index.css

‎docker-compose.yml‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,9 @@ services:
2121
- 8080:8080
2222

2323
app:
24-
build: .
24+
build:
25+
context: .
26+
dockerfile: Dockerfile
2527
ports:
2628
- "3000:3000"
2729
environment:

‎package.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,10 @@
44
"license": "MIT",
55
"scripts": {
66
"postinstall": "prisma generate",
7-
"watch": "nodemon",
8-
"build": "rm -rf dist && tsc --project tsconfig.json && copyfiles -f src/views/*.ejs dist/views",
7+
"dev": "nodemon",
8+
"watch:css": "npx tailwindcss -i ./src/index.css -o ./public/assets/css/index.css --watch",
9+
"build": "rm -rf dist && tsc --project tsconfig.json && npm run build:css && copyfiles -f src/views/*.ejs dist/views",
10+
"build:css": "npx tailwindcss -i ./src/index.css -o ./public/assets/css/index.css",
911
"start": "node dist/index.js",
1012
"test": "jest"
1113
},
@@ -51,6 +53,7 @@
5153
"prisma": "4.4.0",
5254
"randomstring": "1.2.1",
5355
"supertest": "6.1.6",
56+
"tailwindcss": "^3.4.13",
5457
"ts-jest": "27.0.7",
5558
"ts-node": "10.4.0",
5659
"typescript": "4.4.4"

‎src/index.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;

‎src/index.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,14 @@ app.get("/", function (req, res) {
4141
return res.render("index", {});
4242
});
4343

44+
app.get("/login", function (req, res) {
45+
return res.render("login", {});
46+
});
47+
48+
app.get("/register", function (req, res) {
49+
return res.render("register", {});
50+
});
51+
4452
app.get("*", function (req, res) {
4553
res.status(404).send("Sorry, cant find that");
4654
});

‎src/views/index.ejs‎

Lines changed: 42 additions & 233 deletions
Original file line numberDiff line numberDiff line change
@@ -2,159 +2,39 @@
22
<html>
33
<head>
44
<title>Clone ProcessOn</title>
5+
<link href="/assets/css/index.css" rel="stylesheet" />
56
</head>
6-
<style>
7-
:root {
8-
--primary-color: #067bef;
9-
--border: #eee;
10-
--input: #d9d9d9;
11-
--error: #dc2626;
12-
}
13-
* {
14-
margin: 0;
15-
padding: 0;
16-
font-size: 12px;
17-
box-sizing: border-box;
18-
}
19-
a {
20-
color: var(--primary-color);
21-
text-decoration: none;
22-
}
23-
a:hover {
24-
text-decoration: underline;
25-
}
26-
header {
27-
margin: 24px 0;
28-
}
29-
body {
30-
font-size: 14px;
31-
background-color: #f6f7f8;
32-
}
33-
input[type="submit"],
34-
button {
35-
padding: 8px 24px;
36-
font-size: 14px;
37-
border: 1px solid var(--border);
38-
cursor: pointer;
39-
border-radius: 4px;
40-
}
41-
input[type="password"],
42-
input[type="email"],
43-
input[type="text"] {
44-
padding: 8px 12px;
45-
border: 1px solid var(--input);
46-
width: 100%;
47-
}
48-
input[type="password"]:focus,
49-
input[type="email"]:focus,
50-
input[type="text"]:focus {
51-
outline-offset: 2px;
52-
outline: 2px solid var(--primary-color);
53-
}
54-
.block {
55-
display: block;
56-
}
57-
.w-full {
58-
width: 100%;
59-
}
60-
.btn:hover {
61-
color: var(--primary-color);
62-
border: 1px solid var(--primary-color);
63-
}
64-
.btn {
65-
cursor: pointer;
66-
padding: 8px 12px;
67-
background-color: #f1f1f1;
68-
border: 1px solid var(--border);
69-
color: #212930;
70-
text-decoration: none;
71-
border-radius: 2px;
72-
text-align: center;
73-
}
74-
.btn-primary {
75-
background: var(--primary-color);
76-
color: #fff;
77-
border: 1px solid var(--primary-color);
78-
}
79-
.btn-primary:hover {
80-
color: #fff;
81-
border: 1px solid var(--primary-color);
82-
}
83-
#list {
84-
margin-top: 16px;
85-
background: #fff;
86-
border: 1px solid var(--border);
87-
padding: 8px;
88-
}
89-
form > div {
90-
margin-top: 24px;
91-
}
92-
.empty {
93-
text-align: center;
94-
padding: 24px;
95-
}
96-
.ml-2 {
97-
margin-left: 8px;
98-
}
99-
.flex {
100-
display: flex;
101-
}
102-
.justify-between {
103-
justify-content: space-between;
104-
}
105-
.items-center {
106-
align-items: center;
107-
}
108-
.mx-auto {
109-
margin-left: auto;
110-
margin-right: auto;
111-
}
112-
.max-w-5xl {
113-
max-width: 1024px;
114-
}
115-
.w-2\/5 {
116-
width: 40%;
117-
border: 1px solid var(--border);
118-
padding: 24px;
119-
background: #fff;
120-
margin: auto;
121-
}
122-
h1 {
123-
font-size: 16px;
124-
}
125-
.avatar {
126-
width: 30px;
127-
height: 30px;
128-
border-radius: 100%;
129-
border: 2px solid var(--border);
130-
background: rgba(6, 122, 239, 0.2);
131-
}
132-
.border-b {
133-
border-bottom: 1px solid var(--border);
134-
line-height: 2.5;
135-
}
136-
.border-b:last-child {
137-
border: 0;
138-
}
139-
.login-warper {
140-
display: flex;
141-
height: 80vh;
142-
}
143-
.message {
144-
border: 1px solid var(--error);
145-
padding: 8px 12px;
146-
color: var(--error);
147-
background-color: #fee2e2;
148-
border-radius: 2px;
149-
}
150-
</style>
151-
<body>
152-
<div class="max-w-5xl mx-auto">
7+
<body class="bg-gray-100 text-gray-800">
8+
<div class="max-w-5xl mx-auto bg-white p-6 border mt-6 space-y-4">
1539
<header class="flex justify-between items-center">
154-
<h1>Clone ProcessOn</h1>
155-
<span class="flex items-center" id="user-info"></span>
10+
<h1 class="text-lg">Clone ProcessOn</h1>
11+
<span class="flex items-center" id="user-info">
12+
<img
13+
class="w-8 h-8 rounded-full border-2 border-gray-200"
14+
src="https://api.dicebear.com/7.x/notionists/svg?seed=${res.email}"
15+
alt="${res.name}"
16+
/>
17+
<button
18+
class="ml-2 text-sm bg-gray-100 px-2 py-1 rounded border"
19+
id="signout"
20+
>
21+
退出
22+
</button>
23+
</span>
15624
</header>
157-
<div id="container"></div>
25+
<div id="container">
26+
<div>
27+
<div>
28+
<button
29+
class="text-sm bg-blue-500 text-white px-3 py-2 rounded"
30+
id="create"
31+
>
32+
+ 新建流程图
33+
</button>
34+
</div>
35+
<div class="mt-6 space-y-4" id="list"></div>
36+
</div>
37+
</div>
15838
</div>
15939
<script src="./scripts_bin/zh/jquery.js"></script>
16040
<script>
@@ -167,94 +47,34 @@
16747
case 500:
16848
console.log("服务器错误");
16949
case 401:
170-
showLogin();
50+
window.location.href = "/login";
17151
}
17252
});
173-
$(document).on("submit", "form", function (e) {
174-
$(".js-message").html("");
175-
e.preventDefault();
176-
let oForm = $(this);
177-
let url = oForm.attr("action");
178-
let method = oForm.attr("method");
179-
let data = oForm.serializeArray();
180-
let formData = {};
181-
for (const item of data) {
182-
if (item.value === "") {
183-
$(".js-message").html(
184-
`<div class="message">请输入${item.name}</div>`
185-
);
186-
return;
187-
} else {
188-
formData[item.name] = item.value;
189-
}
190-
}
191-
$.ajax({
192-
url,
193-
type: method,
194-
data,
195-
success: (res) => {
196-
if (res.message) {
197-
$(".js-message").html(
198-
`<div class="message">${res.message}</div>`
199-
);
200-
}
201-
if (res.success) {
202-
getUser();
203-
}
204-
},
205-
});
206-
});
207-
function showLogin() {
208-
$("#user-info").html("");
209-
$("#container").html(
210-
`<div class="login-warper"><div class="w-2/5">
211-
<h2>欢迎回来</h2>
212-
<form method="POST" action="/api/auth/signin">
213-
<div><input value="[email protected]" placeholder="邮箱" type="email" name="email" /></div>
214-
<div><input value="123456" placeholder="密码" minLength="6" maxLength="20" type="password" name="password" /></div>
215-
<div><button type="submit" class="btn btn-primary block w-full">登录</button></div>
216-
<div class="js-message"></div>
217-
<div><a class="btn block w-full" href="/api/github/login">GitHub 账号登录</a></div>
218-
<div>如果您没有账号，您可以 <a href="javascript:showRegister()">立即注册</a></div>
219-
</form>
220-
</div></div>`
221-
);
222-
}
22353
224-
function showRegister() {
225-
$("#container").html(`
226-
<div class="login-warper">
227-
<div class="w-2/5">
228-
<h2>创建一个账号</h2>
229-
<form method="POST" action="/api/auth/register">
230-
<div><input placeholder="邮箱" type="email" name="email" /></div>
231-
<div><input placeholder="昵称" maxLength="20" type="text" name="name" /></div>
232-
<div><input placeholder="密码" minLength="6" maxLength="20" type="password" name="password" /></div>
233-
<div><button type="submit" class="btn btn-primary block w-full">注册</button></div>
234-
<div>已有账号，您可以 <a href="javascript:showLogin()">立即登录</a></div>
235-
<div class="js-message"></div>
236-
<div>测试账号：[email protected] 密码 123456</div>
237-
</form>
238-
</div></div>`);
239-
}
24054
function getList() {
24155
$.get("/diagraming", (res) => {
24256
const { list = [] } = res;
24357
if (list.length > 0) {
24458
let html = "";
24559
list.forEach((item) => {
246-
html += `<div class="flex justify-between border-b">
247-
<a href="/diagraming/${item.id}">${item.title}</a>
60+
html += `<div class="flex justify-between border-b py-2">
61+
<a class="text-sm text-blue-500 hover:text-blue-700" href="/diagraming/${
62+
item.id
63+
}">${item.title}</a>
24864
<span><span>${new Date(item.lastModify).toLocaleString()}</span>
249-
<a class="ml-2" href="/view/${item.id}">查看</a>
250-
<a class="ml-2 js-remove" href="javascript:;" data-id="${
65+
<a class="ml-2 text-blue-500 hover:text-blue-700" href="/view/${
66+
item.id
67+
}">查看</a>
68+
<a class="ml-2 text-blue-500 hover:text-blue-700 js-remove" href="javascript:;" data-id="${
25169
item.id
25270
}">删除</a></span>
25371
</div>`;
25472
});
25573
$("#list").html(html);
25674
} else {
257-
$("#list").html(`<div class="empty">暂无数据</div>`);
75+
$("#list").html(
76+
`<div class="border py-8 text-center text-sm text-gray-500">暂无数据</div>`
77+
);
25878
}
25979
});
26080
bindRemove();
@@ -292,17 +112,6 @@
292112
293113
function getUser() {
294114
$.get("/api/user/me", (res) => {
295-
$("#user-info").html(
296-
`
297-
<img class="avatar" src="https://api.dicebear.com/7.x/notionists/svg?seed=${res.email}" alt="${res.name}"/>
298-
<button class="ml-2 btn" id="signout">退出</button> `
299-
);
300-
$("#container").html(
301-
`<div>
302-
<div> <button class="btn btn-primary" id="create">+ 新建流程图</button></div>
303-
<div id="list"></div>
304-
</div>`
305-
);
306115
getList();
307116
bindCreate();
308117
});

0 commit comments

Comments
 (0)