feat: v4.43.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "surmon.me",
-  "version": "4.42.0",
+  "version": "4.43.0",
   "description": "Surmon.me blog",
   "author": "Surmon",
   "license": "MIT",

src/components/layout/desktop/menu.ts

@@ -67,13 +67,6 @@ export const menus: Array<MenuItem> = [
     i18nKey: LanguageKey.PAGE_GUESTBOOK,
     icon: 'icon-comment'
   },
-  // {
-  //   id: RouteName.App,
-  //   route: getPageRoute(RouteName.App),
-  //   imageIcon: getPageURL('/images/page-app/logo.png'),
-  //   i18nKey: LanguageKey.PAGE_APP,
-  //   divider: true
-  // },
   {
     id: 'sponsor',
     route: getPageRoute(RouteName.Sponsor),
@@ -82,4 +75,11 @@ export const menus: Array<MenuItem> = [
     hot: true,
     divider: true
   }
+  // {
+  //   id: RouteName.App,
+  //   route: getPageRoute(RouteName.App),
+  //   imageIcon: getPageURL('/images/page-app/logo.png'),
+  //   i18nKey: LanguageKey.PAGE_APP,
+  //   divider: true
+  // }
 ]

src/composables/popup/root.vue

@@ -23,7 +23,7 @@
   <div id="popup" class="popup" :class="{ mobile: isMobile, dark: isDarkTheme }" v-disabled-wallflower>
     <transition name="module">
       <div class="mask" v-show="state.visible" @click.self="handleMaskClick">
-        <div ref="element" class="warpper" :class="{ border: state.border }">
+        <div ref="element" class="wrapper" :class="{ border: state.border }">
           <img v-if="state.isImage" v-bind="image.attrs" :src="image.src || ''" />
         </div>
       </div>
@@ -43,7 +43,7 @@
     }
     &.mobile {
       .mask {
-        .warpper {
+        .wrapper {
           & > ::v-deep(*) {
             min-width: 50vw;
             min-height: 4rem;
@@ -67,7 +67,7 @@
       @include visibility-transition();
       @include backdrop-blur(5px);
 
-      .warpper {
+      .wrapper {
         display: contents;
         position: relative;
 

src/constants/anchor.ts

@@ -29,7 +29,7 @@ export const getArticleHeadingUrlHash = (heading: string) => {
     .replace(/\s+/g, '-')
 }
 
-export const COMMENT_ELEMENT_ID = 'A_comment_warpper'
+export const COMMENT_ELEMENT_ID = 'A_comment_wrapper'
 export const COMMENT_PUBLISHER_ELEMENT_ID = 'A_comment_publisher'
 export const COMMENT_REPLY_PUBLISHER_ELEMENT_ID = 'A_comment_reply_publisher'
 export const COMMENT_FOOTER_ELEMENT_ID = 'A_comment_footer'

src/pages/about/mobile.vue

@@ -112,18 +112,6 @@
       border-bottom-left-radius: $radius-lg;
       border-bottom-right-radius: $radius-lg;
       background-color: $module-bg-opaque;
-      &::before {
-        content: '';
-        position: absolute;
-        display: block;
-        height: 1rem;
-        bottom: -0.5rem;
-        left: 0;
-        right: 0;
-        background-image: radial-gradient(circle, transparent 70%, $module-bg-opaque 70%);
-        background-size: 0.7em 1em;
-        background-position: 0 -0.5em;
-      }
 
       .avatar {
         width: 100%;

src/pages/answers/card.vue

@@ -13,7 +13,7 @@
     <div class="divider"></div>
     <p class="excerpt" :title="answer.excerpt">{{ answer.excerpt }}</p>
     <div class="info">
-      <div class="metas">
+      <div class="left">
         <span class="item"><i class="iconfont icon-like"></i> {{ answer.voteup_count }} 赞同</span>
         <span class="item"><i class="iconfont icon-comment"></i> {{ answer.comment_count }} 评论</span>
       </div>
@@ -69,18 +69,25 @@
       color: $color-text-disabled;
       font-size: $font-size-small;
 
-      .metas {
+      .left {
         .item {
+          display: inline-flex;
+          align-items: center;
           margin-right: $gap * 2;
           .iconfont {
-            margin-right: $gap-xs;
+            margin-right: $gap-sm;
           }
         }
       }
 
-      .link {
-        color: $zhihu-primary;
-        margin-left: $gap;
+      .right {
+        display: inline-flex;
+        align-items: center;
+        .link {
+          display: inline-flex;
+          color: $zhihu-primary;
+          margin-left: $gap;
+        }
       }
     }
   }

src/pages/answers/desktop/index.vue

@@ -148,12 +148,12 @@
       padding: 0;
       display: grid;
       grid-template-columns: repeat(3, 1fr);
-      grid-gap: $gap * 5;
+      grid-gap: $gap * 4;
 
       .item {
         padding: $gap * 2;
-        @include radius-box($radius-xs);
         @include common-bg-module();
+        @include radius-box($radius-sm);
 
         .item-skeleton {
           width: 100%;

src/pages/answers/detail.vue

@@ -16,7 +16,7 @@
     </h2>
     <div class="content" v-html="answer.content"></div>
     <div class="info">
-      <div class="metas">
+      <div class="left">
         <span class="item"><i class="iconfont icon-like"></i> {{ answer.voteup_count }} 赞同</span>
         <span class="item"><i class="iconfont icon-comment"></i> {{ answer.comment_count }} 评论</span>
       </div>
@@ -75,19 +75,26 @@
       color: $color-text-disabled;
       font-size: $font-size-small;
 
-      .metas {
+      .left {
         .item {
+          display: inline-flex;
+          align-items: center;
           margin-right: $gap * 2;
 
           .iconfont {
-            margin-right: $gap-xs;
+            margin-right: $gap-sm;
           }
         }
       }
 
-      .link {
-        color: $zhihu-primary;
-        margin-left: $gap;
+      .right {
+        display: inline-flex;
+        align-items: center;
+        .link {
+          display: inline-flex;
+          color: $zhihu-primary;
+          margin-left: $gap;
+        }
       }
     }
   }

src/pages/answers/mobile/index.vue

@@ -1,12 +1,11 @@
 <script lang="ts" setup>
   import { useUniversalFetch } from '/@/universal'
   import { LanguageKey } from '/@/language'
-  import type { ZhihuAnswerItem } from '/@/server/getters/zhihu'
+  import { VALUABLE_LINKS } from '/@/config/app.config'
   import PageBanner from '/@/components/common/banner.vue'
   import Loadmore from '/@/components/common/loadmore.vue'
   import { getZhihuAnswerDetailURL } from '/@/transforms/media'
   import { scrollToNextScreen } from '/@/utils/scroller'
-  import { openNewWindow } from '/@/utils/opener'
   import { i18nTitle, useAnswersPageData, useAnswersPageMeta } from '../shared'
   import AnswerCard from '../card.vue'
 
@@ -18,10 +17,6 @@
     })
   }
 
-  const openZhihuLink = (answer: ZhihuAnswerItem) => {
-    openNewWindow(getZhihuAnswerDetailURL(answer.question.id, answer.id))
-  }
-
   useAnswersPageMeta()
   useUniversalFetch(() => zhihuLatestAnswers.fetch())
 </script>
@@ -44,9 +39,25 @@
       </template>
       <template #default>
         <div class="module-content">
+          <div class="statistics">
+            <ulink class="item" :href="VALUABLE_LINKS.ZHIHU">
+              <div class="logo"><i class="iconfont icon-zhihu-full"></i></div>
+              <div class="description">
+                {{ zhihuLatestAnswers?.data?.paging.totals ?? '-' }}
+                <i18n zh="个回答" en="answers" />
+              </div>
+            </ulink>
+            <divider type="vertical" />
+            <ulink class="item" :href="VALUABLE_LINKS.QUORA">
+              <div class="logo quora"><i class="iconfont icon-quora-full"></i></div>
+              <div class="description">-</div>
+            </ulink>
+          </div>
           <ul class="answer-list">
-            <li class="answer-item" v-for="(answer, index) in allAnswers" :key="index">
-              <answer-card :answer="answer" @click="openZhihuLink(answer)" />
+            <li class="answer-item" v-for="(answer, index) in allAnswers" :key="index" data-allow-mismatch>
+              <ulink :href="getZhihuAnswerDetailURL(answer.question.id, answer.id)">
+                <answer-card :answer="answer" />
+              </ulink>
             </li>
           </ul>
           <loadmore
@@ -103,6 +114,39 @@
     .module-content {
       margin-top: $item-gap;
 
+      .statistics {
+        margin: $item-gap 0;
+        padding: 1.8rem $gap-lg;
+        border-radius: $radius-lg;
+        background-color: $module-bg-translucent;
+        display: flex;
+        justify-content: space-evenly;
+        align-items: center;
+
+        .item {
+          text-align: center;
+
+          .logo {
+            margin-bottom: $gap-xs;
+            font-size: $font-size-h1;
+            &.quora {
+              display: flex;
+              $size: $font-size-h3 * 2;
+              height: $size;
+              line-height: $size;
+              font-size: $size;
+            }
+          }
+
+          .description {
+            font-weight: bold;
+            font-size: $font-size-small;
+            color: $color-text-secondary;
+            text-transform: uppercase;
+          }
+        }
+      }
+
       .answer-list {
         margin: 0;
         padding: 0;

src/pages/archive/desktop.vue

@@ -39,7 +39,7 @@
         <i18n v-bind="i18ns.description" />
       </template>
     </page-banner>
-    <container class="statistic-warpper">
+    <container class="statistic-wrapper">
       <transition name="module" mode="out-in">
         <div class="skeletons" v-if="statisticFetching">
           <skeleton-base class="item" :key="s" v-for="s in statistics.length" />
@@ -57,7 +57,7 @@
         </div>
       </transition>
     </container>
-    <container class="archive-warpper">
+    <container class="archive-wrapper">
       <placeholder :data="archiveStore.data?.articles.length" :loading="archiveStore.fetching">
         <template #placeholder>
           <empty class="archive-empty" bold key="empty">
@@ -122,7 +122,7 @@
   @import '/src/styles/mixins.scss';
 
   .archive-page {
-    .statistic-warpper {
+    .statistic-wrapper {
       padding: 3rem 0;
       background-color: $module-bg-translucent;
 
@@ -171,7 +171,7 @@
       }
     }
 
-    .archive-warpper {
+    .archive-wrapper {
       padding: 3rem 0;
       overflow: hidden;