update
This commit is contained in:
539943419 committed
1 parent
d9363d3b93
commit
a668b3b840
13 files changed
+554
-145
No files matched your search
+129
-72
@@ -1,52 +1,75 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive } from 'vue';
|
||||
import { NIcon } from 'naive-ui';
|
||||
import { EyeOffOutline, EyeOutline, CloseOutline, AddOutline } from '@vicons/ionicons5'
|
||||
import { NIcon, NScrollbar } from 'naive-ui';
|
||||
import { EyeOffOutline, EyeOutline, CloseOutline, CopyOutline, EllipsisVertical } from '@vicons/ionicons5'
|
||||
import miaoDirectory from './views/miaoDirectory.vue';
|
||||
import VirtualPage from './class/virtualPage';
|
||||
import VirtualDirectory from './class/virtualDirectory';
|
||||
|
||||
const views = reactive<VirtualPage[]>([])
|
||||
|
||||
const createView = () => {
|
||||
views.push(reactive<VirtualPage>(new VirtualPage()))
|
||||
const rootDirectory = new VirtualDirectory({
|
||||
name: '根目录',
|
||||
stats: {
|
||||
atimeMs: 0,
|
||||
birthtimeMs: 0,
|
||||
ctimeMs: 0,
|
||||
mtimeMs: 0,
|
||||
}
|
||||
})
|
||||
|
||||
const createView = (initDirectory: VirtualDirectory, index?: number) => {
|
||||
index ?? (index = views.length)
|
||||
console.log(initDirectory)
|
||||
views.splice(index, 0, reactive<VirtualPage>(new VirtualPage(initDirectory)))
|
||||
}
|
||||
|
||||
const deleteView = (index: number) => {
|
||||
views.splice(index, 1)
|
||||
if(views.length === 0){
|
||||
createView()
|
||||
if (views.length === 0) {
|
||||
createView(rootDirectory)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
createView()
|
||||
createView(rootDirectory)
|
||||
})
|
||||
|
||||
// todo: 让所有伪页面共享一个rootDirectory
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="view-controler">
|
||||
<div class="tag" v-for="(view, index) of views" :key="view.uid">
|
||||
<div class="tag-title">{{ view.title }}</div>
|
||||
<div class="tag-control">
|
||||
<n-icon class="tag-control-icon icon" @click="view.switchShow()">
|
||||
<EyeOutline v-show="view.visible" class="icon-inner" />
|
||||
<EyeOffOutline v-show="!view.visible" class="icon-inner" />
|
||||
</n-icon>
|
||||
<n-icon class="tag-control-icon icon" @click="deleteView(index)">
|
||||
<CloseOutline class="icon-inner" />
|
||||
<n-scrollbar x-scrollable>
|
||||
<div class="tags-container">
|
||||
<div class="tag" v-for="(view, index) of views" :key="view.uid">
|
||||
<div class="tag-title">{{ view.title }}</div>
|
||||
<div class="tag-control">
|
||||
<n-icon class="tag-control-icon icon" @click="view.switchShow()">
|
||||
<EyeOutline v-show="view.visible" class="icon-inner" />
|
||||
<EyeOffOutline v-show="!view.visible" class="icon-inner" />
|
||||
</n-icon>
|
||||
<n-icon class="tag-control-icon icon" @click="createView(view.currentDirectory, index + 1)">
|
||||
<CopyOutline />
|
||||
</n-icon>
|
||||
<n-icon class="tag-control-icon icon" @click="deleteView(index)">
|
||||
<CloseOutline class="icon-inner" />
|
||||
</n-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</n-scrollbar>
|
||||
<div class="view-controler-menu">
|
||||
<div class="view-controler-menu-item">
|
||||
<n-icon class="icon" @click="">
|
||||
<EllipsisVertical class="icon-inner" />
|
||||
</n-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tag-short">
|
||||
<n-icon class="icon icon-larger" @click="createView()" size="20">
|
||||
<AddOutline class="icon-inner" />
|
||||
</n-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="view-container">
|
||||
<div class="view" v-for="(view) of views" v-show="view.visible" :key="view.uid">
|
||||
<!-- title: {{ view.title }} -->
|
||||
<miao-directory @on-title-change="(_t) => view.setTitle(_t)"></miao-directory>
|
||||
<miao-directory v-model:current-directory="view.currentDirectory"></miao-directory>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -58,53 +81,70 @@ $controler-height: 25px;
|
||||
display: flex;
|
||||
height: $controler-height;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background-color: #f2f2f2;
|
||||
// overflow: hidden;
|
||||
|
||||
.tag-short {
|
||||
position: relative;
|
||||
// margin-left: 5px;
|
||||
height: $controler-height;
|
||||
width: $controler-height;
|
||||
.tags-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tag {
|
||||
position: relative;
|
||||
width: 170px;
|
||||
// flex: 1;
|
||||
margin: 0 5px;
|
||||
display: flex;
|
||||
border-radius: 5px 5px 0 0;
|
||||
align-items: center;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
height: calc($controler-height*0.6);
|
||||
width: 1px;
|
||||
border-right: 1px solid black;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.tag-title {
|
||||
margin-left: 4px;
|
||||
width: 70%;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.tag-control {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
margin-left: 5px;
|
||||
flex: 1;
|
||||
// overflow-x: scroll;
|
||||
.tag {
|
||||
position: relative;
|
||||
width: 170px;
|
||||
margin: 0 5px;
|
||||
// flex: 1;
|
||||
display: flex;
|
||||
border-radius: 5px 5px 0 0;
|
||||
align-items: center;
|
||||
|
||||
|
||||
|
||||
.tag-control-icon:not(:last-child) {
|
||||
margin-right: 5px;
|
||||
.tag-title {
|
||||
margin-left: 4px;
|
||||
width: 70%;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.tag-control {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.tag-control-icon:not(:last-child) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:last-child)::after {
|
||||
content: '';
|
||||
height: calc($controler-height*0.6);
|
||||
width: 1px;
|
||||
border-right: 1px solid black;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.view-controler-menu {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 5px;
|
||||
.view-controler-menu-item {
|
||||
height: 100%;
|
||||
aspect-ratio: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
&::before {
|
||||
content: '';
|
||||
height: calc($controler-height*0.6);
|
||||
width: 1px;
|
||||
border-right: 1px solid black;
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -123,23 +163,40 @@ $controler-height: 25px;
|
||||
background-color: rgba(128, 128, 128, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.icon-larger {
|
||||
height: calc($controler-height * 0.85);
|
||||
width: calc($controler-height * 0.85);
|
||||
}
|
||||
}
|
||||
|
||||
.view-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
// flex-direction: column;
|
||||
height: calc(100% - $controler-height);
|
||||
overflow-y: overlay;
|
||||
overflow-x: overlay;
|
||||
&::-webkit-scrollbar {
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
}
|
||||
// 滚动条轨道
|
||||
&::-webkit-scrollbar-track {
|
||||
// background: rgb(239, 239, 239);
|
||||
border-radius: 2px;
|
||||
}
|
||||
// 小滑块
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #e0e0e0;
|
||||
// border-radius: 5px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: #999999;
|
||||
}
|
||||
|
||||
.view {
|
||||
border: 1px solid black;
|
||||
margin: 0 5px;
|
||||
padding: 3px;
|
||||
// border: 1px solid black;
|
||||
// outline: 1px solid black;
|
||||
// margin: 0 5px;
|
||||
// padding: 3px;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user