feat: 文件即时预览支持展示报错的响应详情; 修复文件即时预览失败时, 显示的是上次成功结果的问题; age key helper 样式优化

Author: xream

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sub-store-front-end",
-  "version": "2.26.6",
+  "version": "2.26.7",
   "private": true,
   "packageManager": "pnpm@11.0.9",
   "scripts": {

src/components/AgeKeyHelper.vue

@@ -386,6 +386,7 @@ const copyValue = async (value: string) => {
 .age-key-textarea {
   width: 100%;
   background: transparent !important;
+  padding: 0 !important;
   font-size: 11px;
   line-height: 1.4;
   color: var(--primary-text-color);
@@ -395,15 +396,21 @@ const copyValue = async (value: string) => {
   }
 
   :deep(.nut-textarea__textarea) {
+    box-sizing: border-box;
     background: transparent !important;
     color: var(--primary-text-color);
     caret-color: var(--primary-color);
-    padding-right: 34px;
-    font-size: 11px;
-    line-height: 1.4;
+    padding: 8px 34px 8px 10px;
+    font-size: 12px;
+    line-height: 1.45;
+    text-align: left !important;
+    word-break: break-word;
 
     &::placeholder {
       color: var(--comment-text-color, #8a8a8a);
+      font-size: 12px;
+      line-height: 1.45;
+      opacity: 1;
     }
   }
 }

src/components/FileListItem.vue

@@ -270,6 +270,7 @@
   import { useBackend } from "@/hooks/useBackend";
   import clashmetaIcon from '@/assets/icons/clashmeta_color.png';
   import { isMihomoConfigFileType } from "@/utils/fileType";
+  import { formatPreviewError } from "@/utils/previewError";
 
   const { copy, isSupported } = useClipboard();
   const { toClipboard: copyFallback } = useV3Clipboard();
@@ -429,11 +430,11 @@
       if (res?.data?.status === 'success') {
         previewData.value = res.data.data;
       } else {
-        previewData.value = null;
+        previewData.value = { processed: formatPreviewError(res) };
       }
     } catch (e) {
       console.error(e);
-      previewData.value = null;
+      previewData.value = { processed: formatPreviewError(e) };
     }
     Toast.hide('compare');
   };
@@ -466,7 +467,7 @@
       subsStore.setOneData('files', name, latestFile);
     } catch (e) {
       console.error(e);
-      previewData.value = null;
+      previewData.value = { processed: formatPreviewError(e) };
       Toast.hide('compare');
     }
   };

src/utils/previewError.ts

@@ -0,0 +1,57 @@
+type PreviewErrorResponse = {
+  status?: number | string;
+  statusText?: string;
+  data?: unknown;
+};
+
+const isObject = (value: unknown): value is Record<string, unknown> => {
+  return typeof value === "object" && value !== null;
+};
+
+const stringifyPreviewErrorData = (data: unknown) => {
+  if (data == null) return "";
+
+  if (typeof data === "string") {
+    try {
+      return JSON.stringify(JSON.parse(data), null, 2);
+    } catch {
+      return data;
+    }
+  }
+
+  try {
+    return JSON.stringify(data, null, 2);
+  } catch {
+    return String(data);
+  }
+};
+
+const getPreviewErrorResponse = (error: unknown): PreviewErrorResponse | undefined => {
+  if (!isObject(error)) return undefined;
+
+  if (isObject(error.response)) {
+    return error.response as PreviewErrorResponse;
+  }
+
+  if ("data" in error) {
+    return error as PreviewErrorResponse;
+  }
+
+  return undefined;
+};
+
+export const formatPreviewError = (error: unknown) => {
+  const response = getPreviewErrorResponse(error);
+  const data = stringifyPreviewErrorData(response?.data);
+
+  if (response) {
+    const status = [response.status, response.statusText].filter(Boolean).join(" ");
+    return `Error: ${status || "请求失败"}${data ? `\n\n${data}` : ""}`;
+  }
+
+  const message = isObject(error) && typeof error.message === "string"
+    ? error.message
+    : String(error ?? "请求失败");
+
+  return `Error: ${message}`;
+};

src/views/FileEditor.vue

@@ -574,6 +574,7 @@ import {
   MIHOMO_CONFIG_FILE_TYPE,
   normalizeFileType,
 } from "@/utils/fileType";
+import { formatPreviewError } from "@/utils/previewError";
 
 const cmStore = useCodeStore();
 const { t, locale } = useI18n();
@@ -1041,11 +1042,11 @@ const fetchPreviewData = async () => {
     if (res?.data?.status === "success") {
       previewData.value = res.data.data;
     } else {
-      previewData.value = null;
+      previewData.value = { processed: formatPreviewError(res) };
     }
   } catch (e) {
     console.error(e);
-    previewData.value = null;
+    previewData.value = { processed: formatPreviewError(e) };
   }
   Toast.hide("compare");
 };