feat: add image management functionality

- Implemented image folder repository with CRUD operations.
- Added image reference repository for managing image references to articles.
- Created image repository for handling image assets, including listing, inserting, updating, and deleting images.
- Introduced image usage repository to track storage usage and quotas for tenants.
- Added SQL queries for image assets, folders, references, and usage.
- Developed image handler for HTTP endpoints to manage images and folders.
- Created database migration scripts for image-related tables and structures.

apps/admin-web/src/components/ImageUploadProgressOverlay.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+
+import { useImageUploadProgress } from "@/lib/image-webp";
+
+const { t } = useI18n();
+const progress = useImageUploadProgress();
+
+const stageLabel = computed(() => {
+  if (!progress.visible) {
+    return "";
+  }
+  return t(`common.imageUploadProgress.stages.${progress.stage}`);
+});
+</script>
+
+<template>
+  <Teleport to="body">
+    <transition name="image-upload-progress">
+      <div v-if="progress.visible" class="image-upload-progress">
+        <div class="image-upload-progress__card">
+          <div class="image-upload-progress__header">
+            <strong>{{ t("common.imageUploadProgress.title") }}</strong>
+            <span>{{ progress.percent }}%</span>
+          </div>
+          <div class="image-upload-progress__file" :title="progress.fileName">
+            {{ progress.fileName }}
+          </div>
+          <div class="image-upload-progress__stage">
+            {{ stageLabel }}
+          </div>
+          <a-progress
+            :percent="progress.percent"
+            :show-info="false"
+            size="small"
+            status="active"
+            stroke-color="#1677ff"
+          />
+        </div>
+      </div>
+    </transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.image-upload-progress {
+  position: fixed;
+  right: 24px;
+  top: 30px;
+  z-index: 3200;
+  pointer-events: none;
+}
+
+.image-upload-progress__card {
+  width: min(360px, calc(100vw - 32px));
+  padding: 16px 18px;
+  border: 1px solid rgba(20, 37, 63, 0.08);
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.96);
+  box-shadow: 0 16px 44px rgba(15, 23, 42, 0.14);
+  backdrop-filter: blur(16px);
+}
+
+.image-upload-progress__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 8px;
+  color: #0f172a;
+  font-size: 14px;
+}
+
+.image-upload-progress__file {
+  overflow: hidden;
+  color: #0f172a;
+  font-size: 13px;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.image-upload-progress__stage {
+  margin: 6px 0 10px;
+  color: #475569;
+  font-size: 12px;
+}
+
+.image-upload-progress-enter-active,
+.image-upload-progress-leave-active {
+  transition: all 0.18s ease;
+}
+
+.image-upload-progress-enter-from,
+.image-upload-progress-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+</style>