后台管理前端结构调整；管理员后台添加第三方账号绑定

bookshelfplus-frontend/public/assets/javascripts/dashboard/admin/BookManage.js

@@ -1,259 +0,0 @@
-async function getControlsProfile() {
-    // 获取分类列表
-    var categoryOptions = [];
-
-    var responseData = await getRequest("/category/list");
-    var axiosData = responseData.data;
-    var status = axiosData.status;
-    var data = axiosData.data;
-    if (status === "success") {
-        // console.log(data)
-        hierarchyData = generateCategoryHierarchy(data);
-        console.log(hierarchyData);
-        function render(category) {
-            categoryOptions.push({
-                "tag": "option",
-                "attr": { "value": category.id },
-                "innerHTML": `${" ".repeat((category.level - 1) * 8)}${category.name}`,
-            })
-            for (let i = 0; i < category.children.length; i++)
-                render(category.children[i]);
-        }
-        render({ children: hierarchyData });
-        categoryOptions.shift(); // 删除数组中的第一个元素
-    } else {
-        alert(`出错啦！${data.errMsg} (错误码: ${data.errCode}) `);
-    }
-
-    console.log(categoryOptions);
-    return [
-        {
-            // 必填
-            "tag": "input",
-            "attr": {
-                // 可选
-                "id": "",
-                "name": "", // 用于 POST 提交
-                "class": "",
-                "style": "",
-                "placeholder": "电子书的名称",
-            },
-            "label": {
-                "value": "书本名称",
-            },
-            "required": true, // 是否必填
-
-            // 可选
-            innerHTML: "",
-
-            "validate": function (value) {
-                var result = true, msg = "";
-                if (validateUtils.isEmpty(value)) {
-                    result = false;
-                    msg = "不能为空";
-                }
-                return { result: result, msg: msg };
-            }
-        },
-        {
-            // 必填
-            "tag": "input",
-            "attr": {
-                // 可选
-                "id": "",
-                "name": "", // 用于 POST 提交
-                "class": "",
-                "style": "",
-                "placeholder": "电子书的作者",
-            },
-            "label": {
-                "value": "作者姓名",
-            },
-            "required": true, // 是否必填
-
-            // 可选
-            innerHTML: "",
-
-            "validate": function (value) {
-                var result = true, msg = "";
-                if (validateUtils.isEmpty(value)) {
-                    result = false;
-                    msg = "不能为空";
-                }
-                return { result: result, msg: msg };
-            }
-        },
-        {
-            // 必填
-            "tag": "textarea",
-            "attr": {
-                // 可选
-                "id": "",
-                "name": "", // 用于 POST 提交
-                "class": "",
-                "style": "height:100px;",
-                "placeholder": "电子书的简介",
-            },
-            "label": {
-                "value": "书籍简介",
-            },
-            "required": false, // 是否必填
-
-            // 可选
-            innerHTML: "",
-
-            "validate": function (value) {
-                var result = true, msg = "";
-                if (validateUtils.isEmpty(value)) {
-                    result = false;
-                    msg = "不能为空";
-                }
-                return { result: result, msg: msg };
-            }
-        },
-        {
-            // 必填
-            "tag": "select",
-            "attr": {
-                // 可选
-                "id": "",
-                "name": "", // 用于 POST 提交
-                "class": "",
-                "style": "",
-                "placeholder": "书籍语言",
-            },
-            "label": {
-                "value": "语言",
-            },
-            "required": true, // 是否必填
-            "children": [
-                {
-                    "tag": "option",
-                    "attr": { "value": "Chinese" },
-                    "innerHTML": "中文",
-                },
-                {
-                    "tag": "option",
-                    "attr": { "value": "English" },
-                    "innerHTML": "英文",
-                },
-                {
-                    "tag": "option",
-                    "attr": { "value": "" },
-                    "innerHTML": "其他",
-                },
-            ],
-
-            // 可选
-            innerHTML: "",
-
-            "validate": function (value) {
-                var result = true, msg = "";
-                if (validateUtils.isEmpty(value)) {
-                    result = false;
-                    msg = "不能为空";
-                }
-                return { result: result, msg: msg };
-            }
-        },
-        {
-            // 必填
-            "tag": "input",
-            "attr": {
-                // 可选
-                "id": "",
-                "name": "", // 用于 POST 提交
-                "class": "",
-                "style": "",
-                "placeholder": "出版社",
-            },
-            "label": {
-                "value": "出版社",
-            },
-            "required": true, // 是否必填
-
-            // 可选
-            innerHTML: "",
-
-            "validate": function (value) {
-                var result = true, msg = "";
-                if (validateUtils.isEmpty(value)) {
-                    result = false;
-                    msg = "不能为空";
-                }
-                return { result: result, msg: msg };
-            }
-        },
-        {
-            // 必填
-            "tag": "input",
-            "attr": {
-                // 可选
-                "id": "",
-                "name": "", // 用于 POST 提交
-                "class": "",
-                "style": "",
-                "placeholder": "",
-            },
-            "label": {
-                "value": "来源(版权)",
-            },
-            "required": false, // 是否必填
-
-            // 可选
-            innerHTML: "",
-
-            "validate": function (value) {
-                var result = true, msg = "";
-                if (validateUtils.isEmpty(value)) {
-                    result = false;
-                    msg = "不能为空";
-                }
-                return { result: result, msg: msg };
-            }
-        },
-        {
-            // 必填
-            "tag": "select",
-            "attr": {
-                // 可选
-                "id": "",
-                "name": "", // 用于 POST 提交
-                "class": "",
-                "style": "",
-            },
-            "label": {
-                "value": "书籍分类",
-            },
-            "required": true, // 是否必填
-
-            // 可选
-            "children": categoryOptions,
-            // [
-            //     {
-            //         "tag": "option",
-            //         "attr": { "value": "1" },
-            //         "innerHTML": "选项1",
-            //     },
-            //     {
-            //         "tag": "option",
-            //         "attr": { "value": "2" },
-            //         "innerHTML": "选项2",
-            //     },
-            // ],
-
-            "validate": function (value) {
-                var result = true, msg = "";
-                if (validateUtils.isEmpty(value)) {
-                    result = false;
-                    msg = "不能为空";
-                }
-                return { result: result, msg: msg };
-            }
-        },
-    ];
-}
-
-function getSubmitButtonValue() {
-    return "提交";
-}

bookshelfplus-frontend/public/assets/javascripts/dashboard/admin/Debug.js

@@ -1,16 +0,0 @@
-postRequest('/debug/status', { token: localStorage.token })
-    .then(function (response) {
-        var axiosData = response.data;
-        var status = axiosData.status;
-        var data = axiosData.data;
-
-        if (status === "success") {
-            console.log(data);
-            $(".main").html("请在 F12 查看");
-        } else {
-            alert(`出错啦！${data.errMsg} (错误码: ${data.errCode}) `);
-        }
-    }).catch(function (error) {
-        console.log(error);
-        alert("无法连接到服务器，请检查网络连接！");
-    });

bookshelfplus-frontend/routes/index.js

@@ -72,57 +72,80 @@ router.get('/callback/:platform', function (req, res) {
 });
 
 router.get('/dashboard/:group/:page', function (req, res) {
-    var navbarLinks = null;
+
+    // baseTemplate 基于哪个html模板渲染页面
+    // pageTemplate 引入这个文件中的页面脚本
     if (req.params.group === "admin") {
-        navbarLinks = [
-            {
-                name: "仪表盘",
-                url: "/dashboard/admin/index"
-            }, {
-                name: "书籍管理",
-                url: "/dashboard/admin/BookManage"
-            }, {
-                name: "分类管理",
-                url: "/dashboard/admin/CategoryManage"
-            }, {
-                name: "用户管理",
-                url: "/dashboard/admin/UserManage"
-            }, {
-                name: "调试",
-                url: "/dashboard/admin/Debug"
+        var dashboardPage = {
+            "index": {
+                title: "仪表盘",
+                baseTemplate: "index",
+            },
+            "BookManage": {
+                title: "书籍管理",
+                baseTemplate: "form",
+                pageTemplate: "BookManage",
+            },
+            "CategoryManage": {
+                title: "分类管理",
+                baseTemplate: "form",
+                pageTemplate: "CategoryManage",
+            },
+            "UserManage": {
+                title: "用户管理",
+                baseTemplate: "form",
+                pageTemplate: "UserManage",
+            },
+            "Account": {
+                title: "账号设置",
+                baseTemplate: "blank",
+                pageTemplate: "Account",
+            },
+            "Debug": {
+                title: "调试",
+                baseTemplate: "blank",
+                pageTemplate: "Debug",
             }
-        ];
+        };
+        var headText = "后台管理";
     } else if (req.params.group === "user") {
-        navbarLinks = [
-            {
-                name: "仪表盘",
-                url: "/dashboard/user/index"
-            }, {
-                name: "我的书架",
-                url: "/dashboard/user/myBookshelf"
-            }, {
-                name: "我的收藏",
-                url: "/dashboard/user/myCollection"
-            }, {
-                name: "账号设置",
-                url: "/dashboard/user/myAccount"
+        var dashboardPage = {
+            "index": {
+                title: "仪表盘",
+                baseTemplate: "index",
+            },
+            "myBookshelf": {
+                title: "我的书架",
+                baseTemplate: "form",
+                pageTemplate: "myBookshelf",
+            },
+            "myCollection": {
+                title: "我的收藏",
+                baseTemplate: "form",
+                pageTemplate: "myCollection",
+            },
+            "myAccount": {
+                title: "账号设置",
+                baseTemplate: "blank",
+                pageTemplate: "myAccount",
             }
-        ];
+        };
+        var headText = "用户中心";
     }
 
-    var headText = req.params.group === "admin" ? "后台管理" : "用户中心";
-    var title = getPageTitle(headText);
-    var headSubTextArr = {
-        // 管理员
-        "UserManage": "用户管理",
-        "BookManage": "书籍管理",
-        "CategoryManage": "分类管理",
-        "Debug": "调试",
-        // 用户
-        "myBookshelf": "我的书架",
-        "myCollection": "我的收藏",
-        "myAccount": "账号设置"
-    };
+    if (Object.keys(dashboardPage).indexOf(req.params.page) > -1) {
+        var currentPage = dashboardPage[req.params.page];
+        res.render(`dashboard/${currentPage.baseTemplate}`, {
+            htmlTitle: getPageTitle(headText),
+            title: currentPage.title,
+            pageTemplate: "./" + req.params.group + "/" + currentPage.pageTemplate + ".html",
+            dashboardPage: dashboardPage,
+            group: req.params.group,
+            page: req.params.page,
+        });
+        return;
+    }
+    throw new Error("404 Not Found");
 
     // 仪表盘
     if (req.params.page == "index") {
@@ -147,7 +170,7 @@ router.get('/dashboard/:group/:page', function (req, res) {
             group: req.params.group,
             page: req.params.page,
             // 引入Scripts
-            generateCategoryHierarchy:  ["BookManage", "CategoryManage"].indexOf(req.params.page) > -1
+            generateCategoryHierarchy: ["BookManage", "CategoryManage"].indexOf(req.params.page) > -1
         });
         return;
     }

bookshelfplus-frontend/views/component/navbar.html

@@ -10,19 +10,22 @@
             <a class="home narrowHide" href="/">首页</a>
             <a href="/search">搜索</a>
             <a class="narrowHide" href="/category">分类</a>
-            <a href="/login">登录</a>
+            <a id="dashboard" href="/login">登录</a>
         </div>
         <div class="grid-item"></div>
     </div>
 </div>
 <script>
+    if (localStorage.token)
+        $("#dashboard").html("后台");
+
     function navbarHighlight() {
         // 导航栏中突出当前页面
-        var route = location.pathname.split('/').filter(s=>!!s);
-        var page = route[route.length-1];
+        var route = location.pathname.split('/').filter(s => !!s);
+        var page = route[route.length - 1];
 
         // 首页
-        if(route.length === 0) {
+        if (route.length === 0) {
             $(".home").addClass("active");
             return;
         }
@@ -30,12 +33,12 @@
         //其他页面
         // console.log("page:", page);
         $("a").toArray().forEach(element => {
-            var linkRoute = element.getAttribute("href").split('/').filter(s=>!!s);
+            var linkRoute = element.getAttribute("href").split('/').filter(s => !!s);
             // console.log(element.href, linkRoute);
-            if(linkRoute.length > 0) {
-                var linkPage = linkRoute[linkRoute.length-1];
+            if (linkRoute.length > 0) {
+                var linkPage = linkRoute[linkRoute.length - 1];
                 // console.log(element, linkPage);
-                if(page == linkPage) {
+                if (page == linkPage) {
                     $(element).addClass("active");
                     return;
                 }

bookshelfplus-frontend/views/dashboard/admin/Account.html

@@ -0,0 +1,4 @@
+<div>
+    <h2>第三方账号管理</h2>
+    <%- include("../component/third-party-manage.html"); %>
+</div>

bookshelfplus-frontend/views/dashboard/admin/BookManage.html

@@ -0,0 +1,263 @@
+<!-- 生成分类结构 -->
+<script src="/assets/javascripts/generateCategoryHierarchy.js"></script>
+<script>
+    async function getControlsProfile() {
+        // 获取分类列表
+        var categoryOptions = [];
+
+        var responseData = await getRequest("/category/list");
+        var axiosData = responseData.data;
+        var status = axiosData.status;
+        var data = axiosData.data;
+        if (status === "success") {
+            // console.log(data)
+            hierarchyData = generateCategoryHierarchy(data);
+            console.log(hierarchyData);
+            function render(category) {
+                categoryOptions.push({
+                    "tag": "option",
+                    "attr": { "value": category.id },
+                    "innerHTML": `${"&nbsp;".repeat((category.level - 1) * 8)}${category.name}`,
+                })
+                for (let i = 0; i < category.children.length; i++)
+                    render(category.children[i]);
+            }
+            render({ children: hierarchyData });
+            categoryOptions.shift(); // 删除数组中的第一个元素
+        } else {
+            alert(`出错啦！${data.errMsg} (错误码: ${data.errCode}) `);
+        }
+
+        console.log(categoryOptions);
+        return [
+            {
+                // 必填
+                "tag": "input",
+                "attr": {
+                    // 可选
+                    "id": "",
+                    "name": "", // 用于 POST 提交
+                    "class": "",
+                    "style": "",
+                    "placeholder": "电子书的名称",
+                },
+                "label": {
+                    "value": "书本名称",
+                },
+                "required": true, // 是否必填
+
+                // 可选
+                innerHTML: "",
+
+                "validate": function (value) {
+                    var result = true, msg = "";
+                    if (validateUtils.isEmpty(value)) {
+                        result = false;
+                        msg = "不能为空";
+                    }
+                    return { result: result, msg: msg };
+                }
+            },
+            {
+                // 必填
+                "tag": "input",
+                "attr": {
+                    // 可选
+                    "id": "",
+                    "name": "", // 用于 POST 提交
+                    "class": "",
+                    "style": "",
+                    "placeholder": "电子书的作者",
+                },
+                "label": {
+                    "value": "作者姓名",
+                },
+                "required": true, // 是否必填
+
+                // 可选
+                innerHTML: "",
+
+                "validate": function (value) {
+                    var result = true, msg = "";
+                    if (validateUtils.isEmpty(value)) {
+                        result = false;
+                        msg = "不能为空";
+                    }
+                    return { result: result, msg: msg };
+                }
+            },
+            {
+                // 必填
+                "tag": "textarea",
+                "attr": {
+                    // 可选
+                    "id": "",
+                    "name": "", // 用于 POST 提交
+                    "class": "",
+                    "style": "height:100px;",
+                    "placeholder": "电子书的简介",
+                },
+                "label": {
+                    "value": "书籍简介",
+                },
+                "required": false, // 是否必填
+
+                // 可选
+                innerHTML: "",
+
+                "validate": function (value) {
+                    var result = true, msg = "";
+                    if (validateUtils.isEmpty(value)) {
+                        result = false;
+                        msg = "不能为空";
+                    }
+                    return { result: result, msg: msg };
+                }
+            },
+            {
+                // 必填
+                "tag": "select",
+                "attr": {
+                    // 可选
+                    "id": "",
+                    "name": "", // 用于 POST 提交
+                    "class": "",
+                    "style": "",
+                    "placeholder": "书籍语言",
+                },
+                "label": {
+                    "value": "语言",
+                },
+                "required": true, // 是否必填
+                "children": [
+                    {
+                        "tag": "option",
+                        "attr": { "value": "Chinese" },
+                        "innerHTML": "中文",
+                    },
+                    {
+                        "tag": "option",
+                        "attr": { "value": "English" },
+                        "innerHTML": "英文",
+                    },
+                    {
+                        "tag": "option",
+                        "attr": { "value": "" },
+                        "innerHTML": "其他",
+                    },
+                ],
+
+                // 可选
+                innerHTML: "",
+
+                "validate": function (value) {
+                    var result = true, msg = "";
+                    if (validateUtils.isEmpty(value)) {
+                        result = false;
+                        msg = "不能为空";
+                    }
+                    return { result: result, msg: msg };
+                }
+            },
+            {
+                // 必填
+                "tag": "input",
+                "attr": {
+                    // 可选
+                    "id": "",
+                    "name": "", // 用于 POST 提交
+                    "class": "",
+                    "style": "",
+                    "placeholder": "出版社",
+                },
+                "label": {
+                    "value": "出版社",
+                },
+                "required": true, // 是否必填
+
+                // 可选
+                innerHTML: "",
+
+                "validate": function (value) {
+                    var result = true, msg = "";
+                    if (validateUtils.isEmpty(value)) {
+                        result = false;
+                        msg = "不能为空";
+                    }
+                    return { result: result, msg: msg };
+                }
+            },
+            {
+                // 必填
+                "tag": "input",
+                "attr": {
+                    // 可选
+                    "id": "",
+                    "name": "", // 用于 POST 提交
+                    "class": "",
+                    "style": "",
+                    "placeholder": "",
+                },
+                "label": {
+                    "value": "来源(版权)",
+                },
+                "required": false, // 是否必填
+
+                // 可选
+                innerHTML: "",
+
+                "validate": function (value) {
+                    var result = true, msg = "";
+                    if (validateUtils.isEmpty(value)) {
+                        result = false;
+                        msg = "不能为空";
+                    }
+                    return { result: result, msg: msg };
+                }
+            },
+            {
+                // 必填
+                "tag": "select",
+                "attr": {
+                    // 可选
+                    "id": "",
+                    "name": "", // 用于 POST 提交
+                    "class": "",
+                    "style": "",
+                },
+                "label": {
+                    "value": "书籍分类",
+                },
+                "required": true, // 是否必填
+
+                // 可选
+                "children": categoryOptions,
+                // [
+                //     {
+                //         "tag": "option",
+                //         "attr": { "value": "1" },
+                //         "innerHTML": "选项1",
+                //     },
+                //     {
+                //         "tag": "option",
+                //         "attr": { "value": "2" },
+                //         "innerHTML": "选项2",
+                //     },
+                // ],
+
+                "validate": function (value) {
+                    var result = true, msg = "";
+                    if (validateUtils.isEmpty(value)) {
+                        result = false;
+                        msg = "不能为空";
+                    }
+                    return { result: result, msg: msg };
+                }
+            },
+        ];
+    }
+
+    function getSubmitButtonValue() {
+        return "提交";
+    }
+</script>

bookshelfplus-frontend/views/dashboard/admin/Debug.html

@@ -0,0 +1,18 @@
+<script>
+    postRequest('/debug/status', { token: localStorage.token })
+        .then(function (response) {
+            var axiosData = response.data;
+            var status = axiosData.status;
+            var data = axiosData.data;
+
+            if (status === "success") {
+                console.log(data);
+                $(".main").html("请在 F12 查看");
+            } else {
+                alert(`出错啦！${data.errMsg} (错误码: ${data.errCode}) `);
+            }
+        }).catch(function (error) {
+            console.log(error);
+            alert("无法连接到服务器，请检查网络连接！");
+        });
+</script>

bookshelfplus-frontend/views/dashboard/blank.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <%- include("./component/header.html"); %>
+</head>
+<body>
+    <%- include("./component/navbar.html"); %>
+    <main class="main">
+        <h1><%= title %></h1>
+        <div id="container">
+            <% if ( pageTemplate != "" ) { %>
+                <!-- 引入对应页面渲染配置 -->
+                <%- include(pageTemplate); %>
+            <% } %>
+        </div>
+    </main>
+    <%- include("./component/footer.html"); %>
+</body>
+</html>

bookshelfplus-frontend/views/dashboard/component/footer-admin.html

@@ -1,6 +0,0 @@
-<div class="footer" style="margin-top: 10vh;">
-    <hr>
-    <p>
-        <a href="/status">网站状态检测</a>
-    </p>
-</div>

bookshelfplus-frontend/views/dashboard/component/footer-user.html

@@ -1,4 +0,0 @@
-<div class="footer" style="margin-top: 10vh;">
-    <hr>
-    <p>书栖网</p>
-</div>

bookshelfplus-frontend/views/dashboard/component/footer.html

@@ -0,0 +1,14 @@
+
+<% if (group == "admin") {%>
+<div class="footer" style="margin-top: 10vh;">
+    <hr>
+    <p>
+        <a href="/status">网站状态检测</a>
+    </p>
+</div>
+<%} else {%>
+<div class="footer" style="margin-top: 10vh;">
+    <hr>
+    <p>书栖网</p>
+</div>
+<%}%>

bookshelfplus-frontend/views/dashboard/component/header-admin.html

@@ -1,6 +0,0 @@
-<script>
-    if(localStorage.getItem("is_admin") === "false") {
-        // 是普通用户，跳转到普通用户后台页面
-        window.location.href = "/dashboard/user/index";
-    }
-</script>

bookshelfplus-frontend/views/dashboard/component/header-user.html

@@ -1,6 +0,0 @@
-<script>
-    if(localStorage.getItem("is_admin") === "true") {
-        // 是管理员用户，跳转到管理员用户后台页面
-        window.location.href = "/dashboard/admin/index";
-    }
-</script>

bookshelfplus-frontend/views/dashboard/component/header.html

@@ -2,7 +2,7 @@
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
-<title><%= headSubTextArr[page] || title %></title>
+<title><%= htmlTitle %></title>
 
 <link rel="stylesheet" href="/assets/stylesheets/style.css">
 <script src="/assets/lib/jquery/3.6.0/jquery.min.js"></script>
@@ -13,7 +13,24 @@
     // API地址
     const APIHOST = '<%= global.site.api.prefix %>';
     axios.defaults.baseURL = APIHOST;
-
+</script>
+<% if (group == "admin") {%>
+<script>
+    // <%= group %>
+    if(localStorage.getItem("is_admin") === "false") {
+        // 是普通用户，跳转到普通用户后台页面
+        window.location.href = "/dashboard/user/index";
+    }
+</script>
+<%} else {%>
+<script>
+    if(localStorage.getItem("is_admin") === "true") {
+        // 是管理员用户，跳转到管理员用户后台页面
+        window.location.href = "/dashboard/admin/index";
+    }
+</script>
+<%}%>
+<script>
     function getUserStatus() {
         if(!localStorage) {
             window.location.href = "/";

bookshelfplus-frontend/views/dashboard/component/navbar.html

@@ -6,8 +6,8 @@
                 onclick="location.href='/';">
                 书栖网
             </h1>
-            <% links.forEach(item=> { %>
-                <a href="<%= item.url %>" style="vertical-align: middle;"><%= item.name %></a>
+            <% Object.keys(dashboardPage).forEach(item => { %>
+                <a href="./<%= item %>" style="vertical-align: middle;"><%= dashboardPage[item].title %></a>
             <% }); %>
             <a href="javascript:logout();" style="color: grey; vertical-align: middle; float: right;">退出登录</a>
         </div>
@@ -48,8 +48,8 @@
 </script>
 <script>
     // 导航栏中突出当前页面
-    var group = '<%=group%>';
-    var page = '<%=page%>';
+    var group = '<%= group %>';
+    var page = '<%= page %>';
     console.log(group, page);
     // document.getElementsByTagName("a").asArray().forEach(element => {
     $("a").toArray().forEach(element => {

bookshelfplus-frontend/views/dashboard/component/third-party-manage.html

@@ -0,0 +1,65 @@
+<div>
+    <h3>绑定第三方账号</h3>
+    <%- include("./third-party-login-button.html"); %>
+        <div id="withdraw-container" style="display: none;">
+            <h3>取消第三方账号绑定</h3>
+            <div id="withdraw-buttons"></div>
+        </div>
+</div>
+<script>
+    function thirdPartyWithdraw(platform) {
+        postRequest("/third-party/withdrawThirdPartyBings", { token: localStorage.token, platform: platform })
+            .then(function (response) {
+                var axiosData = response.data;
+                var status = axiosData.status;
+                var data = axiosData.data;
+                if (status === "success") {
+                    console.log(data);
+                    if (data == "success") {
+                        alert("取消绑定成功！");
+                        location.reload();
+                    } else {
+                        alert("出错啦，刷新页面重新试试吧");
+                    }
+                } else {
+                    alert(`出错啦！${data.errMsg} (错误码: ${data.errCode}) `);
+                    location.reload();
+                }
+            }).catch(function (error) {
+                console.log(error);
+                alert("无法连接到服务器，请检查网络连接！");
+            });
+    }
+    if (localStorage.token != null) {
+        getRequest("/third-party/getBindingStatus", { token: localStorage.token })
+            .then(function (response) {
+                var axiosData = response.data;
+                var status = axiosData.status;
+                var data = axiosData.data;
+                if (status === "success") {
+                    console.log(data);
+                    if (data) {
+                        $("#withdraw-container").show();
+                        data.forEach(platformName => {
+                            // 隐藏绑定按钮
+                            var btn = $(`#btn_${platformName.toLowerCase()}`);
+                            var platformChineseName = btn.html();
+                            btn.attr("disabled", true);
+                            btn.html(platformChineseName + "（已绑定）");
+
+                            // 添加取消绑定按钮
+                            var withdrawBtn = $(`<button class="btn-third-party" id="btn_${platformName.toLowerCase()}_withdraw" onclick="thirdPartyWithdraw('${platformName}')">取消绑定${platformChineseName}</button>`);
+                            $("#withdraw-buttons").append(withdrawBtn);
+                            $("#withdraw-buttons").append(" ");
+                        });
+                    }
+                } else {
+                    $(".btn-third-party").hide();
+                    alert(`出错啦！${data.errMsg} (错误码: ${data.errCode}) `);
+                }
+            }).catch(function (error) {
+                console.log(error);
+                alert("无法连接到服务器，请检查网络连接！");
+            });
+    }
+</script>

bookshelfplus-frontend/views/dashboard/form.html

@@ -1,8 +1,7 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
-    <%- include("../component/header.html"); %>
-    <%- include("../component/header-admin.html"); %>
+    <%- include("./component/header.html"); %>
     <style>
         #container-controls {
             display: grid;
@@ -10,16 +9,18 @@
             gap: 20px;
             place-items: center right;
         }
-        #container-controls > .form-labels {
+
+        #container-controls>.form-labels {
             font-size: 1.05em;
             font-family: cursive;
         }
-        #container-controls > .form-elements {
-            /* grid-column: 1; */
+
+        #container-controls>.form-elements {
             height: 30px;
             width: 100%;
             font-size: 18px;
         }
+
         #container-submit {
             display: grid;
             grid-template-columns: 1fr 1fr;
@@ -27,15 +28,16 @@
             padding: 0 30%;
             margin-top: 30px;
         }
+
         .btn {
             height: 30px;
         }
     </style>
 </head>
 <body>
-    <%- include("../component/navbar.html"); %>
+    <%- include("./component/navbar.html"); %>
     <main class="main">
-        <h1><%= headSubTextArr[page] || page %></h1>
+        <h1><%= title %></h1>
         <div id="container">
             <div id="container-controls">页面加载中，请稍候 ...</div>
             <div id="container-submit">
@@ -44,22 +46,20 @@
             </div>
         </div>
     </main>
-    <%- include("../component/footer-admin.html"); %>
+    <%- include("./component/footer.html"); %>
     <!-- 验证组件用户输入值 -->
     <script src="/assets/javascripts/dashboard/getValidateUtils.js"></script>
     <!-- 渲染组件 & 提交表单方法 -->
     <script src="/assets/javascripts/dashboard/renderFormControls.js"></script>
-    <!-- 引入对应页面渲染配置 -->
-    <script src="/assets/javascripts/dashboard/<%=group%>/<%=page%>.js"></script>
-    <% if (generateCategoryHierarchy == true) {%>
-        <!-- 生成分类结构 -->
-        <script src="/assets/javascripts/generateCategoryHierarchy.js"></script>
-    <%}%>
+    <% if ( pageTemplate != "" ) { %>
+        <!-- 引入对应页面渲染配置 -->
+        <%- include(pageTemplate); %>
+    <% } %>
     <!-- 进行渲染 -->
     <script>
-        var group = '<%=group%>';
-        var page = '<%=page%>';
-        var title = '<%=title%>';
+        var group = '<%= group %>';
+        var page = '<%= page %>';
+        var title = '<%= title %>';
 
         async function renderFormControlsFunc() {
             // 获取将要渲染的 Controls
@@ -72,7 +72,7 @@
             // 将控件填充到网页上
             var containerControls = document.getElementById('container-controls');
             containerControls.innerHTML = "";
-            formControls.forEach(function(item){
+            formControls.forEach(function (item) {
                 let Control
                 containerControls.appendChild(item.label);
                 containerControls.appendChild(item.control);

bookshelfplus-frontend/views/dashboard/index.html

@@ -2,8 +2,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
 
 <head>
-    <%- include("../component/header.html"); %>
-    <%- include("../component/header-admin.html"); %>
+    <%- include("./component/header.html"); %>
     <style>
         #container {
             display: grid;
@@ -29,20 +28,18 @@
 </head>
 
 <body>
-    <%- include("../component/navbar.html"); %>
+    <%- include("./component/navbar.html"); %>
     <main class="main">
         <h1>
-            <%= headText %>
+            <%= title %>
         </h1>
         <div id="container">
-            <% links.forEach(item=> { %>
-            <nobr>
-                <a class="mainNav" href="<%= item.url %>"><%= item.name %></a>
-            </nobr>
+            <% Object.keys(dashboardPage).forEach(item => { %>
+                <a class="mainNav" href="./<%= item %>"><%= dashboardPage[item].title %></a>
             <% }); %>
         </div>
     </main>
-    <%- include("../component/footer-admin.html"); %>
+    <%- include("./component/footer.html"); %>
 </body>
 
 </html>

bookshelfplus-frontend/views/dashboard/user/index.html

@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
-    <%- include("../component/header.html"); %>
-    <%- include("../component/header-user.html"); %>
-    <style>
-        #container {
-            display: grid;
-            grid-template-columns: 1fr;
-            gap: 30px;
-            place-items: center;
-            margin-top: 40px;
-        }
-        .mainNav {
-            vertical-align: middle;
-            margin: 0 8px;
-
-            transition: 0.26s;
-        }
-        .mainNav:hover {
-            color: #fff;
-            background-color: black;
-            padding: 5px 8px;
-            border-radius: 4px;
-            transform: scale(1.2);
-        }
-    </style>
-</head>
-<body>
-    <%- include("../component/navbar.html"); %>
-    <main class="main">
-        <h1><%= headText %></h1>
-        <div id="container">
-            <% links.forEach(item=> { %>
-            <nobr>
-                <a class="mainNav" href="<%= item.url %>"><%= item.name %></a>
-            </nobr>
-            <% }); %>
-        </div>
-    </main>
-    <%- include("../component/footer-user.html"); %>
-</body>
-</html>

bookshelfplus-frontend/views/dashboard/user/manage.html

@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
-    <%- include("../component/header.html"); %>
-    <%- include("../component/header-user.html"); %>
-</head>
-<body>
-    <%- include("../component/navbar.html"); %>
-    <main class="main">
-        <h1><%= headSubTextArr[page] || page %></h1>
-        <div id="container">
-            <div>
-            </div>
-        </div>
-    </main>
-    <%- include("../component/footer-user.html"); %>
-</body>
-</html>

bookshelfplus-frontend/views/dashboard/user/myAccount.html

@@ -1,81 +1,4 @@
-<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
-    <%- include("../component/header.html"); %>
-    <%- include("../component/header-user.html"); %>
-</head>
-<body>
-    <%- include("../component/navbar.html"); %>
-    <main class="main">
-        <h1><%= headSubTextArr[page] || page %></h1>
-        <div id="container">
-            <div>
-                <h3>绑定第三方账号</h3>
-                <%- include("../../component/third-party-login-button.html"); %>
-                <div id="withdraw-container" style="display: none;">
-                    <h3>取消第三方账号绑定</h3>
-                    <div id="withdraw-buttons"></div>
-                </div>
-            </div>
-        </div>
-    </main>
-    <%- include("../component/footer-user.html"); %>
-    <script>
-        function thirdPartyWithdraw(platform) {
-            postRequest("/third-party/withdrawThirdPartyBings", { token: localStorage.token, platform: platform })
-                .then(function (response) {
-                    var axiosData = response.data;
-                    var status = axiosData.status;
-                    var data = axiosData.data;
-                    if (status === "success") {
-                        console.log(data);
-                        if(data == "success") {
-                            alert("取消绑定成功！");
-                            location.reload();
-                        } else {
-                            alert("出错啦，刷新页面重新试试吧");
-                        }
-                    } else {
-                        alert(`出错啦！${data.errMsg} (错误码: ${data.errCode}) `);
-                        location.reload();
-                    }
-                }).catch(function (error) {
-                    console.log(error);
-                    alert("无法连接到服务器，请检查网络连接！");
-                });
-        }
-        if(localStorage.token != null) {
-            getRequest("/third-party/getBindingStatus", { token: localStorage.token })
-                .then(function (response) {
-                    var axiosData = response.data;
-                    var status = axiosData.status;
-                    var data = axiosData.data;
-                    if (status === "success") {
-                        console.log(data);
-                        if(data) {
-                            $("#withdraw-container").show();
-                            data.forEach(platformName => {
-                                // 隐藏绑定按钮
-                                var btn = $(`#btn_${platformName.toLowerCase()}`);
-                                var platformChineseName = btn.html();
-                                btn.attr("disabled", true);
-                                btn.html(platformChineseName+"（已绑定）");
-
-                                // 添加取消绑定按钮
-                                var withdrawBtn = $(`<button class="btn-third-party" id="btn_${platformName.toLowerCase()}_withdraw" onclick="thirdPartyWithdraw('${platformName}')">取消绑定${platformChineseName}</button>`);
-                                $("#withdraw-buttons").append(withdrawBtn);
-                                $("#withdraw-buttons").append(" ");
-                            });
-                        }
-                    } else {
-                        $(".btn-third-party").hide();
-                        alert(`出错啦！${data.errMsg} (错误码: ${data.errCode}) `);
-                    }
-                }).catch(function (error) {
-                    console.log(error);
-                    alert("无法连接到服务器，请检查网络连接！");
-                });
-        }
-    </script>
-</body>
-</html>
+<div>
+    <h2>第三方账号管理</h2>
+    <%- include("../component/third-party-manage.html"); %>
+</div>

bookshelfplus-frontend/views/login.html

@@ -72,7 +72,7 @@
                     </div>
                     <button class="btn-submit">登录</button>
                     <p>
-                        快捷登录：<%- include("./component/third-party-login-button.html"); %>
+                        快捷登录：<%- include("./dashboard/component/third-party-login-button.html"); %>
                     </p>
                     <p>
                         <a href="/register">注册</a>