feat：UI及部分后端
This commit is contained in:
Tianpao
@@ -1,160 +1,60 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
|
||||
const greetMsg = ref("");
|
||||
const name = ref("");
|
||||
|
||||
async function greet() {
|
||||
// Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
|
||||
greetMsg.value = await invoke("greet", { name: name.value });
|
||||
<script lang="ts" setup>
|
||||
import { h, ref } from 'vue';
|
||||
import { MenuProps } from 'ant-design-vue';
|
||||
import { SettingOutlined, UserOutlined, WindowsOutlined } from '@ant-design/icons-vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
const router = useRouter();
|
||||
const selectedKeys = ref(['main']);
|
||||
const items: MenuProps['items'] = [
|
||||
{
|
||||
key: 'main',
|
||||
icon: h(WindowsOutlined),
|
||||
label: '主页',
|
||||
title: '主页',
|
||||
},
|
||||
{
|
||||
key: 'setting',
|
||||
icon: h(SettingOutlined),
|
||||
label: '设置',
|
||||
title: '设置',
|
||||
},
|
||||
{
|
||||
key: 'about',
|
||||
icon: h(UserOutlined),
|
||||
label: '关于',
|
||||
title: '关于',
|
||||
}
|
||||
]
|
||||
const handleClick: MenuProps['onClick'] = (e) => {
|
||||
switch (e.key) {
|
||||
case 'main':
|
||||
selectedKeys.value[0] = 'main';
|
||||
router.push('/');
|
||||
break;
|
||||
case 'setting':
|
||||
selectedKeys.value[0] = 'setting';
|
||||
router.push('/setting');
|
||||
break;
|
||||
case 'about':
|
||||
selectedKeys.value[0] = 'about';
|
||||
router.push('/about');
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="container">
|
||||
<h1>Welcome to Tauri + Vue</h1>
|
||||
|
||||
<div class="row">
|
||||
<a href="https://vite.dev" target="_blank">
|
||||
<img src="/vite.svg" class="logo vite" alt="Vite logo" />
|
||||
</a>
|
||||
<a href="https://tauri.app" target="_blank">
|
||||
<img src="/tauri.svg" class="logo tauri" alt="Tauri logo" />
|
||||
</a>
|
||||
<a href="https://vuejs.org/" target="_blank">
|
||||
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
|
||||
</a>
|
||||
<div class="tw:h-screen tw:w-screen">
|
||||
<a-page-header class="tw:fixed tw:h-16" style="border: 1px solid rgb(235, 237, 240)" title="DeEarthX"
|
||||
sub-title="V3" />
|
||||
<div class="tw:flex tw:full tw:h-89/100">
|
||||
<a-menu id="menu" style="width: 144px;" :selectedKeys="selectedKeys" mode="inline" :items="items" @click="handleClick"/>
|
||||
<RouterView />
|
||||
</div>
|
||||
</div>
|
||||
<p>Click on the Tauri, Vite, and Vue logos to learn more.</p>
|
||||
|
||||
<form class="row" @submit.prevent="greet">
|
||||
<input id="greet-input" v-model="name" placeholder="Enter a name..." />
|
||||
<button type="submit">Greet</button>
|
||||
</form>
|
||||
<p>{{ greetMsg }}</p>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.logo.vite:hover {
|
||||
filter: drop-shadow(0 0 2em #747bff);
|
||||
}
|
||||
|
||||
.logo.vue:hover {
|
||||
filter: drop-shadow(0 0 2em #249b73);
|
||||
}
|
||||
|
||||
</style>
|
||||
<style>
|
||||
:root {
|
||||
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
|
||||
color: #0f0f0f;
|
||||
background-color: #f6f6f6;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0;
|
||||
padding-top: 10vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: 0.75s;
|
||||
}
|
||||
|
||||
.logo.tauri:hover {
|
||||
filter: drop-shadow(0 0 2em #24c8db);
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
color: #0f0f0f;
|
||||
background-color: #ffffff;
|
||||
transition: border-color 0.25s;
|
||||
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
border-color: #396cd8;
|
||||
}
|
||||
button:active {
|
||||
border-color: #396cd8;
|
||||
background-color: #e8e8e8;
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#greet-input {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
color: #f6f6f6;
|
||||
background-color: #2f2f2f;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #24c8db;
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
color: #ffffff;
|
||||
background-color: #0f0f0f98;
|
||||
}
|
||||
button:active {
|
||||
background-color: #0f0f0f69;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<style scoped></style>
|
||||
160
front/src/App.vuex111
Normal file
160
front/src/App.vuex111
Normal file
@@ -0,0 +1,160 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
|
||||
const greetMsg = ref("");
|
||||
const name = ref("");
|
||||
|
||||
async function greet() {
|
||||
// Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
|
||||
greetMsg.value = await invoke("greet", { name: name.value });
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="container">
|
||||
<h1>Welcome to Tauri + Vue</h1>
|
||||
|
||||
<div class="row">
|
||||
<a href="https://vite.dev" target="_blank">
|
||||
<img src="/vite.svg" class="logo vite" alt="Vite logo" />
|
||||
</a>
|
||||
<a href="https://tauri.app" target="_blank">
|
||||
<img src="/tauri.svg" class="logo tauri" alt="Tauri logo" />
|
||||
</a>
|
||||
<a href="https://vuejs.org/" target="_blank">
|
||||
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
|
||||
</a>
|
||||
</div>
|
||||
<p>Click on the Tauri, Vite, and Vue logos to learn more.</p>
|
||||
|
||||
<form class="row" @submit.prevent="greet">
|
||||
<input id="greet-input" v-model="name" placeholder="Enter a name..." />
|
||||
<button type="submit">Greet</button>
|
||||
</form>
|
||||
<p>{{ greetMsg }}</p>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.logo.vite:hover {
|
||||
filter: drop-shadow(0 0 2em #747bff);
|
||||
}
|
||||
|
||||
.logo.vue:hover {
|
||||
filter: drop-shadow(0 0 2em #249b73);
|
||||
}
|
||||
|
||||
</style>
|
||||
<style>
|
||||
:root {
|
||||
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
|
||||
color: #0f0f0f;
|
||||
background-color: #f6f6f6;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0;
|
||||
padding-top: 10vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: 0.75s;
|
||||
}
|
||||
|
||||
.logo.tauri:hover {
|
||||
filter: drop-shadow(0 0 2em #24c8db);
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
color: #0f0f0f;
|
||||
background-color: #ffffff;
|
||||
transition: border-color 0.25s;
|
||||
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
border-color: #396cd8;
|
||||
}
|
||||
button:active {
|
||||
border-color: #396cd8;
|
||||
background-color: #e8e8e8;
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#greet-input {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
color: #f6f6f6;
|
||||
background-color: #2f2f2f;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #24c8db;
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
color: #ffffff;
|
||||
background-color: #0f0f0f98;
|
||||
}
|
||||
button:active {
|
||||
background-color: #0f0f0f69;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
1
front/src/assets/elfidc.svg
Normal file
1
front/src/assets/elfidc.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 30 KiB |
26
front/src/component/About.vue
Normal file
26
front/src/component/About.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<script lang="ts" setup>
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
async function contant(idc:string){
|
||||
let url:string = "";
|
||||
switch (idc){
|
||||
case "elfidc":
|
||||
url = "https://www.elfidc.com";
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
await invoke("open_url",{url})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="tw:h-full tw:w-full">
|
||||
<div class="w-full h-64"> <!-- 广告位 -->
|
||||
<h1 class="tw:text-2xl tw:text-center tw:bg-gradient-to-r tw:from-emerald-500 tw:to-cyan-500 tw:bg-clip-text tw:text-transparent">赞助商广告位</h1>
|
||||
<div class="tw:flex tw:flex-col tw:w-30 tw:h-30 tw:ml-5 tw:mt-2" @click="contant('elfidc')"> <!-- 亿讯云 -->
|
||||
<img class="tw:w-24 tw:h-24" src="../assets/elfidc.svg"></img>
|
||||
<h1 class="tw:text-sm tw:text-center tw:text-yellow-400">亿讯云（金牌赞助）</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
93
front/src/component/Main.vue
Normal file
93
front/src/component/Main.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { InboxOutlined } from '@ant-design/icons-vue';
|
||||
import { message, StepsProps } from 'ant-design-vue';
|
||||
import type { UploadFile, UploadChangeParam } from 'ant-design-vue';
|
||||
/* 进度显示区 */
|
||||
const disp_steps = ref(true);
|
||||
const setyps_current = ref(0);
|
||||
const setps_items: StepsProps['items'] = [{
|
||||
title: '解压整合包',
|
||||
description: '解压内容 下载文件'
|
||||
}, {
|
||||
title: '筛选模组',
|
||||
description: 'DeEarthX的心脏'
|
||||
}, {
|
||||
title: '下载服务端',
|
||||
description: '安装模组加载器服务端'
|
||||
}, {
|
||||
title: '完成',
|
||||
description: '一切就绪！'
|
||||
}]
|
||||
|
||||
/* 进度显示区 */
|
||||
|
||||
/* 获取文件区 */
|
||||
const FileList = ref<UploadFile[]>([]);
|
||||
const isDisabled = ref(false);
|
||||
const BtnisDisabled = ref(false);
|
||||
function beforeUpload() {
|
||||
return false;
|
||||
}
|
||||
|
||||
function handleChange(info: UploadChangeParam) {
|
||||
if (!info.file.name?.endsWith('.zip') && !info.file.name?.endsWith('.mrpack')) {
|
||||
message.error('只能上传.zip和.mrpack文件');
|
||||
return;
|
||||
}
|
||||
isDisabled.value = true; //禁用
|
||||
}
|
||||
function handleDrop(e: DragEvent) {
|
||||
console.log(e);
|
||||
}
|
||||
function handleUpload() {
|
||||
if (FileList.value.length === 0) {
|
||||
message.warning('请先拖拽或选择文件')
|
||||
return
|
||||
}
|
||||
let data: ArrayBuffer[] = [];
|
||||
FileList.value[0].originFileObj?.arrayBuffer().then(buffer => {data=[buffer];console.log(data);}) //获取文件内容
|
||||
console.log(data);
|
||||
BtnisDisabled.value = true; //禁用按钮
|
||||
disp_steps.value = true; //开始显示进度条
|
||||
}
|
||||
|
||||
function runDeEarthX() {
|
||||
reactFL()
|
||||
}
|
||||
|
||||
function reactFL() {
|
||||
FileList.value = [];
|
||||
isDisabled.value = false;
|
||||
}
|
||||
runDeEarthX();
|
||||
/* 获取文件区 */
|
||||
</script>
|
||||
<template>
|
||||
<div class="tw:h-full tw:w-full">
|
||||
<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"
|
||||
:before-upload="beforeUpload" @change="handleChange" @drop="handleDrop" v-model:fileList="FileList"
|
||||
accept=".zip,.mrpack">
|
||||
<p class="ant-upload-drag-icon">
|
||||
<inbox-outlined></inbox-outlined>
|
||||
</p>
|
||||
<p class="ant-upload-text">拖拽或点击以上传文件</p>
|
||||
<p class="ant-upload-hint">
|
||||
请使用.zip（CurseForge、MCBBS）和.mrpck（Modrinth）文件
|
||||
</p>
|
||||
</a-upload-dragger>
|
||||
<a-button :disabled="BtnisDisabled" type="primary" @click="handleUpload" style="margin-top: 32px">
|
||||
开始
|
||||
</a-button>
|
||||
</div>
|
||||
<div v-if="disp_steps"
|
||||
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>
|
||||
</template>
|
||||
45
front/src/component/Setting.vue
Normal file
45
front/src/component/Setting.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import * as fs from "@tauri-apps/plugin-store"
|
||||
const config = ref({})
|
||||
|
||||
const checked = ref(false);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="tw:h-full tw:w-full">
|
||||
<h1 class="tw:text-3xl tw:font-black tw:tracking-tight tw:text-center">
|
||||
<span class="tw:bg-gradient-to-r tw:from-emerald-500 tw:to-cyan-500 tw:bg-clip-text tw:text-transparent">
|
||||
DeEarth X
|
||||
</span>
|
||||
<span>设置</span>
|
||||
</h1>
|
||||
<div class="tw:border-t-2 tw:border-gray-400 tw:mt-6 tw:mb-2"></div>
|
||||
<!-- DeEarth设置 -->
|
||||
<h1 class="tw:text-xl tw:font-black tw:tracking-tight tw:text-center">模组筛选设置</h1>
|
||||
<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" />
|
||||
</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" />
|
||||
</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" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- DeEarth设置 -->
|
||||
<div class="tw:border-t-2 tw:border-gray-400 tw:mt-6 tw:mb-2"></div>
|
||||
<!-- 下载源设置 -->
|
||||
<h1 class="tw:text-xl tw:font-black tw:tracking-tight tw:text-center">下载源设置</h1>
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,4 +1,14 @@
|
||||
import { createApp } from "vue";
|
||||
import App from "./App.vue";
|
||||
import "./tailwind.css"
|
||||
import Antd from 'ant-design-vue';
|
||||
import 'ant-design-vue/dist/reset.css';
|
||||
import router from "./router";
|
||||
|
||||
createApp(App).mount("#app");
|
||||
|
||||
|
||||
const app = createApp(App);
|
||||
|
||||
app.use(router)
|
||||
app.use(Antd)
|
||||
app.mount("#app");
|
||||
|
||||
24
front/src/router/index.ts
Normal file
24
front/src/router/index.ts
Normal file
@@ -0,0 +1,24 @@
|
||||
import { createRouter, createWebHistory } from "vue-router";
|
||||
|
||||
import Main from "../component/Main.vue";
|
||||
import Setting from "../component/Setting.vue";
|
||||
import About from "../component/About.vue";
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes: [
|
||||
{
|
||||
path: "/",
|
||||
component: Main,
|
||||
},
|
||||
{
|
||||
path: "/setting",
|
||||
component: Setting
|
||||
},{
|
||||
path: "/about",
|
||||
component: About
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
export default router
|
||||
1
front/src/tailwind.css
Normal file
1
front/src/tailwind.css
Normal file
@@ -0,0 +1 @@
|
||||
@import "tailwindcss" prefix(tw);
|
||||
Reference in New Issue
Block a user