539943419/miaoDirectory
1
0 Fork 0
Code Pull Requests Projects Releases 2 Activity

添加页面加入/删除/文件加入/删除动画

Browse Source
This commit is contained in:
539943419 committed 2024-08-13 21:04:51 +08:00
1 parent 27ce78597b
commit 3d1f83d0ff
7 files changed
+184 -58
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

README.md
+7 -5
View File
@@ -1,5 +1,7 @@
# Vue 3 + TypeScript + Vite
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
todo: 标签页，miaoDirectory切换动画 [finish]
todo: 重构virtualPage，所有page以插件形式使用 []
todo: miaoDirectory插件化，为后续插件功能开发做准备 []
todo: miaoPopupInput, 弹出一个输入框
todo: miaoDirectory的新建文件/文件夹功能
todo: miaoDirectory的重命名功能
todo: miaoDirectory的多选功能
src/App.vue
+89 -16
View File
@@ -1,4 +1,5 @@
<script setup lang="ts">
import { h, onMounted, reactive, ref, shallowRef } from 'vue';
import { NIcon, NScrollbar, NDropdown, NQrCode } from 'naive-ui';
import { EyeOffOutline, EyeOutline, CloseOutline, CopyOutline, EllipsisVertical, QrCodeOutline } from '@vicons/ionicons5'
@@ -7,6 +8,7 @@ import VirtualPage from './class/VirtualPage';
import VirtualDirectory from './class/VirtualDirectory';
import MiaoMask from './components/miaoMask.vue';
import config from './config';
import useViretualPages from './hooks/useVirtualPages';
const { baseUrl } = config
@@ -17,7 +19,7 @@ const modalData = shallowRef<{
props: any
}>()
const views = reactive<VirtualPage[]>([])
const views = useViretualPages()
const rootDirectory = new VirtualDirectory({
name: '根目录',
@@ -42,14 +44,14 @@ const deleteView = (index: number) => {
}
}
// 若存在两个以上标签页可见则除点击的标签页以外其他全部隐藏，若只有一个标签页可见则全部展示
// 这个逻辑以后再研究吧，平时感觉用不到
// 点击标题是隐藏其他标签或显示其他标签，还挺好用的
const handleClickTitle = (index: number) => {
let count = views.filter(v => v.visible).length
let op = !views[index].visible || count > 1 ? 'hideOthers' : 'showOthers'
let _index = 0
while (_index < views.length) {
if (_index !== index) {
views[_index].visible = count > 1 ? false : true
views[_index].visible = op === 'hideOthers' ? false : true
} else {
views[_index].visible = true
}
@@ -100,10 +102,11 @@ onMounted(() => {
<div class="view-controler">
<n-scrollbar x-scrollable>
<div class="tags-container">
<div class="tag" v-for="(view, index) of views" :key="view.uid">
<div class="tag-title" @click="handleClickTitle(index)">{{ view.title }}</div>
<div class="tag-point" :style="{ backgroundColor: view.color } "></div>
<div class="tag-control">
<transition-group name="tab">
<div class="tab" v-for="(view, index) of views" :key="view.uid">
<div class="tab-title" @click="handleClickTitle(index)">{{ view.title }}</div>
<div class="tab-point" :style="{ backgroundColor: view.color }"></div>
<div class="tab-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" />
@@ -116,6 +119,7 @@ onMounted(() => {
</n-icon>
</div>
</div>
</transition-group>
</div>
</n-scrollbar>
<div class="view-controler-menu">
@@ -129,11 +133,15 @@ onMounted(() => {
</div>
</div>
<div class="view-container">
<transition-group name="page">
<div class="view-container-item" v-for="(view, index) of views" v-show="view.visible" :key="view.uid">
<miao-directory v-model:current-directory="view.currentDirectory" :color="view.color" :index="index" @exit="deleteView(index)"></miao-directory>
</div>
<miao-directory v-model:current-directory="view.currentDirectory" :color="view.color" :index="index"
@exit="deleteView(index)"></miao-directory>
</div>
</transition-group>
</div>
</div>
<!-- 模态框展示，用来显示分享二维码，设置菜单之类的东西 -->
<MiaoMask v-model:show="showModal" @click="showModal = false">
<component :is="modalData?.component" v-bind="modalData?.props"></component>
</MiaoMask>
@@ -141,6 +149,8 @@ onMounted(() => {
<style lang="scss" scoped>
$controler-height: 25px;
$tag-width: 170px;
.view {
position: relative;
height: 100%;
@@ -157,37 +167,38 @@ $controler-height: 25px;
display: flex;
margin-left: 5px;
flex: 1;
// overflow-x: scroll;
.tag {
.tab {
position: relative;
width: 170px;
width: $tag-width;
margin: 0 5px;
// flex: 1;
display: flex;
border-radius: 5px 5px 0 0;
align-items: center;
.tag-title {
.tab-title {
margin-left: 4px;
// width: 70%;
user-select: none;
cursor: pointer;
}
.tag-point {
.tab-point {
height: 5px;
aspect-ratio: 1;
border-radius: 66px;
margin-left: 5px;
}
.tag-control {
.tab-control {
position: absolute;
right: 10px;
display: flex;
align-items: center;
.tag-control-icon:not(:last-child) {
.tab-control-icon:not(:last-child) {
margin-right: 5px;
}
}
@@ -208,6 +219,7 @@ $controler-height: 25px;
display: flex;
align-items: center;
padding: 0 5px;
.view-controler-menu-item {
height: 100%;
aspect-ratio: 1;
@@ -215,6 +227,7 @@ $controler-height: 25px;
justify-content: center;
align-items: center;
}
&::before {
content: '';
height: calc($controler-height*0.6);
@@ -249,28 +262,88 @@ $controler-height: 25px;
height: calc(100% - $controler-height);
overflow-y: overlay;
overflow-x: overlay;
.view-container-item {
flex: 1;
height: 100%;
}
&::-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;
}
}
}
// transition动画相关
.view {
.view-controler {
.tags-container {
.tab-move,
.tab-enter-active {
transition: all 0.2s ease;
}
.tab-leave-active {
transition: none;
}
.tab-enter-from {
opacity: 0;
transform: translateY(-30px);
}
// .tab-leave-to {
// opacity: 0;
// transform: translateY(-80px) translateX(calc($tag-width + 10px));
// }
.tab-leave-active {
position: absolute;
}
}
}
.view-container {
.page-move,
.page-enter-active {
transition: all 0.2s ease;
}
.page-leave-active {
transition: none;
}
.page-enter-from {
opacity: 0;
// transform: translateY(-100px);
}
// .page-leave-to {
// opacity: 0;
// transform: translateY(-80px) translateX(calc($tag-width + 10px));
// }
.page-leave-active {
position: absolute;
}
}
}
</style>
src/class/virtualPage.ts
+2
View File
@@ -42,6 +42,8 @@ export default class VirtualPage {
this.currentDirectory = currDir;
}
// 刷新，不过好像没有用得到的时候吧
// 事实上也不应该用得到，因为更新应该是响应式的
refresh() {
this.refreshKey = Math.random();
}
src/hooks/useDataBus.ts
+8 -1
View File
@@ -1,6 +1,13 @@
const dataStorage: any = {};
import { reactive } from "vue";
let dataStorage: {
[key: string | number] : any
};
export default function useDataBus() {
if(dataStorage === undefined) {
dataStorage = reactive({})
}
return {
set(key: string | number, value: any) {
dataStorage[key] = value;
src/hooks/useUploadQueue.ts
+8 -2
View File
@@ -1,5 +1,11 @@
import UploadQueue from "@/class/UploadQueue";
import { reactive } from "vue";
const uploadQueue = new UploadQueue()
let uploadQueue: UploadQueue
export default () => uploadQueue
export default () => {
if(uploadQueue === undefined){
uploadQueue = reactive(new UploadQueue())
}
return uploadQueue
}
src/hooks/useVirtualPages.ts
+11
View File
@@ -0,0 +1,11 @@
import VirtualPage from "@/class/VirtualPage"
import { Reactive, reactive } from "vue"
let views: Reactive<VirtualPage[]>
export default function useViretualPages(){
if(views === undefined) {
views = reactive<VirtualPage[]>([])
}
return views
}
src/views/miaoDirectory.vue
+59 -34
View File
@@ -11,7 +11,8 @@
<CloudOutline />
</n-icon>
</n-breadcrumb-item>
<n-breadcrumb-item v-for="(dir) in currentDirectory?.directoryArray" @click="setCurrentDirectory(dir)" :clickable="true">
<n-breadcrumb-item v-for="(dir) in currentDirectory?.directoryArray"
@click="setCurrentDirectory(dir)" :clickable="true">
<div>{{ dir.name }}</div>
</n-breadcrumb-item>
</n-breadcrumb>
@@ -30,33 +31,29 @@
</n-icon>
</div>
</div>
<div class="container-items" :style="{ backgroundColor: props.index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)' }">
<div class="container-items"
:style="{ backgroundColor: props.index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)' }">
<n-scrollbar>
<miaoDirectoryItem
v-for="(dir) in showData_directory"
@click="setCurrentDirectory(dir)"
:item="dir"
:key="dir.uid"
:color="props.color"
@delete="handleItemDelete(dir)"
/>
<miaoDirectoryItem
v-for="(file) in showData_files"
:item="file"
:key="file.uid"
<transition-group name="dirItem">
<miaoDirectoryItem v-for="(dir) in showData_directory" @click="setCurrentDirectory(dir)" :item="dir"
:key="dir.uid" :color="props.color" @delete="handleItemDelete(dir)" />
</transition-group>
<transition-group name="dirItem">
<miaoDirectoryItem v-for="(file) in showData_files" :item="file" :key="file.uid"
@click="openUrl(`${baseUrl}${api.get}${file.path}`)"
@download="openUrl(`${baseUrl}${api.get}${file.path}`, { download: file.name })"
@delete="handleItemDelete(file)"
:color="props.color"
/>
@delete="handleItemDelete(file)" :color="props.color" />
</transition-group>
</n-scrollbar>
</div>
<div class="container-bottom" :style="{ backgroundColor: props.index % 2 === 1 ? 'rgb(61 61 61)' : 'rgb(162 162 162)' }"></div>
<div class="container-bottom"
:style="{ backgroundColor: props.index % 2 === 1 ? 'rgb(61 61 61)' : 'rgb(162 162 162)' }"></div>
<miaoMask v-model:show="showModel"></miaoMask>
</div>
</template>
<script setup lang="ts">
import { NBreadcrumbItem, NBreadcrumb, NIcon, NScrollbar } from 'naive-ui'
import type { file, directory } from '@/types/type.ts'
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory';
@@ -87,7 +84,7 @@ const emit = defineEmits<{
const showModel = ref(0)
// 目前展示的Dir
const currentDirectory = defineModel<VirtualDirectory | undefined>('currentDirectory', { required: true })
const currentDirectory = defineModel<VirtualDirectory>('currentDirectory', { required: true })
// 用于展示的数据，后续会增加排序等操作
const showData_directory = computed<VirtualDirectory[]>(() => {
@@ -114,18 +111,13 @@ const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
; (async () => {
const data: (file | directory)[] = await miaoFetchApi.get(virtualDirectory)
virtualDirectory.updateContent(data)
currentDirectory.value = undefined
currentDirectory.value = virtualDirectory
})()
}
// 刷新一下
currentDirectory.value = undefined
currentDirectory.value = virtualDirectory
// emit("onCurrentDirectoryChange", currentDirectory.value)
}
const reload = () => {
currentDirectory.value && setCurrentDirectory(currentDirectory.value)
setCurrentDirectory(currentDirectory.value)
}
const openUrl = (href: string, config?: {
@@ -153,7 +145,9 @@ const handleReload = () => {
}
const handleItemDelete = async (item: VirtualDirectory | VirtualFile) => {
const {response} = miaoFetchApi.delete(item)
const { response } = miaoFetchApi.delete(item, {
retry: 5
})
// todo: 将删除事件统一用一个事件管理中心管理
const id = (await response).eventId
const { response: res } = miaoFetchApi.query(id)
@@ -201,6 +195,7 @@ $bottom-bar-height: 60px;
display: flex;
flex-direction: column;
overflow: hidden;
.container-top {
height: $top-height;
width: 100%;
@@ -210,12 +205,14 @@ $bottom-bar-height: 60px;
align-items: center;
overflow: hidden;
background-color: #f1f1f1;
.container-top-colorbar {
height: 70%;
width: 5px;
margin-left: 10px;
border-radius: 3px 0 0 3px;
}
.container-top-breadcrumb {
position: relative;
height: 70%;
@@ -229,6 +226,7 @@ $bottom-bar-height: 60px;
background-color: #ffffff;
padding: 0 5px;
border-radius: 0 3px 3px 0;
.container-top-breadcrumb-container {
position: absolute;
height: 100%;
@@ -240,6 +238,7 @@ $bottom-bar-height: 60px;
align-items: center;
}
}
.container-top-tools {
position: relative;
height: 100%;
@@ -248,6 +247,7 @@ $bottom-bar-height: 60px;
display: flex;
justify-content: space-around;
align-items: center;
.container-top-tools-item {
width: 20px;
height: 20px;
@@ -258,30 +258,37 @@ $bottom-bar-height: 60px;
border-radius: 5px;
transition: background-color 0.3s;
cursor: pointer;
.container-top-tools-item-reload {
transition: transform 0.6s ease-in-out;
}
&:hover {
background-color: rgba(128, 128, 128, 0.4);
}
&:active .container-top-tools-item-reload {
transform: rotate(360deg);
}
}
&::after {
content: '';
height: 60%;
position: absolute;
right: -2px;
width: 2px;
background-color: #828282;
}
// &::after {
// content: '';
// height: 60%;
// position: absolute;
// right: -2px;
// width: 2px;
// background-color: #828282;
// }
}
}
.container-items {
width: 100%;
height: calc(100% - $top-height - $bottom-bar-height);
// flex: 1;
}
.container-bottom {
height: $bottom-bar-height;
background-color: bisque;
@@ -293,4 +300,22 @@ $bottom-bar-height: 60px;
z-index: 2;
}
}
// transition动画相关
.miao-directory-item-container {
.container-items {
.dirItem-move,
.dirItem-enter-active {
transition: all 0.2s ease;
}
.dirItem-leave-active {
transition: none;
}
.dirItem-enter-from {
opacity: 0;
}
.dirItem-leave-active {
position: absolute;
}
}
}
</style>