feat: add comment

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 2025/01/09
+
+* feat: add comment
+
 ## 2024/09/19
 
 * feat: support SE display

package.json

@@ -14,6 +14,7 @@
     "lint:js": "eslint src --ext .ts,.vue"
   },
   "dependencies": {
+    "@giscus/vue": "^3.1.1",
     "@octokit/types": "^9.0.0",
     "@vercel/analytics": "^1.0.1",
     "axios": "^1.7.4",

src/components/translate/TranslationPanel.vue

@@ -1,6 +1,7 @@
 // TranslationPanel.vue
 
 <script setup lang="ts">
+import Giscus from '@giscus/vue'
 import Communication from './CommunicationLogs.vue'
 import PushPanel from './push/PushPanel.vue'
 import PushHeader from './push/PushHeader.vue'
@@ -25,6 +26,7 @@ import {
   Repeat,
   UpToTop,
   Download,
+  AddComment,
   // Share,
 } from '@vicons/carbon'
 import { ref, onMounted, nextTick, computed, watch, h } from 'vue'
@@ -50,6 +52,7 @@ const { t } = useI18n()
 const route = useRoute()
 const router = useRouter()
 const showSwitchModal = ref(false)
+const showDiscussionModal = ref(false)
 const isRotating = ref(false)
 const notification = useNotification()
 
@@ -172,10 +175,11 @@ async function loadDataFromLocalStorage(id: string) {
   router.replace({
     path: route.path,
     query: {
+      ...route.query,
       source: DataSource.Browser,
       id: route.query.id,
     },
-    hash: route.hash,
+    // hash: route.hash,
   })
   csvUrl.value = id
   await communication.value?.loadDataFromSourceInput(id, DataSource.Browser)
@@ -193,6 +197,7 @@ async function loadDataFromEncodedUrl(encodedSrcUrl: string) {
     path: route.path,
     // hash: `#${encodedSrcUrl}`,
     query: {
+      ...route.query,
       source: DataSource.Remote,
       id: encodedSrcUrl,
     },
@@ -589,6 +594,39 @@ const currentDialogueCount = computed(() => {
       </n-space>
     </n-space>
   </n-modal>
+  <n-modal
+    v-model:show="showDiscussionModal"
+    preset="card"
+    style="width: 600px; max-width: 100%"
+    :title="t(`translate.tab.comment`)"
+  >
+    <meta
+      name="giscus:backlink"
+      :content="`https://sc-viewer.top/translate?id=${store.jsonUrl}`"
+    />
+    <Giscus
+      v-if="
+        !!communication?.data.length &&
+        !!store.jsonUrl &&
+        route.path.startsWith('/translate')
+      "
+      id="comments"
+      repo="darwintree/sc-viewer-v2"
+      repo-id="R_kgDOImHNhg"
+      category="Announcements"
+      category-id="DIC_kwDOImHNhs4Cl3J4"
+      mapping="specific"
+      :term="store.jsonUrl"
+      strict="0"
+      reactions-enabled="1"
+      emit-metadata="0"
+      input-position="top"
+      theme="preferred_color_scheme"
+      lang="zh-CN"
+      crossorigin="anonymous"
+      async
+    ></Giscus>
+  </n-modal>
   <AutoTranslateModal
     v-model:show-modal="showAutoTranslateModel"
     :do-translate="translateCommunication"
@@ -668,6 +706,12 @@ const currentDialogueCount = computed(() => {
           t('translate.tab.switch')
         }}</n-button>
       </div>
+      <div class="clickable" @click="showDiscussionModal = true">
+        <n-icon size="18"> <AddComment /> </n-icon><br />
+        <n-button text type="default" :focusable="false">{{
+          t('translate.tab.comment')
+        }}</n-button>
+      </div>
       <!-- <div v-if="supportsShare" class="clickable" @click="share">
         <n-icon size="18"> <Share /> </n-icon><br />
         <n-button text type="default" :focusable="false"> Share </n-button>

src/locale.ts

@@ -67,6 +67,7 @@ const messages = {
         rename: 'Rename',
         complete: 'Complete',
         switch: 'Switch',
+        comment: 'Comment',
         top: 'TOP',
         push: 'Push',
         download: 'Download',
@@ -247,6 +248,7 @@ const messages = {
         push: '推送',
         download: '下载',
         preTranslate: '预翻译',
+        comment: '评论',
       },
     },
     push: {

yarn.lock

@@ -1183,6 +1183,13 @@
   resolved "https://registry.npmmirror.com/@eslint/js/-/js-8.36.0.tgz#9837f768c03a1e4a30bd304a64fb8844f0e72efe"
   integrity sha512-lxJ9R5ygVm8ZWgYdUweoq5ownDlJ4upvoWmO4eLxBYHdMo+vZ/Rx0EN6MbKWDJOSUGrqJy2Gt+Dyv/VKml0fjg==
 
+"@giscus/vue@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/@giscus/vue/-/vue-3.1.1.tgz#c47021f42b7e7951f2fb6149f93a0756db226b80"
+  integrity sha512-xgsc93MibRQ0d1glBxN1BrEREHTIf3BPYs/3R+UZHNqawFFoWBV6iJ7uVCXMqoEKZdE2c78B3aKt5gfGqo8I5A==
+  dependencies:
+    giscus "^1.6.0"
+
 "@honkit/asciidoc@^4.0.7":
   version "4.0.7"
   resolved "https://registry.npmmirror.com/@honkit/asciidoc/-/asciidoc-4.0.7.tgz#7e6deb19c91ccf6e4177c215652919e53f081d96"
@@ -1337,6 +1344,18 @@
   resolved "https://registry.npmmirror.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
   integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
 
+"@lit-labs/ssr-dom-shim@^1.2.0":
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.1.tgz#2f3a8f1d688935c704dbc89132394a41029acbb8"
+  integrity sha512-wx4aBmgeGvFmOKucFKY+8VFJSYZxs9poN3SDNQFF6lT6NrQUnHiPB2PWz2sc4ieEcAaYYzN+1uWahEeTq2aRIQ==
+
+"@lit/reactive-element@^2.0.4":
+  version "2.0.4"
+  resolved "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.4.tgz#8f2ed950a848016383894a26180ff06c56ae001b"
+  integrity sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==
+  dependencies:
+    "@lit-labs/ssr-dom-shim" "^1.2.0"
+
 "@nodelib/[email protected]":
   version "2.1.5"
   resolved "https://registry.npmmirror.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -3159,6 +3178,13 @@ get-symbol-description@^1.0.0:
     call-bind "^1.0.2"
     get-intrinsic "^1.1.1"
 
+giscus@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.npmjs.org/giscus/-/giscus-1.6.0.tgz#96c592e01829707b3a0ba72c2636c07a28b5c19d"
+  integrity sha512-Zrsi8r4t1LVW950keaWcsURuZUQwUaMKjvJgTCY125vkW6OiEBkatE7ScJDbpqKHdZwb///7FVC21SE3iFK3PQ==
+  dependencies:
+    lit "^3.2.1"
+
 gitbook-plugin-fontsettings@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmmirror.com/gitbook-plugin-fontsettings/-/gitbook-plugin-fontsettings-2.0.0.tgz#835f900ae3dd111086fe7ed4425ee3de024861ab"
@@ -3831,6 +3857,31 @@ linkify-it@^4.0.1:
   dependencies:
     uc.micro "^1.0.1"
 
+lit-element@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.npmjs.org/lit-element/-/lit-element-4.1.1.tgz#07905992815076e388cf6f1faffc7d6866c82007"
+  integrity sha512-HO9Tkkh34QkTeUmEdNYhMT8hzLid7YlMlATSi1q4q17HE5d9mrrEHJ/o8O2D0cMi182zK1F3v7x0PWFjrhXFew==
+  dependencies:
+    "@lit-labs/ssr-dom-shim" "^1.2.0"
+    "@lit/reactive-element" "^2.0.4"
+    lit-html "^3.2.0"
+
+lit-html@^3.2.0:
+  version "3.2.1"
+  resolved "https://registry.npmjs.org/lit-html/-/lit-html-3.2.1.tgz#8fc49e3531ee5947e4d93e8a5aa642ab1649833b"
+  integrity sha512-qI/3lziaPMSKsrwlxH/xMgikhQ0EGOX2ICU73Bi/YHFvz2j/yMCIrw4+puF2IpQ4+upd3EWbvnHM9+PnJn48YA==
+  dependencies:
+    "@types/trusted-types" "^2.0.2"
+
+lit@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.npmjs.org/lit/-/lit-3.2.1.tgz#d6dd15eac20db3a098e81e2c85f70a751ff55592"
+  integrity sha512-1BBa1E/z0O9ye5fZprPtdqnc0BFzxIxTTOO/tQFmyC/hj1O3jL4TfmLBw0WEwjAokdLwpclkvGgDJwTIh0/22w==
+  dependencies:
+    "@lit/reactive-element" "^2.0.4"
+    lit-element "^4.1.0"
+    lit-html "^3.2.0"
+
 livereload-js@^2.3.0:
   version "2.4.0"
   resolved "https://registry.npmmirror.com/livereload-js/-/livereload-js-2.4.0.tgz#447c31cf1ea9ab52fc20db615c5ddf678f78009c"