Skip to content

Commit

Permalink
ui fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@imzlh
imzlh committed Jul 8, 2024
1 parent 6b16850 commit f2be13d
Show file tree
Hide file tree
Showing 7 changed files with 140 additions and 96 deletions.
3 changes: 3 additions & 0 deletions .github/workflows/compile.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@

name: Compile Vite Package

permissions:
contents: write

on:
push:
branches: [ "main" ]
Expand Down
Binary file added public/icon/desktop.webp
View file
Binary file not shown.
29 changes: 15 additions & 14 deletions src/module/alert.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,37 +62,37 @@
}
.sys-alert {
position: absolute;
top: 1rem;
position: fixed;
top: 2rem;
left: 0;
right: 0;
margin: auto;
width: 100vw;
max-width: 23rem;
z-index: 120;
box-sizing: border-box;
box-shadow: .35rem .15rem 1rem .25rem rgba(198, 193, 193, 0.87);
border-radius: .35rem;
border-width: .1rem;
border-color: #969696;
background-color: rgba(255, 255, 255, 0.8);
border: solid .05rem #e7e7e7;
border-radius: 0.35rem;
border-width: 0.1rem;
background-color: white;
overflow: hidden;
transition: all .2s;
animation: fadein .5s;
transition: all 0.2s;
animation: fadein 0.5s;
&:hover {
background-color: white;
}
.basic {
padding: 1rem;
padding: 1.25rem 1.5rem;
font-size: .85rem;
h3 {
margin: 0;
color: #353333;
font-weight: 500;
font-size: 1rem;
font-size: 1.1rem;
margin-bottom: .8rem;
font-weight: 400;
}
span {
Expand All @@ -115,12 +115,13 @@
}
.btns {
background-color: rgb(247 247 247);
background-color: rgb(249 249 249);
@include ui_btn-group();
padding: 0.75rem 1rem;
button {
background-color: rgb(139 191 234);
padding: .35rem 1rem;
padding: 0.5rem 1.25rem;
margin: 0 .25rem;
font-size: .8rem;
flex-shrink: 0;
Expand Down
181 changes: 106 additions & 75 deletions src/module/chooser.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,29 +59,37 @@
<template>
<div class="widget-chooser" v-show="display">
<div class="head">
<!-- 上一页 -->
<div class="icon" data-action="history-back" :disabled="current == 0" @click="current --">
<svg viewBox="0 0 448 512">
<path fill="currentColor"
d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z">
</path>
</svg>
</div>
<!-- 下一页 -->
<div class="icon" data-action="history-resume" :disabled="current == history.length -1" @click="current ++">
<svg viewBox="0 0 448 512">
<path fill="currentColor"
d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z">
</path>
</svg>
</div>
<!-- 文件夹返回 -->
<div class="icon" data-action="file-back" @click="dirBack">
<svg viewBox="0 0 384 512">
<path fill="currentColor"
d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z">
</path>
</svg>
<div class="flex">
<!-- 上一页 -->
<div class="icon" data-action="history-back" :disabled="current == 0" @click="current --">
<svg viewBox="0 0 448 512">
<path fill="currentColor"
d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z">
</path>
</svg>
</div>
<!-- 下一页 -->
<div class="icon" data-action="history-resume" :disabled="current == history.length -1" @click="current ++">
<svg viewBox="0 0 448 512">
<path fill="currentColor"
d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z">
</path>
</svg>
</div>
<!-- 文件夹返回 -->
<div class="icon" data-action="file-back" @click="dirBack">
<svg viewBox="0 0 384 512">
<path fill="currentColor"
d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z">
</path>
</svg>
</div>
<div class="title">
选择文件
</div>
<!-- 按钮 -->
<button class="non-fill" @click="display = false">取消</button>
<button class="fill" @click="submit">确定</button>
</div>
<!-- 路径 -->
<div class="path">
Expand All @@ -99,19 +107,18 @@
</template>
</div>
</div>
<!-- 按钮 -->
<button class="non-fill" @click="display = false">取消</button>
<button class="fill" @click="submit">确定</button>
</div>
<!-- 列表 -->
<List :list="data" style="padding-top: 2.4rem;"
<List :list="data" style="padding-top: 3.5rem;"
@open="(file:FileOrDir) => file.type == 'dir' ? switchTo(file.path) : null"
@select="(id:number) => exports.push(data[id])" @clear="() => exports = []"
></List>
</div>
</template>

<style lang="scss">
@import '../public/icon.scss';
.widget-chooser{
position: fixed;
top: 50vh;
Expand All @@ -133,13 +140,7 @@
--icon: 3rem;
> .head{
display: flex;
align-items: center;
height: 1.6rem;
padding: .35rem .5rem;
gap: .35rem;
background-color: rgb(237, 242, 242);
position: absolute;
top: 0;
left: 0;
Expand All @@ -148,33 +149,67 @@
user-select: none;
> *{
flex-shrink: 0;
}
> div{
color: rgb(161, 154, 154);
transition: all .2s;
> .flex{
display: flex;
align-items: center;
height: 1.6rem;
padding: .35rem .5rem;
gap: .35rem;
> *{
flex-shrink: 0;
}
&:hover{
color: black;
> .title{
flex-grow: 1;
text-align: center;
font-size: .9rem;
padding-bottom: .35rem;
}
> div{
color: rgb(161, 154, 154);
transition: all .2s;
&:hover{
color: black;
}
}
}
svg{
fill: currentColor;
width: 1rem;
height: 1rem;
margin: 0 .2rem;
svg{
fill: currentColor;
width: 1rem;
height: 1rem;
margin: 0 .2rem;
}
> button{
font-size: .8rem;
padding: 0 .75rem;
border-radius: .3rem;
outline: none;
border: none;
&.fill{
background-color: rgb(75, 165, 125);
color: white;
line-height: 1.6rem;
}
&.non-fill{
line-height: 1.4rem;
border: solid .1rem rgb(150, 204, 180);
}
}
}
.path{
border: solid .1rem rgb(193, 189, 189);
> .path{
// border-top: solid .1rem rgb(193, 189, 189);
position: relative;
flex-grow: 1;
height: 1.3rem;
border-radius: .2rem;
height: 2rem;
color: rgb(85, 81, 81);
margin-top: -.5rem;
padding: 0 .35rem;
input{
border: none;
Expand All @@ -187,40 +222,36 @@
padding: 0 .45rem;
}
.bread{
> .bread{
display: flex;
font-size: .8rem;
> *:not(:last-child){
color: rgb(148, 144, 144);
&::after{
display: inline-block;
margin: 0 .2rem;
height: .6rem;
width: .6rem;
content: $icon_right;
}
}
> *{
border-right: solid .1rem rgb(199, 194, 194);
padding: 0 .2rem;
line-height: 1.3rem;
line-height: 2rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 50%;
&:hover{
background-color: rgb(236, 241, 241);
}
}
}
}
> button{
font-size: .8rem;
padding: 0 .75rem;
border-radius: .3rem;
outline: none;
border: none;
&.fill{
background-color: rgb(75, 165, 125);
color: white;
line-height: 1.6rem;
}
&.non-fill{
line-height: 1.4rem;
border: solid .1rem rgb(150, 204, 180);
}
}
}
}
</style>
6 changes: 5 additions & 1 deletion src/opener/vlite.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,8 @@
lrc_elem = ref<Array<HTMLElement>>([]),
ev = defineEmits(['show']);
audio.preload = 'none';
const CONFIG = {
seek_time: 10,
cover: [
Expand Down Expand Up @@ -84,8 +86,10 @@
CFG.progress = 0;
// 音频设置
if(current.value.path != CFG.playlist[n].path)
if(current.value.path != CFG.playlist[n].path){
audio.src = CFG.playlist[n].url;
audio.load();
}
current.value = CFG.playlist[n];
// cue设置
Expand Down
15 changes: 9 additions & 6 deletions src/opener/vscode.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -462,18 +462,21 @@
window.MonacoEnvironment = {
"baseUrl": CFG['importURL'].value,
"getWorker": async (id, label) => {
let url = `${CFG['importURL'].value}/basic-languages/${label}/${label}.contribution.js`;
if(label == 'editorWorkerService') url = `${CFG['importURL'].value}/base/common/worker/simpleWorker.js`;
// https://cdn.jsdelivr.net/npm/[email protected]/esm/vs/language/typescript/ts.worker.js
const url = ({
'json' : '/language/json/json.worker.js',
'css' : '/language/css/css.worker.js',
'html' : '/language/html/html.worker.js',
'typescript': '/language/typescript/ts.worker.js',
'javascript': '/language/typescript/ts.worker.js'
})[label] || '/base/common/worker/simpleWorker.js'
const res = URL.createObjectURL(await (await fetch(url)).blob());
return new Worker(res,{
"name": label + 'language worker(vlist)',
"type": "module"
});
},
"getWorkerUrl": (id, label) => label == 'editorWorkerService'
? `${CFG['importURL'].value}/base/common/worker/simpleWorker.js`
: `${CFG['importURL'].value}/basic-languages/${label}/${label}.contribution.js`
}
</script>

Expand Down
2 changes: 2 additions & 0 deletions src/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import Setting from "./module/setting.vue";
import I_File from '/icon/file.webp';
import I_DIR from '/icon/dir.webp';
import I_SETTING from '/app/settings.webp';
import I_DESKTOP from '/icon/desktop.webp';

export const APP_API = 'http://192.168.1.1:81/@api/';
export const APP_NAME = 'izCloud';
Expand Down Expand Up @@ -355,6 +356,7 @@ export const TREE = reactive<vDir>({
"name": "/",
"dispName": "此服务器",
"url": FILE_PROXY_SERVER,
"icon": I_DESKTOP,
"path": "/"
});

Expand Down

0 comments on commit f2be13d

Please sign in to comment.