add aliyun

src/api/types.ts

@@ -757,6 +757,10 @@ export interface FileItem {
   children: FileItem[]
   // 文件创建时间
   modify_time: number
+  // 文件ID
+  fileid: string
+  // 上级文件ID
+  parent_fileid: string
 }
 
 // 媒体服务器播放条目

src/components/FileBrowser.vue

@@ -4,6 +4,9 @@ import axios from 'axios'
 import FileList from './filebrowser/FileList.vue'
 import FileToolbar from './filebrowser/FileToolbar.vue'
 import type { EndPoints } from '@/api/types'
+import api from '@/api'
+import AliyunAuthDialog from './dialog/AliyunAuthDialog.vue'
+import { isNullOrEmptyObject } from '@/@core/utils'
 
 // 输入参数
 const props = defineProps({
@@ -25,6 +28,11 @@ const availableStorages = [
     code: 'local',
     icon: 'mdi-folder-multiple-outline',
   },
+  {
+    name: '阿里云盘',
+    code: 'aliyun',
+    icon: 'mdi-cloud-outline',
+  },
 ]
 
 const fileIcons = {
@@ -59,6 +67,10 @@ const refreshPending = ref(false)
 const sort = ref('name')
 // axios实例
 const axiosInstance = ref<Axios>()
+// 阿里云盘认证对话框
+const aliyunAuthDialog = ref(false)
+// 阿里云盘认证参数
+const aliyunParams = ref<{ [key: string]: any }>({})
 
 // 计算属性
 const storagesArray = computed(() => {
@@ -68,13 +80,31 @@ const storagesArray = computed(() => {
 
 // 方法
 function loadingChanged(loading: number) {
-  if (loading)
+  if (loading) loading++
-    loading++
+  else if (loading > 0) loading--
-  else if (loading > 0)
-    loading--
 }
 
-function storageChanged(storage: string) {
+// 查询阿里云token
+async function loadAliyunParams() {
+  try {
+    const result: { [key: string]: any } = await api.get('system/setting/UserAliyunParams')
+    if (result.success) {
+      aliyunParams.value = result.data?.value
+    }
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+// 存储切换
+async function storageChanged(storage: string) {
+  if (storage == 'aliyun') {
+    await loadAliyunParams()
+    if (isNullOrEmptyObject(aliyunParams.value)) {
+      aliyunAuthDialog.value = true
+      return
+    }
+  }
   activeStorage.value = storage
 }
 
@@ -89,6 +119,12 @@ function sortChanged(s: string) {
   refreshPending.value = true
 }
 
+// aliyun认证完成
+function aliyunAuthDone() {
+  aliyunAuthDialog.value = false
+  activeStorage.value = 'aliyun'
+}
+
 // 初始化
 onMounted(() => {
   activeStorage.value = props.storage ?? 'local'
@@ -126,4 +162,10 @@ onMounted(() => {
       />
     </div>
   </VCard>
+  <AliyunAuthDialog
+    v-if="aliyunAuthDialog"
+    v-model="aliyunAuthDialog"
+    @close="aliyunAuthDialog = false"
+    @done="aliyunAuthDone"
+  />
 </template>

src/components/dialog/AliyunAuthDialog.vue

@@ -0,0 +1,126 @@
+<script lang="ts" setup>
+import QrcodeVue from 'qrcode.vue'
+import api from '@/api'
+import { isNullOrEmptyObject } from '@/@core/utils'
+
+// 定义事件
+const emit = defineEmits(['done', 'close'])
+
+// 二维码内容
+const qrCodeContent = ref('')
+
+// ck参数
+const ck = ref('')
+
+// t参数
+const t = ref('')
+
+// 下方的提示信息
+const text = ref('请用阿里云盘 App 扫码')
+
+// 提醒类型
+const alertType = ref<'success' | 'info' | 'error' | 'warning' | undefined>('info')
+
+// 认证数据
+const UserAliyunParams = ref({})
+
+// timeout定时器
+let timeoutTimer: NodeJS.Timeout | undefined = undefined
+
+// 存储认证数据
+async function saveAliyunParams() {
+  if (isNullOrEmptyObject(UserAliyunParams.value)) return
+  try {
+    await api.post('system/setting/UserAliyunParams', UserAliyunParams.value)
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+// 完成
+async function handleDone() {
+  // 存储认证数据
+  await saveAliyunParams()
+  emit('done')
+}
+
+// 调用/aliyun/qrcode api生成二维码
+async function getQrcode() {
+  try {
+    const result: { [key: string]: any } = await api.get('/aliyun/qrcode')
+    if (result.success && result.data) {
+      qrCodeContent.value = result.data.codeContent
+      ck.value = result.data.ck
+      t.value = result.data.t
+    } else {
+      text.value = result.message
+    }
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+// 调用/aliyun/check api验证二维码
+async function checkQrcode() {
+  try {
+    const result: { [key: string]: any } = await api.get('/aliyun/check', {
+      params: {
+        ck: ck.value,
+        t: t.value,
+      },
+    })
+    if (result.success && result.data) {
+      const qrCodeStatus = result.data.qrCodeStatus
+      text.value = result.data.tip
+      if (qrCodeStatus == 'CONFIRMED') {
+        // 已确认完成
+        alertType.value = 'success'
+        UserAliyunParams.value = result.data
+        handleDone()
+      } else if (qrCodeStatus == 'NEW' || qrCodeStatus == 'SCANED') {
+        alertType.value = 'warning'
+        // 新建、待扫码
+        clearTimeout(timeoutTimer)
+        timeoutTimer = setTimeout(checkQrcode, 3000)
+      } else {
+        // 过期或者已取消
+        alertType.value = 'error'
+      }
+    } else {
+      alertType.value = 'error'
+      text.value = result.message
+    }
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+onMounted(async () => {
+  await getQrcode()
+  timeoutTimer = setTimeout(checkQrcode, 3000)
+})
+
+onUnmounted(() => {
+  if (timeoutTimer) clearTimeout(timeoutTimer)
+})
+</script>
+
+<template>
+  <VDialog width="40rem" scrollable max-height="85vh">
+    <VCard title="阿里云盘登录" class="rounded-t">
+      <DialogCloseBtn @click="emit('close')" />
+      <VCardText class="pt-2">
+        <div class="my-6">
+          <QrcodeVue class="mx-auto" :value="qrCodeContent" :size="200" max-width="25rem" />
+        </div>
+        <VAlert variant="tonal" :type="alertType" class="my-4 text-center" :text="text">
+          <template #prepend />
+        </VAlert>
+      </VCardText>
+      <VCardActions>
+        <VSpacer />
+        <VBtn variant="elevated" @click="handleDone" prepend-icon="mdi-check" class="px-5 me-3"> 完成 </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>

src/components/filebrowser/FileList.vue

@@ -53,9 +53,6 @@ const progressValue = ref(0)
 // 确认框
 const createConfirm = useConfirm()
 
-// 存储空间类型
-const storage = ref(inProps.storage ?? '')
-
 // axios实例
 const axiosInstance = ref<Axios>(inProps.axios ?? axios)
 
@@ -107,10 +104,9 @@ async function load() {
   emit('loading', true)
   // 参数
   const url = inProps.endpoints?.list.url
-    .replace(/{storage}/g, storage.value)
+    .replace(/{storage}/g, inProps.storage)
     .replace(/{path}/g, encodeURIComponent(inProps.path || ''))
     .replace(/{sort}/g, inProps.sort || 'name')
-
   const config = {
     url,
     method: inProps.endpoints?.list.method || 'get',
@@ -131,7 +127,7 @@ async function deleteItem(item: FileItem) {
   if (confirmed) {
     emit('loading', true)
     const url = inProps.endpoints?.delete.url
-      .replace(/{storage}/g, storage.value)
+      .replace(/{storage}/g, inProps.storage)
       .replace(/{path}/g, encodeURIComponent(item.path))
 
     const config = {
@@ -157,7 +153,7 @@ function download(path: string) {
   if (!path) return
   const token = store.state.auth.token
   const url_path = inProps.endpoints?.download.url
-    .replace(/{storage}/g, storage.value)
+    .replace(/{storage}/g, inProps.storage)
     .replace(/{path}/g, encodeURIComponent(path))
   const url = `${import.meta.env.VITE_API_BASE_URL}${url_path.slice(1)}&token=${token}`
   // 下载文件
@@ -169,7 +165,7 @@ function getImgLink(path: string) {
   if (!path) return ''
   const token = store.state.auth.token
   const url_path = inProps.endpoints?.image.url
-    .replace(/{storage}/g, storage.value)
+    .replace(/{storage}/g, inProps.storage)
     .replace(/{path}/g, encodeURIComponent(path))
   return `${import.meta.env.VITE_API_BASE_URL}${url_path.slice(1)}&token=${token}`
 }
@@ -216,15 +212,16 @@ function formatTime(timestape: number) {
   return new Date(timestape * 1000).toLocaleString()
 }
 
-// 监听path变化
+// 监听path变化或者storage变化
 watch(
-  () => inProps.path,
+  [() => inProps.path, () => inProps.storage],
   async () => {
     items.value = []
     nameTestResult.value = undefined
     nameTestDialog.value = false
     await load()
   },
+  { immediate: true },
 )
 
 // 监听refreshPending变化

src/components/filebrowser/FileToolbar.vue

@@ -25,10 +25,8 @@ const sort = ref('name')
 
 // 调整排序方式
 function changeSort() {
-  if (sort.value === 'name')
+  if (sort.value === 'name') sort.value = 'time'
-    sort.value = 'time'
+  else sort.value = 'name'
-  else
-    sort.value = 'name'
 
   emit('sortchanged', sort.value)
 }
@@ -39,13 +37,15 @@ const pathSegments = computed(() => {
   const isFolder = inProps.path?.endsWith('/')
   const segments = inProps.path?.split('/').filter(item => item)
 
-  return segments?.map((item, index) => {
+  return (
-    path_str += item + ((index < segments.length - 1 || isFolder) ? '/' : '')
+    segments?.map((item, index) => {
-    return {
+      path_str += item + (index < segments.length - 1 || isFolder ? '/' : '')
-      name: item,
+      return {
-      path: path_str,
+        name: item,
-    }
+        path: path_str,
-  }) ?? []
+      }
+    }) ?? []
+  )
 })
 
 const storageObject = computed(() => {
@@ -56,7 +56,7 @@ const storageObject = computed(() => {
 function changeStorage(code: string) {
   if (inProps.storage !== code) {
     emit('storagechanged', code)
-    emit('pathchanged', '')
+    emit('pathchanged', '/')
   }
 }
 
@@ -97,10 +97,8 @@ async function mkdir() {
 
 // 计算排序图标
 const sortIcon = computed(() => {
-  if (sort.value === 'time')
+  if (sort.value === 'time') return 'mdi-sort-clock-ascending-outline'
-    return 'mdi-sort-clock-ascending-outline'
+  else return 'mdi-sort-alphabetical-ascending'
-  else
-    return 'mdi-sort-alphabetical-ascending'
 })
 </script>
 
@@ -158,10 +156,7 @@ const sortIcon = computed(() => {
         </IconBtn>
       </template>
     </VTooltip>
-    <VDialog
+    <VDialog v-model="newFolderPopper" max-width="50rem">
-      v-model="newFolderPopper"
-      max-width="50rem"
-    >
       <template #activator="{ props }">
         <IconBtn v-bind="props">
           <VTooltip text="新建文件夹">
@@ -177,17 +172,8 @@ const sortIcon = computed(() => {
         </VCardText>
         <VCardActions>
           <div class="flex-grow-1" />
-          <VBtn depressed @click="newFolderPopper = false">
+          <VBtn depressed @click="newFolderPopper = false"> 取消 </VBtn>
-            取消
+          <VBtn :disabled="!newFolderName" depressed variant="tonal" @click="mkdir"> 新建 </VBtn>
-          </VBtn>
-          <VBtn
-            :disabled="!newFolderName"
-            depressed
-            variant="tonal"
-            @click="mkdir"
-          >
-            新建
-          </VBtn>
         </VCardActions>
       </VCard>
     </VDialog>

src/views/reorganize/FileBrowserView.vue

@@ -5,27 +5,27 @@ import FileBrowser from '@/components/FileBrowser.vue'
 
 const endpoints = {
   list: {
-    url: '/filebrowser/list?path={path}&sort={sort}',
+    url: '/filebrowser/{storage}/list?path={path}&sort={sort}',
     method: 'get',
   },
   mkdir: {
-    url: '/filebrowser/mkdir?path={path}',
+    url: '/filebrowser/{storage}/mkdir?path={path}',
     method: 'get',
   },
   delete: {
-    url: '/filebrowser/delete?path={path}',
+    url: '/filebrowser/{storage}/delete?path={path}',
     method: 'get',
   },
   download: {
-    url: '/filebrowser/download?path={path}',
+    url: '/filebrowser/{storage}/download?path={path}',
     method: 'get',
   },
   image: {
-    url: '/filebrowser/image?path={path}',
+    url: '/filebrowser/{storage}/image?path={path}',
     method: 'get',
   },
   rename: {
-    url: '/filebrowser/rename?path={path}&new_name={newname}',
+    url: '/filebrowser/{storage}/rename?path={path}&new_name={newname}',
     method: 'get',
   },
 }
@@ -38,7 +38,7 @@ const downloadDirectories = ref<MediaDirectory[]>([])
 
 // 计算公共路径
 function findCommonPath(paths: string[]): string {
-  let commonPath = '/'
+  let commonPath
   if (!paths || paths.length === 0) {
     commonPath = '/'
   } else if (paths.length === 1) {
@@ -94,7 +94,7 @@ onBeforeMount(loadDownloadDirectories)
 <template>
   <div>
     <FileBrowser
-      storages="local"
+      storages="local,aliyun"
       :tree="false"
       :path="path"
       :endpoints="endpoints"