diff --git a/bun.lockb b/bun.lockb
index 39bd45c..326abcc 100644
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index be66cf8..6916c23 100644
--- a/package.json
+++ b/package.json
@@ -73,7 +73,6 @@
     "unplugin-vue-markdown": "^28.3.1",
     "uuid": "^11.1.0",
     "vite": "6.3.3",
-    "vite-plugin-monaco-editor": "^1.1.0",
     "vite-plugin-oxlint": "^1.3.1",
     "vite-svg-loader": "^5.1.0",
     "vue": "3.5.13",
diff --git a/src/api/account.ts b/src/api/account.ts
index a02fbac..fe29fde 100644
--- a/src/api/account.ts
+++ b/src/api/account.ts
@@ -1,5 +1,5 @@
 import { QueryGetAPI, QueryPostAPI, QueryPostAPIWithParams } from '@/api/query';
-import { ACCOUNT_API_URL, VTSURU_API_URL } from '@/data/constants';
+import { ACCOUNT_API_URL, USER_CONFIG_API_URL, VTSURU_API_URL } from '@/data/constants';
 import { isSameDay } from 'date-fns';
 import { createDiscreteApi } from 'naive-ui';
 import { ref } from 'vue';
@@ -184,7 +184,7 @@ export async function DelBlackList(id: number): Promise<APIRoot<unknown>> {
   });
 }
 export function downloadConfigDirect(name: string) {
-  return QueryGetAPI<string>(VTSURU_API_URL + 'get-config', {
+  return QueryGetAPI<string>(USER_CONFIG_API_URL + 'get', {
     name: name
   });
 }
@@ -202,7 +202,7 @@ export async function DownloadConfig<T>(name: string, id?: number): Promise<
   }
 > {
   try {
-    const resp = await QueryGetAPI<string>(VTSURU_API_URL + (id ? 'get-user-config' : 'get-config'), {
+    const resp = await QueryGetAPI<string>(USER_CONFIG_API_URL + (id ? 'user-get' : 'get'), {
       name: name,
       id: id
     });
@@ -237,11 +237,12 @@ export async function DownloadConfig<T>(name: string, id?: number): Promise<
     };
   }
 }
-export async function UploadConfig(name: string, data: unknown) {
+export async function UploadConfig(name: string, data: unknown, isPublic: boolean = false) {
   try {
-    const resp = await QueryPostAPI(VTSURU_API_URL + 'set-config', {
+    const resp = await QueryPostAPI(USER_CONFIG_API_URL + 'set', {
       name: name,
-      json: JSON.stringify(data)
+      json: JSON.stringify(data),
+      public: isPublic
     });
     if (resp.code == 200) {
       console.log('已保存配置文件至服务器:' + name);
@@ -256,7 +257,7 @@ export async function UploadConfig(name: string, data: unknown) {
 }
 export async function GetConfigHash(name: string) {
   try {
-    const resp = await QueryGetAPI<string>(VTSURU_API_URL + 'get-config-hash', {
+    const resp = await QueryGetAPI<string>(USER_CONFIG_API_URL + 'hash', {
       name: name
     });
     if (resp.code == 200) {
diff --git a/src/api/api-models.ts b/src/api/api-models.ts
index 031c728..d50c5f2 100644
--- a/src/api/api-models.ts
+++ b/src/api/api-models.ts
@@ -41,6 +41,7 @@ export interface UserInfo extends UserBasicInfo {
     templateTypes: { [key: string]: string }
     streamerInfo?: StreamerModel
     allowCheckInRanking?: boolean  // 是否允许查看签到排行
+    allowQuestionBoxUploadImage?: boolean // 是否允许问题箱上传图片
   }
 }
 export interface EventFetcherStateModel {
@@ -119,8 +120,8 @@ export enum SaftyLevels {
 }
 export interface Setting_QuestionBox {
   allowUnregistedUser: boolean
-
   saftyLevel: SaftyLevels
+  allowImageUpload: boolean
 }
 export interface UserSetting {
   sendEmail: Setting_SendEmail
@@ -371,8 +372,8 @@ export interface QAInfo {
   id: number
   sender: UserBasicInfo
   target: UserBasicInfo
-  question: { message: string; image?: string }
-  answer?: { message: string; image?: string, createdAt: number }
+  question: { message: string;  }
+  answer?: { message: string; createdAt: number }
   isReaded?: boolean
   isSenderRegisted: boolean
   isPublic: boolean
@@ -380,6 +381,9 @@ export interface QAInfo {
   sendAt: number
   isAnonymous: boolean
 
+  answerImages?: UploadFileResponse[]
+  questionImages?: UploadFileResponse[]
+
   tag?: string
   reviewResult?: QAReviewInfo
 }
@@ -683,7 +687,7 @@ export interface ResponsePointGoodModel {
   count?: number
   price: number
   tags: string[]
-  cover?: string
+  cover?: UploadFileResponse
   images: string[]
   status: GoodsStatus
   type: GoodsTypes
@@ -702,17 +706,13 @@ export interface ResponsePointGoodModel {
   keySelectionMode?: KeySelectionMode
   currentKeyIndex?: number
 }
-export interface ImageUploadModel {
-  existImages: string[]
-  newImagesBase64: string[]
-}
 export interface UploadPointGoodsModel {
   id?: number
   name: string
   count?: number
   price: number
   tags: string[]
-  cover?: ImageUploadModel
+  cover?: UploadFileResponse
   status: GoodsStatus
   type: GoodsTypes
   collectUrl?: string
@@ -844,3 +844,42 @@ export interface CheckInResult {
   consecutiveDays: number
   todayRank: number
 }
+
+/**
+ * 文件类型枚举
+ */
+export enum UserFileTypes {
+  Image = 0,
+  Audio = 1,
+  Video = 2,
+  Document = 3,
+  Other = 4
+}
+
+/**
+ * 文件存储位置枚举
+ */
+export enum UserFileLocation {
+  Local = 0
+}
+
+/**
+ * 文件上传响应接口
+ */
+export interface UploadFileResponse {
+  id: number;
+  path: string;
+  name: string;
+  hash: string;
+}
+
+/**
+ * 扩展的文件信息接口，用于文件上传组件
+ */
+export interface ExtendedUploadFileInfo {
+  id: string;  // 文件唯一标识符
+  name: string; // 文件名称
+  status: 'uploading' | 'finished' | 'error' | 'removed'; // 上传状态
+  thumbnailUrl?: string; // 缩略图URL
+  file?: File; // 可选的文件对象
+}
\ No newline at end of file
diff --git a/src/api/query.ts b/src/api/query.ts
index a10dfee..c7c65cc 100644
--- a/src/api/query.ts
+++ b/src/api/query.ts
@@ -7,13 +7,14 @@ import { cookie } from './account';
 export async function QueryPostAPI<T>(
   urlString: string,
   body?: unknown,
-  headers?: [string, string][]
+  headers?: [string, string][],
+  contentType?: string
 ): Promise<APIRoot<T>> {
   return await QueryPostAPIWithParams<T>(
     urlString,
     undefined,
     body,
-    'application/json',
+    contentType || 'application/json',
     headers
   )
 }
@@ -59,11 +60,15 @@ async function QueryPostAPIWithParamsInternal<T>(
   })
   if (cookie.value.cookie) h['Authorization'] = `Bearer ${cookie.value.cookie}`
 
-  h['Content-Type'] = contentType
+  // 当使用FormData时，不手动设置Content-Type，让浏览器自动添加boundary
+  if (!(body instanceof FormData)) {
+    h['Content-Type'] = contentType
+  }
+
   return await QueryAPIInternal<T>(url, {
     method: 'post',
     headers: h,
-    body: typeof body === 'string' ? body : JSON.stringify(body)
+    body: body instanceof FormData ? body : typeof body === 'string' ? body : JSON.stringify(body)
   })
 }
 async function QueryAPIInternal<T>(url: URL, init: RequestInit) {
diff --git a/src/components.d.ts b/src/components.d.ts
index d86be7e..e20602c 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -34,6 +34,7 @@ declare module 'vue' {
     NPopconfirm: typeof import('naive-ui')['NPopconfirm']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSpace: typeof import('naive-ui')['NSpace']
+    NSpin: typeof import('naive-ui')['NSpin']
     NTag: typeof import('naive-ui')['NTag']
     NText: typeof import('naive-ui')['NText']
     NTime: typeof import('naive-ui')['NTime']
diff --git a/src/components/DynamicForm.vue b/src/components/DynamicForm.vue
index 7a94a67..4c4fa0f 100644
--- a/src/components/DynamicForm.vue
+++ b/src/components/DynamicForm.vue
@@ -1,14 +1,11 @@
 <script setup lang="ts">
-  import { getImageUploadModel } from '@/Utils';
-import { QueryPostAPI } from '@/api/query';
-import { ConfigItemDefinition, DecorativeImageProperties, TemplateConfigImageItem, RGBAColor, rgbaToString } from '@/data/VTsuruTypes';
-import { FILE_BASE_URL, VTSURU_API_URL } from '@/data/constants';
-import { ArrowDown20Filled, ArrowUp20Filled, Delete20Filled } from '@vicons/fluent';
-import { Info24Filled } from '@vicons/fluent';
-import { NButton, NCard, NCheckbox, NColorPicker, NEmpty, NFlex, NForm, NGrid, NIcon, NInput, NInputNumber, NScrollbar, NSlider, NSpace, NTooltip, NUpload, UploadFileInfo, useMessage } from 'naive-ui';
-import { h } from 'vue';
-import { onMounted, ref } from 'vue';
-import { v4 as uuidv4 } from 'uuid';
+  import { UploadConfig } from '@/api/account';
+import { UploadFileResponse, UserFileLocation } from '@/api/api-models';
+import { ConfigItemDefinition, DecorativeImageProperties, RGBAColor, rgbaToString } from '@/data/VTsuruConfigTypes';
+import { uploadFiles, UploadStage } from '@/data/fileUpload';
+import { ArrowDown20Filled, ArrowUp20Filled, Delete20Filled, Info24Filled } from '@vicons/fluent';
+import { NButton, NCard, NCheckbox, NColorPicker, NEmpty, NFlex, NForm, NGrid, NIcon, NInput, NInputNumber, NModal, NProgress, NScrollbar, NSlider, NSpace, NText, NTooltip, NUpload, UploadFileInfo, useMessage } from 'naive-ui';
+import { h, onMounted, ref } from 'vue';
 
   const message = useMessage();
 
@@ -19,7 +16,19 @@ import { v4 as uuidv4 } from 'uuid';
   }>();
 
   const fileList = ref<{ [key: string]: UploadFileInfo[]; }>({});
-  const selectedImageId = ref<string | null>(null);
+  // 新增实际文件列表，用于存储待上传的文件
+  const pendingFiles = ref<{ [key: string]: File[]; }>({});
+  // 新增装饰图片待上传文件
+  const pendingDecorativeImages = ref<{ [key: string]: File[]; }>({});
+
+  // 上传进度相关
+  const showUploadModal = ref(false);
+  const uploadStage = ref('');
+  const uploadProgress = ref(0);
+  const totalFilesToUpload = ref(0);
+  const uploadedFilesCount = ref(0);
+
+  const selectedImageId = ref<number | null>(null);
 
   const isUploading = ref(false);
 
@@ -29,31 +38,166 @@ import { v4 as uuidv4 } from 'uuid';
       if ((file.file?.size ?? 0) > 10 * 1024 * 1024) {
         message.error('文件大小不能超过10MB');
         fileList.value[key] = [];
+        return;
+      }
+
+      // 存储文件以便于稍后上传
+      if (file.file) {
+        if (!pendingFiles.value[key]) {
+          pendingFiles.value[key] = [];
+        }
+        pendingFiles.value[key].push(file.file);
       }
     }
   }
+
+  // 更新上传进度的函数
+  function updateUploadProgress(stage: string, fileIndex?: number, totalFiles?: number) {
+    uploadStage.value = stage;
+
+    if (totalFiles !== undefined) {
+      totalFilesToUpload.value = totalFiles;
+    }
+
+    if (fileIndex !== undefined) {
+      uploadedFilesCount.value = fileIndex;
+      uploadProgress.value = Math.floor((fileIndex / totalFilesToUpload.value) * 100);
+    }
+  }
+
+  async function uploadAllFiles() {
+    const allPendingFiles: File[] = [];
+
+    // 计算待上传的文件总数
+    for (const key in pendingFiles.value) {
+      if (pendingFiles.value[key]?.length > 0) {
+        allPendingFiles.push(...pendingFiles.value[key]);
+      }
+    }
+
+    for (const key in pendingDecorativeImages.value) {
+      if (pendingDecorativeImages.value[key]?.length > 0) {
+        allPendingFiles.push(...pendingDecorativeImages.value[key]);
+      }
+    }
+
+    // 如果没有文件需要上传，直接返回
+    if (allPendingFiles.length === 0) {
+      return true;
+    }
+
+    // 显示上传模态框
+    totalFilesToUpload.value = allPendingFiles.length;
+    uploadedFilesCount.value = 0;
+    uploadProgress.value = 0;
+    showUploadModal.value = true;
+
+    const uploadTasks = [];
+    let fileCounter = 0;
+
+    // 上传普通文件
+    for (const key in pendingFiles.value) {
+      if (pendingFiles.value[key]?.length > 0) {
+        const filesToUpload = pendingFiles.value[key];
+        uploadTasks.push(
+          uploadFiles(
+            filesToUpload,
+            undefined,
+            UserFileLocation.Local,
+            (stage) => {
+              updateUploadProgress(stage, fileCounter + filesToUpload.length, totalFilesToUpload.value);
+              if (stage === UploadStage.Success) {
+                fileCounter += filesToUpload.length;
+              } else if (stage === UploadStage.Failed) {
+                message.error(`${key} 文件上传失败`);
+              }
+            }
+          ).then(results => {
+            // 更新配置数据
+            props.configData[key] = results;
+          })
+        );
+      }
+    }
+
+    // 上传装饰图片
+    for (const key in pendingDecorativeImages.value) {
+      if (pendingDecorativeImages.value[key]?.length > 0) {
+        const filesToUpload = pendingDecorativeImages.value[key];
+        uploadTasks.push(
+          uploadFiles(
+            filesToUpload,
+            undefined,
+            UserFileLocation.Local,
+            (stage) => {
+              updateUploadProgress(stage, fileCounter + filesToUpload.length, totalFilesToUpload.value);
+              if (stage === UploadStage.Success) {
+                fileCounter += filesToUpload.length;
+              } else if (stage === UploadStage.Failed) {
+                message.error(`装饰图片上传失败`);
+              }
+            }
+          ).then(results => {
+            // 创建新的装饰图片对象并添加到现有数组中
+            const newImages: DecorativeImageProperties[] = results.map((result, index) => ({
+              id: Number(result.id),
+              path: result.path,
+              name: result.name,
+              hash: result.hash,
+              src: result.path,
+              x: 10 + index * 5,
+              y: 10 + index * 5,
+              width: 20,
+              rotation: 0,
+              opacity: 1,
+              zIndex: (props.configData[key]?.length ?? 0) + index + 1,
+            }));
+
+            const currentImages = props.configData[key] as DecorativeImageProperties[] || [];
+            props.configData[key] = [...currentImages, ...newImages];
+          })
+        );
+      }
+    }
+
+    // 等待所有上传任务完成
+    try {
+      await Promise.all(uploadTasks);
+      // 完成上传，关闭模态框
+      updateUploadProgress(UploadStage.Success, totalFilesToUpload.value, totalFilesToUpload.value);
+      setTimeout(() => {
+        showUploadModal.value = false;
+      }, 500); // 给用户一个短暂的视觉反馈，然后关闭模态框
+
+      // 清空待上传文件
+      pendingFiles.value = {};
+      pendingDecorativeImages.value = {};
+      return true;
+    } catch (error) {
+      console.error("文件上传失败:", error);
+      message.error("文件上传失败: " + (error instanceof Error ? error.message : String(error)));
+      updateUploadProgress(UploadStage.Failed);
+      setTimeout(() => {
+        showUploadModal.value = false;
+      }, 2000); // 错误状态多显示一会儿
+      return false;
+    }
+  }
+
   async function onSubmit() {
     try {
       isUploading.value = true;
-      let images = {} as {
-        [key: string]: {
-          existImages: string[],
-          newImagesBase64: string[],
-        };
-      };
-      for (const item of props.config!) {
-        if (item.type == 'image') {
-          const key = (item as TemplateConfigImageItem<any>).key;
-          images[key] = await getImageUploadModel(fileList.value[key]);
-        }
+
+      // 先上传所有文件
+      const uploadSuccess = await uploadAllFiles();
+      if (!uploadSuccess) {
+        isUploading.value = false;
+        return;
       }
-      const resp = await QueryPostAPI<any>(VTSURU_API_URL + 'set-config', {
-        name: props.name,
-        json: JSON.stringify(props.configData),
-        images: images,
-        public: 'true',
-      });
-      if (resp.code == 200) {
+
+      const success = await UploadConfig(props.name || '', props.configData, true);
+
+      if (success) {
         message.success('已保存设置');
         props.config?.forEach(item => {
           if (item.type === 'render') {
@@ -64,7 +208,7 @@ import { v4 as uuidv4 } from 'uuid';
           }
         });
       } else {
-        message.error('保存失败: ' + resp.message);
+        message.error('保存失败');
       }
     } catch (err) {
       message.error('保存失败: ' + err);
@@ -149,7 +293,7 @@ import { v4 as uuidv4 } from 'uuid';
   }
 
   // 装饰图片功能
-  const updateImageProp = (id: string, prop: keyof DecorativeImageProperties, value: any, key: string) => {
+  const updateImageProp = (id: number, prop: keyof DecorativeImageProperties, value: any, key: string) => {
     const images = props.configData[key] as DecorativeImageProperties[];
     const index = images.findIndex(img => img.id === id);
     if (index !== -1) {
@@ -159,7 +303,7 @@ import { v4 as uuidv4 } from 'uuid';
     }
   };
 
-  const removeImage = (id: string, key: string) => {
+  const removeImage = (id: number, key: string) => {
     const images = props.configData[key] as DecorativeImageProperties[];
     props.configData[key] = images.filter(img => img.id !== id);
     if (selectedImageId.value === id) {
@@ -167,7 +311,7 @@ import { v4 as uuidv4 } from 'uuid';
     }
   };
 
-  const changeZIndex = (id: string, direction: 'up' | 'down', key: string) => {
+  const changeZIndex = (id: number, direction: 'up' | 'down', key: string) => {
     const images = props.configData[key] as DecorativeImageProperties[];
     const index = images.findIndex(img => img.id === id);
     if (index === -1) return;
@@ -182,32 +326,20 @@ import { v4 as uuidv4 } from 'uuid';
   };
 
   const renderDecorativeImages = (key: string) => {
-    // 获取全局处理器
-    const uploadHandler = (window as any).$upload;
-    const messageHandler = (window as any).$message ?? message;
-
     return h(NFlex, { vertical: true, size: 'large' }, () => [
       // 上传按钮
       h(NUpload, {
         multiple: true, accept: 'image/*', showFileList: false,
         'onUpdate:fileList': (fileList: UploadFileInfo[]) => {
-          if (uploadHandler?.upload && fileList.length > 0) {
+          if (fileList.length > 0) {
             const filesToUpload = fileList.map(f => f.file).filter((f): f is File => f instanceof File);
             if (filesToUpload.length > 0) {
-              uploadHandler.upload(filesToUpload, '/api/file/upload')
-                .then((results: any[]) => {
-                  const newImages: DecorativeImageProperties[] = results.map((result: any, index: number) => ({
-                    id: uuidv4(), src: result.url, x: 10 + index * 5, y: 10 + index * 5,
-                    width: 20, rotation: 0, opacity: 1,
-                    zIndex: (props.configData[key]?.length ?? 0) + index + 1,
-                  }));
-                  const currentImages = props.configData[key] as DecorativeImageProperties[] || [];
-                  props.configData[key] = [...currentImages, ...newImages];
-                })
-                .catch((error: any) => {
-                  console.error("图片上传失败:", error);
-                  messageHandler?.error("图片上传失败: " + (error?.message ?? error));
-                });
+              // 不立即上传，而是存储起来等待提交时上传
+              if (!pendingDecorativeImages.value[key]) {
+                pendingDecorativeImages.value[key] = [];
+              }
+              pendingDecorativeImages.value[key].push(...filesToUpload);
+              message.success(`已选择 ${filesToUpload.length} 个装饰图片，提交时会自动上传`);
             }
           }
           return [];
@@ -227,8 +359,8 @@ import { v4 as uuidv4 } from 'uuid';
             }, {
               default: () => h(NFlex, { justify: 'space-between', align: 'center' }, () => [
                 h(NFlex, { align: 'center', size: 'small' }, () => [
-                  h('img', { src: FILE_BASE_URL + img.src, style: { width: '40px', height: '40px', objectFit: 'contain', marginRight: '10px', backgroundColor: '#f0f0f0' } }),
-                  h('span', `ID: ...${img.id.slice(-4)}`)
+                  h('img', { src: img.path, style: { width: '40px', height: '40px', objectFit: 'contain', marginRight: '10px', backgroundColor: '#f0f0f0' } }),
+                  h('span', `ID: ${img.id}`)
                 ]),
                 h(NSpace, null, () => [
                   h(NButton, { size: 'tiny', circle: true, secondary: true, title: '上移一层', onClick: (e: Event) => { e.stopPropagation(); changeZIndex(img.id, 'up', key); } }, { icon: () => h(NIcon, { component: ArrowUp20Filled }) }),
@@ -244,9 +376,9 @@ import { v4 as uuidv4 } from 'uuid';
                 h(NFlex, { align: 'center' }, () => [h('span', { style: { width: '50px' } }, '透明度:'), h(NInputNumber, { value: img.opacity, size: 'small', 'onUpdate:value': (v: number | null) => updateImageProp(img.id, 'opacity', v ?? 0, key), min: 0, max: 1, step: 0.01 }), h(NSlider, { value: img.opacity, 'onUpdate:value': (v: number | number[]) => updateImageProp(img.id, 'opacity', Array.isArray(v) ? v[0] : v ?? 0, key), min: 0, max: 1, step: 0.01, style: { marginLeft: '10px', flexGrow: 1 } })]),
                 h(NFlex, { align: 'center' }, () => [h('span', { style: { width: '50px' } }, '层级:'), h(NInputNumber, { value: img.zIndex, size: 'small', readonly: true })]),
               ]) : null
-            })
+            });
           })
-          : h(NEmpty, { description: '暂无装饰图片' })
+          : h(NEmpty, { description: '暂无装饰图片' });
       }),
     ]);
   };
@@ -258,13 +390,13 @@ import { v4 as uuidv4 } from 'uuid';
       if (item.default && !(item.key in props.configData)) {
         props.configData[item.key] = item.default;
       }
-      if (item.type == 'image') {
+      if (item.type == 'file') {
         const configItem = props.configData[item.key];
         if (configItem) {
-          fileList.value[item.key] = configItem.map((i: string) => ({
-            id: i,
-            thumbnailUrl: FILE_BASE_URL + i,
-            name: '',
+          fileList.value[item.key] = configItem.map((uploadedFile: UploadFileResponse) => ({
+            id: uploadedFile.id,
+            thumbnailUrl: uploadedFile.path,
+            name: uploadedFile.name || '',
             status: 'finished',
           }));
         }
@@ -346,16 +478,15 @@ import { v4 as uuidv4 } from 'uuid';
           </NTooltip>
         </template>
         <NUpload
-          v-else-if="item.type == 'image'"
+          v-else-if="item.type == 'file'"
           v-model:file-list="fileList[item.key]"
-          accept=".png,.jpg,.jpeg,.gif,.svg,.webp,.ico"
+          accept=".png,.jpg,.jpeg,.gif,.svg,.webp,.ico,.mp3,.mp4,.pdf,.doc,.docx"
           list-type="image-card"
           :default-upload="false"
-          :max="item.imageLimit"
-          im
+          :max="item.fileLimit"
           @update:file-list="file => OnFileListChange(item.key, file)"
         >
-          上传图片
+          上传文件
         </NUpload>
       </NFormItemGi>
     </NGrid>
@@ -367,5 +498,31 @@ import { v4 as uuidv4 } from 'uuid';
     >
       提交
     </NButton>
+
+    <!-- 上传进度模态框 -->
+    <NModal
+      v-model:show="showUploadModal"
+      preset="card"
+      title="文件上传进度"
+      :mask-closable="false"
+      :closable="false"
+      style="width: 400px"
+    >
+      <NFlex
+        vertical
+        size="large"
+      >
+        <NText>{{ uploadStage }}</NText>
+        <NProgress
+          type="line"
+          :percentage="uploadProgress"
+          :indicator-placement="'inside'"
+          :show-indicator="true"
+        />
+        <NText v-if="totalFilesToUpload > 0">
+          {{ uploadedFilesCount }} / {{ totalFilesToUpload }} 个文件
+        </NText>
+      </NFlex>
+    </NModal>
   </NForm>
 </template>
diff --git a/src/components/QuestionItem.vue b/src/components/QuestionItem.vue
index 6a1d9b2..a97b0c5 100644
--- a/src/components/QuestionItem.vue
+++ b/src/components/QuestionItem.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { QAInfo } from '@/api/api-models'
 import { useQuestionBox } from '@/store/useQuestionBox';
-import { NButton, NCard, NDivider, NFlex, NImage, NTag, NText, NTime, NTooltip } from 'naive-ui'
+import { NButton, NCard, NDivider, NFlex, NImage, NTag, NText, NTime, NTooltip, NSpace } from 'naive-ui'
 import { ref } from 'vue';
 
 const props = defineProps<{
@@ -144,13 +144,19 @@ function getScoreColor(score: number | undefined): string {
         :item="item"
       />
     </template>
-    <template v-if="item.question?.image">
-      <NImage
-        v-if="item.question?.image"
-        :src="item.question.image"
-        height="100"
-        lazy
-      />
+    <template v-if="item.questionImages && item.questionImages.length > 0">
+      <NSpace
+        vertical
+        size="small"
+      >
+        <NImage
+          v-for="(img, index) in item.questionImages"
+          :key="index"
+          :src="img.path"
+          height="100"
+          lazy
+        />
+      </NSpace>
       <br>
     </template>
 
diff --git a/src/components/manage/PointGoodsItem.vue b/src/components/manage/PointGoodsItem.vue
index 63ca90c..9a17829 100644
--- a/src/components/manage/PointGoodsItem.vue
+++ b/src/components/manage/PointGoodsItem.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
   import { GoodsTypes, ResponsePointGoodModel } from '@/api/api-models';
-  import { FILE_BASE_URL, IMGUR_URL } from '@/data/constants';
-  import { NAlert, NCard, NEllipsis, NEmpty, NFlex, NIcon, NImage, NTag, NText } from 'naive-ui';
-  import { VehicleShip20Filled, Pin16Filled } from '@vicons/fluent';
+import { IMGUR_URL } from '@/data/constants';
+import { Pin16Filled } from '@vicons/fluent';
+import { NCard, NEllipsis, NEmpty, NFlex, NIcon, NImage, NTag, NText } from 'naive-ui';
 
   const props = defineProps<{
     goods: ResponsePointGoodModel | undefined;
@@ -30,7 +30,7 @@
     <template #cover>
       <div class="cover-container">
         <NImage
-          :src="goods.cover ? FILE_BASE_URL + goods.cover : emptyCover"
+          :src="goods.cover ? goods.cover.path : emptyCover"
           :fallback-src="emptyCover"
           height="150"
           object-fit="cover"
diff --git a/src/data/VTsuruTypes.ts b/src/data/VTsuruConfigTypes.ts
similarity index 59%
rename from src/data/VTsuruTypes.ts
rename to src/data/VTsuruConfigTypes.ts
index 83b538e..519a924 100644
--- a/src/data/VTsuruTypes.ts
+++ b/src/data/VTsuruConfigTypes.ts
@@ -1,3 +1,4 @@
+import { UploadFileResponse } from '@/api/api-models';
 import { VNode, h } from 'vue'; // 导入 Vue 的 VNode 类型和 h 函数（用于示例）
 
 // --- 基础和通用类型 ---
@@ -31,6 +32,37 @@ type DataAccessor<T, V> = {
   set: (config: T, value: V) => void;
 };
 
+// 添加辅助函数，用于从配置对象中安全获取数据
+export function getConfigValue<T, K extends keyof T>(config: T, key: K): T[K] {
+  return config[key];
+}
+
+// 添加辅助函数，用于设置配置对象的数据
+export function setConfigValue<T, K extends keyof T>(config: T, key: K, value: T[K]): void {
+  config[key] = value;
+}
+
+// 创建一个默认的RGBA颜色对象
+export function createDefaultRGBA(r = 0, g = 0, b = 0, a = 1): RGBAColor {
+  return { r, g, b, a };
+}
+
+// 添加类型守卫函数，用于检查上传文件信息
+export function isUploadFileInfo(obj: any): obj is UploadFileResponse {
+  return (
+    obj &&
+    typeof obj === 'object' &&
+    'id' in obj &&
+    typeof obj.id === 'number' &&
+    'path' in obj &&
+    typeof obj.path === 'string' &&
+    'name' in obj &&
+    typeof obj.name === 'string' &&
+    'hash' in obj &&
+    typeof obj.hash === 'string'
+  );
+}
+
 /**
  * @description 带有特定值类型 'V' 的配置项的基础类型。
  * @template T - 完整配置对象的类型 (默认为 unknown)。
@@ -117,22 +149,21 @@ export type TemplateConfigBooleanItem<T = unknown> = TemplateConfigItemWithType<
   description?: string; // 可选的描述
 };
 
-// 修改 TemplateConfigImageItem 以支持单个或多个图片，并返回完整 URL
-export type TemplateConfigImageItem<T = unknown> = TemplateConfigItemWithType<T, string[]> & {
-  type: 'image';
-  imageLimit: number; // 图片数量限制
-  // onUploaded 的 data 现在是 string[]
-  onUploaded?: (data: string[], config: T) => void;
-};
+// 将文件类型统一为数组，不再根据fileLimit区分
+export type TemplateConfigFileItem<T = unknown> =
+  TemplateConfigItemWithType<T, UploadFileResponse[]> & {
+    type: 'file';
+    fileLimit?: number; // 变为可选参数，仅用于UI限制，不影响类型
+    fileType?: string[];
+    onUploaded?: (data: UploadFileResponse[], config: T) => void;
+  };
 
 // --- 新增：装饰性图片配置 ---
 
 /**
  * @description 单个装饰图片的属性接口
  */
-export interface DecorativeImageProperties {
-  id: string;        // 唯一标识符 (例如 UUID 或时间戳)
-  src: string;       // 图片 URL
+export interface DecorativeImageProperties extends UploadFileResponse {
   x: number;         // X 坐标 (%)
   y: number;         // Y 坐标 (%)
   width: number;     // 宽度 (%)
@@ -208,16 +239,16 @@ export interface TemplateConfigRenderItem<T = unknown> extends TemplateConfigBas
 
 /**
  * @description 所有可能的配置项定义类型的联合类型。
- * 使用 `<unknown>` 作为完整配置类型 T 的占位符。
+ * 使用 `<any>` 作为完整配置类型 T 的占位符。
  */
 export type ConfigItemDefinition =
   | TemplateConfigStringItem<any>
   | TemplateConfigNumberItem<any>
   | TemplateConfigStringArrayItem<any>
   | TemplateConfigNumberArrayItem<any>
-  | TemplateConfigImageItem<any>
-  | TemplateConfigRenderItem<any> // 包含优化后的 render/onUploaded 方法
-  | TemplateConfigDecorativeImagesItem<any> // 新增装饰图片类型
+  | TemplateConfigFileItem<any>
+  | TemplateConfigRenderItem<any>
+  | TemplateConfigDecorativeImagesItem<any>
   | TemplateConfigSliderNumberItem<any>
   | TemplateConfigBooleanItem<any>
   | TemplateConfigColorItem<any>;
@@ -240,9 +271,10 @@ export type ExtractConfigData<
     // 如果没有 default，则根据 'type' 属性确定类型
     : ItemWithKeyK extends { type: 'string'; } ? string
     : ItemWithKeyK extends { type: 'stringArray'; } ? string[]
-    : ItemWithKeyK extends { type: 'number' | 'sliderNumber' | 'color'; } ? number
+    : ItemWithKeyK extends { type: 'number' | 'sliderNumber' ; } ? number
     : ItemWithKeyK extends { type: 'numberArray'; } ? number[]
-    : ItemWithKeyK extends { type: 'image'; } ? string[]
+    // 文件类型统一处理为数组
+    : ItemWithKeyK extends { type: 'file'; } ? UploadFileResponse[]
     : ItemWithKeyK extends { type: 'boolean'; } ? boolean
     : ItemWithKeyK extends { type: 'color'; } ? RGBAColor
     : ItemWithKeyK extends { type: 'decorativeImages'; } ? DecorativeImageProperties[]
@@ -253,22 +285,140 @@ export type ExtractConfigData<
     : never // 如果 K 正确派生，则不应发生
   };
 
+
+// --- Key 约束辅助类型 ---
+/**
+ * @description 根据配置项的 'type' 约束其 'key' 属性。
+ * - type: 'file'或'decorativeImages'等包含UploadFileInfo的类型的key必须以'File'结尾。
+ * - 其他type的key禁止以'File'结尾。
+ * @template Item - 待检查的配置项定义类型。
+ */
+type ConstrainedKeyItem<Item extends ConfigItemDefinition> =
+    // 所有包含UploadFileInfo的类型必须以'File'结尾
+    Item extends { type: 'file' } | { type: 'decorativeImages' }
+        // 强制key以'File'结尾
+        ? Omit<Item, 'key'> & { key: `${string}File` }
+        : Item extends { key: infer K extends string }
+            // 对于其它类型，检查key是否以'File'结尾
+            ? K extends `${string}File`
+                // 如果以'File'结尾，则类型无效(never)，导致TypeScript报错
+                ? never
+                // 如果不以'File'结尾，则类型有效
+                : Item
+            // 如果Item没有key属性(理论上不应发生)，保持原样
+            : Item;
+
 /**
  * @description 定义并验证配置项数组。
  * 使用 `const Items` 可以在与 `as const` 结合使用时保留字面量类型和元组结构。
+ * 此函数现在会强制执行 key 的命名规则：'file' 类型 key 必须以 'File' 结尾，其他类型禁止。
+ * @template Items - 一个只读的配置项定义数组，每个元素都必须满足 ConstrainedKeyItem 约束。
  * @param items 一个只读的配置项定义数组。
- * @returns 类型被保留的同一个只读数组。
+ * @returns 类型被保留且经过验证的同一个只读数组。
  */
 export function defineTemplateConfig<
-  const Items extends readonly ConfigItemDefinition[] // 使用 'const' 泛型进行推断
+    // 应用 ConstrainedKeyItem 约束到数组的每个元素
+    const Items extends readonly ConstrainedKeyItem<ConfigItemDefinition>[]
 >(items: Items): Items {
-  // 如果需要，可以在此处添加基本的运行时验证。
-  // 类型检查主要由 TypeScript 根据约束完成。
-  return items;
+    // 可选的运行时验证，用于在浏览器控制台提供更友好的错误提示
+    items.forEach(item => {
+      // 类型守卫确保 item 有 key 和 type 属性
+      if ('key' in item && typeof item.key === 'string' && 'type' in item && typeof item.type === 'string') {
+        // 检查是否是需要File后缀的类型
+        const requiresFileSuffix = item.type === 'file' || item.type === 'decorativeImages';
+
+        if (requiresFileSuffix) {
+            if (!item.key.endsWith('File')) {
+                console.error(`类型错误: 配置项 "${item.key}" 类型为 '${item.type}' 但 key 未以 'File' 结尾。`);
+            }
+        } else {
+            if (item.key.endsWith('File')) {
+                console.error(`类型错误: 配置项 "${item.key}" 类型为 '${item.type}' 但 key 以 'File' 结尾。`);
+            }
+        }
+      }
+    });
+    return items;
 }
 
-// 帮助函数：将 RGBA 对象转换为 CSS 字符串
-export function rgbaToString(color: RGBAColor | undefined): string {
-  if (!color) return 'rgba(0,0,0,0)'; // 或者一个默认颜色
-  return `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`;
+// --- 增强型工具类型 ---
+
+/**
+ * 确保数值在指定范围内的工具类型
+ */
+export type NumericRange<Min extends number, Max extends number> =
+  number extends Min ? number :
+  number extends Max ? number :
+  Min | Max | Exclude<number, Min | Max>;
+
+/**
+ * 非空数组工具类型
+ */
+export type NonEmptyArray<T> = [T, ...T[]];
+
+// --- 改进 rgbaToString 函数，添加更严格的类型检查 ---
+export function rgbaToString(color: RGBAColor | undefined | null): string {
+  if (!color) return 'rgba(0,0,0,0)';
+
+  // 额外的类型安全检查
+  const r = Math.min(255, Math.max(0, Math.round(color.r)));
+  const g = Math.min(255, Math.max(0, Math.round(color.g)));
+  const b = Math.min(255, Math.max(0, Math.round(color.b)));
+  const a = Math.min(1, Math.max(0, color.a));
+
+  return `rgba(${r}, ${g}, ${b}, ${a})`;
+}
+
+/**
+ * 辅助函数：创建一个配置对象的模板工厂函数
+ * @param items 配置项定义数组
+ * @returns 创建配置对象的工厂函数
+ */
+export function createTemplateConfigFactory<const Items extends readonly ConstrainedKeyItem<ConfigItemDefinition>[]>(
+  items: Items
+) {
+  // 返回一个工厂函数，用于创建初始化的配置对象
+  return (): ExtractConfigData<Items> => {
+    const config = {} as ExtractConfigData<Items>;
+
+    // 使用项定义中的默认值初始化配置对象
+    for (const item of items) {
+      if ('default' in item && item.default !== undefined) {
+        if (typeof config === 'object' && item.key) {
+          // @ts-ignore - 动态赋值
+          config[item.key] = item.default;
+        }
+      }
+    }
+
+    return config;
+  };
+}
+
+/**
+ * 模板配置校验函数类型
+ */
+export type TemplateConfigValidator<T> = (config: T) => { valid: boolean; message?: string };
+
+/**
+ * 创建配置验证器
+ * @param validator 验证函数
+ * @returns 验证器函数
+ */
+export function createConfigValidator<T>(validator: TemplateConfigValidator<T>) {
+  return validator;
+}
+
+/**
+ * 类型守卫：检查对象是否为有效的RGBA颜色
+ */
+export function isValidRGBAColor(obj: any): obj is RGBAColor {
+  return (
+    obj &&
+    typeof obj === 'object' &&
+    'r' in obj && typeof obj.r === 'number' &&
+    'g' in obj && typeof obj.g === 'number' &&
+    'b' in obj && typeof obj.b === 'number' &&
+    'a' in obj && typeof obj.a === 'number'
+  );
 }
\ No newline at end of file
diff --git a/src/data/constants.ts b/src/data/constants.ts
index b2e42dd..c31db2f 100644
--- a/src/data/constants.ts
+++ b/src/data/constants.ts
@@ -63,7 +63,8 @@ export const FORUM_API_URL = BASE_API_URL + 'forum/';
 export const USER_INDEX_API_URL = BASE_API_URL + 'user-index/';
 export const ANALYZE_API_URL = BASE_API_URL + 'analyze/';
 export const CHECKIN_API_URL = BASE_API_URL + 'checkin/';
-
+export const USER_CONFIG_API_URL = BASE_API_URL + 'user-config/';
+export const FILE_API_URL = BASE_API_URL + 'files/';
 export type TemplateMapType = {
   [key: string]: {
     name: string;
@@ -102,6 +103,14 @@ export const SongListTemplateMap: TemplateMapType = {
       () => import('@/views/view/songListTemplate/DefaultSongListTemplate.vue')
     ))
   },
+  traditional: {
+    name: '列表 (较推荐',
+    settingName: 'Template.SongList.Traditional',
+    component: markRaw(defineAsyncComponent(
+      () =>
+        import('@/views/view/songListTemplate/TraditionalSongListTemplate.vue')
+    ))
+  },
   simple: {
     name: '简单',
     //settingName: 'Template.SongList.Simple',
@@ -109,14 +118,6 @@ export const SongListTemplateMap: TemplateMapType = {
       () => import('@/views/view/songListTemplate/SimpleSongListTemplate.vue')
     ))
   },
-  traditional: {
-    name: '列表',
-    settingName: 'Template.SongList.Traditional',
-    component: markRaw(defineAsyncComponent(
-      () =>
-        import('@/views/view/songListTemplate/TraditionalSongListTemplate.vue')
-    ))
-  }
 };
 
 export const IndexTemplateMap: TemplateMapType = {
diff --git a/src/data/fileUpload.ts b/src/data/fileUpload.ts
new file mode 100644
index 0000000..fa9b5c8
--- /dev/null
+++ b/src/data/fileUpload.ts
@@ -0,0 +1,92 @@
+import { UploadFileResponse, UserFileLocation, UserFileTypes } from '@/api/api-models';
+import { QueryPostAPI } from '@/api/query';
+import { FILE_API_URL } from '@/data/constants';
+
+/**
+ * 文件上传阶段
+ */
+export enum UploadStage {
+  Preparing = "准备上传",
+  Uploading = "上传中",
+  Success = "上传成功",
+  Failed = "上传失败"
+}
+
+/**
+ * 上传文件
+ * @param files 要上传的文件列表
+ * @param type 文件类型，可选，不指定时自动判断
+ * @param location 存储位置，默认本地
+ * @param onProgress 上传进度回调，返回上传阶段名称
+ * @returns 上传结果列表
+ */
+export async function uploadFiles(
+  files: File | File[],
+  type?: UserFileTypes,
+  location: UserFileLocation = UserFileLocation.Local,
+  onProgress?: (stage: string) => void
+): Promise<UploadFileResponse[]> {
+  try {
+    onProgress?.(UploadStage.Preparing);
+
+    const formData = new FormData();
+
+    // 支持单个文件或文件数组
+    if (Array.isArray(files)) {
+      files.forEach(file => {
+        formData.append('files', file);
+      });
+    } else {
+      formData.append('files', files);
+    }
+
+    if (type !== undefined) {
+      formData.append('type', type.toString());
+    }
+
+    formData.append('location', location.toString());
+
+    onProgress?.(UploadStage.Uploading);
+
+    const result = await QueryPostAPI<UploadFileResponse[]>(FILE_API_URL + 'upload', formData);
+
+    if (result.code === 200) {
+      onProgress?.(UploadStage.Success);
+      return result.data;
+    } else {
+      onProgress?.(UploadStage.Failed);
+      throw new Error(result.message || '上传失败');
+    }
+  } catch (error) {
+    onProgress?.(UploadStage.Failed);
+    console.error('文件上传错误:', error);
+    throw error;
+  }
+}
+
+/**
+ * 上传单个文件 (保留用于兼容性)
+ * @deprecated 请使用 uploadFiles 代替
+ */
+export async function uploadFile(
+  file: File,
+  type?: UserFileTypes,
+  location: UserFileLocation = UserFileLocation.Local,
+  onProgress?: (stage: string) => void
+): Promise<UploadFileResponse> {
+  const results = await uploadFiles(file, type, location, onProgress);
+  return results[0]; // 返回第一个结果
+}
+
+/**
+ * 上传多个文件 (保留用于兼容性)
+ * @deprecated 请使用 uploadFiles 代替
+ */
+export async function uploadMultipleFiles(
+  files: File[],
+  type?: UserFileTypes,
+  location: UserFileLocation = UserFileLocation.Local,
+  onProgress?: (stage: string) => void
+): Promise<UploadFileResponse[]> {
+  return uploadFiles(files, type, location, onProgress);
+}
\ No newline at end of file
diff --git a/src/views/manage/QuestionBoxManageView.vue b/src/views/manage/QuestionBoxManageView.vue
index 0ba689a..72d3ae2 100644
--- a/src/views/manage/QuestionBoxManageView.vue
+++ b/src/views/manage/QuestionBoxManageView.vue
@@ -634,14 +634,21 @@ watch(() => accountInfo.value?.settings?.questionBox?.saftyLevel, (newLevel) =>
                     </NFlex>
                   </template>
                   <!-- 问题内容 -->
-                  <template v-if="item.question?.image">
-                    <NImage
-                      :src="item.question.image"
-                      width="100"
-                      object-fit="cover"
-                      lazy
-                      style="border-radius: 4px; margin-bottom: 5px;"
-                    />
+                  <template v-if="item.questionImages && item.questionImages.length > 0">
+                    <NSpace
+                      vertical
+                      size="small"
+                    >
+                      <NImage
+                        v-for="(img, index) in item.questionImages"
+                        :key="index"
+                        :src="img.path"
+                        width="100"
+                        object-fit="cover"
+                        lazy
+                        style="border-radius: 4px; margin-bottom: 5px;"
+                      />
+                    </NSpace>
                     <br>
                   </template>
                   <NText>{{ item.question?.message }}</NText>
@@ -797,7 +804,13 @@ watch(() => accountInfo.value?.settings?.questionBox?.saftyLevel, (newLevel) =>
               >
                 允许未注册/匿名用户进行提问
               </NCheckbox>
-
+              <NCheckbox
+                v-model:checked="accountInfo.settings.questionBox.allowImageUpload"
+                :disabled="useQB.isLoading"
+                @update:checked="saveQuestionBoxSettings"
+              >
+                允许上传图片
+              </NCheckbox>
               <!-- 内容审查 -->
               <NDivider title-placement="left">
                 内容审查等级
diff --git a/src/views/manage/QuestionDisplayCard.vue b/src/views/manage/QuestionDisplayCard.vue
index 5ebff1b..591b84e 100644
--- a/src/views/manage/QuestionDisplayCard.vue
+++ b/src/views/manage/QuestionDisplayCard.vue
@@ -128,11 +128,14 @@ onUnmounted(() => {
             <div class="question-display-text">
               {{ question?.question.message }}
             </div>
-            <img
-              v-if="setting.showImage && question?.question.image"
-              class="question-display-image"
-              :src="question?.question.image"
-            >
+            <div v-if="setting.showImage && question?.questionImages && question.questionImages.length > 0" class="question-display-images">
+              <img
+                v-for="(img, index) in question.questionImages"
+                :key="index"
+                class="question-display-image"
+                :src="img.path"
+              >
+            </div>
           </div>
         </template>
         <div
@@ -186,10 +189,18 @@ onUnmounted(() => {
   white-space: pre-wrap;
 }
 
+.question-display-images {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  margin-top: 10px;
+}
+
 .question-display-image {
   max-width: 40%;
-  max-height: 40%;
-  margin: 0 auto;
+  max-height: 150px;
+  border-radius: 8px;
 }
 
 ::-webkit-scrollbar {
diff --git a/src/views/manage/SettingsManageView.vue b/src/views/manage/SettingsManageView.vue
index 6e27403..7618334 100644
--- a/src/views/manage/SettingsManageView.vue
+++ b/src/views/manage/SettingsManageView.vue
@@ -29,7 +29,7 @@
     TemplateMapType,
     USER_INDEX_API_URL,
   } from '@/data/constants';
-  import { ConfigItemDefinition } from '@/data/VTsuruTypes';
+  import { ConfigItemDefinition } from '@/data/VTsuruConfigTypes';
   import { Delete24Regular } from '@vicons/fluent';
   import {
     NAlert,
diff --git a/src/views/manage/point/PointManage.vue b/src/views/manage/point/PointManage.vue
index 664f9f3..2fd8d7b 100644
--- a/src/views/manage/point/PointManage.vue
+++ b/src/views/manage/point/PointManage.vue
@@ -1,21 +1,30 @@
 <script setup lang="ts">
-import { copyToClipboard, getImageUploadModel } from '@/Utils'
+import { copyToClipboard } from '@/Utils'
 import { DisableFunction, EnableFunction, useAccount } from '@/api/account'
-import { FunctionTypes, GoodsStatus, GoodsTypes, UploadPointGoodsModel, ResponsePointGoodModel, KeySelectionMode } from '@/api/api-models'
+import {
+  FunctionTypes,
+  GoodsStatus,
+  GoodsTypes,
+  KeySelectionMode,
+  ResponsePointGoodModel,
+  UploadPointGoodsModel,
+  UserFileLocation
+} from '@/api/api-models'
 import { QueryGetAPI, QueryPostAPI } from '@/api/query'
 import EventFetcherStatusCard from '@/components/EventFetcherStatusCard.vue'
 import PointGoodsItem from '@/components/manage/PointGoodsItem.vue'
-import { CN_HOST, CURRENT_HOST, FILE_BASE_URL, POINT_API_URL } from '@/data/constants'
+import { CURRENT_HOST, POINT_API_URL } from '@/data/constants'
+import { uploadFiles, UploadStage } from '@/data/fileUpload'
 import { useBiliAuth } from '@/store/useBiliAuth'
 import { Info24Filled } from '@vicons/fluent'
 import { useRouteHash } from '@vueuse/router'
-import { useStorage } from '@vueuse/core'
 import {
   FormItemRule,
   NAlert,
   NButton,
   NCheckbox,
   NDivider,
+  NDynamicTags,
   NEmpty,
   NFlex,
   NForm,
@@ -23,12 +32,12 @@ import {
   NGrid,
   NGridItem,
   NIcon,
-  NImage,
   NInput,
-  NInputNumber,
   NInputGroup,
+  NInputNumber,
   NModal,
   NPopconfirm,
+  NProgress,
   NRadioButton,
   NRadioGroup,
   NScrollbar,
@@ -41,10 +50,9 @@ import {
   NUpload,
   UploadFileInfo,
   useDialog,
-  useMessage,
-  NDynamicTags,
+  useMessage
 } from 'naive-ui'
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import PointOrderManage from './PointOrderManage.vue'
 import PointSettings from './PointSettings.vue'
 import PointUserManage from './PointUserManage.vue'
@@ -57,6 +65,8 @@ const formRef = ref()
 const isUpdating = ref(false)
 const isAllowedPrivacyPolicy = ref(false)
 const showAddGoodsModal = ref(false)
+const uploadProgress = ref(0)
+const isUploadingCover = ref(false)
 
 // 路由哈希处理
 const realHash = useRouteHash('goods', { mode: 'replace' })
@@ -71,7 +81,7 @@ const hash = computed({
 
 // 商品数据及模型
 const goods = ref<ResponsePointGoodModel[]>(await biliAuth.GetGoods(accountInfo.value?.id, message))
-const defaultGoodsModel = {
+const defaultGoodsModel = (): { goods: UploadPointGoodsModel; fileList: UploadFileInfo[] } => ({
   goods: {
     type: GoodsTypes.Virtual,
     status: GoodsStatus.Normal,
@@ -87,14 +97,24 @@ const defaultGoodsModel = {
     name: '',
     price: 0,
     tags: [],
-    description: ''
+    description: '',
+    cover: undefined,
   } as UploadPointGoodsModel,
   fileList: [],
-} as { goods: UploadPointGoodsModel; fileList: UploadFileInfo[] }
+})
 const currentGoodsModel = ref<{ goods: UploadPointGoodsModel; fileList: UploadFileInfo[] }>(
-  JSON.parse(JSON.stringify(defaultGoodsModel))
+  defaultGoodsModel()
 )
 
+// 监听 fileList 变化，确保 cover 和 fileList 同步
+watch(() => currentGoodsModel.value.fileList, (newFileList, oldFileList) => {
+  if (oldFileList && oldFileList.length > 0 && newFileList.length === 0) {
+    if (currentGoodsModel.value.goods.id && currentGoodsModel.value.goods.cover) {
+        currentGoodsModel.value.goods.cover = undefined
+    }
+  }
+}, { deep: true })
+
 // 计算属性
 const allowedYearOptions = computed(() => {
   return Array.from({ length: new Date().getFullYear() - 2024 + 1 }, (_, i) => 2024 + i).map((item) => ({
@@ -202,12 +222,45 @@ async function updateGoods(e: MouseEvent) {
   if (isUpdating.value || !formRef.value) return
   e.preventDefault()
   isUpdating.value = true
+  isUploadingCover.value = false
+  uploadProgress.value = 0
 
   try {
     await formRef.value.validate()
 
-    if (currentGoodsModel.value.fileList.length > 0) {
-      currentGoodsModel.value.goods.cover = await getImageUploadModel(currentGoodsModel.value.fileList)
+    const newFilesToUpload = currentGoodsModel.value.fileList.filter(f => f.file && f.status !== 'finished')
+    if (newFilesToUpload.length > 0 && newFilesToUpload[0].file) {
+      isUploadingCover.value = true
+      message.info('正在上传封面...')
+      const uploadResults = await uploadFiles(
+        [newFilesToUpload[0].file],
+        undefined,
+        UserFileLocation.Local,
+        (stage: string) => {
+          if (stage === UploadStage.Uploading) {
+            uploadProgress.value = 0
+          }
+        }
+      )
+      isUploadingCover.value = false
+      if (uploadResults && uploadResults.length > 0) {
+        currentGoodsModel.value.goods.cover = uploadResults[0]
+        message.success('封面上传成功')
+        const uploadedFileIndex = currentGoodsModel.value.fileList.findIndex(f => f.id === newFilesToUpload[0].id)
+        if (uploadedFileIndex > -1) {
+          currentGoodsModel.value.fileList[uploadedFileIndex] = {
+            ...currentGoodsModel.value.fileList[uploadedFileIndex],
+            id: uploadResults[0].id.toString(),
+            status: 'finished',
+            thumbnailUrl: uploadResults[0].path,
+            url: uploadResults[0].path
+          };
+        }
+      } else {
+        throw new Error('封面上传失败')
+      }
+    } else if (currentGoodsModel.value.fileList.length === 0 && currentGoodsModel.value.goods.id) {
+      currentGoodsModel.value.goods.cover = undefined
     }
 
     const { code, data, message: errMsg } = await QueryPostAPI<ResponsePointGoodModel>(
@@ -216,9 +269,9 @@ async function updateGoods(e: MouseEvent) {
     )
 
     if (code === 200) {
-      message.success('成功')
+      message.success('商品信息保存成功')
       showAddGoodsModal.value = false
-      currentGoodsModel.value = JSON.parse(JSON.stringify(defaultGoodsModel))
+      currentGoodsModel.value = defaultGoodsModel()
 
       const index = goods.value.findIndex(g => g.id === data.id)
       if (index >= 0) {
@@ -227,13 +280,15 @@ async function updateGoods(e: MouseEvent) {
         goods.value.push(data)
       }
     } else {
-      message.error('失败: ' + errMsg)
+      message.error('商品信息保存失败: ' + errMsg)
     }
-  } catch (err) {
-    console.error(err)
-    message.error(typeof err === 'string' ? `失败: ${err}` : '表单验证失败')
+  } catch (err: any) {
+    console.error(currentGoodsModel.value, err)
+    const errorMsg = err instanceof Error ? err.message : typeof err === 'string' ? err : '表单验证失败或上传出错'
+    message.error(`失败: ${errorMsg}`)
   } finally {
     isUpdating.value = false
+    isUploadingCover.value = false
   }
 }
 
@@ -241,23 +296,24 @@ function OnFileListChange(files: UploadFileInfo[]) {
   if (files.length === 1 && (files[0].file?.size ?? 0) > 10 * 1024 * 1024) {
     message.error('文件大小不能超过10MB')
     currentGoodsModel.value.fileList = []
+  } else {
+    currentGoodsModel.value.fileList = files
   }
 }
 
 function onUpdateClick(item: ResponsePointGoodModel) {
   currentGoodsModel.value = {
-    goods: {
+    goods: JSON.parse(JSON.stringify({
       ...item,
-      count: item.count,
-      cover: undefined,
-    },
+    })),
     fileList: item.cover
       ? [
         {
-          id: item.cover ?? 'cover',
-          thumbnailUrl: FILE_BASE_URL + item.cover,
-          name: '封面',
+          id: item.cover.id.toString(),
+          name: item.cover.name || '封面',
           status: 'finished',
+          url: item.cover.path,
+          thumbnailUrl: item.cover.path,
         },
       ]
       : [],
@@ -336,14 +392,15 @@ function onDeleteClick(item: ResponsePointGoodModel) {
 }
 
 function onModalOpen() {
-  if (currentGoodsModel.value.goods.id) {
+  if (!currentGoodsModel.value.goods.id) {
     resetGoods()
   }
   showAddGoodsModal.value = true
 }
 
 function resetGoods() {
-  currentGoodsModel.value = JSON.parse(JSON.stringify(defaultGoodsModel))
+  currentGoodsModel.value = defaultGoodsModel()
+  isAllowedPrivacyPolicy.value = false
 }
 
 onMounted(() => { })
@@ -613,6 +670,8 @@ onMounted(() => { })
     style="width: 600px; max-width: 90%"
     title="添加/修改礼物信息"
     class="goods-modal"
+    :mask-closable="!isUpdating && !isUploadingCover"
+    :close-on-esc="!isUpdating && !isUploadingCover"
   >
     <template #header-extra>
       <NPopconfirm
@@ -637,7 +696,7 @@ onMounted(() => { })
       >
         <NForm
           ref="formRef"
-          :model="currentGoodsModel"
+          :model="currentGoodsModel.goods"
           :rules="rules"
           style="width: 100%"
         >
@@ -746,28 +805,36 @@ onMounted(() => { })
               vertical
               :gap="8"
             >
-              <NFlex
-                v-if="currentGoodsModel.goods.cover"
-                :gap="8"
-                align="center"
-              >
-                <NText>当前封面: </NText>
-                <NImage
-                  :src="FILE_BASE_URL + currentGoodsModel.goods.cover"
-                  height="50"
-                  object-fit="cover"
-                />
-              </NFlex>
               <NUpload
                 v-model:file-list="currentGoodsModel.fileList"
                 :max="1"
                 accept=".png,.jpg,.jpeg,.gif,.svg,.webp,.ico,.bmp,.tif,.tiff,.jfif,.jpe,.jp,.psd,."
                 list-type="image-card"
                 :default-upload="false"
+                :disabled="isUploadingCover"
                 @update:file-list="OnFileListChange"
               >
-                + {{ currentGoodsModel.goods.cover ? '更换' : '上传' }}封面
+                <NFlex
+                  vertical
+                  align="center"
+                  justify="center"
+                  style="width: 100%; height: 100%;"
+                >
+                  <NIcon
+                    size="24"
+                    :depth="3"
+                  />
+                  <span>{{ currentGoodsModel.goods.cover ? '更换' : '上传' }}封面</span>
+                  <span style="font-size: 12px; color: grey">(小于10MB)</span>
+                </NFlex>
               </NUpload>
+              <NProgress
+                v-if="isUploadingCover"
+                type="line"
+                :percentage="uploadProgress"
+                :indicator-placement="'inside'"
+                processing
+              />
             </NFlex>
           </NFormItem>
 
@@ -779,7 +846,7 @@ onMounted(() => { })
             兑换规则
           </NDivider>
           <NFormItem
-            path="goods.type"
+            path="type"
             label="礼物类型"
           >
             <NRadioGroup v-model:value="currentGoodsModel.goods.type">
@@ -1066,10 +1133,12 @@ onMounted(() => { })
         <NButton
           type="primary"
           size="large"
-          :loading="isUpdating"
+          :loading="isUpdating || isUploadingCover"
+          :disabled="isUploadingCover"
           @click="updateGoods"
         >
-          {{ currentGoodsModel.goods.id ? '修改' : '创建' }}
+          <span v-if="isUploadingCover">正在上传封面...</span>
+          <span v-else>{{ currentGoodsModel.goods.id ? '修改' : '创建' }}</span>
         </NButton>
       </NFlex>
     </template>
@@ -1157,4 +1226,12 @@ onMounted(() => { })
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;
 }
+
+.goods-modal :deep(.n-upload-trigger.n-upload-trigger--image-card) {
+    width: 104px;
+    height: 104px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
 </style>
diff --git a/src/views/obs/blivechat/AuthorBadge.vue b/src/views/obs/blivechat/AuthorBadge.vue
index 6af2e7b..ddc6aa1 100644
--- a/src/views/obs/blivechat/AuthorBadge.vue
+++ b/src/views/obs/blivechat/AuthorBadge.vue
@@ -1,20 +1,39 @@
 <template>
   <yt-live-chat-author-badge-renderer :type="authorTypeText">
-    <NTooltip :content="readableAuthorTypeText" placement="top">
+    <NTooltip
+      :content="readableAuthorTypeText"
+      placement="top"
+    >
       <template #trigger>
-        <div id="image" class="style-scope yt-live-chat-author-badge-renderer">
-          <yt-icon v-if="isAdmin" class="style-scope yt-live-chat-author-badge-renderer">
-            <svg viewBox="0 0 16 16" class="style-scope yt-icon" preserveAspectRatio="xMidYMid meet" focusable="false"
-              style="pointer-events: none; display: block; width: 100%; height: 100%;">
+        <div
+          id="image"
+          class="style-scope yt-live-chat-author-badge-renderer"
+        >
+          <yt-icon
+            v-if="isAdmin"
+            class="style-scope yt-live-chat-author-badge-renderer"
+          >
+            <svg
+              viewBox="0 0 16 16"
+              class="style-scope yt-icon"
+              preserveAspectRatio="xMidYMid meet"
+              focusable="false"
+              style="pointer-events: none; display: block; width: 100%; height: 100%;"
+            >
               <g class="style-scope yt-icon">
-                <path class="style-scope yt-icon"
-                  d="M9.64589146,7.05569719 C9.83346524,6.562372 9.93617022,6.02722257 9.93617022,5.46808511 C9.93617022,3.00042984 7.93574038,1 5.46808511,1 C4.90894765,1 4.37379823,1.10270499 3.88047304,1.29027875 L6.95744681,4.36725249 L4.36725255,6.95744681 L1.29027875,3.88047305 C1.10270498,4.37379824 1,4.90894766 1,5.46808511 C1,7.93574038 3.00042984,9.93617022 5.46808511,9.93617022 C6.02722256,9.93617022 6.56237198,9.83346524 7.05569716,9.64589147 L12.4098057,15 L15,12.4098057 L9.64589146,7.05569719 Z">
-                </path>
+                <path
+                  class="style-scope yt-icon"
+                  d="M9.64589146,7.05569719 C9.83346524,6.562372 9.93617022,6.02722257 9.93617022,5.46808511 C9.93617022,3.00042984 7.93574038,1 5.46808511,1 C4.90894765,1 4.37379823,1.10270499 3.88047304,1.29027875 L6.95744681,4.36725249 L4.36725255,6.95744681 L1.29027875,3.88047305 C1.10270498,4.37379824 1,4.90894766 1,5.46808511 C1,7.93574038 3.00042984,9.93617022 5.46808511,9.93617022 C6.02722256,9.93617022 6.56237198,9.83346524 7.05569716,9.64589147 L12.4098057,15 L15,12.4098057 L9.64589146,7.05569719 Z"
+                />
               </g>
             </svg>
           </yt-icon>
-          <img v-else :src="`${fileServerUrl}/blivechat/icons/guard-level-${privilegeType}.png`"
-            class="style-scope yt-live-chat-author-badge-renderer" :alt="readableAuthorTypeText">
+          <img
+            v-else
+            :src="`${fileServerUrl}/blivechat/icons/guard-level-${privilegeType}.png`"
+            class="style-scope yt-live-chat-author-badge-renderer"
+            :alt="readableAuthorTypeText"
+          >
         </div>
       </template>
       {{ readableAuthorTypeText }}
diff --git a/src/views/open_live/ReadDanmaku.vue b/src/views/open_live/ReadDanmaku.vue
index 98de769..1b2caf9 100644
--- a/src/views/open_live/ReadDanmaku.vue
+++ b/src/views/open_live/ReadDanmaku.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { copyToClipboard } from '@/Utils'
-import { useAccount } from '@/api/account'
+import { DownloadConfig, UploadConfig, useAccount } from '@/api/account'
 import { EventDataTypes, EventModel, OpenLiveInfo } from '@/api/api-models'
-import { QueryGetAPI, QueryPostAPI } from '@/api/query'
-import { FETCH_API, VTSURU_API_URL } from '@/data/constants'
+import { FETCH_API } from '@/data/constants'
 import { useDanmakuClient } from '@/store/useDanmakuClient'
 import { Info24Filled, Mic24Filled } from '@vicons/fluent'
 import { useStorage } from '@vueuse/core'
@@ -456,38 +455,23 @@ function stopSpeech() {
   message.success('已停止监听')
 }
 async function uploadConfig() {
-  await QueryPostAPI(VTSURU_API_URL + 'set-config', {
-    name: 'Speech',
-    json: JSON.stringify(settings.value),
-  })
-    .then((data) => {
-      if (data.code == 200) {
-        message.success('已保存至服务器')
-      } else {
-        message.error('保存失败: ' + data.message)
-      }
-    })
-    .catch((err) => {
-      message.error('保存失败')
-    })
+  const result = await UploadConfig('Speech', settings.value)
+  if (result) {
+    message.success('已保存至服务器')
+  } else {
+    message.error('保存失败')
+  }
 }
 async function downloadConfig() {
-  await QueryGetAPI<string>(VTSURU_API_URL + 'get-config', {
-    name: 'Speech',
-  })
-    .then((data) => {
-      if (data.code == 200) {
-        settings.value = JSON.parse(data.data)
-        message.success('已获取配置文件')
-      } else if (data.code == 404) {
-        message.error('未上传配置文件')
-      } else {
-        message.error('获取失败: ' + data.message)
-      }
-    })
-    .catch((err) => {
-      message.error('获取失败')
-    })
+  const result = await DownloadConfig<SpeechSettings>('Speech')
+  if (result.status === 'success' && result.data) {
+    settings.value = result.data
+    message.success('已获取配置文件')
+  } else if (result.status === 'notfound') {
+    message.error('未上传配置文件')
+  } else {
+    message.error('获取失败: ' + result.msg)
+  }
 }
 function test(type: EventDataTypes) {
   switch (type) {
diff --git a/src/views/view/QuestionBoxView.vue b/src/views/view/QuestionBoxView.vue
index 7250c54..6aa19f4 100644
--- a/src/views/view/QuestionBoxView.vue
+++ b/src/views/view/QuestionBoxView.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { useAccount } from '@/api/account'
-import { QAInfo, UserInfo } from '@/api/api-models'
+import { QAInfo, UserInfo, Setting_QuestionBox, UploadFileResponse } from '@/api/api-models'
 import { QueryGetAPI, QueryPostAPI } from '@/api/query'
-import { AVATAR_URL, QUESTION_API_URL, TURNSTILE_KEY } from '@/data/constants'
+import { AVATAR_URL, QUESTION_API_URL, TURNSTILE_KEY, FILE_API_URL } from '@/data/constants'
+import { uploadFiles, UploadStage } from '@/data/fileUpload'
 import GraphemeSplitter from 'grapheme-splitter'
 import {
   NAlert,
@@ -22,122 +23,298 @@ import {
   NText,
   NTime,
   NTooltip,
-  NUpload,
-  UploadFileInfo,
+  NSpin,
+  NIcon,
   useMessage,
 } from 'naive-ui'
+import { AddCircle24Regular, DismissCircle24Regular } from '@vicons/fluent'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import VueTurnstile from 'vue-turnstile'
 import { useRoute } from 'vue-router'
+import { getUserAvatarUrl } from '@/Utils'
 
 const { biliInfo, userInfo } = defineProps<{
   biliInfo: any | undefined
   userInfo: UserInfo | undefined
 }>()
 
-// 状态变量
+// 基础状态变量
 const message = useMessage()
 const accountInfo = useAccount()
-const questionMessage = ref('') // 提问内容
-const fileList = ref<UploadFileInfo[]>([]) // 上传图片列表
-const publicQuestions = ref<QAInfo[]>([]) // 公开提问列表
-const tags = ref<string[]>([]) // 标签列表
-const selectedTag = ref<string | null>(null) // 选中的标签
-const isAnonymous = ref(true) // 是否匿名提问
-const isSending = ref(false) // 是否正在发送
-const isGetting = ref(true) // 是否正在获取数据
-
-// 验证码相关
-const token = ref('')
-const turnstile = ref()
 const route = useRoute()
-
-// 防刷控制
-const nextSendQuestionTime = ref(Date.now())
-const minSendQuestionTime = 30 * 1000 // 30秒冷却时间
-
-// 字符分割器(用于正确计算表情符号等Unicode字符)
 const splitter = new GraphemeSplitter()
 
-// 计算属性
-const isSelf = computed(() => {
-  return userInfo?.id === accountInfo.value?.id
-})
+// 问题相关状态
+const questionMessage = ref('')
+const publicQuestions = ref<QAInfo[]>([])
+const tags = ref<string[]>([])
+const selectedTag = ref<string | null>(null)
+const isAnonymous = ref(true)
+const isSending = ref(false)
+const isGetting = ref(true)
+const token = ref('')
+const turnstile = ref()
+const nextSendQuestionTime = ref(Date.now())
+const minSendQuestionTime = 30 * 1000
 
-// 计算字符数量
+// 图片上传相关状态
+const targetUserSetting = ref<Setting_QuestionBox | null>(null)
+const allowUploadImage = computed(() => userInfo?.extra?.allowQuestionBoxUploadImage ?? false)
+const anonymousImageToken = ref<string | null>(null)
+const anonymousImagePreviewUrl = ref<string | null>(null)
+const isUploadingAnonymousImage = ref(false)
+const loggedInSelectedFiles = ref<File[]>([])
+const loggedInImagePreviewUrls = ref<string[]>([])
+const MAX_LOGGED_IN_IMAGES = 5
+const ALLOWED_IMAGE_TYPES = ['image/png', 'image/jpeg', 'image/gif', 'image/webp', 'image/svg+xml', 'image/x-icon']
+const MAX_FILE_SIZE = 10 * 1024 * 1024 // 10MB
+
+// 计算属性
+const isSelf = computed(() => userInfo?.id === accountInfo.value?.id)
+const isUserLoggedIn = computed(() => !!accountInfo.value?.id)
+
+// 辅助函数
 function countGraphemes(value: string) {
   return splitter.countGraphemes(value)
 }
 
-// 发送提问
-async function SendQuestion() {
-  // 内容长度检查
-  if (countGraphemes(questionMessage.value) < 3) {
-    message.error('内容最少需要3个字')
-    return
+// 图片处理公共方法
+function validateImageFile(file: File): {valid: boolean, message?: string} {
+  if (file.size > MAX_FILE_SIZE) {
+    return {valid: false, message: '文件大小不能超过10MB'};
   }
 
-  // 冷却时间检查
-  if (nextSendQuestionTime.value > Date.now()) {
-    message.error('冷却中, 剩余 ' + Math.ceil((nextSendQuestionTime.value - Date.now()) / 1000) + '秒')
-    return
+  if (!ALLOWED_IMAGE_TYPES.includes(file.type)) {
+    return {valid: false, message: '只支持上传 PNG, JPG, GIF, WEBP, SVG, ICO 格式的图片'};
   }
 
-  isSending.value = true
-  await QueryPostAPI<QAInfo>(
-    QUESTION_API_URL + 'send',
-    {
-      Target: userInfo?.id,
-      IsAnonymous: !accountInfo.value || isAnonymous.value,
-      Message: questionMessage.value,
-      ImageBase64: fileList.value?.length > 0 ? await getBase64(fileList.value[0].file) : undefined,
-      Tag: selectedTag.value,
-    },
-    [['Turnstile', token.value]],
-  )
-    .then((data) => {
-      if (data.code == 200) {
-        message.success('成功发送棉花糖')
-        questionMessage.value = ''
-        fileList.value = []
-        nextSendQuestionTime.value = Date.now() + minSendQuestionTime
-      } else {
-        message.error(data.message)
-      }
-    })
-    .catch((err) => {
-      message.error('发送失败')
-    })
-    .finally(() => {
-      isSending.value = false
-      turnstile.value?.reset()
-    })
+  return {valid: true};
 }
 
-// 转换文件为Base64
-function getBase64(file: File | undefined | null) {
-  if (!file) return null
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader()
-    reader.readAsDataURL(file)
-    reader.onload = () => resolve(reader.result?.toString().split(',')[1])
-    reader.onerror = (error) => reject(error)
-  })
+function clearImageURLs(urls: string[]) {
+  urls.forEach(url => {
+    if (url) URL.revokeObjectURL(url);
+  });
 }
 
-// 文件列表变更处理
-function OnFileListChange(files: UploadFileInfo[]) {
-  if (files.length == 1) {
-    const file = files[0]
-    // 文件大小检查
-    if ((file.file?.size ?? 0) > 10 * 1024 * 1024) {
-      message.error('文件大小不能超过10MB')
-      fileList.value = []
+// 匿名图片上传
+async function uploadAnonymousImage(file: File) {
+  if (!userInfo?.id) {
+    message.error('无法获取目标用户信息');
+    return;
+  }
+
+  const validation = validateImageFile(file);
+  if (!validation.valid) {
+    message.error(validation.message || '图片上传失败');
+    return;
+  }
+
+  isUploadingAnonymousImage.value = true;
+  removeAnonymousImage();
+
+  const formData = new FormData();
+  formData.append('file', file);
+  formData.append('targetUserId', userInfo.id.toString());
+
+  try {
+    const data = await QueryPostAPI<string>(FILE_API_URL + 'upload-anonymous', formData);
+    if (data.code === 200 && data.data) {
+      anonymousImageToken.value = data.data;
+      const url = URL.createObjectURL(file);
+      anonymousImagePreviewUrl.value = url;
+      message.success('匿名图片准备就绪');
+    } else {
+      message.error(data.message || '匿名图片上传失败');
+      removeAnonymousImage();
     }
+  } catch (err: any) {
+    message.error('匿名图片上传失败: ' + (err.message || err));
+    removeAnonymousImage();
+  } finally {
+    isUploadingAnonymousImage.value = false;
+  }
+}
+
+function handleAnonymousFileSelect(event: Event) {
+  const input = event.target as HTMLInputElement;
+  if (input.files && input.files.length > 0) {
+    const file = input.files[0];
+
+    // 如果已经有图片，提示不能多选
+    if (anonymousImageToken.value) {
+      message.warning('匿名模式下只能上传一张图片');
+      input.value = '';
+      return;
+    }
+
+    uploadAnonymousImage(file);
+    input.value = '';
+  }
+}
+
+function removeAnonymousImage() {
+  if (anonymousImagePreviewUrl.value) {
+    URL.revokeObjectURL(anonymousImagePreviewUrl.value as string);
+    anonymousImagePreviewUrl.value = null;
+  }
+  anonymousImageToken.value = null;
+}
+
+// 已登录用户图片上传
+function handleLoggedInFileSelect(event: Event) {
+  const input = event.target as HTMLInputElement;
+  if (input.files && input.files.length > 0) {
+    // 处理多个文件 - 支持多选
+    const newFiles = Array.from(input.files);
+
+    // 检查每个文件
+    for (const file of newFiles) {
+      // 验证文件类型和大小
+      const validation = validateImageFile(file);
+      if (!validation.valid) {
+        message.error(validation.message || '图片上传失败');
+        continue;
+      }
+
+      // 检查是否超出最大数量限制
+      if (loggedInSelectedFiles.value.length >= MAX_LOGGED_IN_IMAGES) {
+        message.warning(`最多只能上传${MAX_LOGGED_IN_IMAGES}张图片`);
+        break;
+      }
+
+      // 检查文件是否重复（通过文件名、大小和最后修改时间判断）
+      // 避免重复选择相同图片
+      const isDuplicate = loggedInSelectedFiles.value.some(existingFile =>
+        existingFile.name === file.name &&
+        existingFile.size === file.size &&
+        existingFile.lastModified === file.lastModified
+      );
+
+      if (isDuplicate) {
+        message.warning(`文件"${file.name}"已存在，不会重复添加`);
+        continue;
+      }
+
+      // 添加到已选文件列表
+      loggedInSelectedFiles.value.push(file);
+      const url = URL.createObjectURL(file);
+      loggedInImagePreviewUrls.value.push(url);
+    }
+
+    // 清空输入框，允许重新选择文件
+    input.value = '';
+  }
+}
+
+function removeLoggedInImage(index: number) {
+  const url = loggedInImagePreviewUrls.value[index];
+  if (url) {
+    URL.revokeObjectURL(url as string);
+  }
+  loggedInImagePreviewUrls.value.splice(index, 1);
+  loggedInSelectedFiles.value.splice(index, 1);
+}
+
+function clearAllLoggedInImages() {
+  loggedInImagePreviewUrls.value.forEach(url => {
+    if (url) URL.revokeObjectURL(url as string);
+  });
+  loggedInImagePreviewUrls.value = [];
+  loggedInSelectedFiles.value = [];
+}
+
+// API 交互方法
+async function SendQuestion() {
+  if (countGraphemes(questionMessage.value) < 3) {
+    message.error('内容最少需要3个字');
+    return;
+  }
+
+  if (nextSendQuestionTime.value > Date.now()) {
+    message.error('冷却中, 剩余 ' + Math.ceil((nextSendQuestionTime.value - Date.now()) / 1000) + '秒');
+    return;
+  }
+
+  isSending.value = true;
+  let uploadedFileIds: number[] = [];
+  let imagePayload: { id: number }[] | undefined = undefined;
+  let tokenPayload: string | undefined = undefined;
+
+  try {
+    // 处理图片上传
+    if (!isUserLoggedIn.value) {
+      if (anonymousImageToken.value) {
+        tokenPayload = anonymousImageToken.value;
+      }
+    } else if (loggedInSelectedFiles.value.length > 0) {
+      message.info('正在上传图片...');
+
+      // 上传多张图片
+      const uploadPromises = loggedInSelectedFiles.value.map(file =>
+        uploadFiles(file, undefined, undefined, (stage) => {
+          console.log('上传阶段:', stage);
+        })
+      );
+
+      const uploadResults = await Promise.all(uploadPromises);
+
+      // 提取所有上传的文件ID
+      uploadedFileIds = uploadResults
+        .filter(result => result && result.length > 0)
+        .map(result => result[0].id);
+
+      if (uploadedFileIds.length > 0) {
+        imagePayload = uploadedFileIds.map(id => ({ id }));
+        message.success('图片上传成功');
+      } else if (loggedInSelectedFiles.value.length > 0) {
+        throw new Error('图片上传失败，未返回文件信息');
+      }
+    }
+
+    // 发送问题
+    const payload = {
+      Target: userInfo?.id,
+      IsAnonymous: !isUserLoggedIn.value || isAnonymous.value,
+      Message: questionMessage.value,
+      Tag: selectedTag.value,
+      Images: imagePayload,
+      ImageTokens: tokenPayload ? [tokenPayload] : undefined,
+    };
+
+    const data = await QueryPostAPI<QAInfo>(
+      QUESTION_API_URL + 'send',
+      payload,
+      [['Turnstile', token.value]],
+    );
+
+    if (data.code == 200) {
+      message.success('成功发送棉花糖');
+      questionMessage.value = '';
+      removeAnonymousImage();
+      clearAllLoggedInImages();
+      nextSendQuestionTime.value = Date.now() + minSendQuestionTime;
+      getPublicQuestions();
+    } else {
+      message.error(data.message || '发送失败');
+      if (tokenPayload && (data.message.includes('token') || data.code === 400)) {
+        removeAnonymousImage();
+      }
+    }
+  } catch (err: any) {
+    message.error('发送失败: ' + (err.message || err));
+    if (loggedInSelectedFiles.value.length > 0 && uploadedFileIds.length === 0) {
+      clearAllLoggedInImages();
+    }
+    if (tokenPayload && (err.message?.includes('token'))) {
+      removeAnonymousImage();
+    }
+  } finally {
+    isSending.value = false;
+    turnstile.value?.reset();
   }
 }
 
-// 获取公开提问列表
 function getPublicQuestions() {
   isGetting.value = true
   QueryGetAPI<QAInfo[]>(QUESTION_API_URL + 'get-public', {
@@ -158,63 +335,53 @@ function getPublicQuestions() {
     })
 }
 
-// 获取标签列表
-function getTags() {
-  isGetting.value = true
-  QueryGetAPI<string[]>(QUESTION_API_URL + 'get-tags', {
-    id: userInfo?.id,
-  })
-    .then((data) => {
-      if (data.code == 200) {
-        // 处理标签数据
-        if (userInfo?.id == accountInfo.value?.id) {
-          // 自己查看自己的标签时，需要从对象中提取名称
-          tags.value = data.data.map((tag: any) => {
-            // 直接访问name属性，避免不必要的JSON序列化和解析
-            return typeof tag === 'object' && tag !== null ? tag.name : tag
-          })
-        } else {
-          // 查看他人标签时直接使用返回数据
-          tags.value = data.data
-        }
+async function getTagsAndSettings() {
+  if (!userInfo?.id) return;
+  isGetting.value = true;
+  try {
+    const tagsData = await QueryGetAPI<string[]>(QUESTION_API_URL + 'get-tags', { id: userInfo.id });
+
+    if (tagsData.code == 200) {
+      if (userInfo?.id == accountInfo.value?.id) {
+        tags.value = tagsData.data.map((tag: any) =>
+          typeof tag === 'object' && tag !== null ? tag.name : tag
+        );
       } else {
-        message.error('获取标签失败:' + data.message)
+        tags.value = tagsData.data;
       }
-    })
-    .catch((err) => {
-      message.error('获取标签失败: ' + err)
-    })
-    .finally(() => {
-      isGetting.value = false
-      // 检查 URL 参数中的 tag
       const tagFromQuery = route.query.tag as string | undefined
       if (tagFromQuery && tags.value.includes(tagFromQuery)) {
         selectedTag.value = tagFromQuery
       }
-    })
+    } else {
+      message.error('获取标签失败:' + tagsData.message);
+    }
+  } catch (err: any) {
+    message.error('获取信息失败: ' + (err.message || err));
+  } finally {
+    isGetting.value = false;
+  }
 }
 
-// 标签选择处理
 function onSelectTag(tag: string) {
-  // 切换选中状态
   selectedTag.value = selectedTag.value === tag ? null : tag
 }
 
 // 生命周期钩子
 onMounted(() => {
   getPublicQuestions()
-  getTags()
+  getTagsAndSettings()
 })
 
 onUnmounted(() => {
-  // 清理验证码资源
   turnstile.value?.remove()
+  removeAnonymousImage();
+  clearAllLoggedInImages();
 })
 </script>
 
 <template>
   <div class="question-box-container">
-    <!-- 提问表单 -->
     <transition
       name="fade-slide-down"
       appear
@@ -256,7 +423,7 @@ onUnmounted(() => {
             </NCard>
           </transition>
 
-          <!-- 提问内容区域 -->
+          <!-- 问题输入区域 -->
           <div class="question-input-area">
             <NInput
               v-model:value="questionMessage"
@@ -268,42 +435,172 @@ onUnmounted(() => {
               class="question-textarea"
               placeholder="在这里输入您的问题..."
             />
-            <transition
-              name="fade-scale"
-            >
-              <NUpload
-                v-model:file-list="fileList"
-                :max="1"
-                accept=".png,.jpg,.jpeg,.gif,.svg,.webp,.ico"
-                list-type="image-card"
-                :disabled="!accountInfo.id || isSelf"
-                :default-upload="false"
-                class="image-upload"
-                @update:file-list="OnFileListChange"
-              >
-                <div class="upload-trigger">
-                  <div class="upload-icon">
-                    +
+          </div>
+
+          <!-- 图片上传区域 - 重构为更简洁的条件块 -->
+          <div class="image-upload-container">
+            <!-- 已登录用户图片上传 -->
+            <template v-if="isUserLoggedIn && !isSelf">
+              <NSpin :show="isSending && loggedInSelectedFiles.length > 0">
+                <NCard
+                  size="small"
+                  class="image-upload-card"
+                >
+                  <div class="upload-header">
+                    <NText class="upload-title">
+                      图片 (最多{{ MAX_LOGGED_IN_IMAGES }}张)
+                    </NText>
                   </div>
-                  <span>上传图片</span>
-                </div>
-              </NUpload>
-            </transition>
+
+                  <div class="upload-images-grid">
+                    <div
+                      v-for="(url, index) in loggedInImagePreviewUrls"
+                      :key="index"
+                      class="upload-image-item"
+                    >
+                      <div class="image-preview-wrapper">
+                        <NImage
+                          :src="url"
+                          object-fit="cover"
+                          class="upload-preview-image"
+                        />
+                        <NButton
+                          circle
+                          size="tiny"
+                          type="error"
+                          class="remove-image-btn"
+                          @click="removeLoggedInImage(index)"
+                        >
+                          <template #icon>
+                            <NIcon :component="DismissCircle24Regular" />
+                          </template>
+                        </NButton>
+                      </div>
+                    </div>
+
+                    <div
+                      v-if="loggedInSelectedFiles.length < MAX_LOGGED_IN_IMAGES"
+                      class="upload-add-item"
+                      @click="($refs.loggedInFileInput as HTMLInputElement)?.click()"
+                    >
+                      <NIcon
+                        :component="AddCircle24Regular"
+                        class="add-icon"
+                      />
+                    </div>
+                  </div>
+
+                  <input
+                    ref="loggedInFileInput"
+                    type="file"
+                    accept=".png,.jpg,.jpeg,.gif,.svg,.webp,.ico"
+                    style="display: none;"
+                    multiple
+                    @change="handleLoggedInFileSelect"
+                  >
+                </NCard>
+              </NSpin>
+            </template>
+
+            <!-- 匿名用户图片上传 -->
+            <template v-else-if="!isUserLoggedIn && !isSelf && allowUploadImage">
+              <NSpin :show="isUploadingAnonymousImage">
+                <NCard
+                  size="small"
+                  class="image-upload-card"
+                >
+                  <div class="upload-header">
+                    <NText class="upload-title">
+                      匿名图片
+                    </NText>
+                  </div>
+
+                  <div class="anonymous-upload-container">
+                    <template v-if="!anonymousImageToken">
+                      <div
+                        class="anonymous-upload-btn"
+                        @click="($refs.anonymousFileInput as HTMLInputElement)?.click()"
+                      >
+                        <NIcon
+                          :component="AddCircle24Regular"
+                          class="add-icon"
+                        />
+                      </div>
+                    </template>
+                    <template v-else>
+                      <div class="image-preview-wrapper">
+                        <NImage
+                          v-if="anonymousImagePreviewUrl"
+                          :src="anonymousImagePreviewUrl"
+                          object-fit="cover"
+                          class="upload-preview-image"
+                        />
+                        <NButton
+                          circle
+                          size="tiny"
+                          type="error"
+                          class="remove-image-btn"
+                          @click="removeAnonymousImage"
+                        >
+                          <template #icon>
+                            <NIcon :component="DismissCircle24Regular" />
+                          </template>
+                        </NButton>
+                      </div>
+                    </template>
+                  </div>
+
+                  <input
+                    ref="anonymousFileInput"
+                    type="file"
+                    accept=".png,.jpg,.jpeg,.gif,.svg,.webp,.ico"
+                    style="display: none;"
+                    @change="handleAnonymousFileSelect"
+                  >
+                </NCard>
+              </NSpin>
+            </template>
+
+            <!-- 未开启匿名图片上传提示 -->
+            <template v-else-if="!isUserLoggedIn && !isSelf && !allowUploadImage && targetUserSetting !== null">
+              <NTooltip>
+                <template #trigger>
+                  <NCard
+                    size="small"
+                    class="image-upload-card upload-disabled"
+                  >
+                    <div class="upload-header">
+                      <NText class="upload-title">
+                        图片
+                      </NText>
+                    </div>
+                    <div class="disabled-container">
+                      <NText depth="3">
+                        未开启匿名图片上传
+                      </NText>
+                    </div>
+                  </NCard>
+                </template>
+                主播不允许上传图片
+              </NTooltip>
+            </template>
           </div>
 
           <NDivider class="form-divider" />
 
-          <!-- 提示信息 -->
+          <!-- 提示区域 - 合并条件 -->
           <transition
             name="fade"
             appear
           >
             <NAlert
-              v-if="!accountInfo.id && !isSelf"
-              type="warning"
+              v-if="!isUserLoggedIn && !isSelf"
+              type="info"
               class="login-alert"
             >
-              只有注册用户才能够上传图片
+              {{ !allowUploadImage && targetUserSetting !== null ?
+                '登录后才能上传图片，或该用户未允许匿名上传图片。' :
+                allowUploadImage ? '当前为匿名状态，图片上传后将无法更改。' : '' }}
             </NAlert>
           </transition>
 
@@ -313,7 +610,7 @@ onUnmounted(() => {
             appear
           >
             <NSpace
-              v-if="accountInfo.id"
+              v-if="isUserLoggedIn"
               vertical
               class="anonymous-option"
             >
@@ -329,7 +626,7 @@ onUnmounted(() => {
           <!-- 操作按钮 -->
           <div class="action-buttons">
             <NButton
-              :disabled="isSelf"
+              :disabled="isSelf || isUploadingAnonymousImage"
               type="primary"
               :loading="isSending || !token"
               class="send-button"
@@ -338,7 +635,7 @@ onUnmounted(() => {
               发送
             </NButton>
             <NButton
-              :disabled="isSelf || !accountInfo.id"
+              :disabled="isSelf || !isUserLoggedIn"
               type="info"
               class="my-questions-button"
               @click="$router.push({ name: 'manage-questionBox', query: { send: '1' } })"
@@ -347,7 +644,7 @@ onUnmounted(() => {
             </NButton>
           </div>
 
-          <!-- 验证码 -->
+          <!-- 验证组件 -->
           <div class="turnstile-container">
             <VueTurnstile
               ref="turnstile"
@@ -357,7 +654,7 @@ onUnmounted(() => {
             />
           </div>
 
-          <!-- 错误提示 -->
+          <!-- 自己提示 -->
           <transition
             name="fade-slide-up"
             appear
@@ -374,7 +671,7 @@ onUnmounted(() => {
       </NCard>
     </transition>
 
-    <!-- 公开回复列表 -->
+    <!-- 公开提问列表 -->
     <transition
       name="fade"
       appear
@@ -413,9 +710,44 @@ onUnmounted(() => {
                     align="center"
                     class="question-header"
                   >
+                    <NTooltip v-if="!item.isAnonymous">
+                      <template #trigger>
+                        <NAvatar
+                          v-if="item.sender?.id"
+                          :src="getUserAvatarUrl(item.sender.id)"
+                          round
+                          size="small"
+                          class="sender-avatar"
+                          :img-props="{ referrerpolicy: 'no-referrer' }"
+                        />
+                        <NAvatar
+                          v-else
+                          round
+                          size="small"
+                          class="sender-avatar"
+                        >
+                          ?
+                        </NAvatar>
+                      </template>
+                      {{ item.sender?.name || '未知用户' }}
+                    </NTooltip>
+                    <NTooltip v-else>
+                      <template #trigger>
+                        <NAvatar
+                          round
+                          size="small"
+                          class="sender-avatar"
+                        >
+                          匿
+                        </NAvatar>
+                      </template>
+                      匿名用户
+                    </NTooltip>
+
                     <NText
                       depth="3"
                       class="time-text"
+                      style="margin-left: 8px;"
                     >
                       <NTooltip>
                         <template #trigger>
@@ -444,19 +776,29 @@ onUnmounted(() => {
 
                 <!-- 问题内容 -->
                 <NCard class="question-content">
-                  <div class="question-message">
+                  <div
+                    v-if="item.question.message"
+                    class="question-message"
+                  >
                     {{ item.question.message }}
                   </div>
                   <div
-                    v-if="item.question.image"
+                    v-if="item.questionImages && item.questionImages.length > 0"
                     class="question-image-container"
                   >
-                    <NImage
-                      :src="item.question.image"
-                      class="question-image"
-                      lazy
-                      object-fit="contain"
-                    />
+                    <NSpace
+                      vertical
+                      align="center"
+                    >
+                      <NImage
+                        v-for="(img, index) in item.questionImages"
+                        :key="index"
+                        :src="img.path"
+                        class="question-image"
+                        lazy
+                        object-fit="contain"
+                      />
+                    </NSpace>
                   </div>
                 </NCard>
 
@@ -491,8 +833,13 @@ onUnmounted(() => {
             </NListItem>
           </NList>
           <NEmpty
-            v-else
+            v-else-if="!isGetting"
             class="empty-state"
+            description="还没有公开回复"
+          />
+          <NSpin
+            v-else
+            style="width: 100%; margin-top: 20px;"
           />
         </transition-group>
       </div>
@@ -506,7 +853,7 @@ onUnmounted(() => {
 .n-list {
   background-color: transparent;
 }
-
+/* 基础容器样式 */
 .question-box-container {
   max-width: 700px;
   margin: 0 auto;
@@ -515,7 +862,7 @@ onUnmounted(() => {
   padding: 0 16px;
 }
 
-/* 卡片样式 */
+/* 表单卡片样式 */
 .question-form-card {
   border-radius: 12px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
@@ -532,7 +879,7 @@ onUnmounted(() => {
   border-left: 4px solid #f5222d;
 }
 
-/* 话题选择卡片 */
+/* 话题选择区样式 */
 .topic-card {
   border-radius: 8px;
   overflow: hidden;
@@ -557,80 +904,138 @@ onUnmounted(() => {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
-/* 提问输入区域 */
-.question-textarea {
-  flex: 1;
-  border-radius: 8px;
-  transition: all 0.3s ease;
-  width: 100% !important; /* 使用 !important 确保不被其他样式覆盖 */
-  min-height: 100px; /* 设置最小高度 */
-  resize: vertical; /* 允许垂直调整大小 */
-}
-
-/* 设置 naive-ui 内部元素样式 */
-.question-textarea :deep(.n-input__textarea) {
-  min-width: 100% !important;
-  width: 100% !important;
-}
-
-.question-textarea :deep(.n-input__textarea-el) {
-  min-width: 100% !important;
-  width: 100% !important;
-}
-
-/* 确保输入框容器占满可用空间 */
+/* 问题输入区域 */
 .question-input-area {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
   margin: 16px 0;
   width: 100%;
 }
 
-@media (min-width: 640px) {
-  .question-input-area {
-    flex-direction: row;
-    align-items: flex-start;
-  }
-
-  /* 在水平布局中设置输入框区域的最小宽度 */
-  .question-textarea {
-    min-width: 75%; /* 占据至少75%的宽度 */
-  }
-}
-
-.image-upload {
-  min-width: 112px;
-}
-
-.upload-trigger {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  width: 100%;
-  opacity: 0.8;
+.question-textarea {
+  width: 100% !important;
+  min-height: 200px;
+  resize: vertical;
+  border-radius: 8px;
   transition: all 0.3s ease;
 }
 
-.upload-trigger:hover {
-  opacity: 1;
-  transform: scale(1.05);
+/* 图片上传区域 */
+.image-upload-container {
+  width: 100%;
+  margin-bottom: 10px;
 }
 
-.upload-icon {
-  font-size: 24px;
-  margin-bottom: 4px;
+.image-upload-card {
+  width: 50%;
+  margin: 0 auto;
+  text-align: center;
+  border-radius: 6px;
+  padding: 10px;
+  transition: all 0.2s ease;
+  border: 1px solid var(--border-color);
+  background-color: var(--background-color);
 }
 
-/* 分隔线 */
+.image-upload-card:hover {
+  background-color: var(--hover-background-color);
+}
+
+.upload-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 8px;
+}
+
+.upload-title {
+  font-size: 13px;
+  color: #666;
+}
+
+/* 已登录用户图片上传网格 */
+.upload-images-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
+  gap: 8px;
+}
+
+.upload-image-item, .upload-add-item {
+  height: 60px;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.upload-add-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px dashed var(--border-color);
+  cursor: pointer;
+}
+
+.add-icon {
+  font-size: 20px;
+  color: var(--text-color);
+}
+
+/* 图片预览样式 */
+.image-preview-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.upload-preview-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.remove-image-btn {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  opacity: 0.9;
+}
+
+/* 匿名图片上传样式 */
+.anonymous-upload-container {
+  height: 60px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.anonymous-upload-btn {
+  width: 60px;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px dashed var(--border-color);
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.disabled-container {
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+}
+
+.upload-disabled {
+  cursor: not-allowed;
+  opacity: 0.7;
+  background-color: var(--hover-background-color);
+}
+
+/* 通用元素 */
 .form-divider {
   margin: 10px 0;
   opacity: 0.6;
 }
 
-/* 警告提示 */
 .login-alert,
 .self-alert {
   border-radius: 8px;
@@ -649,12 +1054,11 @@ onUnmounted(() => {
   }
 }
 
-/* 匿名选项 */
+/* 操作按钮 */
 .anonymous-option {
   margin: 8px 0;
 }
 
-/* 操作按钮 */
 .action-buttons {
   display: flex;
   justify-content: center;
@@ -675,14 +1079,13 @@ onUnmounted(() => {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
-/* 验证码容器 */
 .turnstile-container {
   display: flex;
   justify-content: center;
   margin: 8px 0;
 }
 
-/* 公开回复部分 */
+/* 公开提问区域 */
 .public-divider {
   margin: 32px 0 24px;
   position: relative;
@@ -738,11 +1141,11 @@ onUnmounted(() => {
 }
 
 .question-tag {
-  margin-left: 8px;
+  margin-left: auto;
 }
 
 .question-content {
-  text-align: center;
+  text-align: left;
   padding: 16px;
   background-color: rgba(0, 0, 0, 0.02);
   border-radius: 6px;
@@ -762,6 +1165,7 @@ onUnmounted(() => {
 
 .question-image {
   max-height: 200px;
+  max-width: 100%;
   border-radius: 8px;
   transition: all 0.3s ease;
 }
@@ -770,6 +1174,7 @@ onUnmounted(() => {
   transform: scale(1.02);
 }
 
+/* 回答区域 */
 .answer-container {
   padding: 12px;
   background-color: rgba(24, 160, 88, 0.06);
@@ -809,8 +1214,7 @@ onUnmounted(() => {
   opacity: 0.7;
 }
 
-/* 过渡动效 */
-/* 淡入淡出 */
+/* 过渡动画 */
 .fade-enter-active,
 .fade-leave-active {
   transition: opacity 0.5s ease;
@@ -821,7 +1225,6 @@ onUnmounted(() => {
   opacity: 0;
 }
 
-/* 下滑淡入 */
 .fade-slide-down-enter-active,
 .fade-slide-down-leave-active {
   transition: all 0.5s ease;
@@ -833,7 +1236,6 @@ onUnmounted(() => {
   transform: translateY(-20px);
 }
 
-/* 上滑淡入 */
 .fade-slide-up-enter-active,
 .fade-slide-up-leave-active {
   transition: all 0.5s ease;
@@ -845,7 +1247,6 @@ onUnmounted(() => {
   transform: translateY(20px);
 }
 
-/* 缩放淡入 */
 .fade-scale-enter-active,
 .fade-scale-leave-active {
   transition: all 0.5s ease;
@@ -857,7 +1258,6 @@ onUnmounted(() => {
   transform: scale(0.9);
 }
 
-/* 标签列表过渡 */
 .tag-list-move {
   transition: all 0.5s ease;
 }
@@ -873,7 +1273,6 @@ onUnmounted(() => {
   transform: translateX(30px);
 }
 
-/* 问题列表过渡 */
 .list-fade-move {
   transition: transform 0.5s ease;
 }
diff --git a/src/views/view/SongListView.vue b/src/views/view/SongListView.vue
index 4a58650..ca34a31 100644
--- a/src/views/view/SongListView.vue
+++ b/src/views/view/SongListView.vue
@@ -48,7 +48,7 @@ import { DownloadConfig, useAccount } from '@/api/account';
 import { Setting_LiveRequest, SongRequestInfo, SongsInfo, UserInfo } from '@/api/api-models';
 import { QueryGetAPI, QueryPostAPIWithParams } from '@/api/query';
 import { SONG_API_URL, SONG_REQUEST_API_URL, SongListTemplateMap } from '@/data/constants';
-import { ConfigItemDefinition } from '@/data/VTsuruTypes';
+import { ConfigItemDefinition } from '@/data/VTsuruConfigTypes';
 import { useBiliAuth } from '@/store/useBiliAuth';
 import { useStorage } from '@vueuse/core';
 import { addSeconds } from 'date-fns';
diff --git a/src/views/view/indexTemplate/DefaultIndexTemplate.vue b/src/views/view/indexTemplate/DefaultIndexTemplate.vue
index 3f1cd96..44369d3 100644
--- a/src/views/view/indexTemplate/DefaultIndexTemplate.vue
+++ b/src/views/view/indexTemplate/DefaultIndexTemplate.vue
@@ -4,7 +4,7 @@ import { useAccount } from '@/api/account';
 import { ResponseUserIndexModel, UserInfo } from '@/api/api-models';
 import { QueryGetAPI } from '@/api/query';
 import SimpleVideoCard from '@/components/SimpleVideoCard.vue';
-import { defineTemplateConfig, ExtractConfigData } from '@/data/VTsuruTypes';
+import { defineTemplateConfig, ExtractConfigData } from '@/data/VTsuruConfigTypes';
 import { USER_INDEX_API_URL } from '@/data/constants';
 import { NAvatar, NButton, NCard, NDivider, NFlex, NSpace, NText, useMessage } from 'naive-ui';
 import { ref } from 'vue';
diff --git a/src/views/view/indexTemplate/SimpleIndexTemplate.vue b/src/views/view/indexTemplate/SimpleIndexTemplate.vue
index 5a7138b..191ffde 100644
--- a/src/views/view/indexTemplate/SimpleIndexTemplate.vue
+++ b/src/views/view/indexTemplate/SimpleIndexTemplate.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { UserInfo } from '@/api/api-models'
-import { TemplateConfig } from '@/data/VTsuruTypes'
+import { TemplateConfig } from '@/data/VTsuruConfigTypes'
 import { h } from 'vue'
 
 const width = window.innerWidth
diff --git a/src/views/view/scheduleTemplate/KawaiiSchedule.vue b/src/views/view/scheduleTemplate/KawaiiSchedule.vue
index 3c827bc..a3510e1 100644
--- a/src/views/view/scheduleTemplate/KawaiiSchedule.vue
+++ b/src/views/view/scheduleTemplate/KawaiiSchedule.vue
@@ -1,16 +1,12 @@
 <script lang="ts">
-// --- Define Config First ---
-// NOTE: Define ConfigDefinition *before* types that depend on it.
-// Use 'any' for config param in render/onUploaded to break circular dependency for now.
 export const Config = defineTemplateConfig([
   {
     name: '背景图', // Removed 'as const'
-    type: 'image',
-    key: 'backgroundImage', // Removed 'as const'
-    imageLimit: 1,
-    default: [] as string[],
-    onUploaded: (urls: string[], config: any) => {
-      config.backgroundImage = urls;
+    type: 'file',
+    key: 'backgroundFile', // Removed 'as const'
+    fileLimit: 1,
+    onUploaded: (files: UploadFileResponse[], config: any) => {
+      config.backgroundFile = files;
     },
   },
   {
@@ -58,26 +54,24 @@ export const Config = defineTemplateConfig([
   {
     name: '装饰图片',
     type: 'decorativeImages',
-    key: 'decorativeImages',
-    default: [] as DecorativeImageProperties[],
+    key: 'decorativeFile',
   },
 ]);
 export type KawaiiConfigType = ExtractConfigData<typeof Config>;
 export const DefaultConfig = {
-  
+
 } as KawaiiConfigType;
 </script>
 
 
 <script setup lang="ts">
-import { ScheduleDayInfo, ScheduleWeekInfo } from '@/api/api-models';
+import { ScheduleDayInfo, ScheduleWeekInfo, UploadFileResponse } from '@/api/api-models';
 import SaveCompoent from '@/components/SaveCompoent.vue'; // 引入截图组件
 import { ScheduleConfigTypeWithConfig } from '@/data/TemplateTypes'; // Use base type
-import { DecorativeImageProperties, defineTemplateConfig, ExtractConfigData, RGBAColor, rgbaToString } from '@/data/VTsuruTypes';
-import { FILE_BASE_URL } from '@/data/constants';
+import { defineTemplateConfig, ExtractConfigData, RGBAColor, rgbaToString } from '@/data/VTsuruConfigTypes';
 import { getWeek, getYear } from 'date-fns';
-import { NButton, NDivider, NEmpty, NFlex, NSelect, NSpace, useMessage } from 'naive-ui';
-import { computed, h, ref, watch, WritableComputedRef } from 'vue';
+import { NDivider, NSelect, NSpace, useMessage } from 'naive-ui';
+import { computed, ref, watch, WritableComputedRef } from 'vue';
 
 // Get message instance
 const message = useMessage();
@@ -87,14 +81,14 @@ const props = defineProps<ScheduleConfigTypeWithConfig<KawaiiConfigType>>();
 // --- 默认配置 --- Define DefaultConfig using KawaiiConfigType
 // No export needed here
 const DefaultConfig: KawaiiConfigType = {
-  backgroundImage: [],
+  backgroundFile: [],
   containerColor: { r: 255, g: 255, b: 255, a: 0.8 },
   dayLabelColor: { r: 126, g: 136, b: 184, a: 1 },
   dayContentBgColor: { r: 255, g: 255, b: 255, a: 1 },
   dayContentTextColor: { r: 100, g: 100, b: 100, a: 1 },
   timeLabelBgColor: { r: 245, g: 189, b: 189, a: 1 },
   timeLabelTextColor: { r: 255, g: 255, b: 255, a: 1 },
-  decorativeImages: [],
+  decorativeFile: [],
 };
 
 // --- 状态 ---
@@ -225,12 +219,12 @@ defineExpose({ Config, DefaultConfig });
       '--day-content-text-color': rgbaToString(effectiveConfig.dayContentTextColor),
       '--time-label-bg-color': rgbaToString(effectiveConfig.timeLabelBgColor),
       '--time-label-text-color': rgbaToString(effectiveConfig.timeLabelTextColor),
-      backgroundImage: effectiveConfig.backgroundImage && effectiveConfig.backgroundImage.length > 0 ? `url(${FILE_BASE_URL + effectiveConfig.backgroundImage[0]})` : 'none',
+      backgroundImage: effectiveConfig.backgroundFile && effectiveConfig.backgroundFile.length > 0 ? `url(${effectiveConfig.backgroundFile[0].path})` : 'none',
     }"
   >
     <!-- 装饰图片渲染 -->
     <div
-      v-for="img in effectiveConfig.decorativeImages"
+      v-for="img in effectiveConfig.decorativeFile"
       :key="img.id"
       class="decorative-image"
       :style="{
@@ -247,7 +241,7 @@ defineExpose({ Config, DefaultConfig });
       }"
     >
       <img
-        :src="FILE_BASE_URL + img.src"
+        :src="img.path"
         alt="decoration"
         style="display: block; width: 100%; height: auto;"
       >
diff --git a/src/views/view/songListTemplate/TraditionalSongListTemplate.vue b/src/views/view/songListTemplate/TraditionalSongListTemplate.vue
index fcb410f..bf58d76 100644
--- a/src/views/view/songListTemplate/TraditionalSongListTemplate.vue
+++ b/src/views/view/songListTemplate/TraditionalSongListTemplate.vue
@@ -1,21 +1,20 @@
 <script setup lang="ts">
-import { computed, h, ref, watch, VNode } from 'vue';
-import { getUserAvatarUrl, isDarkMode } from '@/Utils';
+import { isDarkMode } from '@/Utils';
+import { useAccount } from '@/api/account';
+import { SongFrom, SongRequestOption, SongsInfo } from '@/api/api-models';
 import { SongListConfigTypeWithConfig } from '@/data/TemplateTypes';
-import { defineTemplateConfig, ExtractConfigData } from '@/data/VTsuruTypes';
-import { FILE_BASE_URL } from '@/data/constants';
-import { NButton, NFlex, NIcon, NInput, NInputGroup, NInputGroupLabel, NTag, NTooltip, NSelect } from 'naive-ui';
+import { defineTemplateConfig, ExtractConfigData } from '@/data/VTsuruConfigTypes';
+import { useBiliAuth } from '@/store/useBiliAuth';
 import bilibili from '@/svgs/bilibili.svg';
+import douyin from '@/svgs/douyin.svg';
+import FiveSingIcon from '@/svgs/fivesing.svg';
 import neteaseMusic from '@/svgs/neteaseMusic.svg';
 import qqMusic from '@/svgs/qqMusic.svg';
-import douyin from '@/svgs/douyin.svg';
-import { SongFrom, SongsInfo, SongRequestOption } from '@/api/api-models';
-import FiveSingIcon from '@/svgs/fivesing.svg';
-import { SquareArrowForward24Filled, ArrowCounterclockwise20Filled, ArrowSortDown20Filled, ArrowSortUp20Filled } from '@vicons/fluent';
+import { ArrowCounterclockwise20Filled, ArrowSortDown20Filled, ArrowSortUp20Filled, SquareArrowForward24Filled } from '@vicons/fluent';
 import { List } from 'linqts';
-import { useAccount } from '@/api/account';
-import { getSongRequestTooltip, getSongRequestConfirmText } from './utils/songRequestUtils';
-import { useBiliAuth } from '@/store/useBiliAuth';
+import { NButton, NFlex, NIcon, NInput, NInputGroup, NInputGroupLabel, NSelect, NTag, NTooltip } from 'naive-ui';
+import { computed, h, ref, VNode, watch } from 'vue';
+import { getSongRequestConfirmText, getSongRequestTooltip } from './utils/songRequestUtils';
 
 // Interface Tab - can be reused for both language and tag buttons
 interface FilterButton {
@@ -487,11 +486,12 @@ export const DefaultConfig = {} as TraditionalConfigType;
 export const Config = defineTemplateConfig([
   {
     name: '背景',
-    type: 'image',
-    imageLimit: 1,
-    key: 'background',
-    onUploaded: (url, config) => {
-      config.background = url;
+    type: 'file',
+    fileLimit: 1,
+    key: 'backgroundFile',
+    onUploaded: (file, config) => {
+      console.log(file, config);
+      config.backgroundFile = file;
     },
   },
   {
@@ -645,7 +645,7 @@ export const Config = defineTemplateConfig([
   <div
     class="song-list-background-wrapper"
     :style="{
-      backgroundImage: props.config?.background ? `url(${FILE_BASE_URL + props.config.background})` : 'none',
+      backgroundImage: props.config?.backgroundFile && props.config.backgroundFile.length > 0 ? `url(${props.config.backgroundFile[0].path})` : 'none',
     }"
   >
     <!-- 原始: 滚动和内容容器 -->
diff --git a/vite.config.mts b/vite.config.mts
index bb5174c..5b9cd06 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -1,26 +1,15 @@
 // vite.config.ts
 import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
-import path, { resolve } from 'path';
+import path from 'path';
+import AutoImport from 'unplugin-auto-import/vite';
+import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';
+import Components from 'unplugin-vue-components/vite';
 import Markdown from 'unplugin-vue-markdown/vite';
 import { defineConfig } from 'vite';
-import monacoEditorPluginModule from 'vite-plugin-monaco-editor';
-import caddyTls from './plugins/vite-plugin-caddy';
-import { VineVitePlugin } from 'vue-vine/vite';
-import AutoImport from 'unplugin-auto-import/vite';
-import Components from 'unplugin-vue-components/vite';
-import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';
 import oxlintPlugin from 'vite-plugin-oxlint';
-import svgLoader from 'vite-svg-loader'
-import { install as VueMonacoEditorPlugin } from '@guolao/vue-monaco-editor'
-
-const isObjectWithDefaultFunction = (
-  module: unknown
-): module is { default: typeof monacoEditorPluginModule; } =>
-  module != null &&
-  typeof module === 'object' &&
-  'default' in module &&
-  typeof module.default === 'function';
+import svgLoader from 'vite-svg-loader';
+import { VineVitePlugin } from 'vue-vine/vite';
 
 export default defineConfig({
   plugins: [
@@ -36,7 +25,6 @@ export default defineConfig({
     Markdown({
       /* options */
     }),
-    caddyTls(),
     AutoImport({
       imports: ['vue', 'vue-router', '@vueuse/core', 'pinia', 'date-fns', {
         'naive-ui': [