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

feat: 添加prettier格式化代码

Browse Source
This commit is contained in:
539943419 committed 2024-12-25 19:44:18 +08:00
1 parent 5823d5876b
commit f33e9386cd
74 files changed
+1918 -1199
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.prettierrc.js
+104
View File
@@ -0,0 +1,104 @@
export default {
/**
* 换行宽度，当代码宽度达到多少时换行
* @default 80
* @type {number}
*/
printWidth: 80,
/**
* 缩进的空格数量
* @default 2
* @type {number}
*/
tabWidth: 3,
/**
* 是否使用制表符代替空格
* @default false
* @type {boolean}
*/
useTabs: false,
/**
* 是否在代码块结尾加上分号
* @default true
* @type {boolean}
*/
semi: false,
/**
* 是否使用单引号替代双引号
* @default false
* @type {boolean}
*/
singleQuote: true,
/**
* 对象属性的引号处理
* @default "as-needed"
* @type {"as-needed"|"consistent"|"preserve"}
*/
quoteProps: 'as-needed',
/**
* jsx中是否使用单引号替代双引号
* @default false
* @type {boolean}
*/
jsxSingleQuote: true,
/**
* 在jsx中使用是否单引号代替双引号
* @default false
* @type {boolean}
*/
/**
* 末尾是否加上逗号
* @default "es5"
* @type {"es5"|"none"|"all"}
*/
trailingComma: 'none',
/**
* 在对象，数组括号与文字之间加空格 "{ foo: bar }"
* @default true
* @type {boolean}
*/
bracketSpacing: true,
/**
* 把多行HTML (HTML, JSX, Vue, Angular)元素的>放在最后一行的末尾，而不是单独放在下一行(不适用于自关闭元素)。
* @default false
* @type {boolean}
*/
bracketSameLine: false,
/**
* 当箭头函数只有一个参数是否加括号
* @default "always"
* @type {"always"|"avoid"}
*/
arrowParens: 'always',
/**
* 为HTML、Vue、Angular和Handlebars指定全局空格敏感性
* @default "css"
* @type {"css"|"strict"|"ignore"}
*/
htmlWhitespaceSensitivity: 'ignore',
/**
* 是否缩进Vue文件中的<script>和<style>标记内的代码。有些人(比如Vue的创建者)不使用缩进来保存缩进级别，但这可能会破坏编辑器中的代码折叠。
* @default "always"
* @type {"always"|"avoid"}
*/
vueIndentScriptAndStyle: false,
/**
* 文件结束符
* @default "lf"
* @type {"lf"|"crlf"|"cr"|"auto"}
*/
endOfLine: 'crlf',
/**
* 因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
*/
proseWrap: 'never',
// 是否使用根目录下的EditorConfig配置文件
useEditorConfig: false,
/**
* HTML\VUE\JSX每行只有单个属性
* @default true
* @type {boolean}
*/
singleAttributePerLine: true,
disableLanguages: ['html']
}
package.json
+4 -1
View File
@@ -9,7 +9,8 @@
"build": "vue-tsc -b && vite build",
"build:auto": "pnpm run build && go env -w GOOS=windows GOARCH=amd64 && rm -rf ./src-server/web/* && cp -r ./dist/* ./src-server/web/ && cd ./src-server && go env -w GOOS=windows && go build -o ../miao-directory.exe",
"build:auto:release": "pnpm run build && rm -rf ./src-server/web/* && cp -r ./dist/* ./src-server/web/ && cd ./src-server && 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"
"preview": "vite preview",
"format": "prettier --write src/"
},
"dependencies": {
"@codemirror/lang-go": "^6.0.1",
@@ -51,6 +52,8 @@
"@types/node": "^22.1.0",
"@types/pdfjs-dist": "^2.10.378",
"@vitejs/plugin-vue": "^5.1.2",
"prettier": "^3.4.2",
"prettier-plugin-vue": "^1.1.6",
"rollup-plugin-visualizer": "^5.12.0",
"typescript": "^5.5.3",
"vite": "^5.4.0",
pnpm-lock.yaml
Generated
+27
View File
@@ -120,6 +120,12 @@ importers:
'@vitejs/plugin-vue':
specifier: ^5.1.2
version: 5.1.2(vite@5.4.0(@types/node@22.1.0)(sass@1.77.8))(vue@3.5.0(typescript@5.5.4))
prettier:
specifier: ^3.4.2
version: 3.4.2
prettier-plugin-vue:
specifier: ^1.1.6
version: 1.1.6
rollup-plugin-visualizer:
specifier: ^5.12.0
version: 5.12.0(rollup@4.20.0)
@@ -1101,6 +1107,19 @@ packages:
resolution: {integrity: sha512-Aweb9unOEpQ3ezu4Q00DPvvM2ZTUitJdNKeP/+uQgr1IBIqu574IaZoURId7BKtWMREwzKa9OgzPzezWGPWFQw==}
engines: {node: ^10 || ^12 || >=14}
prettier-plugin-vue@1.1.6:
resolution: {integrity: sha512-trQ/oY+6hSsGe2zPIFThXMIM0TbxMEbk2VOrKjwHWuSz7OEo0rnumbz9a47OxVPCaAnGY9vZG8qDTiTmk9bq0A==}
prettier@2.8.8:
resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
engines: {node: '>=10.13.0'}
hasBin: true
prettier@3.4.2:
resolution: {integrity: sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==}
engines: {node: '>=14'}
hasBin: true
promise-polyfill@7.1.0:
resolution: {integrity: sha512-P6NJ2wU/8fac44ENORsuqT8TiolKGB2u0fEClPtXezn7w5cmLIjM/7mhPlTebke2EPr6tmqZbXvnX0TxwykGrg==}
@@ -2458,6 +2477,14 @@ snapshots:
picocolors: 1.0.1
source-map-js: 1.2.0
prettier-plugin-vue@1.1.6:
dependencies:
prettier: 2.8.8
prettier@2.8.8: {}
prettier@3.4.2: {}
promise-polyfill@7.1.0: {}
proxy-from-env@1.1.0: {}
src/App.vue
+91 -27
View File
@@ -1,5 +1,12 @@
<script setup lang="ts">
import { computed, onMounted, provide, ref, shallowRef, useTemplateRef } from 'vue'
import {
computed,
onMounted,
provide,
ref,
shallowRef,
useTemplateRef
} from 'vue'
import { NIcon, NScrollbar, NDropdown } from 'naive-ui'
import {
EyeOffOutline,
@@ -72,12 +79,16 @@ const handleClickTitle = (index: number) => {
}
}
const openMenuOption = computed(() => [
const openMenuOption = computed(
() =>
[
{
label: '分享',
key: 'share',
icon: renderIcon(QrCodeOutline)
}, pluginCenter.value ? {
},
pluginCenter.value
? {
label: '插件',
key: 'plugin',
children: [
@@ -92,8 +103,10 @@ const openMenuOption = computed(() => [
}))
],
icon: renderIcon(ExtensionPuzzleOutline)
} : undefined
].filter(v => v) as DropdownMixedOption[])
}
: undefined
].filter((v) => v) as DropdownMixedOption[]
)
const handleMenuSelect = async (key: string) => {
if (key === 'share') {
@@ -124,14 +137,25 @@ provide('rootDirectory', rootDirectory)
</script>
<template>
<div class="view" ref="viewRef">
<div
class="view"
ref="viewRef"
>
<miao-message-provider ref="messageProviderRef">
<div class="view-controller">
<n-scrollbar x-scrollable>
<div class="tabs-container">
<transition-group name="tab">
<div class="tab" v-for="(view, index) of views._views" :key="view.id">
<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)}...`
@@ -139,12 +163,26 @@ provide('rootDirectory', rootDirectory)
}}
</span>
<div class="tab-control">
<div class="tab-point" :style="{ backgroundColor: view.color }"></div>
<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" />
<div
class="tab-point"
:style="{ backgroundColor: view.color }"
></div>
<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="
<n-icon
class="tag-control-icon icon"
@click="
createView(
view.component,
view.name,
@@ -152,10 +190,15 @@ provide('rootDirectory', rootDirectory)
view.currentFiles,
index + 1
)
" v-if="view.allowCopy">
"
v-if="view.allowCopy"
>
<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>
@@ -165,7 +208,11 @@ provide('rootDirectory', rootDirectory)
</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>
@@ -175,20 +222,37 @@ provide('rootDirectory', rootDirectory)
</div>
<div class="view-container">
<!-- <transition-group name="page"> -->
<div class="view-container-item" v-for="(view, index) of views._views"
:class="!view.visible ? 'view-container-item-hidden' : ''" :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" :view="view"
:views="views" @exit="deleteView(index)"></component>
<div
class="view-container-item"
v-for="(view, index) of views._views"
:class="!view.visible ? 'view-container-item-hidden' : ''"
: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"
:view="view"
:views="views"
@exit="deleteView(index)"
></component>
</div>
<!-- </transition-group> -->
</div>
</miao-message-provider>
</div>
<!-- 模态框展示，用来显示分享二维码，设置菜单之类的东西 -->
<MiaoMask v-model:show="showModal" @click="showModal = false">
<component @click="(e: any) => e.stopPropagation()" :is="modalData?.component" v-bind="modalData?.props">
</component>
<MiaoMask
v-model:show="showModal"
@click="showModal = false"
>
<component
@click="(e: any) => e.stopPropagation()"
:is="modalData?.component"
v-bind="modalData?.props"
></component>
</MiaoMask>
</template>
@@ -197,7 +261,6 @@ $controller-height: 25px;
$tag-width: 170px;
.view {
background-color: #ffffff;
position: relative;
height: 100%;
@@ -326,7 +389,9 @@ $tag-width: 170px;
height: 100%;
min-width: 180px;
opacity: 1;
transition: flex .25s ease, opacity .25s ease;
transition:
flex 0.25s ease,
opacity 0.25s ease;
}
.view-container-item-hidden {
@@ -364,7 +429,6 @@ $tag-width: 170px;
.view {
.view-controller {
.tabs-container {
.tab-move,
.tab-enter-active {
transition: all 0.2s ease;
src/class/PluginCenter.ts
+102 -62
View File
@@ -1,61 +1,70 @@
import useVirtualPages from "@/hooks/useVirtualPages";
import VirtualDirectory, { VirtualFile } from "./VirtualDirectory";
import { ShallowRef, shallowRef } from "vue";
import { alertTipType, usePluginHooksType } from "@/types/type";
import VirtualPage, { VirtualPages } from "./VirtualPage";
import useRootVDirectory from "@/hooks/useRootVDirectory";
import useVirtualPages from '@/hooks/useVirtualPages'
import VirtualDirectory, { VirtualFile } from './VirtualDirectory'
import { ShallowRef, shallowRef } from 'vue'
import { alertTipType, usePluginHooksType } from '@/types/type'
import VirtualPage, { VirtualPages } from './VirtualPage'
import useRootVDirectory from '@/hooks/useRootVDirectory'
export enum PluginGroup {
default = "default",
mainMenu = "mainMenu",
default = 'default',
mainMenu = 'mainMenu',
// 导入的时候会立即执行函数一次
immediately = "immediately"
immediately = 'immediately'
}
export interface registerComponentOption {
key: string;
name: string;
icon?: any;
getComponent: () => Promise<any>;
group?: PluginGroup[];
filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => boolean;
disable?: boolean;
exitConfirm?: boolean;
key: string
name: string
icon?: any
getComponent: () => Promise<any>
group?: PluginGroup[]
filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => boolean
disable?: boolean
exitConfirm?: boolean
// 若为true，则只会创建一个页面，当存在已创建页面则会直接将VFile和VDir加到curr里面
single?: boolean;
priority?: number;
single?: boolean
priority?: number
}
export type Plugin = {
// 用于显示的名字
name: string;
name: string
// 代表插件的icon
icon?: ShallowRef<any>;
icon?: ShallowRef<any>
// 是否禁用插件
disable: boolean;
disable: boolean
// 插件所属的group，用于区分插件使用的场合
group: PluginGroup[];
group: PluginGroup[]
// 插件优先级
priority: number;
priority: number
// 判断在未禁用时是否可以使用这个组件
// 使用组件即调用下面的func
filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[], VPages: VirtualPages) => boolean;
func: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[], hooks: usePluginHooksType, ...args: any[]) => void;
};
filter: (
VDirectories: VirtualDirectory[],
VFiles: VirtualFile[],
VPages: VirtualPages
) => boolean
func: (
VDirectories: VirtualDirectory[],
VFiles: VirtualFile[],
hooks: usePluginHooksType,
...args: any[]
) => void
}
export default class PluginCenter {
constructor(globalAlertTip: alertTipType) {
this.pluginsMap = {};
this.globalAlertTip = globalAlertTip;
this.pluginsMap = {}
this.globalAlertTip = globalAlertTip
}
pluginsMap: {
[key: string]: Plugin;
};
[key: string]: Plugin
}
globalAlertTip: alertTipType;
globalAlertTip: alertTipType
register(key: string, plugin: Plugin) {
this.pluginsMap[key] = plugin;
this.pluginsMap[key] = plugin
if (plugin.group.includes(PluginGroup.immediately)) {
this.usePlugin(key, [], [], this.usePluginHook)
}
@@ -69,9 +78,20 @@ export default class PluginCenter {
* 便捷地注册一个组件为插件，触发时直接用新页面打开，页面名为key
*/
registerComponent(option: registerComponentOption): void {
const { key, name, getComponent, icon, filter, group = [PluginGroup.default], disable = false, exitConfirm = false, single = false, priority = 0 } = option;
let _component: any;
const views = useVirtualPages();
const {
key,
name,
getComponent,
icon,
filter,
group = [PluginGroup.default],
disable = false,
exitConfirm = false,
single = false,
priority = 0
} = option
let _component: any
const views = useVirtualPages()
this.register(key, {
name,
filter,
@@ -79,59 +99,69 @@ export default class PluginCenter {
group,
disable,
priority,
func: async (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => {
func: async (
VDirectories: VirtualDirectory[],
VFiles: VirtualFile[]
) => {
if (filter(VDirectories, VFiles) === false) {
return;
return
}
if (_component === undefined) {
const setAlertTip = this.globalAlertTip(`加载 ${name} 插件中`);
_component = await getComponent();
const setAlertTip = this.globalAlertTip(`加载 ${name} 插件中`)
_component = await getComponent()
setAlertTip &&
setAlertTip(`加载 ${name} 插件完成`, {
type: "success",
type: 'success',
timeout: 2000
});
})
}
const _findRes = views.find(_component) as VirtualPage[];
const _findRes = views.find(_component) as VirtualPage[]
if (single && _findRes.length !== 0) {
const view = _findRes[0];
view.currentFiles = [...view.currentFiles, ...VFiles];
view.currentDirectories = [...view.currentDirectories, ...VDirectories];
const view = _findRes[0]
view.currentFiles = [...view.currentFiles, ...VFiles]
view.currentDirectories = [
...view.currentDirectories,
...VDirectories
]
} else {
views.push(_component, key, VDirectories, VFiles, {
VirtualPageOption: {
exitConfirm,
allowCopy: single === false
}
});
})
}
}
});
})
}
getUsablePlugin(
VDirectories: VirtualDirectory[],
VFiles: VirtualFile[],
option?: {
group?: PluginGroup[];
group?: PluginGroup[]
}
) {
const { group = [PluginGroup.default] } = option ?? {};
const usableList = [];
const views = useVirtualPages();
const { group = [PluginGroup.default] } = option ?? {}
const usableList = []
const views = useVirtualPages()
for (let key of Object.keys(this.pluginsMap)) {
const _plugin = this.pluginsMap[key];
if (!_plugin.disable && _plugin.group.filter(v => group.includes(v)).length > 0 && _plugin.filter(VDirectories, VFiles, views)) {
usableList.push(key);
const _plugin = this.pluginsMap[key]
if (
!_plugin.disable &&
_plugin.group.filter((v) => group.includes(v)).length > 0 &&
_plugin.filter(VDirectories, VFiles, views)
) {
usableList.push(key)
}
}
const res = usableList.map(key => ({
const res = usableList.map((key) => ({
key,
...this.pluginsMap[key]
}));
res.sort((a, b) => b.priority - a.priority);
return res;
}))
res.sort((a, b) => b.priority - a.priority)
return res
}
get usePluginHook(): usePluginHooksType {
@@ -143,13 +173,23 @@ export default class PluginCenter {
}
}
usePlugin(key: string, VDirectories?: VirtualDirectory[], VFiles?: VirtualFile[], ...args: any[]): void;
usePlugin(key: string, VDirectories?: VirtualDirectory[], VFiles?: VirtualFile[], ...args: any[]) {
usePlugin(
key: string,
VDirectories?: VirtualDirectory[],
VFiles?: VirtualFile[],
...args: any[]
): void
usePlugin(
key: string,
VDirectories?: VirtualDirectory[],
VFiles?: VirtualFile[],
...args: any[]
) {
this.pluginsMap[key].func(
VDirectories ?? [],
VFiles ?? [],
this.usePluginHook,
...args
);
)
}
}
src/class/UploadQueue.ts
+79 -75
View File
@@ -1,98 +1,102 @@
import generateId from "@/hooks/generateId";
import useMiaoFetchApi from "@/hooks/useMiaoFetchApi";
import VirtualDirectory from "./VirtualDirectory";
import generateId from '@/hooks/generateId'
import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
import VirtualDirectory from './VirtualDirectory'
const miaoFetchApi = useMiaoFetchApi();
const miaoFetchApi = useMiaoFetchApi()
export class UploadQueueItem {
constructor(
file: File,
targetDirectory: VirtualDirectory,
config?: {
onSuccess?: () => void;
onFailed?: () => void;
onSuccess?: () => void
onFailed?: () => void
}
) {
this.file = file;
this.targetDirectory = targetDirectory;
this.uid = generateId();
this.status = "waiting";
this.process = 0;
this.onSuccess = config && config.onSuccess;
this.onFailed = config && config.onFailed;
this.file = file
this.targetDirectory = targetDirectory
this.uid = generateId()
this.status = 'waiting'
this.process = 0
this.onSuccess = config && config.onSuccess
this.onFailed = config && config.onFailed
}
uid: number;
file: File;
targetDirectory: VirtualDirectory;
status: "waiting" | "uploading" | "success" | "failed";
process: number;
failedReason: unknown | undefined;
uid: number
file: File
targetDirectory: VirtualDirectory
status: 'waiting' | 'uploading' | 'success' | 'failed'
process: number
failedReason: unknown | undefined
onSuccess?: () => void;
onFailed?: () => void;
onSuccess?: () => void
onFailed?: () => void
_abort: (() => void | undefined) | undefined;
_status: Promise<any> | undefined;
_abort: (() => void | undefined) | undefined
_status: Promise<any> | undefined
/**
* 开始上传文件
*/
startUpload() {
if (this.status === "uploading") {
return;
if (this.status === 'uploading') {
return
}
const { abort, response } = miaoFetchApi.upload(this.file, this.targetDirectory, {
onProcess: percent => {
this.process = percent;
const { abort, response } = miaoFetchApi.upload(
this.file,
this.targetDirectory,
{
onProcess: (percent) => {
this.process = percent
}
});
this._abort = abort;
this._status = response;
this.status = "uploading";
}
)
this._abort = abort
this._status = response
this.status = 'uploading'
response
.then(() => {
this.status = "success";
this.onSuccess && this.onSuccess();
this._abort = undefined;
this._status = undefined;
this.status = 'success'
this.onSuccess && this.onSuccess()
this._abort = undefined
this._status = undefined
})
.catch((e) => {
this.status = 'failed'
this.failedReason = e
this.onFailed && this.onFailed()
})
.catch(e => {
this.status = "failed";
this.failedReason = e;
this.onFailed && this.onFailed();
});
}
/**
* 终止上传文件
*/
abortUpload() {
this._abort && this._abort();
this.status = "failed";
this.failedReason = "abort";
this._abort && this._abort()
this.status = 'failed'
this.failedReason = 'abort'
}
}
export default class UploadQueue {
constructor() {
this.uid = generateId();
this.queue = [];
this.mode = "serial";
this.uid = generateId()
this.queue = []
this.mode = 'serial'
}
uid: number;
queue: UploadQueueItem[];
current: UploadQueueItem | undefined;
uid: number
queue: UploadQueueItem[]
current: UploadQueueItem | undefined
// 未来再去实现，目前就是串行的
// 好像也不用去实现
mode: "serial" | "parallel";
mode: 'serial' | 'parallel'
get status() {
for (let item of this.queue) {
if (item.status === "uploading") {
return "busy";
if (item.status === 'uploading') {
return 'busy'
}
}
return "free";
return 'free'
}
/**
@@ -100,8 +104,8 @@ export default class UploadQueue {
*/
get nextUplpadItem() {
for (let item of this.queue) {
if (item.status === "waiting") {
return item;
if (item.status === 'waiting') {
return item
}
}
}
@@ -110,11 +114,11 @@ export default class UploadQueue {
* 开始串行的上传循环
*/
loop() {
if (this.status === "busy") {
return;
if (this.status === 'busy') {
return
}
if (this.nextUplpadItem) {
this.nextUplpadItem.startUpload();
this.nextUplpadItem.startUpload()
}
}
@@ -132,34 +136,34 @@ export default class UploadQueue {
/**
* 每个文件上传完成以后都会触发一遍的回调函数
*/
onFinish?: () => void;
onFinish?: () => void
/**
* 是否立即开始上传，若否则按队列顺序一个一个上传
*/
immediately?: boolean;
immediately?: boolean
}
) {
const onFinish = option?.onFinish;
const immediately = option?.immediately ?? false;
const uploadQueue = files.map(file => {
const onFinish = option?.onFinish
const immediately = option?.immediately ?? false
const uploadQueue = files.map((file) => {
return new UploadQueueItem(file, targetDirectory, {
onSuccess: () => {
this.loop();
onFinish && onFinish();
this.loop()
onFinish && onFinish()
},
onFailed: () => {
this.loop();
this.loop()
}
});
});
this.queue.push(...uploadQueue);
})
})
this.queue.push(...uploadQueue)
if (!immediately) {
this.loop();
this.loop()
} else {
uploadQueue.forEach(item => {
item.startUpload();
});
uploadQueue.forEach((item) => {
item.startUpload()
})
}
return uploadQueue;
return uploadQueue
}
}
src/class/VirtualPage.ts
+5 -11
View File
@@ -13,13 +13,7 @@ export interface ViewsPushOption {
}
const getRandomWebSafeColor = (() => {
const webSafeColors = [
'#009900',
'#999900',
'#009999',
'#990099',
'#0000ee'
]
const webSafeColors = ['#009900', '#999900', '#009999', '#990099', '#0000ee']
let counter = 0
return () => {
const color = webSafeColors[counter % webSafeColors.length]
@@ -169,18 +163,18 @@ export class VirtualPages {
/**
* 返回第一个使用此组件的页面
*/
find(component: Component) : VirtualPage[]
find(component: Component): VirtualPage[]
/**
* 通过页面名查找
*/
find(name: string) : VirtualPage[]
find(name: string): VirtualPage[]
find(input: unknown) {
// console.log(this)
if (typeof input === 'string') {
return this._views.filter(v => v.component.name === input);
return this._views.filter((v) => v.component.name === input)
} else {
return this._views.filter(v => v.component === input);
return this._views.filter((v) => v.component === input)
}
}
}
src/components/miaoAlertTipProvider.vue
+50 -27
View File
@@ -1,36 +1,57 @@
<template>
<div class="miao-message-provider" ref="rootRef">
<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">
<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 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'
import { AlertTipMessageOptions } from '@/types/type';
import generateId from '@/hooks/generateId'
import { NIcon } from 'naive-ui'
import { computed, onMounted, ref, shallowReactive } from 'vue'
import {
InformationCircle,
CheckmarkCircle,
CloseCircle
} from '@vicons/ionicons5'
import { AlertTipMessageOptions } from '@/types/type'
interface Message {
icon: any,
timer: any,
iconColor: string,
content: string,
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' },
info: { icon: InformationCircle, color: 'blue' },
success: { icon: CheckmarkCircle, color: 'green' },
error: { icon: CloseCircle, color: 'red' }
}
const messageMap = shallowReactive<Record<string, Message | undefined>>({})
@@ -38,9 +59,9 @@ const rootRef = ref<HTMLDivElement>()
const maxMessageWidth = ref<number>(-1)
const messageList = computed(() => {
return Object.keys(messageMap).map(v => ({
return Object.keys(messageMap).map((v) => ({
id: v,
...messageMap[v],
...messageMap[v]
}))
})
const alertTip = (content: string, options?: AlertTipMessageOptions) => {
@@ -70,18 +91,17 @@ onMounted(async () => {
// setTimeout(() => {
// set('miao', { type: 'success' })
// }, 1000);
const observer = new ResizeObserver(entries => {
const observer = new ResizeObserver((entries) => {
for (let entry of entries) {
maxMessageWidth.value = entry.contentRect.width * 0.8;
maxMessageWidth.value = entry.contentRect.width * 0.8
}
});
})
if (rootRef.value) {
observer.observe(rootRef.value);
observer.observe(rootRef.value)
}
})
defineExpose({ alertTip });
defineExpose({ alertTip })
</script>
<style scoped lang="scss">
@@ -110,7 +130,10 @@ defineExpose({ alertTip });
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);
box-shadow:
0 3px 6px -4px rgba(0, 0, 0, 0.12),
0 6px 16px 0 rgba(0, 0, 0, 0.08),
0 9px 28px 8px rgba(0, 0, 0, 0.05);
border-radius: 5px;
user-select: none;
margin-top: 10px;
src/components/miaoContextMenu.vue
+20 -8
View File
@@ -1,18 +1,31 @@
<!-- 基于naiveui的下拉菜单实现的自定义下拉菜单 -->
<!-- 支持长按和右键呼出下拉菜单 -->
<template>
<div class="main" @contextmenu="handleContextMenu" @mouseleave="handleMainMouseLeave">
<div
class="main"
@contextmenu="handleContextMenu"
@mouseleave="handleMainMouseLeave"
>
<slot></slot>
</div>
<n-dropdown placement="bottom-start" trigger="manual" :x="x" :y="y" :options="props.options"
:show="showContextMenu > 0" :on-clickoutside="onClickoutside" @select="handleSelect" @mouseleave="
showContextMenu -= 1" @mouseenter="showContextMenu += 1" />
<n-dropdown
placement="bottom-start"
trigger="manual"
:x="x"
:y="y"
:options="props.options"
:show="showContextMenu > 0"
:on-clickoutside="onClickoutside"
@select="handleSelect"
@mouseleave="showContextMenu -= 1"
@mouseenter="showContextMenu += 1"
/>
</template>
<script setup lang="ts">
import { NDropdown } from 'naive-ui/es/dropdown';
import { DropdownOption } from 'naive-ui/es/dropdown';
import { nextTick, ref } from 'vue';
import { NDropdown } from 'naive-ui/es/dropdown'
import { DropdownOption } from 'naive-ui/es/dropdown'
import { nextTick, ref } from 'vue'
const props = defineProps<{
options: DropdownOption[]
@@ -76,7 +89,6 @@ const handleContextMenu = (e: MouseEvent) => {
// }
// }
</script>
<style>
src/components/miaoDraggableDiv.vue
+10 -5
View File
@@ -1,11 +1,15 @@
<template>
<div ref="divRef" @dragstart="onDs" :draggable="isDraggable">
<div
ref="divRef"
@dragstart="onDs"
:draggable="isDraggable"
>
<slot></slot>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { onMounted, ref } from 'vue'
// import Sortable from 'sortablejs'
const props = defineProps<{
@@ -24,9 +28,10 @@ const onDs = (e: DragEvent) => {
onMounted(() => {
divRef?.value?.addEventListener('dragstart', function (ev) {
var img = new Image();
img.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cpath /%3E%3C/svg%3E";
ev?.dataTransfer?.setDragImage(img, 0, 0);
var img = new Image()
img.src =
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cpath /%3E%3C/svg%3E"
ev?.dataTransfer?.setDragImage(img, 0, 0)
})
})
</script>
src/components/miaoDropHandler.vue
+3 -2
View File
@@ -3,7 +3,8 @@
class="container"
@dragover="handleDragOver"
@dragleave="handleDragLeave"
@drop="handleDrop">
@drop="handleDrop"
>
<slot></slot>
<miao-mask v-model:show="showMask"></miao-mask>
</div>
@@ -71,7 +72,7 @@ const removeDirectory = async (files: File[]) => {
const check = (event: DragEvent) => {
return (
[
...(event.dataTransfer?.types?.filter(v=>v === 'Files') ?? []),
...(event.dataTransfer?.types?.filter((v) => v === 'Files') ?? []),
...(dataBus.get('dragData_vFiles') ?? []),
...(dataBus.get('dragData_vDirectory') ?? [])
].length !== 0
src/components/miaoLazyDiv.vue
+26 -11
View File
@@ -1,14 +1,26 @@
<!-- 只适合用于渲染过程较为复杂的组件，不然可能得不偿失
这么泛用的组件，性能差点也能理解 -->
<template>
<div class="miao-lazy" ref="miaoLazyRoot"
:style="!show ? { minHeight: _autoHeight !== undefined ? _autoHeight : props.minHeight, minWidth, margin } : {}">
<div
class="miao-lazy"
ref="miaoLazyRoot"
:style="
!show
? {
minHeight:
_autoHeight !== undefined ? _autoHeight : props.minHeight,
minWidth,
margin
}
: {}
"
>
<slot v-if="show" />
</div>
</template>
<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue';
import { onBeforeUnmount, onMounted, ref } from 'vue'
const props = defineProps({
// disable: {
@@ -17,20 +29,20 @@ const props = defineProps({
// },
disableLazy: {
type: Boolean,
default: false,
default: false
},
// 仅在内容未加载时生效，用于占位
minHeight: {
type: String,
default: 'none',
default: 'none'
},
minWidth: {
type: String,
default: 'none',
default: 'none'
},
margin: {
type: String,
default: 'none',
default: 'none'
},
autoHeight: {
type: Boolean,
@@ -97,9 +109,10 @@ onMounted(() => {
if (show.value === false) {
let options = {
threshold: 0
};
}
let observer: IntersectionObserver | undefined = new IntersectionObserver((entries) => {
let observer: IntersectionObserver | undefined = new IntersectionObserver(
(entries) => {
if (entries[0].isIntersecting) {
showSlot()
// miaoLazyRoot.value && observer?.unobserve(miaoLazyRoot.value)
@@ -107,8 +120,10 @@ onMounted(() => {
} else {
hideSlot()
}
}, options);
miaoLazyRoot.value && observer.observe(miaoLazyRoot.value);
},
options
)
miaoLazyRoot.value && observer.observe(miaoLazyRoot.value)
}
})
src/components/miaoMask.vue
+10 -4
View File
@@ -1,17 +1,23 @@
<template>
<transition name="transition">
<div class="mask-body" ref="maskBodyRef" v-show="showMask">
<div
class="mask-body"
ref="maskBodyRef"
v-show="showMask"
>
<slot></slot>
</div>
</transition>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { ref } from 'vue'
const maskBodyRef = ref<HTMLDivElement>()
const showMask = defineModel<boolean | number>('show', { default: false, required: true })
const showMask = defineModel<boolean | number>('show', {
default: false,
required: true
})
</script>
<style lang="scss" scoped>
.mask-body {
src/components/miaoPopupInput.vue
+9 -3
View File
@@ -1,6 +1,10 @@
<template>
<miao-mask v-model:show="showMask">
<n-card class="popup-card" :title="popupConfig?.title" size="medium">
<n-card
class="popup-card"
:title="popupConfig?.title"
size="medium"
>
{{ popupConfig?.content }}
<n-input
class="popup-input"
@@ -9,14 +13,16 @@
v-bind="popupConfig?.inputProps"
passively-activated
autofocus
v-if="popupConfig?.inputProps" />
v-if="popupConfig?.inputProps"
/>
<div class="popup-button-container">
<n-button
class="popup-button-container-button"
v-for="option in popupConfig?.options"
:key="option.label"
:type="option.type"
@click="_resolve && _resolve(option.key)">
@click="_resolve && _resolve(option.key)"
>
{{ option.label }}
</n-button>
</div>
src/config.ts
+5 -1
View File
@@ -1,4 +1,8 @@
const baseUrl = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
const baseUrl =
window.location.protocol +
'//' +
window.location.hostname +
(window.location.port ? ':' + window.location.port : '')
export default {
baseUrl,
src/hooks/buildFromTree.ts
+4 -4
View File
@@ -1,4 +1,4 @@
import VirtualDirectory, { Tree, VirtualFile } from "@/class/VirtualDirectory";
import VirtualDirectory, { Tree, VirtualFile } from '@/class/VirtualDirectory'
/**
* 通过VirtualDirectory的.tree重建文件夹树
@@ -7,9 +7,9 @@ import VirtualDirectory, { Tree, VirtualFile } from "@/class/VirtualDirectory";
*/
const buildFromTree = (data: Tree) => {
const root = new VirtualDirectory(data)
root.files = data.files?.map(v=>new VirtualFile(v, root))
root.directories = data.directories?.map(v=>buildFromTree(v))
root.files = data.files?.map((v) => new VirtualFile(v, root))
root.directories = data.directories?.map((v) => buildFromTree(v))
return root
}
export default buildFromTree;
export default buildFromTree
src/hooks/dateFormatter.ts
+21 -13
View File
@@ -1,20 +1,28 @@
export default function dateFormatter(date: Date, fmt: string) {
var o:any = {
"M+": date.getMonth() + 1, //月份
"d+": date.getDate(), //日
"h+": date.getHours(), //小时
"m+": date.getMinutes(), //分
"s+": date.getSeconds(), //秒
"q+": Math.floor((date.getMonth() + 3) / 3), //季度
"S": date.getMilliseconds() //毫秒
};
var o: any = {
'M+': date.getMonth() + 1, //月份
'd+': date.getDate(), //日
'h+': date.getHours(), //小时
'm+': date.getMinutes(), //分
's+': date.getSeconds(), //秒
'q+': Math.floor((date.getMonth() + 3) / 3), //季度
S: date.getMilliseconds() //毫秒
}
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
fmt = fmt.replace(
RegExp.$1,
(date.getFullYear() + '').substr(4 - RegExp.$1.length)
)
}
for (var k in o) {
if (new RegExp("(" + k + ")").test(fmt)) {
fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
if (new RegExp('(' + k + ')').test(fmt)) {
fmt = fmt.replace(
RegExp.$1,
RegExp.$1.length == 1
? o[k]
: ('00' + o[k]).substr(('' + o[k]).length)
)
}
}
return fmt;
return fmt
}
src/hooks/dropHandler.ts
+56 -51
View File
@@ -1,109 +1,114 @@
import config from "@/config";
import config from '@/config'
const { uploadSizeLimit } = config;
const { uploadSizeLimit } = config
export type dropHandlerHooks = {
/**
* 仅返回小于config.ts中大小限制的文件，不会返回文件夹
*/
onDropFiles?: (files: File[]) => void;
onDropFiles?: (files: File[]) => void
/**
* 当拖动时
*/
onOver?: () => void;
onOver?: () => void
/**
* 当进入时
*/
onEnter?: () => void;
onEnter?: () => void
/**
* 当离开时
*/
onLeave?: () => void;
onLeave?: () => void
/**
* 离开或是放下时都会触发
* @returns {any}
*/
onEnd?: () => void;
};
onEnd?: () => void
}
const isFile = (file: File) =>
new Promise(resolve => {
const reader = new FileReader();
new Promise((resolve) => {
const reader = new FileReader()
reader.onload = () => {
resolve(true);
reader.abort();
};
resolve(true)
reader.abort()
}
reader.onerror = () => {
resolve(false);
reader.abort();
};
reader.readAsText(file);
});
resolve(false)
reader.abort()
}
reader.readAsText(file)
})
/**
* 只保留文件，移去文件夹
* @param {File[]} files
*/
const filesFilter = async (files: File[]) => {
let index = 0;
let index = 0
while (index < files.length) {
const currentFile = files[index];
const _isFile = await isFile(currentFile);
const currentFile = files[index]
const _isFile = await isFile(currentFile)
if (_isFile) {
index += 1;
continue;
index += 1
continue
} else {
files.splice(index, 1);
continue;
files.splice(index, 1)
continue
}
}
};
}
export default function dropHandler(dom: HTMLDivElement, hooks?: dropHandlerHooks) {
export default function dropHandler(
dom: HTMLDivElement,
hooks?: dropHandlerHooks
) {
dom.addEventListener(
"dragenter",
'dragenter',
function (e) {
e.preventDefault();
e.stopPropagation();
hooks?.onEnter && hooks?.onEnter();
e.preventDefault()
e.stopPropagation()
hooks?.onEnter && hooks?.onEnter()
},
false
);
)
dom.addEventListener(
"dragover",
'dragover',
function (e) {
e.preventDefault();
e.stopPropagation();
hooks?.onOver && hooks?.onOver();
e.preventDefault()
e.stopPropagation()
hooks?.onOver && hooks?.onOver()
},
false
);
)
dom.addEventListener(
"dragleave",
'dragleave',
function (e) {
e.preventDefault();
e.stopPropagation();
hooks?.onLeave && hooks?.onLeave();
hooks?.onEnd && hooks.onEnd();
e.preventDefault()
e.stopPropagation()
hooks?.onLeave && hooks?.onLeave()
hooks?.onEnd && hooks.onEnd()
},
false
);
)
dom.addEventListener(
"drop",
'drop',
async function (e) {
// console.log(e, e.dataTransfer?.types);
e.preventDefault();
e.stopPropagation();
const files = [...(e.dataTransfer?.files ?? [])].filter(file => file.size < uploadSizeLimit);
await filesFilter(files);
hooks?.onDropFiles && hooks.onDropFiles(files);
hooks?.onEnd && hooks.onEnd();
e.preventDefault()
e.stopPropagation()
const files = [...(e.dataTransfer?.files ?? [])].filter(
(file) => file.size < uploadSizeLimit
)
await filesFilter(files)
hooks?.onDropFiles && hooks.onDropFiles(files)
hooks?.onEnd && hooks.onEnd()
},
false
);
)
}
src/hooks/init.ts
+2 -2
View File
@@ -1,5 +1,5 @@
import { alertTipType } from "@/types/type";
import initPlugin from "./init/initPlugin";
import { alertTipType } from '@/types/type'
import initPlugin from './init/initPlugin'
export default async function init(globalAlertTip: alertTipType) {
await initPlugin(globalAlertTip)
src/hooks/init/initPlugin.ts
+19 -15
View File
@@ -1,24 +1,28 @@
import usePluginCenter, { initPluginCenter } from "@/hooks/usePluginCenter";
import { Plugin, registerComponentOption } from "@/class/PluginCenter";
import { alertTipType, PluginExportType } from "@/types/type";
import usePluginCenter, { initPluginCenter } from '@/hooks/usePluginCenter'
import { Plugin, registerComponentOption } from '@/class/PluginCenter'
import { alertTipType, PluginExportType } from '@/types/type'
const initPlugin = async (globalAlertTip: alertTipType) => {
initPluginCenter(globalAlertTip);
const modulesFiles = import.meta.glob("@/plugins/**/export*.ts", { eager: true });
const pluginCenter = usePluginCenter();
initPluginCenter(globalAlertTip)
const modulesFiles = import.meta.glob('@/plugins/**/export*.ts', {
eager: true
})
const pluginCenter = usePluginCenter()
for (let pluginConfig of Object.values(modulesFiles)) {
const _config = pluginConfig as {
default: registerComponentOption | Plugin;
type: PluginExportType;
key?: string;
};
const { type, key } = _config;
default: registerComponentOption | Plugin
type: PluginExportType
key?: string
}
const { type, key } = _config
if (type === PluginExportType.component) {
pluginCenter.registerComponent(_config.default as registerComponentOption);
pluginCenter.registerComponent(
_config.default as registerComponentOption
)
} else if (type === PluginExportType.default) {
pluginCenter.register(key as string, _config.default as Plugin);
pluginCenter.register(key as string, _config.default as Plugin)
}
}
};
}
export default initPlugin;
export default initPlugin
src/hooks/miaoTools.ts
+1 -1
View File
@@ -54,7 +54,7 @@ export const renderIcon = (icon: any) => {
}
export const sleep = async (timeout: number) => {
await new Promise(_=>setTimeout(_, timeout))
await new Promise((_) => setTimeout(_, timeout))
}
export default {
src/hooks/useDataBus.ts
+12 -12
View File
@@ -1,26 +1,26 @@
import { reactive } from "vue";
import { reactive } from 'vue'
let dataStorage: {
[key: string | number] : any
};
[key: string | number]: any
}
export default function useDataBus() {
if(dataStorage === undefined) {
if (dataStorage === undefined) {
dataStorage = reactive({})
}
return {
set(key: string | number, value: any) {
dataStorage[key] = value;
return value;
dataStorage[key] = value
return value
},
pop(key: string | number) {
const value = dataStorage[key];
dataStorage[key] = undefined;
return value;
const value = dataStorage[key]
dataStorage[key] = undefined
return value
},
get(key: string | number) {
const value = dataStorage[key];
return value;
const value = dataStorage[key]
return value
}
}
};
}
src/hooks/useMiaoFetchApi.ts
+146 -117
View File
@@ -1,4 +1,4 @@
import VirtualDirectory, { VirtualFile } from "@/class/VirtualDirectory";
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
import {
getOption,
getResponse,
@@ -10,59 +10,64 @@ import {
cutOption,
mkdirOption,
getFileOption
} from "@/types/fetch";
import Config from "@/config";
import axios, { AxiosRequestConfig, AxiosResponse } from "axios";
} from '@/types/fetch'
import Config from '@/config'
import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'
export const useMiaoFetch = (option?: miaoFetchConfig) => {
const retry = option?.retry ?? 0;
const controller = new AbortController();
let flag = true;
const retry = option?.retry ?? 0
const controller = new AbortController()
let flag = true
return {
miaoFetch: async (config: AxiosRequestConfig<any>): Promise<AxiosResponse<any, any>> => {
let counter = 0;
let response: any;
let errList = [];
miaoFetch: async (
config: AxiosRequestConfig<any>
): Promise<AxiosResponse<any, any>> => {
let counter = 0
let response: any
let errList = []
while (flag && counter <= retry) {
try {
response = await axios({
...config,
signal: controller.signal
});
return response;
})
return response
} catch (_e) {
errList.push(_e);
counter += 1;
errList.push(_e)
counter += 1
}
}
throw errList;
throw errList
},
/**
* 强制终止miaoFetch
*/
abortMiaoFetch: () => {
flag = false;
controller.abort();
flag = false
controller.abort()
}
};
};
}
}
const miaoFetchApi = {
/**
* 获取对应文件夹下的数据
*/
async get(vDirectory: VirtualDirectory, option?: getOption): Promise<getResponse> {
const { baseUrl, api } = Config;
const url = `${baseUrl}${api.get}${vDirectory.path}`;
const retry = option?.retry ?? 0;
async get(
vDirectory: VirtualDirectory,
option?: getOption
): Promise<getResponse> {
const { baseUrl, api } = Config
const url = `${baseUrl}${api.get}${vDirectory.path}`
const retry = option?.retry ?? 0
const { miaoFetch } = useMiaoFetch({
retry
});
})
const response = await miaoFetch({
url
});
return response.data;
})
return response.data
},
/**
@@ -70,27 +75,33 @@ const miaoFetchApi = {
*/
getFile(vFile: VirtualFile, option?: getFileOption) {
// const { baseUrl, api } = Config
const url = vFile.url;
const retry = option?.retry ?? 0;
const axiosOption = option?.axiosOption ?? {};
const url = vFile.url
const retry = option?.retry ?? 0
const axiosOption = option?.axiosOption ?? {}
const { miaoFetch, abortMiaoFetch: abort } = useMiaoFetch({
retry
});
})
const response = miaoFetch({
url,
responseType: "arraybuffer",
responseType: 'arraybuffer',
onDownloadProgress(progressEvent) {
option && option.onProcess && option.onProcess(progressEvent.total ? progressEvent.loaded / progressEvent.total : -1);
option &&
option.onProcess &&
option.onProcess(
progressEvent.total
? progressEvent.loaded / progressEvent.total
: -1
)
},
...axiosOption
});
})
return {
response: new Promise<Uint8Array>(async resolve => {
resolve(new Uint8Array((await response).data));
response: new Promise<Uint8Array>(async (resolve) => {
resolve(new Uint8Array((await response).data))
}),
abort
};
}
},
/**
@@ -98,177 +109,195 @@ const miaoFetchApi = {
* 正常上传文件请使用uploadQueue
*/
upload(data: File, targetVDir: VirtualDirectory, option?: uploadOption) {
const { baseUrl, api } = Config;
const url = `${baseUrl}${api.upload}${targetVDir.path}`;
const retry = option?.retry ?? 0;
const { baseUrl, api } = Config
const url = `${baseUrl}${api.upload}${targetVDir.path}`
const retry = option?.retry ?? 0
const { miaoFetch, abortMiaoFetch } = useMiaoFetch({
retry
});
const sizeTotal = data.size;
})
const sizeTotal = data.size
const opType = option?.type ?? "write";
const opType = option?.type ?? 'write'
const formData = new FormData();
const formData = new FormData()
formData.append("file", data);
formData.append('file', data)
// 必须这样传，不然中文乱码
formData.append("fileName", data.name);
formData.append("operateType", opType);
formData.append('fileName', data.name)
formData.append('operateType', opType)
return {
abort: () => abortMiaoFetch(),
response: new Promise<{
message: "success" | "failed";
error?: string;
}>(async resolve => {
message: 'success' | 'failed'
error?: string
}>(async (resolve) => {
const response = await miaoFetch({
url,
method: "post",
method: 'post',
data: formData,
onUploadProgress(progressEvent) {
option && option.onProcess && option.onProcess(progressEvent.loaded / sizeTotal);
option &&
option.onProcess &&
option.onProcess(progressEvent.loaded / sizeTotal)
}
});
resolve(response.data);
})
};
resolve(response.data)
})
}
},
/**
* 在目标文件夹下创建新的文件夹
*/
mkdir(targetVDir: VirtualDirectory, newFolderName: string, option?: mkdirOption) {
const { baseUrl, api } = Config;
const url = `${baseUrl}${api.mkdir}${targetVDir.path}`;
mkdir(
targetVDir: VirtualDirectory,
newFolderName: string,
option?: mkdirOption
) {
const { baseUrl, api } = Config
const url = `${baseUrl}${api.mkdir}${targetVDir.path}`
const { miaoFetch } = useMiaoFetch({
retry: option?.retry ?? 0
});
})
return new Promise<{
message: "success" | "failed";
error?: string;
}>(async resolve => {
message: 'success' | 'failed'
error?: string
}>(async (resolve) => {
const response = await miaoFetch({
url,
method: "post",
method: 'post',
data: {
folderName: newFolderName
}
});
resolve(response.data);
});
})
resolve(response.data)
})
},
/**
* 在目标文件夹下创建新的空文件，实际上是通过upload空文件实现
*/
mkFile(targetVDir: VirtualDirectory, newFileName: string, option?: uploadOption) {
const emptyBlob = new Blob([]);
mkFile(
targetVDir: VirtualDirectory,
newFileName: string,
option?: uploadOption
) {
const emptyBlob = new Blob([])
const emptyFile = new File([emptyBlob], newFileName, {
type: "text/plain"
});
return this.upload(emptyFile, targetVDir, option);
type: 'text/plain'
})
return this.upload(emptyFile, targetVDir, option)
},
/**
* 删除对应的文件或文件夹，若为文件夹会递归删除
*/
delete(target: VirtualFile | VirtualDirectory, option?: deleteOption) {
const { baseUrl, api } = Config;
const url = `${baseUrl}${api.delete}${target.path}`;
const retry = option?.retry ?? 0;
const { baseUrl, api } = Config
const url = `${baseUrl}${api.delete}${target.path}`
const retry = option?.retry ?? 0
const { miaoFetch } = useMiaoFetch({
retry
});
})
return {
response: new Promise<{
eventId: number;
}>(async resolve => {
eventId: number
}>(async (resolve) => {
const response = await miaoFetch({
url,
method: "post"
});
resolve(response.data);
method: 'post'
})
};
resolve(response.data)
})
}
},
/**
* 重命名对应的文件或文件夹
*/
rename(target: VirtualFile | VirtualDirectory, newName: string, option?: renameOption) {
const { baseUrl, api } = Config;
const url = `${baseUrl}${api.rename}${target.path}`;
const retry = option?.retry ?? 0;
rename(
target: VirtualFile | VirtualDirectory,
newName: string,
option?: renameOption
) {
const { baseUrl, api } = Config
const url = `${baseUrl}${api.rename}${target.path}`
const retry = option?.retry ?? 0
const { miaoFetch } = useMiaoFetch({
retry
});
})
return {
response: new Promise<{
eventId: number;
}>(async resolve => {
eventId: number
}>(async (resolve) => {
const response = await miaoFetch({
url,
method: "post",
method: 'post',
data: { newName }
});
resolve(response.data);
})
};
resolve(response.data)
})
}
},
/**
* 剪切文件或文件夹
*/
cut(target: VirtualFile | VirtualDirectory, to: VirtualDirectory, option?: cutOption) {
const newPath = to.path;
const { baseUrl, api } = Config;
const url = `${baseUrl}${api.cut}${target.path}`;
const retry = option?.retry ?? 0;
cut(
target: VirtualFile | VirtualDirectory,
to: VirtualDirectory,
option?: cutOption
) {
const newPath = to.path
const { baseUrl, api } = Config
const url = `${baseUrl}${api.cut}${target.path}`
const retry = option?.retry ?? 0
const { miaoFetch } = useMiaoFetch({
retry
});
})
return {
response: new Promise<{
eventId: number;
}>(async resolve => {
eventId: number
}>(async (resolve) => {
const response = await miaoFetch({
url,
method: "post",
method: 'post',
data: { newPath }
});
resolve(response.data);
})
};
resolve(response.data)
})
}
},
/**
* 查询服务端操作事件的进展
*/
query(eventId: number, option?: queryOption) {
const { baseUrl, api } = Config;
const url = `${baseUrl}${api.query}`;
const retry = option?.retry ?? 0;
const { baseUrl, api } = Config
const url = `${baseUrl}${api.query}`
const retry = option?.retry ?? 0
const { miaoFetch } = useMiaoFetch({
retry
});
})
return {
response: new Promise<{
status: "process" | "success" | "failed";
error?: unknown;
}>(async resolve => {
status: 'process' | 'success' | 'failed'
error?: unknown
}>(async (resolve) => {
const response = await miaoFetch({
url,
method: "get",
method: 'get',
params: {
id: eventId
}
});
resolve(response.data);
})
};
resolve(response.data)
})
}
};
}
}
export default function useMiaoFetchApi() {
return miaoFetchApi;
return miaoFetchApi
}
src/hooks/usePluginCenter.ts
+5 -5
View File
@@ -1,15 +1,15 @@
import PluginCenter from "@/class/PluginCenter";
import { alertTipType } from "@/types/type";
import { reactive } from "vue";
import PluginCenter from '@/class/PluginCenter'
import { alertTipType } from '@/types/type'
import { reactive } from 'vue'
let pluginCenter: PluginCenter
export const initPluginCenter = (globalAlertTip: alertTipType) => {
if(!pluginCenter) {
if (!pluginCenter) {
pluginCenter = reactive(new PluginCenter(globalAlertTip))
}
}
export default function usePluginCenter(){
export default function usePluginCenter() {
return pluginCenter
}
src/hooks/useRootVDirectory.ts
+3 -3
View File
@@ -1,5 +1,5 @@
import VirtualDirectory from "@/class/VirtualDirectory";
import { reactive } from "vue";
import VirtualDirectory from '@/class/VirtualDirectory'
import { reactive } from 'vue'
const root = reactive(
new VirtualDirectory({
@@ -13,5 +13,5 @@ const root = reactive(
})
)
export default function useRootVDirectory() {
return root;
return root
}
src/hooks/useUploadQueue.ts
+3 -3
View File
@@ -1,10 +1,10 @@
import UploadQueue from "@/class/UploadQueue";
import { reactive } from "vue";
import UploadQueue from '@/class/UploadQueue'
import { reactive } from 'vue'
let uploadQueue: UploadQueue
export default () => {
if(uploadQueue === undefined){
if (uploadQueue === undefined) {
uploadQueue = reactive(new UploadQueue())
}
return uploadQueue
src/hooks/useVirtualPages.ts
+4 -4
View File
@@ -1,10 +1,10 @@
import { VirtualPages } from "@/class/VirtualPage"
import { Reactive, reactive } from "vue"
import { VirtualPages } from '@/class/VirtualPage'
import { Reactive, reactive } from 'vue'
let views: Reactive<VirtualPages>
export default function useVirtualPages(){
if(views === undefined) {
export default function useVirtualPages() {
if (views === undefined) {
// views = reactive<VirtualPage[]>([])
views = reactive(new VirtualPages())
}
src/plugins/copyFileUrl2Clipboard/copy.ts
+3 -3
View File
@@ -1,6 +1,6 @@
import { VirtualFile } from "@/class/VirtualDirectory"
import config from "@/config"
import { usePluginHooksType } from "@/types/type"
import { VirtualFile } from '@/class/VirtualDirectory'
import config from '@/config'
import { usePluginHooksType } from '@/types/type'
import copy2Clipboard from 'copy-to-clipboard'
const copy = (__: any, vFiles: VirtualFile[], hooks: usePluginHooksType) => {
src/plugins/copyFileUrl2Clipboard/export.ts
+13 -13
View File
@@ -1,29 +1,29 @@
import { Plugin, PluginGroup } from "@/class/PluginCenter";
import Copy from "./copy";
import { CopyOutline } from "@vicons/ionicons5";
import { PluginExportType } from "@/types/type";
import { shallowRef } from "vue";
import { Plugin, PluginGroup } from '@/class/PluginCenter'
import Copy from './copy'
import { CopyOutline } from '@vicons/ionicons5'
import { PluginExportType } from '@/types/type'
import { shallowRef } from 'vue'
const pluginConfig: Plugin = {
name: "复制链接",
name: '复制链接',
icon: shallowRef(CopyOutline),
filter: (vDirs, vFiles) => {
if (vDirs.length !== 0) {
return false;
return false
}
if (vFiles.length !== 1) {
return false;
return false
}
return true;
return true
},
disable: false,
group: [PluginGroup.default],
func: Copy,
priority: -1
};
}
export default pluginConfig;
export default pluginConfig
export const type = PluginExportType.default;
export const type = PluginExportType.default
export const key = 'miaoCopy';
export const key = 'miaoCopy'
src/plugins/fullScreen/export.ts
+11 -11
View File
@@ -1,23 +1,23 @@
import { Plugin, PluginGroup } from "@/class/PluginCenter";
import fullScreen from "./fullScreen";
import { ExpandOutline } from "@vicons/ionicons5";
import { PluginExportType } from "@/types/type";
import { shallowRef } from "vue";
import { Plugin, PluginGroup } from '@/class/PluginCenter'
import fullScreen from './fullScreen'
import { ExpandOutline } from '@vicons/ionicons5'
import { PluginExportType } from '@/types/type'
import { shallowRef } from 'vue'
const pluginConfig: Plugin = {
name: "全屏",
name: '全屏',
icon: shallowRef(ExpandOutline),
filter: () => {
return true;
return true
},
disable: false,
group: [PluginGroup.mainMenu],
func: fullScreen,
priority: -1
};
}
export default pluginConfig;
export default pluginConfig
export const type = PluginExportType.default;
export const type = PluginExportType.default
export const key = "fullScreen";
export const key = 'fullScreen'
src/plugins/miaoCodeMirror/miaoCodeMirror.vue
+19 -6
View File
@@ -1,17 +1,30 @@
<template>
<miao-message-provider ref="miaoMessage">
<div class="codemirror-container" ref="rootRef" :class="`codemirror-container-${theme}`">
<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
class="codemirror-container-btn codemirror-container-btn-save"
@click="handleSave"
>
保存
</div>
<div class="codemirror-container-btn codemirror-container-btn-save" @click="handleReset">
<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" />
<codemirror
v-model="codeData"
:extensions="extensions"
/>
</NScrollbar>
</div>
</div>
@@ -145,13 +158,13 @@ onMounted(async () => {
vFile.value = currentFiles.value[0]
const fileName = currentFiles.value[0].name
codeData.value = decoder.decode(
await (miaoFetchApi.getFile(currentFiles.value[0], {
await miaoFetchApi.getFile(currentFiles.value[0], {
axiosOption: {
headers: {
'Cache-Control': 'no-cache'
}
}
}).response)
}).response
)
bakData.value = codeData.value
extensions.value = [...(await getLangExtensions(fileName))]
src/plugins/miaoCrypto/export.ts
+2 -3
View File
@@ -5,8 +5,7 @@ import { PluginExportType } from '@/types/type'
const pluginConfig: registerComponentOption = {
key: 'miaoCrypto',
name: '文件加密',
getComponent: async () =>
(await import('./miaoCrypto.vue')).default,
getComponent: async () => (await import('./miaoCrypto.vue')).default,
filter: (vDirs, vFiles) => {
return true
if (vDirs.length !== 0) {
@@ -17,7 +16,7 @@ const pluginConfig: registerComponentOption = {
}
return vFiles[0].name.endsWith('txt')
},
disable: true,
disable: true
}
export default pluginConfig
src/plugins/miaoCrypto/miaoCrypto.vue
+27 -12
View File
@@ -2,20 +2,34 @@
<miao-drop-handler @on-virtual-files="handleDropVirtualFiles">
<div class="miaoCrypto-container">
<div class="miaoCrypto-container-encrypt miaoCrypto-container-item">
<n-scrollbar style="max-height: 100%">
<div v-for="item of workItemList" :key="item.id" class="miaoCrypto-container-item-item">
<div class="miaoCrypto-container-item-percentBar" :style="{
<div
v-for="item of workItemList"
:key="item.id"
class="miaoCrypto-container-item-item"
>
<div
class="miaoCrypto-container-item-percentBar"
:style="{
zIndex: 0,
width: item.getBufferProgress !== -1 ? `${item.getBufferProgress * 100}%` : `0%`,
width:
item.getBufferProgress !== -1
? `${item.getBufferProgress * 100}%`
: `0%`,
backgroundColor: 'blue'
}"></div>
<div class="miaoCrypto-container-item-percentBar" :style="{
}"
></div>
<div
class="miaoCrypto-container-item-percentBar"
:style="{
zIndex: 1,
width: item.status === 'finish' ? `100%` : `0%`,
backgroundColor: 'green'
}"></div>
<span class="miaoCrypto-container-item-content">{{ item.name }}{{ item.status }}</span>
}"
></div>
<span class="miaoCrypto-container-item-content">
{{ item.name }}{{ item.status }}
</span>
</div>
</n-scrollbar>
</div>
@@ -88,7 +102,7 @@ class Work {
item.isGettingBuffer = true
try {
item.buffer = await item.getBuffer()
} catch(e) {
} catch (e) {
item.status = 'error'
}
item.isGettingBuffer = false
@@ -148,7 +162,7 @@ onMounted(() => {
onUnmounted(() => {
encryptWork.abortLoop = true
encryptWork.queue.forEach(item => {
encryptWork.queue.forEach((item) => {
item.getBufferAbort && item.getBufferAbort()
})
})
@@ -173,7 +187,8 @@ onUnmounted(() => {
width: 95%;
height: 40px;
background-color: #fff;
box-shadow: 0 0 15px -7px rgba(0, 0, 0, 0.1725490196),
box-shadow:
0 0 15px -7px rgba(0, 0, 0, 0.1725490196),
0 0 3px 1px #43434359;
border-radius: 5px;
position: relative;
@@ -188,7 +203,7 @@ onUnmounted(() => {
.miaoCrypto-container-item-content {
position: relative;
z-index: 3
z-index: 3;
}
}
}
src/plugins/miaoDirectory/components/miaoDirectoryBottom.vue
+30 -28
View File
@@ -1,45 +1,47 @@
<template>
<div class="miao-directory-container-bottom" :style="{
backgroundColor:
index % 2 === 1 ? 'rgb(61 61 61)' : 'rgb(162 162 162)'
}">
<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')" />
<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')" />
<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>
</template>
<script setup lang="ts">
import { AddOutline, CloudUploadOutline } from '@vicons/ionicons5'
defineProps<{
<script setup lang="ts">
import { AddOutline, CloudUploadOutline } from '@vicons/ionicons5'
defineProps<{
index: number
}>()
}>()
const emit = defineEmits<{
const emit = defineEmits<{
'add-new-item': []
'pick-files-upload': []
}>()
</script>
}>()
</script>
<style scoped lang="scss">
.miao-directory-container-bottom {
<style scoped lang="scss">
.miao-directory-container-bottom {
height: 60px;
background-color: bisque;
display: flex;
@@ -73,5 +75,5 @@
}
}
}
}
</style>
}
</style>
src/plugins/miaoDirectory/components/miaoDirectoryItem.vue
+50 -21
View File
@@ -1,19 +1,51 @@
<template>
<miao-draggable-div class="miao-item" :isDraggable="!draggable" ref="itemRef" @on-drag-start="handleDragStart">
<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>
<miao-draggable-div
class="miao-item"
:isDraggable="!draggable"
ref="itemRef"
@on-drag-start="handleDragStart"
>
<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="{ maxWidth: clientWidth > 250 ? '80%' : '75%' }">{{ name }}</n-ellipsis>
<Icon
class="item-main-info-name-icon"
v-if="clientWidth <= 250"
></Icon>
<n-ellipsis
:style="{ maxWidth: clientWidth > 250 ? '80%' : '75%' }"
>
{{ name }}
</n-ellipsis>
</div>
<div class="item-main-info-date" v-if="time">
<div
class="item-main-info-date"
v-if="time"
>
{{ time }}
</div>
</div>
<miao-draggable-div class="item-main-dragBtn" :isDraggable="draggable">
<miao-draggable-div
class="item-main-dragBtn"
:isDraggable="draggable"
>
<ReorderFourOutline></ReorderFourOutline>
</miao-draggable-div>
</div>
@@ -34,12 +66,12 @@ import {
LogoVue,
PlayCircle,
Disc,
ReorderFourOutline,
ReorderFourOutline
} from '@vicons/ionicons5'
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
import dateFormatter from '@/hooks/dateFormatter'
import { NEllipsis } from 'naive-ui'
import { DropdownOption } from 'naive-ui/es/dropdown';
import { DropdownOption } from 'naive-ui/es/dropdown'
import miaoDraggableDiv from '@/components/miaoDraggableDiv.vue'
// import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
@@ -47,7 +79,7 @@ import miaoDraggableDiv from '@/components/miaoDraggableDiv.vue'
const props = defineProps<{
item: {
name: string,
name: string
type: 'directory' | 'file'
stats: {
mtimeMs: number
@@ -78,11 +110,11 @@ const clientWidth = ref<number>(666)
const name = props.name ?? props.item.name
const observer = new ResizeObserver(entries => {
const observer = new ResizeObserver((entries) => {
for (let entry of entries) {
clientWidth.value = entry.contentRect.width;
clientWidth.value = entry.contentRect.width
}
});
})
const time = computed(() => {
return dateFormatter(
@@ -119,9 +151,7 @@ const Icon = computed(() => {
['txt', 'doc', 'docs', 'docx', 'xls', 'xlsx'].includes(aft)
) {
return DocumentText
} else if (
['mp3', 'wav', 'ape', 'acc', 'ogg', 'flac'].includes(aft)
) {
} else if (['mp3', 'wav', 'ape', 'acc', 'ogg', 'flac'].includes(aft)) {
return Disc
} else if (
[
@@ -170,13 +200,13 @@ const handleDragStart = (e: DragEvent) => {
onMounted(() => {
if (mainRef.value) {
observer.observe(mainRef.value);
observer.observe(mainRef.value)
}
})
onBeforeUnmount(() => {
if (mainRef.value) {
observer.unobserve(mainRef.value);
observer.unobserve(mainRef.value)
}
})
</script>
@@ -290,7 +320,6 @@ onBeforeUnmount(() => {
&:hover {
background-color: rgba(0, 128, 207, 0.64);
;
}
}
}
src/plugins/miaoDirectory/components/miaoDirectoryItemsContainer.vue
+14 -6
View File
@@ -3,13 +3,18 @@
class="miao-directory-container-items"
:style="{
backgroundColor: index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
}">
<n-scrollbar ref="scrollbarRef" style="max-height: 100%">
}"
>
<n-scrollbar
ref="scrollbarRef"
style="max-height: 100%"
>
<miao-lazy-div
v-for="dir in showData_directory"
:key="dir.id"
min-height="50px"
margin="10px">
margin="10px"
>
<miaoDirectoryItem
:item="dir"
:color="props.color"
@@ -20,12 +25,14 @@
@click="handleItemClick(dir)"
@drag-start="(e) => handleItemDragStart(dir)(e)"
@rename="handleItemRename(dir)"
@on-selected="handleItemSelect(dir)" />
@on-selected="handleItemSelect(dir)"
/>
</miao-lazy-div>
<miao-lazy-div
v-for="file in showData_files"
:key="file.id"
min-height="50px">
min-height="50px"
>
<miaoDirectoryItem
:item="file"
:color="props.color"
@@ -37,7 +44,8 @@
@drag-start="(e) => handleItemDragStart(file)(e)"
@rename="handleItemRename(file)"
@plugin="(p) => handleItemUsePlugin(file)(p)"
@on-selected="handleItemSelect(file)" />
@on-selected="handleItemSelect(file)"
/>
</miao-lazy-div>
</n-scrollbar>
</div>
src/plugins/miaoDirectory/components/miaoDirectoryTop.vue
+46 -22
View File
@@ -1,33 +1,59 @@
<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="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
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">
<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')">
<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')">
<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">
<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>
@@ -41,24 +67,24 @@ import {
CloudOutline,
ChevronBackOutline,
ReloadOutline,
EllipsisVertical,
EllipsisVertical
} from '@vicons/ionicons5'
import VirtualDirectory from '@/class/VirtualDirectory'
const props = defineProps<{
color: string;
color: string
index: number
currentDirectory: VirtualDirectory | undefined;
currentDirectory: VirtualDirectory | undefined
openMenuOption: {
key: string,
label: string,
[key: string]: any,
key: string
label: string
[key: string]: any
}[]
}>()
const emit = defineEmits<{
back: [],
reload: [],
back: []
reload: []
menuSelect: [key: string]
'set-current-directory': [virtualDirectory: VirtualDirectory]
}>()
@@ -66,7 +92,6 @@ const emit = defineEmits<{
const handleClickBreadcrumbItem = (virtualDirectory: VirtualDirectory) => {
emit('set-current-directory', virtualDirectory)
}
</script>
<style scoped lang="scss">
@@ -146,7 +171,6 @@ const handleClickBreadcrumbItem = (virtualDirectory: VirtualDirectory) => {
transform: rotate(360deg);
}
}
}
}
</style>
src/plugins/miaoDirectory/export.ts
-1
View File
@@ -18,6 +18,5 @@ const pluginConfig: registerComponentOption = {
export default pluginConfig
import { PluginExportType } from '@/types/type'
export const type = PluginExportType.component
src/plugins/miaoDirectory/export_onInit.ts
+18 -15
View File
@@ -1,37 +1,40 @@
import { Plugin, PluginGroup } from "@/class/PluginCenter";
import { PluginExportType } from "@/types/type";
import { watch } from "vue";
import { Plugin, PluginGroup } from '@/class/PluginCenter'
import { PluginExportType } from '@/types/type'
import { watch } from 'vue'
const pluginConfig: Plugin = {
name: "初始化完成之后打开miaoDirectory",
name: '初始化完成之后打开miaoDirectory',
filter: () => {
return false;
return false
},
disable: false,
group: [PluginGroup.immediately],
func: (_, __, hooks) => {
const { getPluginCenter, getRootVDirectory, getViews } = hooks
const views = getViews();
const pc = getPluginCenter();
const root = getRootVDirectory();
const views = getViews()
const pc = getPluginCenter()
const root = getRootVDirectory()
setTimeout(() => {
if (views.length === 0) {
pc.usePlugin('miaoDirectory', [root])
}
watch(() => views.length, () => {
if(views.length === 0) {
watch(
() => views.length,
() => {
if (views.length === 0) {
pc.usePlugin('miaoDirectory', [root])
}
})
}
)
pc.deregister('miaoDirectory_onInit')
})
},
priority: -1
};
}
export default pluginConfig;
export default pluginConfig
export const type = PluginExportType.default;
export const type = PluginExportType.default
export const key = "miaoDirectory_onInit";
export const key = 'miaoDirectory_onInit'
src/plugins/miaoDirectory/miaoDirectory.vue
+15 -12
View File
@@ -2,9 +2,13 @@
<miao-drop-handler
@on-virtual-directory="handleDropVDirectory"
@on-files="handleDropFiles"
@on-virtual-files="handleDropVirtualFiles">
@on-virtual-files="handleDropVirtualFiles"
>
<miaoAlertTipProvider ref="miaoAlertTip">
<div class="miao-directory-item-container" ref="rootDomRef">
<div
class="miao-directory-item-container"
ref="rootDomRef"
>
<!-- 顶部面包屑导航和工具栏 -->
<miao-directory-top
:color="props.color"
@@ -16,7 +20,8 @@
:index="index"
@set-current-directory="setCurrentDirectory"
@search="handleSearch"
@menu-select="handleTopBarMenuSelect" />
@menu-select="handleTopBarMenuSelect"
/>
<!-- 文件和文件夹列表 -->
<miao-directory-items
@@ -31,14 +36,16 @@
@item-delete="handleItemDelete"
@item-drag-start="handleItemDragStart"
@item-rename="handleItemRename"
@item-select="handleItemSelect" />
@item-select="handleItemSelect"
/>
<!-- 底部工具栏 -->
<miao-directory-bottom
:index="index"
@add-new-item="handleAddNewItem"
v-if="false"
@pick-files-upload="handlePickFilesUpload" />
@pick-files-upload="handlePickFilesUpload"
/>
<miao-mask v-model:show="showModel"></miao-mask>
<miao-popup-input ref="popupInput"></miao-popup-input>
@@ -300,7 +307,7 @@ const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
})
}
currentDirectories.value[0] = virtualDirectory
} catch(e) {
} catch (e) {
miaoAlertTip.value?.alertTip(`获取文件夹内容出错`, {
type: 'error',
timeout: 3000
@@ -346,8 +353,7 @@ const handleTopBarMenuSelect = (key: string) => {
selectedItem.clear((v) => v.type !== 'directory')
} else if (key === 'showFiles') {
showFiles.value = !showFiles.value
showFiles.value === false &&
selectedItem.clear((v) => v.type !== 'file')
showFiles.value === false && selectedItem.clear((v) => v.type !== 'file')
} else if (key.startsWith('plugin:')) {
const pluginName = key.split(':')[1]
pluginCenter.usePlugin(pluginName, [currentDirectory.value], [])
@@ -374,10 +380,7 @@ const handleTopBarMenuSelect = (key: string) => {
break
case 'range':
const _sArr = selectedItem.value
const _arr = [
...showData_directory.value,
...showData_files.value
]
const _arr = [...showData_directory.value, ...showData_files.value]
const _nArr = []
let _counter = 0
for (const i of _arr) {
src/plugins/miaoIframe/export.ts
-1
View File
@@ -21,6 +21,5 @@ const pluginConfig: registerComponentOption = {
export default pluginConfig
import { PluginExportType } from '@/types/type'
export const type = PluginExportType.component
src/plugins/miaoIframe/miaoIframe.vue
+9 -7
View File
@@ -4,15 +4,16 @@
ref="iframeRef"
:src="iframeSrc"
frameborder="0"
class="iframe-container-iframe"></iframe>
class="iframe-container-iframe"
></iframe>
</div>
</template>
<script setup lang="ts">
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
import cloneDeep from 'lodash/cloneDeep';
import cloneDeep from 'lodash/cloneDeep'
import { inject, onMounted, ref } from 'vue'
import buildFromTree from '../../hooks/buildFromTree';
import buildFromTree from '../../hooks/buildFromTree'
const root = inject('rootDirectory') as VirtualDirectory
const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
@@ -20,10 +21,11 @@ const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
})
const iframeSrc = ref<string>()
const iframeRef = ref<HTMLIFrameElement>();
const iframeRef = ref<HTMLIFrameElement>()
const sendRootTree = () => {
iframeRef.value?.contentWindow && iframeRef.value.contentWindow.postMessage(cloneDeep(root.tree), "*");
iframeRef.value?.contentWindow &&
iframeRef.value.contentWindow.postMessage(cloneDeep(root.tree), '*')
}
const handleIframeMessage = (e: MessageEvent<any>) => {
@@ -33,8 +35,8 @@ const handleIframeMessage = (e: MessageEvent<any>) => {
}
onMounted(() => {
iframeSrc.value = currentFiles.value[0].url
if (typeof window.addEventListener != "undefined") {
window.addEventListener("message", handleIframeMessage, false);
if (typeof window.addEventListener != 'undefined') {
window.addEventListener('message', handleIframeMessage, false)
}
console.log(buildFromTree(cloneDeep(root.tree)))
})
src/plugins/miaoImages/export.ts
-1
View File
@@ -44,6 +44,5 @@ const pluginConfig: registerComponentOption = {
export default pluginConfig
import { PluginExportType } from '@/types/type'
export const type = PluginExportType.component
src/plugins/miaoImages/miaoImages.vue
+30 -21
View File
@@ -1,13 +1,21 @@
<template>
<miao-drop-handler
@on-virtual-directory="handleDrop"
@on-virtual-files="handleDrop">
@on-virtual-files="handleDrop"
>
<miao-message-provider ref="miaoMessageRef">
<div class="miaoImage" ref="rootRef">
<n-scrollbar ref="NScrollbarRef" style="max-height: 100%;">
<div
class="miaoImage"
ref="rootRef"
>
<n-scrollbar
ref="NScrollbarRef"
style="max-height: 100%"
>
<div
class="miaoImage-container"
v-for="imageGroup in imageGroupList">
v-for="imageGroup in imageGroupList"
>
<div class="miaoImage-container-day">
<!-- <div class="miaoImage-container-divide miaoImage-container-divide-before">
<div class="miaoImage-container-divide-line"></div>
@@ -22,7 +30,8 @@
<div
class="miaoImage-container-row"
v-for="vFile in imageGroup.items"
:key="vFile.id">
:key="vFile.id"
>
<img
:src="vFile.url"
class="miaoImage-container-row-image"
@@ -32,7 +41,8 @@
? 'miaoImage-container-row-image-active'
: ''
"
@click="activeImage = vFile" />
@click="activeImage = vFile"
/>
</div>
</div>
</n-scrollbar>
@@ -40,19 +50,23 @@
:show="activeImage !== undefined"
@click="activeImage = undefined"
class="miaoImage-mask"
@wheel="handleWheel">
@wheel="handleWheel"
>
<ChevronBack
class="miaoImage-mask-btn miaoImage-mask-btn-back"
@click="handleActiveImageBack" />
@click="handleActiveImageBack"
/>
<img
:src="activeImage?.url"
class="miaoImage-mask-active"
@click="(e) => e.stopPropagation()"
draggable="false"
:style="{transform: `scale(${imgViewScale})`}" />
:style="{ transform: `scale(${imgViewScale})` }"
/>
<ChevronForward
class="miaoImage-mask-btn miaoImage-mask-btn-forward"
@click="handleActiveImageForward" />
@click="handleActiveImageForward"
/>
</miao-mask>
</div>
</miao-message-provider>
@@ -152,7 +166,8 @@ const scrollToActiveImage = () => {
const dom = rootRef.value?.querySelector(
'.miaoImage-container-row-image-active'
)
dom && NScrollbarRef.value.scrollTo({
dom &&
NScrollbarRef.value.scrollTo({
top: dom.offsetTop - 30,
behavior: 'smooth'
})
@@ -166,8 +181,7 @@ const handleActiveImageBack = (e: any) => {
const index = imageFileList.value.indexOf(activeImage.value)
activeImage.value =
imageFileList.value[
(index - 1 + imageFileList.value.length) %
imageFileList.value.length
(index - 1 + imageFileList.value.length) % imageFileList.value.length
]
}
@@ -179,8 +193,7 @@ const handleActiveImageForward = (e: any) => {
const index = imageFileList.value.indexOf(activeImage.value)
activeImage.value =
imageFileList.value[
(index + 1 + imageFileList.value.length) %
imageFileList.value.length
(index + 1 + imageFileList.value.length) % imageFileList.value.length
]
}
@@ -205,9 +218,7 @@ const handleDrop = async (vItems: (VirtualFile | VirtualDirectory)[]) => {
: `导入${imageFileList.value.length - length_before}张图片`,
{
type:
length_before === imageFileList.value.length
? 'info'
: 'success',
length_before === imageFileList.value.length ? 'info' : 'success',
timeout: 5000
}
)
@@ -253,9 +264,7 @@ onMounted(async () => {
: `导入${imageFileList.value.length - length_before}张图片`,
{
type:
length_before === imageFileList.value.length
? 'info'
: 'success',
length_before === imageFileList.value.length ? 'info' : 'success',
timeout: 5000
}
)
src/plugins/miaoMarkdown/export.ts
-1
View File
@@ -20,6 +20,5 @@ const pluginConfig: registerComponentOption = {
export default pluginConfig
import { PluginExportType } from '@/types/type'
export const type = PluginExportType.component
src/plugins/miaoMarkdown/miaoMarkdown.vue
+13 -9
View File
@@ -1,19 +1,21 @@
<template>
<n-scrollbar>
<div class="miao-markdown-container-miaomiaomiao" v-html="renderedMarkdown"></div>
<div style="height: 50px; width: 100%;"></div>
<div
class="miao-markdown-container-miaomiaomiao"
v-html="renderedMarkdown"
></div>
<div style="height: 50px; width: 100%"></div>
</n-scrollbar>
</template>
<script setup lang="ts">
import { NScrollbar } from 'naive-ui';
import { NScrollbar } from 'naive-ui'
import { VirtualFile } from '@/class/VirtualDirectory'
import { onMounted, ref } from 'vue'
import MarkdownIt from 'markdown-it'
import useMiaoFetchApi from '@/hooks/useMiaoFetchApi';
import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
const decoder = new TextDecoder('utf-8');
const decoder = new TextDecoder('utf-8')
const miaoFetchApi = useMiaoFetchApi()
@@ -28,7 +30,9 @@ const md = new MarkdownIt()
onMounted(async () => {
markdownSrc.value = currentFiles.value[0].url
const text = decoder.decode(await(miaoFetchApi.getFile(currentFiles.value[0])).response)
const text = decoder.decode(
await miaoFetchApi.getFile(currentFiles.value[0]).response
)
renderedMarkdown.value = md.render(text)
})
</script>
@@ -56,11 +60,11 @@ onMounted(async () => {
}
tr:nth-child(even) {
background-color: #f2f2f2
background-color: #f2f2f2;
}
th {
background-color: #04AA6D;
background-color: #04aa6d;
color: white;
}
}
src/plugins/miaoMusicPlayer/export.ts
+15 -15
View File
@@ -1,36 +1,36 @@
import { registerComponentOption } from "@/class/PluginCenter";
import { PluginExportType } from "@/types/type";
import Disc from "@vicons/ionicons5/es/Disc";
import { registerComponentOption } from '@/class/PluginCenter'
import { PluginExportType } from '@/types/type'
import Disc from '@vicons/ionicons5/es/Disc'
const pluginConfig: registerComponentOption = {
key: "miaoMusicPlayer",
name: "音乐",
key: 'miaoMusicPlayer',
name: '音乐',
icon: Disc,
getComponent: async () => (await import("./miaoMusicPlayer.vue")).default,
getComponent: async () => (await import('./miaoMusicPlayer.vue')).default,
filter: (vDirs, vFiles) => {
if (vDirs.length === 0 && vFiles.length === 0) {
return true;
return true
}
if (vDirs.length !== 0) {
return false;
return false
}
if (vFiles.length === 0) {
return false;
return false
}
for (let i of vFiles) {
for (let s of ["mp3", "flac", "ogg", "mp4"]) {
for (let s of ['mp3', 'flac', 'ogg', 'mp4']) {
if (i.name.endsWith(s)) {
return true;
return true
}
}
}
return false;
return false
},
disable: false,
single: true,
priority: 5
};
}
export default pluginConfig;
export default pluginConfig
export const type = PluginExportType.component;
export const type = PluginExportType.component
src/plugins/miaoMusicPlayer/export_mainMenu.ts
+13 -13
View File
@@ -1,26 +1,26 @@
import { Plugin, PluginGroup } from "@/class/PluginCenter";
import { PluginExportType } from "@/types/type";
import { shallowRef } from "vue";
import Disc from "@vicons/ionicons5/es/Disc";
import { Plugin, PluginGroup } from '@/class/PluginCenter'
import { PluginExportType } from '@/types/type'
import { shallowRef } from 'vue'
import Disc from '@vicons/ionicons5/es/Disc'
const pluginConfig: Plugin = {
name: "音乐",
name: '音乐',
icon: shallowRef(Disc),
filter: (_, __, views) => {
return views.find("miaoMusicPlayer").length === 0;
return views.find('miaoMusicPlayer').length === 0
},
disable: false,
group: [PluginGroup.mainMenu],
func(_, __, hooks) {
const { getPluginCenter } = hooks;
const PluginCenter = getPluginCenter();
PluginCenter.usePlugin("miaoMusicPlayer", [], []);
const { getPluginCenter } = hooks
const PluginCenter = getPluginCenter()
PluginCenter.usePlugin('miaoMusicPlayer', [], [])
},
priority: -1
};
}
export default pluginConfig;
export default pluginConfig
export const type = PluginExportType.default;
export const type = PluginExportType.default
export const key = "musicPlayer-mainMenu";
export const key = 'musicPlayer-mainMenu'
src/plugins/miaoMusicPlayer/hooks/aplayerMiao.ts
+31 -29
View File
@@ -1,6 +1,6 @@
import { createApp, Reactive } from "vue";
import aplayerListNew from "../src/components/aplayerListNew.vue";
import apType, { audioType } from "../types/ap";
import { createApp, Reactive } from 'vue'
import aplayerListNew from '../src/components/aplayerListNew.vue'
import apType, { audioType } from '../types/ap'
export type aplayerMiaoOption = {
onDragItemStart?: () => void
@@ -13,37 +13,39 @@ export type aplayerMiaoOption = {
* 对aplayer进行一些自定义的风格优化
*/
const useAplayerMiao = (ap: Reactive<apType>, options?: aplayerMiaoOption) => {
const container = ap.container as HTMLDivElement;
const container = ap.container as HTMLDivElement
// 隐藏旧版歌单
const old_listDom = container.querySelector(".aplayer-list") as HTMLDivElement;
old_listDom.style.display = "none";
const old_listDom = container.querySelector(
'.aplayer-list'
) as HTMLDivElement
old_listDom.style.display = 'none'
// 新版歌单
const new_list_dom = document.createElement("div");
new_list_dom.classList.add("aplayer-list");
new_list_dom.style.maxHeight = ap.options.listMaxHeight;
const new_list_dom = document.createElement('div')
new_list_dom.classList.add('aplayer-list')
new_list_dom.style.maxHeight = ap.options.listMaxHeight
ap.on("listadd", () => {
ap.list.audios.forEach(v => {
!v.id && (v.id = Math.random());
});
});
ap.on("listshow", () => {
new_list_dom.classList.remove("aplayer-list-hide");
});
ap.on("listhide", () => {
new_list_dom.classList.add("aplayer-list-hide");
});
ap.on('listadd', () => {
ap.list.audios.forEach((v) => {
!v.id && (v.id = Math.random())
})
})
ap.on('listshow', () => {
new_list_dom.classList.remove('aplayer-list-hide')
})
ap.on('listhide', () => {
new_list_dom.classList.add('aplayer-list-hide')
})
container.appendChild(new_list_dom);
const app = createApp(aplayerListNew, { ap, ...(options ?? {}) });
app.mount(new_list_dom);
container.appendChild(new_list_dom)
const app = createApp(aplayerListNew, { ap, ...(options ?? {}) })
app.mount(new_list_dom)
ap.on("destroy", () => {
app.unmount();
});
return app;
};
ap.on('destroy', () => {
app.unmount()
})
return app
}
export default useAplayerMiao;
export default useAplayerMiao
src/plugins/miaoMusicPlayer/miaoMusicPlayer.vue
+46 -18
View File
@@ -2,11 +2,26 @@
<miao-drop-handler @on-virtual-files="handleDropVFiles">
<miao-alert-tip-provider ref="miaoMessageRef">
<div class="miaoMusic-container">
<miao-music-main v-if="ap" :ap="ap" v-model:data="data" :updateLocalData="updateLocalData"
@new-collection="saveCurrPlayList"></miao-music-main>
<miao-mask :show="isAPlayerListShow" style="z-index: 5" @click="() => ap?.list.hide()"></miao-mask>
<div ref="aplayer" style="z-index: 10" />
<miao-mask :show="isSavingCollection" @click="isSavingCollection = false"></miao-mask>
<miao-music-main
v-if="ap"
:ap="ap"
v-model:data="data"
:updateLocalData="updateLocalData"
@new-collection="saveCurrPlayList"
></miao-music-main>
<miao-mask
:show="isAPlayerListShow"
style="z-index: 5"
@click="() => ap?.list.hide()"
></miao-mask>
<div
ref="aplayer"
style="z-index: 10"
/>
<miao-mask
:show="isSavingCollection"
@click="isSavingCollection = false"
></miao-mask>
</div>
</miao-alert-tip-provider>
</miao-drop-handler>
@@ -110,7 +125,10 @@ const saveCurrPlayList = () => {
intro: 'none',
createTime: new Date(),
coverUrl: '',
audios: cloneDeep(ap.value.list.audios).map((v, i) => ({ ...v, index: i }))
audios: cloneDeep(ap.value.list.audios).map((v, i) => ({
...v,
index: i
}))
})
miaoMessageRef.value?.alertTip('已创建新的歌单', {
timeout: 1000,
@@ -130,8 +148,8 @@ const initAPlayerMiao = () => {
}
ap.value = reactive<apType>(new APlayer(aplayerOption))
vueApp = useAplayerMiao(ap.value, {
onDragItemStart: () => { },
onDragItemEnd: () => { },
onDragItemStart: () => {},
onDragItemEnd: () => {},
onPlayVideo: (element) => {
pluginCenter.usePlugin(
'miaoVideoPlayer',
@@ -162,20 +180,30 @@ const initAPlayerMiao = () => {
})
}
const updateLocalData = debounce((log?: boolean) => {
log && miaoMessageRef.value?.alertTip(`保存设置成功`, {
const updateLocalData = debounce(
(log?: boolean) => {
log &&
miaoMessageRef.value?.alertTip(`保存设置成功`, {
type: 'success',
timeout: 999,
timeout: 999
})
localForage.setItem('miaoMusic-storage-musicCollections', toRaw(data.value))
}, 1000, {
'leading': false,
'trailing': true
})
localForage.setItem(
'miaoMusic-storage-musicCollections',
toRaw(data.value)
)
},
1000,
{
leading: false,
trailing: true
}
)
const getLocalData = async () => {
const _data =
(await localForage.getItem('miaoMusic-storage-musicCollections') as collectionType[]) ?? []
_data.forEach(v => v.audios.sort((a, b) => a.index - b.index))
((await localForage.getItem(
'miaoMusic-storage-musicCollections'
)) as collectionType[]) ?? []
_data.forEach((v) => v.audios.sort((a, b) => a.index - b.index))
data.value = _data
console.log('data ==>', toRaw(data.value))
}
src/plugins/miaoMusicPlayer/src/APlayer.fix.css
+210 -137
View File
@@ -2,7 +2,9 @@
background: #fff;
font-family: Arial, Helvetica, sans-serif;
margin: 5px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .07), 0 1px 5px 0 rgba(0, 0, 0, .1);
box-shadow:
0 2px 2px 0 rgba(0, 0, 0, 0.07),
0 1px 5px 0 rgba(0, 0, 0, 0.1);
border-radius: 5px;
overflow: hidden;
-webkit-user-select: none;
@@ -10,16 +12,16 @@
-ms-user-select: none;
user-select: none;
line-height: normal;
position: relative
position: relative;
}
.aplayer * {
box-sizing: content-box
box-sizing: content-box;
}
.aplayer svg {
width: 100%;
height: 100%
height: 100%;
}
/* .aplayer svg circle,
@@ -28,46 +30,50 @@
} */
.aplayer.aplayer-withlist .aplayer-info {
border-bottom: 1px solid #e9e9e9
border-bottom: 1px solid #e9e9e9;
}
.aplayer.aplayer-withlist .aplayer-list {
display: block
display: block;
}
.aplayer.aplayer-withlist .aplayer-icon-order,
.aplayer.aplayer-withlist .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-menu {
display: inline
.aplayer.aplayer-withlist
.aplayer-info
.aplayer-controller
.aplayer-time
.aplayer-icon.aplayer-icon-menu {
display: inline;
}
.aplayer.aplayer-withlrc .aplayer-pic {
height: 90px;
width: 90px
width: 90px;
}
.aplayer.aplayer-withlrc .aplayer-info {
margin-left: 90px;
height: 90px;
padding: 10px 7px 0
padding: 10px 7px 0;
}
.aplayer.aplayer-withlrc .aplayer-lrc {
display: block
display: block;
}
.aplayer.aplayer-narrow {
width: 66px
width: 66px;
}
.aplayer.aplayer-narrow .aplayer-info,
.aplayer.aplayer-narrow .aplayer-list {
display: none
display: none;
}
.aplayer.aplayer-narrow .aplayer-body,
.aplayer.aplayer-narrow .aplayer-pic {
height: 66px;
width: 66px
width: 66px;
}
.aplayer.aplayer-fixed {
@@ -79,13 +85,13 @@
z-index: 99;
overflow: visible;
max-width: 400px;
box-shadow: none
box-shadow: none;
}
.aplayer.aplayer-fixed .aplayer-list {
margin-bottom: 65px;
border: 1px solid #eee;
border-bottom: none
border-bottom: none;
}
.aplayer.aplayer-fixed .aplayer-body {
@@ -97,8 +103,8 @@
z-index: 99;
background: #fff;
padding-right: 18px;
transition: all .3s ease;
max-width: 400px
transition: all 0.3s ease;
max-width: 400px;
}
.aplayer.aplayer-fixed .aplayer-lrc {
@@ -110,12 +116,12 @@
margin: 0;
z-index: 98;
pointer-events: none;
text-shadow: -1px -1px 0 #fff
text-shadow: -1px -1px 0 #fff;
}
.aplayer.aplayer-fixed .aplayer-lrc:after,
.aplayer.aplayer-fixed .aplayer-lrc:before {
display: none
display: none;
}
.aplayer.aplayer-fixed .aplayer-info {
@@ -123,39 +129,39 @@
transform: scaleX(1);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
transition: all .3s ease;
transition: all 0.3s ease;
border-bottom: none;
border-top: 1px solid #e9e9e9
border-top: 1px solid #e9e9e9;
}
.aplayer.aplayer-fixed .aplayer-info .aplayer-music {
width: calc(100% - 105px)
width: calc(100% - 105px);
}
.aplayer.aplayer-fixed .aplayer-miniswitcher {
display: block
display: block;
}
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-info {
display: block;
-webkit-transform: scaleX(0);
transform: scaleX(0)
transform: scaleX(0);
}
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
width: 66px !important
width: 66px !important;
}
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-miniswitcher .aplayer-icon {
-webkit-transform: rotateY(0);
transform: rotateY(0)
transform: rotateY(0);
}
.aplayer.aplayer-fixed .aplayer-icon-back,
.aplayer.aplayer-fixed .aplayer-icon-forward,
.aplayer.aplayer-fixed .aplayer-icon-lrc,
.aplayer.aplayer-fixed .aplayer-icon-play {
display: inline-block
display: inline-block;
}
.aplayer.aplayer-fixed .aplayer-icon-back,
@@ -165,42 +171,51 @@
position: absolute;
bottom: 27px;
width: 20px;
height: 20px
height: 20px;
}
.aplayer.aplayer-fixed .aplayer-icon-back {
right: 75px
right: 75px;
}
.aplayer.aplayer-fixed .aplayer-icon-play {
right: 50px
right: 50px;
}
.aplayer.aplayer-fixed .aplayer-icon-forward {
right: 25px
right: 25px;
}
.aplayer.aplayer-fixed .aplayer-icon-menu {
right: 0
right: 0;
}
.aplayer.aplayer-arrow .aplayer-icon-loop,
.aplayer.aplayer-arrow .aplayer-icon-order,
.aplayer.aplayer-mobile .aplayer-icon-volume-down {
display: none
display: none;
}
.aplayer.aplayer-loading .aplayer-info .aplayer-controller .aplayer-loading-icon {
display: block
.aplayer.aplayer-loading
.aplayer-info
.aplayer-controller
.aplayer-loading-icon {
display: block;
}
.aplayer.aplayer-loading .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
.aplayer.aplayer-loading
.aplayer-info
.aplayer-controller
.aplayer-bar-wrap
.aplayer-bar
.aplayer-played
.aplayer-thumb {
-webkit-transform: scale(1);
transform: scale(1)
transform: scale(1);
}
.aplayer .aplayer-body {
position: relative
position: relative;
}
.aplayer .aplayer-icon {
@@ -210,16 +225,16 @@
background-color: transparent;
outline: none;
cursor: pointer;
opacity: .8;
opacity: 0.8;
vertical-align: middle;
padding: 0;
font-size: 12px;
margin: 0;
display: inline-block
display: inline-block;
}
.aplayer .aplayer-icon path {
transition: all .2s ease-in-out
transition: all 0.2s ease-in-out;
}
.aplayer .aplayer-icon-back,
@@ -227,20 +242,20 @@
.aplayer .aplayer-icon-lrc,
.aplayer .aplayer-icon-order,
.aplayer .aplayer-icon-play {
display: none
display: none;
}
.aplayer .aplayer-icon-lrc-inactivity svg {
opacity: .4
opacity: 0.4;
}
.aplayer .aplayer-icon-forward {
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
transform: rotate(180deg);
}
.aplayer .aplayer-lrc-content {
display: none
display: none;
}
.aplayer .aplayer-pic {
@@ -250,30 +265,30 @@
width: 66px;
background-size: cover;
background-position: 50%;
transition: all .3s ease;
cursor: pointer
transition: all 0.3s ease;
cursor: pointer;
}
.aplayer .aplayer-pic:hover .aplayer-button {
opacity: 1
opacity: 1;
}
.aplayer .aplayer-pic .aplayer-button {
position: absolute;
border-radius: 50%;
opacity: .8;
text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
background: rgba(0, 0, 0, .2);
transition: all .1s ease
opacity: 0.8;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
background: rgba(0, 0, 0, 0.2);
transition: all 0.1s ease;
}
.aplayer .aplayer-pic .aplayer-button path {
fill: #fff
fill: #fff;
}
.aplayer .aplayer-pic .aplayer-hide {
display: none
display: none;
}
.aplayer .aplayer-pic .aplayer-play {
@@ -282,7 +297,7 @@
border: 2px solid #fff;
bottom: 50%;
right: 50%;
margin: 0 -15px -15px 0
margin: 0 -15px -15px 0;
}
.aplayer .aplayer-pic .aplayer-play svg {
@@ -290,7 +305,7 @@
top: 3px;
left: 4px;
height: 20px;
width: 20px
width: 20px;
}
.aplayer .aplayer-pic .aplayer-pause {
@@ -298,7 +313,7 @@
height: 16px;
border: 2px solid #fff;
bottom: 4px;
right: 4px
right: 4px;
}
.aplayer .aplayer-pic .aplayer-pause svg {
@@ -306,14 +321,14 @@
top: 2px;
left: 2px;
height: 12px;
width: 12px
width: 12px;
}
.aplayer .aplayer-info {
margin-left: 66px;
padding: 14px 7px 0 10px;
height: 66px;
box-sizing: border-box
box-sizing: border-box;
}
.aplayer .aplayer-info .aplayer-music {
@@ -327,7 +342,7 @@
user-select: text;
cursor: default;
padding-bottom: 2px;
height: 20px
height: 20px;
}
.aplayer .aplayer-info .aplayer-music .aplayer-title {
@@ -337,52 +352,74 @@
.aplayer .aplayer-info .aplayer-music .aplayer-author {
font-size: 12px;
color: #666
color: #666;
}
.aplayer .aplayer-info .aplayer-controller {
position: relative;
display: flex
display: flex;
}
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap {
margin: 0 0 0 5px;
padding: 4px 0;
cursor: pointer !important;
flex: 1
flex: 1;
}
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap:hover .aplayer-bar .aplayer-played .aplayer-thumb {
.aplayer
.aplayer-info
.aplayer-controller
.aplayer-bar-wrap:hover
.aplayer-bar
.aplayer-played
.aplayer-thumb {
-webkit-transform: scale(1);
transform: scale(1)
transform: scale(1);
}
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
position: relative;
height: 2px;
width: 100%;
background: #cdcdcd
background: #cdcdcd;
}
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
.aplayer
.aplayer-info
.aplayer-controller
.aplayer-bar-wrap
.aplayer-bar
.aplayer-loaded {
position: absolute;
left: 0;
top: 0;
bottom: 0;
background: #aaa;
height: 2px;
transition: all .5s ease
transition: all 0.5s ease;
}
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
.aplayer
.aplayer-info
.aplayer-controller
.aplayer-bar-wrap
.aplayer-bar
.aplayer-played {
position: absolute;
left: 0;
top: 0;
bottom: 0;
height: 2px
height: 2px;
}
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
.aplayer
.aplayer-info
.aplayer-controller
.aplayer-bar-wrap
.aplayer-bar
.aplayer-played
.aplayer-thumb {
position: absolute;
top: 0;
right: 5px;
@@ -392,9 +429,9 @@
width: 10px;
border-radius: 50%;
cursor: pointer;
transition: all .3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-transform: scale(0);
transform: scale(0)
transform: scale(0);
}
.aplayer .aplayer-info .aplayer-controller .aplayer-time {
@@ -404,28 +441,37 @@
height: 17px;
color: #999;
font-size: 11px;
padding-left: 7px
padding-left: 7px;
}
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-time-inner {
vertical-align: middle
vertical-align: middle;
}
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon {
cursor: pointer;
transition: all .2s ease
transition: all 0.2s ease;
}
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path {
fill: #666
fill: #666;
}
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-loop {
margin-right: 2px
.aplayer
.aplayer-info
.aplayer-controller
.aplayer-time
.aplayer-icon.aplayer-icon-loop {
margin-right: 2px;
}
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon:hover path {
fill: #000
.aplayer
.aplayer-info
.aplayer-controller
.aplayer-time
.aplayer-icon:hover
path {
fill: #000;
}
/* .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-menu,
@@ -438,14 +484,22 @@
position: relative;
display: inline-block;
margin-left: 3px;
cursor: pointer !important
cursor: pointer !important;
}
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap:hover .aplayer-volume-bar-wrap {
height: 40px
.aplayer
.aplayer-info
.aplayer-controller
.aplayer-volume-wrap:hover
.aplayer-volume-bar-wrap {
height: 40px;
}
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap {
.aplayer
.aplayer-info
.aplayer-controller
.aplayer-volume-wrap
.aplayer-volume-bar-wrap {
position: absolute;
bottom: 15px;
right: -3px;
@@ -453,14 +507,23 @@
height: 0;
z-index: 99;
overflow: hidden;
transition: all .2s ease-in-out
transition: all 0.2s ease-in-out;
}
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap.aplayer-volume-bar-wrap-active {
height: 40px
.aplayer
.aplayer-info
.aplayer-controller
.aplayer-volume-wrap
.aplayer-volume-bar-wrap.aplayer-volume-bar-wrap-active {
height: 40px;
}
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar {
.aplayer
.aplayer-info
.aplayer-controller
.aplayer-volume-wrap
.aplayer-volume-bar-wrap
.aplayer-volume-bar {
position: absolute;
bottom: 0;
right: 10px;
@@ -468,25 +531,31 @@
height: 35px;
background: #aaa;
border-radius: 2.5px;
overflow: hidden
overflow: hidden;
}
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar .aplayer-volume {
.aplayer
.aplayer-info
.aplayer-controller
.aplayer-volume-wrap
.aplayer-volume-bar-wrap
.aplayer-volume-bar
.aplayer-volume {
position: absolute;
bottom: 0;
right: 0;
width: 5px;
transition: all .1s ease
transition: all 0.1s ease;
}
.aplayer .aplayer-info .aplayer-controller .aplayer-loading-icon {
display: none
display: none;
}
.aplayer .aplayer-info .aplayer-controller .aplayer-loading-icon svg {
position: absolute;
-webkit-animation: rotate 1s linear infinite;
animation: rotate 1s linear infinite
animation: rotate 1s linear infinite;
}
.aplayer .aplayer-lrc {
@@ -495,14 +564,14 @@
height: 30px;
text-align: center;
overflow: hidden;
margin: -10px 0 7px
margin: -10px 0 7px;
}
.aplayer .aplayer-lrc:before {
top: 0;
height: 10%;
background: linear-gradient(180deg, #fff 0, hsla(0, 0%, 100%, 0));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#00ffffff", GradientType=0)
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#00ffffff", GradientType=0);
}
.aplayer .aplayer-lrc:after,
@@ -512,14 +581,18 @@
display: block;
overflow: hidden;
width: 100%;
content: " "
content: ' ';
}
.aplayer .aplayer-lrc:after {
bottom: 0;
height: 33%;
background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, .8));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00ffffff", endColorstr="#ccffffff", GradientType=0)
background: linear-gradient(
180deg,
hsla(0, 0%, 100%, 0) 0,
hsla(0, 0%, 100%, 0.8)
);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00ffffff", endColorstr="#ccffffff", GradientType=0);
}
.aplayer .aplayer-lrc p {
@@ -529,62 +602,62 @@
height: 16px !important;
padding: 0 !important;
margin: 0 !important;
transition: all .5s ease-out;
opacity: .4;
overflow: hidden
transition: all 0.5s ease-out;
opacity: 0.4;
overflow: hidden;
}
.aplayer .aplayer-lrc p.aplayer-lrc-current {
opacity: 1;
overflow: visible;
height: auto !important;
min-height: 16px
min-height: 16px;
}
.aplayer .aplayer-lrc.aplayer-lrc-hide {
display: none
display: none;
}
.aplayer .aplayer-lrc .aplayer-lrc-contents {
width: 100%;
transition: all .5s ease-out;
transition: all 0.5s ease-out;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
cursor: default
cursor: default;
}
.aplayer .aplayer-list {
overflow: auto;
transition: all .35s ease;
transition: all 0.35s ease;
will-change: height;
/* display: none; */
overflow: hidden
overflow: hidden;
}
.aplayer .aplayer-list.aplayer-list-hide {
max-height: 0 !important
max-height: 0 !important;
}
.aplayer .aplayer-list ol {
list-style-type: none;
margin: 0;
padding: 0;
overflow-y: auto
overflow-y: auto;
}
.aplayer .aplayer-list ol::-webkit-scrollbar {
width: 5px
width: 5px;
}
.aplayer .aplayer-list ol::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color: #eee
background-color: #eee;
}
.aplayer .aplayer-list ol::-webkit-scrollbar-thumb:hover {
background-color: #ccc
background-color: #ccc;
}
.aplayer .aplayer-list ol li {
@@ -596,13 +669,13 @@
border-top: 1px solid #e9e9e9;
cursor: pointer;
/* transition: all .2s ease; */
transition: background .2s ease;
transition: background 0.2s ease;
overflow: hidden;
margin: 0
margin: 0;
}
.aplayer .aplayer-list ol li:first-child {
border-top: none
border-top: none;
}
/* .aplayer .aplayer-list ol li:hover {
@@ -610,11 +683,11 @@
} */
.aplayer .aplayer-list ol li.aplayer-list-light {
background: #e9e9e9
background: #e9e9e9;
}
.aplayer .aplayer-list ol li.aplayer-list-light .aplayer-list-cur {
display: inline-block
display: inline-block;
}
.aplayer .aplayer-list ol li .aplayer-list-cur {
@@ -624,19 +697,19 @@
position: absolute;
left: 0;
top: 5px;
cursor: pointer
cursor: pointer;
}
.aplayer .aplayer-list ol li .aplayer-list-index {
color: #666;
margin-right: 12px;
cursor: pointer
cursor: pointer;
}
.aplayer .aplayer-list ol li .aplayer-list-author {
color: #666;
float: right;
cursor: pointer
cursor: pointer;
}
.aplayer .aplayer-notice {
@@ -649,12 +722,12 @@
font-size: 12px;
border-radius: 4px;
padding: 5px 10px;
transition: all .3s ease-in-out;
transition: all 0.3s ease-in-out;
overflow: hidden;
color: #fff;
pointer-events: none;
background-color: #f4f4f5;
color: #909399
color: #909399;
}
.aplayer .aplayer-miniswitcher {
@@ -666,7 +739,7 @@
height: 100%;
background: #e6e6e6;
width: 18px;
border-radius: 0 2px 2px 0
border-radius: 0 2px 2px 0;
}
.aplayer .aplayer-miniswitcher .aplayer-icon {
@@ -674,57 +747,57 @@
width: 100%;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
transition: all .3s ease
transition: all 0.3s ease;
}
.aplayer .aplayer-miniswitcher .aplayer-icon path {
fill: #666
fill: #666;
}
.aplayer .aplayer-miniswitcher .aplayer-icon:hover path {
fill: #000
fill: #000;
}
@-webkit-keyframes aplayer-roll {
0% {
left: 0
left: 0;
}
to {
left: -100%
left: -100%;
}
}
@keyframes aplayer-roll {
0% {
left: 0
left: 0;
}
to {
left: -100%
left: -100%;
}
}
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0);
transform: rotate(0)
transform: rotate(0);
}
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn)
transform: rotate(1turn);
}
}
@keyframes rotate {
0% {
-webkit-transform: rotate(0);
transform: rotate(0)
transform: rotate(0);
}
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn)
transform: rotate(1turn);
}
}
src/plugins/miaoMusicPlayer/src/collectionInfo.vue
+74 -33
View File
@@ -1,21 +1,32 @@
<template>
<div class="collection-info-container">
<div class="collection-info-container-top">
<div class="collection-info-container-top-exit" @click="emit('exit')">
<div
class="collection-info-container-top-exit"
@click="emit('exit')"
>
<ArrowBackOutline></ArrowBackOutline>
</div>
<div class="collection-info-container-top-title">
<span :tooltip="false" v-if="!isEditing">
<span
:tooltip="false"
v-if="!isEditing"
>
{{ collection.name }}
</span>
<n-input v-if="isEditing" v-model:value="collection.name"></n-input>
<n-input
v-if="isEditing"
v-model:value="collection.name"
></n-input>
</div>
<div class="collection-info-container-top-delete" v-if="isEditing" @click="
clickDeleteCount !== 2
? clickDeleteCount++
: emit('deleteSelf')
">
<div
class="collection-info-container-top-delete"
v-if="isEditing"
@click="
clickDeleteCount !== 2 ? clickDeleteCount++ : emit('deleteSelf')
"
>
<TrashOutline></TrashOutline>
<span>
{{
@@ -29,7 +40,10 @@
</div>
</div>
<div class="collection-info-container-controller">
<div class="collection-info-container-controller-play" @click="emit('playAll', collection)">
<div
class="collection-info-container-controller-play"
@click="emit('playAll', collection)"
>
<div class="collection-info-container-controller-play-icon">
<CaretForwardOutline></CaretForwardOutline>
</div>
@@ -38,39 +52,63 @@
</div>
</div>
<div class="collection-info-container-controller-right">
<div class="collection-info-container-controller-edit" @click="isEditing = !isEditing">
<component :is="isEditing ? CheckmarkOutline : CreateOutline
"></component>
<div
class="collection-info-container-controller-edit"
@click="isEditing = !isEditing"
>
<component
:is="isEditing ? CheckmarkOutline : CreateOutline"
></component>
</div>
</div>
</div>
<NScrollbar>
<div class="collection-info-container-audioList">
<VueDraggable v-model="collection.audios" :animation="150"
handle=".collection-info-container-audioList-item-controller-item-drag" ghostClass="iSDragging"
@end="updateAudiosIndex">
<div v-for="(audio, index) in collection.audios" class="collection-info-container-audioList-item">
<VueDraggable
v-model="collection.audios"
:animation="150"
handle=".collection-info-container-audioList-item-controller-item-drag"
ghostClass="iSDragging"
@end="updateAudiosIndex"
>
<div
v-for="(audio, index) in collection.audios"
class="collection-info-container-audioList-item"
>
<div class="collection-info-container-audioList-item-index">
<div>{{ index + 1 }}</div>
</div>
<div class="collection-info-container-audioList-item-info">
<div v-if="!isEditing" class="collection-info-container-audioList-item-info-name">
<div
v-if="!isEditing"
class="collection-info-container-audioList-item-info-name"
>
<NEllipsis :tooltip="false">
{{ audio.name }}
</NEllipsis>
</div>
<n-input v-model:value="audio.name" v-if="isEditing"></n-input>
<n-input
v-model:value="audio.name"
v-if="isEditing"
></n-input>
</div>
<div class="collection-info-container-audioList-item-controller">
<PlayOutline class="collection-info-container-audioList-item-controller-item"
v-if="!isEditing" @click="
emit('playAll', collection, index)
"></PlayOutline>
<TrashOutline class="collection-info-container-audioList-item-controller-item"
v-if="isEditing" @click="handleDelete(index)"></TrashOutline>
<ReorderFourOutline v-if="isEditing"
class="collection-info-container-audioList-item-controller-item collection-info-container-audioList-item-controller-item-drag">
</ReorderFourOutline>
<div
class="collection-info-container-audioList-item-controller"
>
<PlayOutline
class="collection-info-container-audioList-item-controller-item"
v-if="!isEditing"
@click="emit('playAll', collection, index)"
></PlayOutline>
<TrashOutline
class="collection-info-container-audioList-item-controller-item"
v-if="isEditing"
@click="handleDelete(index)"
></TrashOutline>
<ReorderFourOutline
v-if="isEditing"
class="collection-info-container-audioList-item-controller-item collection-info-container-audioList-item-controller-item-drag"
></ReorderFourOutline>
</div>
</div>
</VueDraggable>
@@ -108,7 +146,10 @@ const handleDelete = (index: number) => {
}
const updateAudiosIndex = () => {
props.collection.audios = props.collection.audios.map((v, i) => ({ ...v, index: i }))
props.collection.audios = props.collection.audios.map((v, i) => ({
...v,
index: i
}))
}
const emit = defineEmits<{
@@ -187,7 +228,7 @@ $ig: linear-gradient(90deg, #a1ee5e 0%, #00e3ae 100%);
user-select: none;
cursor: pointer;
&>span {
& > span {
position: relative;
top: 3px;
margin-left: 3px;
@@ -205,7 +246,7 @@ $ig: linear-gradient(90deg, #a1ee5e 0%, #00e3ae 100%);
display: flex;
align-items: center;
&>div {
& > div {
cursor: pointer;
}
@@ -238,7 +279,7 @@ $ig: linear-gradient(90deg, #a1ee5e 0%, #00e3ae 100%);
align-items: center;
justify-content: flex-end;
&>div {
& > div {
margin: 0 10px;
cursor: pointer;
height: 25px;
@@ -266,7 +307,7 @@ $ig: linear-gradient(90deg, #a1ee5e 0%, #00e3ae 100%);
font-size: 24px;
text-align: right;
&>div {
& > div {
margin: auto;
width: fit-content;
}
src/plugins/miaoMusicPlayer/src/components/aplayerListNew.vue
+37 -22
View File
@@ -1,9 +1,13 @@
<template>
<div class="aplayer-list-top">
<div @click="loopModeToggle" class="aplayer-list-top-loopMode">
<div
@click="loopModeToggle"
class="aplayer-list-top-loopMode"
>
<component
:is="loopModeMap[loopMode].icon"
class="aplayer-list-top-loopMode-icon"></component>
class="aplayer-list-top-loopMode-icon"
></component>
<span class="aplayer-list-top-loopMode-name">
{{ loopModeMap[loopMode].name }}
</span>
@@ -12,7 +16,8 @@
<AddCircleOutline
v-if="onSaveCollection"
class="aplayer-list-top-buttons-icon"
@click="onSaveCollection(ap.list.audios)"></AddCircleOutline>
@click="onSaveCollection(ap.list.audios)"
></AddCircleOutline>
</div>
<span></span>
</div>
@@ -22,7 +27,8 @@
!isDragging ? 'miaoMusic-ol-isDragging' : 'miaoMusic-ol-notDragging'
]"
:key="refreshKey"
ref="ol">
ref="ol"
>
<VueDraggable
v-model="ap.list.audios"
@start="onDragStart"
@@ -30,70 +36,79 @@
item-key="id"
handle=".aplayer-list-control-btn-reorder"
ghostClass="iSDragging"
:animation="150">
:animation="150"
>
<!-- <miaoLazyDiv :min-height="'32px'" auto-height> -->
<li
v-for="(element, index) in ap.list.audios"
:class="[activeAudioIndex == index ? 'aplayer-list-light' : '']"
class="aplayer-list-new"
:key="element.id">
:key="element.id"
>
<span
class="aplayer-list-cur"
:style="{ backgroundColor: apTheme }"></span>
:style="{ backgroundColor: apTheme }"
></span>
<span class="aplayer-list-index">{{ index + 1 }}</span>
<span class="aplayer-list-title">{{ element.name }}</span>
<div class="aplayer-list-control">
<div
v-if="isVideo(element)"
class="aplayer-list-control-btn aplayer-list-control-btn-hover aplayer-list-control-btn-play"
@click.stop="onPlayVideo && onPlayVideo(element)">
@click.stop="onPlayVideo && onPlayVideo(element)"
>
<VideocamOutline class="aplayer-list-control-btn-svg" />
</div>
<div
class="aplayer-list-control-btn aplayer-list-control-btn-hover aplayer-list-control-btn-play"
@click.stop="switchAudio(index)">
@click.stop="switchAudio(index)"
>
<component
:is="
activeAudioIndex == index && !isPaused
? PauseOutline
: PlayOutline
"
class="aplayer-list-control-btn-svg"></component>
class="aplayer-list-control-btn-svg"
></component>
</div>
<div
class="aplayer-list-control-btn aplayer-list-control-btn-hover"
@click.stop="switchAudio(index)"
v-if="false">
v-if="false"
>
<HeartOutline class="aplayer-list-control-btn-svg" />
</div>
<div
class="aplayer-list-control-btn"
@click.stop="listAudioUp(index)"
v-if="false">
<ChevronUpOutline
class="aplayer-list-control-btn-svg" />
v-if="false"
>
<ChevronUpOutline class="aplayer-list-control-btn-svg" />
</div>
<div
class="aplayer-list-control-btn"
@click.stop="listAudioDown(index)"
v-if="false">
<ChevronDownOutline
class="aplayer-list-control-btn-svg" />
v-if="false"
>
<ChevronDownOutline class="aplayer-list-control-btn-svg" />
</div>
<div
class="aplayer-list-control-btn aplayer-list-control-btn-hover"
@click.stop="listAudioRemove(index)">
@click.stop="listAudioRemove(index)"
>
<CloseOutline class="aplayer-list-control-btn-svg" />
</div>
<div
class="aplayer-list-control-btn aplayer-list-control-btn-reorder">
<ReorderFourOutline
class="aplayer-list-control-btn-svg" />
class="aplayer-list-control-btn aplayer-list-control-btn-reorder"
>
<ReorderFourOutline class="aplayer-list-control-btn-svg" />
</div>
</div>
<span
class="aplayer-list-author"
v-show="element.artist !== 'Audio artist1'">
v-show="element.artist !== 'Audio artist1'"
>
{{ element.artist }}
</span>
</li>
src/plugins/miaoMusicPlayer/src/components/collection.vue
+14 -5
View File
@@ -1,10 +1,17 @@
<template>
<div class="collection" @click="emit('onenter')">
<div class="collection-cover" @click.stop="emit('onPlay')">
<div
class="collection"
@click="emit('onenter')"
>
<div
class="collection-cover"
@click.stop="emit('onPlay')"
>
<img
v-if="item.coverUrl"
class="collection-cover-img"
:src="item.coverUrl" />
:src="item.coverUrl"
/>
<div class="collection-cover-play">
<Play></Play>
</div>
@@ -52,8 +59,10 @@ const dateStr = computed(() =>
height: 50px;
position: relative;
display: flex;
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
box-shadow:
0 3px 6px -4px rgba(0, 0, 0, 0.12),
0 6px 16px 0 rgba(0, 0, 0, 0.08),
0 9px 28px 8px rgba(0, 0, 0, 0.05);
border-radius: 5px;
overflow: hidden;
transition: height 0.25s ease;
src/plugins/miaoMusicPlayer/src/main.vue
+10 -5
View File
@@ -8,18 +8,21 @@
v-model="collections"
:animation="150"
:delay="100"
ghostClass="iSDragging">
ghostClass="iSDragging"
>
<collection
v-for="item in collections"
:item="item"
@on-play="handleCollectionsPlay(item)"
@onenter="handleCollectionEnter(item)"></collection>
@onenter="handleCollectionEnter(item)"
></collection>
</VueDraggable>
<n-empty
description="空空如也~"
size="huge"
style="margin-top: 200px"
v-if="!data || data?.length === 0">
v-if="!data || data?.length === 0"
>
<template #icon>
<n-icon>
<HandLeftOutline />
@@ -29,7 +32,8 @@
<n-button
size="small"
type="primary"
@click="emit('newCollection')">
@click="emit('newCollection')"
>
立刻创建
</n-button>
</template>
@@ -43,7 +47,8 @@
v-if="currCollection"
@exit="handleCollectionEnter(undefined)"
@delete-self="handleCollectionDelete()"
@play-all="handleCollectionsPlay"></collectionInfo>
@play-all="handleCollectionsPlay"
></collectionInfo>
</Transition>
</div>
</template>
src/plugins/miaoMusicPlayer/types/collection.ts
+10 -10
View File
@@ -1,14 +1,14 @@
import type { audioType } from "./ap";
import type { audioType } from './ap'
export type collectionItemType = {} & audioType;
export type collectionItemType = {} & audioType
export type collectionType = {
id: number;
name: string;
intro: string;
createTime: Date;
coverUrl?: string;
audios: collectionItemType[];
};
id: number
name: string
intro: string
createTime: Date
coverUrl?: string
audios: collectionItemType[]
}
export default collectionType;
export default collectionType
src/plugins/miaoPDF/export.ts
-1
View File
@@ -20,6 +20,5 @@ const pluginConfig: registerComponentOption = {
export default pluginConfig
import { PluginExportType } from '@/types/type'
export const type = PluginExportType.component
src/plugins/miaoPDF/miaoPDF.vue
+14 -7
View File
@@ -5,31 +5,36 @@
<div
class="miao-container-topBar-btn"
@click="() => handleZoom(10)"
title="快速缩小">
title="快速缩小"
>
--
</div>
<div
class="miao-container-topBar-btn"
@click="() => handleZoom()"
title="缩小">
title="缩小"
>
-
</div>
<div
class="miao-container-topBar-btn"
@click="() => handleResetMargin()"
title="还原">
title="还原"
>
还原缩放
</div>
<div
class="miao-container-topBar-btn"
@click="() => handleShrink()"
title="放大">
title="放大"
>
+
</div>
<div
class="miao-container-topBar-btn"
@click="() => handleShrink(10)"
title="快速放大">
title="快速放大"
>
++
</div>
</div>
@@ -38,13 +43,15 @@
class="miao-container-pdf"
:style="{
alignItems: pdfMargin < 0 ? 'baseline' : 'center'
}">
}"
>
<div
ref="pdfEl"
class="miao-container-pdf-content"
:style="{
width: `calc( 100% - ${pdfMargin}px)`
}"></div>
}"
></div>
</div>
</NScrollbar>
</div>
src/plugins/miaoPluginTemplate/_export.ts
-1
View File
@@ -21,6 +21,5 @@ const pluginConfig: registerComponentOption = {
export default pluginConfig
import { PluginExportType } from '@/types/type'
export const type = PluginExportType.component
src/plugins/miaoPluginTemplate/template.vue
-1
View File
@@ -8,7 +8,6 @@
// const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
// required: true
// })
</script>
<style scoped lang="scss">
src/plugins/miaoVideoPlayer/export.ts
-1
View File
@@ -28,6 +28,5 @@ const pluginConfig: registerComponentOption = {
export default pluginConfig
import { PluginExportType } from '@/types/type'
export const type = PluginExportType.component
src/plugins/miaoVideoPlayer/miaoVideoPlayer.vue
+32 -32
View File
@@ -1,7 +1,10 @@
<template>
<miao-drop-handler @on-virtual-files="handleDropVFiles">
<div class="player-container">
<div ref="xgPlayer" id="xgplayer"></div>
<div
ref="xgPlayer"
id="xgplayer"
></div>
</div>
</miao-drop-handler>
</template>
@@ -20,7 +23,6 @@ import lockScreen from './playerPlugin/lockScreen/lockScreen'
import xgplayerVueApp from './src/XGPlayerVuePluginRoot.vue'
import useXGPlayerVueFrame from './playerPlugin/xgplayer-vue-frame/xgplayer-vue-frame'
const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
required: true
})
@@ -28,20 +30,20 @@ const xgPlayer = ref()
let _player: XGPlayer
const { setVideo } = (() => {
const initPlayer = (videos: VirtualFile[], texttrack: {
const initPlayer = (
videos: VirtualFile[],
texttrack: {
list: {
id: number; url: string
id: number
url: string
text: string
}[]
}) => {
}
) => {
const videoVFile = videos.shift() as VirtualFile
_player && _player.destroy()
_player = new XGPlayer({
plugins: [
TextTrack,
lockScreen,
useXGPlayerVueFrame(xgplayerVueApp),
],
plugins: [TextTrack, lockScreen, useXGPlayerVueFrame(xgplayerVueApp)],
el: xgPlayer.value,
url: videoVFile.url,
width: '100%',
@@ -52,7 +54,9 @@ const { setVideo } = (() => {
videoFillMode: 'contain',
autoplay: true,
download: true,
ignores: [videos.length === 0 ? 'playNext' : undefined].filter(v => v) as string[],
ignores: [videos.length === 0 ? 'playNext' : undefined].filter(
(v) => v
) as string[],
lang: 'zh-cn',
playbackRate: [0.1, 0.3, 0.5, 0.75, 1, 1.5, 2, 3, 5, 10],
texttrack,
@@ -63,11 +67,11 @@ const { setVideo } = (() => {
format: '.png'
},
playNext: {
urlList: videos.map(v => v.url)
urlList: videos.map((v) => v.url)
},
progress: {
isDragingSeek: true
},
}
// mobile: {
// disableGesture: true
// }
@@ -82,7 +86,11 @@ const { setVideo } = (() => {
textTrackFiles &&
textTrackFiles.push(...findTextTrack(currentFiles.value))
textTrackFiles = uniq(textTrackFiles)
currentFiles.value = uniq([...currentFiles.value, ...videoVFiles, ...(textTrackFiles ?? [])])
currentFiles.value = uniq([
...currentFiles.value,
...videoVFiles,
...(textTrackFiles ?? [])
])
const videos = findVideo(uniq([...currentFiles.value, ...videoVFiles]))
const _list = []
if (textTrackFiles) {
@@ -205,22 +213,17 @@ function assToVtt(assContent: string) {
.trim()
.replace('.', ',')
.replace(',', '.') // 替换 . 为 ,，然后再替换为 .
const endTime = parts[2]
.trim()
.replace('.', ',')
.replace(',', '.') // 替换 . 为 ,，然后再替换为 .
const endTime = parts[2].trim().replace('.', ',').replace(',', '.') // 替换 . 为 ,，然后再替换为 .
// 确保时间戳是两位数格式
const formattedStartTime = startTime.replace(
/(\d+):(\d+):(\d+)\.(\d+)/,
(match: any, h: any, m: any, s: any, ms: any) => {
match
return `${String(h).padStart(2, '0')}:${String(
m
).padStart(2, '0')}:${String(s).padStart(
return `${String(h).padStart(2, '0')}:${String(m).padStart(
2,
'0'
)}.${String(ms).padStart(3, '0')}`
)}:${String(s).padStart(2, '0')}.${String(ms).padStart(3, '0')}`
}
)
@@ -228,12 +231,10 @@ function assToVtt(assContent: string) {
/(\d+):(\d+):(\d+)\.(\d+)/,
(match: any, h: any, m: any, s: any, ms: any) => {
match
return `${String(h).padStart(2, '0')}:${String(
m
).padStart(2, '0')}:${String(s).padStart(
return `${String(h).padStart(2, '0')}:${String(m).padStart(
2,
'0'
)}.${String(ms).padStart(3, '0')}`
)}:${String(s).padStart(2, '0')}.${String(ms).padStart(3, '0')}`
}
)
@@ -297,14 +298,16 @@ function ssaToVtt(ssaContent: string): string {
}
const findVideo = (vFiles: VirtualFile[]) =>
uniq(vFiles.filter((v) => {
uniq(
vFiles.filter((v) => {
for (let s of ['mp4', 'mp3', 'mkv']) {
if (v.name.endsWith(s)) {
return true
}
}
return false
}))
})
)
const findTextTrack = (vFiles: VirtualFile[]) =>
vFiles.filter((v) => {
@@ -319,10 +322,7 @@ const findTextTrack = (vFiles: VirtualFile[]) =>
onMounted(() => {
if (currentFiles.value.length) {
currentFiles.value.reverse()
setVideo(
findVideo(currentFiles.value),
findTextTrack(currentFiles.value)
)
setVideo(findVideo(currentFiles.value), findTextTrack(currentFiles.value))
}
})
src/plugins/miaoVideoPlayer/playerPlugin/lockScreen/lockScreen.scss
+5 -1
View File
@@ -10,7 +10,11 @@
color: #f2f2f2;
opacity: 1;
visibility: visible;
transition: opacity 0.5s ease, visibility 0.5s ease, width 0.25s ease, left 0.25s ease;
transition:
opacity 0.5s ease,
visibility 0.5s ease,
width 0.25s ease,
left 0.25s ease;
pointer-events: all !important;
svg {
width: inherit;
src/plugins/miaoVideoPlayer/playerPlugin/lockScreen/lockScreen.ts
+67 -46
View File
@@ -1,73 +1,78 @@
import { BasePlugin } from "xgplayer";
import "./lockScreen.scss";
import MobilePlugin from "xgplayer/es/plugins/mobile";
import { BasePlugin } from 'xgplayer'
import './lockScreen.scss'
import MobilePlugin from 'xgplayer/es/plugins/mobile'
export default class LockPlugin extends BasePlugin {
static get pluginName() {
return "lockPlugin";
return 'lockPlugin'
}
private locked: boolean;
private lockDiv: HTMLDivElement = document.createElement("div");
private overlayDiv: HTMLDivElement = document.createElement("div");
private locked: boolean
private lockDiv: HTMLDivElement = document.createElement('div')
private overlayDiv: HTMLDivElement = document.createElement('div')
private lockOpenSVG: string = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M336 208v-95a80 80 0 0 0-160 0v95" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path>
<rect x="96" y="208" width="320" height="272" rx="48" ry="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></rect>
</svg>`;
</svg>`
private lockClosedSVG: string = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M336 112a80 80 0 0 0-160 0v96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path>
<rect x="96" y="208" width="320" height="272" rx="48" ry="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></rect>
</svg>`;
</svg>`
constructor(args: any) {
super(args);
this.locked = false;
super(args)
this.locked = false
}
afterCreate() {
this.initLockDiv();
this.initOverlayDiv();
this.bindEvents();
this.initLockDiv()
this.initOverlayDiv()
this.bindEvents()
}
private initLockDiv() {
this.lockDiv.innerHTML = this.lockClosedSVG;
this.lockDiv.className = "lock-div";
this.player.root !== null && this.player.root.appendChild(this.lockDiv);
this.lockDiv.innerHTML = this.lockClosedSVG
this.lockDiv.className = 'lock-div'
this.player.root !== null && this.player.root.appendChild(this.lockDiv)
}
private initOverlayDiv() {
this.overlayDiv.className = "overlay-div";
this.player.root !== null && this.player.root.appendChild(this.overlayDiv);
this.overlayDiv.className = 'overlay-div'
this.player.root !== null && this.player.root.appendChild(this.overlayDiv)
this.overlayDiv.addEventListener('mousedown', (e) => {
e.preventDefault();
});
e.preventDefault()
})
this.overlayDiv.addEventListener('mousemove', (e) => {
e.preventDefault();
});
e.preventDefault()
})
}
private bindEvents() {
this.lockDiv!.addEventListener("click", this.toggleLock.bind(this));
this.player.root !== null && this.player.root.addEventListener("click", this.preventClick.bind(this), true);
this.player.usePluginHooks("progress", "dragstart", () => {
this.lockDiv!.addEventListener('click', this.toggleLock.bind(this))
this.player.root !== null &&
this.player.root.addEventListener(
'click',
this.preventClick.bind(this),
true
)
this.player.usePluginHooks('progress', 'dragstart', () => {
if (this.locked) {
return false;
return false
}
return true;
});
return true
})
// 阻止进度条默认行为
for(const event of ['dragstart', 'drag', 'dragend']) {
this.player.usePluginHooks("progress", event, () => {
for (const event of ['dragstart', 'drag', 'dragend']) {
this.player.usePluginHooks('progress', event, () => {
if (this.locked) {
return false;
return false
}
return true;
});
return true
})
}
}
@@ -75,30 +80,46 @@ export default class LockPlugin extends BasePlugin {
const mobile = this.getPlugin('mobile') as MobilePlugin | undefined
// mobile?.disableGesture()
if (this.lockDiv && this.overlayDiv) {
this.locked = !this.locked;
this.lockDiv.innerHTML = this.locked ? this.lockOpenSVG : this.lockClosedSVG;
this.overlayDiv.style.display = this.locked ? "block" : "none";
this.player.controls && (this.locked ? this.player.controls.hide() : this.player.controls.show());
this.player.root !== null && this.player.root.classList.toggle("xgplayer-locked", this.locked);
this.locked = !this.locked
this.lockDiv.innerHTML = this.locked
? this.lockOpenSVG
: this.lockClosedSVG
this.overlayDiv.style.display = this.locked ? 'block' : 'none'
this.player.controls &&
(this.locked
? this.player.controls.hide()
: this.player.controls.show())
this.player.root !== null &&
this.player.root.classList.toggle('xgplayer-locked', this.locked)
this.locked ? mobile?.disableGesture() : mobile?.enableGesture()
}
}
private preventClick(event: MouseEvent) {
if (this.locked && event.target instanceof HTMLElement && !event.target.classList.contains("lock-div")) {
event.stopPropagation();
event.preventDefault();
if (
this.locked &&
event.target instanceof HTMLElement &&
!event.target.classList.contains('lock-div')
) {
event.stopPropagation()
event.preventDefault()
}
}
destroy() {
if (this.lockDiv) {
this.lockDiv.removeEventListener("click", this.toggleLock.bind(this));
this.player.root !== null && this.player.root.removeEventListener("click", this.preventClick.bind(this), true);
this.player.root !== null && this.player.root.removeChild(this.lockDiv);
this.lockDiv.removeEventListener('click', this.toggleLock.bind(this))
this.player.root !== null &&
this.player.root.removeEventListener(
'click',
this.preventClick.bind(this),
true
)
this.player.root !== null && this.player.root.removeChild(this.lockDiv)
}
if (this.overlayDiv) {
this.player.root !== null && this.player.root.removeChild(this.overlayDiv);
this.player.root !== null &&
this.player.root.removeChild(this.overlayDiv)
}
}
}
src/plugins/miaoVideoPlayer/playerPlugin/xgplayer-vue-frame/fakeRoot.vue
+3 -4
View File
@@ -5,9 +5,9 @@
</template>
<script setup lang="ts">
import { Component, toRaw } from "vue";
import Player from "xgplayer/es/player";
import pick from "lodash/pick";
import { Component, toRaw } from 'vue'
import Player from 'xgplayer/es/player'
import pick from 'lodash/pick'
const props = defineProps({
player: {
type: Player,
@@ -22,7 +22,6 @@ const props = defineProps({
required: true
}
})
</script>
<style lang="scss" scoped>
src/plugins/miaoVideoPlayer/playerPlugin/xgplayer-vue-frame/xgplayer-vue-frame.ts
+18 -14
View File
@@ -1,35 +1,39 @@
import { App, Component, createApp } from "vue";
import { BasePlugin } from "xgplayer";
import fakeApp from "./fakeRoot.vue";
import { App, Component, createApp } from 'vue'
import { BasePlugin } from 'xgplayer'
import fakeApp from './fakeRoot.vue'
const useXGPlayerVueFrame = (App: Component) => {
return class XGPlayerVueFrame extends BasePlugin {
static get pluginName() {
return "xgplayerVueFrame";
return 'xgplayerVueFrame'
}
private root: HTMLDivElement | null = null;
private app: App<Element> | null = null;
private root: HTMLDivElement | null = null
private app: App<Element> | null = null
constructor(args: any) {
super(args);
super(args)
}
afterCreate() {
this.createVueFrame();
this.createVueFrame()
}
private createVueFrame() {
this.root = document.createElement("div");
this.app = createApp(fakeApp, { player: this.player, root: this.root, App })
this.app.mount(this.root);
this.root = document.createElement('div')
this.app = createApp(fakeApp, {
player: this.player,
root: this.root,
App
})
this.app.mount(this.root)
// this.app.mount(this.player.root);
}
destroy() {
this.app?.unmount()
}
};
};
}
}
export default useXGPlayerVueFrame;
export default useXGPlayerVueFrame
src/plugins/miaoVideoPlayer/src/XGPlayerVuePluginRoot.vue
+2 -3
View File
@@ -3,8 +3,8 @@
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import Player from "xgplayer/es/player";
import { onMounted } from 'vue'
import Player from 'xgplayer/es/player'
const props = defineProps({
player: {
type: Player,
@@ -19,7 +19,6 @@ const props = defineProps({
onMounted(() => {
props
})
</script>
<style lang="scss" scoped>
src/plugins/miaoVideoPlayer/style/xgplayer.scss
+90 -45
View File
@@ -23,8 +23,16 @@
bottom: 0;
opacity: 1;
z-index: 10;
background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.37), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75));
transition: opacity 0.5s ease, visibility 0.5s ease;
background-image: linear-gradient(
180deg,
transparent,
rgba(0, 0, 0, 0.37),
rgba(0, 0, 0, 0.75),
rgba(0, 0, 0, 0.75)
);
transition:
opacity 0.5s ease,
visibility 0.5s ease;
cursor: default;
}
.xgplayer .xgplayer-controls.show {
@@ -178,7 +186,14 @@
width: 100%;
height: 100%;
overflow: hidden;
font-family: PingFang SC, Helvetica Neue, Helvetica, STHeiTi, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
font-family:
PingFang SC,
Helvetica Neue,
Helvetica,
STHeiTi,
Microsoft YaHei,
WenQuanYi Micro Hei,
sans-serif;
font-size: 14px;
font-weight: 400;
background: #000;
@@ -255,15 +270,15 @@
height: 100%;
outline: none;
}
.xgplayer[data-xgfill="contain"] video {
.xgplayer[data-xgfill='contain'] video {
-o-object-fit: contain;
object-fit: contain;
}
.xgplayer[data-xgfill="cover"] video {
.xgplayer[data-xgfill='cover'] video {
-o-object-fit: cover;
object-fit: cover;
}
.xgplayer[data-xgfill="fill"] video {
.xgplayer[data-xgfill='fill'] video {
-o-object-fit: fill;
object-fit: fill;
}
@@ -673,7 +688,9 @@
background-position: center center;
background-size: 100% auto;
background-repeat: no-repeat;
transition: opacity 0.3s ease, visibility 0.3s ease;
transition:
opacity 0.3s ease,
visibility 0.3s ease;
pointer-events: none;
}
.xgplayer .xgplayer-poster.hide,
@@ -744,10 +761,10 @@
display: block;
}
.xgplayer .xgplayer-start .xg-icon-pause,
.xgplayer .xgplayer-start[data-state="pause"] .xg-icon-play {
.xgplayer .xgplayer-start[data-state='pause'] .xg-icon-play {
display: none;
}
.xgplayer .xgplayer-start[data-state="pause"] .xg-icon-pause,
.xgplayer .xgplayer-start[data-state='pause'] .xg-icon-pause,
.xgplayer .xgplayer-start.interact {
display: block;
}
@@ -888,7 +905,11 @@
width: 100%;
height: 100%;
z-index: 11;
background: linear-gradient(180deg, rgba(57, 57, 57, 0.9), rgba(57, 57, 57, 0) 50.27%);
background: linear-gradient(
180deg,
rgba(57, 57, 57, 0.9),
rgba(57, 57, 57, 0) 50.27%
);
}
.xg-mini-layer .mask {
pointer-events: none;
@@ -926,7 +947,7 @@
align-items: center;
}
.xg-mini-layer xg-mini-header #disabledMini + label:before {
content: "";
content: '';
color: #ff142b;
background-color: transparent;
border-radius: 2px;
@@ -946,7 +967,7 @@
border-color: #ff142b;
}
.xg-mini-layer xg-mini-header #disabledMini:checked + label:after {
content: "";
content: '';
position: absolute;
width: 4px;
height: 8px;
@@ -967,10 +988,18 @@
background-color: #0000008a;
display: none;
}
.xg-mini-layer xg-mini-header .xgplayer-mini-disableBtn:hover #disabledMini + label:before {
.xg-mini-layer
xg-mini-header
.xgplayer-mini-disableBtn:hover
#disabledMini
+ label:before {
border-color: #ff142b;
}
.xg-mini-layer xg-mini-header .xgplayer-mini-disableBtn:hover #disabledMini + label {
.xg-mini-layer
xg-mini-header
.xgplayer-mini-disableBtn:hover
#disabledMini
+ label {
color: #ff142b;
}
.xg-mini-layer xg-mini-header .xgplayer-mini-disableBtn:hover xg-tips {
@@ -1009,10 +1038,10 @@
display: none;
}
.xg-mini-layer .xg-icon-pause,
.xg-mini-layer[data-state="pause"] .xg-icon-play {
.xg-mini-layer[data-state='pause'] .xg-icon-play {
display: block;
}
.xg-mini-layer[data-state="pause"] .xg-icon-pause {
.xg-mini-layer[data-state='pause'] .xg-icon-pause {
display: none;
}
.xgplayer-miniicon {
@@ -1154,10 +1183,10 @@
.xgplayer xg-trigger .xg-playbackrate {
display: none;
}
.xgplayer xg-trigger[data-xg-action="seeking"] .time-preview {
.xgplayer xg-trigger[data-xg-action='seeking'] .time-preview {
display: block;
}
.xgplayer xg-trigger[data-xg-action="playbackrate"] .xg-playbackrate {
.xgplayer xg-trigger[data-xg-action='playbackrate'] .xg-playbackrate {
display: block;
}
.xgplayer .gradient {
@@ -1179,10 +1208,20 @@
);
}
.xgplayer .gradient.top {
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.36) 20%, rgba(0, 0, 0, 0) 36%, rgba(0, 0, 0, 0) 70%);
background-image: linear-gradient(
rgba(0, 0, 0, 0.6),
rgba(0, 0, 0, 0.36) 20%,
rgba(0, 0, 0, 0) 36%,
rgba(0, 0, 0, 0) 70%
);
}
.xgplayer .gradient.bottom {
background-image: linear-gradient(rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.24) 77%, rgba(0, 0, 0, 0.36) 83%, rgba(0, 0, 0, 0.6));
background-image: linear-gradient(
rgba(0, 0, 0, 0) 70%,
rgba(0, 0, 0, 0.24) 77%,
rgba(0, 0, 0, 0.36) 83%,
rgba(0, 0, 0, 0.6)
);
}
.xgplayer .gradient.none,
.xgplayer-mobile .xgplayer-controls {
@@ -1315,7 +1354,9 @@ xg-loading-inner {
flex: 1;
height: 100%;
background: rgba(255, 255, 255, 0.3);
transition: height 0.2s ease-in, opacity 0.2s ease-out;
transition:
height 0.2s ease-in,
opacity 0.2s ease-out;
border-radius: inherit;
margin-right: 2px;
pointer-events: none;
@@ -1332,7 +1373,7 @@ xg-loading-inner {
.xgplayer .inner-focus-point:after {
position: absolute;
top: 0;
content: " ";
content: ' ';
display: block;
width: 2px;
height: 300%;
@@ -1381,7 +1422,7 @@ xg-loading-inner {
pointer-events: none;
}
.xgplayer .xgplayer-progress-btn:before {
content: " ";
content: ' ';
display: block;
position: relative;
width: 12px;
@@ -1452,7 +1493,9 @@ xg-loading-inner {
.xgplayer.xgplayer-pc .xgplayer-progress.active .xgplayer-progress-outer {
height: 6px;
margin-bottom: 3px;
transition: height 0.3s ease, margin-bottom 0.3s ease;
transition:
height 0.3s ease,
margin-bottom 0.3s ease;
}
.xgplayer.xgplayer-pc .xgplayer-progress.active .xgplayer-progress-btn {
transform: translate(-50%, -50%) scale(1);
@@ -1526,18 +1569,18 @@ xg-loading-inner {
display: none;
}
.xgplayer .xgplayer-play .xg-icon-pause,
.xgplayer .xgplayer-play[data-state="pause"] .xg-icon-play {
.xgplayer .xgplayer-play[data-state='pause'] .xg-icon-play {
display: block;
}
.xgplayer .xgplayer-play[data-state="pause"] .xg-icon-pause,
.xgplayer .xgplayer-play[data-state='pause'] .xg-icon-pause,
.xgplayer .xgplayer-fullscreen .xg-exit-fullscreen {
display: none;
}
.xgplayer .xgplayer-fullscreen .xg-get-fullscreen,
.xgplayer .xgplayer-fullscreen[data-state="full"] .xg-exit-fullscreen {
.xgplayer .xgplayer-fullscreen[data-state='full'] .xg-exit-fullscreen {
display: block;
}
.xgplayer .xgplayer-fullscreen[data-state="full"] .xg-get-fullscreen {
.xgplayer .xgplayer-fullscreen[data-state='full'] .xg-get-fullscreen {
display: none;
}
.xgplayer .xg-top-bar .xgplayer-back {
@@ -1612,7 +1655,7 @@ xg-loading-inner {
outline: none;
}
.xgplayer .xgplayer-slider:after {
content: " ";
content: ' ';
display: block;
height: 15px;
width: 28px;
@@ -1653,7 +1696,7 @@ xg-loading-inner {
max-height: 76px;
}
.xgplayer .xgplayer-drag:after {
content: " ";
content: ' ';
display: inline-block;
width: 8px;
height: 8px;
@@ -1664,23 +1707,23 @@ xg-loading-inner {
left: -2px;
top: -4px;
}
.xgplayer .xgplayer-volume[data-state="normal"] .xg-volume {
.xgplayer .xgplayer-volume[data-state='normal'] .xg-volume {
display: block;
}
.xgplayer .xgplayer-volume[data-state="normal"] .xg-volume-small,
.xgplayer .xgplayer-volume[data-state="normal"] .xg-volume-mute,
.xgplayer .xgplayer-volume[data-state="small"] .xg-volume {
.xgplayer .xgplayer-volume[data-state='normal'] .xg-volume-small,
.xgplayer .xgplayer-volume[data-state='normal'] .xg-volume-mute,
.xgplayer .xgplayer-volume[data-state='small'] .xg-volume {
display: none;
}
.xgplayer .xgplayer-volume[data-state="small"] .xg-volume-small {
.xgplayer .xgplayer-volume[data-state='small'] .xg-volume-small {
display: block;
}
.xgplayer .xgplayer-volume[data-state="small"] .xg-volume-mute,
.xgplayer .xgplayer-volume[data-state="mute"] .xg-volume,
.xgplayer .xgplayer-volume[data-state="mute"] .xg-volume-small {
.xgplayer .xgplayer-volume[data-state='small'] .xg-volume-mute,
.xgplayer .xgplayer-volume[data-state='mute'] .xg-volume,
.xgplayer .xgplayer-volume[data-state='mute'] .xg-volume-small {
display: none;
}
.xgplayer .xgplayer-volume[data-state="mute"] .xg-volume-mute {
.xgplayer .xgplayer-volume[data-state='mute'] .xg-volume-mute {
display: block;
}
.xgplayer.xgplayer-mobile .xgplayer-volume .xgplayer-slider,
@@ -1688,10 +1731,10 @@ xg-loading-inner {
display: none;
}
.xgplayer .xgplayer-pip .xg-get-pip,
.xgplayer .xgplayer-pip[data-state="pip"] .xg-exit-pip {
.xgplayer .xgplayer-pip[data-state='pip'] .xg-exit-pip {
display: block;
}
.xgplayer .xgplayer-pip[data-state="pip"] .xg-get-pip {
.xgplayer .xgplayer-pip[data-state='pip'] .xg-get-pip {
display: none;
}
.xgplayer .xgplayer-playnext {
@@ -1740,10 +1783,10 @@ xg-loading-inner {
display: block;
}
.xgplayer .xgplayer-cssfullscreen .xg-exit-cssfull,
.xgplayer .xgplayer-cssfullscreen[data-state="full"] .xg-get-cssfull {
.xgplayer .xgplayer-cssfullscreen[data-state='full'] .xg-get-cssfull {
display: none;
}
.xgplayer .xgplayer-cssfullscreen[data-state="full"] .xg-exit-cssfull {
.xgplayer .xgplayer-cssfullscreen[data-state='full'] .xg-exit-cssfull {
display: block;
}
.xgplayer-error {
@@ -1799,7 +1842,7 @@ xg-loading-inner {
transform: translate(-50%);
}
.xgplayer .xgplayer-prompt.arrow:after {
content: "";
content: '';
display: block;
position: absolute;
left: 50%;
@@ -1987,7 +2030,9 @@ xg-loading-inner {
left: 0;
opacity: 0;
visibility: hidden;
transition: visibility 0.3s, opacity 0.3s;
transition:
visibility 0.3s,
opacity 0.3s;
background-color: #000;
}
.xgplayer .xgvideo-preview .xgvideo-thumbnail {
src/plugins/registerExternalPlugin/checkPluginAvailable.ts
+27 -28
View File
@@ -1,36 +1,35 @@
import type { Plugin, registerComponentOption } from "@/class/PluginCenter";
import type { Plugin, registerComponentOption } from '@/class/PluginCenter'
export function checkNormalPlugin(obj: any): obj is Plugin {
return (
typeof obj === "object" &&
obj!== null &&
typeof obj.name === "string" &&
(obj.icon === undefined || typeof obj.icon === "object") &&
typeof obj.disable === "boolean" &&
typeof obj === 'object' &&
obj !== null &&
typeof obj.name === 'string' &&
(obj.icon === undefined || typeof obj.icon === 'object') &&
typeof obj.disable === 'boolean' &&
Array.isArray(obj.group) &&
obj.group.every((group: any) => typeof group === "string") &&
typeof obj.priority === "number" &&
typeof obj.filter === "function" &&
typeof obj.func === "function"
);
obj.group.every((group: any) => typeof group === 'string') &&
typeof obj.priority === 'number' &&
typeof obj.filter === 'function' &&
typeof obj.func === 'function'
)
}
export function checkComponentPlugin(
obj: any
): obj is registerComponentOption {
export function checkComponentPlugin(obj: any): obj is registerComponentOption {
return (
typeof obj === "object" &&
obj!== null &&
typeof obj.key === "string" &&
typeof obj.name === "string" &&
(obj.icon === undefined || typeof obj.icon === "object") &&
typeof obj.getComponent === "function" &&
((obj.group === undefined) || (Array.isArray(obj.group) && obj.group.every((item: any) => typeof item === "string"))) &&
typeof obj.filter === "function" &&
(obj.disable === undefined || typeof obj.disable === "boolean") &&
(obj.exitConfirm === undefined || typeof obj.exitConfirm === "boolean") &&
(obj.single === undefined || typeof obj.single === "boolean") &&
(obj.priority === undefined || typeof obj.priority === "number")
);
typeof obj === 'object' &&
obj !== null &&
typeof obj.key === 'string' &&
typeof obj.name === 'string' &&
(obj.icon === undefined || typeof obj.icon === 'object') &&
typeof obj.getComponent === 'function' &&
(obj.group === undefined ||
(Array.isArray(obj.group) &&
obj.group.every((item: any) => typeof item === 'string'))) &&
typeof obj.filter === 'function' &&
(obj.disable === undefined || typeof obj.disable === 'boolean') &&
(obj.exitConfirm === undefined || typeof obj.exitConfirm === 'boolean') &&
(obj.single === undefined || typeof obj.single === 'boolean') &&
(obj.priority === undefined || typeof obj.priority === 'number')
)
}
src/plugins/registerExternalPlugin/export.ts
+12 -12
View File
@@ -1,18 +1,18 @@
import { Plugin, PluginGroup } from "@/class/PluginCenter";
import { LogoGithub } from "@vicons/ionicons5";
import { PluginExportType } from "@/types/type";
import { shallowRef } from "vue";
import registerExternalPlugin from "./registerExternalPlugin";
import { Plugin, PluginGroup } from '@/class/PluginCenter'
import { LogoGithub } from '@vicons/ionicons5'
import { PluginExportType } from '@/types/type'
import { shallowRef } from 'vue'
import registerExternalPlugin from './registerExternalPlugin'
const pluginConfig: Plugin = {
name: "导入插件",
name: '导入插件',
icon: shallowRef(LogoGithub),
filter: (vDirs, vFiles) => {
if (vDirs.length !== 0) {
return false;
return false
}
if (vFiles.length !== 1) {
return false;
return false
}
return vFiles[0].name.endsWith('js')
},
@@ -20,10 +20,10 @@ const pluginConfig: Plugin = {
group: [PluginGroup.default],
func: registerExternalPlugin,
priority: -1
};
}
export default pluginConfig;
export default pluginConfig
export const type = PluginExportType.default;
export const type = PluginExportType.default
export const key = 'registerExternalPlugin';
export const key = 'registerExternalPlugin'
src/plugins/registerExternalPlugin/registerExternalPlugin.ts
+18 -12
View File
@@ -1,33 +1,39 @@
import VirtualDirectory, { VirtualFile } from "@/class/VirtualDirectory";
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
// import useMiaoFetchApi from "@/hooks/useMiaoFetchApi";
import { PluginExportType, usePluginHooksType } from "@/types/type";
import type { Plugin, registerComponentOption } from "@/class/PluginCenter";
import { checkComponentPlugin, checkNormalPlugin } from "./checkPluginAvailable";
import { PluginExportType, usePluginHooksType } from '@/types/type'
import type { Plugin, registerComponentOption } from '@/class/PluginCenter'
import { checkComponentPlugin, checkNormalPlugin } from './checkPluginAvailable'
// const miaoFetchApi = useMiaoFetchApi()
export default async function registerExternalPlugin(_VDirectories: VirtualDirectory[], VFiles: VirtualFile[], hooks: usePluginHooksType) {
export default async function registerExternalPlugin(
_VDirectories: VirtualDirectory[],
VFiles: VirtualFile[],
hooks: usePluginHooksType
) {
try {
const targetPluginVFile = VFiles[0] as VirtualFile
const plugin = await import(/* @vite-ignore */ targetPluginVFile.url) as {
default: registerComponentOption | Plugin;
type: PluginExportType;
key?: string;
const plugin = (await import(
/* @vite-ignore */ targetPluginVFile.url
)) as {
default: registerComponentOption | Plugin
type: PluginExportType
key?: string
}
const pc = hooks.getPluginCenter()
if (plugin.type === PluginExportType.default) {
if (checkNormalPlugin(plugin.default) === false) {
throw('插件不合法')
throw '插件不合法'
}
pc.register(plugin.key ?? `${Math.random()}`, plugin.default as Plugin)
} else {
if (checkComponentPlugin(plugin.default) === false) {
throw('插件不合法')
throw '插件不合法'
}
pc.registerComponent(plugin.default as registerComponentOption)
}
} catch (e) {
console.error(e);
console.error(e)
hooks.globalAlertTip('导入外部插件失败', {
type: 'error',
timeout: 3000
src/styles/default.scss
+1 -2
View File
@@ -1,4 +1,3 @@
:root
body {
:root body {
background-color: aliceblue;
}
src/types/fetch.ts
+12 -12
View File
@@ -1,39 +1,39 @@
import { AxiosRequestConfig } from "axios";
import { directory, file } from "./type";
import { AxiosRequestConfig } from 'axios'
import { directory, file } from './type'
export type miaoFetchConfig = {
retry?: number
axiosOption?: AxiosRequestConfig<any>
}
export type getOption = {} & miaoFetchConfig;
export type getOption = {} & miaoFetchConfig
export type getFileOption = {
/**
* 下载进度回调函数
* @param {any} percent 进度百分比，float类型, 0-1
*/
onProcess?: (percent: number) => void;
} & miaoFetchConfig;
onProcess?: (percent: number) => void
} & miaoFetchConfig
export type getResponse = (file | directory)[];
export type getResponse = (file | directory)[]
export type uploadOption = {
/**
* 上传进度回调函数
* @param {any} percent 进度百分比，float类型, 0-1
*/
onProcess?: (percent: number) => void;
onProcess?: (percent: number) => void
/**
* 上传文件执行的操作
* write即为覆盖写
* append即为增量写
*/
type?: "write" | "append";
} & miaoFetchConfig;
type?: 'write' | 'append'
} & miaoFetchConfig
export type deleteOption = {} & miaoFetchConfig;
export type renameOption = {} & miaoFetchConfig;
export type deleteOption = {} & miaoFetchConfig
export type renameOption = {} & miaoFetchConfig
export type cutOption = {} & miaoFetchConfig
export type mkdirOption = {} & miaoFetchConfig
export type queryOption = {} & miaoFetchConfig;
export type queryOption = {} & miaoFetchConfig
src/types/type.ts
+36 -30
View File
@@ -1,48 +1,54 @@
import PluginCenter from "@/class/PluginCenter";
import VirtualDirectory from "@/class/VirtualDirectory";
import type { VirtualPages } from "@/class/VirtualPage";
import PluginCenter from '@/class/PluginCenter'
import VirtualDirectory from '@/class/VirtualDirectory'
import type { VirtualPages } from '@/class/VirtualPage'
export type stats = {
atimeMs: number; // 上次访问时间（毫秒）
birthtimeMs: number; // 创建时间（毫秒）
ctimeMs: number; // 状态更改时间（毫秒）
mtimeMs: number; // 上次修改时间（毫秒）
};
atimeMs: number // 上次访问时间（毫秒）
birthtimeMs: number // 创建时间（毫秒）
ctimeMs: number // 状态更改时间（毫秒）
mtimeMs: number // 上次修改时间（毫秒）
}
export type file = {
name: string;
size: number;
type?: "file";
stats: stats;
};
name: string
size: number
type?: 'file'
stats: stats
}
export type directory = {
name: string;
name: string
// 考虑到可能还没请求过来
content?: (file | directory)[];
type?: "directory";
stats: stats;
parent?: directory;
};
content?: (file | directory)[]
type?: 'directory'
stats: stats
parent?: directory
}
export type alertTipType = (content: string, options?: AlertTipMessageOptions) => (newContent: string, newOptions?: AlertTipMessageOptions) => void;
export type alertTipType = (
content: string,
options?: AlertTipMessageOptions
) => (newContent: string, newOptions?: AlertTipMessageOptions) => void
export interface AlertTipMessageOptions {
type?: "info" | "success" | "error";
timeout?: number;
id?: number;
type?: 'info' | 'success' | 'error'
timeout?: number
id?: number
}
export enum PluginExportType {
default = "default",
component = "component"
default = 'default',
component = 'component'
}
export interface usePluginHooksType {
globalAlertTip: alertTipType;
getViews: () => VirtualPages;
getPluginCenter: () => PluginCenter;
getRootVDirectory: () => VirtualDirectory;
globalAlertTip: alertTipType
getViews: () => VirtualPages
getPluginCenter: () => PluginCenter
getRootVDirectory: () => VirtualDirectory
}
export type Equals<X, Y> = (<T>() => T extends X ? 1 : 2) extends <T>() => T extends Y ? 1 : 2 ? true : false;
export type Equals<X, Y> =
(<T>() => T extends X ? 1 : 2) extends <T>() => T extends Y ? 1 : 2
? true
: false