15 Commits
Author SHA1 Message Date
539943419 78dac7482c update readme 2024-09-02 00:56:05 +08:00
539943419 9aec221ea3 feat: 重构部分组件,使miaoDirectoryItem更加通用 2024-09-01 14:45:29 +08:00
539943419 938dde4c1c feat: 屏蔽miaoDirectory底部工具栏,更新readme计划书 2024-09-01 04:18:41 +08:00
539943419 8e884eb178 feat: 优化代码表现 2024-09-01 03:39:50 +08:00
539943419 8c65e66ab6 style: 微调样式 2024-08-31 17:30:21 +08:00
539943419 a34e27cc65 feat: 添加miaoMessageProvider 2024-08-31 17:19:19 +08:00
539943419 de2e53cbcf fix: 1.修复了图片插件可用性判断的问题。2.修复了code插件样式错误的问题 2024-08-31 14:18:39 +08:00
539943419 b3c6dad1b1 fix: 修复了miaoDirectory在特殊情况下显示异常的问题。 2024-08-31 00:12:56 +08:00
539943419 fcb2fe8f7f fix: 1.修复了切换文件夹后无法自动滚动到顶部的问题。2.修复了图标路径错误的问题。 2024-08-30 23:56:20 +08:00
539943419 c02f6743e3 feat: 1.拆分miaoDirectory,右上角退出按钮改为小菜单,增加搜索,屏蔽文件夹等功能。2.更新readme 2024-08-30 23:29:28 +08:00
539943419 3e24d4a363 fix: 修正miaoDirectoryItem部分图片文件图标显示错误问题 2024-08-30 21:25:40 +08:00
539943419 7574acdad2 feat: 1.优化了miaoDirectory中多选的性能表现。2.图片浏览组件新增拖入虚拟文件/文件夹相关处理 2024-08-30 20:58:18 +08:00
539943419 704c80e019 feat: 1.通过懒加载大大优化miaoDirectory的使用体验。2.现在切换文件夹时会自动清空多选文件列表。 2024-08-30 16:41:04 +08:00
539943419 210e251b23 feat: 添加一个没啥功能的图片浏览插件 2024-08-30 05:15:32 +08:00
539943419 93ca2a29a6 fix: 修正大量拼写错误 2024-08-30 03:12:18 +08:00
21 changed files with 1439 additions and 716 deletions

No files matched your search

+27 -11
View File
@@ -1,11 +1,27 @@
todo: 标签页,miaoDirectory切换动画 [finish]
todo: 重构virtualPage,所有page以插件形式使用 [finish]
todo: miaoDirectory插件化,为后续插件功能开发做准备 [finish]
todo: miaoPopupInput, 弹出一个输入框 [finish]
todo: miaoDirectory的重命名功能 [finish]
todo: miaoDirectory的剪切功能 [finish]
todo: miaoDirectory的上传按钮 [finish]
todo: miaoDirectory的新建文件/文件夹功能 [finish]
todo: miaoDirectory的多选功能 [finish]
todo: VirtualDirectory更新时更新文件信息
todo: miaoDirectory的复制文件/文件夹功能
## TODO list:
| 计划 | 状态 |
|---|---|
| 拆分miaoDirectory | ✅ |
| 完善视频插件 | ✅ |
| 完善PDF插件 | ✅ |
| 完善Code插件 | ✅ |
| 实现miaoDirectory的搜索功能 | ✅ |
| plugin增加些选项,icon之类的 | ❌ |
| 完善miaoDirectory的搜索功能 | ❌ |
| 实现miaoDirectory的排序功能 | ❌ |
| 完善图片浏览插件 | ❌ |
| VirtualDirectory更新时更新文件信息 | ❌ |
| 创建音乐播放器组件(仿QQ音乐移动端吧) | ❌ |
| miaoDirectory的复制文件/文件夹功能 | ❌ |
| 长期计划 |
|---|
| 重构virtualDirectory,使其不用直接拥有父文件夹 |
| 重构virtualDirectory,使其不用直接拥有父文件夹 |
## 碎碎念:
为什么不直接做成类似于windows的风格呢?其实技术实现上问题应该不大,重构也不用重构太多东西(APP.vue改改,插件部分改改这样),但是开学了事情一大堆,实习又没法比较美好地推掉。平时每天到宿舍都精疲力竭还要准备秋招和学校的破事。更何况搞不好还会被两个学分卡得没法毕业,好烦好烦。
不过可能我对插件的价值也是有所高估吧。
+1 -1
View File
@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="./public/favicon.ico" />
<link rel="icon" type="image/svg+xml" href="./icon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MiaoDirectory</title>
</head>
+1 -1
View File
@@ -7,7 +7,7 @@
"dev": "vite",
"dev:host": "vite --host 0.0.0.0",
"build": "vue-tsc -b && vite build",
"build:auto": "pnpm run build && rm -rf ./serve/web/* && cp -r ./dist/* ./serve/web/ && cd ./serve && go build && mv ./miao-directory.exe ../",
"build:auto": "pnpm run build && rm -rf ./serve/web/* && cp -r ./dist/* ./serve/web/ && cd ./serve && go env -w GOOS=windows && go build -o ../miao-directory.exe",
"build:auto:release": "pnpm run build && rm -rf ./serve/web/* && cp -r ./dist/* ./serve/web/ && cd ./serve && go env -w GOOS=windows GOARCH=amd64 && go build -o ../miao-directory-amd64-win.exe && go env -w GOOS=linux GOARCH=amd64 && go build -o ../miao-directory-amd64-linux",
"preview": "vite preview"
},
+29 -57
View File
@@ -1,6 +1,6 @@
<script setup lang="ts">
import { h, onMounted, reactive, ref, shallowRef } from 'vue'
import { NIcon, NScrollbar, NDropdown, NQrCode } from 'naive-ui'
import { NIcon, NScrollbar, NDropdown } from 'naive-ui'
import {
EyeOffOutline,
EyeOutline,
@@ -42,11 +42,11 @@ const rootDirectory = reactive(
// component就是一个vue组件,类似于miaoDirectory
const createView = (
component: any,
currentDirectorys?: VirtualDirectory[],
currentDirectories?: VirtualDirectory[],
currentFiles?: VirtualFile[],
index?: number
) => {
views.push(component, currentDirectorys, currentFiles, index)
views.push(component, currentDirectories, currentFiles, index)
}
const deleteView = (index: number) => {
@@ -88,11 +88,11 @@ const openMenuOption = [
}
]
const handleMenuSelect = (key: string) => {
const handleMenuSelect = async (key: string) => {
if (key === 'share') {
showModal.value = true
modalData.value = {
component: NQrCode,
component: (await import('naive-ui/es/qr-code')).NQrCode,
props: {
value: baseUrl,
size: 300,
@@ -114,49 +114,31 @@ onMounted(() => {
<n-scrollbar x-scrollable>
<div class="tabs-container">
<transition-group name="tab">
<div
class="tab"
v-for="(view, index) of views._views"
:key="view.uid">
<span
class="tab-title"
:title="view.title"
@click="handleClickTitle(index)">
<div class="tab" v-for="(view, index) of views._views" :key="view.id">
<span class="tab-title" :title="view.title" @click="handleClickTitle(index)">
{{
view.title.length > 5 && 0
? `${view.title.substring(0, 5)}...`
: view.title
}}
</span>
<div
class="tab-point"
:style="{ backgroundColor: view.color }"></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" />
<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.component,
view.currentDirectorys,
view.currentFiles,
index + 1
)
<n-icon class="tag-control-icon icon" @click="
createView(
view.component,
view.currentDirectories,
view.currentFiles,
index + 1
)
">
<CopyOutline />
</n-icon>
<n-icon
class="tag-control-icon icon"
@click="deleteView(index)">
<n-icon class="tag-control-icon icon" @click="deleteView(index)">
<CloseOutline class="icon-inner" />
</n-icon>
</div>
@@ -166,10 +148,7 @@ onMounted(() => {
</n-scrollbar>
<div class="view-controller-menu">
<div class="view-controller-menu-item">
<n-dropdown
trigger="click"
:options="openMenuOption"
@select="handleMenuSelect">
<n-dropdown trigger="click" :options="openMenuOption" @select="handleMenuSelect">
<n-icon class="icon">
<EllipsisVertical class="icon-inner" />
</n-icon>
@@ -179,17 +158,10 @@ onMounted(() => {
</div>
<div class="view-container">
<transition-group name="page">
<div
class="view-container-item"
v-for="(view, index) of views._views"
v-show="view.visible"
:key="view.uid">
<component
:is="view.component"
v-model:current-directorys="view.currentDirectorys"
v-model:current-files="view.currentFiles"
:id="view.uid"
:color="view.color"
<div class="view-container-item" v-for="(view, index) of views._views" v-show="view.visible"
:key="view.id">
<component :is="view.component" v-model:current-directories="view.currentDirectories"
v-model:current-files="view.currentFiles" :id="view.id" :color="view.color"
@exit="deleteView(index)"></component>
</div>
</transition-group>
@@ -197,10 +169,8 @@ onMounted(() => {
</div>
<!-- 模态框展示,用来显示分享二维码,设置菜单之类的东西 -->
<MiaoMask v-model:show="showModal" @click="showModal = false">
<component
@click="(e:any) => e.stopPropagation()"
:is="modalData?.component"
v-bind="modalData?.props"></component>
<component @click="(e: any) => e.stopPropagation()" :is="modalData?.component" v-bind="modalData?.props">
</component>
</MiaoMask>
</template>
@@ -246,6 +216,7 @@ $tag-width: 170px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
span {
user-select: none;
cursor: pointer;
@@ -333,7 +304,7 @@ $tag-width: 170px;
.view-container-item {
flex: 1;
height: 100%;
min-width: 200px;
min-width: 180px;
}
&::-webkit-scrollbar {
@@ -363,6 +334,7 @@ $tag-width: 170px;
.view {
.view-controller {
.tabs-container {
.tab-move,
.tab-enter-active {
transition: all 0.2s ease;
+10 -10
View File
@@ -6,8 +6,8 @@ type plugin = {
name: string
// 判断是否可以使用这个组件
// 使用组件即调用下面的func
filter: (VDirectorys: VirtualDirectory[], VFiles: VirtualFile[]) => boolean
func: (VDirectorys: VirtualDirectory[], VFiles: VirtualFile[]) => void
filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => boolean
func: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => void
}
export default class PluginCenter {
@@ -30,7 +30,7 @@ export default class PluginCenter {
name: string,
getComponent: () => Promise<any>,
filter: (
VDirectorys: VirtualDirectory[],
VDirectories: VirtualDirectory[],
VFiles: VirtualFile[]
) => boolean
): void {
@@ -40,22 +40,22 @@ export default class PluginCenter {
name,
filter,
func: async (
VDirectorys: VirtualDirectory[],
VDirectories: VirtualDirectory[],
VFiles: VirtualFile[]
) => {
if (filter(VDirectorys, VFiles) === false) {
if (filter(VDirectories, VFiles) === false) {
return
}
if (_component === undefined) _component = await getComponent()
views.push(_component, VDirectorys, VFiles)
views.push(_component, VDirectories, VFiles)
}
})
}
getUsablePlugin(VDirectorys: VirtualDirectory[], VFiles: VirtualFile[]) {
getUsablePlugin(VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) {
const usableList = []
for (let key of Object.keys(this.pluginsMap)) {
if (this.pluginsMap[key].filter(VDirectorys, VFiles)) {
if (this.pluginsMap[key].filter(VDirectories, VFiles)) {
usableList.push(key)
}
}
@@ -67,9 +67,9 @@ export default class PluginCenter {
usePlugin(
key: string,
VDirectorys: VirtualDirectory[],
VDirectories: VirtualDirectory[],
VFiles: VirtualFile[]
) {
this.pluginsMap[key].func(VDirectorys, VFiles)
this.pluginsMap[key].func(VDirectories, VFiles)
}
}
+10 -10
View File
@@ -13,14 +13,14 @@ export class VirtualFile {
this.stats = info.stats;
this.parent = parent;
this.type = "file";
this.uid = generateId();
this.id = generateId();
}
name: string;
type: "file";
size: number;
stats: stats;
parent: VirtualDirectory;
uid: number;
id: number;
get path() {
return `${this.parent.path}${this.name}`;
}
@@ -36,14 +36,14 @@ class VirtualDirectory {
this.type = "directory";
this.stats = info.stats;
this.parent = parent ?? undefined;
this.uid = generateId();
this.id = generateId();
}
// 文件夹名
name: string;
// 子文件
files?: VirtualFile[];
// 子目录
directorys?: VirtualDirectory[];
directories?: VirtualDirectory[];
// 没啥意义,标注一下就是了
type: "directory";
// 文件夹创建时间等杂项属性
@@ -51,7 +51,7 @@ class VirtualDirectory {
// 父文件夹
parent?: VirtualDirectory;
uid: number;
id: number;
/**
* 获取相对于根目录的路径的层数
@@ -98,9 +98,9 @@ class VirtualDirectory {
updateContent(content: (file | directory)[]) {
this.files = this.files ?? [];
this.directorys = this.directorys ?? [];
this.directories = this.directories ?? [];
const fileNames: string[] = this.files.map(v => v.name);
const dirNames: string[] = this.directorys.map(v => v.name);
const dirNames: string[] = this.directories.map(v => v.name);
const itemNames: string[] = content.map(v => v.name);
// 删去远程端已不存在的文件与文件夹
const _delete = (target: (VirtualFile | VirtualDirectory)[]) => {
@@ -114,7 +114,7 @@ class VirtualDirectory {
}
};
_delete(this.files);
_delete(this.directorys);
_delete(this.directories);
// 加入新的文件与文件夹
for (let item of content) {
if (item.type === "file") {
@@ -123,7 +123,7 @@ class VirtualDirectory {
}
} else if (item.type === "directory") {
if (!dirNames.includes(item.name)) {
this.directorys.push(new VirtualDirectory(item, this));
this.directories.push(new VirtualDirectory(item, this));
}
}
}
@@ -131,7 +131,7 @@ class VirtualDirectory {
hasChild(item: VirtualDirectory | VirtualFile): boolean {
if (item.type === "directory") {
return this.directorys?.includes(item) ?? false;
return this.directories?.includes(item) ?? false;
} else {
return this.files?.includes(item) ?? false;
}
+10 -10
View File
@@ -13,12 +13,12 @@ const getRandomWebSafeColor = (() => {
})();
export default class VirtualPage {
constructor(component: any, initObjects?: { directorys?: VirtualDirectory[]; files?: VirtualFile[] }) {
constructor(component: any, initObjects?: { directories?: VirtualDirectory[]; files?: VirtualFile[] }) {
this.component = shallowRef(component);
this.currentDirectorys = initObjects?.directorys ?? [];
this.currentDirectories = initObjects?.directories ?? [];
this.currentFiles = initObjects?.files ?? [];
this.visible = true;
this.uid = generateId();
this.id = generateId();
this.refreshKey = Math.random();
this.color = getRandomWebSafeColor();
}
@@ -27,11 +27,11 @@ export default class VirtualPage {
// 是否可见
visible: boolean;
// 当前正在使用的文件夹
currentDirectorys: VirtualDirectory[];
currentDirectories: VirtualDirectory[];
// 当前正在使用的文件
currentFiles: VirtualFile[];
// 区分每一个页面的唯一id
uid: number;
id: number;
// 当refreshKey改变时需要刷新页面,目前还没接入刷新
refreshKey: number;
// 为了区分,每个虚拟页面都会分配一个color,这个color会体现在tab上
@@ -43,7 +43,7 @@ export default class VirtualPage {
if (this._title) {
return this._title;
}
return this?.currentDirectorys[0]?.name ?? this?.currentFiles[0]?.name ?? "未命名标签";
return this?.currentDirectories[0]?.name ?? this?.currentFiles[0]?.name ?? "未命名标签";
}
setTitle(title: string) {
@@ -79,7 +79,7 @@ export class VirtualPages {
*/
getIndex(id: number) {
for (let i in this._views) {
if (this._views[i].uid === id) {
if (this._views[i].id === id) {
return parseInt(i);
}
}
@@ -91,7 +91,7 @@ export class VirtualPages {
*/
getView(id: number) {
for (let v of this._views) {
if (v.uid === id) {
if (v.id === id) {
return v;
}
}
@@ -101,14 +101,14 @@ export class VirtualPages {
/**
* 推入一个新的页面
*/
push(component: any, currentDirectorys?: VirtualDirectory[], currentFiles?: VirtualFile[], index?: number) {
push(component: any, currentDirectories?: VirtualDirectory[], currentFiles?: VirtualFile[], index?: number) {
index ?? (index = this.length);
this._views.splice(
index,
0,
reactive<VirtualPage>(
new VirtualPage(component, {
directorys: [...(currentDirectorys ?? [])],
directories: [...(currentDirectories ?? [])],
files: [...(currentFiles ?? [])]
})
)
@@ -0,0 +1,77 @@
<template>
<div class="miao-directory-container-bottom" :style="{
backgroundColor:
index % 2 === 1 ? 'rgb(61 61 61)' : 'rgb(162 162 162)'
}">
<div class="container-bottom-item">
<div class="container-bottom-item-icon">
<add-outline :style="{
color:
index % 2 === 0
? 'rgb(0 0 0)'
: 'rgb(255 255 255)'
}" @click="$emit('add-new-item')" />
</div>
</div>
<div class="container-bottom-item">
<div class="container-bottom-item-icon">
<cloud-upload-outline :style="{
color:
index % 2 === 0
? 'rgb(0 0 0)'
: 'rgb(255 255 255)'
}" @click="$emit('pick-files-upload')" />
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { AddOutline, CloudUploadOutline } from '@vicons/ionicons5'
defineProps<{
index: number
}>()
const emit = defineEmits<{
'add-new-item': []
'pick-files-upload': []
}>()
</script>
<style scoped lang="scss">
.miao-directory-container-bottom {
height: 60px;
background-color: bisque;
display: flex;
justify-content: space-around;
align-items: center;
user-select: none;
box-shadow: 0px 1px 10px #888888;
z-index: 2;
.container-bottom-item {
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
.container-bottom-item-icon {
svg {
width: 30px;
height: 30px;
transition: width 0.3s ease;
transition: height 0.3s ease;
cursor: pointer;
}
&:hover {
svg {
width: 40px;
height: 40px;
}
}
}
}
}
</style>
@@ -1,31 +1,24 @@
<template>
<div class="miao-item" draggable="true" ref="itemRef" @dragstart="handleDragStart">
<miaoContextMenu :options="dropDownOptions" :touch-time-out="500" @select="handleDropdownSelect">
<miaoContextMenu :options="dropDownOptions ?? []" :touch-time-out="500" @select="handleDropdownSelect">
<div class="item-main" :class="selected ? 'item-main-selected' : ''" ref="mainRef">
<div class="item-main-front" :style="{ backgroundColor: props.color }"></div>
<Icon class="item-main-icon" v-show="clientWidth > 250"></Icon>
<div class="item-main-info">
<div class="item-main-info-name">
<Icon class="item-main-info-name-icon" v-if="clientWidth <= 250"></Icon>
<n-ellipsis style="max-width: 80%;">{{ name }}</n-ellipsis>
<n-ellipsis :style="{ maxWidth: clientWidth > 250 ? '80%' : '75%' }">{{ name }}</n-ellipsis>
</div>
<div class="item-main-info-date" v-if="time">
{{ time }}
</div>
</div>
<!-- 菜单现在通过右键/长按呼出 -->
<!-- <n-dropdown trigger="click" :options="dropDownOptions" @select="handleDropdownSelect">
<div class="item-main-option" @click="(e) => e.stopPropagation()">
<EllipsisVertical class="item-main-option-icon" />
</div>
</n-dropdown> -->
</div>
</miaoContextMenu>
</div>
</template>
<script setup lang="ts">
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
import miaoContextMenu from '../miaoContextMenu.vue'
import {
DocumentText,
@@ -39,33 +32,37 @@ import {
PlayCircle,
Disc
} from '@vicons/ionicons5'
import { computed, onMounted, ref } from 'vue'
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
import dateFormatter from '@/hooks/dateFormatter'
import { NEllipsis } from 'naive-ui'
import usePluginCenter from '@/hooks/usePluginCenter'
import { DropdownOption } from 'naive-ui/es/dropdown';
// import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
// const miaoFetchApi = useMiaoFetchApi()
const props = defineProps<{
item: VirtualDirectory | VirtualFile
item: {
name: string,
type: 'directory' | 'file'
stats: {
mtimeMs: number
}
}
name?: string
color: string
selectedItem: (VirtualDirectory | VirtualFile)[]
dropDownOptions?: DropdownOption[]
selected?: boolean
}>()
const emit = defineEmits<{
download: []
delete: []
rename: []
dragStart: [event: DragEvent, item: VirtualDirectory | VirtualFile]
dragStart: [event: DragEvent]
onSelected: []
plugin: [plugin: string]
}>()
const pluginCenter = usePluginCenter()
const itemType = ref<'file' | 'directory'>(props.item.type)
const mainRef = ref<HTMLDivElement>()
// 使用ResizeObserver实现
@@ -73,9 +70,11 @@ const clientWidth = ref<number>(666)
const name = props.name ?? props.item.name
const selected = computed(() => {
return props.selectedItem.includes(props.item)
})
const observer = new ResizeObserver(entries => {
for (let entry of entries) {
clientWidth.value = entry.contentRect.width;
}
});
const time = computed(() => {
return dateFormatter(
@@ -84,60 +83,8 @@ const time = computed(() => {
)
})
const dropDownOptions = computed(() => {
const items = [...props.selectedItem]
if (!selected.value) {
items.push(props.item)
}
const vDirs = items.filter(v => v.type === 'directory')
const vFiles = items.filter(v => v.type === 'file')
const options = [
{
label: '重命名',
key: 'rename'
},
{
label: '删除',
key: 'delete'
},
]
if (itemType.value === 'file') {
options.push(
...[
{
label: '下载',
key: 'download'
}
]
)
}
if (selected.value === false) {
options.push(
...[
{
label: '多选:选择',
key: 'select'
}
]
)
} else {
options.push(
...[
{
label: '多选:取消',
key: 'select'
}
]
)
}
options.push(...pluginCenter.getUsablePlugin(vDirs, vFiles).map(v => ({
label: `插件:${v.name}`,
key: `plugin:${v.key}`
})))
return options
})
// 是不是可以直接在这里面实现?
// 应该将所有事件emit出去才对
const handleDropdownSelect = (key: string) => {
if (key === 'rename') {
emit('rename')
@@ -148,14 +95,8 @@ const handleDropdownSelect = (key: string) => {
} else if (key === 'select') {
emit('onSelected')
} else if (key.startsWith('plugin:')) {
const items = [...props.selectedItem]
if (!selected.value) {
items.push(props.item)
}
const vDirs = items.filter(v => v.type === 'directory')
const vFiles = items.filter(v => v.type === 'file')
const plugin = key.split(':')[1]
pluginCenter.usePlugin(plugin, vDirs, vFiles)
emit('plugin', plugin)
}
}
@@ -177,22 +118,22 @@ const Icon = computed(() => {
return Disc
} else if (
[
'.xbm',
'.tif',
'xbm',
'tif',
'pjp',
'.svgz',
'svgz',
'jpg',
'jpeg',
'ico',
'tiff',
'.gif',
'gif',
'svg',
'.jfif',
'.webp',
'.png',
'.bmp',
'jfif',
'webp',
'png',
'bmp',
'pjpeg',
'.avif'
'avif'
].includes(aft)
) {
return Image
@@ -217,27 +158,28 @@ const Icon = computed(() => {
const itemRef = ref()
const handleDragStart = (event: DragEvent) => {
emit('dragStart', event, props.item)
emit('dragStart', event)
// dataBus.set('dragData', [props.item])
}
onMounted(() => {
const observer = new ResizeObserver(entries => {
for (let entry of entries) {
clientWidth.value = entry.contentRect.width;
}
});
if (mainRef.value) {
observer.observe(mainRef.value);
}
})
onBeforeUnmount(() => {
if (mainRef.value) {
observer.unobserve(mainRef.value);
}
})
</script>
<style lang="scss" scoped>
.miao-item {
cursor: pointer;
width: calc(100% - 20px);
min-width: 170px;
// min-width: 170px;
// aspect-ratio: 66/9;
height: 50px;
position: relative;
@@ -249,7 +191,6 @@ onMounted(() => {
.item-main {
position: relative;
width: 100%;
min-width: 200px;
height: 95%;
background-color: rgb(255, 255, 255);
border-radius: 7px;
@@ -276,7 +217,7 @@ onMounted(() => {
.item-main-info {
margin-left: 10px;
height: 100%;
width: calc( 100% - 10px );
width: calc(100% - 10px);
display: flex;
flex-direction: column;
@@ -0,0 +1,154 @@
<template>
<div class="miao-directory-container-items" :style="{
backgroundColor:
index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
}">
<n-scrollbar ref="scrollbarRef" style="max-height: 100%;">
<miao-lazy-div v-for="(dir) in showData_directory" :key="dir.id" min-height="50px">
<miaoDirectoryItem :item="dir" :color="props.color" :selected="selectedItem.includes(dir)"
:drop-down-options="itemDropDownOptions(dir).value" @delete="handleItemDelete(dir)"
@plugin="p => handleItemUsePlugin(dir)(p)" @click="handleItemClick(dir)"
@drag-start="e => handleItemDragStart(dir)(e)" @rename="handleItemRename(dir)"
@on-selected="handleItemSelect(dir)" />
</miao-lazy-div>
<miao-lazy-div v-for="(file) in showData_files" :key="file.id" min-height="50px">
<miaoDirectoryItem :item="file" :color="props.color" :selected="selectedItem.includes(file)"
:drop-down-options="itemDropDownOptions(file).value" @click="handleItemClick(file)"
@download="handleItemDownload(file)" @delete="handleItemDelete(file)"
@drag-start="e => handleItemDragStart(file)(e)" @rename="handleItemRename(file)"
@plugin="p => handleItemUsePlugin(file)(p)" @on-selected="handleItemSelect(file)" />
</miao-lazy-div>
</n-scrollbar>
</div>
</template>
<script setup lang="ts">
import { NScrollbar } from 'naive-ui'
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
import miaoDirectoryItem from '@/components/miaoDirectory/miaoDirectoryItem.vue'
import miaoLazyDiv from '@/components/miaoLazyDiv.vue'
import { computed, ref } from 'vue';
import usePluginCenter from '@/hooks/usePluginCenter';
const pluginCenter = usePluginCenter()
const props = defineProps<{
color: string
index: number
showData_directory: VirtualDirectory[]
showData_files: VirtualFile[]
selectedItem: (VirtualFile | VirtualDirectory)[]
}>()
const emit = defineEmits<{
'item-click': [item: VirtualDirectory | VirtualFile]
'item-download': [item: VirtualFile]
'item-delete': [item: VirtualDirectory | VirtualFile]
'item-drag-start': [_event: DragEvent, item: VirtualDirectory | VirtualFile]
'item-rename': [item: VirtualDirectory | VirtualFile]
'item-select': [item: VirtualDirectory | VirtualFile]
}>()
const scrollbarRef = ref()
const itemDropDownOptions = (item: VirtualDirectory | VirtualFile) => computed(() => {
const items = [...props.selectedItem]
const selected = props.selectedItem.includes(item)
if (!selected) {
items.push(item)
}
const vDirs = items.filter(v => v.type === 'directory')
const vFiles = items.filter(v => v.type === 'file')
const options = [
{
label: '重命名',
key: 'rename'
},
{
label: '删除',
key: 'delete'
},
]
if (item.type === 'file') {
options.push(
...[
{
label: '下载',
key: 'download'
}
]
)
}
if (selected === false) {
options.push(
...[
{
label: '多选:选择',
key: 'select'
}
]
)
} else {
options.push(
...[
{
label: '多选:取消',
key: 'select'
}
]
)
}
options.push(...pluginCenter.getUsablePlugin(vDirs, vFiles).map(v => ({
label: `插件:${v.name}`,
key: `plugin:${v.key}`
})))
return options
})
const handleItemClick = (item: VirtualDirectory | VirtualFile) => {
emit('item-click', item)
}
const handleItemDownload = (item: VirtualFile) => {
emit('item-download', item)
}
const handleItemDelete = (item: VirtualDirectory | VirtualFile) => {
emit('item-delete', item)
}
const handleItemDragStart = (item: VirtualDirectory | VirtualFile) => (_event: DragEvent) => {
emit('item-drag-start', _event, item)
}
const handleItemRename = (item: VirtualDirectory | VirtualFile) => {
emit('item-rename', item)
}
const handleItemSelect = (item: VirtualDirectory | VirtualFile) => {
emit('item-select', item)
}
const handleItemUsePlugin = (item: VirtualDirectory | VirtualFile) => (plugin: string) => {
const items = [...props.selectedItem]
const selected = props.selectedItem.includes(item)
if (!selected) {
items.push(item)
}
const vDirs = items.filter(v => v.type === 'directory')
const vFiles = items.filter(v => v.type === 'file')
pluginCenter.usePlugin(plugin, vDirs, vFiles)
}
defineExpose({ scrollTo: (...args: any) => scrollbarRef.value.scrollTo(...args) });
</script>
<style scoped lang="scss">
.miao-directory-container-items {
width: 100%;
flex: 1;
min-height: 0;
}
</style>
@@ -0,0 +1,152 @@
<template>
<div class="miao-directory-container-top" :style="{
backgroundColor:
index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
}">
<div class="container-top-colorfulBar" :style="{ backgroundColor: props.color }"></div>
<div class="container-top-breadcrumb">
<div class="container-top-breadcrumb-container">
<n-breadcrumb separator=">" style="margin-left: 5px">
<n-breadcrumb-item :clickable="false">
<n-icon size="18">
<CloudOutline />
</n-icon>
</n-breadcrumb-item>
<n-breadcrumb-item v-for="dir in currentDirectory?.getParents"
@click="handleClickBreadcrumbItem(dir)" :clickable="true">
<div>{{ dir.name }}</div>
</n-breadcrumb-item>
</n-breadcrumb>
</div>
</div>
<div class="container-top-tools">
<n-icon class="container-top-tools-item" size="15" @click="$emit('back')">
<ChevronBackOutline />
</n-icon>
<n-icon class="container-top-tools-item" size="14" @click="$emit('reload')">
<ReloadOutline class="container-top-tools-item-reload" />
</n-icon>
<n-dropdown trigger="click" :options="openMenuOption" @select="(key: string) => emit('menuSelect', key)">
<n-icon class="container-top-tools-item" size="14">
<EllipsisVertical />
</n-icon>
</n-dropdown>
</div>
</div>
</template>
<script setup lang="ts">
import { NBreadcrumbItem, NBreadcrumb, NIcon, NDropdown } from 'naive-ui'
import {
CloudOutline,
ChevronBackOutline,
ReloadOutline,
EllipsisVertical,
} from '@vicons/ionicons5'
import VirtualDirectory from '@/class/VirtualDirectory'
const props = defineProps<{
color: string;
index: number
currentDirectory: VirtualDirectory | undefined;
openMenuOption: {
key: string,
label: string,
[key: string]: any,
}[]
}>()
const emit = defineEmits<{
back: [],
reload: [],
menuSelect: [key: string]
'set-current-directory': [virtualDirectory: VirtualDirectory]
}>()
const handleClickBreadcrumbItem = (virtualDirectory: VirtualDirectory) => {
emit('set-current-directory', virtualDirectory)
}
</script>
<style scoped lang="scss">
.miao-directory-container-top {
height: 30px;
width: 100%;
user-select: none;
position: relative;
display: flex;
align-items: center;
overflow: hidden;
background-color: #f1f1f1;
.container-top-colorfulBar {
height: 70%;
width: 5px;
margin-left: 10px;
border-radius: 3px 0 0 3px;
}
.container-top-breadcrumb {
position: relative;
height: 70%;
width: calc(100% - 95px);
display: flex;
justify-content: flex-start;
align-items: center;
// overflow: hidden;
overflow-y: hidden;
overflow-x: hidden;
background-color: #ffffff;
padding: 0 5px;
border-radius: 0 3px 3px 0;
.container-top-breadcrumb-container {
position: absolute;
height: 100%;
right: 0;
top: 0;
min-width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
}
}
.container-top-tools {
position: relative;
height: 100%;
// width: 70px;
padding: 0 5px;
display: flex;
justify-content: space-around;
align-items: center;
.container-top-tools-item {
width: 20px;
height: 20px;
margin: 0 1px;
display: flex;
justify-content: center;
align-items: center;
background-color: #ffffff00;
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);
}
}
}
}
</style>
+5 -6
View File
@@ -1,9 +1,5 @@
<template>
<div
class="container"
@dragover="handleDragOver"
@dragleave="handleDragLeave"
@drop="handleDrop">
<div class="container" @dragover="handleDragOver" @dragleave="handleDragLeave" @drop="handleDrop">
<slot></slot>
<miao-mask v-model:show="showMask"></miao-mask>
</div>
@@ -63,8 +59,11 @@ const removeDirectory = async (files: File[]) => {
}
const handleDragOver = async (event: DragEvent) => {
showMask.value += 1
event.preventDefault()
if (showMask.value === 1) {
return
}
showMask.value = 1
}
const handleDragLeave = async () => {
+95
View File
@@ -0,0 +1,95 @@
<!-- 只适合用于渲染过程较为复杂的组件,不然可能得不偿失
这么泛用的组件,性能差点也能理解 -->
<template>
<div class="miao-lazy" ref="miaoLazyRoot" :style="!show ? { minHeight, minWidth } : {}">
<slot v-if="show" />
</div>
</template>
<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue';
const props = defineProps({
disableLazy: {
type: Boolean,
default: false,
},
// 仅在内容未加载时生效,用于占位
minHeight: {
type: String,
default: 'none',
},
minWidth: {
type: String,
default: 'none',
}
})
const miaoLazyRoot = ref<HTMLDivElement>()
const show = ref<boolean>(props.disableLazy)
const isVisible = (dom: HTMLDivElement) => {
const offset = dom.getBoundingClientRect().top
return offset > 0 && offset < 2000
}
const { showSlot, hideSlot, clearTimer } = (() => {
let timer: any
let timerInterval: any
const clearTimer = () => {
timer && clearTimeout(timer)
timerInterval && clearInterval(timerInterval)
timer = undefined
timerInterval = undefined
}
const hideSlot = () => {
clearTimer()
show.value = false
}
const showSlot = () => {
if (show.value === true) {
return
}
clearTimer()
// timer = setTimeout(() => {
if (!miaoLazyRoot.value || isVisible(miaoLazyRoot.value) === false) {
return
}
show.value = true
timerInterval = setInterval(() => {
if (show.value === false || miaoLazyRoot.value === undefined) {
return
}
if (isVisible(miaoLazyRoot.value) === false) {
hideSlot()
}
}, 1000)
// })
}
return { showSlot, hideSlot, clearTimer }
})()
onMounted(() => {
if (show.value === false) {
let options = {
threshold: 0
};
let observer: IntersectionObserver | undefined = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
showSlot()
// miaoLazyRoot.value && observer?.unobserve(miaoLazyRoot.value)
// observer = undefined
} else {
hideSlot()
}
}, options);
miaoLazyRoot.value && observer.observe(miaoLazyRoot.value);
}
})
onBeforeUnmount(() => {
clearTimer()
})
</script>
+147
View File
@@ -0,0 +1,147 @@
<template>
<div class="miao-message-provider" ref="rootRef">
<slot></slot>
<transition-group name="message-fade" tag="div" class="miao-message-provider-container">
<div class="miao-message" v-for="msg in messageList" :key="msg.id"
:style="{ maxWidth: maxMessageWidth + 'px' }">
<n-icon class="miao-message-item" size="18" :color="msg.iconColor">
<component :is="msg.icon"></component>
</n-icon>
<div class="miao-message-item miao-message-item-content">{{ msg.content }}</div>
</div>
</transition-group>
</div>
</template>
<script setup lang="ts">
import generateId from '@/hooks/generateId';
import { NIcon } from 'naive-ui';
import { computed, onMounted, ref, shallowReactive } from 'vue';
import { InformationCircle, CheckmarkCircle, CloseCircle } from '@vicons/ionicons5'
interface MessageOptions {
type?: 'info' | 'success' | 'error'
timeout?: number
id?: number
}
interface Message {
icon: any,
timer: any,
iconColor: string,
content: string,
}
const iconMap = {
'info': { icon: InformationCircle, color: 'blue' },
'success': { icon: CheckmarkCircle, color: 'green' },
'error': { icon: CloseCircle, color: 'red' },
}
const messageMap = shallowReactive<Record<string, Message | undefined>>({})
const rootRef = ref<HTMLDivElement>()
const maxMessageWidth = ref<number>(-1)
const messageList = computed(() => {
return Object.keys(messageMap).filter(v => messageMap[v] !== undefined).map(v => ({
id: v,
...messageMap[v],
}))
})
const message = (content: string, options?: MessageOptions) => {
let timer: any
const { timeout = 0, type = 'info', id = generateId() } = options ?? {}
if (timeout > 0) {
messageMap[id]?.timer && clearTimeout(messageMap[id]?.timer)
timer = setTimeout(() => {
messageMap[id] = undefined
}, timeout)
}
messageMap[id] = {
icon: iconMap[type].icon,
iconColor: iconMap[type].color,
content,
timer
}
return (newContent: string, newOptions?: MessageOptions) => {
newOptions = newOptions ?? {}
newOptions.id = id
message(newContent, newOptions)
}
}
onMounted(async () => {
// const set = message('test', { timeout: 5000 })
// setTimeout(() => {
// set('miao', { type: 'success' })
// }, 1000);
const observer = new ResizeObserver(entries => {
for (let entry of entries) {
maxMessageWidth.value = entry.contentRect.width * 0.8;
}
});
if (rootRef.value) {
observer.observe(rootRef.value);
}
})
defineExpose({ message });
</script>
<style scoped lang="scss">
.miao-message-provider {
width: 100%;
height: 100%;
position: relative;
.miao-message-provider-container {
position: absolute;
width: 0;
height: 0;
left: 50%;
top: 30px;
display: flex;
flex-direction: column;
align-items: center;
overflow: visible;
.miao-message {
display: flex;
align-items: center;
width: max-content;
background-color: rgb(249, 249, 249);
padding: 5px 10px;
background-color: rgb(255 255 255);
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);
border-radius: 5px;
user-select: none;
margin-top: 10px;
.miao-message-item {
margin: 0 5px;
}
.miao-message-item-content {
white-space: pre-wrap;
}
}
}
.message-fade-move,
.message-fade-enter-active,
.message-fade-leave-active {
transition: all 0.5s ease;
}
.message-fade-enter-from,
.message-fade-leave-to {
opacity: 0;
transform: translateX(30px);
}
.message-fade-leave-active {
position: absolute;
}
}
</style>
+20
View File
@@ -98,4 +98,24 @@ export default function init() {
return false
}
)
pluginCenter.registerComponent(
"miaoImages",
"图片浏览",
async () => (await import("@/views/miaoImages.vue")).default,
(vDirs, vFiles) => {
if (vDirs.length === 0 && vFiles.length === 0) {
return false;
}
if( vDirs.length ) {
return true
}
for (let vf of vFiles)
for (let end of ["xbm", "tif", "pjp", "svgz", "jpg", "jpeg", "ico", "tiff", "gif", "svg", "jfif", "webp", "png", ".bmp", "pjpeg", "avif"]) {
if (vf.name.endsWith(end)) {
return true
}
}
return false;
}
);
}
+1 -1
View File
@@ -43,5 +43,5 @@ export const filePicker = (() => {
})();
export default {
filePicker
filePicker,
};
+1 -1
View File
@@ -3,7 +3,7 @@ import { Reactive, reactive } from "vue"
let views: Reactive<VirtualPages>
export default function useViretualPages(){
export default function useVirtualPages(){
if(views === undefined) {
// views = reactive<VirtualPage[]>([])
views = reactive(new VirtualPages())
+32 -9
View File
@@ -1,16 +1,21 @@
<template>
<div class="codemirror-container" ref="rootRef" :class="`codemirror-container-${theme}`">
<div class="codemirror-container-top">
<div class="codemirror-container-btn codemirror-container-btn-save" @click="handleSave">保存</div>
<div class="codemirror-container-btn codemirror-container-btn-save" @click="handleReset">恢复到上次保存</div>
<miao-message-provider ref="miaoMessage">
<div class="codemirror-container" ref="rootRef" :class="`codemirror-container-${theme}`">
<div class="codemirror-container-top">
<div class="codemirror-container-btn codemirror-container-btn-save" @click="handleSave">保存</div>
<div class="codemirror-container-btn codemirror-container-btn-save" @click="handleReset">恢复到上次保存</div>
</div>
<div class="codemirror-container-main">
<NScrollbar style="max-height: calc( 100% );">
<codemirror v-model="codeData" :extensions="extensions" />
</NScrollbar>
</div>
</div>
<NScrollbar>
<codemirror v-model="codeData" :extensions="extensions" :style="{ height: '100%' }" />
</NScrollbar>
</div>
</miao-message-provider>
</template>
<script setup lang="ts">
import miaoMessageProvider from '@/components/miaoMessageProvider.vue'
import { VirtualFile } from '@/class/VirtualDirectory'
import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
import { onMounted, ref } from 'vue'
@@ -23,6 +28,7 @@ const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
required: true
})
const miaoMessage = ref<InstanceType<typeof miaoMessageProvider>>()
const vFile = ref<VirtualFile>()
const rootRef = ref<HTMLDivElement>()
// const _key = ref(Math.random())
@@ -34,6 +40,10 @@ const theme = ref<'light' | 'dark'>('light')
const handleSave = async () => {
if (bakData.value === codeData.value || !vFile.value) {
miaoMessage.value?.message('内容未改动', {
timeout: 3000,
type: 'info'
})
return
}
const parentDir = vFile.value?.parent
@@ -43,8 +53,14 @@ const handleSave = async () => {
)
const file = new File([new Blob([codeData.value ?? ''])], vFile.value.name)
bakData.value = codeData.value
miaoFetchApi.upload(file, parentDir)
const { response } = miaoFetchApi.upload(file, parentDir)
false && miaoFetchApi.upload(file_bak, parentDir)
await response
miaoMessage.value?.message('保存成功', {
timeout: 5000,
type: 'success'
})
}
const handleReset = async () => {
@@ -139,8 +155,10 @@ onMounted(async () => {
.codemirror-container {
width: 100%;
height: 100%;
overflow-y: hidden;
.codemirror-container-top {
height: 25px;
display: flex;
border-bottom: 1px solid #000;
}
@@ -160,6 +178,11 @@ onMounted(async () => {
background-color: #e8e8e8;
}
}
.codemirror-container-main {
height: calc(100% - 25px);
position: relative;
}
}
.codemirror-container-dark {
File diff suppressed because it is too large. Load diff
+185
View File
@@ -0,0 +1,185 @@
<template>
<miao-drop-handler @on-virtual-directory="handleDrop" @on-virtual-files="handleDrop">
<div class="miaoImage" ref="rootRef">
<n-scrollbar ref="NScrollbarRef">
<div class="miaoImage-container">
<div class="miaoImage-container-row" v-for="(src, index) in imageSrcList" :key="index">
<img :src="src" class="miaoImage-container-row-image" loading="lazy"
:class="activeImageIndex === index ? 'miaoImage-container-row-image-active' : ''"
@click="activeImageIndex = index" />
</div>
</div>
</n-scrollbar>
<miao-mask :show="activeImageIndex !== -1" @click="activeImageIndex = -1" class="miaoImage-mask">
<ChevronBack class="miaoImage-mask-btn miaoImage-mask-btn-back" @click="handleActiveImageIndexBack" />
<img :src="imageSrcList[activeImageIndex]" class="miaoImage-mask-active"
@click="e => e.stopPropagation()" draggable="false">
<ChevronForward class="miaoImage-mask-btn miaoImage-mask-btn-forward"
@click="handleActiveImageIndexForward" />
</miao-mask>
</div>
</miao-drop-handler>
</template>
<script setup lang="ts">
import miaoMask from '@/components/miaoMask.vue';
import miaoDropHandler from '@/components/miaoDropHandler.vue';
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
import { uniq } from 'lodash';
import { nextTick, onMounted, ref } from 'vue'
import { NScrollbar } from 'naive-ui';
import { ChevronBack, ChevronForward } from '@vicons/ionicons5'
const imageSuffixList = [
'xbm',
'tif',
'pjp',
'svgz',
'jpg',
'jpeg',
'ico',
'tiff',
'gif',
'svg',
'jfif',
'webp',
'png',
'bmp',
'pjpeg',
'avif'
]
const currentDirectories = defineModel<VirtualDirectory[]>('currentDirectories', {
required: true
})
const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
required: true
})
const NScrollbarRef = ref()
const rootRef = ref<any>()
const imageSrcList = ref<string[]>([])
const activeImageIndex = ref(-1)
const scrollToActiveImage = () => {
const dom = rootRef.value?.querySelector('.miaoImage-container-row-image-active')
NScrollbarRef.value.scrollTo({
top: dom.offsetTop - 30,
behavior: "smooth"
})
}
const handleActiveImageIndexBack = (e: any) => {
e.stopPropagation()
activeImageIndex.value = (activeImageIndex.value - 1 + imageSrcList.value.length) % imageSrcList.value.length
nextTick(scrollToActiveImage)
}
const handleActiveImageIndexForward = (e: any) => {
e.stopPropagation()
activeImageIndex.value = (activeImageIndex.value + 1 + imageSrcList.value.length) % imageSrcList.value.length
nextTick(scrollToActiveImage)
}
const handleDrop = (vItems: (VirtualFile | VirtualDirectory)[]) => {
if (vItems[0].type === 'directory') {
// @ts-ignore
currentDirectories.value = [...currentDirectories.value, ...vItems]
} else {
// @ts-ignore
currentFiles.value = [...currentFiles, ...vItems]
}
vItems.forEach(v => {
updateImageSrcList(v)
})
}
const updateImageSrcList = async (source: VirtualFile | VirtualDirectory) => {
let newSrcList: string[]
if (source.type === 'directory') {
await source.update()
newSrcList = source.files?.filter(v => imageSuffixList.includes(v.name.split('.').pop() ?? '')).map(v => v.url) ?? []
} else {
if (!imageSuffixList.includes(source.name.split('.').pop() ?? '')) {
return
}
newSrcList = [source.url]
}
imageSrcList.value = uniq([...imageSrcList.value, ...newSrcList])
}
onMounted(() => {
[...currentDirectories.value, ...currentFiles.value].forEach(updateImageSrcList)
})
</script>
<style scoped lang="scss">
.miaoImage {
width: 100%;
height: 100%;
position: relative;
display: flex;
flex-wrap: wrap;
gap: 10px;
.miaoImage-container {
width: 100%;
display: flex;
flex-wrap: wrap;
.miaoImage-container-row {
display: flex;
justify-content: center;
align-items: center;
width: 25%;
aspect-ratio: 1;
.miaoImage-container-row-image {
width: 80%;
aspect-ratio: 1;
object-fit: cover;
transition: width 0.25s;
box-shadow: 0 0 10px -5px;
cursor: pointer;
user-select: none;
&:hover {
width: 90%;
}
&-active {
width: 90%;
}
}
}
}
.miaoImage-mask {
background-color: rgba(0, 0, 0, 0.444);
}
.miaoImage-mask-active {
max-width: 80%;
max-height: 80%;
user-select: none;
}
.miaoImage-mask-btn {
color: #ffffff99;
width: 7%;
position: absolute;
cursor: pointer;
&-back {
left: 1%;
}
&-forward {
right: 1%;
}
}
}
</style>
+6 -6
View File
@@ -10,7 +10,7 @@
import { VirtualFile } from '@/class/VirtualDirectory'
import miaoDropHandler from '@/components/miaoDropHandler.vue'
import { onBeforeUnmount, onMounted, ref } from 'vue'
// import useViretualPages from '@/hooks/useVirtualPages';
// import useVirtualPages from '@/hooks/useVirtualPages';
import XGPlayer from 'xgplayer'
import '@/style/xgplayer.scss'
import TextTrack from 'xgplayer/es/plugins/track'
@@ -26,7 +26,7 @@ const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
required: true
})
// const views = useViretualPages()
// const views = useVirtualPages()
// const view = views.getView(props.id)
// const videoPath = ref<string>('');
@@ -55,7 +55,7 @@ const { setVideo } = (() => {
// console.log(srtToVtt(response.data))
const url = setUrl(new Blob([srtToVtt(response.data)]))
_list.push({
id: i.uid,
id: i.id,
url,
// 这个language会覆盖id的设置,导致无法切换字幕
// language: 'zh-cn',
@@ -66,7 +66,7 @@ const { setVideo } = (() => {
// console.log(assToVtt(response.data))
const url = setUrl(new Blob([assToVtt(response.data)]))
_list.push({
id: i.uid,
id: i.id,
url,
text: i.name
})
@@ -75,13 +75,13 @@ const { setVideo } = (() => {
// console.log(ssaToVtt(response.data))
const url = setUrl(new Blob([ssaToVtt(response.data)]))
_list.push({
id: i.uid,
id: i.id,
url,
text: i.name
})
} else {
_list.push({
id: i.uid,
id: i.id,
url: i.url,
text: i.name
})