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

feat: 重构时间线组件，优化页面渲染逻辑，添加未授权页面跳转功能

route
谢亚昕 4 weeks ago
parent
aeb2b4ea67
commit
a302c2e836
9 changed files with 206 additions and 181 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 131
      public/css/page/index.css
  2. 15
      src/controllers/Page/PageController.js
  3. 2
      src/middlewares/Views/index.js
  4. 2
      src/utils/router/RouteAuth.js
  5. 178
      src/views/htmx/timeline.pug
  6. 1
      src/views/layouts/pure.pug
  7. 7
      src/views/page/auth/no-auth.pug
  8. 42
      src/views/page/index/index.pug
  9. 9
      src/views/page/index/person.pug

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

@ -45,137 +45,6 @@
text-align: center;
}
.time-line {
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
.time-line:before {
content: "";
width: 3px;
height: 100%;
background: rgba(255, 255, 255, 0.37);
backdrop-filter: blur(12px);
left: 50%;
top: 0;
position: absolute;
transform: translateX(-50%);
}
.time-line::after {
content: "";
position: absolute;
left: 50%;
top: 100%;
width: 0;
height: 0;
border-top: 12px solid rgba(255, 255, 255, 0.37);
border-right: 7px solid transparent;
border-left: 7px solid transparent;
backdrop-filter: blur(12px);
transform: translateX(-50%);
}
.time-line a {
color: rgb(219, 255, 121);
text-decoration: underline;
font-weight: 600;
transition: color 0.2s, background 0.2s;
border-radius: 8px;
padding: 1px 4px;
}
.time-line a:hover {
color: #fff;
background: linear-gradient(90deg, #7ec6f7 0%, #ff8ca8 100%);
text-decoration: none;
}
.time-line-item {
color: white;
width: 900px;
margin: 20px auto;
position: relative;
}
.time-line-item:first-child {
margin-top: 0;
}
.time-line-item:last-child {
margin-bottom: 50px;
}
.timeline-icon {
position: absolute;
width: 100px;
height: 50px;
background-color: #ee4d4d7a;
backdrop-filter: blur(12px);
left: 50%;
top: 0;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
font-family: Arial, Helvetica, sans-serif;
}
.time-line-item-title {
background-color: #ee4d4d7a;
backdrop-filter: blur(12px);
height: 50px;
line-height: 50px;
padding: 0 20px;
}
.time-line-item:nth-child(odd) .time-line-item-content {
color: white;
width: 50%;
padding-right: 80px;
}
.time-line-item:nth-child(odd) .time-line-item-content::before {
content: "";
position: absolute;
left: calc(50% - 80px);
top: 20px;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left: 7px solid #ee4d4d7a;
backdrop-filter: blur(12px);
}
.time-line-item:nth-child(even) .time-line-item-content {
float: right;
width: 50%;
padding-left: 80px;
}
.time-line-item:nth-child(even) .time-line-item-content::before {
content: "";
position: absolute;
right: calc(50% - 80px);
top: 20px;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-right: 7px solid #ee4d4d7a;
backdrop-filter: blur(12px);
}
.time-line-item-desc {
background-color: #ffffff54;
backdrop-filter: blur(12px);
color: #fff;
padding: 20px;
line-height: 1.4;
}
@media screen and (max-width: 768px) {
.home-hero {
margin: 0;

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

@ -8,10 +8,10 @@ class PageController {
this.siteConfigService = new SiteConfigService()
}
async indexGet(ctx) {
const user = ctx.state.user
return await ctx.render("page/index/index", {
user: user,
}, { includeSite: true })
return await ctx.render("page/index/index", {}, { includeSite: true, includeUser: true })
}
async indexNoAuth(ctx) {
return await ctx.render("page/auth/no-auth", {})
}
async loginPost(ctx) {
@ -39,9 +39,10 @@ class PageController {
static createRoutes() {
const controller = new PageController()
const router = new Router({ auth: "try" })
router.get("/", controller.indexGet.bind(controller))
router.get("/no-auth", controller.pageGet("page/auth/no-auth"), { auth: false })
// 首页
router.get("/", controller.indexGet.bind(controller), { auth: false })
// 未授权报错页
router.get("/no-auth", controller.indexNoAuth.bind(controller), { auth: false })
router.get("/article/:id", controller.pageGet("page/articles/index"), { auth: false })
router.get("/articles", controller.pageGet("page/articles/index"), { auth: false })

2
src/middlewares/Views/index.js
View File

@ -18,7 +18,7 @@ function viewsMiddleware(path, { engineSource = consolidate, extension = "html",
// 将 render 注入到 context 和 response 对象中
ctx.response.render = ctx.render = function (relPath, locals = {}, renderOptions) {
renderOptions = assign({ includeSite: false, includeUser: false }, renderOptions || {})
renderOptions = assign({ includeSite: true, includeUser: false }, renderOptions || {})
return getPaths(path, relPath, extension).then(async paths => {
const suffix = paths.ext
const site = await siteConfigService.getAll()

2
src/utils/router/RouteAuth.js
View File

@ -28,7 +28,7 @@ export default function RouteAuth(options = {}) {
if (auth === true) {
if (!ctx.state.user) {
if (ctx.accepts('html')) {
ctx.redirect('/no-auth')
ctx.redirect('/no-auth?from=' + ctx.request.url)
return
}
ctx.status = 401

178
src/views/htmx/timeline.pug
View File

@ -0,0 +1,178 @@
- var _dataList = timeLine || []
ul.time-line
each item in _dataList
li.time-line-item
.timeline-icon
div #{item.icon}
.time-line-item-content
.time-line-item-title #{item.title}
.time-line-item-desc #{item.desc}
li.time-line-item
.timeline-icon
div 第一份工作
.time-line-item-content
.time-line-item-title ？？？
.time-line-item-desc 做游戏的。
li.time-line-item
.timeline-icon
div 大学毕业
.time-line-item-content
.time-line-item-title 2014年09月
.time-line-item-desc 我从
a(href="https://www.jxnu.edu.cn/" target="_blank") 江西师范大学
span 毕业，获得了软件工程（虚拟现实与技术）专业的学士学位。
li.time-line-item
.timeline-icon
div 高中
.time-line-item-content
.time-line-item-title ？？？
.time-line-item-desc 宜春中学
li.time-line-item
.timeline-icon
div 初中
.time-line-item-content
.time-line-item-title ？？？
.time-line-item-desc 宜春实验中学
li.time-line-item
.timeline-icon
div 小学
.time-line-item-content
.time-line-item-title ？？？
.time-line-item-desc 宜春二小
li.time-line-item
.timeline-icon
div 出生
.time-line-item-content
.time-line-item-title 1996年06月
.time-line-item-desc 我出生于江西省丰城市泉港镇。
style.
.time-line {
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
.time-line:before {
content: "";
width: 3px;
height: 100%;
background: rgba(255, 255, 255, 0.37);
backdrop-filter: blur(12px);
left: 50%;
top: 0;
position: absolute;
transform: translateX(-50%);
}
.time-line::after {
content: "";
position: absolute;
left: 50%;
top: 100%;
width: 0;
height: 0;
border-top: 12px solid rgba(255, 255, 255, 0.37);
border-right: 7px solid transparent;
border-left: 7px solid transparent;
backdrop-filter: blur(12px);
transform: translateX(-50%);
}
.time-line a {
color: rgb(219, 255, 121);
text-decoration: underline;
font-weight: 600;
transition: color 0.2s, background 0.2s;
border-radius: 8px;
padding: 1px 4px;
}
.time-line a:hover {
color: #fff;
background: linear-gradient(90deg, #7ec6f7 0%, #ff8ca8 100%);
text-decoration: none;
}
.time-line-item {
color: white;
width: 900px;
margin: 20px auto;
position: relative;
}
.time-line-item:first-child {
margin-top: 0;
}
.time-line-item:last-child {
margin-bottom: 50px;
}
.timeline-icon {
position: absolute;
width: 100px;
height: 50px;
background-color: #ee4d4d7a;
backdrop-filter: blur(12px);
left: 50%;
top: 0;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
font-family: Arial, Helvetica, sans-serif;
}
.time-line-item-title {
background-color: #ee4d4d7a;
backdrop-filter: blur(12px);
height: 50px;
line-height: 50px;
padding: 0 20px;
}
.time-line-item:nth-child(odd) .time-line-item-content {
color: white;
width: 50%;
padding-right: 80px;
}
.time-line-item:nth-child(odd) .time-line-item-content::before {
content: "";
position: absolute;
left: calc(50% - 80px);
top: 20px;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left: 7px solid #ee4d4d7a;
backdrop-filter: blur(12px);
}
.time-line-item:nth-child(even) .time-line-item-content {
float: right;
width: 50%;
padding-left: 80px;
}
.time-line-item:nth-child(even) .time-line-item-content::before {
content: "";
position: absolute;
right: calc(50% - 80px);
top: 20px;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-right: 7px solid #ee4d4d7a;
backdrop-filter: blur(12px);
}
.time-line-item-desc {
background-color: #ffffff54;
backdrop-filter: blur(12px);
color: #fff;
padding: 20px;
line-height: 1.4;
}

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

@ -5,7 +5,6 @@ block head
block pageHead
block content
// 页面整体flex布局，footer吸底
.page-layout
.page
.content

7
src/views/page/auth/no-auth.pug
View File

@ -46,4 +46,9 @@ block pageHead
.no-auth-container .btn:hover {
background: linear-gradient(90deg, #ffb86c 0%, #4fd1ff 100%);
color: #fff200;
}
}
block pageScripts
script.
const curUrl = URL.parse(location.href).searchParams.get("from")
fetch(curUrl,{redirect: 'error'}).then(res=>location.href=curUrl).catch(e=>console.log(e))

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

@ -10,42 +10,6 @@ block pageContent
img.avatar(src="https://alist.xieyaxin.top/p/%E6%B8%B8%E5%AE%A2%E6%96%87%E4%BB%B6/%E5%85%AC%E5%85%B1%E4%BF%A1%E6%81%AF/avatar.jpg", alt="")
.card
div 人生轨迹
ul.time-line
li.time-line-item
.timeline-icon
div 第一份工作
.time-line-item-content
.time-line-item-title ？？？
.time-line-item-desc 做游戏的。
li.time-line-item
.timeline-icon
div 大学毕业
.time-line-item-content
.time-line-item-title 2014年09月
.time-line-item-desc 我从
a(href="https://www.jxnu.edu.cn/" target="_blank") 江西师范大学
span 毕业，获得了软件工程（虚拟现实与技术）专业的学士学位。
li.time-line-item
.timeline-icon
div 高中
.time-line-item-content
.time-line-item-title ？？？
.time-line-item-desc 宜春中学
li.time-line-item
.timeline-icon
div 初中
.time-line-item-content
.time-line-item-title ？？？
.time-line-item-desc 宜春实验中学
li.time-line-item
.timeline-icon
div 小学
.time-line-item-content
.time-line-item-title ？？？
.time-line-item-desc 宜春二小
li.time-line-item
.timeline-icon
div 出生
.time-line-item-content
.time-line-item-title 1996年06月
.time-line-item-desc 我出生于江西省丰城市泉港镇。
+include()
- let timeLine = [{icon: '11',title: "aaaa",desc:"asd"}]
include /htmx/timeline.pug

9
src/views/page/index/person.pug
View File

@ -0,0 +1,9 @@
extends /layouts/pure.pug
block pageHead
+css("css/page/index.css")
block pageContent
+include()
- let timeLine = [{icon: '11',title: "aaaa",desc:"asd"}]
include /htmx/timeline.pug
Write Preview
Loading…
Cancel
Save