feat：UI及切换后端为http
This commit is contained in:
Tianpao
@@ -1,8 +1,13 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { nextTick, ref, VNodeRef } from 'vue';
|
||||
import { InboxOutlined } from '@ant-design/icons-vue';
|
||||
import { message, StepsProps } from 'ant-design-vue';
|
||||
import type { UploadFile, UploadChangeParam } from 'ant-design-vue';
|
||||
import type { UploadFile, UploadChangeParam, Upload } from 'ant-design-vue';
|
||||
import * as shell from '@tauri-apps/plugin-shell';
|
||||
interface IWSM {
|
||||
status: "unzip"|"pending"|"changed",
|
||||
result: string
|
||||
}
|
||||
/* 进度显示区 */
|
||||
const disp_steps = ref(true);
|
||||
const setyps_current = ref(0);
|
||||
@@ -45,32 +50,66 @@ function handleUpload() {
|
||||
message.warning('请先拖拽或选择文件')
|
||||
return
|
||||
}
|
||||
let data: ArrayBuffer[] = [];
|
||||
FileList.value[0].originFileObj?.arrayBuffer().then(buffer => {data=[buffer];console.log(data);}) //获取文件内容
|
||||
console.log(data);
|
||||
if (!FileList.value[0].originFileObj){
|
||||
return;
|
||||
}
|
||||
runDeEarthX(FileList.value[0].originFileObj) //获取文件内容
|
||||
BtnisDisabled.value = true; //禁用按钮
|
||||
disp_steps.value = true; //开始显示进度条
|
||||
}
|
||||
|
||||
function runDeEarthX() {
|
||||
reactFL()
|
||||
}
|
||||
|
||||
function reactFL() {
|
||||
FileList.value = [];
|
||||
isDisabled.value = false;
|
||||
}
|
||||
runDeEarthX();
|
||||
/* 获取文件区 */
|
||||
shell.Command.create('core',['start']).spawn()
|
||||
function runDeEarthX(data: Blob) {
|
||||
console.log(data)
|
||||
const fd = new FormData();
|
||||
fd.append('file', data);
|
||||
console.log(fd.getAll('file'))
|
||||
fetch('http://localhost:37019/start',{
|
||||
method:'POST',
|
||||
body:fd
|
||||
}).then(async res=>res.json()).then(res=>{
|
||||
prews(res)
|
||||
})
|
||||
// shell.Command.create('core',['start',new BigUint64Array(data).toString()]).stdout.on('data',(data)=>{
|
||||
// console.log(data)
|
||||
// })
|
||||
reactFL()
|
||||
}
|
||||
|
||||
function prews(res: object){
|
||||
const ws = new WebSocket('ws://localhost:37019/')
|
||||
ws.addEventListener('message',(wsm)=>{
|
||||
const _data = JSON.parse(wsm.data) as IWSM
|
||||
if (_data.status === "changed") {
|
||||
setyps_current.value ++;
|
||||
}
|
||||
logs.value.push({message:_data.result})
|
||||
})
|
||||
}
|
||||
|
||||
/* 日志区 */
|
||||
const logs = ref<{message:string}[]>([]);
|
||||
//logs.value.push({message:"114514"})
|
||||
const logContainer = ref<HTMLDivElement>();
|
||||
nextTick(()=>{
|
||||
if(logContainer.value){
|
||||
logContainer.value.scrollTop = logContainer.value.scrollHeight;
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<div class="tw:h-full tw:w-full">
|
||||
<div class="tw:h-full tw:w-full tw:relative">
|
||||
<div class="tw:h-full tw:w-full tw:flex tw:flex-col tw:justify-center tw:items-center">
|
||||
<div>
|
||||
<h1 class="tw:text-4xl tw:text-center tw:animate-pulse">DeEarthX</h1>
|
||||
<h1 class="tw:text-sm tw:text-gray-500 tw:text-center">让开服变成随时随地的事情！</h1>
|
||||
</div>
|
||||
<a-upload-dragger :disabled="isDisabled" class="tw:w-128 tw:h-48" name="file" action="/" :multiple="false"
|
||||
<a-upload-dragger :disabled="isDisabled" class="tw:w-144 tw:h-48" name="file" action="/" :multiple="false"
|
||||
:before-upload="beforeUpload" @change="handleChange" @drop="handleDrop" v-model:fileList="FileList"
|
||||
accept=".zip,.mrpack">
|
||||
<p class="ant-upload-drag-icon">
|
||||
@@ -89,5 +128,11 @@ runDeEarthX();
|
||||
class="tw:fixed tw:bottom-2 tw:ml-4 tw:w-272 tw:h-16 tw:flex tw:justify-center tw:items-center tw:text-sm">
|
||||
<a-steps :current="setyps_current" :items="setps_items" />
|
||||
</div>
|
||||
<div v-if="disp_steps" ref="logContainer" class="tw:absolute tw:right-2 tw:bottom-20 tw:h-96 tw:w-56 tw:bg-gray-200 tw:rounded-xl tw:container tw:overflow-y-auto">
|
||||
<div v-for="log in logs" class="tw:mt-2 tw:last:mb-0">
|
||||
<span class="tw:text-blue-500">{{ log.message }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
@@ -1,9 +1,49 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import * as fs from "@tauri-apps/plugin-store"
|
||||
const config = ref({})
|
||||
import { ref, watch } from 'vue';
|
||||
import * as shell from '@tauri-apps/plugin-shell';
|
||||
import { message } from 'ant-design-vue';
|
||||
/* Config */
|
||||
interface IConfig {
|
||||
mirror: {
|
||||
bmclapi: boolean;
|
||||
mcimirror: boolean;
|
||||
};
|
||||
filter: {
|
||||
hashes: boolean;
|
||||
dexpub: boolean;
|
||||
mixins: boolean;
|
||||
};
|
||||
}
|
||||
const config = ref<IConfig>({mirror: {bmclapi: false, mcimirror: false}, filter: {hashes: false, dexpub: false, mixins: false}})
|
||||
fetch('http://localhost:37019/getconfig',{
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
}).then(res=>res.json()).then(res=>config.value = res)
|
||||
|
||||
const checked = ref(false);
|
||||
let first = true;
|
||||
watch(config,(newv)=>{ //写入Config
|
||||
if(!first){
|
||||
fetch('http://localhost:37019/writeconfig',{
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(newv)
|
||||
}).then(res=>{
|
||||
if(res.status === 200){
|
||||
message.success('配置已保存')
|
||||
}
|
||||
})
|
||||
// shell.Command.create('core',['writeconfig',JSON.stringify(newv)]).execute().then(()=>{
|
||||
// message.success('配置已保存')
|
||||
// })
|
||||
console.log(newv)
|
||||
return
|
||||
}
|
||||
first = false;
|
||||
},{deep:true})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -20,15 +60,15 @@ const checked = ref(false);
|
||||
<div class="tw:flex">
|
||||
<div class="tw:flex tw:ml-5 tw:mt-2">
|
||||
<p class="tw:text-gray-600">哈希过滤</p>
|
||||
<a-switch class="tw:left-2" v-model:checked="checked" />
|
||||
<a-switch class="tw:left-2" v-model:checked="config.filter.hashes" />
|
||||
</div>
|
||||
<div class="tw:flex tw:ml-5 tw:mt-2">
|
||||
<p class="tw:text-gray-600">DeP过滤</p>
|
||||
<a-switch class="tw:left-2" v-model:checked="checked" />
|
||||
<a-switch class="tw:left-2" v-model:checked="config.filter.dexpub" />
|
||||
</div>
|
||||
<div class="tw:flex tw:ml-5 tw:mt-2">
|
||||
<p class="tw:text-gray-600">Mixin过滤</p>
|
||||
<a-switch class="tw:left-2" v-model:checked="checked" />
|
||||
<a-switch class="tw:left-2" v-model:checked="config.filter.mixins" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- DeEarth设置 -->
|
||||
@@ -38,7 +78,7 @@ const checked = ref(false);
|
||||
<div class="tw:flex">
|
||||
<div class="tw:flex tw:ml-5 tw:mt-2">
|
||||
<p class="tw:text-gray-600">MCIM镜像源</p>
|
||||
<a-switch class="tw:left-2" v-model:checked="checked" />
|
||||
<a-switch class="tw:left-2" v-model:checked="config.mirror.mcimirror" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user