修改组件名称
This commit is contained in:
657
src/components/Tools/MinecraftUUIDConverter.vue
Normal file
657
src/components/Tools/MinecraftUUIDConverter.vue
Normal file
@@ -0,0 +1,657 @@
|
||||
<template>
|
||||
<div class="tool-page">
|
||||
|
||||
<div class="actions">
|
||||
<div class="title">操作</div>
|
||||
<div class="content">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
plain
|
||||
@click="generateRandomUUID()"
|
||||
>随机生成</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form">
|
||||
<div class="title">表单</div>
|
||||
<div class="content" @input="handleInputEv($event)">
|
||||
|
||||
<!-- 十六进制 -->
|
||||
<div class="content-row content-hex">
|
||||
<div class="inputs">
|
||||
<div class="input-label">Hexadecimal: </div>
|
||||
<div class="input-content">
|
||||
<span>"</span>
|
||||
<input
|
||||
ref="inputHex"
|
||||
v-model="form.hex"
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
data-input-type="hex"
|
||||
placeholder="00000000-0000-0000-0000-000000000000"
|
||||
spellcheck="false"
|
||||
:pattern="pattern.hex"
|
||||
required
|
||||
/>
|
||||
<span>"</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btns">
|
||||
<el-button
|
||||
type="success"
|
||||
size="mini"
|
||||
plain
|
||||
@click="copyToClipboard('hex')"
|
||||
>复制</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 高低位 -->
|
||||
<div class="content-row content-halves">
|
||||
<div class="inputs">
|
||||
<div class="input-label">UUID Most: </div>
|
||||
<div class="input-content">
|
||||
<input
|
||||
ref="inputMost"
|
||||
v-model="form.most"
|
||||
type="number"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
data-input-type="halves"
|
||||
inputmode="numeric"
|
||||
spellcheck="false"
|
||||
:pattern="pattern.number"
|
||||
required
|
||||
/>
|
||||
<span> L</span>
|
||||
</div>
|
||||
<div class="input-label">UUID Least: </div>
|
||||
<div class="input-content">
|
||||
<input
|
||||
ref="inputLeast"
|
||||
v-model="form.least"
|
||||
type="number"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
data-input-type="halves"
|
||||
inputmode="numeric"
|
||||
spellcheck="false"
|
||||
:pattern="pattern.number"
|
||||
required
|
||||
/>
|
||||
<span> L</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btns">
|
||||
<el-button
|
||||
type="success"
|
||||
size="mini"
|
||||
plain
|
||||
@click="copyToClipboard('halves')"
|
||||
>复制</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 整型数组 -->
|
||||
<div class="content-row content-array">
|
||||
<div class="inputs" @paste="handlePasteArray($event)">
|
||||
<div class="input-label">UUID: </div>
|
||||
<div class="input-content">
|
||||
<span>[I; </span>
|
||||
<input
|
||||
ref="inputArray1"
|
||||
v-model="form.array['1']"
|
||||
type="number"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
data-input-type="array"
|
||||
inputmode="numeric"
|
||||
spellcheck="false"
|
||||
:pattern="pattern.number"
|
||||
required
|
||||
/>
|
||||
<span>, </span>
|
||||
<input
|
||||
ref="inputArray2"
|
||||
v-model="form.array['2']"
|
||||
type="number"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
data-input-type="array"
|
||||
inputmode="numeric"
|
||||
spellcheck="false"
|
||||
:pattern="pattern.number"
|
||||
required
|
||||
/>
|
||||
<span>, </span>
|
||||
<input
|
||||
ref="inputArray3"
|
||||
v-model="form.array['3']"
|
||||
type="number"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
data-input-type="array"
|
||||
inputmode="numeric"
|
||||
spellcheck="false"
|
||||
:pattern="pattern.number"
|
||||
required
|
||||
/>
|
||||
<span>, </span>
|
||||
<input
|
||||
ref="inputArray4"
|
||||
v-model="form.array['4']"
|
||||
type="number"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
data-input-type="array"
|
||||
inputmode="numeric"
|
||||
spellcheck="false"
|
||||
:pattern="pattern.number"
|
||||
required
|
||||
/>
|
||||
<span>]</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btns">
|
||||
<el-button
|
||||
type="success"
|
||||
size="mini"
|
||||
plain
|
||||
@click="copyToClipboard('array')"
|
||||
>复制</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<div class="title">说明</div>
|
||||
<div class="content">
|
||||
<p>可以在“UUID”的输入框中直接粘贴多组数值</p>
|
||||
<p>例如：<code>1629527812, 47203901, -2056695293, 349258036</code></p>
|
||||
<p>
|
||||
<span>资料参考：</span>
|
||||
<el-link
|
||||
type="primary"
|
||||
href="https://minecraft.fandom.com/zh/wiki/通用唯一识别码"
|
||||
target="_blank"
|
||||
>通用唯一识别码</el-link>
|
||||
</p>
|
||||
<p>
|
||||
<span>算法参考：</span>
|
||||
<el-link
|
||||
type="primary"
|
||||
href="https://github.com/AjaxGb/mc-uuid-converter"
|
||||
target="_blank"
|
||||
>AjaxGb / mc-uuid-converter</el-link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用于复制文本 -->
|
||||
<textarea
|
||||
ref="copyArea"
|
||||
v-model="copyText"
|
||||
class="text-copy"
|
||||
tabindex="-1"
|
||||
readonly
|
||||
></textarea>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'UUIDConverter',
|
||||
data() {
|
||||
return {
|
||||
// 兼容性
|
||||
isSupported: false,
|
||||
// 输入框内容
|
||||
form: {
|
||||
hex: '00000000-0000-0000-0000-000000000000',
|
||||
most: 0,
|
||||
least: 0,
|
||||
array: { '1': 0, '2': 0, '3': 0, '4': 0 },
|
||||
},
|
||||
// 输入框正则
|
||||
pattern: {
|
||||
hex: '',
|
||||
number: '',
|
||||
},
|
||||
|
||||
// 被复制的文本
|
||||
copyText: '',
|
||||
|
||||
/** @type {Uint8Array} */
|
||||
uuidBytes: null,
|
||||
/** @type {DataView} */
|
||||
uuid: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.detectFn();
|
||||
this.initDatas();
|
||||
},
|
||||
methods: {
|
||||
|
||||
/** 检测功能兼容性 */
|
||||
detectFn() {
|
||||
|
||||
const fnTypes = [
|
||||
typeof window.BigInt,
|
||||
typeof window.crypto,
|
||||
typeof DataView,
|
||||
typeof Uint8Array,
|
||||
];
|
||||
|
||||
if (fnTypes.indexOf('undefined') > -1) {
|
||||
this.$message({
|
||||
duration: 5000,
|
||||
message: 'The browser does not support the required function.',
|
||||
type: 'error',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!('setBigUint64' in DataView.prototype)) {
|
||||
this.$message({
|
||||
duration: 5000,
|
||||
message: 'The browser does not support writing and reading 64-bit integers.',
|
||||
type: 'error',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
this.isSupported = true;
|
||||
|
||||
},
|
||||
|
||||
/** 初始化数据 */
|
||||
initDatas() {
|
||||
if (!this.isSupported) {
|
||||
return;
|
||||
}
|
||||
|
||||
const uuidBytes = new Uint8Array(16);
|
||||
const uuid = new DataView(uuidBytes.buffer);
|
||||
|
||||
this.uuidBytes = uuidBytes;
|
||||
this.uuid = uuid;
|
||||
|
||||
this.pattern.hex = '([0-9a-fA-F]{1,8}-[0-9a-fA-F]{1,4}-[0-9a-fA-F]{1,4}-[0-9a-fA-F]{1,4}-[0-9a-fA-F]{1,12}|[0-9a-fA-F]{1,32})';
|
||||
this.pattern.number = '[-+]?\\d+';
|
||||
},
|
||||
|
||||
/**
|
||||
* 复制结果到剪贴板
|
||||
*
|
||||
* @param {string} type 类型
|
||||
*/
|
||||
copyToClipboard(type) {
|
||||
/** @type {HTMLInputElement} */
|
||||
const el = this.$refs['copyArea'];
|
||||
const form = this.form;
|
||||
|
||||
if (!el) {
|
||||
return;
|
||||
}
|
||||
|
||||
switch (type) {
|
||||
case 'array':
|
||||
this.copyText = `[I; ${Object.values(form.array).join(', ')}]`;
|
||||
break;
|
||||
case 'halves':
|
||||
this.copyText = `UUID Most: ${form.most}L, UUID Least: ${form.least}L`;
|
||||
break;
|
||||
case 'hex':
|
||||
this.copyText = form.hex;
|
||||
break;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
el.focus();
|
||||
el.select();
|
||||
document.execCommand('copy');
|
||||
});
|
||||
},
|
||||
|
||||
/** 随机生成 UUID */
|
||||
generateRandomUUID() {
|
||||
window.crypto.getRandomValues(this.uuidBytes);
|
||||
// Set version to 4 (random)
|
||||
this.uuidBytes[6] = (this.uuidBytes[6] & 0x0f) | (4 << 4);
|
||||
// Set variant to 1 (Leach–Salz)
|
||||
this.uuidBytes[8] = (this.uuidBytes[8] & 0x3f) | 0x80;
|
||||
// 更新
|
||||
this.updateFormDatas();
|
||||
},
|
||||
|
||||
/**
|
||||
* 处理输入事件
|
||||
*
|
||||
* @param {InputEvent} ev 输入事件对象
|
||||
*/
|
||||
handleInputEv(ev) {
|
||||
/** @type {HTMLInputElement} */
|
||||
const el = ev.target;
|
||||
const type = el.dataset.inputType;
|
||||
|
||||
type && this.updateFormDatas(type);
|
||||
},
|
||||
|
||||
/**
|
||||
* 处理粘贴数组事件
|
||||
*
|
||||
* @param {ClipboardEvent} ev 剪贴板事件对象
|
||||
*/
|
||||
handlePasteArray(ev) {
|
||||
|
||||
/** @type {HTMLInputElement} */
|
||||
const el = ev.target;
|
||||
const type = el.dataset.inputType;
|
||||
|
||||
if (type !== 'array') {
|
||||
return;
|
||||
}
|
||||
|
||||
const data = ev.clipboardData;
|
||||
const values = this.form.array;
|
||||
|
||||
if (!data) {
|
||||
return;
|
||||
}
|
||||
|
||||
for (const item of data.items) {
|
||||
// 纯文本
|
||||
if (item.kind === 'string' && item.type.startsWith('text/plain')) {
|
||||
// 读取
|
||||
item.getAsString((text) => {
|
||||
const length = 4;
|
||||
const numbers = text.match(/[+-]?\d+/g);
|
||||
|
||||
if (numbers && numbers.length === length) {
|
||||
for (let i = 0; i < length; i++) {
|
||||
values[String(i + 1)] = parseInt(numbers[i]);
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.updateFormDatas(type);
|
||||
});
|
||||
}
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 处理整型数组 UUID
|
||||
*
|
||||
* @param {string} mode 模式（parse、unparse）
|
||||
*/
|
||||
handleArray(mode) {
|
||||
|
||||
/** @type {HTMLInputElement[]} */
|
||||
const inputs = [];
|
||||
|
||||
// 获取元素
|
||||
for (let i = 1; i <= 4; i++) {
|
||||
const el = this.$refs[`inputArray${i}`];
|
||||
inputs.push(el);
|
||||
}
|
||||
|
||||
// 元素不存在
|
||||
if (inputs.indexOf(undefined) > -1) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { form, uuid } = this;
|
||||
|
||||
if (mode === 'parse') {
|
||||
for (let i = 0; i < inputs.length; i++) {
|
||||
const num = Number(form.array[String(i + 1)]);
|
||||
const offset = i * 4;
|
||||
|
||||
if (inputs[i].validity.valid) {
|
||||
uuid.setInt32(offset, num, false);
|
||||
}
|
||||
}
|
||||
} else if (mode === 'unparse') {
|
||||
for (let i = 0; i < inputs.length; i++) {
|
||||
const prop = String(i + 1);
|
||||
const result = uuid.getInt32(i * 4, false);
|
||||
|
||||
form.array[prop] = result;
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 处理高低位 UUID
|
||||
*
|
||||
* @param {string} mode 模式（parse、unparse）
|
||||
*/
|
||||
handleHalves(mode) {
|
||||
|
||||
/** @type {HTMLInputElement} */
|
||||
const elMost = this.$refs['inputMost'];
|
||||
|
||||
/** @type {HTMLInputElement} */
|
||||
const elLeast = this.$refs['inputLeast'];
|
||||
|
||||
// 元素不存在
|
||||
if (!(elMost && elLeast)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { form, uuid } = this;
|
||||
|
||||
if (mode === 'parse') {
|
||||
if (elMost.validity.valid) {
|
||||
uuid.setBigInt64(0, window.BigInt(form.most), false);
|
||||
}
|
||||
if (elLeast.validity.valid) {
|
||||
uuid.setBigInt64(8, window.BigInt(form.least), false);
|
||||
}
|
||||
} else if (mode === 'unparse') {
|
||||
form.most = uuid.getBigInt64(0, false);
|
||||
form.least = uuid.getBigInt64(8, false);
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 处理十六进制 UUID
|
||||
*
|
||||
* @param {string} mode 模式（parse、unparse）
|
||||
*/
|
||||
handleHex(mode) {
|
||||
|
||||
/** @type {HTMLInputElement} */
|
||||
const el = this.$refs['inputHex'];
|
||||
|
||||
// 元素不存在
|
||||
if (!el) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { form, uuid } = this;
|
||||
const groupSizes = [8, 4, 4, 4, 12];
|
||||
|
||||
if (mode === 'parse') {
|
||||
if (!el.validity.valid) {
|
||||
return;
|
||||
}
|
||||
|
||||
const hex = form.hex;
|
||||
const hexText = (
|
||||
hex.includes('-') ?
|
||||
hex.trim()
|
||||
.split('-')
|
||||
.map((g, i) => g.padStart(groupSizes[i], '0'))
|
||||
.join('') :
|
||||
hex.trim().padStart(32, '0')
|
||||
);
|
||||
|
||||
uuid.setBigUint64(0, window.BigInt('0x' + hexText.substring(0, 16)), false);
|
||||
uuid.setBigUint64(8, window.BigInt('0x' + hexText.substring(16)), false);
|
||||
} else if (mode === 'unparse') {
|
||||
const hexText = (
|
||||
uuid.getBigUint64(0, false).toString(16).padStart(16, '0') +
|
||||
uuid.getBigUint64(8, false).toString(16).padStart(16, '0')
|
||||
);
|
||||
const groups = [];
|
||||
|
||||
let groupStart = 0;
|
||||
|
||||
for (const groupSize of groupSizes) {
|
||||
groups.push(hexText.substring(groupStart, groupStart + groupSize));
|
||||
groupStart += groupSize;
|
||||
}
|
||||
|
||||
form.hex = groups.join('-');
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 更新表单数据
|
||||
*
|
||||
* @param {string} type 类型
|
||||
*/
|
||||
updateFormDatas(type) {
|
||||
|
||||
const handlers = {
|
||||
array: this.handleArray,
|
||||
halves: this.handleHalves,
|
||||
hex: this.handleHex,
|
||||
};
|
||||
const handler = handlers[type];
|
||||
|
||||
// 调用对应的处理函数
|
||||
handler && handler('parse');
|
||||
|
||||
for (let key in handlers) {
|
||||
if (key !== type) {
|
||||
handlers[key]('unparse');
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
input[type="number"],
|
||||
input[type="text"] {
|
||||
padding: 0.25rem 0.5rem;
|
||||
border: 0.0625rem solid #CCC;
|
||||
border-radius: 0.25rem;
|
||||
outline: none;
|
||||
font-family: monospace;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.5em;
|
||||
text-align: right;
|
||||
|
||||
&:invalid {
|
||||
background-color: #9E9E9E;
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
&::-webkit-inner-spin-button,
|
||||
&::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
}
|
||||
|
||||
.form {
|
||||
font-family: monospace;
|
||||
|
||||
.content {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.content-row {
|
||||
min-width: 37.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.content-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1em 0;
|
||||
font-size: 0.8rem;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 0.0625rem solid #EEE;
|
||||
}
|
||||
|
||||
.inputs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
padding: 0.25em 0;
|
||||
}
|
||||
|
||||
.input-label {
|
||||
flex-shrink: 0;
|
||||
padding-right: 0.5em;
|
||||
width: 7em;
|
||||
font-weight: bold;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.input-content {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.btns {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.content-hex {
|
||||
input[type="text"] {
|
||||
width: 32.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.content-halves {
|
||||
input[type="number"] {
|
||||
width: 12.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.content-array {
|
||||
input[type="number"] {
|
||||
width: 7em;
|
||||
}
|
||||
}
|
||||
|
||||
.text-copy {
|
||||
width: 2rem;
|
||||
height: 1rem;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
cursor: default;
|
||||
resize: none;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user