feat(ui): 更新图像模式模板选择逻辑与组件交互

- 在storage-keys.ts中新增文本到图像和图像到图像的模板选择存储键
- 在App.vue中优化模板管理器关闭逻辑，确保图像模式下模板列表刷新
- 在ImageWorkspace.vue中引入SelectWithConfig组件，增强模板选择的灵活性与可配置性
- 在useImageWorkspace.ts中完善模板恢复逻辑，支持不同模式下的模板选择持久化
- 在ModelManager.vue中支持外部事件切换页签，提升用户体验
- 增强了模板选择的用户交互反馈，确保更好的使用体验

Author: linshenkx

packages/core/src/constants/storage-keys.ts

@@ -41,7 +41,9 @@ export const TEMPLATE_SELECTION_KEYS = {
 export const IMAGE_MODE_KEYS = {
   SELECTED_TEXT_MODEL: 'app:image-mode:selected-text-model',
   SELECTED_IMAGE_MODEL: 'app:image-mode:selected-image-model',
-  SELECTED_TEMPLATE: 'app:image-mode:selected-template',
+  // 按模式分别存储模板选择
+  SELECTED_TEMPLATE_TEXT2IMAGE: 'app:image-mode:selected-template:text2image',
+  SELECTED_TEMPLATE_IMAGE2IMAGE: 'app:image-mode:selected-template:image2image',
   SELECTED_ITERATE_TEMPLATE: 'app:image-mode:selected-iterate-template',
   COMPARE_MODE_ENABLED: 'app:image-mode:compare-mode-enabled',
 } as const

packages/extension/src/App.vue

@@ -677,7 +677,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch, computed, inject, provide } from 'vue'; // Added computed, inject and provide
+import { ref, onMounted, onUnmounted, watch, computed, inject, provide } from 'vue'; // Added computed, inject and provide
 import { useI18n } from 'vue-i18n';
 import {
   NModal, NScrollbar, NSpace, NCard, NText, NH4, NTag, NButton,
@@ -717,6 +717,18 @@ const close = () => {
 // 活动标签（文本/图像）
 const activeTab = ref('text')
 
+// 支持外部通过事件切换页签
+if (typeof window !== 'undefined') {
+  const tabHandler = (e: Event) => {
+    try {
+      const tab = (e as CustomEvent).detail
+      if (tab === 'text' || tab === 'image') activeTab.value = tab
+    } catch {}
+  }
+  onMounted(() => window.addEventListener('model-manager:set-tab', tabHandler))
+  onUnmounted(() => window.removeEventListener('model-manager:set-tab', tabHandler))
+}
+
 
 // 打开新增弹窗（根据活动标签）
 const openAddForActiveTab = () => {

packages/ui/src/components/ModelManager.vue

@@ -0,0 +1,213 @@
+<template>
+  <NSelect
+    v-bind="forwardedAttrs"
+    :value="normalizedValue"
+    :options="mappedOptions"
+    :render-label="renderOptionLabel"
+    :render-tag="multiple ? renderSelectedTag : undefined"
+    @update:value="onUpdateValue"
+  >
+    <template #empty>
+      <slot name="empty">
+        <NSpace vertical align="center" style="padding: 12px 0;">
+          <NText depth="3">{{ emptyText || t('model.select.noAvailableModels') }}</NText>
+          <NButton
+            v-if="shouldShowEmptyConfigCTA"
+            type="tertiary"
+            size="small"
+            ghost
+            @click="emitConfig()"
+          >
+            <template #icon>
+              <span>⚙️</span>
+            </template>
+            {{ configText || t('model.select.configure') }}
+          </NButton>
+        </NSpace>
+      </slot>
+    </template>
+
+    <template #action>
+      <slot name="action">
+        <div v-if="shouldShowConfigAction" style="padding: 8px 12px;">
+          <NButton quaternary size="small" @click="emitConfig()">
+            <template #icon>
+              <span>⚙️</span>
+            </template>
+            {{ configText || t('model.select.configure') }}
+          </NButton>
+        </div>
+      </slot>
+    </template>
+  </NSelect>
+</template>
+
+<script setup lang="ts">
+import { computed, h, useAttrs } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { NSelect, NSpace, NButton, NText } from 'naive-ui'
+
+interface Props {
+  modelValue: any
+  options: any[]
+  getPrimary: (opt: any) => string
+  getSecondary?: (opt: any) => string
+  getValue: (opt: any) => string | number
+  selectedTooltip?: boolean
+  showConfigAction?: boolean
+  showEmptyConfigCTA?: boolean
+  configText?: string
+  emptyText?: string
+  multiple?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: null,
+  options: () => [],
+  getSecondary: undefined,
+  selectedTooltip: true,
+  showConfigAction: false,
+  showEmptyConfigCTA: false,
+  configText: undefined,
+  emptyText: undefined,
+  multiple: false
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: any]
+  'config': [payload?: any]
+}>()
+
+const attrs = useAttrs() as Record<string, any>
+const { t } = useI18n()
+
+// 检测是否有 config 事件处理器 - 始终显示配置按钮确保功能可用
+// 动态显示配置相关功能（由父级显式开启）
+const shouldShowConfigAction = computed(() => !!props.showConfigAction)
+const shouldShowEmptyConfigCTA = computed(() => !!props.showEmptyConfigCTA)
+
+// 将外部原始 options 转换为 NSelect 可识别的选项，label 为两行结构
+const mappedOptions = computed(() => {
+  return (props.options || []).map((opt: any) => {
+    const primary = props.getPrimary(opt) || ''
+    const secondary = props.getSecondary ? (props.getSecondary(opt) || '') : ''
+    const value = props.getValue(opt)
+    return {
+      label: primary,
+      value,
+      raw: opt,
+      primary,
+      secondary
+    }
+  })
+})
+
+// 使用 Naive UI 官方的 render-label 自定义选项渲染
+const renderOptionLabel = (option: any) => {
+  const primary = option?.primary || ''
+  const secondary = option?.secondary || ''
+  const title = props.selectedTooltip && secondary ? `${primary} · ${secondary}` : undefined
+  return h('div', { class: 'swc-opt', title }, [
+    h('div', { class: 'swc-primary' }, primary),
+    secondary ? h('div', { class: 'swc-secondary' }, secondary) : null
+  ])
+}
+
+// 多选 tag 渲染
+const renderSelectedTag = ({ option }: { option: any }) => {
+  const title = props.selectedTooltip && option?.secondary ? `${option.primary} · ${option.secondary}` : undefined
+  return h('span', { title }, option?.primary || '')
+}
+
+// 透传属性，若无自定义 filter，则提供默认过滤（匹配主/副文本）
+const forwardedAttrs = computed(() => {
+  const hasCustomFilter = Object.prototype.hasOwnProperty.call(attrs, 'filter')
+  const internalFilter = (pattern: string, option: any) => {
+    const p = (pattern || '').toLowerCase()
+    return (
+      (option?.primary || '').toLowerCase().includes(p) ||
+      (option?.secondary || '').toLowerCase().includes(p)
+    )
+  }
+  const { ['onUpdate:value']: _omitUpdate, multiple: attrsMultiple, class: rootClass, ['menu-props']: menuPropsKebab, menuProps, ...rest } = attrs as any
+
+  // 规范：通过 class & menu-props.class 注入样式作用域，避免使用 :deep
+  const mergedRootClass = [rootClass, 'swc-select'].filter(Boolean).join(' ')
+  const mp = (menuPropsKebab || menuProps || {}) as Record<string, any>
+  const mergedMenuClass = [mp.class, 'swc-select-menu'].filter(Boolean).join(' ')
+  const normalizedMenuProps = { ...mp, class: mergedMenuClass }
+
+  return {
+    filterable: true,
+    multiple: attrsMultiple ?? props.multiple,
+    class: mergedRootClass,
+    menuProps: normalizedMenuProps,
+    ...rest,
+    filter: hasCustomFilter ? (attrs as any).filter : internalFilter
+  }
+})
+
+const normalizedValue = computed(() => props.modelValue)
+
+const onUpdateValue = (val: any) => {
+  emit('update:modelValue', val)
+  const cb = (attrs as any)['onUpdate:value']
+  if (typeof cb === 'function') cb(val)
+}
+
+const emitConfig = () => emit('config')
+</script>
+
+<style scoped>
+.swc-opt {
+  display: flex;
+  flex-direction: column;
+}
+.swc-primary {
+  font-weight: 500;
+  line-height: 1.35;
+}
+.swc-secondary {
+  font-size: 12px;
+  opacity: 0.72;
+  line-height: 1.3;
+  white-space: normal;
+}
+</style>
+
+<style>
+/* 使用类作用域（通过 class & menu-props 注入），避免 :deep */
+.swc-select-menu .n-base-select-option__content {
+  white-space: normal;
+  line-height: 1.35;
+  display: block;
+}
+.swc-select-menu .n-base-select-option {
+  align-items: flex-start;
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+.swc-select-menu .swc-opt {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+}
+.swc-select-menu .swc-primary {
+  font-weight: 600;
+  line-height: 1.35;
+  margin-bottom: 2px;
+}
+.swc-select-menu .swc-secondary {
+  font-size: 12px;
+  opacity: 0.65;
+  line-height: 1.25;
+  white-space: normal;
+  word-break: break-word;
+}
+/* 选中区仅显示主行 */
+.swc-select .n-base-selection .swc-secondary,
+.swc-select .n-base-selection-label .swc-secondary {
+  display: none;
+}
+</style>