feat: expose MCP settings and HTML preview

Author: vastsa

src/components/common/FileDetailModal.vue

@@ -65,15 +65,21 @@
               </button>
             </div>
             <div v-else class="ml-2 flex flex-wrap gap-2">
+              <a
+                v-if="isHtmlPreviewable(record)"
+                :href="getHtmlPreviewUrl(record)"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="rounded-xl px-4 py-2 text-sm font-semibold transition duration-300"
+                :class="isDarkMode ? 'bg-zinc-200 text-zinc-950 hover:bg-zinc-100' : 'bg-zinc-800 text-white hover:bg-zinc-900'"
+              >
+                {{ t('fileRecord.preview') }}
+              </a>
               <button
-                v-if="isPreviewable(record)"
+                v-else-if="isPreviewable(record)"
                 type="button"
                 class="rounded-xl px-4 py-2 text-sm font-semibold transition duration-300"
-                :class="
-                  isDarkMode
-                    ? 'bg-zinc-200 text-zinc-950 hover:bg-zinc-100'
-                    : 'bg-zinc-800 text-white hover:bg-zinc-900'
-                "
+                :class="isDarkMode ? 'bg-zinc-200 text-zinc-950 hover:bg-zinc-100' : 'bg-zinc-800 text-white hover:bg-zinc-900'"
                 @click="$emit('preview-file')"
               >
                 {{ t('fileRecord.preview') }}
@@ -132,7 +138,7 @@ import { useI18n } from 'vue-i18n'
 import { FileIcon, CalendarIcon, HardDriveIcon, DownloadIcon } from 'lucide-vue-next'
 import QRCode from 'qrcode.vue'
 import type { ReceivedFileRecord } from '@/types'
-import { buildDownloadUrl, buildReceivedRecordQrValue } from '@/utils/share-url'
+import { buildAbsoluteUrl, buildDownloadUrl, buildReceivedRecordQrValue } from '@/utils/share-url'
 
 interface Props {
   visible: boolean
@@ -154,6 +160,14 @@ const getDownloadUrl = (record: ReceivedFileRecord) => {
   return buildDownloadUrl(record.downloadUrl)
 }
 
+const isHtmlPreviewable = (record: ReceivedFileRecord) => {
+  const extension = record.filename.split('.').pop()?.toLowerCase() || ''
+  return Boolean(record.downloadUrl) && ['html', 'htm'].includes(extension)
+}
+
+const getHtmlPreviewUrl = (record: ReceivedFileRecord) =>
+  buildAbsoluteUrl(`/share/preview/html/${encodeURIComponent(record.code)}`)
+
 const getQRCodeValue = (record: ReceivedFileRecord) => {
   return buildReceivedRecordQrValue(record)
 }
@@ -178,7 +192,9 @@ const isPreviewable = (record: ReceivedFileRecord) => {
     'wav',
     'm4a',
     'flac',
-    'pdf'
+    'pdf',
+    'html',
+    'htm'
   ].includes(extension)
 }
 </script>

src/components/common/MediaPreviewModal.vue

@@ -18,7 +18,7 @@
           </h3>
           <div class="flex items-center gap-2">
             <a
-              :href="previewUrl"
+              :href="downloadUrl"
               target="_blank"
               rel="noopener noreferrer"
               class="rounded-xl px-3 py-1.5 text-sm font-semibold transition duration-300"
@@ -87,7 +87,7 @@ import { XIcon } from 'lucide-vue-next'
 import { useI18n } from 'vue-i18n'
 import { useInjectedDarkMode } from '@/composables'
 import type { ReceivedFileRecord } from '@/types'
-import { buildDownloadUrl } from '@/utils/share-url'
+import { buildAbsoluteUrl, buildDownloadUrl } from '@/utils/share-url'
 
 interface Props {
   visible: boolean
@@ -102,10 +102,16 @@ defineEmits<{
 const { t } = useI18n()
 const isDarkMode = useInjectedDarkMode()
 
-const previewUrl = computed(() =>
+const extension = computed(() => props.record?.filename.split('.').pop()?.toLowerCase() || '')
+const downloadUrl = computed(() =>
   props.record?.downloadUrl ? buildDownloadUrl(props.record.downloadUrl) : ''
 )
-const extension = computed(() => props.record?.filename.split('.').pop()?.toLowerCase() || '')
+const previewUrl = computed(() => {
+  if (['html', 'htm'].includes(extension.value) && props.record?.code) {
+    return buildAbsoluteUrl(`/share/preview/html/${encodeURIComponent(props.record.code)}`)
+  }
+  return downloadUrl.value
+})
 const mediaType = computed(() => {
   if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp', 'svg'].includes(extension.value)) return 'image'
   if (['mp4', 'webm', 'ogg', 'mov', 'm4v'].includes(extension.value)) return 'video'

src/composables/useSystemConfig.ts

@@ -14,7 +14,7 @@ import {
   type SaveTimeUnit
 } from '@/utils/config-form'
 
-type ConfigFlagKey = 'enable_chunk' | 's3_proxy' | 'open_upload' | 'show_admin_addr'
+type ConfigFlagKey = 'enable_chunk' | 's3_proxy' | 'open_upload' | 'show_admin_addr' | 'mcp_require_token'
 
 const SECONDS_PER_DAY = 24 * 60 * 60
 

src/i18n/locales/en-US.ts

@@ -752,6 +752,8 @@ export default {
       allowedFileTypesPlaceholder: '* or .rar, .zip, image/*',
       allowedFileTypesHelp:
         'Separate multiple types with commas. * allows all; extensions and MIME wildcards are supported.',
+      mcpRequireToken: 'Require admin token for MCP uploads',
+      mcpRequireTokenHelp: 'When enabled, pass your admin login token as Authorization: Bearer when calling /mcp.',
       codeGenerateType: 'Passcode Rule',
       codeGenerateNumber: 'Numeric Passcode',
       codeGenerateSecret: 'Secret Passcode',

src/i18n/locales/zh-CN.ts

@@ -771,6 +771,8 @@ export default {
       allowedFileTypes: '允许上传类型',
       allowedFileTypesPlaceholder: '* 或 .rar, .zip, image/*',
       allowedFileTypesHelp: '多个类型用英文逗号分隔，* 表示不限制；支持扩展名和 MIME 通配。',
+      mcpRequireToken: 'MCP 上传需要管理员 Token',
+      mcpRequireTokenHelp: '启用后调用 /mcp 上传时，需在 Authorization: Bearer 中提供管理员登录 Token。',
       codeGenerateType: '取件码规则',
       codeGenerateNumber: '数字取件码',
       codeGenerateSecret: 'Secret 取件码',

src/types/config.ts

@@ -45,6 +45,7 @@ export interface ConfigState {
   storage_limit: number
   upload_minute: number
   max_save_seconds: number
+  mcp_require_token: number
   opacity: number
   enable_chunk: number
   s3_access_key_id: string

src/utils/config-storage.ts

@@ -54,6 +54,7 @@ export const DEFAULT_CONFIG_STATE: ConfigState = {
   storage_path: '',
   storage_limit: 0,
   upload_minute: 1,
+  mcp_require_token: 0,
   max_save_seconds: DEFAULT_PUBLIC_CONFIG.max_save_seconds,
   opacity: 0.9,
   enable_chunk: DEFAULT_PUBLIC_CONFIG.enable_chunk,

src/views/manage/SystemSettingsView.vue

@@ -742,6 +742,17 @@ onMounted(() => {
               <p class="text-xs" :class="[isDarkMode ? 'text-zinc-400' : 'text-zinc-500']">
                 {{ t('manage.settings.codeGenerateTypeHelp') }}
               </p>
+
+            <SettingSwitch
+              :label="t('manage.settings.mcpRequireToken')"
+              :model-value="config.mcp_require_token"
+              :enabled-text="t('common.enabled')"
+              :disabled-text="t('common.disabled')"
+              @toggle="toggleConfigFlag('mcp_require_token')"
+            />
+            <p class="text-xs" :class="[isDarkMode ? 'text-zinc-400' : 'text-zinc-500']">
+              {{ t('manage.settings.mcpRequireTokenHelp') }}
+            </p>
             </div>
 
             <div class="space-y-2">

vite.config.ts

@@ -43,6 +43,10 @@ export default defineConfig({
       '@': fileURLToPath(new URL('./src', import.meta.url))
     }
   },
+  build: {
+    outDir: '../FileCodeBox/themes/2024',
+    emptyOutDir: true
+  },
   css: {
     postcss: {
       plugins: [tailwindcss, autoprefixer]