feat(config): better config ui

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

(cherry picked from commit 8a323f9dbbd17515f53826023a565112acaed90b)
remotes/origin/HEAD
鲁树人 3 years ago
parent a69ed4f3ce
commit 290986e546

@ -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> <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>
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> </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> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button type="primary" :loading="saving" @click="emitConfirm()"> </el-button> <el-button type="primary" :loading="saving" @click="emitConfirm()"> </el-button>
@ -15,6 +63,20 @@
<script> <script>
import { storage } from '@/utils/storage'; 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 { export default {
components: {}, components: {},
props: { props: {
@ -22,6 +84,7 @@ export default {
}, },
data() { data() {
return { return {
rules,
saving: false, saving: false,
form: { form: {
jooxUUID: '', jooxUUID: '',

Loading…
Cancel
Save