From b94fb70e02b61e2c2c5c6f3a275ef74b143a078c Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Thu, 15 Aug 2024 16:15:49 +0800
Subject: [PATCH] style: Update storage card to include authentication dialogs
 for Aliyun and U115 storage types

---
 src/components/cards/StorageCard.vue       | 33 +++++++++++++++++++++-
 src/components/dialog/AliyunAuthDialog.vue |  9 ++----
 src/components/dialog/U115AuthDialog.vue   |  4 +--
 3 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/src/components/cards/StorageCard.vue b/src/components/cards/StorageCard.vue
index 9f7c79e9..ab7697ac 100644
--- a/src/components/cards/StorageCard.vue
+++ b/src/components/cards/StorageCard.vue
@@ -6,6 +6,8 @@ import alipan_png from '@images/misc/alipan.webp'
 import u115_png from '@images/misc/u115.png'
 import rclone_png from '@images/misc/rclone.png'
 import api from '@/api'
+import AliyunAuthDialog from '../dialog/AliyunAuthDialog.vue'
+import U115AuthDialog from '../dialog/U115AuthDialog.vue'
 
 // 定义输入
 const props = defineProps({
@@ -21,6 +23,23 @@ const total = ref(0)
 // 存储可用空间
 const available = ref(0)
 
+// 阿里云盘认证对话框
+const aliyunAuthDialog = ref(false)
+// 115网盘认证对话框
+const u115AuthDialog = ref(false)
+
+// 打开存储对话框
+function openStorageDialog() {
+  switch (props.storage.type) {
+    case 'alipan':
+      aliyunAuthDialog.value = true
+      break
+    case 'u115':
+      u115AuthDialog.value = true
+      break
+  }
+}
+
 // 根据存储类型选择图标
 const getIcon = computed(() => {
   switch (props.storage.type) {
@@ -58,7 +77,7 @@ onMounted(() => {
 })
 </script>
 <template>
-  <VCard variant="tonal">
+  <VCard variant="tonal" @click="openStorageDialog">
     <VCardText class="flex justify-space-between align-center gap-3">
       <div class="align-self-start">
         <h5 class="text-h6 mb-1">{{ storage.name }}</h5>
@@ -71,4 +90,16 @@ onMounted(() => {
       <VProgressLinear v-if="usage > 0" :model-value="usage" bg-color="success" color="success" />
     </div>
   </VCard>
+  <AliyunAuthDialog
+    v-if="aliyunAuthDialog"
+    v-model="aliyunAuthDialog"
+    @close="aliyunAuthDialog = false"
+    @done="aliyunAuthDialog = false"
+  />
+  <U115AuthDialog
+    v-if="u115AuthDialog"
+    v-model="u115AuthDialog"
+    @close="u115AuthDialog = false"
+    @done="u115AuthDialog = false"
+  />
 </template>
diff --git a/src/components/dialog/AliyunAuthDialog.vue b/src/components/dialog/AliyunAuthDialog.vue
index 70f4826b..36a8bc9a 100644
--- a/src/components/dialog/AliyunAuthDialog.vue
+++ b/src/components/dialog/AliyunAuthDialog.vue
@@ -31,7 +31,7 @@ async function handleDone() {
 // 调用/aliyun/qrcode api生成二维码
 async function getQrcode() {
   try {
-    const result: { [key: string]: any } = await api.get('/aliyun/qrcode')
+    const result: { [key: string]: any } = await api.get('/storage/qrcode/alipan')
     if (result.success && result.data) {
       qrCodeContent.value = result.data.codeContent
       ck.value = result.data.ck
@@ -47,11 +47,8 @@ async function getQrcode() {
 // 调用/aliyun/check api验证二维码
 async function checkQrcode() {
   try {
-    const result: { [key: string]: any } = await api.get('/aliyun/check', {
-      params: {
-        ck: ck.value,
-        t: t.value,
-      },
+    const result: { [key: string]: any } = await api.get('/storage/check/alipan', {
+      params: { ck: ck.value, t: t.value },
     })
     if (result.success && result.data) {
       const qrCodeStatus = result.data.qrCodeStatus
diff --git a/src/components/dialog/U115AuthDialog.vue b/src/components/dialog/U115AuthDialog.vue
index f769ae63..56e2e6d2 100644
--- a/src/components/dialog/U115AuthDialog.vue
+++ b/src/components/dialog/U115AuthDialog.vue
@@ -25,7 +25,7 @@ async function handleDone() {
 // 调用/aliyun/qrcode api生成二维码
 async function getQrcode() {
   try {
-    const result: { [key: string]: any } = await api.get('/u115/qrcode')
+    const result: { [key: string]: any } = await api.get('/storage/qrcode/u115')
     if (result.success && result.data) {
       qrCodeContent.value = result.data.codeContent
     } else {
@@ -39,7 +39,7 @@ async function getQrcode() {
 // 调用/aliyun/check api验证二维码
 async function checkQrcode() {
   try {
-    const result: { [key: string]: any } = await api.get('/u115/check')
+    const result: { [key: string]: any } = await api.get('/storage/check/u115')
     if (result.success && result.data) {
       const status = result.data.status
       text.value = result.data.tip