feat(config): better config ui
- JOOX Music UUID label + description - Not full screen anymore (cherry picked from commit 8a323f9dbbd17515f53826023a565112acaed90b)
This commit is contained in:
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>
|
||||||
</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>
|
</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…
Reference in New Issue
Block a user