,
params: params as Ref,
run: requestInstance.run,
runAsync: requestInstance.runAsync,
mutate: requestInstance.mutate,
cancel: requestInstance.cancel,
refresh: requestInstance.refresh,
refreshAsync: requestInstance.refreshAsync,
}
}
const usePolling: Plugin> = (request, { pollingInterval, pollingWhenHidden = true }) => {
if (!pollingInterval) return {}
let timer: number, docVisibleWatcher: () => void
const stop = () => {
if (timer) {
clearTimeout(timer)
}
docVisibleWatcher?.()
}
return {
before() {
stop()
},
finally() {
if (!pollingWhenHidden && !documentVisibility.value) {
docVisibleWatcher = whenDocumentVisible(request.refresh)
return
}
timer = setTimeout(request.refresh, pollingInterval)
},
cancel() {
stop()
},
}
}
const useDelay: Plugin> = (request, { loadingDelay = 0 }) => {
if (!loadingDelay) return {}
let timer: number
const clear = () => {
if (timer) {
clearTimeout(timer)
}
}
return {
before() {
clear()
timer = setTimeout(() => {
request.state.loading = true
}, loadingDelay)
return {
loading: false,
}
},
finally() {
clear()
},
cancel() {
clear()
},
}
}
const useAuto: Plugin> = (request, { ready = ref(true), immediate = false, refreshDeps = [] }) => {
if (refreshDeps) {
watch(refreshDeps, () => {
request.refresh()
})
}
if (immediate) {
if (ready.value) request.refresh()
else {
watch(ready, (nv) => {
if (nv) request.refresh()
})
}
}
return {
before() {
if (!ready || !ready.value) {
return {
stopNow: true,
}
}
},
}
}
================================================
FILE: packages/sharelist-manage/src/hooks/useScroll.ts
================================================
import { ref, Ref, reactive, UnwrapRef } from 'vue'
interface RequestOptions {
immediate?: boolean
isNoMore?: (data?: T) => boolean
onSuccess?: (data: T) => void
onError?: (e: Error) => void
target?: Ref
threshold?: number
}
interface actions {
setNode(el: Element): void
scrollTo(pos: number): void
cancel: () => void
checkScroll: () => void
isScroll: Ref
}
type useScrollOption = {
list: any[]
[key: string]: any
}
export const useScroll = >(
service: (args?: T) => Promise,
options: RequestOptions = {},
): actions => {
let el: Element
const isScroll = ref(false)
const setNode = (v: Element) => {
if (el) {
cancel()
}
el = v
el.addEventListener('scroll', onDomScroll)
}
const cancel = () => {
el?.removeEventListener('scroll', onDomScroll)
}
const onDomScroll = throttle(() => {
const { clientHeight, scrollTop, scrollHeight } = el
isScroll.value = scrollTop > 0
if (scrollHeight - scrollTop - clientHeight < (options?.threshold || 100)) {
service()
}
}, 200)
const scrollTo = (v: number) => {
if (el) {
el.scrollTo({ top: v })
}
}
const checkScroll = () => {
const { clientHeight, scrollTop, scrollHeight } = el
if (clientHeight == scrollHeight) service()
}
return {
setNode,
cancel,
scrollTo,
isScroll,
checkScroll,
}
}
const throttle = function (fn: () => any, delay = 0) {
let now: number,
last = 0,
timer: number | null,
context: any,
args: Array | null
const later = function () {
last = now
fn.apply(context, <[]>args)
timer = null
context = args = null
}
const listen = function (this: any, ...rest: Array) {
args = rest
now = Date.now()
//剩余时间
const remaining = delay - (now - last)
if (remaining <= 0 || remaining > delay) {
if (timer) {
clearTimeout(timer)
timer = null
}
last = now
fn.apply(this, <[]>rest)
if (!timer) context = args = null
} else if (!timer) {
timer = setTimeout(later, remaining)
}
}
return listen
}
================================================
FILE: packages/sharelist-manage/src/hooks/useSetting.ts
================================================
import { ref, Ref, reactive } from 'vue'
import { useApi, ReqResponse } from '@/hooks/useApi'
import { message } from 'ant-design-vue'
import { useBoolean } from './useHooks'
import { saveFile } from '../utils/format'
import useStore from '@/store/index'
type IUseSetting = {
(): IUseSettingResult
instance?: any
}
export interface IUseSettingResult {
configFields: Ref>
signout(): any
reload(): any
loginState: Ref
isLoading: Ref
getValue(key: string): any
config: any
setConfig(data: ISetting, msg?: string): Promise
getConfig(token: string): void
exportConfig(): void
clearCache(): void
getPlugin(id: string): Promise
setPlugin(id: string, data: string): Promise
removePlugin(id: string): Promise
upgradePlugin(id: string): Promise
reloadConfig(): void
}
export type ConfigFieldItem = {
code: string
label: string
help?: string
secret?: boolean
type: 'string' | 'number' | 'boolean' | 'option' | 'array' | 'textarea'
handler?: (...rest: any) => void
validator?: (...rest: any) => boolean
}
type fieldGroup = {
title: string
children: Array
}
const fields: Array = [
{
title: '常规',
children: [
{ code: 'title', label: '网站标题', type: 'string' },
{
code: 'manage_path',
label: '后台地址',
type: 'string',
help: '地址必须以 / 开头',
validator: (val) => /^\//.test(val),
handler: (nv: string, ov: string) => (location.href = location.href.replace(ov, nv)),
},
{ code: 'token', label: '后台密码', type: 'string', secret: true },
{ code: 'proxy_enable', label: '全局代理', type: 'boolean' },
{ code: 'index_enable', label: '目录浏览', type: 'boolean' },
{
code: 'proxy_override_content_type',
label: '代理时重写Content-Type',
help: '此项是为了兼容某些挂载源，因返回内容的content type异常，导致无法在线播放的问题。',
type: 'boolean',
},
{
code: 'anonymous_download_enable',
label: '允许下载',
type: 'boolean',
help: '禁用此项后，预览也将不可用。',
},
{
code: 'expand_single_disk',
label: '展开单一挂载盘',
help: '只有一个挂载盘时，直接展示改挂载盘内容。',
type: 'boolean',
},
{
code: 'per_page',
label: '列表分页大小',
help: '设置分页将自动禁用缓存。某些挂载源可能不支持自定义分页大小。0 表示不分页。',
type: 'number',
},
],
},
{
title: '外观',
children: [
{ code: 'theme', label: '主题', type: 'option' },
{ code: 'script', label: '自定义脚本', type: 'textarea' },
{ code: 'style', label: '自定义样式', type: 'textarea' },
],
},
{
title: '传输设置',
children: [
{ code: 'proxy_url', label: '代理地址', help: '当前支持 HTTP/HTTPS 代理。', type: 'string' },
{ code: 'plugin_source', label: '插件源', type: 'option' },
],
},
{
title: 'WebDAV',
children: [
{ code: 'webdav_enable', label: '启用 WebDAV', type: 'boolean' },
{ code: 'webdav_path', label: 'WebDAV 路径', type: 'string' },
{ code: 'webdav_proxy', label: 'WebDAV 代理', type: 'boolean' },
{ code: 'webdav_user', label: 'WebDAV 用户名', type: 'string' },
{ code: 'webdav_pass', label: 'WebDAV 密码', type: 'string' },
],
},
]
export const useSetting: IUseSetting = (): IUseSettingResult => {
if (useSetting.instance) {
return useSetting.instance
}
const request = useApi()
const store = useStore()
const config: ISetting = reactive({})
const [isLoading, { setFalse: hideLoading }] = useBoolean(true)
const loginState = ref(0)
const configFields: Ref> = ref(fields)
const getConfig = (val: string) => {
store.saveToken(val)
request.setting().then((resp: ReqResponse) => {
if (resp.error) {
if (resp.error.code == 401) {
store.saveToken('')
loginState.value = 2
if (resp.error.message) {
message.error(resp.error.message)
}
}
} else {
loginState.value = 1
updateSetting(resp.data as ISetting)
}
hideLoading()
})
}
const setConfig = (data: ISetting, msg = '已保存') => {
// console.log(data)
return request.saveSetting(data).then((resp: ReqResponse) => {
if (resp.error) {
message.error(resp.error.message || 'error')
} else {
updateSetting(resp.data as ISetting)
// return Promise.resolve(true)
message.success(msg)
}
})
}
const reloadConfig = () => {
getConfig(store.accessToken)
}
const updateSetting = (data: ISetting) => {
for (const i in data) {
config[i] = data[i]
}
configFields.value = [...fields, ...config.pluginConfig.map((i: any) => ({ title: i.name, children: i.config }))]
}
const getValue = (code: string) => {
return config[code]
}
const signout = () => {
store.removeToken()
loginState.value = 2
Object.keys(config).forEach((key) => Reflect.deleteProperty(config, key))
}
const reload = () => {
request.reload().then((resp: any) => {
// hidden()
if (resp.error) {
message.error(resp.error?.message)
} else {
message.success('操作成功')
}
})
}
const clearCache = () => {
// const hidden = message.loading('正在清除缓存', 0)
request.clearCache().then((resp: any) => {
// hidden()
if (resp.error) {
message.error(resp.error?.message)
} else {
message.success('操作成功')
}
})
}
const exportConfig = () => {
request.exportSetting().then((resp: any) => {
// hidden()
if (resp.error) {
message.error(resp.error?.message)
} else {
saveFile(JSON.stringify(resp.data), 'config.json')
}
})
}
const getPlugin = async (id: string): Promise => {
return request.plugin(id).then((resp: any) => {
if (resp.error) {
message.error(resp.error?.message)
} else {
return resp.data
}
})
}
const setPlugin = async (id: string, data: string): Promise => {
const res = await request.savePlugin({ id, data })
if (res.error) {
message.error(res.error?.message)
throw new Error(res.error?.message)
} else {
message.success('保存成功')
reloadConfig()
}
}
const removePlugin = async (id: string): Promise => {
const res = await request.removePlugin(id)
if (res.error) {
message.error(res.error?.message)
//throw new Error(res.error?.message)
} else {
message.success('删除成功')
reloadConfig()
}
}
const upgradePlugin = async (id: string): Promise => {
const res = await request.upgradePlugin(id)
if (res.error) {
message.error(res.error?.message)
//throw new Error(res.error?.message)
} else {
message.success('更新成功')
reloadConfig()
}
}
if (!config.token && store.accessToken) {
getConfig(store.accessToken)
} else {
loginState.value = 2
hideLoading()
}
return (useSetting.instance = {
signout,
reload,
loginState,
isLoading,
getValue,
configFields,
config,
setConfig,
getConfig,
exportConfig,
clearCache,
getPlugin,
setPlugin,
removePlugin,
upgradePlugin,
reloadConfig,
})
}
export const useConfig: IUseSetting = (): any => {
const config: Record = reactive({})
const request = useApi()
request.config().then((resp: ReqResponse) => {
if (!resp.error) {
for (const i in resp.data) {
config[i] = resp.data[i]
}
}
})
return { config }
}
================================================
FILE: packages/sharelist-manage/src/hooks/useStore.ts
================================================
import { provide, inject, Ref, ref } from 'vue'
type InjectType = 'root' | 'optional'
export interface FunctionalStore {
(): T
key?: symbol
root?: T
}
export const regStore = (store: FunctionalStore): T => {
if (!store.key) {
store.key = Symbol('functional store')
}
const depends = store()
provide(store.key, depends)
return depends
}
export const useStore = (store: FunctionalStore, type?: InjectType): any => {
const key = store.key
const root = store.root
switch (type) {
case 'optional':
return inject(key) || store.root || null
case 'root':
if (!store.root) store.root = store()
return store.root
default:
if (inject(key)) {
return inject(key)
}
if (root) return store.root
throw new Error(`状态钩子函数${store.name}未在上层组件通过调用useProvider提供`)
}
}
export const useAsync = (cb: (() => Promise) | Promise): Ref => {
const val = ref()
Promise.resolve(typeof cb === 'function' ? cb() : cb).then((resp) => {
val.value = resp
})
return val
}
const jsbridge = {
call: (name: string, param?: any, callback?: (value?: unknown) => void) => name,
getGrayScaleValue: (v: any) => v,
}
type BridgeValue = {
returnValue: string
}
type BridgeFunctions = 'getGrayScaleValue'
export const useBridgeValue = (
fn: BridgeFunctions,
params: P,
): { value: Ref; ready: Ref } => {
const value: Ref = ref()
const ready = ref(false)
Promise.resolve(jsbridge[fn](params)).then((resp: T) => {
value.value = resp
ready.value = true
})
return { value, ready }
}
type GrayParams = 'code1' | 'code2'
type GrapValue = {
returnValue: string
}
const { ready, value } = useBridgeValue('getGrayScaleValue', 'code')
type ICdpSpaceInfo = {
returnValue: string
}
function getCdpSpaceInfo(spaceCode: string): Promise {
return new Promise((resolve) => {
jsbridge.call('getCdpSpaceInfo', { spaceCode }, (resp: unknown) => {
resolve(resp as ICdpSpaceInfo)
})
})
}
================================================
FILE: packages/sharelist-manage/src/hooks/useUrlState.ts
================================================
import { useRouter, useRoute } from 'vue-router'
import { reactive, watch } from 'vue'
import { useState } from './useHooks'
type initial = {
params: Record
query: Record
}
export default ({ params: initialParams, query: initialQuery }: initial = { params: {}, query: {} }): any => {
const router = useRouter()
const route = useRoute()
const [params, updateParams] = useState({
...initialParams,
...route.params,
})
const [query, updateQuery] = useState({
...initialQuery,
...route.query,
})
const setQuery = (data: Record) => {
router.push({
query: {
...route.query,
...updateQuery(data),
},
})
}
const setParams = (data: Record) => {
router.push({
...route.params,
...updateParams(data),
})
}
const setPath = (path: string) => {
router.push(path)
}
watch(() => route.params, updateParams)
watch(() => route.query, updateQuery)
watch(query, (nv) => {
console.log('>>>', nv)
})
return { params, query, setQuery, setParams, setPath }
}
================================================
FILE: packages/sharelist-manage/src/hooks/useWorker.ts
================================================
const fnCache = new WeakMap()
type Fn = (...args: any[]) => any
const WORKER_SCRIPT = () => {
const methodsMap: Record = {}
function invoke(name: string, params: unknown[], id: string) {
try {
if (!methodsMap[name]) {
throw new Error('function ' + name + ' is not registered.')
}
const result = methodsMap[name].apply(null, params)
Promise.resolve(result)
.then(function onresolve(res) {
self.postMessage(
JSON.stringify({
data: res,
name: name,
id: id,
}),
)
})
.catch(function onerror(error) {
throw error
})
} catch (error) {
throw error
}
}
self.onmessage = function (e) {
const data = JSON.parse(e.data)
const type = data.type
const name = data.name
switch (type) {
case 'add':
methodsMap[name] = eval(data.code)
break
case 'remove':
if (methodsMap[name]) {
delete methodsMap[name]
}
break
case 'clear':
methodsMap = {}
break
case 'invoke':
var params = data.params
var id = data.id
invoke(name, params, id)
break
}
}
}
class WorkerFactory {
worker: Worker
constructor() {
const url = URL.createObjectURL(new Blob([`(${WORKER_SCRIPT.toString()})()`]))
this.worker = new Worker(url)
}
}
export const useWorker = (fn: Fn) => {
if (useWorker.instance) {
return useWorker.instance
}
const name = fn.name
const url = URL.createObjectURL(new Blob([WORKER_SCRIPT.toString()]))
if (!fnCache.has(fn)) {
const url = URL.createObjectURL(new Blob([__WORKER_SCRIPT__]))
fnCache.set(fn, {
name,
})
}
}
================================================
FILE: packages/sharelist-manage/src/hooks/utils.ts
================================================
import { getCurrentInstance, isRef, onMounted as vueOnMounted, onUnmounted as vueOnUnmounted, Ref } from 'vue'
export const onMounted = (cb: () => any): void => {
const instance = getCurrentInstance()
if (instance) {
if (instance?.isMounted) {
cb()
} else {
vueOnMounted(cb)
}
}
}
export function onUnmounted(cb: () => any): void {
if (getCurrentInstance()) {
vueOnUnmounted(cb)
}
}
================================================
FILE: packages/sharelist-manage/src/index.html
================================================
sharelist
================================================
FILE: packages/sharelist-manage/src/main.ts
================================================
import { createApp, h } from 'vue'
import App from './App'
import router from './router'
import { message, Spin, ConfigProvider } from 'ant-design-vue'
import { createPinia } from 'pinia'
import piniaPersist from 'pinia-plugin-persist'
import apis from '@/config/api'
import { createApi } from '@/hooks/useApi'
import useStore from '@/store/index'
// import 'ant-design-vue/dist/antd.variable.less'
import '@/assets/style/index.less'
import { LoadingOutlined } from '@ant-design/icons-vue'
Spin.setDefaultIndicator({
indicator: h(LoadingOutlined, {
style: {
fontSize: '24px',
},
spin: true,
}),
})
ConfigProvider.config({
theme: {
primaryColor: 'rgb(100,58,218)',
},
autoInsertSpaceInButton: false,
})
const pinia = createPinia()
pinia.use(piniaPersist)
createApi(apis, {
onReq(params, options) {
if (options.token) {
params.headers['Authorization'] = useStore().accessToken
}
},
})
createApp(App)
.use(router)
.use(pinia)
// .use(
// createApi(apis, {
// onReq(params, options) {
// if (options.token) {
// params.headers['Authorization'] = useStore().accessToken
// }
// },
// }),
// )
.provide('$message', message)
.mount('#app')
================================================
FILE: packages/sharelist-manage/src/router/index.ts
================================================
import { createRouter, createWebHashHistory, createWebHistory, RouteRecordRaw, onBeforeRouteLeave } from 'vue-router'
const routes: Array = [
{
path: '/',
component: () => import('../views/home'),
redirect: '/drive/folder',
children: [
{
path: '/general',
name: 'general',
component: () => import('../views/general'),
},
{
path: '/drive/folder:path(.*)',
name: 'drive',
component: () => import('../views/disk'),
/*
children: [
{
path: 'folder:path(.*)',
name: 'file',
component: () => import('../views/disk/files'),
},
],
*/
},
{
path: '/plugin',
name: 'plugin',
component: () => import('../views/plugin'),
},
],
},
]
const router = createRouter({
history: createWebHistory((window as any).MANAGE_BASE),
routes,
})
export default router
================================================
FILE: packages/sharelist-manage/src/store/index.ts
================================================
import { defineStore } from 'pinia'
export default defineStore('sharelist_manage', {
state: () => ({
accessToken: '',
layout: 'list',
theme: 'light',
path: '',
}),
actions: {
saveToken(token: string) {
this.accessToken = token
},
removeToken() {
this.accessToken = ''
},
setLayout(val: string) {
this.layout = val
},
savePath(input: string) {
this.path = input
},
},
persist: {
enabled: true,
strategies: [
{ storage: localStorage, paths: ['layout'] },
{ storage: sessionStorage, paths: ['accessToken'] },
],
},
})
================================================
FILE: packages/sharelist-manage/src/types/IDrive.ts
================================================
type DrivePath = {
protocol: string
[key: string]: string | number
}
declare type DriverField = {
key: string
label: string
value?: string | number | boolean
options?: Array
type?: 'string' | 'hidden' | 'number' | 'boolean' | 'list'
help?: string
fields?: Array
required?: boolean
}
declare type IDrive = {
name: string
[key: string]: string | number
}
declare type IPlugin = {
name: string
id: string
[key: string]: string | number
}
declare type DriverGuide = {
key?: string
label?: string
fields: Array
}
declare type Driver = {
protocol: string
name?: string
guide?: Array
}
declare type IFile = {
id: string
name: string
size: number
type: 'folder' | 'file' | 'drive'
ctime: number
mtime: number
path: string
extra?: Record
[key: string]: any
}
================================================
FILE: packages/sharelist-manage/src/types/shim.d.ts
================================================
declare module '*.vue' {
import { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
declare type ISetting = {
title?: string
index_enable?: boolean
default_ignores?: Array
[key: string]: any
}
================================================
FILE: packages/sharelist-manage/src/types/source.d.ts
================================================
declare module '*.json'
declare module '*.png'
declare module '*.jpg'
declare module 'vue-infinite-scroll'
================================================
FILE: packages/sharelist-manage/src/utils/format.ts
================================================
const EXT_IMAGE = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'tiff', 'wmf', 'tif', 'svg', 'webp']
const EXT_AUDIO_SUPPORT = ['mp3', 'm4a', 'acc', 'wav', 'ogg', 'flac']
const EXT_VIDEO_SUPPORT = ['mp4', 'mpeg', '3gp', 'mkv']
export const getFileType = (v: string, type = 'file'): string => {
if (type == 'folder' || type == 'drive') {
return type
} else {
if (v) v = v.toLowerCase().split('.').pop() || ''
if (['mp4', 'mpeg', 'wmv', 'webm', 'avi', 'rmvb', 'mov', 'mkv', 'f4v', 'flv'].includes(v)) {
return 'video'
} else if (['mp3', 'm4a', 'wav', 'wma', 'ape', 'flac', 'ogg'].includes(v)) {
return 'audio'
} else if (['doc', 'docx', 'wps'].includes(v)) {
return 'word'
} else if (['ppt', 'pptx'].includes(v)) {
return 'ppt'
} else if (['pdf'].includes(v)) {
return 'pdf'
} else if (['xls', 'xlsx', 'pdf', 'txt', 'yaml', 'yml', 'ini', 'cfg', 'xml', 'md'].includes(v)) {
return 'doc'
} else if (EXT_IMAGE.includes(v)) {
return 'image'
} else if (
[
'js',
'ts',
'css',
'html',
'c',
'h',
'cpp',
'py',
'java',
'jsp',
'php',
'cs',
'go',
'swift',
'vue',
'rs',
'asp',
'sql',
].includes(v)
) {
return 'code'
}
// else if (['zip', 'rar', '7z', 'tar', 'gz', 'gz2'].includes(v)) {
// return 'archive'
// }
else {
return 'file'
}
}
}
export const byte = (v: number, fixed?: number): string => {
if (v === undefined || v === null || isNaN(v)) {
return '-'
}
let lo = 0
while (v >= 1024) {
v /= 1024
lo++
}
const val = Math.floor(v * 100) / 100
return (fixed ? val.toFixed(fixed) : val) + ' ' + ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB'][lo]
}
const fix0 = (v: any) => (v > 9 ? v : '0' + v)
export const time = (v: number): string => {
if (!v) return '-'
const date = new Date(v)
const thisYear = new Date().getFullYear()
let ret: string =
fix0(date.getMonth() + 1) + '/' + fix0(date.getDay()) + ' ' + fix0(date.getHours()) + ':' + fix0(date.getMinutes())
if (thisYear != date.getFullYear()) {
ret = date.getFullYear() + '/' + ret
}
return ret
}
export const formatFile = (file: IFile | Array): IFile | Array => {
if (Array.isArray(file)) {
file.forEach((i) => {
i.ext = i.name.split('.').pop()
i.mediaType = getFileType(i.name, i.type)
if (i.ctime) i.ctimeDisplay = time(i.ctime)
if (i.size) i.sizeDisplay = byte(i.size)
})
} else {
file.ext = file.name.split('.').pop()
file.mediaType = getFileType(file.name, file.type)
if (file.ctime) file.ctimeDisplay = time(file.ctime)
if (file.size) file.sizeDisplay = byte(file.size)
}
return file
}
export const isMediaSupport = (name: string, type: 'audio' | 'video' | 'image'): boolean => {
const ext: string = name.split('.').pop() || ''
if (type == 'audio' && EXT_AUDIO_SUPPORT.includes(ext)) {
return true
} else if (type == 'video' && EXT_VIDEO_SUPPORT.includes(ext)) {
return true
} else if (type == 'image' && EXT_IMAGE.includes(ext)) {
return true
}
return false
}
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
export const isType = (type: string) => (obj: any) => Object.prototype.toString.call(obj) === `[object ${type}]`
export const isArray = isType('Array')
export const isObject = isType('Object')
export const isBlob = isType('Blob')
export const isString = (v: string): boolean => typeof v == 'string'
export const getBlob = (data: string, filename: string): Blob | undefined => {
let blob
try {
blob = new Blob([data], { type: 'application/octet-stream' })
} catch (e) {
/**/
}
return blob
}
export const saveFile = (data: Blob | string, filename: string): void => {
let blob: Blob | undefined
if (isString(data as string)) {
blob = getBlob(data as string, filename)
} else {
blob = data as Blob
}
if (blob && isBlob(blob)) {
const URL = window.URL || window.webkitURL
const link = document.createElement('a')
link.href = URL.createObjectURL(blob)
link.download = filename
const evt = document.createEvent('MouseEvents')
evt.initEvent('click', false, false)
// link.click()
link.dispatchEvent(evt)
URL.revokeObjectURL(link.href)
}
}
================================================
FILE: packages/sharelist-manage/src/views/disk/index.less
================================================
.drive{
display: flex;
flex-direction: column;
height:100vh;
&.drive--lite{
height:auto;
}
.drive__header-assistant{
display: flex;
justify-content: space-between;
margin:0 24px 8px 32px;
padding-bottom:12px;
border-bottom: 1px solid var(--primary-hover-bg-color);
font-size:13px;
}
.ant-checkbox-inner{
border-radius: 50%;
box-sizing: border-box;
}
.ant-checkbox-indeterminate{
.ant-checkbox-inner{
background-color: var(--ant-primary-color);
border-color: var(--ant-primary-color);
&:after{
// background-color: var(--context-background);
background-color: #fff;
height:2px;
}
}
}
.drive__header{
display: flex;
align-items: center;
justify-content: space-between;
color: rgba(0, 0, 0, .65);
font-size: 22px;
padding:32px 32px;
z-index:1;
// position: sticky;
// top:0;
.drive__header-back {
margin-right: 1em;
}
// border-bottom:1px solid #f5f6f7;
}
// .drive-breadcrumb{
// overflow-x:auto ;
// }
.drive__actions{
flex:none;
color: var(--context-1);
.ant-badge-dot{
// background:var(--primary-background);
}
}
.drive-search{
max-width:560px;
width:90%;
margin: auto;
transform: translate(0,20vh);
}
.drive-body-wrap{
flex: 1 1 auto;
overflow-y: auto;
position: relative;
}
.drive-body{
flex:1 1 auto;
.item{
display: flex;
width:100%;
justify-content: space-between;
align-items: center;
padding:12px 0;
transition: all 0.3s;
margin-bottom:1px;
cursor: pointer;
position: relative;
color:var(--primary-text-color);
&:hover{
background-color: var(--context-hover);
.item-check{
opacity: 1;
}
}
.item-check{
padding:0 8px;
opacity: 0;
transition:opacity 0.3s;
}
&.item--checked{
background-color: var(--primary-hover-theme-color);
.item-check{
opacity: 1;
}
}
&.item--disabled{
color: var(--context-3);
cursor:not-allowed;
pointer-events: none;
}
.item-icon__ext--md{
display: none;
}
.item-icon__ext--sm{
display: none;
}
.item-info{
padding:0 6px;
color:rgba(0,0,0,.5);
flex:0 0 auto;
position:absolute;
right:0;
top:0;
}
.item-name{
flex: 1;
min-width: 0;
width:100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
// display: flex;
position: relative;
}
.item-icon{
margin-right: 16px;
flex:none;
width:36px;
position: relative;
}
.item-thumb{
width:100%;
height:30px;
background-repeat: no-repeat;
background-size:cover;
background-position: center center;
flex:none;
border-radius: 5px;
}
.item-icon__ext{
position: absolute;
font-size: 12px;
bottom: 5px;
color:inherit;
text-transform: uppercase;
transform: scale(0.8);
transform-origin:center;
// width:42px;
text-align: center;
width:100%;
font-weight: bold;
// transform-origin: left;
// left: 16px;
}
.item-meta{
flex:auto;
display: flex;
justify-content:space-between;
align-items: center;
overflow: hidden;
color:inherit;
}
.item-ctime{
flex: 0 0 auto;
// padding:0 24px;
// width: 200px;
color:var(--context-2);
font-size: 12px;
text-align: left;
}
.item-size{
// color:rgba(37, 38, 43, 0.72);
color:var(--context-2);
font-size: 12px;
text-align: right;
flex:0 0 80px;
}
}
}
.drive-body-mask{
position: absolute;
top:0;left:0;
width:100%;
height:100%;
opacity: 0;
}
.drive-body--padding{
padding:0 24px;
}
.drive-body.drive-body--grid{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
grid-gap: 8px;
.item{
padding-left:8px;
padding-right:8px;
flex-direction: column;
.item-check{
position: absolute;
right:0px;
top:0px;
}
.item-icon{
width:auto;
margin-right:0;
margin-bottom:12px;
}
.item-meta{
flex-direction: column;
// align-items: flex-start;
align-items: center;
width:100%;
overflow: hidden;
}
.item-thumb{
height:64px;
width:96px;
}
.item-name{
text-align: center;
font-size:13px;
}
.item-ctime{
// display: none;
color:var(--context-3);
}
.item-size{
display: none;
}
.item-icon__ext{
font-size:15px;
}
}
}
}
.drive-toolbar-wrap{
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
z-index: 1;
transition: all .3s ease;
opacity: 0;
pointer-events: none;
&.show{
opacity: 1;
pointer-events: auto;
bottom:32px;
}
}
.drive-toolbar{
display: flex;
align-items: center;
padding: 8px 16px;
border-radius: 10px;
background: var(--dark-background);
overflow: visible;
user-select: none;
box-shadow: 0 0 1px 1px rgb(28 28 32 / 5%), 0 8px 24px rgb(28 28 32 / 12%);
color:#fff;
border: 1px solid var(--divider-1);
.drive-toolbar-item{
font-size:16px;
padding:8px;
color:#fff;
margin:0 6px;
border-radius: 6px;
&:hover{
background-color: var(--color-white-4);
}
}
}
.drive-search{
.tips{
font-size: 12px;
color:var(--context-2);
margin-top: 1em;
}
.search-history__header{
font-size: 12px;
color:var(--context);
margin:1em 0;
}
.drive-search-input{
padding:8px;
font-size:14px;
}
input{
border:none;
background-color: transparent;
flex:auto;
// border-bottom: 1px solid var(--context-4);
outline:none;
}
.search-history__body{
}
.search-history__item{
display: flex;
align-items: center;
width:100%;
justify-content: space-between;
padding:0.8em 8px;
border-radius: 3px;
cursor: pointer;
&:hover{
background-color:var(--context-hover);
}
color:var(--context_primary);
}
}
// .badge
================================================
FILE: packages/sharelist-manage/src/views/disk/index.tsx
================================================
import { h, ref, Ref, defineComponent, watch, onMounted, onUnmounted, nextTick, toRef, computed, withModifiers } from 'vue'
import useStore from '@/store/index'
import { storeToRefs } from 'pinia'
import { Spin, Modal, Dropdown, Popover, Menu, Badge, Checkbox, Tooltip, InputSearch, RadioGroup, Input } from 'ant-design-vue'
import Icon from '@/components/icon'
import useDisk, { IFile } from './partial/useDisk'
import './index.less'
import { isMediaSupport } from '@/utils/format'
import MediaPlayer, { usePlayer } from '@/components/player'
import Breadcrumb from './partial/breadcrumb'
import Error from './partial/error'
import { useSetting } from '@/hooks/useSetting'
import { InfoCircleOutlined, LoadingOutlined, ScissorOutlined, EditOutlined, HddOutlined, FolderAddOutlined, EllipsisOutlined, DeleteOutlined, CloudSyncOutlined, PlusOutlined, CloudDownloadOutlined, DownloadOutlined, CloseCircleFilled, SwapOutlined, SortDescendingOutlined, CalendarOutlined, FieldBinaryOutlined, ArrowUpOutlined, ArrowDownOutlined, ClockCircleOutlined, MinusCircleOutlined } from '@ant-design/icons-vue'
import useConfirm, { useApiConfirm } from '@/hooks/useConfirm'
import { useRoute, onBeforeRouteLeave } from 'vue-router'
import { useApi } from '@/hooks/useApi'
import { useActions } from './partial/action'
import Task from './partial/task'
import { useBoolean } from '@/hooks/useHooks'
import { useLocalStorageState } from '@/hooks/useLocalStorage'
import { Upload } from './partial/upload'
import { useScroll } from '@/hooks/useScroll'
import { useClipboard } from '@/hooks/useClipboard'
import { showImage } from '@/components/image'
export default defineComponent({
setup() {
const { setConfig, clearCache, config } = useSetting()
const searchHistory = useLocalStorageState>('search_history', [])
const confirmClearCache = useConfirm(clearCache, '确认', '确认清除缓存？')
const route = useRoute()
const store = useStore()
const diskIntance = useDisk()
const { loading, files, error, setPath, paths, loadMore, diskConfig, current: currentDisk, setAuth, setSort, sortConfig, onUpdate } = diskIntance
const { rename, move, remove, mkdir, flashDownload, uploadConfirm, addDisk, setDisk, remoteDownload, showInfo } = useActions(diskIntance)
const { setPlayer } = usePlayer('player')
const driveEl: Ref = ref()
const { node: pasteEl } = useClipboard((files) => {
let { id } = diskConfig.value
let dest = '/' + [...paths.value].join('/')
uploadConfirm(files, dest, id)
}, 'file')
const { scrollTo, setNode, cancel: cancelScroll, isScroll, checkScroll } = useScroll(loadMore)
onMounted(() => {
setNode(driveEl.value)
onUpdate(() => {
setTimeout(checkScroll, 0)
})
})
onUnmounted(() => {
cancelScroll?.()
})
const onClick = (data: IFile) => {
if (data.type == 'folder' || data.type == 'drive') {
let target: any = {
id: data.id
}
if (!data.path && !currentDisk.search) {
target.path = currentDisk.path + '/' + data.name
}
setPath(target)
} else if (data.type == 'file') {
let mediaType = data.mediaType
if ((data.mediaType == 'audio' || data.mediaType == 'video') && isMediaSupport(data.name, mediaType)) {
const list: Array = files.value.filter((i: IFile) => isMediaSupport(i.name, mediaType))
setPlayer({
list,
type: mediaType,
index: list.findIndex((i: IFile) => i.id == data.id),
})
}
else if (data.mediaType == 'image') {
const list: Array =
files.value.filter((i: IFile) => isMediaSupport(i.name, 'image'))
showImage(list.map(i => i.download_url), list.findIndex(i => i.id == data.id))
}
else {
window.open(data.download_url)
}
}
}
let currentFocusFile: Ref = ref()
const onAction = ({ key }: { key: any }) => {
targetBind.value = false
if (key == 'info') {
showInfo(currentFocusFile.value as IFile)
} else if (key == 'mount_drive') {
addDisk()
} else if (key == 'mkdir') {
mkdir(diskConfig.value)
} else if (key == 'config') {
let name = currentFocusFile.value?.name
let idx = config.drives.findIndex((i: IDrive) => i.name == name)
if (idx >= 0) {
setDisk(config.drives[idx], idx)
}
} else if (key == 'rename') {
rename(currentFocusFile.value as IFile)
} else if (key == 'move') {
move(currentFocusFile.value as IFile)
} else if (key == 'delete') {
remove(currentFocusFile.value as IFile)
} else if (key == 'upload') {
} else if (key == 'flash_upload') {
flashDownload(diskConfig.value)
} else if (key == 'remote_download') {
remoteDownload(diskConfig.value)
}
}
let isActionHide = true
let targetBind = ref(false)
const onContextChange = (visible: boolean) => {
console.log('action:', visible)
// isActionHide = true
if (visible) {
if (targetBind.value == false) {
currentFocusFile.value = undefined
}
//isActionHide = false
// onActionVisibleChange(visible)
// currentFocusFile.value = undefined
//
} else {
// currentFocusFile.value = undefined
// targetBind = false
targetBind.value = false
}
}
const onHover = (i: IFile | null, e?: MouseEvent) => {
//if (!actionVisible.value) {
//willShow = !!i
//if (willShow) {
console.log('on hover')
//已存在
if (currentFocusFile.value) {
}
currentFocusFile.value = i
if (i) {
targetBind.value = true
}
//}
// onActionVisibleChange()
//}
/*
if (i === null) {
currentFocusFile.value = undefined
} else {
if (!actionVisible.value) {
currentFocusFile.value = i
}
}*/
}
const download = (file: IFile | Array) => {
if (!Array.isArray(file)) {
file = [file]
}
file.forEach((i: IFile) => {
let a = document.createElement('a')
let e = document.createEvent('MouseEvents')
e.initEvent('click', false, false)
a.href = i.download_url // 设置下载地址
a.download = i.name
a.dispatchEvent(e)
})
}
const mainSlots = {
overlay: () => {
let isDriveLevel = diskConfig.value.isRoot
// setTimeout(() => {
// currentFocusFile.value = undefined
// }, 0)
// blank area
if (currentFocusFile.value || targetBind.value) {
if (isDriveLevel) {
return
} else {
return
}
} else {
if (isDriveLevel) {
return
} else {
return
}
}
}
}
watch(
route,
(nv) => {
if (route.name == 'drive') {
let target: any = {
path: '/' + (route.params.path as string).replace(/^\//, '')
}
if (route.query.search) {
target.search = route.query.search
}
setPath(target)
scrollTo(0)
// getFiles({ path: route.params.path as string })
}
},
{ immediate: true },
)
const onTagClick = ({ path, index }: any = {}) => {
if (path == '/') {
setPath({ path: '/' })
} else if (index < paths.value.length) {
setPath({ path: '/' + paths.value.slice(0, index).join('/') })
}
}
const onSelect = (i: any) => {
i.checked = !i.checked
}
const onUnselectAll = () => {
files.value.forEach((i: any) => (i.checked = false))
}
const onSelectAll = (e: { target: { checked: boolean } }) => {
let val = e.target.checked
files.value.forEach((i: any) => (i.checked = val))
}
const selectState = computed(() => {
let count = files.value.filter((i: IFile) => !!i.checked).length
let containDir = files.value.some((i: IFile) => !!i.checked && i.type == 'folder')
let containDrive = files.value.some((i: IFile) => !!i.checked && i.type == 'drive')
let containFile = files.value.some((i: IFile) => !!i.checked && i.type == 'file')
// 0 unselect, 1 partially selected, 2 select all,
let state = count == 0 ? 0 : count == files.value.length ? 2 : 1
return {
state, containDir, containDrive, count, total: files.value.length, containFile
}
})
const onToggleSearch = () => {
const onSearch = (value: string) => {
console.log(value)
if (value) {
// router.push({ path: router.currentRoute.value.path, query: { search: value } })
let historyRecords = [...searchHistory.value]
let idx = historyRecords.indexOf(value)
if (idx >= 0) {
historyRecords.splice(idx, 1)
}
historyRecords.unshift(value)
searchHistory.value = historyRecords
setPath({ search: value, path: currentDisk.path, id: currentDisk.id })
modal.destroy()
}
}
const remove = (value: string) => {
let idx = searchHistory.value.indexOf(value)
if (idx >= 0) {
searchHistory.value.splice(idx, 1)
}
}
const options: Array = []
const searchMode = diskConfig.value.search
const tips = ref(searchMode == 1 ? '* 仅支持全局搜索' : searchMode == 2 ? '* 仅支持搜索当前目录（不含子目录）' : '')
/*
if (searchMode == 1) {
options.push({ label: '所有文件', value: 'global' })
}
if (searchMode > 1) {
options.push({ label: '当前目录', value: 'local' })
}
const searchType = ref(options[0]?.value)
*/
const modal = Modal.confirm({
class: 'fix-modal--alone',
width: '560px',
maskClosable: true,
content: () => (
{/* */}
onSearch(e.target.value)} />
{tips.value ?
{tips.value}
: null}
{
searchHistory.value.map((i) => - onSearch(i)}>
{i}
remove(i), ['prevent', 'stop'])} /> )
}
{/* {options.length ?
searchType.value = e.target.value} name="radioGroup" > : null} */}
),
})
}
const changeView = () => {
let val = store.layout == 'list' ? 'grid' : 'list'
store.setLayout(val)
}
return () => (
{
error.code === 0 ? : null
}
{
props.files?.map((i: any, idx) =>
toggle(idx)} class="flex flex--between file-item">
)
}
}
})
const FileSelect = defineComponent({
props: {
files: Array
},
emits: ['change'],
setup(props, { emit }) {
let unchecked: Ref | any> = ref(props.files?.map(i => true))
const toggle = (idx: number) => {
unchecked.value[idx] = !unchecked.value[idx]
emit('change', unchecked.value.reduce((t: Array, c: boolean, idx: number) => c ? t.concat(idx) : t, []))
}
return () =>
{
props.files?.map((i: any, idx) =>
toggle(idx)} class="flex flex--between file-item">
)
}
}
})
export const useActions = (diskIntance: any) => {
let { mutate, setAuth, current, setPath, reload } = diskIntance
const appContext = getCurrentInstance()?.appContext;
let request = useApi()
const { setConfig, clearCache, config } = useSetting()
const rename = (i: IFile) => {
let name = i.name
const onChange = (e: any) => {
name = e.target.value
}
const onSave = async () => {
if (name != i.name) {
let res = await request.fileUpdate({ id: i.id, name })
// console.log(res)
if (res.error) {
message.error(res.error.message)
throw new Error()
} else {
i.name = name
mutate(i)
modal.destroy()
}
}
}
const modal = Modal.confirm({
class: 'pure-modal',
width: '500px',
closable: true,
appContext,
autoFocusButton: null,
title: 重命名
,
content: () => (
{useFocus(, true)}
),
onOk: onSave,
})
}
const move = (file: IFile | Array) => {
let dest: String
let files: Array = Array.isArray(file) ? file : [file]
let srcPath = diskIntance.current.path
let isTransfer = ref(false)
let threadNum = ref(1)
let buttonProps = reactive({ disabled: true })
let count = files.length
let isSingleTask = count == 1
let error: Array = []
let current = ref(0)
let cancelFlag = ref(false)
let key = `${Math.random()}`
let targetMultiThreading = ref(false)
// 排除 当前目录 及 子目录
let excludePath = [
srcPath,
...files.map(i => i.id)
]
const onSelect = (e: IFile, targetDiskConfig: any) => {
let autoExpand = config.expand_single_disk
let diskCount = config.drives.length
let destPath = e.path
let destIsRoot = destPath == '/'
// 根目录是磁盘列表
let rootIsDiskList = (!autoExpand || diskCount > 1)
buttonProps.disabled = destPath == srcPath || (destIsRoot && rootIsDiskList)
isTransfer.value = rootIsDiskList && srcPath.split('/')[1] != destPath.split('/')[1] && !destIsRoot
dest = e.id
targetMultiThreading.value = targetDiskConfig.multiThreading
}
const execMove = async () => {
message.loading({ content: `正在${isTransfer.value ? '创建迁移任务' : '移动'}`, key, duration: 0 });
for (let i of files as Array) {
if (cancelFlag.value) return
message.loading({ content: `[${current.value + 1}/${count}]` + '正在移动:' + i.name, key, duration: 0 });
let res = await request.fileUpdate({ id: i.id, dest, threadNum: threadNum.value })
if (res.error) {
i.error = res.error.message
error.push(i.id)
} else {
if (!isTransfer.value) mutate(i, true)
}
current.value++
}
let errorFiles = files.filter((i: IFile) => error.includes(i.id))
if (errorFiles.length) {
if (isSingleTask) {
message.error({ content: (files as Array)[0].error, key, duration: 1 });
} else {
message.success({ content: '操作完成', key, duration: 0.01 });
errorModal(errorFiles)
}
} else {
message.success({ content: isTransfer.value ? '迁移任务创建成功' : '操作完成', key, duration: 1 });
}
}
const errorModal = (errorFiles: Array) => {
let retryList: Array = []
Modal.confirm({
class: 'pure-modal',
width: '500px',
closable: true,
title: () => 移动
,
okText: '重试',
content: () => (
),
onOk: () => {
if (retryList.length) {
files = (files as Array).filter((_, idx: number) => retryList.includes(idx))
//move((files as Array).filter((_, idx: number) => retryList.includes(idx)))
execMove()
}
},
})
}
const modal = Modal.confirm({
class: 'pure-modal',
width: '500px',
closable: true,
title: () => 移动
,
content: () => (
{files.length == 1 ?
)[0]} /> : null}
{
isTransfer.value ? [
,
{
targetMultiThreading.value ?
线程数
{ threadNum.value = e as number }}>
: null
}
{/*
*/}
] : null
}
),
okButtonProps: buttonProps,
onOk: () => {
execMove()
},
})
}
const mkdir = (i: IFile) => {
let name = '新建文件夹'
const onChange = (e: any) => {
name = e.target.value
}
const onSave = async () => {
if (name) {
let res = await request.mkdir({ id: i.id, name })
if (res.error) {
message.error(res.error.message)
} else {
mutate(res, 1)
modal.destroy()
}
}
}
const modal = Modal.confirm({
class: 'pure-modal',
width: '500px',
closable: true,
autoFocusButton: null,
title: () => 新建文件夹
,
content: () => (
{useFocus(, true)}
),
onOk: onSave,
})
}
const flashDownload = (i: any) => {
let options = typeof i.hashUpload == 'string' ? { type: i.hashUpload } : i.hashUpload
let params = {
name: '',
hash: '',
size: 0
}
const onSave = async () => {
if (options.size && !params.size) return
if (!params.hash || !params.name) return
let res = await request.fileHashDownload({ id: i.id, ...params })
// console.log(res)
if (res.error) {
message.error(res.error.message)
throw new Error()
} else {
message.success('秒传成功')
// mutate(res)
modal.destroy()
reload()
}
}
const modal = Modal.confirm({
class: 'pure-modal',
width: '500px',
closable: true,
autoFocusButton: null,
title: () => 云端秒传
,
content: () => (
),
onOk: onSave,
})
}
const uploadConfirm = (files: Array, dest: string, id: string) => {
const { create } = useUpload()
let checked: Array = files.map((_, idx: number) => idx)
const onChecked = (ids: Array) => {
checked = ids
}
const ensure = () => {
const checkedFiles = checked.map((idx: number) => files[idx])
create(checkedFiles, 'md5', dest, id)
message.success('任务创建成功')
}
const data = files.map((i, idx) => ({
idx: idx,
id: i.name,
size: i.size,
name: i.name,
ctime: i.lastModified,
ctimeDisplay: time(i.lastModified),
sizeDisplay: byte(i.size),
iconType: getFileType(i.name),
checked: true
}))
Modal.confirm({
class: 'pure-modal',
width: '500px',
closable: true,
title: () => 文件上传
,
content: ,
onOk: ensure,
})
}
const remove = (files: IFile | Array) => {
if (!Array.isArray(files)) {
files = [files]
}
if (files.some(i => i.type == 'drive')) {
removeDisk(files.filter(i => i.type == 'drive'))
return
}
let count = files.length
const error: Array = []
const current = ref(0)
const cancelFlag = ref(false)
const key = '' + Math.random()
const modal = Modal.confirm({
title: '删除文件',
content: `确认删除 ${count == 1 ? files[0].name : `${count} 项`}？`,
onOk() {
execRemove()
},
onCancel() {
cancelFlag.value = true
}
})
const execRemove = async () => {
message.loading({ content: '正在删除', key, duration: 0 });
for (let i of files as Array) {
if (cancelFlag.value) return
message.loading({ content: `[${current.value + 1}/${count}]` + '正在删除:' + i.name, key, duration: 0 });
let res = await request.fileDelete({ id: i.id })
if (res.error) {
error.push(i.id)
} else {
mutate(i, true)
}
current.value++
}
let errorFiles = files.filter((i: IFile) => error.includes(i.id))
if (errorFiles.length) {
return modal.update({
content: () =>
})
} else {
message.success({ content: '已成功删除', key, duration: 1 });
}
}
}
const setDisk = (data: IDrive, idx = -1, msg: string = '修改成功') => {
const updateData = async (modifyData: IDrive) => {
const saveData = [...config.drives]
// console.log(saveData, idx)
if (idx == -1) {
saveData.push(modifyData)
} else {
saveData[idx] = modifyData
}
await setConfig({ drives: saveData }, msg)
// update files
if (!current.path || current.path == '/') {
setPath({ path: '/' }, true)
}
modal.destroy()
}
const modal = Modal.confirm({
class: 'fix-modal--alone',
width: '720px',
closable: true,
content: (
),
onOk: () => { },
})
}
const addDisk = () => {
setDisk(
{
name: '',
protocol: '',
},
-1,
'创建成功'
)
}
const removeDisk = async (files: IFile | Array) => {
if (!Array.isArray(files)) {
files = [files]
}
const execRemove = () => {
const saveData = [...config.drives]
for (let i of files as Array) {
let idx = saveData.findIndex(j => j.id == i.extra?.config_id)
if (idx) {
saveData.splice(idx, 1)
}
}
setConfig({ drives: saveData }, '删除成功')
if (!current.path || current.path == '/') {
setPath({ path: '/' }, true)
}
}
//await request.removeDrive({drive: files.map(i => i.id) })
let count = files.length
Modal.confirm({
title: '删除挂载盘',
content: `确认删除 ${count == 1 ? files[0].name : `${count} 项`}？`,
onOk() {
execRemove()
},
onCancel() {
}
})
}
const remoteDownload = (i: any) => {
let url = ref('')
let threadNum = ref(1)
const onSave = async () => {
if (url.value) {
let res = await request.fileUpdate({ dest: i.id, id: url.value, threadNum: threadNum.value })
if (res.error) {
message.error(res.error.message)
throw new Error()
} else {
message.success('任务创建成功')
modal.destroy()
}
}
}
const modal = Modal.confirm({
class: 'pure-modal',
width: '500px',
closable: true,
autoFocusButton: null,
title: () => 离线下载
,
content: () => (
{
i.remoteDownload != false ?
:
}
{
useFocus(