From 1fe27e25ca8cdf14f8663e57dbe0fcad045fec63 Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Sat, 1 Nov 2025 19:30:48 +0800
Subject: [PATCH] =?UTF-8?q?Icon=E5=AD=97=E6=AE=B5=E7=B1=BB=E5=9E=8B?=
 =?UTF-8?q?=E7=9B=B4=E6=8E=A5=E6=98=BE=E7=A4=BA=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../core/components/form/controls/Icon.vue    | 71 +++++++++++++++++--
 .../src/core/pagetype/GenericListPage.vue     | 18 +++++
 2 files changed, 84 insertions(+), 5 deletions(-)

diff --git a/apps/jingrow/frontend/src/core/components/form/controls/Icon.vue b/apps/jingrow/frontend/src/core/components/form/controls/Icon.vue
index 5fe2093..660921f 100644
--- a/apps/jingrow/frontend/src/core/components/form/controls/Icon.vue
+++ b/apps/jingrow/frontend/src/core/components/form/controls/Icon.vue
@@ -1,11 +1,17 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { NInput } from 'naive-ui'
+import { Icon } from '@iconify/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')
+
+// 获取图标值
+const iconValue = computed(() => {
+  return props.record[props.df.fieldname] || ''
+})
 </script>
 
 <template>
@@ -14,11 +20,27 @@ const labelLayout = computed(() => props.df.label_layout || 'vertical')
       {{ ctx.t(df.label || df.fieldname) }}
       <span v-if="df.reqd" class="required">*</span>
     </label>
-    <n-input 
-      v-model:value="record[df.fieldname]" 
-      :placeholder="ctx.t(df.fieldname)"
-      :disabled="!canEdit"
-    />
+    <!-- Icon 字段特殊布局：左边显示图标，右边显示字段值 -->
+    <div class="icon-field-content">
+      <!-- 左侧图标 -->
+      <div class="icon-display">
+        <Icon v-if="iconValue" :icon="iconValue" :width="24" :height="24" class="icon-gray" />
+        <span v-else class="icon-placeholder">—</span>
+      </div>
+      <!-- 右侧字段值 -->
+      <div class="icon-value-display">
+        <!-- 只读模式：显示文本值 -->
+        <span v-if="!canEdit" class="field-value-text">
+          {{ iconValue || '—' }}
+        </span>
+        <!-- 编辑模式：显示输入框 -->
+        <n-input 
+          v-else
+          v-model:value="record[df.fieldname]" 
+          :placeholder="ctx.t(df.fieldname)"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -26,6 +48,45 @@ const labelLayout = computed(() => props.df.label_layout || 'vertical')
 .field-wrapper :deep(.n-input) {
   flex: 1;
 }
+
+.icon-field-content {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+}
+
+.icon-display {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+}
+
+.icon-gray {
+  color: #9ca3af;
+}
+
+.icon-placeholder {
+  color: #9ca3af;
+  font-size: 14px;
+}
+
+.icon-value-display {
+  flex: 1;
+  min-width: 0;
+}
+
+.field-value-text {
+  color: #111827;
+  font-size: 14px;
+  min-height: 32px;
+  display: flex;
+  align-items: center;
+}
 </style>
 
 
diff --git a/apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue b/apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue
index 44055b2..5a7c0ce 100644
--- a/apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue
+++ b/apps/jingrow/frontend/src/core/pagetype/GenericListPage.vue
@@ -154,6 +154,9 @@
                         <span v-if="row[f.key] === 1 || row[f.key] === true" class="boolean-true">✓</span>
                         <span v-else class="boolean-false">○</span>
                       </template>
+                      <template v-else-if="isIconField(f.key) && row[f.key]">
+                        <Icon :icon="row[f.key]" :width="20" :height="20" class="icon-gray" />
+                      </template>
                       <template v-else>{{ formatDisplayValue(row[f.key], f.key) }}</template>
                     </span>
                   </template>
@@ -241,6 +244,9 @@
                   <span v-if="row[col.key] === 1 || row[col.key] === true" class="boolean-true">✓</span>
                   <span v-else class="boolean-false">○</span>
                 </template>
+                <template v-else-if="isIconField(col.key) && row[col.key]">
+                  <Icon :icon="row[col.key]" :width="20" :height="20" class="icon-gray" />
+                </template>
                 <template v-else-if="isSelectField(col.key) && row[col.key]">
                   <span 
                     class="select-badge" 
@@ -298,6 +304,7 @@
 import { onMounted, ref, computed, watch, shallowRef, markRaw } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { NInput, NPagination, useMessage } from 'naive-ui'
+import { Icon } from '@iconify/vue'
 import axios from 'axios'
 import { t } from '@/shared/i18n'
 import { get_session_api_headers } from '@/shared/api/auth'
@@ -1070,6 +1077,12 @@ function isSelectField(fieldName: string) {
   return fieldMeta?.fieldtype === 'Select'
 }
 
+// 检查是否为Icon类型字段
+function isIconField(fieldName: string) {
+  const fieldMeta = metaFields.value.find(f => f.fieldname === fieldName)
+  return fieldMeta?.fieldtype === 'Icon'
+}
+
 // Select字段颜色配置映射（柔和、低饱和度）
 // 格式：{ fieldName: { value: color } } 或 { 'global': { value: color } } 用于所有Select字段
 // 推荐使用柔和颜色，如：'#e0f2fe'（浅蓝）、'#dcfce7'（浅绿）等
@@ -1738,6 +1751,11 @@ function formatDisplayValue(value: any, fieldName: string) {
   font-size: 16px;
 }
 
+/* Icon 字段图标样式 - 灰色系 */
+.icon-gray {
+  color: #9ca3af;
+}
+
 /* 列表列通用样式 - 确保垂直居中 */
 .list-header > div:not(.col-checkbox),
 .list-item > div:not(.col-checkbox):not(.col-actions) {