add

public/style/views/color.css

@@ -4,6 +4,11 @@
     position: relative;
 }
 
+h1{
+    font-size: 25px;
+    margin-bottom: 12px;
+}
+
 .color_list {
     display: -webkit-box;
     display: -ms-flexbox;
@@ -20,7 +25,6 @@
     padding: 5px 10px;
     cursor: pointer;
     width: 100px;
-    height: 125px;
 }
 
 .color_list .color_item:hover .color_add {
@@ -34,10 +38,10 @@
     position: absolute;
     top: 50%;
     left: 50%;
-    -webkit-transition: -webkit-transform .3s linear;
+    -webkit-transition: -webkit-transform 0.3s linear;
-    transition: -webkit-transform .3s linear;
+    transition: -webkit-transform 0.3s linear;
-    transition: transform .3s linear;
+    transition: transform 0.3s linear;
-    transition: transform .3s linear, -webkit-transform .3s linear;
+    transition: transform 0.3s linear, -webkit-transform 0.3s linear;
     -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
 }
@@ -47,25 +51,30 @@
 }
 
 .color_list .color_item:hover .color_toggle_list {
-    max-height: 99px;
+    top: 0;
 }
 
 .color_list .color_item .color_toggle_list {
     overflow: hidden;
     position: absolute;
-    bottom: 0;
+    top: 100%;
     left: 0;
     right: 0;
     width: 100%;
-    max-height: 0;
+    height: 100%;
-    -webkit-transition: max-height .5s linear;
+    -webkit-transition: top 0.3s ease;
-    transition: max-height .5s linear;
+    transition: top 0.3s ease;
-    background-color: rgba(180, 180, 180, 0.274);
+    color: white;
+    background-color: rgba(0, 0, 0, 0.2);
+    /* filter: brightness(.7); */
+    display: flex;
+    flex-direction: column;
 }
 
 .color_list .color_item .color_toggle_list .color_toggle_item {
-    display: inline-block;
+    flex: 1;
-    height: 25px;
+    height: 0;
+    box-sizing: border-box;
     padding: 2px 6px;
 }
 
@@ -75,8 +84,8 @@
 
 .color_list .color_item .color_item_bg {
     height: 50px;
-    background-color: red;
     position: relative;
+    overflow: hidden;
 }
 
 .color_list .color_item .color_item_content .color_item_title {

route.txt

@@ -1,16 +1,17 @@
-/home/topuser/Code/@project/hapi-demo/source/route/htmx对应路径：
+D:\1XYX\pro\hapi-demo\source\route\htmx对应路径：
- 不需权限             ：  GET        /htmx/path/{path*}
+ 不需权限(提供无需验证)：  GET        /htmx/path/{path*}
-/home/topuser/Code/@project/hapi-demo/source/route/views对应路径：
+D:\1XYX\pro\hapi-demo\source\route\views对应路径：
  不需权限(提供无需验证)：  GET        /404
  不需权限(提供无需验证)：  GET        /
  不需权限(提供无需验证)：  GET        /about
+ 不需权限(提供无需验证)：  GET        /color
  需要权限             ：  GET        /docs/{path*}
- 不需权限             ：  GET        /{path*}
+ 不需权限(提供无需验证)：  GET        /{path*}
  不需权限(提供无需验证)：  GET        /login
- 不需权限             ：  POST       /login
+ 不需权限(提供无需验证)：  POST       /login
- 不需权限             ：  GET        /nav
+ 不需权限(提供无需验证)：  GET        /nav
  不需权限(提供无需验证)：  GET        /register
- 不需权限             ：  POST       /register
+ 不需权限(提供无需验证)：  POST       /register
  需要权限             ：  POST       /user
  需要权限             ：  GET        /user
  需要权限             ：  GET        /user/logout

source/plugins/index.ts

@@ -95,7 +95,6 @@ export default [
                     const isLogin = request.auth.isAuthenticated
                     // const { id } = request.auth.credentials;
                     // loggerSite.debug(`${isLogin?'当前登录ID:'+id:'未登录用户'}, 请求路径:${request.path}, 请求方法:${request.method}`)
-
                     // @ts-ignore
                     // console.log(isLogin, request.path, request.response.variety);
                     // let user;

source/plugins/router-plugin/index.ts

@@ -71,16 +71,23 @@ class routePlugin {
                                 if (auth && auth.length && auth.filter(v => route.startsWith(v)).length) {
                                     options.auth = type
                                 } else {
-                                    options.auth = false
+                                    // 默认是try
+                                    options.auth = {
+                                        strategy: type,
+                                        mode: "try",
+                                    }
                                 }
                             } else if (ff.$auth) {
-                                options.auth =
+                                if(typeof ff.$auth === "boolean" && ff.$auth){
-                                    typeof ff.$auth === "boolean"
+                                    options.auth = type
-                                        ? type
+                                }else if(typeof ff.$auth === "boolean"){
-                                        : {
+                                    options.auth = false
+                                }else {
+                                    options.auth = {
                                         strategy: type,
                                         mode: ff.$auth,
                                     }
+                                }
                             } else {
                                 options.auth = false
                             }

source/route/views/index.ts

@@ -28,11 +28,11 @@ export default class Index {
             return h.redirect(`/login?next=${encodeURIComponent(request.path)}`).takeover()
         }
         const md = new MarkdownIt()
-        console.log(path.resolve(baseDir, "./docs/a.md"));
+        console.log(path.resolve(baseDir, "./docs/a.md"))
 
         var result = md.render(fs.readFileSync(path.resolve(baseDir, "./docs/a.md"), "utf-8"))
         const data = {
-            md: result
+            md: result,
         }
         if (isRenderHtmx) {
             return h.view("htmx/path/about.pug", data)
@@ -40,6 +40,18 @@ export default class Index {
         return h.view("views/about.pug", data)
     }
 
+    @route("/color")
+    async color(request: Req, h: Res) {
+        const filePath = path.resolve(baseDir, "template/views", "color.pug")
+        if (fs.existsSync(filePath)) {
+            const isRenderHtmx = Reflect.has(request.query, "htmx")
+            if (isRenderHtmx) {
+                return h.view(`htmx/path/color.pug`)
+            }
+            return h.view(`views/color.pug`)
+        }
+    }
+
     @route("/docs/{path*}")
     @auth()
     async docs(req: Req, h: Res): ReturnValue {
@@ -74,6 +86,10 @@ export default class Index {
         if (req.path) {
             const filePath = path.resolve(baseDir, "template/views", "." + req.path + ".pug")
             if (fs.existsSync(filePath)) {
+                const isRenderHtmx = Reflect.has(req.query, "htmx")
+                if (isRenderHtmx) {
+                    return h.view(`htmx/path${req.path}.pug`)
+                }
                 return h.view(`views${req.path}.pug`)
             }
         }

source/route/views/user.ts

@@ -111,6 +111,7 @@ export default class {
     @auth()
     @route_path("/user")
     async index_post(request: Req, h: Res): ReturnValue {
+        try {
             const { id, username, nickname, email, tel } = request.auth.credentials
             const { filelist, fields } = await Save(request.payload, request)
             const result = {}
@@ -147,6 +148,10 @@ export default class {
                     request.auth.credentials = await UserModel.findOne({ where: { id } })
                 }
             }
+        } catch (error) {
+            loggerSite.error(error.message)
+            request.yar.flash("error", error.message)
+        }
         return h.redirect("/user")
     }
 

source/run.ts

@@ -1,12 +1,13 @@
 "use strict"
 import plugins from "@/plugins"
 import path from "path"
-import { baseDir, isDev, sourceDir, templateDir } from "@/util"
+import { baseDir, isDev, publicDir, sourceDir, templateDir } from "@/util"
 import { validateJwt, validateSession } from "./auth"
 import Hapi, { Server } from "@hapi/hapi"
 import { Sequelize } from "sequelize"
 import { Req } from "#/global"
 import { sequelize } from "./plugins/sequelize"
+import fs from "fs-extra"
 // const Hapi = require("@hapi/hapi");
 // const HapiSwagger = require("hapi-swagger");
 // const HapiSwagger = require("hapi-swaggered-ui"); // swagger v2版本
@@ -89,10 +90,18 @@ const run = async (): Promise<Server> => {
      */
     // https://hapi.dev/module/vision/api/?v=6.1.0
     await server.register(require("@hapi/vision"))
+    const Pug = require("pug")
+    Pug.filters.public = function (text, options) {
+        const p = path.resolve(publicDir, text)
+        if(fs.pathExistsSync(p)) {
+            return fs.readFileSync(p, "utf-8")
+        }
+        return ""
+    };
     server.views({
         engines: {
             ejs: require("ejs"),
-            pug: require("pug"),
+            pug: Pug,
         },
         isCached: process.env.NODE_ENV === "development" ? false : true,
         compileMode: "sync", // ejs

template/htmx/path/color.pug

@@ -0,0 +1,53 @@
+include @/helper/flush.pug
+include @/helper/helper.pug
+
+block var
+  -title="颜色" // 网页标题
+title 颜色
+
+div(class="container page")
+    style 
+        :public style/views/color.css
+    h1 颜色表
+    div(class="color_list")
+      -
+        var list=[
+          {  color:"#00ffff",title: "青色",describe:""},
+          {  color:"#222222",title: "辅助色",describe:""},
+          {  color:"#8f8f8f",title: "辅助色",describe:""},
+          {  color:"#00d1b2",title: "辅助色",describe:""},
+          {  color:"#999999",title: "辅助色",describe:""},
+          {  color:"#999999",title: "辅助色",describe:""},
+          {  color:"#999999",title: "辅助色",describe:""},
+          {  color:"#999999",title: "辅助色",describe:""},
+          {  color:"#999999",title: "辅助色",describe:""},
+          {  color:"#999999",title: "辅助色",describe:""},
+          {  color:"#999999",title: "辅助色",describe:""},
+          {  color:"#999999",title: "辅助色",describe:""},
+          {  color:"#999999",title: "辅助色",describe:""},
+          {  color:"#999999",title: "辅助色",describe:""},
+          {  color:"#999999",title: "辅助色",describe:""},
+          {  color:"#999999",title: "辅助色",describe:""},
+          {  color:"#999999",title: "辅助色",describe:""},
+          {  color:"#999999",title: "辅助色",describe:""},
+          {  color:"#999999",title: "辅助色",describe:""},
+          {  color:"#999999",title: "辅助色",describe:""},
+        ]
+      each item in list
+        div(class="color_item")
+          div(class="color_item_bg" style=`background: ${item.color}`)
+            div(class="color_toggle_list")
+              div(class="color_toggle_item") hex
+              div(class="color_toggle_item") rgba
+          div(class="color_item_name") #{item.color}
+          div(class="color_item_content")
+            div(class="color_item_title") #{item.title}
+            div(class="color_item_desc") #{item.describe || "暂无描述"}
+        //- div(class="color_item")
+            //- img(src="/public/image/add.png", alt="添加" title="添加" class="color_add")
+      if isLogin 
+        div
+            form(action="POST" method="post")
+                div(class=".wrapper_input"): input(type="text" tabindex="1" value="sadsa" name="a")
+                div(class=".wrapper_input"): input(type="text" tabindex="3" value="sadsa" name="b")
+                button(type="submit" tabindex="2") 提交

template/ui/header.pug

@@ -12,6 +12,8 @@ nav.is-fixed-top.navbar(role='navigation', aria-label='main navigation', style="
             .navbar-start
                 a.navbar-item(hx-get="/?htmx" hx-push-url="/" hx-trigger="click" hx-target="#single-page" hx-swap="innerHTML")
                     | 首页
+                a.navbar-item(hx-get="/color?htmx" hx-push-url="/color" hx-trigger="click" hx-target="#single-page" hx-swap="innerHTML")
+                    | 颜色
                 .navbar-item.has-dropdown.is-hoverable
                     a.navbar-link
                         | 更多

template/views/color.pug

@@ -1,51 +1,4 @@
-extends /layout/layout
+extends @/layout/single-page
 
-block var
+block page
-  -title="颜色表" // 网页标题
+    include @hxpath/color.pug
-
-block head
-  link(rel="stylesheet", href="/public/style/views/color.css")
-
-block content
-  div(class="container page")
-    div(class="color_list")
-      -
-        var list=[
-          {  color:"#999999",title: "辅助色",describe:"灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色"},
-          {  color:"#999999",title: "辅助色",describe:"灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色"},
-          {  color:"#999999",title: "辅助色",describe:"灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色"},
-          {  color:"#000000",title: "辅助色",describe:""},
-          {  color:"#999999",title: "辅助色",describe:""},
-          {  color:"#999999",title: "辅助色",describe:""},
-          {  color:"#999999",title: "辅助色",describe:""},
-          {  color:"#999999",title: "辅助色",describe:""},
-          {  color:"#999999",title: "辅助色",describe:""},
-          {  color:"#999999",title: "辅助色",describe:""},
-          {  color:"#999999",title: "辅助色",describe:""},
-          {  color:"#999999",title: "辅助色",describe:""},
-          {  color:"#999999",title: "辅助色",describe:""},
-          {  color:"#999999",title: "辅助色",describe:""},
-          {  color:"#999999",title: "辅助色",describe:""},
-          {  color:"#999999",title: "辅助色",describe:""},
-          {  color:"#999999",title: "辅助色",describe:""},
-          {  color:"#999999",title: "辅助色",describe:""},
-          {  color:"#999999",title: "辅助色",describe:""},
-          {  color:"#999999",title: "辅助色",describe:""},
-        ]
-      each item in list
-        div(class="color_item")
-          div(class="color_item_bg" style=`background: ${item.color}`)
-            div(class="color_toggle_list")
-              div(class="color_toggle_item") hex
-              div(class="color_toggle_item") rgba
-          div(class="color_item_name") #{item.color}
-          div(class="color_item_content")
-            div(class="color_item_title") #{item.title}
-            div(class="color_item_desc") #{item.describe || "暂无描述"}
-      div(class="color_item")
-        //- img(src="/public/image/add.png", alt="添加" title="添加" class="color_add")
-      div
-        form(action="POST" method="post")
-          div(class=".wrapper_input"): input(type="text" tabindex="1" value="sadsa" name="a")
-          div(class=".wrapper_input"): input(type="text" tabindex="3" value="sadsa" name="b")
-          button(type="submit" tabindex="2") 提交