topuser
/
koa3-demo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

删除不再使用的 CSS 文件，调整页面布局，优化视图模板，增强用户体验

re
谢亚昕 3 months ago
parent
cb10b9c8f4
commit
7d35f83bd2
13 changed files with 170 additions and 329 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 54
      public/css/layouts/bg-page.css
  2. 14
      public/css/layouts/root.css
  3. 4
      public/css/page/index.css
  4. 0
      public/lib/reset.css
  5. 160
      public/styles.css
  6. 35
      src/controllers/Page/PageController.js
  7. 4
      src/views/htmx/footer.pug
  8. 18
      src/views/layouts/bg-page.pug
  9. 6
      src/views/layouts/pure.pug
  10. 4
      src/views/layouts/root.pug
  11. 84
      src/views/page/about/index.pug
  12. 12
      src/views/page/index/index.pug

54
public/css/layouts/bg-page.css
View File

@ -0,0 +1,54 @@
html,
body {
margin: 0;
padding: 0;
height: 100%;
font-family: Arial, sans-serif;
color: #333;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.page-layout {
flex: 1;
display: flex;
flex-direction: column;
}
.page {
width: 100%;
display: flex;
flex-direction: column;
flex: 1;
position: relative;
max-width: 1226px;
margin-right: auto;
margin-left: auto;
color: white;
}
.content {
flex: 1;
width: 0;
}
@media screen and (max-width: 768px) {
.content {
padding: 0 10px;
padding-top: 40px;
}
}
.card {
padding: 20px;
border-radius: 28px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px);
color: #fff;
}

14
public/css/layouts/root.css
View File

@ -0,0 +1,14 @@
html,
body {
margin: 0;
padding: 0;
height: 100%;
font-family: Arial, sans-serif;
color: #333;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}

4
public/css/page/index.css
View File

@ -33,7 +33,7 @@
transform-origin: center center; transform-origin: center center;
transition: 0.5s transform ease-in-out, 0.5s left ease-in-out; transition: 0.5s transform ease-in-out, 0.5s left ease-in-out;
} }
/*
.card { .card {
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
@ -43,7 +43,7 @@
margin: 0 auto; margin: 0 auto;
margin-bottom: 40px; margin-bottom: 40px;
text-align: center; text-align: center;
} } */
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.home-hero { .home-hero {

0
public/reset.css → public/lib/reset.css
View File

160
public/styles.css
View File

@ -1,160 +0,0 @@
html,
body {
margin: 0;
padding: 0;
height: 100%;
font-family: Arial, sans-serif;
color: #333;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
/*
body::after {
content: "";
position: fixed;
pointer-events: none;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-image: var(--bg);
background-size: cover;
background-repeat: no-repeat;
background-color: #000000;
background-color: #f9f9f9;
filter: brightness(.75);
z-index: -2;
} */
/* .navbar {
height: 49px;
display: flex;
align-items: center;
box-shadow: 1px 1px 3px #e4e4e4;
} */
.title {
font-size: 1.5em;
margin-left: 10px;
color: #333;
}
.page-layout {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.page {
width: 100%;
display: flex;
flex-direction: row;
flex: 1;
position: relative;
/* max-width: 1400px; */
/* margin: 0 auto; */
}
.content {
flex: 1;
width: 0;
}
.footer {}
.nav {
padding: 20px;
}
.flota-nav {
position: sticky;
left: 0;
top: 20px;
width: 80px;
padding: 40px 0;
border-radius: 80px;
/* background: linear-gradient(135deg, #4fd1ff 0%, #ff6a6a 100%); */
/* 更明亮的渐变色 */
/* box-shadow: 0 8px 32px 0 rgba(80, 80, 200, 0.18), 0 2px 16px 0 rgba(255, 106, 106, 0.12); */
/* 更明显的阴影 */
/* transition: background 0.3s, box-shadow 0.3s; */
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px);
}
.flota-nav .item {
display: block;
width: 100%;
height: 40px;
line-height: 40px;
color: #fff;
text-align: center;
cursor: pointer;
text-decoration: none;
font-weight: bold;
font-size: 1.1em;
letter-spacing: 1px;
margin-bottom: 8px;
transition: background 0.2s, color 0.2s, box-shadow 0.2s;
box-shadow: 0 2px 8px 0 rgba(79, 209, 255, 0.10);
/* item 也加轻微阴影 */
}
.flota-nav .item:hover {
background: linear-gradient(90deg, #ffb86c 0%, #4fd1ff 100%);
color: #fff200;
box-shadow: 0 4px 16px 0 rgba(255, 184, 108, 0.18);
}
.flota-nav .item.active {
background: #fff200;
color: #ff6a6a;
box-shadow: 0 4px 20px 0 rgba(255, 242, 0, 0.22);
}
.card {
padding: 56px 40px 44px 40px;
border-radius: 28px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px);
color: #fff;
}
@media screen and (max-width: 768px) {
.nav {
width: 0;
height: 0;
overflow: hidden;
padding: 0;
margin: 0;
}
.flota-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
display: flex;
z-index: 9999;
padding: 0 10px;
height: 40px;
border-radius: 0;
}
.flota-nav .item{
margin-bottom: 0;
padding: 0 10px;
}
.content {
padding: 0 10px;
padding-top: 40px;
}
}

35
src/controllers/Page/PageController.js
View File

@ -9,15 +9,20 @@ class PageController {
this.userService = new UserService() this.userService = new UserService()
this.siteConfigService = new SiteConfigService() this.siteConfigService = new SiteConfigService()
} }
// 首页
async indexGet(ctx) { async indexGet(ctx) {
return await ctx.render("page/index/index", {}, { includeSite: true, includeUser: true }) return await ctx.render("page/index/index", {}, { includeSite: true, includeUser: true })
} }
// 未授权报错页
async indexNoAuth(ctx) { async indexNoAuth(ctx) {
return await ctx.render("page/auth/no-auth", {}) return await ctx.render("page/auth/no-auth", {})
} }
// 登录页
async loginGet(ctx) { async loginGet(ctx) {
if (ctx.state.user) { if (ctx.session.user) {
ctx.status = 200 ctx.status = 200
ctx.redirect("/?msg=用户已登录") ctx.redirect("/?msg=用户已登录")
return return
@ -25,6 +30,7 @@ class PageController {
return await ctx.render("page/login/index", { site_title: "登录" }) return await ctx.render("page/login/index", { site_title: "登录" })
} }
// 处理登录请求
async loginPost(ctx) { async loginPost(ctx) {
const { username, email, password } = ctx.request.body const { username, email, password } = ctx.request.body
const result = await this.userService.login({ username, email, password }) const result = await this.userService.login({ username, email, password })
@ -32,6 +38,7 @@ class PageController {
ctx.body = { success: true, message: "登录成功" } ctx.body = { success: true, message: "登录成功" }
} }
// 获取验证码
async captchaGet(ctx) { async captchaGet(ctx) {
var captcha = svgCaptcha.create({ var captcha = svgCaptcha.create({
size: 4, // 个数 size: 4, // 个数
@ -39,7 +46,7 @@ class PageController {
height: 30, // 高 height: 30, // 高
fontSize: 38, // 字体大小 fontSize: 38, // 字体大小
color: true, // 字体颜色是否多变 color: true, // 字体颜色是否多变
noise: 2, // 干扰线几条 noise: 4, // 干扰线几条
}) })
// 记录验证码信息（文本+过期时间） // 记录验证码信息（文本+过期时间）
// 这里设置5分钟后过期 // 这里设置5分钟后过期
@ -52,13 +59,9 @@ class PageController {
ctx.body = captcha.data ctx.body = captcha.data
} }
// 注册页
async registerGet(ctx) { async registerGet(ctx) {
if (ctx.state.user) { if (ctx.session.user) {
ctx.cookies.set("toast", JSON.stringify({ type: "error", message: encodeURIComponent("用户已登录") }), {
maxAge: 1,
httpOnly: false,
path: "/",
})
return ctx.redirect("/?msg=用户已登录") return ctx.redirect("/?msg=用户已登录")
} }
// TODO 多个 // TODO 多个
@ -66,6 +69,7 @@ class PageController {
return await ctx.render("page/register/index", { site_title: "注册", randomStr: ctx.session.registerRandomStr }) return await ctx.render("page/register/index", { site_title: "注册", randomStr: ctx.session.registerRandomStr })
} }
// 处理注册请求
async registerPost(ctx) { async registerPost(ctx) {
const { username, password, code, randomStr } = ctx.request.body const { username, password, code, randomStr } = ctx.request.body
@ -101,29 +105,18 @@ class PageController {
delete ctx.session.captcha delete ctx.session.captcha
// try {
await this.userService.register({ username, password, role: "user" }) await this.userService.register({ username, password, role: "user" })
// ctx.cookies.set("toast", JSON.stringify({ type: "success", message: "注册成功" }), {
// maxAge: 1,
// httpOnly: false,
// path: "/",
// })
// } catch (error) {
// ctx.cookies.set('toast', JSON.stringify({type:"error",message:encodeURIComponent(error.message || error)}), {
// maxAge: 1,
// httpOnly: false,
// path: '/',
// })
// }
return ctx.redirect("/login") return ctx.redirect("/login")
} }
// 退出登录
async logout(ctx) { async logout(ctx) {
ctx.status = 200 ctx.status = 200
delete ctx.session.user delete ctx.session.user
ctx.set("hx-redirect", "/") ctx.set("hx-redirect", "/")
} }
// 渲染页面
pageGet(name, data) { pageGet(name, data) {
return async ctx => { return async ctx => {
return await ctx.render( return await ctx.render(

4
src/views/htmx/footer.pug
View File

@ -12,10 +12,10 @@
background: rgba(34,34,34,.25); background: rgba(34,34,34,.25);
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
color: #eee; color: #eee;
padding: 40px 0 24px 0; padding: 24px 0 24px 0;
font-size: 15px; font-size: 15px;
margin-top: 40px; margin-top: 40px;
min-height: 120px; min-height: 100px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;

18
src/views/layouts/bg-page.pug
View File

@ -0,0 +1,18 @@
extends /layouts/root.pug
//- 采用纯背景页面的布局，背景图片随机切换，卡片采用高斯滤镜类玻璃化效果
//- .card
block $$head
+css('css/layouts/bg-page.css')
block pageHead
block $$content
.page-layout
.page
block pageContent
footer
include /htmx/footer.pug
block $$scripts
+js('lib/bg-change.js')
block pageScripts

6
src/views/layouts/pure.pug
View File

@ -5,8 +5,10 @@ block $$head
block pageHead block pageHead
block $$content block $$content
.content(style="flex:1;height:0") .page-layout
block pageContent .page
.content
block pageContent
footer footer
include /htmx/footer.pug include /htmx/footer.pug

4
src/views/layouts/root.pug
View File

@ -11,9 +11,10 @@ html(lang="zh-CN")
link(rel="shortcut icon", href=$site.site_favicon) link(rel="shortcut icon", href=$site.site_favicon)
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")
+css('reset.css') +css('lib/reset.css')
+css('lib/simplebar.css', true) +css('lib/simplebar.css', true)
+css('lib/simplebar-shim.css') +css('lib/simplebar-shim.css')
+css('css/layouts/root.css')
+js('lib/htmx.min.js') +js('lib/htmx.min.js')
+js('lib/tailwindcss.3.4.17.js') +js('lib/tailwindcss.3.4.17.js')
+js('lib/simplebar.min.js', true) +js('lib/simplebar.min.js', true)
@ -35,7 +36,6 @@ html(lang="zh-CN")
div(style="height: 100%; display: flex; flex-direction: column") div(style="height: 100%; display: flex; flex-direction: column")
block $$content block $$content
block $$scripts block $$scripts
+js('lib/bg-change.js')
script. script.
//- 处理滚动条位置 //- 处理滚动条位置
const el = document.querySelector('.simplebar-content-wrapper') const el = document.querySelector('.simplebar-content-wrapper')

84
src/views/page/about/index.pug
View File

@ -1,7 +1,7 @@
extends /layouts/pure.pug extends /layouts/bg-page.pug
block pageContent block pageContent
.about-container .about-container.card
h1 关于我们 h1 关于我们
p 我们致力于打造一个基于 Koa3 的现代 Web 示例项目，帮助开发者快速上手高效、可扩展的 Web 应用开发。 p 我们致力于打造一个基于 Koa3 的现代 Web 示例项目，帮助开发者快速上手高效、可扩展的 Web 应用开发。
.about-section .about-section
@ -18,83 +18,3 @@ block pageContent
p 如有建议或合作意向，欢迎通过 p 如有建议或合作意向，欢迎通过
a(href="mailto:1549469775@qq.com") 联系方式 a(href="mailto:1549469775@qq.com") 联系方式
| 与我们取得联系。 | 与我们取得联系。
style.
.about-container {
margin: 32px auto 0 auto;
padding: 56px 40px 44px 40px;
border-radius: 28px;
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(18px);
//- max-width: 900px;
//- min-width: 340px;
}
.about-container h1 {
font-size: 2.7em;
color: rgb(80, 168, 255);
margin-bottom: 28px;
text-align: center;
font-weight: 900;
letter-spacing: 2.5px;
text-shadow: 0 2px 16px rgba(33,150,243,0.10);
background: linear-gradient(90deg,rgb(80, 168, 255) 30%, #7ec6f7 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.about-container p {
font-size: 1.18em;
color: #fff;
margin-bottom: 26px;
line-height: 1.85;
}
.about-section {
margin-bottom: 38px;
padding-bottom: 14px;
border-bottom: 1px dashed #b2ebf2;
}
.about-section:last-child {
border-bottom: none;
}
.about-section h2 {
font-size: 1.22em;
color:rgb(80, 168, 255);
margin-bottom: 10px;
font-weight: 700;
letter-spacing: 1.2px;
background: linear-gradient(90deg,rgb(80, 168, 255) 60%, #7ec6f7 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.about-section ul {
padding-left: 28px;
margin-bottom: 0;
}
.about-section li {
font-size: 1.08em;
color: #fff;
margin-bottom: 8px;
line-height: 1.7;
}
.about-container a {
color:rgb(80, 168, 255);
text-decoration: underline;
font-weight: 600;
transition: color 0.2s, background 0.2s;
border-radius: 8px;
padding: 1px 4px;
}
.about-container a:hover {
color: #fff;
background: linear-gradient(90deg, #7ec6f7 0%, #ff8ca8 100%);
text-decoration: none;
}
@media (max-width: 900px) {
.about-container {
max-width: 98vw;
padding: 18px 4vw 18px 4vw;
}
.about-container h1 {
font-size: 1.5em;
}
}

12
src/views/page/index/index.pug
View File

@ -1,11 +1,11 @@
extends /layouts/pure.pug extends /layouts/bg-page.pug
block pageHead block pageHead
+css("css/page/index.css") +css("css/page/index.css")
block pageContent block pageContent
div. div(class="mt-[20px]")
sadasd +include()
//- div(class="mt-[50px]") include /htmx/navbar.pug
//- +include() .card(class="mt-[20px]")
//- include /htmx/navbar.pug img(src="/static/bg2.webp" alt="bg")
Write Preview
Loading…
Cancel
Save