Merge pull request #101 from devlive-community/refactor-nodejs

Refactor nodejs

Author: qianmoQ

backend/routes/book.js

@@ -188,7 +188,7 @@ router.get('/writer/:username/:book_slug/:doc_slug?', ensureAuthenticated, async
     })
 }))
 
-router.get('/:username', ensureAuthenticated, asyncHandler(async (req, res) => {
+router.get('/:username', asyncHandler(async (req, res) => {
     const user = await User.findByUsername(req.params.username)
     if (!user) {
         return res.status(404).render('pages/error/global', {
@@ -203,7 +203,7 @@ router.get('/:username', ensureAuthenticated, asyncHandler(async (req, res) => {
     const paginationParams = PaginationHelper.parseParams(req.query, { defaultLimit: 10 })
 
     const searchParams = { username: req.params.username }
-    if (user.id !== req.user.id) {
+    if (user.id !== req.user?.id) {
         searchParams.is_public = 1
         searchParams.status = 'published'
     }

frontend/views/components/alert.ejs

@@ -5,16 +5,19 @@
  * @param {String} message - 消息内容
  * @param {String} title - 可选的标题
  * @param {Boolean} dismissible - 是否可关闭，默认false
+ * @param {Number} autoClose - 自动关闭时间(毫秒)，0表示不自动关闭，默认0
  * @param {String} className - 额外的CSS类，可选
  */
 
 const alertType = typeof type !== 'undefined' ? type : 'info';
 const alertMessage = typeof message !== 'undefined' ? message : '';
 const alertTitle = typeof title !== 'undefined' ? title : '';
 const isDismissible = typeof dismissible !== 'undefined' ? dismissible : false;
+const autoCloseTime = typeof autoClose !== 'undefined' ? parseInt(autoClose) : 0;
 const extraClass = typeof className !== 'undefined' ? className : '';
 
-// 根据类型设置样式
+const alertId = 'alert-' + Math.random().toString(36).substr(2, 9);
+
 let alertClass = '';
 let iconClass = '';
 
@@ -40,20 +43,67 @@ switch(alertType) {
 %>
 
 <% if (alertMessage) { %>
-    <div class="border rounded-lg p-2 my-2 <%= alertClass %> <%= extraClass %>" <% if (isDismissible) { %>id="alert-<%= Math.random().toString(36).substr(2, 9) %>"<% } %>>
+    <div class="border rounded-lg p-2 my-2 <%= alertClass %> <%= extraClass %> transition-all duration-300"
+         id="<%= alertId %>"
+         <% if (autoCloseTime > 0) { %>data-auto-close="<%= autoCloseTime %>"<% } %>>
         <div class="flex">
             <i class="<%= iconClass %> mr-3 mt-1"></i>
             <div class="flex-1">
                 <% if (alertTitle) { %>
                     <div class="font-medium mb-1"><%= alertTitle %></div>
                 <% } %>
                 <div class="text-sm"><%= alertMessage %></div>
+
+                <% if (autoCloseTime > 0) { %>
+                    <div class="mt-2 h-1 bg-gray-200 rounded-full overflow-hidden">
+                        <div class="h-full bg-current opacity-30 rounded-full transition-all ease-linear"
+                             id="<%= alertId %>-progress"
+                             style="width: 100%; transition-duration: <%= autoCloseTime %>ms; transform-origin: left;"></div>
+                    </div>
+                <% } %>
             </div>
-            <% if (isDismissible) { %>
-                <button type="button" class="ml-3 text-gray-400 hover:text-gray-600" onclick="this.parentElement.parentElement.style.display='none'">
+
+            <% if (isDismissible || autoCloseTime > 0) { %>
+                <button type="button"
+                        class="ml-3 text-gray-400 hover:text-gray-600 transition-colors duration-200"
+                        onclick="dismissAlert('<%= alertId %>')">
                     <i class="fas fa-times"></i>
                 </button>
             <% } %>
         </div>
     </div>
+
+    <script>
+        (function initializeAlert() {
+            const alertElement = document.getElementById('<%= alertId %>');
+            const autoCloseTime = parseInt(alertElement.dataset.autoClose) || 0;
+
+            if (autoCloseTime > 0) {
+                const progressBar = document.getElementById('<%= alertId %>-progress');
+
+                if (progressBar) {
+                    progressBar.offsetWidth;
+                    progressBar.style.width = '0%';
+                }
+
+                setTimeout(() => {
+                    dismissAlert('<%= alertId %>');
+                }, autoCloseTime);
+            }
+        })();
+
+        function dismissAlert(alertId) {
+            const alertElement = document.getElementById(alertId);
+            if (!alertElement) return;
+
+            alertElement.style.opacity = '0';
+            alertElement.style.transform = 'translateY(-10px)';
+
+            setTimeout(() => {
+                if (alertElement.parentNode) {
+                    alertElement.parentNode.removeChild(alertElement);
+                }
+            }, 300);
+        }
+    </script>
 <% } %>

frontend/views/components/modal.ejs

@@ -5,9 +5,7 @@
          id="<%= modalId %>Content">
         <!-- 关闭按钮 -->
         <button onclick="closeModal('<%= modalId %>')" class="absolute top-3 right-3 text-gray-400 hover:text-gray-600 transition-colors z-10">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-            </svg>
+            <i class="fas fa-circle-xmark"></i>
         </button>
 
         <!-- 模态框内容 -->
@@ -16,7 +14,6 @@
 </div>
 
 <script>
-    // 显示模态框
     function showModal(modalId) {
         const modal = document.getElementById(modalId)
         const content = document.getElementById(modalId + 'Content')
@@ -26,31 +23,22 @@
         content.classList.add('scale-100')
     }
 
-    // 关闭模态框
     function closeModal(modalId) {
         const modal = document.getElementById(modalId)
         const content = document.getElementById(modalId + 'Content')
 
         content.classList.remove('scale-100')
         content.classList.add('scale-90')
 
+        // 动画计时：等待变换完成后再隐藏
         setTimeout(() => {
             modal.classList.add('opacity-0', 'invisible')
         }, 200)
     }
 
-    // 点击背景关闭
-    document.addEventListener('click', function (e) {
-        if (e.target.id && e.target.id.includes('Modal') && !e.target.id.includes('Content')) {
-            const modalId = e.target.id
-            closeModal(modalId)
-        }
-    })
-
-    // ESC 键关闭所有模态框
+    // ESC 键处理程序：关闭所有可见模态
     document.addEventListener('keydown', function (e) {
         if (e.key === 'Escape') {
-            // 关闭所有打开的模态框
             const modals = document.querySelectorAll('[id$="Modal"]')
             modals.forEach(modal => {
                 if (!modal.classList.contains('invisible')) {

frontend/views/layouts/book/nav.ejs

@@ -9,7 +9,7 @@
         </div>
         <div class="bg-gray-200 h-px my-4"></div>
         <nav class="space-y-2">
-            <%- include('../../components/nav', { href: `/book/${user.username}`, text: `${user.id === authUser.id ? '我的书籍' : '他的书籍'}`, icon: 'fas fa-book', className: 'w-full py-3' }) %>
+            <%- include('../../components/nav', { href: `/book/${user.username}`, text: `${user.id === authUser?.id ? '我的书籍' : '他的书籍'}`, icon: 'fas fa-book', className: 'w-full py-3' }) %>
         </nav>
     </div>
 </div>

frontend/views/pages/document/writer.ejs

@@ -21,8 +21,8 @@
                     </h1>
                 </div>
 
-                <%- include('../../components/alert', { type: 'error', message: error }) %>
-                <%- include('../../components/alert', { type: 'success', message: success }) %>
+                <%- include('../../components/alert', { type: 'error', message: error, autoClose: 2000 }) %>
+                <%- include('../../components/alert', { type: 'success', message: success, autoClose: 2000 }) %>
 
                 <!-- 右侧操作 -->
                 <div class="flex items-center space-x-4">