cast1e/wallitor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

addpage complete

Browse Source
This commit is contained in:
cast1e
2024-10-13 15:35:18 +08:00
parent cd10769d5d
commit c9df5b2317
14 changed files with 976 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
wallitor-gui/src/components/AddItem.vue
+156 -4
View File
@@ -16,8 +16,40 @@
<div>添加</div>
</div>
</header>
<main>
<main class="item-add-main">
<table class="item-add-form">
<tr>
<td class="item-add-form-title">标题</td>
<td><input type="text" v-model="addInfo.name" /></td>
</tr>
<tr>
<td class="item-add-form-title">文件</td>
<td>
<template v-if="image_src">
<img :src="image_src" class="item-add-image">
</template>
<template v-else>
<div class="item-add-preview" @click="selectPreview">
<div class="item-add-preview-text">
<SvgIcon name="add" size="20px"></SvgIcon>点击添加封面
</div>
</div>
</template>
<div class="colbox">
<button class="apply-button" @click="selectMedia">选择</button>
<div>{{ addInfo.media }}</div>
</div>
</td>
</tr>
<tr>
<td class="item-add-form-title">描述</td>
<td><textarea class="item-add-description" v-model="addInfo.description"></textarea></td>
</tr>
<tr>
<td></td>
<td><button class="apply-button" @click="handleFileOpen">添加</button></td>
</tr>
</table>
</main>
</div>
</div>
@@ -26,9 +58,61 @@
<script setup lang="ts">
import { defineExpose, defineModel, ref } from 'vue';
import SvgIcon from './SvgIcon.vue';
import { open } from '@tauri-apps/plugin-dialog';
import { invoke } from '@tauri-apps/api/core';
const visible = defineModel<boolean>();
const bg = ref<HTMLDivElement | null>(null);
interface AddInfo {
name: string,
preview: string,
media: string,
description: string
}
const addInfo = ref<AddInfo>({
name: "",
preview: "",
media: "",
description: ""
})
const image_src = ref("");
const support_ext = [".mp4", ".mkv", ".flv", ".ts"];
defineExpose({ open })
async function handleFileOpen() {
const file = await open({
multiple: false,
directory: false,
});
return file;
}
function selectMedia() {
handleFileOpen().then((file) => {
if (file) {
let ext = file.substring(file.lastIndexOf("."));
if (support_ext.includes(ext)) {
addInfo.value.media = file;
}
}
})
}
function selectPreview() {
handleFileOpen().then((file) => {
if (file) {
addInfo.value.preview = file;
invoke("get_file", {
path: file
}).then((res) => {
let binary_data_arr = new Uint8Array(res as number[]);
const blob = new Blob([binary_data_arr], { type: 'image/jpeg' });
const imageUrl = URL.createObjectURL(blob);
image_src.value = imageUrl;
})
}
})
}
</script>
<style>
@@ -54,9 +138,19 @@ defineExpose({ open })
.item-add-content {
padding: 10px;
height: calc(100% - 20px);
overflow: hidden;
}
.item-add-main {
margin: 5px;
height: calc(100% - 45px);
overflow: auto;
}
.item-add-main::-webkit-scrollbar {
display: none;
}
.item-add-header-icon {
width: 40px;
height: 40px;
@@ -79,8 +173,66 @@ defineExpose({ open })
}
.item-add-header-title {
font-size: 20px;
font-weight: 500;
font-size: 22px;
font-weight: 600;
margin-left: 10px;
}
.item-add-main {
color: var(--text-color);
}
.item-add-preview {
background: linear-gradient(135deg, #0000000A 0%, #FFFFFF0A 100%);
border-radius: 5px;
width: 400px;
height: 200px;
margin-bottom: 10px;
box-shadow: var(--shadow-edge-glow);
position: relative;
cursor: pointer;
transition: .5s;
}
.item-add-preview:hover {
background: var(--bg-color-alpha-darker);
}
.item-add-preview:active {
transform: scale(0.95);
}
.item-add-image {
background: linear-gradient(135deg, transparent 0%, #FFFFFF10 100%);
border-radius: 5px;
width: 400px;
margin-bottom: 10px;
box-shadow: var(--shadow-edge-glow);
}
.item-add-form {
margin-top: 5px;
}
.item-add-form td {
vertical-align: top;
padding: 5px;
}
.item-add-description {
width: 300px;
height: 150px;
}
.item-add-form-title {
font-size: 15px;
font-weight: 600;
}
.item-add-preview-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
wallitor-gui/src/components/ApplyBar.vue
+1 -23
View File
@@ -42,7 +42,7 @@
</div>
</div>
</div>
<button class="apply-bar-button">应用</button>
<button class="apply-button">应用</button>
</div>
<div class="apply-bar-close" @click="handleClose">
<svg-icon name="close" color="var(--text-color)"></svg-icon>
@@ -226,26 +226,4 @@ function open(conFig: Cell) {
font-size: 15px;
font-weight: 500;
}
.apply-bar-button {
align-self: flex-end;
outline: none;
border: solid 1px var(--bd-color);
border-radius: 2px;
width: 75px;
height: 30px;
background-color: var(--bg-color-alpha-darker);
color: var(--text-color);
cursor: pointer;
transition: .3s;
}
.apply-bar-button:hover {
background-color: var(--bg-color-alter);
}
.apply-bar-button:active {
background-color: var(--bg-color-solid);
transform: scale(0.95);
}
</style>
wallitor-gui/src/components/TitleBar.vue
-1
View File
@@ -73,7 +73,6 @@ const props = defineProps({
})
function minimize() {
console.log(111)
appWindow.minimize()
}
wallitor-gui/src/style/global.css
+131 -56
View File
@@ -1,67 +1,142 @@
.colbox{
display: flex;
flex-direction: row;
.colbox {
display: flex;
flex-direction: row;
}
.rowbox{
display: flex;
flex-direction: column;
.rowbox {
display: flex;
flex-direction: column;
}
html {
--text-shadow-color: #b3b3b3ae;
--bg-color-solid: #fcfcfc;
--bg-color-alter: #ffffff;
--bg-color: #ffffffae;
--text-color: #1c1c1c;
--bd-color: #bbbbbbce;
--login-button-bg: #9acdff;
--login-button-bd: #c8c8c8;
--login-button-hover: #7db7f0;
--branch-viewing-color: rgb(122, 212, 215);
--branch-viewing-hover-color: rgb(102, 177, 180);
--delete-box-left-border: #f56c6c;
--delete-box-bg: #f56c6c42;
--delete-box-title: #511f1f;
--delete-box-text: black;
--text-shadow-color: #b3b3b3ae;
--bg-color-solid: #fcfcfc;
--bg-color-alter: #ffffff;
--bg-color: #ffffffae;
--text-color: #1c1c1c;
--bd-color: #bbbbbbce;
--text-active: #7cbeff;
--login-button-bg: #9acdff;
--login-button-bd: #c8c8c8;
--login-button-hover: #7db7f0;
--branch-viewing-color: rgb(122, 212, 215);
--branch-viewing-hover-color: rgb(102, 177, 180);
--delete-box-left-border: #f56c6c;
--delete-box-bg: #f56c6c42;
--delete-box-title: #511f1f;
--delete-box-text: black;
}
html.dark {
--text-shadow-color: #686868af;
--bg-color-solid: #191919;
--bg-color-alter: #2d2d2d;
--bg-color: #2a2a2ace;
--text-color: #c0c0c0;
--bd-color: #7f7f7f7c;
--titlebar-height: 40px;
--shadow-edge-glow: inset 1px 1px 1px -.5px rgba(255, 255, 255, .12), inset -1px -1px 1px -.5px rgba(255, 255, 255, .04), inset 0 0 4px rgba(255, 255, 255, .06);
--shadow: 0 10px 15px -3px rgb(0 0 0 / .2), 0 4px 6px -4px rgb(0 0 0 / .16);
--bg-color-alpha: hsl(230 12% 14% / .68);
--bg-color-alpha-darker: hsl(230 12% 14% / .93);
--bg-hover-fill: rgb(131 131 145 / 24%);
--bg-hover-fill-close: rgba(211, 86, 86, 0.579);
--text-shadow-color: #686868af;
--bg-color-solid: #191919;
--bg-color-alter: #2d2d2d;
--bg-color: #2a2a2ace;
--text-color: #c0c0c0;
--bd-color: #7f7f7f7c;
--titlebar-height: 40px;
--shadow-edge-glow: inset 1px 1px 1px -0.5px rgba(255, 255, 255, 0.12),
inset -1px -1px 1px -0.5px rgba(255, 255, 255, 0.04), inset 0 0 4px rgba(255, 255, 255, 0.06);
--shadow: 0 10px 15px -3px rgb(0 0 0 / 0.2), 0 4px 6px -4px rgb(0 0 0 / 0.16);
--bg-color-alpha: hsl(230 12% 14% / 0.68);
--bg-color-alpha-darker: hsl(230 12% 14% / 0.93);
--bg-hover-fill: rgb(131 131 145 / 24%);
--bg-hover-fill-close: rgba(211, 86, 86, 0.579);
}
html {
background: transparent;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#app {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
background: transparent;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
'Helvetica Neue',
Arial,
sans-serif;
}
#app {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
input[type='text'] {
border: none;
outline: none;
background-color: var(--bg-color-alter);
border-bottom: 2px solid var(--bd-color);
border-radius: 3px;
color: var(--text-color);
font-size: 15px;
padding: 6px;
transition: 0.3s;
}
input[type='text']:focus {
background-color: var(--bg-color-solid);
border-bottom: 2px solid var(--text-active);
}
textarea {
outline: none;
border: 1px solid var(--bd-color);
border-radius: 3px;
color: var(--text-color);
font-size: 15px;
padding: 5px;
transition: 0.3s;
background-color: var(--bg-color-alter);
font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
'Helvetica Neue',
Arial,
sans-serif;
}
textarea:focus {
background-color: var(--bg-color-solid);
border: 1px solid var(--text-active);
}
.apply-button {
align-self: flex-end;
outline: none;
border: solid 1px var(--bd-color);
border-radius: 2px;
width: 75px;
height: 30px;
background-color: var(--bg-color-alpha-darker);
color: var(--text-color);
cursor: pointer;
transition: 0.3s;
}
.apply-button:hover {
background-color: var(--bg-color-alter);
}
.apply-button:active {
background-color: var(--bg-color-solid);
transform: scale(0.95);
}