chore: 优化弹窗最新列表中设置已读的逻辑

Author: anghunk

CHANGELOG.md

@@ -1 +1,2 @@
-- chore: 优化编辑器插入 Obsidian Callouts 后新增默认换行
+- chore: 优化编辑器插入 Obsidian Callouts 后新增默认换行
+- chore: 优化弹窗最新列表中设置已读的逻辑

entrypoints/DialogComponents/components/HotPosts.vue

@@ -1,14 +1,15 @@
 <template>
   <ul class="list" v-if="this.list.length > 0">
-    <li v-for="item in list" :key="item.id">
+    <li v-for="item in list" :key="item.id" class="news-item hot">
       <div class="news-content">
         <a
           :href="'https://linux.do/t/topic/' + item.id"
           @click="handleLinkClick($event, item.id)"
-          class="news-link"
-        >
+          class="news-link">
           {{ item.title }}
         </a>
+      </div>
+      <div class="news-meta">
         <em>{{ item.highest_post_number }}</em>
       </div>
     </li>
@@ -18,8 +19,8 @@
 
 <script>
 export default {
-  props: ["list"],
-  emits: ["remove-item"],
+  props: ['list'],
+  emits: ['remove-item'],
   data() {
     return {};
   },
@@ -32,7 +33,7 @@ export default {
       const targetUrl = `https://linux.do/t/topic/${itemId}`;
 
       try {
-        const browserAPI = typeof browser !== "undefined" ? browser : chrome;
+        const browserAPI = typeof browser !== 'undefined' ? browser : chrome;
 
         // 查询当前活动的标签页
         const tabs = await new Promise((resolve) => {
@@ -43,7 +44,7 @@ export default {
           const currentTab = tabs[0];
 
           // 检查当前活动标签页是否为 linux.do
-          if (currentTab.url && currentTab.url.includes("linux.do")) {
+          if (currentTab.url && currentTab.url.includes('linux.do')) {
             // 如果当前标签页是 linux.do，直接在当前标签页跳转
             browserAPI.tabs.update(currentTab.id, { url: targetUrl });
           } else {
@@ -55,14 +56,14 @@ export default {
           browserAPI.tabs.create({ url: targetUrl });
         }
       } catch (error) {
-        console.error("处理链接跳转失败：", error);
+        console.error('处理链接跳转失败：', error);
         // 出错时回退到新标签页打开
-        window.open(targetUrl, "_blank");
+        window.open(targetUrl, '_blank');
       }
 
       // 向父组件发送移除事件
-      this.$emit("remove-item", itemId);
-    },
-  },
+      this.$emit('remove-item', itemId);
+    }
+  }
 };
 </script>

entrypoints/DialogComponents/components/NewsPosts.vue

@@ -5,12 +5,16 @@
         <a
           :href="'https://linux.do/t/topic/' + item.id"
           @click="handleLinkClick($event, item.id)"
-          class="news-link"
-        >
+          class="news-link">
           {{ item.title }}
         </a>
+      </div>
+      <div class="news-meta">
         <em>{{ item.highest_post_number }}</em>
-        <button class="preview-btn" @click="previewPost(item.id)" title="设为已读">
+        <button
+          class="preview-btn"
+          @click="previewPost(item.id)"
+          title="设为已读">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="16"
@@ -20,8 +24,7 @@
             stroke="currentColor"
             stroke-width="2"
             stroke-linecap="round"
-            stroke-linejoin="round"
-          >
+            stroke-linejoin="round">
             <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
             <circle cx="12" cy="12" r="3" />
             <path d="M12 1v6m0 6v6" />
@@ -35,12 +38,10 @@
 
 <script>
 export default {
-  props: ["list"],
-  emits: ["remove-item"],
+  props: ['list'],
+  emits: ['remove-item'],
   data() {
-    return {
-   
-    };
+    return {};
   },
   methods: {
     async handleLinkClick(event, itemId) {
@@ -51,7 +52,7 @@ export default {
       const targetUrl = `https://linux.do/t/topic/${itemId}`;
 
       try {
-        const browserAPI = typeof browser !== "undefined" ? browser : chrome;
+        const browserAPI = typeof browser !== 'undefined' ? browser : chrome;
 
         // 查询当前活动的标签页
         const tabs = await new Promise((resolve) => {
@@ -80,32 +81,32 @@ export default {
       }
 
       // 向父组件发送移除事件
-      this.$emit("remove-item", itemId);
+      this.$emit('remove-item', itemId);
     },
 
     previewPost(itemId) {
       // 后台预览帖子，保持用户登录状态
-      console.log("开始后台预览帖子：", itemId);
+      console.log('开始后台预览帖子：', itemId);
       this.loadPostInBackground(`https://linux.do/t/topic/${itemId}`);
       // 预览后也移除这条目
-      this.$emit("remove-item", itemId);
-      this.$message.success('设为已读！')
+      this.$emit('remove-item', itemId);
+      this.$message.success('设为已读！');
     },
 
     loadPostInBackground(url) {
       // 创建隐藏的 iframe 来加载页面，保持用户登录状态
-      const iframe = document.createElement("iframe");
-      iframe.style.display = "none";
-      iframe.style.width = "0";
-      iframe.style.height = "0";
-      iframe.style.border = "none";
-      iframe.style.position = "absolute";
-      iframe.style.left = "-9999px";
+      const iframe = document.createElement('iframe');
+      iframe.style.display = 'none';
+      iframe.style.width = '0';
+      iframe.style.height = '0';
+      iframe.style.border = 'none';
+      iframe.style.position = 'absolute';
+      iframe.style.left = '-9999px';
       iframe.src = url;
 
       // 监听加载完成
       iframe.onload = () => {
-        console.log("后台预览完成：", url);
+        console.log('后台预览完成：', url);
         // 延迟移除 iframe，确保页面完全加载
         setTimeout(() => {
           if (iframe.parentNode) {
@@ -116,16 +117,15 @@ export default {
 
       // 错误处理
       iframe.onerror = () => {
-        console.error("后台预览失败：", url);
+        console.error('后台预览失败：', url);
         if (iframe.parentNode) {
           document.body.removeChild(iframe);
         }
       };
 
       // 添加到页面
       document.body.appendChild(iframe);
-    },
-
-  },
+    }
+  }
 };
 </script>

entrypoints/DialogComponents/style.less

@@ -106,35 +106,27 @@ a {
     padding: 2px 0;
     border-bottom: 1px solid #eee;
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     position: relative;
-    padding-right: 40px;
 
     a {
       text-decoration: none;
       padding: 5px 0;
       border-radius: 3px;
       position: relative;
-      // display: -webkit-box;
-      // -webkit-box-orient: vertical;
-      // -webkit-line-clamp: 1;
-      // overflow: hidden;
 
       &:hover {
         text-decoration: underline;
       }
 
-
     }
 
     em {
       font-style: normal;
-      position: absolute;
-      top: 10px;
-      right: 0;
       border-radius: 30px;
       height: 20px;
       background-color: var(--color-neutral-3);
+      color: var(--color-neutral-8);
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -188,10 +180,9 @@ a {
   gap: 6px;
   padding: 2px 0;
   min-height: 20px;
-  /* 固定最小行高 */
   width: 100%;
   overflow: hidden;
-  /* 防止内容溢出 */
+  flex: 1;
 }
 
 .preview-btn {
@@ -205,10 +196,9 @@ a {
   justify-content: center;
   transition: all 0.2s;
   flex-shrink: 0;
-  min-width: 30px;
-  position: absolute;
-  top: 6px;
-  right: 0;
+
+  width: 100%;
+  height: 100%;
 }
 
 .preview-btn:hover {
@@ -220,10 +210,24 @@ a {
   height: 14px;
 }
 
-.news-item:hover .preview-btn {
+.news-meta {
+  width: 36px;
+  height: 36px;
   display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    em {
+      display: none;
+    }
+
+    .preview-btn {
+      display: flex;
+    }
+  }
 }
 
-.news-item:hover em {
-  display: none;
+.news-item.hot .news-meta em {
+  display: inline-flex;
 }