feat(config): better config ui

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

(cherry picked from commit 8a323f9dbbd17515f53826023a565112acaed90b)
This commit is contained in:
鲁树人 2021-12-21 23:10:34 +00:00
parent a69ed4f3ce
commit 290986e546

View File

@ -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-form ref="form" :model="form" label-width="80px">
<el-form-item label="Joox UUID">
<el-input type="text" placeholder="UUID" v-model="form.jooxUUID" clearable maxlength="32" show-word-limit>
</el-input>
<el-dialog @close="cancel()" title="解密设定" :rules="rules" :visible="show" custom-class="um-config-dialog" center>
<el-form ref="form" status-icon :model="form" label-width="0">
<section>
<label>
<span>
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: '',