From 535072b87bafff753ab0520e451fdf3f1a40d887 Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Fri, 21 Nov 2025 23:08:54 +0800
Subject: [PATCH] Fix Vue 3 warning: non-props attributes inheritance in
 LocalAiNodeListActions

---
 .../local_ai_node_list_actions.vue            | 115 ++++++++++++------
 1 file changed, 80 insertions(+), 35 deletions(-)

diff --git a/apps/jingrow/frontend/src/views/pagetype/local_ai_node/local_ai_node_list_actions.vue b/apps/jingrow/frontend/src/views/pagetype/local_ai_node/local_ai_node_list_actions.vue
index b3bba89..757471e 100644
--- a/apps/jingrow/frontend/src/views/pagetype/local_ai_node/local_ai_node_list_actions.vue
+++ b/apps/jingrow/frontend/src/views/pagetype/local_ai_node/local_ai_node_list_actions.vue
@@ -2,37 +2,37 @@
   <!-- 根据视图模式决定容器类名，组件自包含所有样式 -->
   <div :class="containerClass">
     <!-- 默认操作按钮 -->
-    <button class="action-btn" @click.stop="context.openDetail(context.row.name)" :title="context.t('View')">
+    <button class="action-btn" @click.stop="handleView" :title="t('View')">
       <i class="fa fa-eye"></i>
     </button>
-    <button class="action-btn" @click.stop="context.editRecord(context.row)" :title="context.t('Edit')">
+    <button class="action-btn" @click.stop="handleEdit" :title="t('Edit')">
       <i class="fa fa-edit"></i>
     </button>
     <!-- Schema 编辑按钮 -->
     <button 
       class="action-btn schema-btn" 
       @click.stop="handleOpenSchemaEditor" 
-      :title="context.t('Edit Schema')"
+      :title="t('Edit Schema')"
       :disabled="!canEditSchema"
     >
       <i class="fa fa-table"></i>
     </button>
-    <button class="action-btn delete-btn" @click.stop="context.deleteRecord(context.row.name)" :title="context.t('Delete')">
+    <button class="action-btn delete-btn" @click.stop="handleDelete" :title="t('Delete')">
       <i class="fa fa-trash"></i>
     </button>
+    
+    <!-- Schema 编辑器模态框 - 使用 Teleport 渲染到 body，避免事件冒泡问题 -->
+    <Teleport to="body">
+      <SchemaEditorModal
+        v-model:visible="showSchemaEditor"
+        :node-type="nodeType"
+        :node-name="nodeName"
+        :initial-schema="initialSchema"
+        :on-save="handleSchemaSave"
+        @close="showSchemaEditor = false"
+      />
+    </Teleport>
   </div>
-
-  <!-- Schema 编辑器模态框 - 使用 Teleport 渲染到 body，避免事件冒泡问题 -->
-  <Teleport to="body">
-    <SchemaEditorModal
-      v-model:visible="showSchemaEditor"
-      :node-type="nodeType"
-      :node-name="nodeName"
-      :initial-schema="initialSchema"
-      :on-save="handleSchemaSave"
-      @close="showSchemaEditor = false"
-    />
-  </Teleport>
 </template>
 
 <script setup lang="ts">
@@ -41,10 +41,12 @@ import { Teleport } from 'vue'
 import { useMessage } from 'naive-ui'
 import axios from 'axios'
 import { get_session_api_headers } from '@/shared/api/auth'
+import { t } from '@/shared/i18n'
 import SchemaEditorModal from '@/core/components/SchemaEditorModal.vue'
 
-const props = defineProps<{
-  context: {
+interface Props {
+  // 支持两种接口：context 或直接 props
+  context?: {
     row: any
     entity: string
     openDetail: (name: string) => void
@@ -54,21 +56,37 @@ const props = defineProps<{
     t: (key: string) => string
     viewMode?: 'card' | 'list'
   }
-}>()
+  row?: any
+  entity?: string
+  viewMode?: 'card' | 'list'
+}
+
+interface Emits {
+  (e: 'view', row: any): void
+  (e: 'edit', row: any): void
+  (e: 'delete', row: any): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+// 兼容两种接口：优先使用直接 props，如果没有则使用 context
+const row = computed(() => props.row || props.context?.row)
+const entity = computed(() => props.entity || props.context?.entity)
+const viewMode = computed(() => props.viewMode || props.context?.viewMode || 'list')
 
 // 根据视图模式决定容器类名，组件自包含所有样式
 const containerClass = computed(() => {
-  const viewMode = props.context.viewMode || 'list'
-  return viewMode === 'card' ? 'actions-container card-actions' : 'actions-container col-actions'
+  return viewMode.value === 'card' ? 'actions-container card-actions' : 'actions-container col-actions'
 })
 
 const message = useMessage()
 const showSchemaEditor = ref(false)
 
-const nodeName = computed(() => props.context.row.name || '')
-const nodeType = computed(() => props.context.row.node_type || '')
+const nodeName = computed(() => row.value?.name || '')
+const nodeType = computed(() => row.value?.node_type || '')
 const initialSchema = computed(() => {
-  const schema = props.context.row.node_schema
+  const schema = row.value?.node_schema
   if (!schema) return {}
   if (typeof schema === 'string') {
     try {
@@ -84,17 +102,42 @@ const canEditSchema = computed(() => {
   return !!nodeType.value
 })
 
+// 事件处理函数
+function handleView() {
+  if (props.context?.openDetail) {
+    props.context.openDetail(row.value.name)
+  } else {
+    emit('view', row.value)
+  }
+}
+
+function handleEdit() {
+  if (props.context?.editRecord) {
+    props.context.editRecord(row.value)
+  } else {
+    emit('edit', row.value)
+  }
+}
+
+function handleDelete() {
+  if (props.context?.deleteRecord) {
+    props.context.deleteRecord(row.value.name)
+  } else {
+    emit('delete', row.value)
+  }
+}
+
 async function handleOpenSchemaEditor() {
   if (!canEditSchema.value) {
-    message.warning(props.context.t('Please select node type first'))
+    message.warning(t('Please select node type first'))
     return
   }
   
   // 如果列表数据中没有完整的 node_schema，需要从API获取完整记录
-  if (!props.context.row.node_schema) {
+  if (!row.value?.node_schema) {
     try {
       const response = await axios.get(
-        `/api/data/${encodeURIComponent(props.context.entity)}/${encodeURIComponent(nodeName.value)}`,
+        `/api/data/${encodeURIComponent(entity.value)}/${encodeURIComponent(nodeName.value)}`,
         {
           headers: get_session_api_headers(),
           withCredentials: true
@@ -103,12 +146,12 @@ async function handleOpenSchemaEditor() {
       
       const record = response.data?.data || {}
       // 更新 row 数据以便后续使用
-      if (record.node_schema) {
-        props.context.row.node_schema = record.node_schema
+      if (record.node_schema && row.value) {
+        row.value.node_schema = record.node_schema
       }
     } catch (error) {
       console.error('获取节点数据失败:', error)
-      message.error(props.context.t('Failed to load node data'))
+      message.error(t('Failed to load node data'))
       return
     }
   }
@@ -120,7 +163,7 @@ async function handleSchemaSave(schemaData: any) {
   try {
     // 保存 Schema 数据到后端
     const response = await axios.put(
-      `/api/data/${encodeURIComponent(props.context.entity)}/${encodeURIComponent(nodeName.value)}`,
+      `/api/data/${encodeURIComponent(entity.value)}/${encodeURIComponent(nodeName.value)}`,
       {
         node_schema: schemaData
       },
@@ -132,15 +175,17 @@ async function handleSchemaSave(schemaData: any) {
     
     if (response.data?.success !== false) {
       // 更新本地 row 数据
-      props.context.row.node_schema = schemaData
-      message.success(props.context.t('Schema saved successfully'))
+      if (row.value) {
+        row.value.node_schema = schemaData
+      }
+      message.success(t('Schema saved successfully'))
       showSchemaEditor.value = false
     } else {
-      throw new Error(response.data?.message || props.context.t('Save failed'))
+      throw new Error(response.data?.message || t('Save failed'))
     }
   } catch (error: any) {
     console.error('保存 Schema 失败:', error)
-    message.error(error?.response?.data?.message || error?.message || props.context.t('Save failed, please check permission and server logs'))
+    message.error(error?.response?.data?.message || error?.message || t('Save failed, please check permission and server logs'))
     throw error // 让组件处理错误显示
   }
 }