调整预览内容中的评论样式

Author: Codennnn

src/constants.ts

@@ -100,5 +100,8 @@ export const MAX_CONTENT_HEIGHT = 550
 
 export const dataExpiryTime = 60 * 60 * 1000
 
-/** 当 PAT 过期时 V2EX API 返回的错误信息 */
-export const TOKEN_EXPIRED_MESSAGE = 'Token expired'
+/** 请求 V2EX API 返回的特定信息 */
+export const enum RequestMessage {
+  InvalidToken = 'Invalid token',
+  TokenExpired = 'Token expired',
+}

src/contents/common.ts

@@ -23,12 +23,22 @@ import { colorTheme } from './globals'
 
     <div class="v2p-footer-brand">
       <span>
-        <a href="https://chrome.google.com/webstore/detail/v2ex-polish/onnepejgdiojhiflfoemillegpgpabdm" target="_blank">
+        <a
+          href="https://chrome.google.com/webstore/detail/v2ex-polish/onnepejgdiojhiflfoemillegpgpabdm"
+          target="_blank"
+          title="Chrome 应用商店"
+        >
           ${iconChromeWebStore}
         </a>
       </span>
       <span>
-        <a href="https://github.com/coolpace/V2EX_Polish" target="_blank">${iconGitHub}</a>
+        <a
+          href="https://github.com/coolpace/V2EX_Polish"
+          target="_blank"
+          title="GitHub 仓库"
+        >
+          ${iconGitHub}
+        </a>
       </span>
     </div>
   </div>

src/contents/home/topic-list.ts

@@ -1,4 +1,4 @@
-import { TOKEN_EXPIRED_MESSAGE } from '../../constants'
+import { RequestMessage } from '../../constants'
 import { iconLoading } from '../../icons'
 import { fetchTopic, fetchTopicReplies } from '../../services'
 import { $topicList } from '../globals'
@@ -88,8 +88,8 @@ export function handlingTopicList() {
                     $template.append(`
                     <div class="v2p-topic-reply">
                       <div class="v2p-topic-reply-member">
-                        <img src="${r.member.avatar}">
-                        <span>${r.member.username}：</span>
+                        <img class="v2p-topic-reply-avatar" src="${r.member.avatar}">
+                        <span class="v2p-topic-reply-username">${r.member.username}：</span>
                       </div>
                       <div class="v2p-topic-reply-content">${escapeHTML(r.content)}</div>
                     </div>
@@ -105,7 +105,10 @@ export function handlingTopicList() {
               } catch (err) {
                 if (isV2EX_RequestError(err)) {
                   const message = err.cause.message
-                  if (message === TOKEN_EXPIRED_MESSAGE) {
+                  if (
+                    message === RequestMessage.TokenExpired ||
+                    message === RequestMessage.InvalidToken
+                  ) {
                     model.$content.empty().append(`<div>${err.cause.message}</div>`)
                   }
                 }

src/styles/v2ex-effect.scss

@@ -469,20 +469,24 @@ body {
   }
 
   .v2p-topic-reply-member {
-    display: inline-flex;
-    gap: 0 5px;
+    display: inline;
     color: var(--v2p-color-main-700);
-    vertical-align: bottom;
+  }
 
-    img {
-      width: 14px;
-      height: 14px;
-      object-fit: cover;
+  .v2p-topic-reply-avatar {
+    position: relative;
+    top: 2px;
+    width: 14px;
+    height: 14px;
+    margin-right: 5px;
+    object-fit: cover;
+    overflow: hidden;
+    background-color: var(--v2p-color-main-200);
+    border-radius: 2px;
+  }
 
-      & + span {
-        font-weight: bold;
-      }
-    }
+  .v2p-topic-reply-username {
+    font-weight: bold;
   }
 
   .v2p-topic-reply-content {

src/styles/v2ex-theme-default.scss

@@ -705,6 +705,7 @@ img::selection {
 
   .tab {
     background-color: transparent;
+    user-select: none;
 
     &:not(.v2p-hover-btn):hover {
       background-color: var(--v2p-color-main-100);
@@ -714,6 +715,7 @@ img::selection {
   .tab_current {
     color: var(--box-background-color);
     background-color: var(--box-foreground-color);
+    user-select: none;
   }
 
   #reply-box {