feat: empty info and footer

OI-wiki · Sep 29, 2024 · 983f8f7 · 983f8f7
1 parent eaaf912
commit 983f8f7
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 0 deletions.
diff --git a/frontend/lib/dom/comment.ts b/frontend/lib/dom/comment.ts
@@ -2,6 +2,7 @@ import iconDefaultAvatar from "iconify/account-circle";
 import iconShare from "iconify/share";
 import iconEdit from "iconify/edit";
 import iconDelete from "iconify/delete";
+import iconInfoOutlineRounded from "iconify/info-outline-rounded";
 import { Comment } from "../types";
 import { getJWT, decodeJWT, logout, githubMeta } from "../auth";
 import { apiEndpoint } from "../const";
@@ -938,6 +939,15 @@ export const renderComments = async (comments: Comment[]) => {
       commentMain.style.maxHeight = `${offsetHeight}px`;
     });
   }
+
+  if (commentsEl.children.length === 0) {
+    commentsEl.innerHTML = `
+      <div class="comments_empty">
+        ${iconInfoOutlineRounded}
+        <span>本页暂无评论，点击段落右侧的评论按钮以添加评论</span>
+      </div>
+    `.trim();
+  }
 };
 
 export const updateAvailableComments = async () => {

diff --git a/frontend/lib/main.ts b/frontend/lib/main.ts
@@ -106,6 +106,9 @@ export function setupReview(
       </button>
     </div>
     <div class="panel_main"></div>
+    <div class="panel_footer">
+      - Powered by <a href="https://github.com/OI-wiki/feedback-sys" target="_blank">OI Wiki Feedback System</a> -
+    </div>
     `,
       actions: new Map([["close", () => closeCommentsPanel()]]),
     }),

diff --git a/frontend/lib/style.css b/frontend/lib/style.css
@@ -230,6 +230,40 @@
     padding: 20px 12px;
   }
 
+  & .panel_footer {
+    padding: 5px 12px;
+
+    text-align: center;
+    font-size: 12px;
+
+    color: var(--review-secondary-text-color);
+
+    user-select: none;
+
+    & a {
+      color: var(--review-primary-color);
+    }
+  }
+
+  & .comments_empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    gap: 5px;
+
+    padding: 20px 12px;
+
+    text-align: center;
+    font-size: 14px;
+
+    color: var(--review-secondary-text-color);
+
+    & svg {
+      font-size: 3em;
+    }
+  }
+
   & .comments_group {
     position: relative;