feat: redesign setup view

Author: Innei

src/api/backup.ts

@@ -26,9 +26,18 @@ export const backupApi = {
 
   // 删除备份
   delete: (filename: string) =>
-    request.delete<void>('/backups', { params: { filename } }),
+    request.delete<void>(`/backups/${encodeURIComponent(filename)}`),
 
   // 从备份恢复
   rollback: (filename: string) =>
     request.patch<void>(`/backups/rollback/${filename}`),
+
+  // 上传备份文件并恢复
+  uploadAndRestore: (file: File) => {
+    const formData = new FormData()
+    formData.append('file', file)
+    return request.post<void, FormData>('/backups/rollback', {
+      data: formData,
+    })
+  },
 }

src/components/avatar/Avatar.tsx

@@ -0,0 +1,57 @@
+import { defineComponent, onMounted, ref, watch } from 'vue'
+
+import styles from './avatar.module.css'
+
+export const Avatar = defineComponent({
+  name: 'Avatar',
+  props: {
+    size: {
+      type: Number,
+      default: 50,
+    },
+    src: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props) {
+    const loaded = ref(false)
+
+    const preloadImage = () => {
+      if (!props.src) {
+        return
+      }
+      const img = new Image()
+      img.src = props.src
+
+      img.addEventListener('load', () => {
+        loaded.value = true
+      })
+    }
+
+    onMounted(() => {
+      preloadImage()
+    })
+
+    watch(
+      () => props.src,
+      () => {
+        preloadImage()
+      },
+    )
+
+    return () => (
+      <div
+        class={styles.avatar}
+        style={{ height: `${props.size}px`, width: `${props.size}px` }}
+      >
+        <img
+          src={props.src}
+          alt=""
+          style={{ display: loaded.value ? '' : 'none' }}
+        />
+        <div class="sr-only">一个头像</div>
+      </div>
+    )
+  },
+})

src/components/avatar/avatar.module.css

@@ -0,0 +1,18 @@
+.avatar {
+  @apply relative inline-block select-none overflow-hidden rounded-full;
+  background-color: #ddd;
+}
+
+.avatar img {
+  @apply h-full max-w-full rounded-full;
+  animation: scale 0.5s ease-out;
+}
+
+@keyframes scale {
+  0% {
+    transform: scale(0);
+  }
+  to {
+    transform: scale(1);
+  }
+}

src/components/avatar/index.tsx

@@ -1,4 +1,4 @@
-import Avatar from './index.vue'
+import { Avatar } from './Avatar'
 
 // eslint-disable-next-line import/no-default-export
 export { Avatar, Avatar as default }