From c1aba5a10f137bfc466de7f9b2c834b35930a588 Mon Sep 17 00:00:00 2001
From: Jixun Wu <jixun.moe@gmail.com>
Date: Wed, 22 Dec 2021 13:39:47 +0000
Subject: [PATCH] refactor: move ruby to custom vue component

(cherry picked from commit ea99d38a920850b0d4dbaa7352f57ebf13bbbee6)
---
 src/component/ConfigDialog.vue | 12 +++++-------
 src/component/Ruby.vue         | 18 ++++++++++++++++++
 2 files changed, 23 insertions(+), 7 deletions(-)
 create mode 100644 src/component/Ruby.vue

diff --git a/src/component/ConfigDialog.vue b/src/component/ConfigDialog.vue
index 8317bde..8523f02 100644
--- a/src/component/ConfigDialog.vue
+++ b/src/component/ConfigDialog.vue
@@ -32,12 +32,7 @@ form >>> input {
         <label>
           <span>
             JOOX Music ·
-            <ruby>
-              设备唯一识别码
-              <rp>(</rp>
-              <rt>Device Unique Identifier</rt>
-              <rp>)</rp></ruby
-            >
+            <Ruby caption="Unique Device Identifier">设备唯一识别码</Ruby>
           </span>
           <el-form-item prop="jooxUUID">
             <el-input type="text" v-model="form.jooxUUID" clearable maxlength="32" show-word-limit> </el-input>
@@ -62,6 +57,7 @@ form >>> input {
 
 <script>
 import { storage } from '@/utils/storage';
+import Ruby from './Ruby';
 
 // FIXME: 看起来不会触发这个验证提示？
 function validateJooxUUID(rule, value, callback) {
@@ -77,7 +73,9 @@ const rules = {
 };
 
 export default {
-  components: {},
+  components: {
+    Ruby,
+  },
   props: {
     show: { type: Boolean, required: true },
   },
diff --git a/src/component/Ruby.vue b/src/component/Ruby.vue
new file mode 100644
index 0000000..14ede6b
--- /dev/null
+++ b/src/component/Ruby.vue
@@ -0,0 +1,18 @@
+<template>
+  <ruby :title="caption">
+    <slot></slot>
+
+    <rp>（</rp>
+    <rt v-text="caption"></rt>
+    <rp>）</rp>
+  </ruby>
+</template>
+
+<script>
+export default {
+  name: 'Ruby',
+  props: {
+    caption: { type: String, required: true },
+  },
+};
+</script>