feat: 修改代码风格
This commit is contained in:
1 parent
c6999647c3
commit
8605bd19ea
26 files changed
+135
-311
No files matched your search
+3
-3
@@ -63,7 +63,7 @@ export default {
|
||||
* @default false
|
||||
* @type {boolean}
|
||||
*/
|
||||
bracketSameLine: false,
|
||||
bracketSameLine: true,
|
||||
/**
|
||||
* 当箭头函数只有一个参数是否加括号
|
||||
* @default "always"
|
||||
@@ -99,6 +99,6 @@ export default {
|
||||
* @default true
|
||||
* @type {boolean}
|
||||
*/
|
||||
singleAttributePerLine: true,
|
||||
disableLanguages: ['html']
|
||||
// singleAttributePerLine: true,
|
||||
// disableLanguages: ['html']
|
||||
}
|
||||
+14
-32
@@ -137,10 +137,7 @@ 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>
|
||||
@@ -149,13 +146,11 @@ provide('rootDirectory', rootDirectory)
|
||||
<div
|
||||
class="tab"
|
||||
v-for="(view, index) of views._views"
|
||||
:key="view.id"
|
||||
>
|
||||
:key="view.id">
|
||||
<span
|
||||
class="tab-title"
|
||||
:title="view.title"
|
||||
@click="handleClickTitle(index)"
|
||||
>
|
||||
@click="handleClickTitle(index)">
|
||||
{{
|
||||
view.title.length > 5 && 0
|
||||
? `${view.title.substring(0, 5)}...`
|
||||
@@ -165,20 +160,16 @@ provide('rootDirectory', rootDirectory)
|
||||
<div class="tab-control">
|
||||
<div
|
||||
class="tab-point"
|
||||
:style="{ backgroundColor: view.color }"
|
||||
></div>
|
||||
:style="{ backgroundColor: view.color }"></div>
|
||||
<n-icon
|
||||
class="tag-control-icon icon"
|
||||
@click="view.switchShow()"
|
||||
>
|
||||
@click="view.switchShow()">
|
||||
<EyeOutline
|
||||
v-show="view.visible"
|
||||
class="icon-inner"
|
||||
/>
|
||||
class="icon-inner" />
|
||||
<EyeOffOutline
|
||||
v-show="!view.visible"
|
||||
class="icon-inner"
|
||||
/>
|
||||
class="icon-inner" />
|
||||
</n-icon>
|
||||
<n-icon
|
||||
class="tag-control-icon icon"
|
||||
@@ -191,14 +182,12 @@ provide('rootDirectory', rootDirectory)
|
||||
index + 1
|
||||
)
|
||||
"
|
||||
v-if="view.allowCopy"
|
||||
>
|
||||
v-if="view.allowCopy">
|
||||
<CopyOutline />
|
||||
</n-icon>
|
||||
<n-icon
|
||||
class="tag-control-icon icon"
|
||||
@click="deleteView(index)"
|
||||
>
|
||||
@click="deleteView(index)">
|
||||
<CloseOutline class="icon-inner" />
|
||||
</n-icon>
|
||||
</div>
|
||||
@@ -211,8 +200,7 @@ provide('rootDirectory', rootDirectory)
|
||||
<n-dropdown
|
||||
trigger="click"
|
||||
:options="openMenuOption"
|
||||
@select="handleMenuSelect"
|
||||
>
|
||||
@select="handleMenuSelect">
|
||||
<n-icon class="icon">
|
||||
<EllipsisVertical class="icon-inner" />
|
||||
</n-icon>
|
||||
@@ -226,8 +214,7 @@ provide('rootDirectory', rootDirectory)
|
||||
class="view-container-item"
|
||||
v-for="(view, index) of views._views"
|
||||
:class="!view.visible ? 'view-container-item-hidden' : ''"
|
||||
:key="view.id"
|
||||
>
|
||||
:key="view.id">
|
||||
<component
|
||||
:is="view.component"
|
||||
v-model:current-directories="view.currentDirectories"
|
||||
@@ -236,23 +223,18 @@ provide('rootDirectory', rootDirectory)
|
||||
:color="view.color"
|
||||
:view="view"
|
||||
:views="views"
|
||||
@exit="deleteView(index)"
|
||||
></component>
|
||||
@exit="deleteView(index)"></component>
|
||||
</div>
|
||||
<!-- </transition-group> -->
|
||||
</div>
|
||||
</miao-message-provider>
|
||||
</div>
|
||||
<!-- 模态框展示,用来显示分享二维码,设置菜单之类的东西 -->
|
||||
<MiaoMask
|
||||
v-model:show="showModal"
|
||||
@click="showModal = false"
|
||||
>
|
||||
<MiaoMask v-model:show="showModal" @click="showModal = false">
|
||||
<component
|
||||
@click="(e: any) => e.stopPropagation()"
|
||||
:is="modalData?.component"
|
||||
v-bind="modalData?.props"
|
||||
></component>
|
||||
v-bind="modalData?.props"></component>
|
||||
</MiaoMask>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,25 +1,16 @@
|
||||
<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"
|
||||
>
|
||||
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"
|
||||
>
|
||||
: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">
|
||||
|
||||
@@ -4,8 +4,7 @@
|
||||
<div
|
||||
class="main"
|
||||
@contextmenu="handleContextMenu"
|
||||
@mouseleave="handleMainMouseLeave"
|
||||
>
|
||||
@mouseleave="handleMainMouseLeave">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<n-dropdown
|
||||
@@ -18,8 +17,7 @@
|
||||
:on-clickoutside="onClickoutside"
|
||||
@select="handleSelect"
|
||||
@mouseleave="showContextMenu -= 1"
|
||||
@mouseenter="showContextMenu += 1"
|
||||
/>
|
||||
@mouseenter="showContextMenu += 1" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@@ -1,9 +1,5 @@
|
||||
<template>
|
||||
<div
|
||||
ref="divRef"
|
||||
@dragstart="onDs"
|
||||
:draggable="isDraggable"
|
||||
>
|
||||
<div ref="divRef" @dragstart="onDs" :draggable="isDraggable">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -3,8 +3,7 @@
|
||||
class="container"
|
||||
@dragover="handleDragOver"
|
||||
@dragleave="handleDragLeave"
|
||||
@drop="handleDrop"
|
||||
>
|
||||
@drop="handleDrop">
|
||||
<slot></slot>
|
||||
<miao-mask v-model:show="showMask"></miao-mask>
|
||||
</div>
|
||||
|
||||
@@ -13,8 +13,7 @@
|
||||
margin
|
||||
}
|
||||
: {}
|
||||
"
|
||||
>
|
||||
">
|
||||
<slot v-if="show" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,10 +1,6 @@
|
||||
<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>
|
||||
|
||||
@@ -1,10 +1,6 @@
|
||||
<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"
|
||||
@@ -13,16 +9,14 @@
|
||||
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>
|
||||
|
||||
@@ -3,28 +3,22 @@
|
||||
<div
|
||||
class="codemirror-container"
|
||||
ref="rootRef"
|
||||
:class="`codemirror-container-${theme}`"
|
||||
>
|
||||
:class="`codemirror-container-${theme}`">
|
||||
<div class="codemirror-container-top">
|
||||
<div
|
||||
class="codemirror-container-btn codemirror-container-btn-save"
|
||||
@click="handleSave"
|
||||
>
|
||||
@click="handleSave">
|
||||
保存
|
||||
</div>
|
||||
<div
|
||||
class="codemirror-container-btn codemirror-container-btn-save"
|
||||
@click="handleReset"
|
||||
>
|
||||
@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>
|
||||
|
||||
@@ -6,8 +6,7 @@
|
||||
<div
|
||||
v-for="item of workItemList"
|
||||
:key="item.id"
|
||||
class="miaoCrypto-container-item-item"
|
||||
>
|
||||
class="miaoCrypto-container-item-item">
|
||||
<div
|
||||
class="miaoCrypto-container-item-percentBar"
|
||||
:style="{
|
||||
@@ -17,16 +16,14 @@
|
||||
? `${item.getBufferProgress * 100}%`
|
||||
: `0%`,
|
||||
backgroundColor: 'blue'
|
||||
}"
|
||||
></div>
|
||||
}"></div>
|
||||
<div
|
||||
class="miaoCrypto-container-item-percentBar"
|
||||
:style="{
|
||||
zIndex: 1,
|
||||
width: item.status === 'finish' ? `100%` : `0%`,
|
||||
backgroundColor: 'green'
|
||||
}"
|
||||
></div>
|
||||
}"></div>
|
||||
<span class="miaoCrypto-container-item-content">
|
||||
{{ item.name }}{{ item.status }}
|
||||
</span>
|
||||
|
||||
@@ -3,16 +3,14 @@
|
||||
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')"
|
||||
/>
|
||||
@click="emit('add-new-item')" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-bottom-item">
|
||||
@@ -21,8 +19,7 @@
|
||||
:style="{
|
||||
color: index % 2 === 0 ? 'rgb(0 0 0)' : 'rgb(255 255 255)'
|
||||
}"
|
||||
@click="emit('pick-files-upload')"
|
||||
/>
|
||||
@click="emit('pick-files-upload')" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,49 +3,36 @@
|
||||
class="miao-item"
|
||||
:isDraggable="!draggable"
|
||||
ref="itemRef"
|
||||
@on-drag-start="handleDragStart"
|
||||
>
|
||||
@on-drag-start="handleDragStart">
|
||||
<miaoContextMenu
|
||||
:options="dropDownOptions ?? []"
|
||||
:touch-time-out="500"
|
||||
@select="handleDropdownSelect"
|
||||
>
|
||||
@select="handleDropdownSelect">
|
||||
<div
|
||||
class="item-main"
|
||||
:class="selected ? 'item-main-selected' : ''"
|
||||
ref="mainRef"
|
||||
>
|
||||
ref="mainRef">
|
||||
<div
|
||||
class="item-main-front"
|
||||
:style="{ backgroundColor: props.color }"
|
||||
></div>
|
||||
<Icon
|
||||
class="item-main-icon"
|
||||
v-show="clientWidth > 250"
|
||||
></Icon>
|
||||
: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>
|
||||
v-if="clientWidth <= 250"></Icon>
|
||||
<n-ellipsis
|
||||
:style="{ maxWidth: clientWidth > 250 ? '80%' : '75%' }"
|
||||
>
|
||||
: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"
|
||||
>
|
||||
:isDraggable="draggable">
|
||||
<ReorderFourOutline></ReorderFourOutline>
|
||||
</miao-draggable-div>
|
||||
</div>
|
||||
|
||||
@@ -3,18 +3,13 @@
|
||||
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"
|
||||
@@ -25,14 +20,12 @@
|
||||
@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"
|
||||
@@ -44,8 +37,7 @@
|
||||
@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>
|
||||
|
||||
@@ -3,18 +3,13 @@
|
||||
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>
|
||||
: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 />
|
||||
@@ -23,8 +18,7 @@
|
||||
<n-breadcrumb-item
|
||||
v-for="dir in currentDirectory?.getParents"
|
||||
@click="handleClickBreadcrumbItem(dir)"
|
||||
:clickable="true"
|
||||
>
|
||||
:clickable="true">
|
||||
<div>{{ dir.name }}</div>
|
||||
</n-breadcrumb-item>
|
||||
</n-breadcrumb>
|
||||
@@ -34,26 +28,20 @@
|
||||
<n-icon
|
||||
class="container-top-tools-item"
|
||||
size="15"
|
||||
@click="$emit('back')"
|
||||
>
|
||||
@click="$emit('back')">
|
||||
<ChevronBackOutline />
|
||||
</n-icon>
|
||||
<n-icon
|
||||
class="container-top-tools-item"
|
||||
size="14"
|
||||
@click="$emit('reload')"
|
||||
>
|
||||
@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"
|
||||
>
|
||||
@select="(key: string) => emit('menuSelect', key)">
|
||||
<n-icon class="container-top-tools-item" size="14">
|
||||
<EllipsisVertical />
|
||||
</n-icon>
|
||||
</n-dropdown>
|
||||
|
||||
@@ -2,13 +2,9 @@
|
||||
<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"
|
||||
@@ -20,8 +16,7 @@
|
||||
:index="index"
|
||||
@set-current-directory="setCurrentDirectory"
|
||||
@search="handleSearch"
|
||||
@menu-select="handleTopBarMenuSelect"
|
||||
/>
|
||||
@menu-select="handleTopBarMenuSelect" />
|
||||
|
||||
<!-- 文件和文件夹列表 -->
|
||||
<miao-directory-items
|
||||
@@ -36,16 +31,14 @@
|
||||
@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>
|
||||
|
||||
@@ -4,8 +4,7 @@
|
||||
ref="iframeRef"
|
||||
:src="iframeSrc"
|
||||
frameborder="0"
|
||||
class="iframe-container-iframe"
|
||||
></iframe>
|
||||
class="iframe-container-iframe"></iframe>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,21 +1,13 @@
|
||||
<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>
|
||||
@@ -30,8 +22,7 @@
|
||||
<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"
|
||||
@@ -41,8 +32,7 @@
|
||||
? 'miaoImage-container-row-image-active'
|
||||
: ''
|
||||
"
|
||||
@click="activeImage = vFile"
|
||||
/>
|
||||
@click="activeImage = vFile" />
|
||||
</div>
|
||||
</div>
|
||||
</n-scrollbar>
|
||||
@@ -50,23 +40,19 @@
|
||||
: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>
|
||||
|
||||
@@ -2,8 +2,7 @@
|
||||
<n-scrollbar>
|
||||
<div
|
||||
class="miao-markdown-container-miaomiaomiao"
|
||||
v-html="renderedMarkdown"
|
||||
></div>
|
||||
v-html="renderedMarkdown"></div>
|
||||
<div style="height: 50px; width: 100%"></div>
|
||||
</n-scrollbar>
|
||||
</template>
|
||||
|
||||
@@ -7,21 +7,15 @@
|
||||
:ap="ap"
|
||||
v-model:data="data"
|
||||
:updateLocalData="updateLocalData"
|
||||
@new-collection="saveCurrPlayList"
|
||||
></miao-music-main>
|
||||
@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"
|
||||
/>
|
||||
@click="() => ap?.list.hide()"></miao-mask>
|
||||
<div ref="aplayer" style="z-index: 10" />
|
||||
<miao-mask
|
||||
:show="isSavingCollection"
|
||||
@click="isSavingCollection = false"
|
||||
></miao-mask>
|
||||
@click="isSavingCollection = false"></miao-mask>
|
||||
</div>
|
||||
</miao-alert-tip-provider>
|
||||
</miao-drop-handler>
|
||||
|
||||
@@ -1,23 +1,14 @@
|
||||
<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
|
||||
@@ -25,8 +16,7 @@
|
||||
v-if="isEditing"
|
||||
@click="
|
||||
clickDeleteCount !== 2 ? clickDeleteCount++ : emit('deleteSelf')
|
||||
"
|
||||
>
|
||||
">
|
||||
<TrashOutline></TrashOutline>
|
||||
<span>
|
||||
{{
|
||||
@@ -42,8 +32,7 @@
|
||||
<div class="collection-info-container-controller">
|
||||
<div
|
||||
class="collection-info-container-controller-play"
|
||||
@click="emit('playAll', collection)"
|
||||
>
|
||||
@click="emit('playAll', collection)">
|
||||
<div class="collection-info-container-controller-play-icon">
|
||||
<CaretForwardOutline></CaretForwardOutline>
|
||||
</div>
|
||||
@@ -54,11 +43,11 @@
|
||||
<div class="collection-info-container-controller-right">
|
||||
<div
|
||||
class="collection-info-container-controller-edit"
|
||||
@click="isEditing = !isEditing"
|
||||
>
|
||||
@click="isEditing = !isEditing">
|
||||
<component
|
||||
:is="isEditing ? CheckmarkOutline : CreateOutline"
|
||||
></component>
|
||||
:is="
|
||||
isEditing ? CheckmarkOutline : CreateOutline
|
||||
"></component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -69,46 +58,40 @@
|
||||
:animation="150"
|
||||
handle=".collection-info-container-audioList-item-controller-item-drag"
|
||||
ghostClass="iSDragging"
|
||||
@end="updateAudiosIndex"
|
||||
>
|
||||
@end="updateAudiosIndex">
|
||||
<div
|
||||
v-for="(audio, index) in collection.audios"
|
||||
class="collection-info-container-audioList-item"
|
||||
>
|
||||
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"
|
||||
>
|
||||
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>
|
||||
v-if="isEditing"></n-input>
|
||||
</div>
|
||||
<div
|
||||
class="collection-info-container-audioList-item-controller"
|
||||
>
|
||||
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>
|
||||
@click="
|
||||
emit('playAll', collection, index)
|
||||
"></PlayOutline>
|
||||
<TrashOutline
|
||||
class="collection-info-container-audioList-item-controller-item"
|
||||
v-if="isEditing"
|
||||
@click="handleDelete(index)"
|
||||
></TrashOutline>
|
||||
@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>
|
||||
class="collection-info-container-audioList-item-controller-item collection-info-container-audioList-item-controller-item-drag"></ReorderFourOutline>
|
||||
</div>
|
||||
</div>
|
||||
</VueDraggable>
|
||||
|
||||
@@ -1,13 +1,9 @@
|
||||
<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>
|
||||
@@ -16,8 +12,7 @@
|
||||
<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>
|
||||
@@ -27,8 +22,7 @@
|
||||
!isDragging ? 'miaoMusic-ol-isDragging' : 'miaoMusic-ol-notDragging'
|
||||
]"
|
||||
:key="refreshKey"
|
||||
ref="ol"
|
||||
>
|
||||
ref="ol">
|
||||
<VueDraggable
|
||||
v-model="ap.list.audios"
|
||||
@start="onDragStart"
|
||||
@@ -36,79 +30,67 @@
|
||||
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"
|
||||
>
|
||||
v-if="false">
|
||||
<ChevronUpOutline class="aplayer-list-control-btn-svg" />
|
||||
</div>
|
||||
<div
|
||||
class="aplayer-list-control-btn"
|
||||
@click.stop="listAudioDown(index)"
|
||||
v-if="false"
|
||||
>
|
||||
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"
|
||||
>
|
||||
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>
|
||||
|
||||
@@ -1,17 +1,10 @@
|
||||
<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>
|
||||
|
||||
@@ -8,21 +8,18 @@
|
||||
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 />
|
||||
@@ -32,8 +29,7 @@
|
||||
<n-button
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="emit('newCollection')"
|
||||
>
|
||||
@click="emit('newCollection')">
|
||||
立刻创建
|
||||
</n-button>
|
||||
</template>
|
||||
@@ -47,8 +43,7 @@
|
||||
v-if="currCollection"
|
||||
@exit="handleCollectionEnter(undefined)"
|
||||
@delete-self="handleCollectionDelete()"
|
||||
@play-all="handleCollectionsPlay"
|
||||
></collectionInfo>
|
||||
@play-all="handleCollectionsPlay"></collectionInfo>
|
||||
</Transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -5,36 +5,31 @@
|
||||
<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>
|
||||
@@ -43,15 +38,13 @@
|
||||
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>
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
<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>
|
||||
|
||||
Reference in new issue
Block a user