refactor: move ruby to custom vue component

(cherry picked from commit ea99d38a920850b0d4dbaa7352f57ebf13bbbee6)

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 },
   },

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>