feat(config): better config ui

- JOOX Music UUID label + description
- Not full screen anymore

(cherry picked from commit 8a323f9dbbd17515f53826023a565112acaed90b)

src/component/ConfigDialog.vue

@@ -1,10 +1,58 @@
+<style scoped>
+label {
+  cursor: pointer;
+  line-height: 1.2;
+  display: block;
+}
+.item-desc {
+  color: #aaa;
+  font-size: small;
+  display: block;
+  line-height: 1.2;
+  margin-top: 0.2em;
+}
+.item-desc a {
+  color: #aaa;
+}
+
+form >>> input {
+  font-family: 'Courier New', Courier, monospace;
+}
+
+* >>> .um-config-dialog {
+  max-width: 90%;
+  width: 40em;
+}
+</style>
+
 <template>
-  <el-dialog fullscreen @close="cancel()" title="解密设定" :visible="show" width="30%" center>
+  <el-dialog @close="cancel()" title="解密设定" :rules="rules" :visible="show" custom-class="um-config-dialog" center>
-    <el-form ref="form" :model="form" label-width="80px">
+    <el-form ref="form" status-icon :model="form" label-width="0">
-      <el-form-item label="Joox UUID">
+      <section>
-        <el-input type="text" placeholder="UUID" v-model="form.jooxUUID" clearable maxlength="32" show-word-limit>
+        <label>
-        </el-input>
+          <span>
-      </el-form-item>
+            JOOX Music ·
+            <ruby>
+              设备唯一识别码
+              <rp>(</rp>
+              <rt>Device Unique Identifier</rt>
+              <rp>)</rp></ruby
+            >
+          </span>
+          <el-form-item prop="jooxUUID">
+            <el-input type="text" v-model="form.jooxUUID" clearable maxlength="32" show-word-limit> </el-input>
+          </el-form-item>
+        </label>
+
+        <p class="item-desc">
+          下载该加密文件的 JOOX 应用所记录的设备唯一识别码。
+          <br />
+          参见：
+          <a href="https://github.com/unlock-music/joox-crypto/wiki/%E8%8E%B7%E5%8F%96%E8%AE%BE%E5%A4%87-UUID">
+            获取设备 UUID · unlock-music/joox-crypto Wiki</a
+          >。
+        </p>
+      </section>
     </el-form>
     <span slot="footer" class="dialog-footer">
       <el-button type="primary" :loading="saving" @click="emitConfirm()">确 定</el-button>
@@ -15,6 +63,20 @@
 <script>
 import { storage } from '@/utils/storage';
 
+// FIXME: 看起来不会触发这个验证提示？
+function validateJooxUUID(rule, value, callback) {
+  debugger;
+  if (!value || !/^[\da-fA-F]{32}$/.test(value)) {
+    callback(new Error('无效的 Joox UUID，请参考 Wiki 获取。'));
+  } else {
+    callback();
+  }
+}
+
+const rules = {
+  jooxUUID: { validator: validateJooxUUID, trigger: 'blur' },
+};
+
 export default {
   components: {},
   props: {
@@ -22,6 +84,7 @@ export default {
   },
   data() {
     return {
+      rules,
       saving: false,
       form: {
         jooxUUID: '',