新增：添加 NSFW 图片模糊显示功能

Author: c1921

frontend/src/App.vue

@@ -4,7 +4,9 @@
     <AppNavbar
       :nsfw="nsfw"
       :dark-mode="darkMode"
+      :blur-nsfw="blurNsfw"
       @toggle-nsfw="toggleNsfw"
+      @toggle-blur-nsfw="toggleBlurNsfw"
       @toggle-dark-mode="toggleDarkMode"
       @open-settings="openSettings"
       @open-filter-sidebar="openFilterSidebar"
@@ -23,6 +25,7 @@
     <ModelDetailModal
       ref="modelDetailModalRef"
       :model="selectedModel"
+      :blur-nsfw="blurNsfw"
       @close="closeModelDetail"
     />
 
@@ -38,6 +41,7 @@
             :progress-message="progressMessage"
             :error="error"
             :nsfw="nsfw"
+            :blur-nsfw="blurNsfw"
             @model-click="openModelDetails"
             @open-settings="openSettings"
           />
@@ -84,6 +88,7 @@ const modelPath = ref('');
 const models = ref<Model[]>([]);
 const nsfw = ref(false);
 const darkMode = ref(false);
+const blurNsfw = ref(true);
 const loading = ref(false);
 const progress = ref(0);
 const progressMessage = ref('');
@@ -176,6 +181,12 @@ function toggleNsfw() {
   localStorage.setItem('nsfw', String(nsfw.value));
 }
 
+function toggleBlurNsfw() {
+  blurNsfw.value = !blurNsfw.value;
+  // 保存设置到 localStorage
+  localStorage.setItem('blurNsfw', String(blurNsfw.value));
+}
+
 function toggleDarkMode() {
   darkMode.value = !darkMode.value;
   const theme = darkMode.value ? 'dark' : 'light';
@@ -311,6 +322,12 @@ onMounted(async () => {
     nsfw.value = savedNsfw === 'true';
   }
   
+  // 从 localStorage 加载模糊设置
+  const savedBlurNsfw = localStorage.getItem('blurNsfw');
+  if (savedBlurNsfw !== null) {
+    blurNsfw.value = savedBlurNsfw === 'true';
+  }
+  
   // 加载暗色模式设置
   const savedTheme = localStorage.getItem('theme');
   if (savedTheme) {

frontend/src/components/AppNavbar.vue

@@ -18,6 +18,19 @@
           <span>NSFW {{ nsfw ? '已开启' : '已关闭' }}</span>
         </button>
 
+        <button 
+          type="button"
+          :class="blurNsfw ? 'btn btn-outline btn-neutral' : 'btn btn-outline btn-error'" 
+          title="NSFW图片模糊控制"
+          @click="toggleBlurNsfw"
+        >
+          <span class="icon-[tabler--blur] size-5 me-1.5" v-if="blurNsfw"></span>
+          <span class="icon-[tabler--blur-off] size-5 me-1.5" v-else></span>
+          <span>模糊{{ blurNsfw ? '开' : '关' }}</span>
+        </button>
+
+        <div class="w-3"></div>
+
         <button 
           type="button"
           class="btn btn-icon btn-outline btn-neutral"
@@ -54,10 +67,12 @@
 defineProps<{
   nsfw: boolean;
   darkMode: boolean;
+  blurNsfw: boolean;
 }>();
 
 const emit = defineEmits<{
   'toggle-nsfw': [];
+  'toggle-blur-nsfw': [];
   'toggle-dark-mode': [];
   'open-settings': [];
   'open-filter-sidebar': [];
@@ -67,6 +82,10 @@ function toggleNsfw() {
   emit('toggle-nsfw');
 }
 
+function toggleBlurNsfw() {
+  emit('toggle-blur-nsfw');
+}
+
 function toggleDarkMode() {
   emit('toggle-dark-mode');
 }

frontend/src/components/ModelDetailModal.vue

@@ -33,11 +33,15 @@
         <div class="modal-body p-6">
           <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
             <div class="md:col-span-2">
-              <img 
-                v-if="model?.preview" 
-                :src="model.preview" 
-                class="w-full rounded-lg" 
-                :alt="model?.name">
+              <div v-if="model?.preview" class="overflow-hidden rounded-lg">
+                <img 
+                  :src="model.preview" 
+                  :class="[
+                    'w-full transition-all duration-300', 
+                    { 'blur-2xl': model.nsfw && blurNsfw }
+                  ]" 
+                  :alt="model?.name">
+              </div>
               <div 
                 v-else 
                 class="flex flex-col items-center justify-center p-12 rounded-lg bg-base-200">
@@ -78,6 +82,7 @@ import type { Model } from '../api/models';
 
 defineProps<{
   model: Model | null;
+  blurNsfw: boolean;
 }>();
 
 const emit = defineEmits<{

frontend/src/components/ModelList.vue

@@ -26,22 +26,25 @@
           class="rounded-lg shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-1 cursor-pointer h-full flex flex-col bg-base-100 border border-base-200"
         >
           <div 
-            class="relative pt-[125%] cursor-pointer"
+            class="relative pt-[125%] cursor-pointer overflow-hidden rounded-t-lg"
             @click="onModelClick(model)"
           >
             <img 
               v-if="model.preview && (nsfw || !model.nsfw)" 
               :src="model.preview" 
-              class="absolute inset-0 w-full h-full object-cover rounded-t-lg" 
+              :class="[
+                'absolute inset-0 w-full h-full object-cover transition-all duration-300',
+                { 'blur-2xl': model.nsfw && blurNsfw }
+              ]" 
               :alt="model.name">
             <div 
               v-else 
-              class="absolute inset-0 flex items-center justify-center rounded-t-lg bg-base-200">
+              class="absolute inset-0 flex items-center justify-center bg-base-200">
               <span class="icon-[tabler--photo] size-10 text-base-content opacity-50"></span>
             </div>
             <div 
               v-if="model.nsfw" 
-              class="badge badge-error absolute top-2 right-2"
+              class="badge badge-error absolute top-2 right-2 z-10"
             >NSFW</div>
           </div>
           <div 
@@ -109,6 +112,7 @@ defineProps<{
   progressMessage: string;
   error: string;
   nsfw: boolean;
+  blurNsfw: boolean;
 }>();
 
 const emit = defineEmits<{