feat: v4.49.1

package.json

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

src/pages/snippets/desktop/index.vue

@@ -11,6 +11,10 @@
 
  const { latestThreadsStore, loading, finished, allMedias, fetchMoreMedias } = useThreadsMediasData()
 
+ const openImagePopup = (url: string) => {
+ window.$popup.vImage(url)
+ }
+
  useSnippetsPageMeta()
  useUniversalFetch(() => latestThreadsStore.fetch())
 </script>
@@ -27,7 +31,10 @@
  Threads
  </ulink>
  <divider type="vertical" size="lg" color="#ffffffcc" />
- <ulink :href="VALUABLE_LINKS.ZHIHU" class="link"><i class="iconfont icon-zhihu-full"></i></ulink>
+ <ulink :href="VALUABLE_LINKS.ZHIHU" class="link">
+ <i class="iconfont icon-zhihu"></i>
+ Zhihu.com
+ </ulink>
  </template>
  </page-banner>
  <container class="page-bridge"></container>
@@ -51,7 +58,7 @@
  <div>
  <masonry-list :data="allMedias" :cols="3">
  <template #item="{ data }">
- <threads-card :media="data" />
+ <threads-card :media="data" :show-icon="true" @click-image="openImagePopup" />
  </template>
  </masonry-list>
  <loadmore

src/pages/snippets/mobile/index.vue

@@ -47,9 +47,7 @@
  <i class="iconfont icon-threads"></i> Threads
  </ulink>
  <divider type="vertical" />
- <ulink class="item" :href="VALUABLE_LINKS.ZHIHU">
- <i class="iconfont icon-zhihu-full"></i>
- </ulink>
+ <ulink class="item" :href="VALUABLE_LINKS.ZHIHU"><i class="iconfont icon-zhihu"></i> Zhihu.com</ulink>
  </div>
  <ul class="cards">
  <li class="item" v-for="(media, index) in allMedias" :key="index" data-allow-mismatch>
@@ -137,6 +135,7 @@
  align-items: center;
 
  .item {
+ flex: 1;
  text-align: center;
  font-size: $font-size-h3;
  }

src/pages/snippets/threads/card.vue

@@ -1,31 +1,48 @@
 <script lang="ts" setup>
+ import { computed } from 'vue'
+ import { useEnhancer } from '/@/app/enhancer'
+ import { useCountry } from '/@/app/context'
+ import { isCNCode } from '/@/transforms/region'
+ import { getProxyURL } from '/@/transforms/url'
  import type { ThreadsMedia } from '/@/server/getters/threads'
  import Markdown from '/@/components/common/markdown.vue'
- defineProps<{
+
+ const props = defineProps<{
  media: ThreadsMedia
+ showIcon?: boolean
  }>()
 
- const openImagePopup = (url: string) => {
- window.$popup.vImage(url)
- }
+ const emit = defineEmits<{
+ (e: 'click-image', url: string): void
+ }>()
+
+ const { cdnDomain } = useEnhancer()
+ const mediaUrl = computed(() => {
+ const url = props.media.media_url
+ if (!url) return null
+ const countryCode = useCountry()
+ const isCNUser = isCNCode(countryCode ?? '')
+ return isCNUser ? getProxyURL(cdnDomain, url) : url
+ })
 </script>
 
 <template>
  <div class="threads-media-card">
- <div class="media" :class="{ audio: media.media_type === 'AUDIO' }" v-if="media.media_url">
- <audio class="audio" :src="media.media_url" controls v-if="media.media_type === 'AUDIO'" />
- <video class="video" :src="media.media_url" controls v-else-if="media.media_type === 'VIDEO'" />
- <uimage
+ <div class="media" :class="{ audio: media.media_type === 'AUDIO' }" v-if="mediaUrl">
+ <audio class="audio" :src="mediaUrl" controls v-if="media.media_type === 'AUDIO'" />
+ <video class="video" :src="mediaUrl" controls v-else-if="media.media_type === 'VIDEO'" />
+ <img
  class="image"
  :alt="media.text"
- :src="media.media_url"
+ :src="mediaUrl"
  loading="lazy"
+ draggable="false"
+ @click="emit('click-image', mediaUrl)"
  v-else
- @click="openImagePopup(media.media_url)"
  />
  </div>
  <div class="content">
- <span class="icon" v-if="!media.media_url">
+ <span class="icon" v-if="!mediaUrl && showIcon">
  <i class="iconfont icon-repost" v-if="media.is_quote_post"></i>
  <i class="iconfont icon-audio" v-else-if="media.media_type === 'AUDIO'"></i>
  <i class="iconfont icon-video" v-else-if="media.media_type === 'VIDEO'"></i>