chore(frontend): introduce prettier + eslint and prune unused code

- Add Prettier 3 with prettier-plugin-organize-imports (sorts/removes unused imports) - Add ESLint 10 flat config with typescript-eslint + eslint-plugin-vue + eslint-config-prettier - Add root scripts: format, format:check, lint, lint:fix - Reformat 257 files across admin-web, ops-web, desktop-client, packages - Remove unused locals/exports flagged by --noUnusedLocals/--noUnusedParameters - Fix duplicate localTabLabel key, surrogate-pair regex u-flag, NBSP literal in regex - Skip server/ (Go) and apps/browser-extension/ (deprecated per ADR) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-01 20:39:09 +08:00
parent 21c7892ee4
commit 162abdc97c
258 changed files with 42261 additions and 37556 deletions
@@ -1,293 +1,306 @@
 <script setup lang="ts">
 import {
+  ArrowRightOutlined,
  DeleteOutlined,
  EditOutlined,
  FolderAddOutlined,
  FolderOpenOutlined,
  MoreOutlined,
  PlusOutlined,
-  SearchOutlined,
  UploadOutlined,
-  ArrowRightOutlined,
-  ExclamationCircleOutlined,
-} from "@ant-design/icons-vue";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
-import { message, Modal } from "ant-design-vue";
-import { computed, ref, watch } from "vue";
-import { useI18n } from "vue-i18n";
+} from '@ant-design/icons-vue'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
+import { message, Modal } from 'ant-design-vue'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'

-import { imagesApi } from "@/lib/api";
-import { formatDateTime, formatBytes, formatPercentage } from "@/lib/display";
-import { formatError } from "@/lib/errors";
-import { IMAGE_UPLOAD_ACCEPT, useImageUploadProgress } from "@/lib/image-webp";
-import type { ImageAssetItem, ImageFolder } from "@geo/shared-types";
+import { imagesApi } from '@/lib/api'
+import { formatBytes, formatDateTime, formatPercentage } from '@/lib/display'
+import { formatError } from '@/lib/errors'
+import { IMAGE_UPLOAD_ACCEPT, useImageUploadProgress } from '@/lib/image-webp'
+import type { ImageAssetItem, ImageFolder } from '@geo/shared-types'

-const { t } = useI18n();
-const queryClient = useQueryClient();
-const imageUploadProgress = useImageUploadProgress();
+const { t } = useI18n()
+const queryClient = useQueryClient()
+const imageUploadProgress = useImageUploadProgress()

 // State
-const selectedFolderId = ref<number | null>(null); // null means "All" or is handled by folders query
-const searchKeyword = ref("");
-const debouncedSearch = ref("");
-const currentPage = ref(1);
-const pageSize = ref(20);
+const selectedFolderId = ref<number | null>(null) // null means "All" or is handled by folders query
+const searchKeyword = ref('')
+const debouncedSearch = ref('')
+const currentPage = ref(1)
+const pageSize = ref(20)

-const folderModalOpen = ref(false);
-const editingFolder = ref<ImageFolder | null>(null);
-const folderFormName = ref("");
+const folderModalOpen = ref(false)
+const editingFolder = ref<ImageFolder | null>(null)
+const folderFormName = ref('')

-const moveModalOpen = ref(false);
-const movingImage = ref<ImageAssetItem | null>(null);
-const UNCATEGORIZED_MOVE_TARGET = "__uncategorized__";
-type MoveTargetValue = number | typeof UNCATEGORIZED_MOVE_TARGET;
-const targetFolderValue = ref<MoveTargetValue | undefined>();
-const previewModalOpen = ref(false);
-const previewingImage = ref<ImageAssetItem | null>(null);
+const moveModalOpen = ref(false)
+const movingImage = ref<ImageAssetItem | null>(null)
+const UNCATEGORIZED_MOVE_TARGET = '__uncategorized__'
+type MoveTargetValue = number | typeof UNCATEGORIZED_MOVE_TARGET
+const targetFolderValue = ref<MoveTargetValue | undefined>()
+const previewModalOpen = ref(false)
+const previewingImage = ref<ImageAssetItem | null>(null)

-const renameImageModalOpen = ref(false);
-const renamingImage = ref<ImageAssetItem | null>(null);
-const imageFormName = ref("");
+const renameImageModalOpen = ref(false)
+const renamingImage = ref<ImageAssetItem | null>(null)
+const imageFormName = ref('')

-const fileInput = ref<HTMLInputElement | null>(null);
+const fileInput = ref<HTMLInputElement | null>(null)

 // Queries
 const foldersQuery = useQuery({
-  queryKey: ["images", "folders"],
+  queryKey: ['images', 'folders'],
  queryFn: () => imagesApi.listFolders(),
-});
+})

 const imagesQuery = useQuery({
-  queryKey: computed(() => ["images", "list", {
-    folder_id: debouncedSearch.value ? undefined : selectedFolderId.value,
-    q: debouncedSearch.value,
-    page: currentPage.value,
-    page_size: pageSize.value,
-  }]),
-  queryFn: () => imagesApi.list({
-    folder_id: debouncedSearch.value ? undefined : (selectedFolderId.value ?? undefined),
-    q: debouncedSearch.value,
-    page: currentPage.value,
-    page_size: pageSize.value,
-  }),
-});
+  queryKey: computed(() => [
+    'images',
+    'list',
+    {
+      folder_id: debouncedSearch.value ? undefined : selectedFolderId.value,
+      q: debouncedSearch.value,
+      page: currentPage.value,
+      page_size: pageSize.value,
+    },
+  ]),
+  queryFn: () =>
+    imagesApi.list({
+      folder_id: debouncedSearch.value ? undefined : (selectedFolderId.value ?? undefined),
+      q: debouncedSearch.value,
+      page: currentPage.value,
+      page_size: pageSize.value,
+    }),
+})

 const allImagesCountQuery = useQuery({
-  queryKey: ["images", "list", "all-count"],
-  queryFn: () => imagesApi.list({
-    page: 1,
-    page_size: 1,
-  }),
-});
+  queryKey: ['images', 'list', 'all-count'],
+  queryFn: () =>
+    imagesApi.list({
+      page: 1,
+      page_size: 1,
+    }),
+})

 const storageQuery = useQuery({
-  queryKey: ["images", "storage-usage"],
+  queryKey: ['images', 'storage-usage'],
  queryFn: () => imagesApi.storageUsage(),
-});
+})

 // Mutations
 const createFolderMutation = useMutation({
  mutationFn: (name: string) => imagesApi.createFolder(name),
  onSuccess: () => {
-    message.success(t("images.folderCreated"));
-    folderModalOpen.value = false;
-    queryClient.invalidateQueries({ queryKey: ["images", "folders"] });
+    message.success(t('images.folderCreated'))
+    folderModalOpen.value = false
+    queryClient.invalidateQueries({ queryKey: ['images', 'folders'] })
  },
  onError: (error) => message.error(formatError(error)),
-});
+})

 const updateFolderMutation = useMutation({
-  mutationFn: (payload: { id: number; name: string }) => imagesApi.updateFolder(payload.id, payload.name),
+  mutationFn: (payload: { id: number; name: string }) =>
+    imagesApi.updateFolder(payload.id, payload.name),
  onSuccess: () => {
-    message.success(t("images.folderRenamed"));
-    folderModalOpen.value = false;
-    queryClient.invalidateQueries({ queryKey: ["images", "folders"] });
+    message.success(t('images.folderRenamed'))
+    folderModalOpen.value = false
+    queryClient.invalidateQueries({ queryKey: ['images', 'folders'] })
  },
  onError: (error) => message.error(formatError(error)),
-});
+})

 const deleteFolderMutation = useMutation({
-  mutationFn: (payload: { id: number; force?: boolean }) => imagesApi.deleteFolder(payload.id, payload.force),
+  mutationFn: (payload: { id: number; force?: boolean }) =>
+    imagesApi.deleteFolder(payload.id, payload.force),
  onSuccess: () => {
-    message.success(t("images.folderDeleted"));
+    message.success(t('images.folderDeleted'))
    if (selectedFolderId.value === editingFolder.value?.id) {
-      selectedFolderId.value = null;
+      selectedFolderId.value = null
    }
-    queryClient.invalidateQueries({ queryKey: ["images"] });
+    queryClient.invalidateQueries({ queryKey: ['images'] })
  },
  onError: (error) => message.error(formatError(error)),
-});
+})

 const uploadMutation = useMutation({
  mutationFn: (file: File) => imagesApi.upload(file, selectedFolderId.value),
  onSuccess: (result) => {
-    message.success(t(result.reused ? "images.uploadReusedSuccess" : "images.uploadSuccess"));
-    queryClient.invalidateQueries({ queryKey: ["images"] });
+    message.success(t(result.reused ? 'images.uploadReusedSuccess' : 'images.uploadSuccess'))
+    queryClient.invalidateQueries({ queryKey: ['images'] })
  },
  onError: (error) => message.error(formatError(error)),
-});
+})

 const updateImageMutation = useMutation({
-  mutationFn: (payload: { id: number; name?: string; folder_id?: number | null }) => 
+  mutationFn: (payload: { id: number; name?: string; folder_id?: number | null }) =>
    imagesApi.update(payload.id, { name: payload.name, folder_id: payload.folder_id }),
  onSuccess: () => {
-    queryClient.invalidateQueries({ queryKey: ["images"] });
+    queryClient.invalidateQueries({ queryKey: ['images'] })
  },
  onError: (error) => message.error(formatError(error)),
-});
+})

 const deleteImageMutation = useMutation({
-  mutationFn: (payload: { id: number; force?: boolean }) => imagesApi.delete(payload.id, payload.force),
+  mutationFn: (payload: { id: number; force?: boolean }) =>
+    imagesApi.delete(payload.id, payload.force),
  onSuccess: () => {
-    message.success(t("images.deleteSuccess"));
-    queryClient.invalidateQueries({ queryKey: ["images"] });
+    message.success(t('images.deleteSuccess'))
+    queryClient.invalidateQueries({ queryKey: ['images'] })
  },
  onError: (error) => message.error(formatError(error)),
-});
+})

 // Computed
-const folders = computed(() => foldersQuery.data.value ?? []);
-const images = computed(() => imagesQuery.data.value?.items ?? []);
-const totalImages = computed(() => imagesQuery.data.value?.total ?? 0);
+const folders = computed(() => foldersQuery.data.value ?? [])
+const images = computed(() => imagesQuery.data.value?.items ?? [])
+const totalImages = computed(() => imagesQuery.data.value?.total ?? 0)
 const allImagesCount = computed(
-  () => allImagesCountQuery.data.value?.total ?? folders.value.reduce((acc, folder) => acc + folder.image_count, 0),
-);
-const storageUsage = computed(() => storageQuery.data.value);
+  () =>
+    allImagesCountQuery.data.value?.total ??
+    folders.value.reduce((acc, folder) => acc + folder.image_count, 0),
+)
+const storageUsage = computed(() => storageQuery.data.value)

 const sidebarFolders = computed(() => [
-  { id: null, name: t("images.allFolders"), image_count: allImagesCount.value },
+  { id: null, name: t('images.allFolders'), image_count: allImagesCount.value },
  ...folders.value,
-]);
+])

-const moveTargetOptions = computed(() => buildMoveTargetOptions(movingImage.value));
-const imageUploadBusy = computed(() => imageUploadProgress.visible);
+const moveTargetOptions = computed(() => buildMoveTargetOptions(movingImage.value))
+const imageUploadBusy = computed(() => imageUploadProgress.visible)

 // Actions
-let searchTimer: ReturnType<typeof setTimeout> | null = null;
+let searchTimer: ReturnType<typeof setTimeout> | null = null
 watch(searchKeyword, () => {
-  if (searchTimer) clearTimeout(searchTimer);
+  if (searchTimer) clearTimeout(searchTimer)
  searchTimer = setTimeout(() => {
-    debouncedSearch.value = searchKeyword.value;
-    currentPage.value = 1;
-  }, 300);
-});
+    debouncedSearch.value = searchKeyword.value
+    currentPage.value = 1
+  }, 300)
+})

 function handleFolderSelect(id: number | null) {
-  if (debouncedSearch.value) return;
-  selectedFolderId.value = id;
-  currentPage.value = 1;
+  if (debouncedSearch.value) return
+  selectedFolderId.value = id
+  currentPage.value = 1
 }

 function openCreateFolder() {
-  editingFolder.value = null;
-  folderFormName.value = "";
-  folderModalOpen.value = true;
+  editingFolder.value = null
+  folderFormName.value = ''
+  folderModalOpen.value = true
 }

 function openRenameFolder(folder: ImageFolder) {
-  editingFolder.value = folder;
-  folderFormName.value = folder.name;
-  folderModalOpen.value = true;
+  editingFolder.value = folder
+  folderFormName.value = folder.name
+  folderModalOpen.value = true
 }

 async function handleFolderSubmit() {
-  if (!folderFormName.value.trim()) return;
+  if (!folderFormName.value.trim()) return
  if (editingFolder.value) {
-    await updateFolderMutation.mutateAsync({ id: editingFolder.value.id, name: folderFormName.value.trim() });
+    await updateFolderMutation.mutateAsync({
+      id: editingFolder.value.id,
+      name: folderFormName.value.trim(),
+    })
  } else {
-    await createFolderMutation.mutateAsync(folderFormName.value.trim());
+    await createFolderMutation.mutateAsync(folderFormName.value.trim())
  }
 }

 async function confirmDeleteFolder(folder: ImageFolder) {
-  editingFolder.value = folder;
-  const preview = await imagesApi.folderDeletePreview(folder.id);
+  editingFolder.value = folder
+  const preview = await imagesApi.folderDeletePreview(folder.id)

-  const hasImages = preview.image_count > 0;
-  const refSummary = hasImages
-    ? t("images.folderHasRefs", { count: preview.image_count })
-    : "";
+  const hasImages = preview.image_count > 0
+  const refSummary = hasImages ? t('images.folderHasRefs', { count: preview.image_count }) : ''
  Modal.confirm({
-    title: t("images.confirmDeleteTitle"),
+    title: t('images.confirmDeleteTitle'),
    content: hasImages
-      ? `${refSummary}\n\n${t("images.confirmDeleteFolder", { name: folder.name })}`
-      : t("images.confirmDeleteFolder", { name: folder.name }),
-    okText: hasImages ? t("images.forceDelete") : t("common.confirm"),
-    okType: "danger",
-    cancelText: t("common.cancel"),
+      ? `${refSummary}\n\n${t('images.confirmDeleteFolder', { name: folder.name })}`
+      : t('images.confirmDeleteFolder', { name: folder.name }),
+    okText: hasImages ? t('images.forceDelete') : t('common.confirm'),
+    okType: 'danger',
+    cancelText: t('common.cancel'),
    onOk: () => deleteFolderMutation.mutateAsync({ id: folder.id, force: hasImages }),
-  });
+  })
 }

 function triggerUpload() {
  if (imageUploadBusy.value) {
-    return;
+    return
  }
-  fileInput.value?.click();
+  fileInput.value?.click()
 }

 async function handleFileChange(e: Event) {
  if (imageUploadBusy.value) {
-    (e.target as HTMLInputElement).value = "";
-    return;
+    ;(e.target as HTMLInputElement).value = ''
+    return
  }

-  const files = (e.target as HTMLInputElement).files;
-  if (!files?.length) return;
-  
+  const files = (e.target as HTMLInputElement).files
+  if (!files?.length) return
+
  for (let i = 0; i < files.length; i++) {
    try {
-      await uploadMutation.mutateAsync(files[i]);
+      await uploadMutation.mutateAsync(files[i])
    } catch {
      // surfaced by mutation onError so remaining files can continue
    }
  }
-  (e.target as HTMLInputElement).value = "";
+  ;(e.target as HTMLInputElement).value = ''
 }

 function openRenameImage(image: ImageAssetItem) {
-  renamingImage.value = image;
-  imageFormName.value = image.name;
-  renameImageModalOpen.value = true;
+  renamingImage.value = image
+  imageFormName.value = image.name
+  renameImageModalOpen.value = true
 }

 async function handleRenameImage() {
-  if (!renamingImage.value || !imageFormName.value.trim()) return;
-  await updateImageMutation.mutateAsync({ id: renamingImage.value.id, name: imageFormName.value.trim() });
-  message.success(t("images.imageRenamed"));
-  renameImageModalOpen.value = false;
+  if (!renamingImage.value || !imageFormName.value.trim()) return
+  await updateImageMutation.mutateAsync({
+    id: renamingImage.value.id,
+    name: imageFormName.value.trim(),
+  })
+  message.success(t('images.imageRenamed'))
+  renameImageModalOpen.value = false
 }

 function openMoveImage(image: ImageAssetItem) {
-  const options = buildMoveTargetOptions(image);
+  const options = buildMoveTargetOptions(image)
  if (options.length === 0) {
-    return;
+    return
  }
-  movingImage.value = image;
-  targetFolderValue.value = options[0]?.value;
-  moveModalOpen.value = true;
+  movingImage.value = image
+  targetFolderValue.value = options[0]?.value
+  moveModalOpen.value = true
 }

 async function handleMoveImage() {
-  if (!movingImage.value || targetFolderValue.value == null) return;
+  if (!movingImage.value || targetFolderValue.value == null) return

-  const nextFolderId = normalizeMoveTargetValue(targetFolderValue.value);
+  const nextFolderId = normalizeMoveTargetValue(targetFolderValue.value)
  if (nextFolderId === movingImage.value.folder_id) {
-    moveModalOpen.value = false;
-    return;
+    moveModalOpen.value = false
+    return
  }

-  await updateImageMutation.mutateAsync({ id: movingImage.value.id, folder_id: nextFolderId });
-  message.success(t("images.imageMoved"));
-  moveModalOpen.value = false;
+  await updateImageMutation.mutateAsync({ id: movingImage.value.id, folder_id: nextFolderId })
+  message.success(t('images.imageMoved'))
+  moveModalOpen.value = false
 }

 function buildMoveTargetOptions(image: ImageAssetItem | null) {
  if (!image) {
-    return [];
+    return []
  }

-  const options: Array<{ value: MoveTargetValue; label: string }> = [];
+  const options: Array<{ value: MoveTargetValue; label: string }> = []

  folders.value
    .filter((folder) => folder.id !== image.folder_id)
@@ -295,57 +308,57 @@ function buildMoveTargetOptions(image: ImageAssetItem | null) {
      options.push({
        value: folder.id,
        label: folder.name,
-      });
-    });
+      })
+    })

  if (image.folder_id !== null) {
    options.push({
      value: UNCATEGORIZED_MOVE_TARGET,
-      label: t("images.uncategorized"),
-    });
+      label: t('images.uncategorized'),
+    })
  }

-  return options;
+  return options
 }

 function normalizeMoveTargetValue(value: MoveTargetValue) {
-  return value === UNCATEGORIZED_MOVE_TARGET ? null : value;
+  return value === UNCATEGORIZED_MOVE_TARGET ? null : value
 }

 function canMoveImage(image: ImageAssetItem) {
-  return buildMoveTargetOptions(image).length > 0;
+  return buildMoveTargetOptions(image).length > 0
 }

 function getSelectPopupContainer(triggerNode: HTMLElement) {
-  return triggerNode.parentElement ?? triggerNode;
+  return triggerNode.parentElement ?? triggerNode
 }

 function openImagePreview(image: ImageAssetItem) {
-  previewingImage.value = image;
-  previewModalOpen.value = true;
+  previewingImage.value = image
+  previewModalOpen.value = true
 }

 async function confirmDeleteImage(image: ImageAssetItem) {
-  const refs = await imagesApi.getReferences(image.id);
-  
+  const refs = await imagesApi.getReferences(image.id)
+
  if (refs.total > 0) {
    Modal.confirm({
-      title: t("images.imageInUse"),
-      content: `${t("images.refArticleBody")}: ${refs.article_body}, ${t("images.refArticleCover")}: ${refs.article_cover}\n\n${t("images.confirmDeleteImage")}`,
-      okText: t("images.forceDelete"),
-      okType: "danger",
-      cancelText: t("common.cancel"),
+      title: t('images.imageInUse'),
+      content: `${t('images.refArticleBody')}: ${refs.article_body}, ${t('images.refArticleCover')}: ${refs.article_cover}\n\n${t('images.confirmDeleteImage')}`,
+      okText: t('images.forceDelete'),
+      okType: 'danger',
+      cancelText: t('common.cancel'),
      onOk: () => deleteImageMutation.mutateAsync({ id: image.id, force: true }),
-    });
+    })
  } else {
    Modal.confirm({
-      title: t("images.confirmDeleteTitle"),
-      content: t("images.confirmDeleteImage"),
-      okText: t("common.confirm"),
-      okType: "danger",
-      cancelText: t("common.cancel"),
+      title: t('images.confirmDeleteTitle'),
+      content: t('images.confirmDeleteImage'),
+      okText: t('common.confirm'),
+      okType: 'danger',
+      cancelText: t('common.cancel'),
      onOk: () => deleteImageMutation.mutateAsync({ id: image.id }),
-    });
+    })
  }
 }
 </script>
@@ -355,13 +368,13 @@ async function confirmDeleteImage(image: ImageAssetItem) {
    <section class="page-title-card">
      <div class="page-title-card__header">
        <div class="page-title-card__copy">
-          <h2>{{ t("images.title") }}</h2>
-          <p>{{ t("images.description") }}</p>
+          <h2>{{ t('images.title') }}</h2>
+          <p>{{ t('images.description') }}</p>
        </div>
        <div class="page-title-card__actions">
          <a-button type="primary" :disabled="imageUploadBusy" @click="triggerUpload">
            <template #icon><UploadOutlined /></template>
-            {{ t("images.uploadBtn") }}
+            {{ t('images.uploadBtn') }}
          </a-button>
          <input
            ref="fileInput"
@@ -391,9 +404,10 @@ async function confirmDeleteImage(image: ImageAssetItem) {
      <div class="images-layout-inner">
        <aside class="images-sidebar">
          <div class="images-sidebar__header">
-            <div class="images-sidebar__title">{{ t("images.folders") }}</div>
+            <div class="images-sidebar__title">{{ t('images.folders') }}</div>
            <div class="images-sidebar__add" @click="openCreateFolder">
-              <PlusOutlined /> {{ t("images.newFolder") }}
+              <PlusOutlined />
+              {{ t('images.newFolder') }}
            </div>
          </div>

@@ -402,9 +416,9 @@ async function confirmDeleteImage(image: ImageAssetItem) {
              v-for="folder in sidebarFolders"
              :key="folder.id ?? 'all'"
              class="folder-item"
-              :class="{ 
+              :class="{
                'folder-item--active': selectedFolderId === folder.id && !debouncedSearch,
-                'folder-item--disabled': !!debouncedSearch
+                'folder-item--disabled': !!debouncedSearch,
              }"
              @click="handleFolderSelect(folder.id)"
            >
@@ -414,17 +428,19 @@ async function confirmDeleteImage(image: ImageAssetItem) {
              </div>
              <div class="folder-item__name">{{ folder.name }}</div>
              <div class="folder-item__count">{{ folder.image_count }}</div>
-              
+
              <div v-if="folder.id !== null" class="folder-item__actions" @click.stop>
                <a-dropdown :trigger="['click']">
                  <MoreOutlined />
                  <template #overlay>
                    <a-menu>
                      <a-menu-item @click="openRenameFolder(folder)">
-                        <EditOutlined /> {{ t("images.rename") }}
+                        <EditOutlined />
+                        {{ t('images.rename') }}
                      </a-menu-item>
                      <a-menu-item danger @click="confirmDeleteFolder(folder)">
-                        <DeleteOutlined /> {{ t("images.deleteFolder") }}
+                        <DeleteOutlined />
+                        {{ t('images.deleteFolder') }}
                      </a-menu-item>
                    </a-menu>
                  </template>
@@ -435,16 +451,20 @@ async function confirmDeleteImage(image: ImageAssetItem) {

          <div v-if="storageUsage" class="storage-usage">
            <div class="storage-usage__header">
-              <span>{{ t("images.storageUsage") }}</span>
-              <span>{{ t("images.storageUsageDetail", { 
-                used: formatBytes(storageUsage.used_bytes), 
-                total: formatBytes(storageUsage.quota_bytes),
-                percent: formatPercentage(storageUsage.used_pct)
-              }) }}</span>
+              <span>{{ t('images.storageUsage') }}</span>
+              <span>
+                {{
+                  t('images.storageUsageDetail', {
+                    used: formatBytes(storageUsage.used_bytes),
+                    total: formatBytes(storageUsage.quota_bytes),
+                    percent: formatPercentage(storageUsage.used_pct),
+                  })
+                }}
+              </span>
            </div>
-            <a-progress 
-              :percent="storageUsage.used_pct" 
-              :show-info="false" 
+            <a-progress
+              :percent="storageUsage.used_pct"
+              :show-info="false"
              stroke-color="#1677ff"
              size="small"
            />
@@ -463,7 +483,12 @@ async function confirmDeleteImage(image: ImageAssetItem) {
                <img :src="image.url" :alt="image.name" loading="lazy" />
                <div class="image-card__actions">
                  <a-tooltip :title="t('images.rename')">
-                    <a-button type="text" shape="circle" size="small" @click.stop="openRenameImage(image)">
+                    <a-button
+                      type="text"
+                      shape="circle"
+                      size="small"
+                      @click.stop="openRenameImage(image)"
+                    >
                      <EditOutlined />
                    </a-button>
                  </a-tooltip>
@@ -478,7 +503,13 @@ async function confirmDeleteImage(image: ImageAssetItem) {
                    </a-button>
                  </a-tooltip>
                  <a-tooltip :title="t('images.deleteImage')">
-                    <a-button type="text" shape="circle" size="small" danger @click.stop="confirmDeleteImage(image)">
+                    <a-button
+                      type="text"
+                      shape="circle"
+                      size="small"
+                      danger
+                      @click.stop="confirmDeleteImage(image)"
+                    >
                      <DeleteOutlined />
                    </a-button>
                  </a-tooltip>
@@ -515,8 +546,8 @@ async function confirmDeleteImage(image: ImageAssetItem) {
      :title="editingFolder ? t('images.rename') : t('images.newFolder')"
      @ok="handleFolderSubmit"
    >
-      <div style="padding: 12px 0;">
-        <div style="margin-bottom: 8px;">{{ t("images.folderName") }}</div>
+      <div style="padding: 12px 0">
+        <div style="margin-bottom: 8px">{{ t('images.folderName') }}</div>
        <a-input v-model:value="folderFormName" :placeholder="t('images.folderName')" />
      </div>
    </a-modal>
@@ -527,8 +558,8 @@ async function confirmDeleteImage(image: ImageAssetItem) {
      :title="t('images.rename')"
      @ok="handleRenameImage"
    >
-      <div style="padding: 12px 0;">
-        <div style="margin-bottom: 8px;">{{ t("common.title") }}</div>
+      <div style="padding: 12px 0">
+        <div style="margin-bottom: 8px">{{ t('common.title') }}</div>
        <a-input v-model:value="imageFormName" :placeholder="t('common.title')" />
      </div>
    </a-modal>
@@ -540,8 +571,8 @@ async function confirmDeleteImage(image: ImageAssetItem) {
      :ok-button-props="{ disabled: moveTargetOptions.length === 0 }"
      @ok="handleMoveImage"
    >
-      <div style="padding: 12px 0;">
-        <div style="margin-bottom: 8px;">{{ t("images.folders") }}</div>
+      <div style="padding: 12px 0">
+        <div style="margin-bottom: 8px">{{ t('images.folders') }}</div>
        <a-select
          v-model:value="targetFolderValue"
          style="width: 100%"
@@ -567,9 +598,14 @@ async function confirmDeleteImage(image: ImageAssetItem) {
      centered
    >
      <div v-if="previewingImage" class="image-preview-modal">
-        <img :src="previewingImage.url" :alt="previewingImage.name" class="image-preview-modal__image" />
+        <img
+          :src="previewingImage.url"
+          :alt="previewingImage.name"
+          class="image-preview-modal__image"
+        />
        <div class="image-preview-modal__meta">
-          {{ formatBytes(previewingImage.size_bytes) }} · {{ formatDateTime(previewingImage.created_at) }}
+          {{ formatBytes(previewingImage.size_bytes) }} ·
+          {{ formatDateTime(previewingImage.created_at) }}
        </div>
      </div>
    </a-modal>