修复字段类型控件无法覆盖核心控件的问题

apps/jingrow/frontend/src/core/registry/controlOverride.ts

@@ -8,6 +8,20 @@ const allControlOverrides: Record<string, AsyncComponentLoader> = import.meta.gl
   '/src/views/pagetype/**/form/controls/**.vue'
 )
 
+// 预计算路径映射，提高查找效率
+const pathMap = new Map<string, string>()
+
+// 初始化路径映射
+Object.keys(allControlOverrides).forEach(path => {
+  const segments = path.split('/').filter(Boolean)
+  if (segments.length >= 7) {
+    const entity = segments[3]
+    const fieldtype = segments[6].replace(/\.vue$/i, '')
+    const key = `${entity}:${fieldtype}`
+    pathMap.set(key, path)
+  }
+})
+
 /**
  * 解析并返回指定 pagetype 和 fieldtype 的控件覆盖组件
  * @param entity pagetype名称
@@ -16,41 +30,20 @@ const allControlOverrides: Record<string, AsyncComponentLoader> = import.meta.gl
 export async function resolveControlOverride(entity: string, fieldtype: string): Promise<any | null> {
   if (!entity || !fieldtype) return null
   
-  // 将entity转换为下划线格式（与文件系统一致）
+  // 标准化输入
-  const entityUnderscore = entity.toLowerCase().replace(/-/g, '_')
+  const entityKey = entity.toLowerCase().replace(/-/g, '_')
-  const fieldtypeNormalized = fieldtype.replace(/\s+/g, '')
+  const fieldtypeKey = fieldtype.replace(/\s+/g, '')
   
-  // 查找匹配的控件覆盖
+  // 直接查找匹配的路径
-  const candidates = Object.keys(allControlOverrides).filter((path) => {
+  const key = `${entityKey}:${fieldtypeKey}`
-    const segments = path.split('/').filter(Boolean)
+  const path = pathMap.get(key)
-    const len = segments.length
   
-    if (len < 6) return false // 至少需要 6 段路径：views/pagetype/{entity}/form/controls/{fieldtype}.vue
+  if (!path) return null
   
-    // 检查路径结构：views/pagetype/{entity}/form/controls/{fieldtype}.vue
-    const fileName = segments[len - 1]
-    const fieldtypeInPath = fileName.replace(/\.vue$/i, '')
-    
-    return (
-      segments[0] === 'views' &&
-      segments[1] === 'pagetype' &&
-      segments[2] === entityUnderscore &&
-      segments[3] === 'form' &&
-      segments[4] === 'controls' &&
-      fieldtypeInPath === fieldtypeNormalized
-    )
-  })
-  
-  if (candidates.length === 0) return null
-  
-  // 如果有多个匹配，选择路径最短的（更接近根目录的优先）
-  candidates.sort((a, b) => a.length - b.length)
-  
-  const selectedPath = candidates[0]
   try {
-    const module = await allControlOverrides[selectedPath]()
+    const module = await allControlOverrides[path]()
     return module?.default ?? module
-  } catch (_e) {
+  } catch {
     return null
   }
 }

apps/jingrow/frontend/src/views/pagetype/file/form/controls/HTML.vue

@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+const props = defineProps<{ df: any; record: Record<string, any>; canEdit: boolean; ctx: any }>()
+
+// Label布局：上下结构(vertical) 或 左右结构(horizontal)
+const labelLayout = computed(() => props.df.label_layout || 'vertical')
+
+// HTML内容
+const htmlContent = ref('')
+
+// 获取HTML内容，对齐JS版本的get_content方法
+const getContent = () => {
+  // 特殊处理：File详情页的preview_html字段需要动态生成内容
+  if (props.df.fieldname === 'preview_html') {
+    return generateFilePreview()
+  }
+  
+  let content = props.df.options || ""
+  // 支持国际化
+  content = props.ctx.t ? props.ctx.t(content) : content
+  
+  try {
+    // 如果有模板渲染功能，使用模板渲染
+    if (props.ctx.render) {
+      return props.ctx.render(content, props)
+    }
+    return content
+  } catch (e) {
+    console.warn('HTML模板渲染失败:', e)
+    return content
+  }
+}
+
+// 生成File预览内容，对齐云端JS版本的preview_file逻辑
+const generateFilePreview = () => {
+  const record = props.record
+  const fileUrl = record.file_url
+  const fileType = record.file_type?.toLowerCase()
+  
+  if (!fileUrl) return ''
+  
+  // 检查是否是图片文件
+  if (isImageFile(fileUrl)) {
+    return `<div class="img_preview">
+      <img
+        class="img-responsive"
+        src="${escapeHtml(fileUrl)}"
+        onerror="this.parentElement.style.display='none'"
+      />
+    </div>`
+  }
+  
+  // 检查是否是视频文件
+  if (isVideoFile(fileUrl)) {
+    return `<div class="img_preview">
+      <video width="480" height="320" controls>
+        <source src="${escapeHtml(fileUrl)}">
+        ${props.ctx.t ? props.ctx.t('Your browser does not support the video element.') : 'Your browser does not support the video element.'}
+      </video>
+    </div>`
+  }
+  
+  // PDF文件
+  if (fileType === 'pdf') {
+    return `<div class="img_preview">
+      <object style="background:#323639;" width="100%">
+        <embed
+          style="background:#323639;"
+          width="100%"
+          height="1190"
+          src="${escapeHtml(fileUrl)}" type="application/pdf"
+        >
+      </object>
+    </div>`
+  }
+  
+  // MP3音频文件
+  if (fileType === 'mp3') {
+    return `<div class="img_preview">
+      <audio width="480" height="60" controls>
+        <source src="${escapeHtml(fileUrl)}" type="audio/mpeg">
+        ${props.ctx.t ? props.ctx.t('Your browser does not support the audio element.') : 'Your browser does not support the audio element.'}
+      </audio>
+    </div>`
+  }
+  
+  return ''
+}
+
+// 检查是否是图片文件
+const isImageFile = (url: string) => {
+  const imageExtensions = /\.(gif|jpg|jpeg|tiff|png|webp|bmp|svg)$/i
+  return imageExtensions.test(url)
+}
+
+// 检查是否是视频文件
+const isVideoFile = (url: string) => {
+  const videoExtensions = /\.(mp4|avi|mov|wmv|flv|webm|mkv)$/i
+  return videoExtensions.test(url)
+}
+
+// HTML转义函数
+const escapeHtml = (text: string) => {
+  const div = document.createElement('div')
+  div.textContent = text
+  return div.innerHTML
+}
+
+// 刷新HTML内容
+const refreshContent = () => {
+  htmlContent.value = getContent()
+}
+
+// 设置HTML内容，对齐JS版本的set_value方法
+const setValue = (html: string | any) => {
+  if (html && typeof html === 'object' && html.appendTo) {
+    // jQuery对象处理（在Vue中转换为字符串）
+    console.warn('jQuery对象在Vue中需要特殊处理')
+    props.df.options = html.toString()
+  } else {
+    // HTML字符串
+    props.df.options = html
+  }
+  refreshContent()
+}
+
+// 监听df.options变化
+watch(() => props.df.options, () => {
+  refreshContent()
+}, { immediate: true })
+
+// 监听record变化（特别是File详情页的file_url变化）
+watch(() => props.record, () => {
+  refreshContent()
+}, { deep: true, immediate: true })
+
+// 暴露方法给父组件
+defineExpose({
+  setValue,
+  refreshContent,
+  getContent
+})
+</script>
+
+<template>
+  <div :class="['field-wrapper', `layout-${labelLayout}`]">
+    <label class="field-label">
+      {{ ctx.t(df.label || df.fieldname) }}
+      <span v-if="df.reqd" class="required">*</span>
+    </label>
+    <div class="html-content" v-html="htmlContent"></div>
+  </div>
+</template>
+
+<style scoped>
+.field-wrapper :deep(.html-content) {
+  flex: 1;
+}
+
+/* File预览样式 */
+.field-wrapper :deep(.img_preview) {
+  width: 100%;
+  text-align: center;
+  margin: 8px 0;
+}
+
+.field-wrapper :deep(.img_preview img) {
+  max-width: 100%;
+  height: auto;
+}
+
+.field-wrapper :deep(.img_preview video) {
+  max-width: 100%;
+  height: auto;
+  border-radius: 6px;
+}
+
+.field-wrapper :deep(.img_preview audio) {
+  width: 100%;
+  margin: 8px 0;
+}
+
+.field-wrapper :deep(.img_preview object) {
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+</style>