From 7376d9e640bc8256fc283d4ec1542497bffdbedb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A2=E4=BA=9A=E6=98=95?= <1549469775@qq.com>
Date: Fri, 26 Sep 2025 10:48:48 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E9=A1=B5=E9=9D=A2=E5=B8=83?=
=?UTF-8?q?=E5=B1=80=E5=92=8C=E6=A0=B7=E5=BC=8F=EF=BC=8C=E6=96=B0=E5=A2=9E?=
=?UTF-8?q?=E4=BD=9C=E5=93=81=E5=B1=95=E7=A4=BA=E7=BB=84=E4=BB=B6=EF=BC=8C?=
=?UTF-8?q?=E4=BC=98=E5=8C=96=E7=99=BB=E5=BD=95=E9=A1=B5=E9=9D=A2=E7=BB=93?=
=?UTF-8?q?=E6=9E=84=E5=92=8C=E6=A0=B7=E5=BC=8F=EF=BC=8C=E6=95=B4=E5=90=88?=
=?UTF-8?q?=E7=B2=92=E5=AD=90=E7=89=B9=E6=95=88=E5=92=8CGSAP=E5=8A=A8?=
=?UTF-8?q?=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/middlewares/install.js | 2 +
src/views/page/extra/about.pug | 28 +++++++++---
src/views/page/extra/style.css | 22 ++++++++++
src/views/page/index/index.pug | 52 +++++++++++-----------
src/views/page/login/index.pug | 97 +++++++++++++++++++++++++++---------------
src/views/page/login/style.css | 22 ++++++++++
6 files changed, 155 insertions(+), 68 deletions(-)
create mode 100644 src/views/page/extra/style.css
create mode 100644 src/views/page/login/style.css
diff --git a/src/middlewares/install.js b/src/middlewares/install.js
index cc3210e..49e3d5b 100644
--- a/src/middlewares/install.js
+++ b/src/middlewares/install.js
@@ -75,6 +75,8 @@ export default async app => {
"'unsafe-eval'",
"https://cdnjs.cloudflare.com",
"https://cdn.jsdelivr.net",
+ "https://unpkg.co",
+ "https://assets.codepen.io",
],
"img-src": ["'self'", "data:", "https://bpic.588ku.com", "https://user-images.githubusercontent.com"],
},
diff --git a/src/views/page/extra/about.pug b/src/views/page/extra/about.pug
index eca20e9..6e3a120 100644
--- a/src/views/page/extra/about.pug
+++ b/src/views/page/extra/about.pug
@@ -1,7 +1,25 @@
-extends /layouts/empty.pug
+extends /layouts/root.pug
-block pageHead
+block $$head
+ style
+ include ./style.css
-block pageContent
- .container.my-5
- include /htmx/markdown/index.pug
\ No newline at end of file
+block $$content
+ .page-layout.bg-gray-50
+ navbar
+ //- .placeholder(class="h-[75px] w-full opacity-0")
+ .fixed.top-0.left-0.right-0.z-10(class="h-[75px]")
+ .container.h-full
+ a.h-full.flex.items-center.float-left.text-2xl.font-bold(href="/") 烟霞渡
+ canvas#background.absolute.block.top-0.left-0.z-0
+ .container.relative(class="mt-[75px] pt-10")
+ include /htmx/markdown/index.pug
+
+
+block $$scripts
+ +js("https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.2/particles.min.js")
+ script.
+ Particles.init({
+ selector: '#background',
+ maxParticles: 350,
+ });
diff --git a/src/views/page/extra/style.css b/src/views/page/extra/style.css
new file mode 100644
index 0000000..68dd56e
--- /dev/null
+++ b/src/views/page/extra/style.css
@@ -0,0 +1,22 @@
+.page-layout {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ position: relative;
+}
+
+.container {
+ max-width: 1226px;
+ margin-right: auto;
+ margin-left: auto;
+ /* padding-left: 20px;
+ padding-right: 20px; */
+}
+
+@media (max-width: 640px) {
+ .container {
+ padding-left: 10px;
+ padding-right: 10px;
+ }
+}
\ No newline at end of file
diff --git a/src/views/page/index/index.pug b/src/views/page/index/index.pug
index 81b0fb6..221f557 100644
--- a/src/views/page/index/index.pug
+++ b/src/views/page/index/index.pug
@@ -4,6 +4,16 @@ block $$head
style
include ./style.css
+mixin Project()
+ .text-2xl.font-bold.mb-6.text-center 作品
+ .grid.grid-cols-1.gap-6(class="md:grid-cols-2 lg:grid-cols-3")
+ .p-3.flex.gap-4
+ img(src="https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650", alt="", class="w-20 h-20 shadow rounded-[50%] object-cover")
+ .flex.justify-center.flex-col
+ a.font-bold.text-lg.mb-2(href="/") 灵巧代码
+ p.text-gray-600.line-clamp-2(style="min-height: 2em") 用electron开发
+ //- .text-center.text-sm.my-6.p-2(class) 查看更多
+
block $$content
.page-layout.bg-gray-50
navbar
@@ -14,38 +24,24 @@ block $$content
//- .float-left.h-full.flex(class="ml-[100px]")
//- a.flex.items-center.px-5(href="/") 关于
.float-right.h-full.flex
- a.flex.items-center.px-5(href="/login") 登录
+ if !user
+ a.flex.items-center.px-5(href="/login") 登录
+ else
+ a.flex.items-center.px-5.cursor-pointer(hx-post="/logout") 退出
+ a.flex.items-center.px-5.cursor-pointer 后台
+ a.flex.items-center.px-5(href="/profile") 欢迎您，#{user.username}
canvas#background.absolute.block.top-0.left-0.z-0
.min-h-screen.relative
- .container
- div(class="mt-[75px] p-[40px] h-[350px] flex justify-center items-center text-xl" style="line-height: 2.1;")
- .typed(style="letter-spacing: 0.2em;")
- .text-2xl.font-bold.mb-6.ml-3.text-center 作品
- .grid.grid-cols-1.gap-6(class="md:grid-cols-2 lg:grid-cols-3")
- .p-3.flex.gap-4
- img(src="https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650", alt="", class="w-20 h-20 shadow rounded-[50%] object-cover")
- .flex.justify-center.flex-col
- a.font-bold.text-lg.mb-2(href="/") 灵巧代码
- p.text-gray-600.line-clamp-2(style="min-height: 2em") 管理文本
- .text-center.text-sm.my-6.p-2(class) 查看更多
+ .container(class="mt-[75px] pt-10")
+ +Project()
include /htmx/footer/index.pug
block $$scripts
- +js("https://cdn.jsdelivr.net/npm/typed.js@2.0.12")
+js("https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.2/particles.min.js")
+ +js("https://unpkg.co/gsap@3/dist/gsap.min.js")
+ +js("https://assets.codepen.io/16327/SplitText3-beta.min.js?b=43")
script.
- window.onload= function() {
- Particles.init({
- selector: '#background',
- maxParticles: 350,
- });
-
- var options = {
- strings: [`烟锁长堤柳色新，
霞映归舟渡水滨。
过客停桡寻旧梦，
一川风月正宜人。`],
- typeSpeed: 80,
- shuffle: true,
- showCursor: false,
- };
-
- var typed = new Typed('.typed', options);
- };
+ Particles.init({
+ selector: '#background',
+ maxParticles: 350,
+ });
diff --git a/src/views/page/login/index.pug b/src/views/page/login/index.pug
index 30664d4..326e9be 100644
--- a/src/views/page/login/index.pug
+++ b/src/views/page/login/index.pug
@@ -1,42 +1,69 @@
-extends /layouts/empty.pug
+extends /layouts/root.pug
-block pageHead
- //- style.
- //- body {
- //- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
- //- min-height: 100vh;
- //- }
+block $$head
+ style
+ include ./style.css
-block pageContent
- .h-full(class="sm:px-6 lg:px-8")
- .container.h-full.flex.items-center.justify-end.px-4
- .max-w-md.w-full.space-y-8
- .bg-white.py-8.px-4.shadow-xl.rounded-2xl(class="sm:px-10")
- .text-center.mb-8
- h2.text-3xl.font-bold.text-gray-900 欢迎回来
- p.text-gray-600.mt-2 请登录您的账户
- form.space-y-6(hx-post="/login")
- include _ui/username.pug
- include _ui/password.pug
- .flex.items-center.justify-between
- .flex.items-center
- //- input#remember-me.h-4.w-4.text-blue-600.border-gray-300.rounded(type="checkbox" class="focus:ring-blue-500")
- //- label.ml-2.block.text-sm.text-gray-900(for="remember-me") 记住我
- .text-sm
- a.font-medium.text-blue-600(href="#" class="hover:text-blue-500") 忘记密码？
- div
- button.group.relative.w-full.flex.justify-center.py-3.px-4.border.border-transparent.text-sm.font-medium.rounded-md.text-white.bg-blue-600(type="submit" class="hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out")
- span.absolute.left-0.inset-y-0.flex.items-center.pl-3
- //- svg.h-5.w-5.text-blue-500(xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="group-hover:text-blue-400")
- //- path(fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd")
- span 登录
- .text-center
- p.text-sm.text-gray-600
- | 还没有账户？
- a.font-medium.text-blue-600(href="/register" class="hover:text-blue-500") 立即注册
-block pageScripts
+block $$content
+ .page-layout.bg-gray-50
+ navbar
+ //- .placeholder(class="h-[75px] w-full opacity-0")
+ .fixed.top-0.left-0.right-0.z-10(class="h-[75px]")
+ .container.h-full
+ a.h-full.flex.items-center.float-left.text-2xl.font-bold(href="/") 烟霞渡
+ canvas#background.absolute.block.top-0.left-0.z-0
+ .h-full.relative(class="sm:px-6 lg:px-8")
+ .container.h-full.flex.items-center
+ .flex-1.h-full.flex.items-center.justify-center
+ h1.text-4xl.font-bold#chars
+ div 烟霞渡！
+ .mt-5 欢迎您的到来
+ .flex-1.px-4.max-w-md
+ .w-full.space-y-8
+ .py-8.px-4(class="sm:px-10")
+ .text-center.mb-8
+ form.space-y-6(hx-post="/login")
+ include _ui/username.pug
+ include _ui/password.pug
+ .flex.items-center.justify-between
+ .flex.items-center
+ //- input#remember-me.h-4.w-4.text-blue-600.border-gray-300.rounded(type="checkbox" class="focus:ring-blue-500")
+ //- label.ml-2.block.text-sm.text-gray-900(for="remember-me") 记住我
+ .text-sm
+ a.font-medium.text-blue-600(href="#" class="hover:text-blue-500") 忘记密码？
+ div
+ button.group.relative.w-full.flex.justify-center.py-3.px-4.border.border-transparent.text-sm.font-medium.rounded-md.text-white.bg-blue-600(type="submit" class="hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out")
+ span.absolute.left-0.inset-y-0.flex.items-center.pl-3
+ //- svg.h-5.w-5.text-blue-500(xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="group-hover:text-blue-400")
+ //- path(fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd")
+ span 登录
+ .text-center
+ p.text-sm.text-gray-600
+ | 还没有账户？
+ a.font-medium.text-blue-600(href="/register" class="hover:text-blue-500") 立即注册
+
+block $$scripts
+ +js("https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.2/particles.min.js")
+ +js("https://unpkg.co/gsap@3/dist/gsap.min.js")
+ +js("https://assets.codepen.io/16327/SplitText3-beta.min.js?b=43")
script.
+ Particles.init({
+ selector: '#background',
+ maxParticles: 350,
+ });
+ gsap.registerPlugin(SplitText);
+ let split, animation;
+ split = SplitText.create("#chars", {type:"chars"});
+ animation && animation.revert();
+ animation = gsap.from(split.chars, {
+ x: 150,
+ opacity: 0,
+ duration: 1.7,
+ ease: "power4",
+ stagger: 0.04
+ })
+
document.addEventListener('htmx:error', function(evt) {
if(evt.detail.elt instanceof HTMLElement) {
if(evt.detail.elt.tagName === 'FORM' && evt.detail.xhr) {
diff --git a/src/views/page/login/style.css b/src/views/page/login/style.css
new file mode 100644
index 0000000..68dd56e
--- /dev/null
+++ b/src/views/page/login/style.css
@@ -0,0 +1,22 @@
+.page-layout {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ position: relative;
+}
+
+.container {
+ max-width: 1226px;
+ margin-right: auto;
+ margin-left: auto;
+ /* padding-left: 20px;
+ padding-right: 20px; */
+}
+
+@media (max-width: 640px) {
+ .container {
+ padding-left: 10px;
+ padding-right: 10px;
+ }
+}
\ No newline at end of file