到目前為止，各位可以看到，
我們只用了一些簡單的 Javascript 程式碼，
非但改善了 Google 翻譯的閱讀體驗，
還提供了一鍵翻譯修改保存的功能。

在整段過程中，
我們連最多人常用的 jQuery 都沒用上，
很多做法也是邊做邊查，一路跌跌撞撞，
僅靠著 Javascript 原生所提供的功能，
加上瀏覽器外掛的一些原生 API，
就來到了這裡。

這其中最關鍵的部分，就是「html 分句」的功能。
它可說是讓後續處理更簡單、更乾淨俐落的根本基礎，
但 HTML 分句想做到十分完善，並不容易。
此處所提供的做法，還是有改進的空間，
因此，我特別將此部分獨立出來，
希望可以慢慢發展，最後得出很好用的成果。
在此不厭其煩再次推薦，歡迎有興趣的朋友一起來看看囉。 ^_^

git clone https://github.com/betterTrans/sentTag.git

話說回來，有很多好用的其他 js 函式庫或架構，
也很值得我們學習。
比如今天我們就打算運用 Vue3，
編寫句子面板裡的內容，
因為 Vue3 有以下幾個好處：

• 資料一處更新，頁面多處即時反應
• 機制架構相對單純，可寫出簡潔的程式碼
• 短期就能學會，未來應用廣泛
• 程式碼更好維護、更好修改、更好擴充
• 作者是華人，中文文件非常豐富

Vue3 的相關說明資源非常友善，
我們就不再多花時間介紹，
接下來我們會以實際的需求為主軸，
藉由 Vue3 逐步建構出我們想要的功能。

一開始，先來個簡單的功能好了。
在編輯翻譯時，如果想看原文，
必須移動滑鼠游標，讓原文自動跳出來。

不過在翻譯時，我們的雙手並不想經常離開鍵盤。
操作滑鼠的動作，越少越好。
因此，我想利用句子面板來呈現原句的內容。

首先，我們如果想運用 Vue3，
就要先把 Vue3 安裝起來。
Vue3 有很多種安裝方式，
這裡則採用最單純的做法，
就是把 vue.global.prod.js 檔案下載到我們的 js 目錄中，
再到 manifest.json 登記一下。

  "js": [
    "js/vue.global.prod.js",
    ...
  ]

接著我們在 contenet.js 檔案裡，
先在建立句子面板時，把大小修改為 'auto'，

  sent_panel = createPanel("bt_sent_panel", "bottom", false, 'auto')

然後再到 panels.js 建立一個 showInSentPanel() 函式如下：

var vm
function showInSentPanel(data) {
  app_div = document.querySelector("#bt_sent_panel div#app")
  if (!app_div) {
    app_div = document.createElement('div')
    app_div.id = 'app'
    document.querySelector("#bt_sent_panel").append(app_div)
  }

  sent_id =  data.node?data.node.id:0
  orig_htmls =  data.orig_htmls?data.orig_htmls:{}
  orig_texts =  data.orig_texts?data.orig_texts:{}
  tran_htmls =  data.tran_htmls?data.tran_htmls:[]
  tran_texts =  data.tran_texts?data.tran_texts:[]

  if (vm) {
    vm.$data.sent_id = sent_id
  }
  else {
    vm = Vue.createApp({
      data () {
        return {
          sent_id: sent_id,
          orig_htmls: orig_htmls,
          orig_texts: orig_texts,
          tran_htmls: tran_htmls,
          tran_texts: tran_texts
        }
      },
      computed: {
        sent_index: function () {
          return parseInt(this.sent_id.replace('sent_',''))
        }
      },
      render() {
        return Vue.h('div', {
          id: "app",
          style: { 'margin': '20px', },
        }, [
          this.orig_texts[this.sent_index]
        ])
      }
      // template: '<div id="app">{{orig_texts[sent_index]}}</div>'
    }).mount(app_div);
  }
}

這個函式可以把句子的原文顯示在句子面板中。

用過 Vue3 的人可能會覺得很奇怪，
這裡為什麼不用 template 而使用 render()？
這是因為瀏覽器外掛無法使用行內腳本（inline script），
所以 template 的做法無法使用，
只好改用 render()，先渲染好再送入頁面。

接著我們在 switchToModification() 這個函式內，
也就是在切換到翻譯修改界面時，執行上面的函式，
先把原文句子顯示到句子面板中，
然後再把句子面板從畫面的外面滑進來：

  showInSentPanel(data);
  slideInPanel('bt_sent_panel')

在確認翻譯修改的 confirmModification() 函式內，
以及取消翻譯修改的 cancelModification() 函式內，
則可以把句子面板往外滑出去：

  slideOutPanel('bt_sent_panel')

完成以上修改之後，在編輯翻譯時就會自動滑出句子面板，
其中顯示的是句子的原文。

如果切換至其他句子，只需要下面這行程式碼：

   vm.$data.sent_id = node.id

句子面板中的原文就會隨之更新。

如果結束編輯，句子面板也會自動收合起來。

這就是句子面板最典型也最簡單的一種應用方式。
其實我們可以在句子面板中，顯示很多有用的資訊，
例如全部的句子總數、目前是第幾個句子等等。
後續有很多好用的功能，都需要倚靠這個句子面板喲。