From dcf33b9276def97ff7dc8975897dada94c6c03c7 Mon Sep 17 00:00:00 2001
From: Shiina Kin <shiina@sakurasou.io>
Date: Mon, 11 Nov 2024 22:32:18 +0800
Subject: [PATCH] feat(ui): add user overview

- create OverviewView.vue for displaying user image and album details
- integrate i18n for displaying text elements in user overview
- use API client to fetch user data and display storage space details
---
 ui/src/locales/zh_cn.yaml                     |   9 ++
 .../userField/common/OverviewView.vue         | 128 ++++++++++++++++++
 2 files changed, 137 insertions(+)
 create mode 100644 ui/src/views/structure/userField/common/OverviewView.vue

diff --git a/ui/src/locales/zh_cn.yaml b/ui/src/locales/zh_cn.yaml
index 1c5fe004..a514636b 100644
--- a/ui/src/locales/zh_cn.yaml
+++ b/ui/src/locales/zh_cn.yaml
@@ -47,6 +47,15 @@ message:
   userMenuAdminField: "管理后台"
   userMenuLogout: "退出登录"
   userMenuLogoutSuccess: "登出成功"
+#  userOverviewView
+  userOverviewImageCount: "图片数量"
+  userOverviewAlbumCount: "相册数量"
+  userOverviewUsedSpace: "已用空间"
+  userOverviewUsableSpace: "可用空间"
+  userOverviewSpaceSizeUnit: "MB"
+  userOverviewImageCountUnit: "张"
+  userOverviewAlbumCountUnit: "个"
+  userOverviewUsableSpaceTip: "总空间 - 已用空间"
 #  dragUploader
   dragUploaderUsageTip: "点击或拖拽文件到此处上传"
   dragUploaderAllowedFileTypeTip: "支持的文件类型："
diff --git a/ui/src/views/structure/userField/common/OverviewView.vue b/ui/src/views/structure/userField/common/OverviewView.vue
new file mode 100644
index 00000000..7a2ab251
--- /dev/null
+++ b/ui/src/views/structure/userField/common/OverviewView.vue
@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { Configuration, UserApi } from "api-client";
+import { Icon } from "@iconify/vue";
+import { useToast } from "primevue/usetoast";
+
+const { t } = useI18n();
+const token = localStorage.getItem("token");
+const toast = useToast();
+
+const userApi = new UserApi(
+  new Configuration({
+    baseOptions: {
+      headers: {
+        Authorization: `Bearer ${token}`
+      }
+    }
+  })
+);
+
+const imageCount = ref(-1);
+const albumCount = ref(-1);
+const usedSpace = ref(-1.0);
+const usableSpace = ref(-1.0);
+
+userApi
+  .apiUserSelfGet()
+  .then((response) => {
+    const resp = response.data;
+    if (resp.isSuccessful) {
+      const userVO = resp.data!;
+      imageCount.value = userVO.imageCount!;
+      albumCount.value = userVO.albumCount!;
+      usedSpace.value = userVO.totalImageSize!;
+      usableSpace.value = userVO.allSize! - userVO.totalImageSize;
+    }
+  })
+  .catch((error) => {
+    console.error(error);
+  });
+</script>
+
+<template>
+  <div class="p-8 w-full flex flex-col items-center gap-8">
+    <div class="flex w-full h-40 gap-6 justify-between">
+      <div class="relative flex-1 block overflow-hidden rounded-lg border border-gray-100 p-4 sm:p-6 lg:p-8 xl:min-w-60">
+        <div class="lg:flex lg:justify-between lg:gap-4">
+          <div class="hidden lg:block lg:shrink-0">
+            <Icon icon="mdi:image-outline" class="size-16 rounded-lg object-cover" />
+          </div>
+
+          <div>
+            <h3 class="text-lg font-bold text-gray-900 sm:text-xl">{{ t("message.userOverviewImageCount") }}</h3>
+            <div class="my-2"></div>
+            <p class="text-pretty text-sm text-gray-500">
+              {{ imageCount }} {{ t("message.userOverviewImageCountUnit") }}
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="relative flex-1 block overflow-hidden rounded-lg border border-gray-100 p-4 sm:p-6 lg:p-8 xl:min-w-60">
+        <div class="lg:flex lg:justify-between lg:gap-4">
+          <div class="hidden lg:block lg:shrink-0">
+            <Icon icon="mdi:image-multiple-outline" class="size-16 rounded-lg object-cover" />
+          </div>
+
+          <div>
+            <h3 class="text-lg font-bold text-gray-900 sm:text-xl">{{ t("message.userOverviewAlbumCount") }}</h3>
+            <div class="my-2"></div>
+            <p class="text-pretty text-sm text-gray-500">
+              {{ albumCount }} {{ t("message.userOverviewAlbumCountUnit") }}
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="relative flex-1 block overflow-hidden rounded-lg border border-gray-100 p-4 sm:p-6 lg:p-8 xl:min-w-60">
+        <div class="lg:flex lg:justify-between lg:gap-4">
+          <div class="hidden lg:block lg:shrink-0">
+            <Icon icon="mdi:zip-box-outline" class="size-16 rounded-lg object-cover" />
+          </div>
+
+          <div>
+            <h3 class="text-lg font-bold text-gray-900 sm:text-xl">{{ t("message.userOverviewUsedSpace") }}</h3>
+            <div class="my-2"></div>
+            <p class="text-pretty text-sm text-gray-500">
+              {{ usedSpace.toFixed(2) }} {{ t("message.userOverviewSpaceSizeUnit") }}
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="relative flex-1 block overflow-hidden rounded-lg border border-gray-100 p-4 sm:p-6 lg:p-8 xl:min-w-60">
+        <div class="lg:flex lg:justify-between lg:gap-4">
+          <div class="hidden lg:block lg:shrink-0">
+            <Icon icon="mdi:food-takeout-box-outline" class="size-16 rounded-lg object-cover" />
+          </div>
+
+          <div>
+            <h3 class="text-lg font-bold text-gray-900 sm:text-xl">{{ t("message.userOverviewUsableSpace") }}</h3>
+            <div class="my-2"></div>
+            <p class="text-pretty text-sm text-gray-500">
+              {{ usableSpace.toFixed(2) }} {{ t("message.userOverviewSpaceSizeUnit") }}
+            </p>
+          </div>
+        </div>
+
+        <dl class="mt-6 flex gap-4 sm:gap-6 items-center justify-center">
+          <div class="flex flex-col">
+            <dd class="text-xs text-gray-500">{{ t("message.userOverviewUsableSpaceTip") }}</dd>
+          </div>
+        </dl>
+      </div>
+    </div>
+
+    <span class="relative w-full flex justify-center">
+      <span
+        class="absolute inset-x-0 top-1/2 h-px -translate-y-1/2 bg-transparent bg-gradient-to-r from-transparent via-gray-500 to-transparent opacity-75"
+      ></span>
+    </span>
+
+    <div class="flex w-full gap-8 justify-between">
+      <div class="w-1/2"></div>
+      <div class="w-1/3 overflow-x-auto"></div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>