From 5ba984a499ff96415ce9b14b84804232f4910cb2 Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Sat, 25 Oct 2025 23:27:15 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=AD=97=E6=AE=B5=E7=B1=BB?=
 =?UTF-8?q?=E5=9E=8B=E6=8E=A7=E4=BB=B6=E6=97=A0=E6=B3=95=E8=A6=86=E7=9B=96?=
 =?UTF-8?q?=E6=A0=B8=E5=BF=83=E6=8E=A7=E4=BB=B6=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/core/registry/controlOverride.ts      |  53 +++--
 .../pagetype/file/form/controls/HTML.vue      | 188 ++++++++++++++++++
 2 files changed, 211 insertions(+), 30 deletions(-)
 create mode 100644 apps/jingrow/frontend/src/views/pagetype/file/form/controls/HTML.vue

diff --git a/apps/jingrow/frontend/src/core/registry/controlOverride.ts b/apps/jingrow/frontend/src/core/registry/controlOverride.ts
index 83a8080..ebda61a 100644
--- a/apps/jingrow/frontend/src/core/registry/controlOverride.ts
+++ b/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 fieldtypeNormalized = fieldtype.replace(/\s+/g, '')
+  // 标准化输入
+  const entityKey = entity.toLowerCase().replace(/-/g, '_')
+  const fieldtypeKey = fieldtype.replace(/\s+/g, '')
   
-  // 查找匹配的控件覆盖
-  const candidates = Object.keys(allControlOverrides).filter((path) => {
-    const segments = path.split('/').filter(Boolean)
-    const len = segments.length
-    
-    if (len < 6) return false // 至少需要 6 段路径：views/pagetype/{entity}/form/controls/{fieldtype}.vue
-    
-    // 检查路径结构：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
-    )
-  })
+  // 直接查找匹配的路径
+  const key = `${entityKey}:${fieldtypeKey}`
+  const path = pathMap.get(key)
   
-  if (candidates.length === 0) return null
+  if (!path) 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
   }
 }
diff --git a/apps/jingrow/frontend/src/views/pagetype/file/form/controls/HTML.vue b/apps/jingrow/frontend/src/views/pagetype/file/form/controls/HTML.vue
new file mode 100644
index 0000000..330a5d3
--- /dev/null
+++ b/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>