From fa600478bac0ff63fd1d60280e4a870406d1e19b Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyu_kun@sina.com>
Date: Mon, 9 Oct 2023 02:47:54 +0800
Subject: [PATCH] feat: share topic

---
 src/views/topic/KUNGalgameTopicPage.vue       |  3 +-
 src/views/topic/components/Content.vue        |  1 +
 .../topic/components/KUNGalgamerInfo.vue      | 10 ++++-
 src/views/topic/components/footer/Footer.vue  | 43 ++++++++++++++++++-
 src/views/topic/components/reply/Reply.vue    | 10 ++++-
 5 files changed, 62 insertions(+), 5 deletions(-)

diff --git a/src/views/topic/KUNGalgameTopicPage.vue b/src/views/topic/KUNGalgameTopicPage.vue
index bd1ccab7..10f7888e 100644
--- a/src/views/topic/KUNGalgameTopicPage.vue
+++ b/src/views/topic/KUNGalgameTopicPage.vue
@@ -291,8 +291,9 @@ onBeforeMount(() => {
         </Transition>
         <Master v-if="topicData" :topicData="topicData" />
         <Reply
-          v-if="repliesData"
+          v-if="topicData && repliesData"
           :repliesData="repliesData"
+          :title="topicData.title"
           :isExecuteScrollToReplyAnimate="isExecuteScrollToReplyAnimate"
         />
       </div>
diff --git a/src/views/topic/components/Content.vue b/src/views/topic/components/Content.vue
index 769cd7d0..314d1aad 100644
--- a/src/views/topic/components/Content.vue
+++ b/src/views/topic/components/Content.vue
@@ -105,6 +105,7 @@ defineProps<{
   .kungalgame-topic-content {
     width: 100%;
     margin-top: 0;
+    padding: 17px 7px;
   }
 }
 </style>
diff --git a/src/views/topic/components/KUNGalgamerInfo.vue b/src/views/topic/components/KUNGalgamerInfo.vue
index 6ec49226..e6d7d0c3 100644
--- a/src/views/topic/components/KUNGalgamerInfo.vue
+++ b/src/views/topic/components/KUNGalgamerInfo.vue
@@ -64,10 +64,18 @@ const props = defineProps<{
   .kungalgamer {
     flex-direction: row;
     justify-content: center;
-    margin-top: 27px;
+    margin-top: 17px;
     padding-bottom: 10px;
     border-bottom: 1px solid var(--kungalgame-blue-1);
   }
+  .avatar {
+    /* 图像加载不出来时页面不塌陷 */
+    width: 70px;
+    margin-top: 10px;
+    img {
+      width: 70px;
+    }
+  }
   .info {
     margin-left: 50px;
     display: flex;
diff --git a/src/views/topic/components/footer/Footer.vue b/src/views/topic/components/footer/Footer.vue
index d7580061..357c4f9b 100644
--- a/src/views/topic/components/footer/Footer.vue
+++ b/src/views/topic/components/footer/Footer.vue
@@ -13,8 +13,18 @@ import Reply from './Reply.vue'
 // 重新编辑组件
 import Rewrite from './Rewrite.vue'
 
+// 全局消息组件（顶部）
+import message from '@/components/alert/Message'
+
 // 导入用户的 store
 import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
+// 导入设置面板 store
+import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
+import { storeToRefs } from 'pinia'
+
+// 使用设置面板的 store
+const settingsStore = useKUNGalgameSettingsStore()
+const { showKUNGalgameLanguage } = storeToRefs(settingsStore)
 
 // 接受父组件的传值
 const props = defineProps<{
@@ -50,6 +60,35 @@ const toUser = computed(() => props.toUser)
  */
 // 当前登录用户的 uid
 const currUserUid = useKUNGalgameUserStore().uid
+
+// 分享
+const handleClickShare = () => {
+  const shareLinkEN = computed(
+    () =>
+      `Share Link from KUN Visual Novel Forum ~~~
+Title: ${props.content.title}
+Link: https://www.kungal.com/topic/${props.info.tid}`
+  )
+
+  const shareLinkCN = computed(
+    () =>
+      `来自鲲 Galgame 论坛的分享链接 ~~~
+标题: ${props.content.title}
+链接: https://www.kungal.com/topic/${props.info.tid}`
+  )
+
+  const shareLink =
+    showKUNGalgameLanguage.value === 'en' ? shareLinkEN : shareLinkCN
+
+  navigator.clipboard
+    .writeText(shareLink.value)
+    .then(() => {
+      message('Share Link copied successfully!', '分享链接复制成功', 'success')
+    })
+    .catch((err) => {
+      message('Share Link copied failed!', '分享链接复制失败!', 'error')
+    })
+}
 </script>
 
 <template>
@@ -103,7 +142,9 @@ const currUserUid = useKUNGalgameUserStore().uid
       />
 
       <!-- 分享 -->
-      <span class="icon"><Icon icon="majesticons:share-line" /></span>
+      <span @click="handleClickShare" class="icon"
+        ><Icon icon="majesticons:share-line"
+      /></span>
 
       <!-- 只看 TODO: -->
       <!-- <span class="icon"><Icon icon="ph:user-focus-duotone" /></span> -->
diff --git a/src/views/topic/components/reply/Reply.vue b/src/views/topic/components/reply/Reply.vue
index 2588cfc0..12c052a2 100644
--- a/src/views/topic/components/reply/Reply.vue
+++ b/src/views/topic/components/reply/Reply.vue
@@ -41,6 +41,7 @@ const { tid, rid, toUid, toUsername, isShowCommentPanelRid } = storeToRefs(
 
 const props = defineProps<{
   repliesData: TopicReply[]
+  title: string
 }>()
 
 // 响应式 props 的值，因为子组件还要用
@@ -104,7 +105,7 @@ const handleClickComment = (
                   <!-- 上部区域的左边 -->
                   <div class="reply">
                     <!-- 跳转到页面中话题的位置 -->
-                    回复给 @
+                    {{ `${$tm('topic.panel.to')} @` }}
                     <span @click="scrollToReplyId = reply.to_floor">
                       {{ reply.to_user.name }}
                     </span>
@@ -136,7 +137,7 @@ const handleClickComment = (
               upvotes: reply.upvotes,
             }"
             :content="{
-              title: '',
+              title: props.title,
               content: reply.content,
               tags: reply.tags,
               category: [],
@@ -321,5 +322,10 @@ const handleClickComment = (
   .article {
     flex-direction: column;
   }
+  .top {
+    margin: 0;
+    padding-bottom: 10px;
+    border-bottom: 1px solid var(--kungalgame-blue-1);
+  }
 }
 </style>