feat: add MCP settings and admin header actions

Author: vastsa

src/components/common/FileDetailModal.vue

@@ -65,18 +65,8 @@
               </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-else-if="isPreviewable(record)"
+                v-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'"
@@ -138,7 +128,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 { buildAbsoluteUrl, buildDownloadUrl, buildReceivedRecordQrValue } from '@/utils/share-url'
+import { buildDownloadUrl, buildReceivedRecordQrValue } from '@/utils/share-url'
 
 interface Props {
   visible: boolean
@@ -160,13 +150,6 @@ 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)
@@ -193,8 +176,6 @@ const isPreviewable = (record: ReceivedFileRecord) => {
     'm4a',
     'flac',
     'pdf',
-    'html',
-    'htm'
   ].includes(extension)
 }
 </script>

src/components/common/MediaPreviewModal.vue

@@ -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 { buildAbsoluteUrl, buildDownloadUrl } from '@/utils/share-url'
+import { buildDownloadUrl } from '@/utils/share-url'
 
 interface Props {
   visible: boolean
@@ -106,12 +106,7 @@ const extension = computed(() => props.record?.filename.split('.').pop()?.toLowe
 const downloadUrl = computed(() =>
   props.record?.downloadUrl ? buildDownloadUrl(props.record.downloadUrl) : ''
 )
-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 previewUrl = computed(() => 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/index.ts

@@ -11,4 +11,7 @@ export { useRouteLoading } from './useRouteLoading'
 export { useSendFlow } from './useSendFlow'
 export { useLocalShare } from './useLocalShare'
 export { useSystemConfig } from './useSystemConfig'
+export { useMcpSettings } from './useMcpSettings'
 export { useTheme } from './useTheme'
+export { provideAdminHeaderActions, useAdminHeaderActions } from './useAdminHeaderActions'
+export type { AdminHeaderAction, AdminHeaderConfig } from './useAdminHeaderActions'

src/composables/useAdminHeaderActions.ts

@@ -0,0 +1,71 @@
+import {
+  inject,
+  onUnmounted,
+  provide,
+  shallowRef,
+  watch,
+  type Component,
+  type ComputedRef,
+  type InjectionKey
+} from 'vue'
+
+export interface AdminHeaderAction {
+  key: string
+  label: string
+  icon: Component
+  onClick: () => void
+  variant?: 'primary' | 'secondary' | 'danger' | 'success' | 'outline'
+  loading?: boolean
+  disabled?: boolean
+}
+
+export interface AdminHeaderConfig {
+  subtitle?: string
+  status?: string
+  statusTone?: 'muted' | 'warning'
+  actions: AdminHeaderAction[]
+}
+
+interface AdminHeaderRegistry {
+  state: ReturnType<typeof shallowRef<AdminHeaderConfig | null>>
+  register: (owner: symbol, config: AdminHeaderConfig) => void
+  clear: (owner: symbol) => void
+}
+
+const ADMIN_HEADER_KEY: InjectionKey<AdminHeaderRegistry> = Symbol('admin-header-actions')
+
+export function provideAdminHeaderActions() {
+  const state = shallowRef<AdminHeaderConfig | null>(null)
+  let currentOwner: symbol | null = null
+
+  provide(ADMIN_HEADER_KEY, {
+    state,
+    register(owner, config) {
+      currentOwner = owner
+      state.value = config
+    },
+    clear(owner) {
+      if (currentOwner === owner) {
+        currentOwner = null
+        state.value = null
+      }
+    }
+  })
+
+  return state
+}
+
+export function useAdminHeaderActions(config: ComputedRef<AdminHeaderConfig>) {
+  const registry = inject(ADMIN_HEADER_KEY, null)
+  const owner = Symbol('admin-header-owner')
+  const stop = watch(
+    config,
+    (value) => registry?.register(owner, value),
+    { immediate: true }
+  )
+
+  onUnmounted(() => {
+    stop()
+    registry?.clear(owner)
+  })
+}

src/composables/useMcpSettings.ts

@@ -0,0 +1,64 @@
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { ConfigService } from '@/services'
+import { useAlertStore } from '@/stores/alertStore'
+import { copyToClipboard } from '@/utils/clipboard'
+import { getErrorMessage } from '@/utils/common'
+
+export function useMcpSettings() {
+  const { t } = useI18n()
+  const alertStore = useAlertStore()
+  const isLoading = ref(false)
+  const isSaving = ref(false)
+  const requireToken = ref(0)
+  const guestUploadOpen = ref(1)
+
+  const loadSettings = async () => {
+    isLoading.value = true
+    try {
+      const response = await ConfigService.getConfig()
+      if (response.code !== 200 || !response.detail) {
+        throw new Error(t('admin.mcp.loadFailed'))
+      }
+      requireToken.value = response.detail.mcp_require_token === 1 ? 1 : 0
+      guestUploadOpen.value = response.detail.open_upload === 0 ? 0 : 1
+    } catch (error) {
+      alertStore.showAlert(getErrorMessage(error, t('admin.mcp.loadFailed')), 'error')
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  const toggleTokenRequirement = async () => {
+    if (isSaving.value || isLoading.value) return
+    const nextValue = requireToken.value === 1 ? 0 : 1
+    isSaving.value = true
+    try {
+      const response = await ConfigService.updateConfig({ mcp_require_token: nextValue })
+      if (response.code !== 200) throw new Error(t('admin.mcp.saveFailed'))
+      requireToken.value = nextValue
+      alertStore.showAlert(t('admin.mcp.saveSuccess'), 'success')
+    } catch (error) {
+      alertStore.showAlert(getErrorMessage(error, t('admin.mcp.saveFailed')), 'error')
+    } finally {
+      isSaving.value = false
+    }
+  }
+
+  const copyText = (value: string) =>
+    copyToClipboard(value, {
+      successMsg: t('admin.mcp.copySuccess'),
+      errorMsg: t('admin.mcp.copyFailed'),
+      notify: (message, type) => alertStore.showAlert(message, type)
+    })
+
+  return {
+    isLoading,
+    isSaving,
+    requireToken,
+    guestUploadOpen,
+    loadSettings,
+    toggleTokenRequirement,
+    copyText
+  }
+}

src/constants/index.ts

@@ -71,6 +71,7 @@ export const ROUTES = {
   DASHBOARD: '/admin/dashboard',
   FILE_MANAGE: '/admin/files',
   LOCAL_SHARE: '/admin/local',
+  MCP: '/admin/mcp',
   SETTINGS: '/admin/settings'
 } as const
 
@@ -82,6 +83,7 @@ export const ROUTE_NAMES = {
   DASHBOARD: 'Dashboard',
   FILE_MANAGE: 'FileManage',
   LOCAL_SHARE: 'LocalShare',
+  MCP: 'Mcp',
   SETTINGS: 'Settings'
 } as const
 

src/i18n/locales/en-US.ts

@@ -58,6 +58,36 @@ export default {
       loggedIn: 'Signed in, open admin console',
       loggedOut: 'Sign in to admin console'
     },
+    mcp: {
+      title: 'MCP Quick Share',
+      subtitle: 'Connect FileCodeBox to an AI client to create text and file shares through chat.',
+      refresh: 'Refresh settings',
+      endpointLabel: 'MCP endpoint',
+      transport: 'Transport: Streamable HTTP',
+      copyEndpoint: 'Copy endpoint',
+      securityTitle: 'Access control',
+      securityHelp: 'When enabled, MCP uploads require an admin login token. If guest uploads are disabled, the server always requires a token.',
+      requireToken: 'Require admin token',
+      tokenRequiredStatus: 'MCP uploads currently require an admin Bearer token.',
+      tokenOptionalStatus: 'Tokenless uploads are allowed only while guest uploads are enabled.',
+      shareTextTitle: 'Share text',
+      shareTextHelp: 'Create a FileCodeBox text share and return its retrieval link.',
+      shareFileTitle: 'Share a file',
+      shareFileHelp: 'Upload Base64 file content within the site file-type, size, and expiration limits.',
+      aiSetupTitle: 'Configure with AI',
+      aiSetupHelp: 'Copy setup instructions and paste them into your AI assistant to configure its MCP client.',
+      aiSetupButton: 'Copy AI setup instructions',
+      aiSetupFallback: 'Clipboard unavailable. Select and copy the setup text below.',
+      aiSetupPrivacy: 'Your admin token is never copied. If authentication is required, let the AI ask you for it; do not send it to an untrusted service.',
+      aiAuthRequired: 'Authorization: Bearer with an admin login token is required',
+      aiAuthOptional: 'No token required unless guest uploads are disabled',
+      aiSetupPrompt: 'Please connect FileCodeBox MCP to my current AI client. Use Streamable HTTP and the client format it currently supports.\nEndpoint: {endpoint}\nAuthentication: {authentication}\nTools: share_text (create a text share), share_file (upload a Base64 file and create a share). If a token is needed, ask me for my admin login token and set it only as Authorization: Bearer. Do not guess or reveal the token.',
+      loadFailed: 'Failed to load MCP settings',
+      saveFailed: 'Failed to save MCP settings',
+      saveSuccess: 'MCP settings saved',
+      copySuccess: 'Copied to clipboard',
+      copyFailed: 'Could not copy; check browser clipboard permissions'
+    },
     dashboard: {
       title: 'Dashboard',
       totalFiles: 'Total Files',
@@ -752,8 +782,6 @@ 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

@@ -58,6 +58,36 @@ export default {
       loggedIn: '已登录，进入管理后台',
       loggedOut: '登录管理后台'
     },
+    mcp: {
+      title: 'MCP 快捷分享',
+      subtitle: '把 FileCodeBox 接入 AI 客户端，用对话快速创建文本或文件分享。',
+      refresh: '刷新配置',
+      endpointLabel: 'MCP 接口地址',
+      transport: '传输协议：Streamable HTTP',
+      copyEndpoint: '复制地址',
+      securityTitle: '访问控制',
+      securityHelp: '开启后，调用 MCP 上传工具需要管理员登录 Token。关闭游客上传时，服务仍会强制验证 Token。',
+      requireToken: '要求管理员 Token',
+      tokenRequiredStatus: '当前 MCP 上传需要管理员 Bearer Token。',
+      tokenOptionalStatus: '当前允许免 Token 上传（仅在已开启游客上传时生效）。',
+      shareTextTitle: '分享文本',
+      shareTextHelp: 'AI 可将文本创建为 FileCodeBox 分享，并返回取件链接。',
+      shareFileTitle: '分享文件',
+      shareFileHelp: 'AI 可上传 Base64 文件内容，遵循本站类型、大小和过期限制。',
+      aiSetupTitle: '一键让 AI 配置',
+      aiSetupHelp: '复制连接说明，粘贴给你使用的 AI 助手，让它按当前客户端格式配置 MCP。',
+      aiSetupButton: '复制给 AI 配置',
+      aiSetupFallback: '剪贴板不可用，可在下方文本框中手动选择并复制。',
+      aiSetupPrivacy: '不会复制管理员 Token。需要认证时，AI 应向你索取，不要把 Token 发给不可信的服务。',
+      aiAuthRequired: '需要 Authorization: Bearer 管理员登录 Token',
+      aiAuthOptional: '当前无需 Token；若游客上传关闭则仍需管理员 Token',
+      aiSetupPrompt: '请帮我把 FileCodeBox MCP 接入当前 AI 客户端。请使用 Streamable HTTP，并按客户端当前支持的格式配置。\n服务地址：{endpoint}\n认证要求：{authentication}\n工具：share_text（创建文本分享）、share_file（上传 Base64 文件并创建分享）。如果需要 Token，请先向我索取管理员登录 Token，只设置为 Authorization: Bearer，不要猜测或输出 Token。',
+      loadFailed: '读取 MCP 配置失败',
+      saveFailed: '保存 MCP 配置失败',
+      saveSuccess: 'MCP 配置已保存',
+      copySuccess: '已复制到剪贴板',
+      copyFailed: '复制失败，请检查浏览器剪贴板权限'
+    },
     dashboard: {
       title: '仪表盘',
       totalFiles: '总文件数',
@@ -771,8 +801,6 @@ export default {
       allowedFileTypes: '允许上传类型',
       allowedFileTypesPlaceholder: '* 或 .rar, .zip, image/*',
       allowedFileTypesHelp: '多个类型用英文逗号分隔，* 表示不限制；支持扩展名和 MIME 通配。',
-      mcpRequireToken: 'MCP 上传需要管理员 Token',
-      mcpRequireTokenHelp: '启用后调用 /mcp 上传时，需在 Authorization: Bearer 中提供管理员登录 Token。',
       codeGenerateType: '取件码规则',
       codeGenerateNumber: '数字取件码',
       codeGenerateSecret: 'Secret 取件码',