refactor: 使用 Naive UI 重构后台布局与黑白双主题

src/components/ui/AssetImage.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { NButton, NImage } from 'naive-ui'
 import { computed, ref, watch } from 'vue'
 import { ImageOff } from '@lucide/vue'
 import { referenceImageUrl } from '../../lib/assets'
@@ -20,21 +21,23 @@ watch(
 
 <template>
     <div class="asset-image">
-        <img
+        <NImage
             v-if="url && !failed"
             :src="url"
             :alt="alt"
-            loading="lazy"
-            referrerpolicy="no-referrer"
+            lazy
+            preview-disabled
+            object-fit="contain"
+            :img-props="{ referrerpolicy: 'no-referrer' }"
             @error="failed = true"
         />
         <span v-else class="asset-image-empty"
             ><ImageOff :size="22" :stroke-width="1.3" /><span>{{
                 src ? '图片无法加载' : emptyText || '尚未生成图片'
             }}</span
-            ><button v-if="failed && retryable" type="button" class="text-button" @click.stop="failed = false">
+            ><NButton v-if="failed && retryable" @click.stop="failed = false" text size="small">
                 重试加载
-            </button></span
+            </NButton></span
         >
     </div>
 </template>