Skip to content

Commit bff6193

Browse files
author
马琪斌
committed
chore: 🤖 优化UI
Change-Id: Ica159f71ccc5361897d85c515ebfd7c540cd8805
1 parent fb69245 commit bff6193

File tree

4 files changed

+234
-198
lines changed

4 files changed

+234
-198
lines changed

‎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: 40 additions & 198 deletions
Original file line numberDiff line numberDiff line change
@@ -2,159 +2,39 @@
22
<html>
33
<head>
44
<title>Clone ProcessOn</title>
5+
<script src="https://cdn.tailwindcss.com"></script>
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-900 text-sm">
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,9 +47,10 @@
16747
case 500:
16848
console.log("服务器错误");
16949
case 401:
170-
showLogin();
50+
window.location.href = "/login";
17151
}
17252
});
53+
17354
$(document).on("submit", "form", function (e) {
17455
$(".js-message").html("");
17556
e.preventDefault();
@@ -204,50 +85,22 @@
20485
},
20586
});
20687
});
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-
}
22388
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-
}
24089
function getList() {
24190
$.get("/diagraming", (res) => {
24291
const { list = [] } = res;
24392
if (list.length > 0) {
24493
let html = "";
24594
list.forEach((item) => {
246-
html += `<div class="flex justify-between border-b">
247-
<a href="/diagraming/${item.id}">${item.title}</a>
95+
html += `<div class="flex justify-between border-b py-2">
96+
<a class="text-sm text-blue-500 hover:text-blue-700" href="/diagraming/${
97+
item.id
98+
}">${item.title}</a>
24899
<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="${
100+
<a class="ml-2 text-blue-500 hover:text-blue-700" href="/view/${
101+
item.id
102+
}">查看</a>
103+
<a class="ml-2 text-blue-500 hover:text-blue-700 js-remove" href="javascript:;" data-id="${
251104
item.id
252105
}">删除</a></span>
253106
</div>`;
@@ -292,17 +145,6 @@
292145
293146
function getUser() {
294147
$.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-
);
306148
getList();
307149
bindCreate();
308150
});

‎src/views/login.ejs‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>登录 - Clone ProcessOn</title>
5+
<script src="https://cdn.tailwindcss.com"></script>
6+
</head>
7+
<body class="bg-gray-100 text-gray-900 text-sm">
8+
<div class="flex items-center justify-center h-screen">
9+
<div class="w-[460px] bg-white p-6 rounded shadow">
10+
<h2 class="text-2xl mb-4">欢迎回来</h2>
11+
<form method="POST" action="/api/auth/signin">
12+
<div class="mb-4">
13+
<input
14+
class="w-full p-2 border rounded"
15+
value="[email protected]"
16+
placeholder="邮箱"
17+
type="email"
18+
name="email"
19+
/>
20+
</div>
21+
<div class="mb-4">
22+
<input
23+
class="w-full p-2 border rounded"
24+
value="123456"
25+
placeholder="密码"
26+
minLength="6"
27+
maxLength="20"
28+
type="password"
29+
name="password"
30+
/>
31+
</div>
32+
<div class="mb-4">
33+
<button
34+
type="submit"
35+
class="w-full bg-blue-500 text-white p-2 rounded"
36+
>
37+
登录
38+
</button>
39+
</div>
40+
<div class="js-message mb-4"></div>
41+
<div class="mb-4">
42+
<a
43+
class="w-full block text-center bg-gray-200 p-2 rounded"
44+
href="/api/github/login"
45+
>GitHub 账号登录</a
46+
>
47+
</div>
48+
<div>
49+
如果您没有账号，您可以
50+
<a class="text-blue-500" href="/register">立即注册</a>
51+
</div>
52+
<div class="mt-6">测试账号：[email protected] 密码 123456</div>
53+
</form>
54+
</div>
55+
</div>
56+
<script src="./scripts_bin/zh/jquery.js"></script>
57+
<script>
58+
$(document).on("submit", "form", function (e) {
59+
$(".js-message").html("");
60+
e.preventDefault();
61+
let oForm = $(this);
62+
let url = oForm.attr("action");
63+
let method = oForm.attr("method");
64+
let data = oForm.serializeArray();
65+
let formData = {};
66+
for (const item of data) {
67+
if (item.value === "") {
68+
$(".js-message").html(
69+
`<div class="message">请输入${item.name}</div>`
70+
);
71+
return;
72+
} else {
73+
formData[item.name] = item.value;
74+
}
75+
}
76+
$.ajax({
77+
url,
78+
type: method,
79+
data,
80+
success: (res) => {
81+
if (res.message) {
82+
$(".js-message").html(
83+
`<div class="message">${res.message}</div>`
84+
);
85+
}
86+
if (res.success) {
87+
window.location.href = "/";
88+
}
89+
},
90+
});
91+
});
92+
</script>
93+
</body>
94+
</html>

0 commit comments

Comments
 (0)