更新页面布局和样式，新增作品展示组件，优化登录页面结构和样式，整合粒子特效和GSAP动画

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"],
                 },

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
+block $$content
-  .container.my-5
+  .page-layout.bg-gray-50
-    include /htmx/markdown/index.pug
+    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,
+    });

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;
+    }
+}

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
+      .container(class="mt-[75px] pt-10")
-        div(class="mt-[75px] p-[40px] h-[350px] flex justify-center items-center text-xl" style="line-height: 2.1;")
+        +Project()
-          .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) 查看更多
   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({
-      Particles.init({
+      selector: '#background',
-        selector: '#background',
+       maxParticles: 350,
-         maxParticles: 350,
+    });
-      });
-      
-      var options = {
-        strings: [`烟锁长堤柳色新，<br>霞映归舟渡水滨。<br>过客停桡寻旧梦，<br>一川风月正宜人。`],
-        typeSpeed: 80,
-        shuffle: true,
-        showCursor: false,
-      };
-
-      var typed = new Typed('.typed', options);
-    };

src/views/page/login/index.pug

@@ -1,42 +1,69 @@
-extends /layouts/empty.pug
+extends /layouts/root.pug
 
-block pageHead
+block $$head
-  //- style.
+  style 
-  //-   body {
+    include ./style.css
-  //-     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  //-     min-height: 100vh;
-  //-   }
 
-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) {

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;
+    }
+}