优化pagetype详情页Icon图标渲染及输入方式

apps/jingrow/frontend/src/core/components/form/controls/Icon.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref, nextTick } from 'vue'
 import { NInput } from 'naive-ui'
 import { Icon } from '@iconify/vue'
+import IconPicker from '@/core/components/IconPicker.vue'
 
 const props = defineProps<{ df: any; record: Record<string, any>; canEdit: boolean; ctx: any }>()
 
@@ -9,9 +10,25 @@ const props = defineProps<{ df: any; record: Record<string, any>; canEdit: boole
 const labelLayout = computed(() => props.df.label_layout || 'vertical')
 
 // 获取图标值
-const iconValue = computed(() => {
-  return props.record[props.df.fieldname] || ''
+const iconValue = computed({
+  get: () => props.record[props.df.fieldname] || '',
+  set: (value) => {
+    props.record[props.df.fieldname] = value
+  }
 })
+
+// IconPicker 组件引用（用于触发打开）
+const iconPickerRef = ref<InstanceType<typeof IconPicker> | null>(null)
+
+// 打开图标选择器
+async function openIconPicker() {
+  await nextTick()
+  // 通过点击隐藏的 IconPicker 按钮来打开弹窗
+  const triggerButton = iconPickerRef.value?.$el?.querySelector('.icon-trigger') as HTMLElement
+  if (triggerButton) {
+    triggerButton.click()
+  }
+}
 </script>
 
 <template>
@@ -20,10 +37,32 @@ const iconValue = computed(() => {
       {{ ctx.t(df.label || df.fieldname) }}
       <span v-if="df.reqd" class="required">*</span>
     </label>
-    <!-- Icon 字段特殊布局：左边显示图标，右边显示字段值 -->
+    <!-- Icon 字段特殊布局：左边显示图标（可点击），右边显示字段值 -->
     <div class="icon-field-content">
-      <!-- 左侧图标 -->
-      <div class="icon-display">
+      <!-- 左侧图标（可点击打开选择器） -->
+      <div 
+        v-if="canEdit" 
+        class="icon-display clickable" 
+        @click="openIconPicker"
+        :title="ctx.t('Click to select icon')"
+      >
+        <Icon 
+          v-if="iconValue" 
+          :icon="iconValue" 
+          :width="24" 
+          :height="24" 
+          class="icon-gray icon-preview" 
+        />
+        <Icon 
+          v-else 
+          icon="tabler:apps" 
+          :width="24" 
+          :height="24" 
+          class="icon-gray icon-placeholder-icon" 
+        />
+      </div>
+      <!-- 只读模式：左侧仅显示图标 -->
+      <div v-else class="icon-display">
         <Icon v-if="iconValue" :icon="iconValue" :width="24" :height="24" class="icon-gray" />
         <span v-else class="icon-placeholder">—</span>
       </div>
@@ -33,14 +72,25 @@ const iconValue = computed(() => {
         <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)"
+          v-model:value="iconValue" 
+          :placeholder="ctx.t('Enter icon name or click icon to select')"
+          class="icon-input"
+          clearable
         />
       </div>
     </div>
+    
+    <!-- 图标选择器（隐藏触发按钮，通过自定义按钮触发）-->
+    <div v-if="canEdit" style="position: absolute; left: -9999px; opacity: 0; pointer-events: none;">
+      <IconPicker
+        ref="iconPickerRef"
+        :model-value="iconValue"
+        @update:model-value="iconValue = $event"
+      />
+    </div>
   </div>
 </template>
 
@@ -60,10 +110,28 @@ const iconValue = computed(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  min-width: 32px;
-  width: 32px;
-  height: 32px;
+  min-width: 36px;
+  width: 36px;
+  height: 36px;
   flex-shrink: 0;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+
+.icon-display.clickable {
+  cursor: pointer;
+  background-color: #f9fafb;
+  border: 1px solid #e5e7eb;
+}
+
+.icon-display.clickable:hover {
+  background-color: #f3f4f6;
+  border-color: #d1d5db;
+  transform: scale(1.05);
+}
+
+.icon-display.clickable:active {
+  transform: scale(0.98);
 }
 
 .icon-gray {
@@ -87,6 +155,20 @@ const iconValue = computed(() => {
   display: flex;
   align-items: center;
 }
+
+/* 编辑模式：输入框样式 */
+.icon-input {
+  flex: 1;
+  min-width: 0;
+}
+
+.icon-preview {
+  transition: all 0.2s ease;
+}
+
+.icon-placeholder-icon {
+  opacity: 0.5;
+}
 </style>