From 5bf02fa4df670076d9ff00335a1d20a4b0eaedaf Mon Sep 17 00:00:00 2001
From: linshen <32978552+linshenkx@users.noreply.github.com>
Date: Sat, 18 Oct 2025 21:43:53 +0800
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E6=94=B6=E8=97=8F=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97=E5=8A=9F=E8=83=BD=E5=9B=BD=E9=99=85=E5=8C=96=E3=80=81?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E4=BC=98=E5=8C=96=E4=B8=8E=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

此提交包含收藏模块的国际化支持、布局和交互优化，以及核心组件的重构，以提升可维护性、用户体验和性能。

**主要特性与改进:**

1.  **收藏功能国际化 (i18n):**
    *   实现了收藏模块所有组件的三语言（中、英、繁）国际化支持。
    *   国际化了 `CategoryTreeSelect.vue`、`FavoriteCard.vue`、`FavoriteManager.vue` 和 `SaveFavoriteDialog.vue` 中的所有硬编码文本。
    *   更新了 `zh-CN.ts`、`en-US.ts` 和 `zh-TW.ts` 翻译资源，新增了必要的翻译键。
    *   彻底消除了 UI 层的硬编码中文文本。

2.  **收藏管理器布局与交互优化:**
    *   重构 `FavoriteCard` 为固定高度网格布局，解决了卡片高度不一致问题。
    *   新增 `useTooltipTheme` 工具统一 Tooltip 样式，并优化了其智能定位逻辑和空间计算。
    *   实现了响应式网格布局 (移动端1列/平板2列/桌面4列)，并对 `resize` 事件进行节流和缓存计算结果以优化性能。
    *   改进了公开标识的可见性，使用 `NTag` 替代纯图标。
    *   将 CSS `v-bind` 改为动态 `style` 绑定提升稳定性。
    *   `FavoriteManager` 移除了滚动容器，改为固定高度工具栏、可滚动卡片区域与固定底部分页的设计。
    *   精简了视图模式，移除了列表视图，仅保留卡片视图，并删除了视图切换按钮组。
    *   优化了工具栏布局为单行，左侧包含搜索/筛选/计数，右侧为操作按钮，并支持响应式设计。
    *   精简了代码和依赖，删除了多余的组件导入和状态管理，减少了约 180 行代码。
    *   **修复:** 修复了 `FavoriteManager` 编辑对话框中 `NGrid` 和 `NGridItem` 组件缺失导入导致的运行时警告。

3.  **收藏对话框组件重构:**
    *   新增了 `CategoryTreeSelect` 通用组件，支持树状分类选择、内置分类管理和自动加载数据。
    *   改造 `SaveFavoriteDialog` 为通用组件，支持新建/保存模式，动态标题和字段禁用逻辑，并集成了 `CategoryTreeSelect`。
    *   简化了 `FavoriteManager` 组件，删除了 120 行重复代码，统一使用 `SaveFavoriteDialog` 和 `CategoryTreeSelect`。
    *   遵循 DRY、KISS、YAGNI 原则，消除了约 150 行重复代码，提升了可维护性。

**Breaking Changes:**

*   收藏管理器布局从响应式 CSS Grid 改为固定网格 + 分页设计。
*   每页显示数量现在根据屏幕尺寸动态调整 (4-8项)。
*   移除了列表视图 (list view)，仅保留卡片视图 (grid view)。
---
 .../ui/src/components/CategoryTreeSelect.vue  |  169 +++
 packages/ui/src/components/FavoriteCard.vue   |  579 ++++++---
 .../ui/src/components/FavoriteManager.vue     | 1095 ++++-------------
 .../ui/src/components/SaveFavoriteDialog.vue  |  280 +++--
 packages/ui/src/composables/index.ts          |    1 +
 .../ui/src/composables/useTooltipTheme.ts     |   59 +
 packages/ui/src/i18n/locales/en-US.ts         |  141 +++
 packages/ui/src/i18n/locales/zh-CN.ts         |  141 +++
 packages/ui/src/i18n/locales/zh-TW.ts         |  174 +++
 9 files changed, 1501 insertions(+), 1138 deletions(-)
 create mode 100644 packages/ui/src/components/CategoryTreeSelect.vue
 create mode 100644 packages/ui/src/composables/useTooltipTheme.ts

diff --git a/packages/ui/src/components/CategoryTreeSelect.vue b/packages/ui/src/components/CategoryTreeSelect.vue
new file mode 100644
index 00000000..caa2f87c
--- /dev/null
+++ b/packages/ui/src/components/CategoryTreeSelect.vue
@@ -0,0 +1,169 @@
+<template>
+  <NTreeSelect
+    v-model:value="internalValue"
+    :options="treeOptions"
+    :placeholder="placeholder || t('favorites.dialog.categoryPlaceholder')"
+    :clearable="clearable"
+    :consistent-menu-width="consistentMenuWidth"
+    :style="computedStyle"
+    @update:value="handleValueChange"
+  >
+    <template v-if="showManageButton" #action>
+      <NButton
+        text
+        block
+        @click="handleOpenManager"
+        style="justify-content: flex-start; padding: 8px 12px;"
+      >
+        <template #icon>
+          <NIcon><Folder /></NIcon>
+        </template>
+        {{ t('favorites.manager.categoryManager.title') }}
+      </NButton>
+    </template>
+  </NTreeSelect>
+
+  <!-- 分类管理对话框 -->
+  <NModal
+    v-if="showManageButton"
+    v-model:show="managerVisible"
+    preset="card"
+    :title="t('favorites.manager.categoryManager.title')"
+    :mask-closable="true"
+    :style="{ width: 'min(800px, 90vw)', height: 'min(600px, 80vh)' }"
+  >
+    <CategoryManager @category-updated="handleCategoryUpdated" />
+  </NModal>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, inject, type Ref } from 'vue';
+import { NTreeSelect, NButton, NIcon, NModal, type TreeSelectOption } from 'naive-ui';
+import { Folder } from '@vicons/tabler';
+import { useI18n } from 'vue-i18n';
+import CategoryManager from './CategoryManager.vue';
+import type { FavoriteCategory } from '@prompt-optimizer/core';
+import type { AppServices } from '../types/services';
+
+const { t } = useI18n();
+
+interface Props {
+  /** 当前选中的分类ID */
+  modelValue?: string;
+  /** 占位符文本 */
+  placeholder?: string;
+  /** 是否可清除 */
+  clearable?: boolean;
+  /** 是否显示"全部分类"选项(用于筛选场景) */
+  showAllOption?: boolean;
+  /** 是否显示管理按钮 */
+  showManageButton?: boolean;
+  /** 自定义样式 */
+  style?: string;
+  /** 是否保持菜单宽度一致 */
+  consistentMenuWidth?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  placeholder: '',
+  clearable: true,
+  showAllOption: false,
+  showManageButton: true,
+  style: 'min-width: 180px; max-width: 250px;',
+  consistentMenuWidth: true
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string];
+  'change': [value: string];
+  'category-updated': [];
+}>();
+
+const services = inject<Ref<AppServices | null> | null>('services', null);
+
+// 内部状态
+const internalValue = ref(props.modelValue);
+const categories = ref<FavoriteCategory[]>([]);
+const managerVisible = ref(false);
+
+// 计算树状分类选项
+const treeOptions = computed<TreeSelectOption[]>(() => {
+  const buildTree = (parentId?: string): TreeSelectOption[] => {
+    return categories.value
+      .filter(cat => cat.parentId === parentId)
+      .map(cat => ({
+        label: cat.name,
+        key: cat.id,
+        children: buildTree(cat.id)
+      }));
+  };
+
+  const tree = buildTree(undefined);
+
+  // 如果是筛选模式,添加"全部分类"选项
+  if (props.showAllOption) {
+    return [
+      { label: t('favorites.manager.allCategories'), key: '' },
+      ...tree
+    ];
+  }
+
+  return tree;
+});
+
+// 计算样式
+const computedStyle = computed(() => props.style);
+
+// 加载分类数据
+const loadCategories = async () => {
+  const servicesValue = services?.value;
+  if (!servicesValue?.favoriteManager) {
+    console.warn('收藏管理器未初始化,跳过分类加载');
+    return;
+  }
+
+  try {
+    categories.value = await servicesValue.favoriteManager.getCategories();
+  } catch (error: any) {
+    console.error('加载分类失败:', error);
+  }
+};
+
+// 处理值变化
+const handleValueChange = (value: string) => {
+  internalValue.value = value;
+  emit('update:modelValue', value);
+  emit('change', value);
+};
+
+// 打开分类管理器
+const handleOpenManager = () => {
+  managerVisible.value = true;
+};
+
+// 分类更新后刷新数据
+const handleCategoryUpdated = async () => {
+  await loadCategories();
+  emit('category-updated');
+};
+
+// 监听外部值变化
+watch(() => props.modelValue, (newValue) => {
+  if (newValue !== internalValue.value) {
+    internalValue.value = newValue;
+  }
+});
+
+// 监听服务初始化
+watch(() => services?.value?.favoriteManager, (favoriteManager) => {
+  if (favoriteManager) {
+    loadCategories();
+  }
+}, { immediate: true });
+
+// 暴露方法
+defineExpose({
+  reloadCategories: loadCategories
+});
+</script>
diff --git a/packages/ui/src/components/FavoriteCard.vue b/packages/ui/src/components/FavoriteCard.vue
index cb1e2ead..341ed2db 100644
--- a/packages/ui/src/components/FavoriteCard.vue
+++ b/packages/ui/src/components/FavoriteCard.vue
@@ -1,167 +1,234 @@
 <template>
   <NCard
-    class="favorite-card"
     hoverable
     :class="{ 'is-selected': isSelected }"
-    :content-style="{ padding: '12px' }"
-    :header-style="{ padding: '12px' }"
-    :footer-style="{ padding: '12px' }"
+    :content-style="{ padding: '16px', display: 'flex', flexDirection: 'column', gap: '12px' }"
+    :header-style="{ padding: '12px 16px' }"
+    :footer-style="{ padding: '12px 16px' }"
+    :style="{ minHeight: `${cardHeight}px`, maxHeight: `${cardHeight}px` }"
     @click="$emit('select', favorite)"
   >
-    <!-- 卡片头部 -->
+    <!-- 卡片头部：确保内容不溢出 -->
     <template #header>
-      <NSpace align="center" justify="space-between" :wrap="false" :size="8">
+      <NSpace align="center" justify="space-between" :wrap="false" :size="8" style="overflow: hidden;">
         <NEllipsis style="flex: 1; min-width: 0; font-weight: 600; font-size: 14px;">
           {{ favorite.title }}
         </NEllipsis>
-        <NTag
-          v-if="category"
-          :color="{ color: category.color, textColor: 'white' }"
-          size="small"
-          style="flex-shrink: 0;"
-        >
-          {{ category.name }}
-        </NTag>
+        <div style="flex-shrink: 0; max-width: 120px; overflow: hidden;">
+          <NTag
+            v-if="category"
+            :color="{ color: category.color, textColor: 'white' }"
+            size="small"
+            :bordered="false"
+            style="max-width: 100%;"
+          >
+            <NEllipsis style="max-width: 100px;">
+              {{ category.name }}
+            </NEllipsis>
+          </NTag>
+        </div>
       </NSpace>
     </template>
 
-    <!-- 卡片内容 -->
-    <NSpace vertical :size="6" class="card-body">
-      <NEllipsis
-        :line-clamp="3"
-        :tooltip="{ width: 400, placement: 'top' }"
+    <!-- 卡片内容：精确控制区域大小，防止溢出 -->
+    <NSpace vertical :size="6" style="flex: 1; min-height: 0; overflow: hidden;">
+      <!-- 内容区域：固定2行 -->
+      <NTooltip
+        trigger="hover"
+        :show-arrow="false"
+        :overlay-style="tooltipOverlayStyle"
+        :content-style="[
+          tooltipContentStyle,
+          contentTooltipMaxHeight
+            ? { maxHeight: `${contentTooltipMaxHeight}px` }
+            : null
+        ]"
+        :theme-overrides="tooltipThemeOverrides"
+        :placement="contentTooltipPlacement"
+        :width="contentTooltipWidth"
+        to="body"
+        :flip="true"
+        scrollable
+        @update:show="(value) => value && handleContentTooltipEnter()"
       >
-        <NText style="font-size: 13px; line-height: 1.5;">{{ favorite.content }}</NText>
-      </NEllipsis>
+        <template #trigger>
+          <div
+            ref="contentTriggerRef"
+            style="height: 42px; overflow: hidden;"
+            @mouseenter="handleContentTooltipEnter"
+          >
+            <NEllipsis :line-clamp="2" :tooltip="false">
+              <NText style="font-size: 13px; line-height: 1.5;">
+                {{ favorite.content }}
+              </NText>
+            </NEllipsis>
+          </div>
+        </template>
+        <NText class="tooltip-text">{{ favorite.content }}</NText>
+      </NTooltip>
 
-      <NEllipsis v-if="favorite.description" :line-clamp="1" :tooltip="false">
-        <NText depth="3" style="font-size: 12px; line-height: 1.4;">
-          {{ favorite.description }}
-        </NText>
-      </NEllipsis>
+      <!-- 描述区域：固定1行 -->
+      <NTooltip
+        v-if="favorite.description"
+        trigger="hover"
+        :show-arrow="false"
+        :overlay-style="tooltipOverlayStyle"
+        :content-style="[
+          tooltipContentStyle,
+          descriptionTooltipMaxHeight
+            ? { maxHeight: `${descriptionTooltipMaxHeight}px` }
+            : null
+        ]"
+        :theme-overrides="tooltipThemeOverrides"
+        :placement="descriptionTooltipPlacement"
+        :width="descriptionTooltipWidth"
+        to="body"
+        :flip="true"
+        scrollable
+        @update:show="(value) => value && handleDescriptionTooltipEnter()"
+      >
+        <template #trigger>
+          <div
+            ref="descriptionTriggerRef"
+            style="height: 20px; overflow: hidden;"
+            @mouseenter="handleDescriptionTooltipEnter"
+          >
+            <NEllipsis :line-clamp="1" :tooltip="false">
+              <NText depth="3" style="font-size: 12px; line-height: 1.4;">
+                {{ favorite.description }}
+              </NText>
+            </NEllipsis>
+          </div>
+        </template>
+        <NText class="tooltip-text">{{ favorite.description }}</NText>
+      </NTooltip>
+      <div v-else style="height: 20px; overflow: hidden;"></div>
 
-      <!-- 标签 -->
-      <NSpace v-if="favorite.tags.length > 0" :size="4" :wrap="false" class="card-tags">
-        <NTag
-          v-for="tag in favorite.tags.slice(0, 3)"
-          :key="tag"
-          size="small"
-          type="info"
-        >
-          {{ tag }}
-        </NTag>
-        <NTag
-          v-if="favorite.tags.length > 3"
-          size="small"
-          type="default"
-        >
-          +{{ favorite.tags.length - 3 }}
-        </NTag>
-      </NSpace>
+      <!-- 标签区域：固定高度，最多显示2个标签 -->
+      <div style="height: 22px; overflow: hidden;">
+        <NSpace v-if="favorite.tags.length > 0" :size="4" :wrap="false">
+          <NTag
+            v-for="tag in favorite.tags.slice(0, 2)"
+            :key="tag"
+            size="small"
+            type="info"
+            :bordered="false"
+          >
+            {{ tag }}
+          </NTag>
+          <NTag
+            v-if="favorite.tags.length > 2"
+            size="small"
+            type="default"
+            :bordered="false"
+          >
+            +{{ favorite.tags.length - 2 }}
+          </NTag>
+        </NSpace>
+      </div>
     </NSpace>
 
-    <!-- 卡片底部 -->
+    <!-- 卡片底部：使用 NSpace 布局 -->
     <template #footer>
       <NSpace justify="space-between" align="center" :wrap="false">
-        <NSpace :size="8" align="center" :wrap="false">
+        <!-- 左侧信息 -->
+        <NSpace :size="12" align="center" :wrap="false">
           <NText depth="3" style="font-size: 12px; white-space: nowrap;">
             {{ formatDate(favorite.updatedAt) }}
           </NText>
-          <NTooltip trigger="hover">
+          <NTooltip
+            trigger="hover"
+            :overlay-style="tooltipOverlayStyle"
+            :content-style="tooltipContentStyle"
+            :theme-overrides="tooltipThemeOverrides"
+            placement="bottom"
+            to="body"
+            :flip="true"
+          >
             <template #trigger>
-              <NSpace :size="2" align="center" style="cursor: help;">
+              <NSpace :size="4" align="center" style="cursor: help;">
                 <NIcon size="14" depth="3"><Eye /></NIcon>
-                <NText depth="3" style="font-size: 12px;">
-                  {{ favorite.useCount }}
-                </NText>
+                <NText depth="3" style="font-size: 12px;">{{ favorite.useCount }}</NText>
               </NSpace>
             </template>
-            使用次数
+            {{ t('favorites.manager.card.useCount') }}
           </NTooltip>
         </NSpace>
 
-        <!-- 操作按钮 -->
+        <!-- 右侧操作按钮 -->
         <NSpace :size="4" class="card-actions">
-          <NTooltip trigger="hover">
+          <NTooltip
+            trigger="hover"
+            :overlay-style="tooltipOverlayStyle"
+            :content-style="tooltipContentStyle"
+            :theme-overrides="tooltipThemeOverrides"
+            placement="bottom"
+            to="body"
+            :flip="true"
+          >
             <template #trigger>
-              <NButton
-                size="small"
-                quaternary
-                circle
-                @click.stop="$emit('copy', favorite)"
-              >
-                <template #icon>
-                  <NIcon><Copy /></NIcon>
-                </template>
+              <NButton size="small" quaternary circle @click.stop="$emit('copy', favorite)">
+                <template #icon><NIcon><Copy /></NIcon></template>
               </NButton>
             </template>
-            复制内容
+            {{ t('favorites.manager.card.copyContent') }}
           </NTooltip>
 
-          <NTooltip trigger="hover">
+          <NTooltip
+            trigger="hover"
+            :overlay-style="tooltipOverlayStyle"
+            :content-style="tooltipContentStyle"
+            :theme-overrides="tooltipThemeOverrides"
+            placement="bottom"
+            to="body"
+            :flip="true"
+          >
             <template #trigger>
-              <NButton
-                size="small"
-                quaternary
-                circle
-                @click.stop="$emit('use', favorite)"
-              >
-                <template #icon>
-                  <NIcon><PlayerPlay /></NIcon>
-                </template>
+              <NButton size="small" quaternary circle @click.stop="$emit('use', favorite)">
+                <template #icon><NIcon><PlayerPlay /></NIcon></template>
               </NButton>
             </template>
-            立即使用
+            {{ t('favorites.manager.card.useNow') }}
           </NTooltip>
 
-          <NTooltip trigger="hover">
+          <NTooltip
+            trigger="hover"
+            :overlay-style="tooltipOverlayStyle"
+            :content-style="tooltipContentStyle"
+            :theme-overrides="tooltipThemeOverrides"
+            placement="bottom"
+            to="body"
+            :flip="true"
+          >
             <template #trigger>
-              <NButton
-                size="small"
-                quaternary
-                circle
-                @click.stop="$emit('edit', favorite)"
-              >
-                <template #icon>
-                  <NIcon><Edit /></NIcon>
-                </template>
+              <NButton size="small" quaternary circle @click.stop="$emit('edit', favorite)">
+                <template #icon><NIcon><Edit /></NIcon></template>
               </NButton>
             </template>
-            编辑
+            {{ t('favorites.manager.card.edit') }}
           </NTooltip>
 
           <NPopconfirm
             @positive-click="$emit('delete', favorite)"
-            positive-text="删除"
-            negative-text="取消"
+            :positive-text="t('favorites.manager.card.delete')"
+            :negative-text="t('favorites.manager.card.cancel')"
           >
             <template #trigger>
-              <NButton
-                size="small"
-                quaternary
-                circle
-                type="error"
-                @click.stop
-              >
-                <template #icon>
-                  <NIcon><Trash /></NIcon>
-                </template>
+              <NButton size="small" quaternary circle type="error" @click.stop>
+                <template #icon><NIcon><Trash /></NIcon></template>
               </NButton>
             </template>
-            确定删除"{{ favorite.title }}"吗？
+            {{ t('favorites.manager.card.deleteConfirm', { title: favorite.title }) }}
           </NPopconfirm>
         </NSpace>
       </NSpace>
     </template>
-
-    <!-- 公开标识 -->
-    <div v-if="favorite.isPublic" class="public-badge">
-      <NIcon color="#f39c12" size="16"><Star /></NIcon>
-    </div>
   </NCard>
 </template>
 
 <script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+import { useDebounceFn } from '@vueuse/core';
 import {
   NCard,
   NEllipsis,
@@ -181,16 +248,22 @@ import {
   Edit,
   Trash
 } from '@vicons/tabler';
+import { useI18n } from 'vue-i18n';
 import type { FavoritePrompt, FavoriteCategory } from '@prompt-optimizer/core';
+import { useTooltipTheme } from '../composables/useTooltipTheme';
+
+const { t } = useI18n();
 
 interface Props {
   favorite: FavoritePrompt;
   category?: FavoriteCategory;
   isSelected?: boolean;
+  cardHeight?: number;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  isSelected: false
+  isSelected: false,
+  cardHeight: 240
 });
 
 const emit = defineEmits<{
@@ -201,6 +274,224 @@ const emit = defineEmits<{
   'use': [favorite: FavoritePrompt];
 }>();
 
+type TooltipPlacement =
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'bottom'
+  | 'top-start'
+  | 'top-end'
+  | 'top';
+
+const VIEWPORT_MARGIN = 16;
+const TOOLTIP_GUTTER = 12;
+const TOTAL_MARGIN = VIEWPORT_MARGIN + TOOLTIP_GUTTER;
+const MIN_TOOLTIP_HEIGHT = 160;
+const CONTENT_TOOLTIP_WIDTH = 440;
+const CONTENT_TOOLTIP_MIN_WIDTH = 240;
+const DESCRIPTION_TOOLTIP_WIDTH = 360;
+const DESCRIPTION_TOOLTIP_MIN_WIDTH = 200;
+
+const {
+  tooltipThemeOverrides,
+  tooltipOverlayStyle,
+  tooltipContentStyle
+} = useTooltipTheme({
+  maxWidth: `calc(100vw - ${TOTAL_MARGIN * 2}px)`,
+  maxHeight: `calc(100vh - ${TOTAL_MARGIN * 2}px)`
+}); // 统一 tooltip 背景并限制整体尺寸
+
+const contentTooltipPlacement = ref<TooltipPlacement>('bottom-start');
+const contentTooltipWidth = ref<number>(CONTENT_TOOLTIP_WIDTH);
+const contentTooltipMaxHeight = ref<number>(0);
+const descriptionTooltipPlacement = ref<TooltipPlacement>('bottom-start');
+const descriptionTooltipWidth = ref<number>(DESCRIPTION_TOOLTIP_WIDTH);
+const descriptionTooltipMaxHeight = ref<number>(0);
+const contentTriggerRef = ref<HTMLElement | null>(null);
+const descriptionTriggerRef = ref<HTMLElement | null>(null);
+
+// 缓存 rect 结果，避免频繁计算
+const cachedContentRect = ref<DOMRect | null>(null);
+const cachedDescriptionRect = ref<DOMRect | null>(null);
+
+const getViewportWidth = () => {
+  if (typeof window !== 'undefined') {
+    return window.innerWidth;
+  }
+  return 1440;
+};
+
+const getViewportHeight = () => {
+  if (typeof window !== 'undefined') {
+    return window.innerHeight;
+  }
+  return 900;
+};
+
+interface TooltipLayoutResult {
+  placement: TooltipPlacement;
+  width: number;
+  maxHeight: number;
+}
+
+const calculateTooltipLayout = (rect: DOMRect, desiredWidth: number, minWidth: number): TooltipLayoutResult => {
+  const viewportWidth = getViewportWidth();
+  const viewportHeight = getViewportHeight();
+  const safeAreaWidth = Math.max(viewportWidth - TOTAL_MARGIN * 2, minWidth);
+  const safeAreaHeight = Math.max(viewportHeight - TOTAL_MARGIN * 2, MIN_TOOLTIP_HEIGHT);
+  const targetWidth = Math.min(desiredWidth, safeAreaWidth);
+
+  // 修复空间计算：正确计算左右可用空间
+  // spaceRight: 元素右边缘到视口右边缘的距离
+  // spaceLeft: 元素左边缘到视口左边缘的距离
+  const spaceRight = Math.max(0, viewportWidth - rect.right - TOTAL_MARGIN);
+  const spaceLeft = Math.max(0, rect.left - TOTAL_MARGIN);
+  const spaceDown = Math.max(0, viewportHeight - rect.bottom - TOTAL_MARGIN);
+  const spaceUp = Math.max(0, rect.top - TOTAL_MARGIN);
+
+  if (spaceRight <= 0 && spaceLeft <= 0) {
+    return {
+      placement: spaceDown >= spaceUp ? 'bottom' : 'top',
+      width: targetWidth,
+      maxHeight: safeAreaHeight
+    };
+  }
+
+  let verticalPlacement: 'bottom' | 'top' = spaceDown >= spaceUp ? 'bottom' : 'top';
+  let availableVertical = verticalPlacement === 'bottom' ? spaceDown : spaceUp;
+
+  const oppositeVertical = verticalPlacement === 'bottom' ? spaceUp : spaceDown;
+  if (availableVertical < MIN_TOOLTIP_HEIGHT && oppositeVertical > availableVertical) {
+    verticalPlacement = verticalPlacement === 'bottom' ? 'top' : 'bottom';
+    availableVertical = oppositeVertical;
+  }
+
+  if (availableVertical <= 0) {
+    availableVertical = safeAreaHeight;
+  }
+
+  let placement: TooltipPlacement = verticalPlacement === 'bottom' ? 'bottom-start' : 'top-start';
+  let available = placement.endsWith('end') ? spaceLeft : spaceRight;
+  if (spaceLeft > spaceRight) {
+    placement = verticalPlacement === 'bottom' ? 'bottom-end' : 'top-end';
+    available = spaceLeft;
+  }
+
+  let width = Math.min(targetWidth, available);
+
+  const oppositeAvailable = placement.endsWith('start') ? spaceLeft : spaceRight;
+  if (width < Math.min(minWidth, targetWidth) && oppositeAvailable > available) {
+    placement = placement.endsWith('start')
+      ? (verticalPlacement === 'bottom' ? 'bottom-end' : 'top-end')
+      : (verticalPlacement === 'bottom' ? 'bottom-start' : 'top-start');
+    available = oppositeAvailable;
+    width = Math.min(targetWidth, available);
+  }
+
+  const minRequired = Math.min(minWidth, targetWidth, available);
+  if (minRequired > 0 && width < minRequired) {
+    width = minRequired;
+  }
+
+  if (width <= 0) {
+    placement = verticalPlacement;
+    width = targetWidth;
+    available = safeAreaWidth;
+  }
+
+  const finalWidth = placement === 'bottom'
+    ? Math.min(width, safeAreaWidth)
+    : Math.min(width, available, safeAreaWidth);
+
+  const maxHeight = Math.max(
+    Math.min(safeAreaHeight, availableVertical),
+    Math.min(safeAreaHeight, MIN_TOOLTIP_HEIGHT)
+  );
+
+  return {
+    placement,
+    width: Math.max(
+      finalWidth,
+      Math.min(safeAreaWidth, minWidth, finalWidth || targetWidth)
+    ),
+    maxHeight
+  };
+};
+
+const updateContentTooltipLayout = (rect: DOMRect) => {
+  const { placement, width, maxHeight } = calculateTooltipLayout(
+    rect,
+    CONTENT_TOOLTIP_WIDTH,
+    CONTENT_TOOLTIP_MIN_WIDTH
+  );
+  contentTooltipPlacement.value = placement;
+  contentTooltipWidth.value = width;
+  contentTooltipMaxHeight.value = maxHeight;
+};
+
+const updateDescriptionTooltipLayout = (rect: DOMRect) => {
+  const { placement, width, maxHeight } = calculateTooltipLayout(
+    rect,
+    DESCRIPTION_TOOLTIP_WIDTH,
+    DESCRIPTION_TOOLTIP_MIN_WIDTH
+  );
+  descriptionTooltipPlacement.value = placement;
+  descriptionTooltipWidth.value = width;
+  descriptionTooltipMaxHeight.value = maxHeight;
+};
+
+const handleContentTooltipEnter = () => {
+  const target = contentTriggerRef.value;
+  if (!target) return;
+
+  // 使用缓存的 rect，避免重复计算
+  if (!cachedContentRect.value) {
+    cachedContentRect.value = target.getBoundingClientRect();
+  }
+  updateContentTooltipLayout(cachedContentRect.value);
+};
+
+const handleDescriptionTooltipEnter = () => {
+  const target = descriptionTriggerRef.value;
+  if (!target) return;
+
+  // 使用缓存的 rect，避免重复计算
+  if (!cachedDescriptionRect.value) {
+    cachedDescriptionRect.value = target.getBoundingClientRect();
+  }
+  updateDescriptionTooltipLayout(cachedDescriptionRect.value);
+};
+
+const handleResize = () => {
+  // resize 时清除缓存并重新计算
+  cachedContentRect.value = null;
+  cachedDescriptionRect.value = null;
+
+  if (contentTriggerRef.value) {
+    cachedContentRect.value = contentTriggerRef.value.getBoundingClientRect();
+    updateContentTooltipLayout(cachedContentRect.value);
+  }
+  if (descriptionTriggerRef.value) {
+    cachedDescriptionRect.value = descriptionTriggerRef.value.getBoundingClientRect();
+    updateDescriptionTooltipLayout(cachedDescriptionRect.value);
+  }
+};
+
+// 节流处理 resize 事件，避免频繁计算
+const debouncedResize = useDebounceFn(handleResize, 150);
+
+onMounted(() => {
+  handleResize();
+  if (typeof window !== 'undefined') {
+    window.addEventListener('resize', debouncedResize);
+  }
+});
+
+onBeforeUnmount(() => {
+  if (typeof window !== 'undefined') {
+    window.removeEventListener('resize', debouncedResize);
+  }
+});
+
 const formatDate = (timestamp: number) => {
   const date = new Date(timestamp);
   const now = new Date();
@@ -211,13 +502,13 @@ const formatDate = (timestamp: number) => {
     const hours = Math.floor(diff / (1000 * 60 * 60));
     if (hours === 0) {
       const minutes = Math.floor(diff / (1000 * 60));
-      return minutes <= 1 ? '刚刚' : `${minutes}分钟前`;
+      return minutes <= 1 ? t('favorites.manager.time.justNow') : t('favorites.manager.time.minutesAgo', { minutes });
     }
-    return `${hours}小时前`;
+    return t('favorites.manager.time.hoursAgo', { hours });
   } else if (days === 1) {
-    return '昨天';
+    return t('favorites.manager.time.yesterday');
   } else if (days < 7) {
-    return `${days}天前`;
+    return t('favorites.manager.time.daysAgo', { days });
   } else {
     return date.toLocaleDateString();
   }
@@ -225,72 +516,54 @@ const formatDate = (timestamp: number) => {
 </script>
 
 <style scoped>
-.favorite-card {
-  @apply relative cursor-pointer transition-all duration-200;
-  @apply border border-gray-200 dark:border-gray-700;
-  height: 280px;
+/* 卡片基础样式 */
+.n-card {
+  transition: all 0.2s ease;
+  cursor: pointer;
+  height: 100%;
   display: flex;
   flex-direction: column;
-  overflow: hidden; /* 防止内容溢出卡片 */
 }
 
-.favorite-card:hover {
-  @apply shadow-lg;
-  transform: translateY(-2px);
-}
-
-.favorite-card.is-selected {
-  @apply ring-2 ring-blue-500 border-blue-500;
-}
-
-.card-body {
+/* 确保卡片内容区域正确撑满 */
+.n-card :deep(.n-card__content) {
   flex: 1;
   min-height: 0;
-  overflow: hidden;
   display: flex;
   flex-direction: column;
-  gap: 6px;
-}
-
-.card-tags {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  min-height: 22px;
-  flex-wrap: nowrap;
   overflow: hidden;
 }
 
-/* 操作按钮默认隐藏 */
+.n-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.is-selected :deep(.n-card) {
+  border-color: rgb(var(--primary-color));
+  box-shadow: 0 0 0 2px rgba(var(--primary-color), 0.2);
+}
+
+/* 操作按钮悬停显示 */
 .card-actions {
   opacity: 0;
   transition: opacity 0.2s ease;
 }
 
-.favorite-card:hover .card-actions {
+.n-card:hover .card-actions {
   opacity: 1;
 }
 
-/* 公开标识 */
-.public-badge {
-  @apply absolute;
-  top: 12px;
-  right: 12px;
-  @apply bg-yellow-100 dark:bg-yellow-900/50 rounded-full;
-  padding: 4px;
-  backdrop-filter: blur(4px);
-  z-index: 10;
-}
-
-/* 移动端优化 */
+/* 移动端始终显示按钮 */
 @media (max-width: 768px) {
-  .favorite-card {
-    height: auto;
-    min-height: 240px;
-  }
-
   .card-actions {
     opacity: 1;
   }
 }
+
+.tooltip-text {
+  white-space: pre-wrap;
+  word-break: break-word;
+  display: block;
+}
 </style>
diff --git a/packages/ui/src/components/FavoriteManager.vue b/packages/ui/src/components/FavoriteManager.vue
index 80b9f172..a9b0b8be 100644
--- a/packages/ui/src/components/FavoriteManager.vue
+++ b/packages/ui/src/components/FavoriteManager.vue
@@ -4,306 +4,128 @@
       :show="show"
       preset="card"
       :style="{ width: '90vw', maxWidth: '1200px', maxHeight: '90vh' }"
-      title="收藏管理"
+      :title="t('favorites.manager.title')"
       size="large"
       :bordered="false"
       :segmented="true"
       @update:show="(value) => !value && close()"
     >
-      <NScrollbar style="max-height: 75vh;">
-        <div class="favorite-manager-content">
-    <!-- 工具栏 -->
-    <NSpace vertical :size="12" class="toolbar">
-      <!-- 第一行：主要操作 -->
-      <NSpace justify="space-between" align="center" :wrap="false">
-        <!-- 左侧：视图切换和搜索 -->
-        <NSpace :size="12" align="center" :wrap="false">
-          <NButtonGroup size="small">
-            <NButton
-              :type="viewMode === 'grid' ? 'primary' : 'default'"
-              @click="viewMode = 'grid'"
+      <!-- 工具栏（固定） -->
+      <div class="toolbar">
+        <NSpace justify="space-between" align="center" :wrap="false">
+          <!-- 左侧：搜索和筛选 -->
+          <NSpace :size="12" align="center" :wrap="false" style="flex: 1; min-width: 0;">
+            <NInput
+              v-model:value="searchKeyword"
+              :placeholder="t('favorites.manager.searchPlaceholder')"
+              clearable
+              style="min-width: 200px; max-width: 400px; flex: 1;"
+              @update:value="handleSearch"
             >
-              <template #icon>
-                <NIcon><LayoutGrid /></NIcon>
+              <template #prefix>
+                <NIcon><Search /></NIcon>
               </template>
-            </NButton>
-            <NButton
-              :type="viewMode === 'list' ? 'primary' : 'default'"
-              @click="viewMode = 'list'"
+            </NInput>
+
+            <CategoryTreeSelect
+              v-model="selectedCategory"
+              :placeholder="t('favorites.manager.allCategories')"
+              show-all-option
+              @change="handleFilterChange"
+              @category-updated="handleCategoryUpdated"
+            />
+
+            <NSelect
+              v-model:value="selectedTags"
+              :options="tagOptions"
+              :placeholder="t('favorites.manager.allTags')"
+              multiple
+              clearable
+              filterable
+              max-tag-count="responsive"
+              style="min-width: 180px; max-width: 300px;"
+              @update:value="handleFilterChange"
+            />
+
+            <NText depth="3" style="font-size: 14px; white-space: nowrap;">
+              {{ t('favorites.manager.totalCount', { count: filteredFavorites.length }) }}
+            </NText>
+          </NSpace>
+
+          <!-- 右侧：操作按钮 -->
+          <NSpace :size="8" align="center" :wrap="false">
+            <NDropdown
+              :options="actionMenuOptions"
+              @select="handleActionMenuSelect"
             >
+              <NButton secondary>
+                <template #icon>
+                  <NIcon><DotsVertical /></NIcon>
+                </template>
+              </NButton>
+            </NDropdown>
+
+            <NButton @click="openImportDialog" secondary>
               <template #icon>
-                <NIcon><List /></NIcon>
+                <NIcon><Upload /></NIcon>
               </template>
+              <span class="button-text">{{ t('favorites.manager.import') }}</span>
             </NButton>
-          </NButtonGroup>
 
-          <NInput
-            v-model:value="searchKeyword"
-            placeholder="搜索收藏..."
-            clearable
-            style="min-width: 200px; max-width: 400px; flex: 1;"
-            @update:value="handleSearch"
-          >
-            <template #prefix>
-              <NIcon><Search /></NIcon>
-            </template>
-          </NInput>
-        </NSpace>
-
-        <!-- 右侧：操作按钮 -->
-        <NSpace :size="8" align="center" :wrap="false">
-          <NButton @click="handleOpenCategoryManager" secondary>
-            <template #icon>
-              <NIcon><Folder /></NIcon>
-            </template>
-            <span class="button-text">分类</span>
-          </NButton>
-
-          <NDropdown
-            :options="actionMenuOptions"
-            @select="handleActionMenuSelect"
-          >
-            <NButton secondary>
+            <NButton type="primary" @click="handleCreateFavorite">
               <template #icon>
-                <NIcon><DotsVertical /></NIcon>
+                <NIcon><Plus /></NIcon>
               </template>
+              <span class="button-text">{{ t('favorites.manager.add') }}</span>
             </NButton>
-          </NDropdown>
-
-          <NButton @click="openImportDialog" secondary>
-            <template #icon>
-              <NIcon><Upload /></NIcon>
-            </template>
-            <span class="button-text">导入</span>
-          </NButton>
-
-          <NButton type="primary" @click="handleCreateFavorite">
-            <template #icon>
-              <NIcon><Plus /></NIcon>
-            </template>
-            <span class="button-text">添加</span>
-          </NButton>
+          </NSpace>
         </NSpace>
-      </NSpace>
+      </div>
 
-      <!-- 第二行：筛选器 -->
-      <NSpace :size="12" align="center" :wrap="true">
-        <NTreeSelect
-          v-model:value="selectedCategory"
-          :options="categoryTreeOptions"
-          placeholder="全部分类"
-          clearable
-          consistent-menu-width
-          style="min-width: 180px; max-width: 250px;"
-          @update:value="handleFilterChange"
-        />
-
-        <NSelect
-          v-model:value="selectedTags"
-          :options="tagOptions"
-          placeholder="全部标签"
-          multiple
-          clearable
-          filterable
-          max-tag-count="responsive"
-          style="min-width: 180px; max-width: 300px;"
-          @update:value="handleFilterChange"
-        />
-
-        <NText depth="3" style="font-size: 14px;">
-          共 {{ filteredFavorites.length }} 项
-        </NText>
-      </NSpace>
-    </NSpace>
-
-    <!-- 收藏列表 -->
-    <div class="content">
+      <!-- 收藏列表（固定区域，无滚动） -->
+      <div class="content">
       <template v-if="filteredFavorites.length === 0">
         <n-empty
-          :description="searchKeyword ? '没有找到匹配的收藏' : '还没有收藏任何提示词'"
+          :description="searchKeyword ? t('favorites.manager.emptySearchResult') : t('favorites.manager.emptyDescription')"
           size="large"
         >
           <template #extra>
             <n-button @click="$emit('optimize-prompt')">
-              开始优化提示词
+              {{ t('favorites.manager.startOptimize') }}
             </n-button>
           </template>
         </n-empty>
       </template>
 
       <template v-else>
-        <div v-if="viewMode === 'grid'" class="grid-view">
-          <FavoriteCard
-            v-for="favorite in paginatedFavorites"
-            :key="favorite.id"
-            :favorite="favorite"
-            :category="getCategoryById(favorite.category)"
-            @select="handlePreviewFavorite"
-            @copy="handleCopyFavorite"
-            @use="handleUseFavorite"
-            @delete="handleDeleteFavorite"
-            @edit="handleEditFavorite"
-            @share="handleShareFavorite"
-            @toggle-category="handleToggleCategory"
-          />
-        </div>
-
-        <div v-else class="list-view">
-          <NList hoverable clickable>
-            <NListItem v-for="favorite in paginatedFavorites" :key="favorite.id">
-              <template #prefix>
-                <NSpace vertical :size="4" style="flex: 1; min-width: 0;">
-                  <!-- 标题行 -->
-                  <NSpace align="center" :size="8" :wrap="false">
-                    <NEllipsis style="flex: 1; font-weight: 600; font-size: 15px;">
-                      {{ favorite.title }}
-                    </NEllipsis>
-                    <NTag
-                      v-if="getCategoryById(favorite.category)"
-                      :color="{ color: getCategoryById(favorite.category)!.color, textColor: 'white' }"
-                      size="small"
-                    >
-                      {{ getCategoryById(favorite.category)!.name }}
-                    </NTag>
-                  </NSpace>
-
-                  <!-- 内容预览 -->
-                  <NEllipsis :line-clamp="2" style="font-size: 14px;">
-                    {{ favorite.content }}
-                  </NEllipsis>
-
-                  <!-- 描述 -->
-                  <NEllipsis v-if="favorite.description" :line-clamp="1">
-                    <NText depth="3" style="font-size: 12px;">
-                      {{ favorite.description }}
-                    </NText>
-                  </NEllipsis>
-
-                  <!-- 标签和元信息 -->
-                  <NSpace justify="space-between" align="center" :wrap="false">
-                    <NSpace :size="4" :wrap="true" v-if="favorite.tags.length > 0">
-                      <NTag
-                        v-for="tag in favorite.tags.slice(0, 3)"
-                        :key="tag"
-                        size="small"
-                        type="info"
-                      >
-                        {{ tag }}
-                      </NTag>
-                      <NTag
-                        v-if="favorite.tags.length > 3"
-                        size="small"
-                        type="default"
-                      >
-                        +{{ favorite.tags.length - 3 }}
-                      </NTag>
-                    </NSpace>
-
-                    <NSpace :size="12" align="center">
-                      <NText depth="3" style="font-size: 12px;">
-                        {{ formatDate(favorite.updatedAt) }}
-                      </NText>
-                      <NSpace :size="4" align="center">
-                        <NIcon size="14"><Eye /></NIcon>
-                        <NText depth="3" style="font-size: 12px;">
-                          {{ favorite.useCount }}
-                        </NText>
-                      </NSpace>
-                    </NSpace>
-                  </NSpace>
-                </NSpace>
-              </template>
-
-              <template #suffix>
-                <NSpace :size="4">
-                  <NTooltip trigger="hover">
-                    <template #trigger>
-                      <NButton
-                        size="small"
-                        quaternary
-                        circle
-                        @click.stop="handleCopyFavorite(favorite)"
-                      >
-                        <template #icon>
-                          <NIcon><Copy /></NIcon>
-                        </template>
-                      </NButton>
-                    </template>
-                    复制
-                  </NTooltip>
-
-                  <NTooltip trigger="hover">
-                    <template #trigger>
-                      <NButton
-                        size="small"
-                        quaternary
-                        circle
-                        @click.stop="handleUseFavorite(favorite)"
-                      >
-                        <template #icon>
-                          <NIcon><PlayerPlay /></NIcon>
-                        </template>
-                      </NButton>
-                    </template>
-                    使用
-                  </NTooltip>
-
-                  <NTooltip trigger="hover">
-                    <template #trigger>
-                      <NButton
-                        size="small"
-                        quaternary
-                        circle
-                        @click.stop="handleEditFavorite(favorite)"
-                      >
-                        <template #icon>
-                          <NIcon><Edit /></NIcon>
-                        </template>
-                      </NButton>
-                    </template>
-                    编辑
-                  </NTooltip>
-
-                  <NPopconfirm
-                    @positive-click="handleDeleteFavorite(favorite)"
-                    positive-text="删除"
-                    negative-text="取消"
-                  >
-                    <template #trigger>
-                      <NButton
-                        size="small"
-                        quaternary
-                        circle
-                        type="error"
-                        @click.stop
-                      >
-                        <template #icon>
-                          <NIcon><Trash /></NIcon>
-                        </template>
-                      </NButton>
-                    </template>
-                    确定删除"{{ favorite.title }}"吗？
-                  </NPopconfirm>
-                </NSpace>
-              </template>
-            </NListItem>
-          </NList>
-        </div>
+        <!-- 固定网格布局：使用 NGrid 确保卡片大小一致 -->
+        <NGrid :x-gap="20" :y-gap="20" :cols="gridCols">
+          <NGridItem v-for="favorite in paginatedFavorites" :key="favorite.id">
+            <FavoriteCard
+              :favorite="favorite"
+              :category="getCategoryById(favorite.category)"
+              :card-height="cardHeight"
+              @select="handlePreviewFavorite"
+              @copy="handleCopyFavorite"
+              @use="handleUseFavorite"
+              @delete="handleDeleteFavorite"
+              @edit="handleEditFavorite"
+              @share="handleShareFavorite"
+              @toggle-category="handleToggleCategory"
+            />
+          </NGridItem>
+        </NGrid>
       </template>
-    </div>
+      </div>
 
-    <!-- 分页 -->
-    <NSpace v-if="totalPages > 1" justify="center" class="pagination">
+      <!-- 分页（固定在底部，始终显示） -->
+    <NSpace v-if="filteredFavorites.length > 0" justify="center" class="pagination">
       <NPagination
         v-model:page="currentPage"
-        :page-count="totalPages"
         :page-size="pageSize"
         :item-count="filteredFavorites.length"
-        show-size-picker
-        :page-sizes="[12, 24, 48, 96]"
         show-quick-jumper
         :page-slot="7"
-        @update:page-size="handlePageSizeChange"
       >
         <template #prefix="{ itemCount }">
           <NText depth="3">共 {{ itemCount }} 项</NText>
@@ -328,11 +150,11 @@
     <n-modal
       v-model:show="importState.visible"
       preset="card"
-      title="导入收藏"
+      :title="t('favorites.manager.importDialog.title')"
       :style="{ width: 'min(520px, 90vw)' }"
     >
       <n-form label-placement="top">
-        <n-form-item label="选择 JSON 文件">
+        <n-form-item :label="t('favorites.manager.importDialog.selectFile')">
           <n-upload
             :max="1"
             accept=".json,application/json"
@@ -346,164 +168,53 @@
                   <n-icon size="32">
                     <Upload />
                   </n-icon>
-                  <n-text depth="3">点击或拖拽文件到此区域</n-text>
-                  <n-text depth="3" style="font-size: 12px;">支持 .json 文件</n-text>
+                  <n-text depth="3">{{ t('favorites.manager.importDialog.uploadHint') }}</n-text>
+                  <n-text depth="3" style="font-size: 12px;">{{ t('favorites.manager.importDialog.supportFormat') }}</n-text>
                 </n-space>
               </div>
             </n-upload-dragger>
           </n-upload>
         </n-form-item>
-        <n-form-item label="或粘贴导出的收藏 JSON">
+        <n-form-item :label="t('favorites.manager.importDialog.orPasteJson')">
           <n-input
             v-model:value="importState.rawJson"
             type="textarea"
-            placeholder="粘贴收藏数据..."
+            :placeholder="t('favorites.manager.importDialog.pastePlaceholder')"
             :autosize="{ minRows: 4, maxRows: 10 }"
           />
         </n-form-item>
-        <n-form-item label="合并策略">
+        <n-form-item :label="t('favorites.manager.importDialog.mergeStrategy')">
           <n-radio-group v-model:value="importState.mergeStrategy">
-            <n-radio-button value="skip">跳过重复</n-radio-button>
-            <n-radio-button value="overwrite">覆盖重复</n-radio-button>
-            <n-radio-button value="merge">创建副本</n-radio-button>
+            <n-radio-button value="skip">{{ t('favorites.manager.importDialog.skipDuplicate') }}</n-radio-button>
+            <n-radio-button value="overwrite">{{ t('favorites.manager.importDialog.overwriteDuplicate') }}</n-radio-button>
+            <n-radio-button value="merge">{{ t('favorites.manager.importDialog.createCopy') }}</n-radio-button>
           </n-radio-group>
         </n-form-item>
       </n-form>
       <template #action>
         <n-space justify="end">
-          <n-button @click="closeImportDialog" :disabled="importState.importing">取消</n-button>
+          <n-button @click="closeImportDialog" :disabled="importState.importing">{{ t('favorites.manager.importDialog.cancel') }}</n-button>
           <n-button type="primary" :loading="importState.importing" @click="handleImportConfirm">
-            导入
+            {{ t('favorites.manager.importDialog.import') }}
           </n-button>
         </n-space>
       </template>
     </n-modal>
 
-    <!-- 收藏编辑 -->
-    <n-modal
-      v-model:show="editState.visible"
-      preset="card"
-      title="编辑收藏"
-      :style="{ width: 'min(90vw, 1200px)', height: 'min(85vh, 900px)' }"
-      :mask-closable="false"
-    >
-      <n-scrollbar style="max-height: calc(85vh - 150px);">
-        <div style="display: flex; flex-direction: column; gap: 16px;">
-          <!-- 基础信息面板 -->
-          <n-card title="📋 基础信息" :bordered="false" :segmented="{ content: true }" size="small">
-            <n-form label-placement="left" :label-width="80">
-              <n-grid :cols="2" :x-gap="16">
-                <!-- 左列 -->
-                <n-grid-item>
-                  <n-form-item label="标题" required>
-                    <n-input
-                      v-model:value="editState.form.title"
-                      placeholder="为这个提示词起个名字"
-                      maxlength="100"
-                      show-count
-                    />
-                  </n-form-item>
-
-                  <n-form-item label="分类">
-                    <n-select
-                      v-model:value="editState.form.category"
-                      :options="createCategoryOptions"
-                      placeholder="选择分类（可选）"
-                      clearable
-                    />
-                  </n-form-item>
-
-                  <n-form-item label="功能模式" required>
-                    <n-select
-                      v-model:value="editState.form.functionMode"
-                      :options="functionModeOptions"
-                      @update:value="handleEditFunctionModeChange"
-                    />
-                  </n-form-item>
-                </n-grid-item>
-
-                <!-- 右列 -->
-                <n-grid-item>
-                  <n-form-item label="描述">
-                    <n-input
-                      v-model:value="editState.form.description"
-                      type="textarea"
-                      placeholder="描述这个提示词的用途和特点"
-                      :rows="3"
-                      maxlength="300"
-                      show-count
-                    />
-                  </n-form-item>
-
-                  <!-- 动态显示：优化模式或图像模式 -->
-                  <n-form-item
-                    v-if="editState.form.functionMode === 'basic' || editState.form.functionMode === 'context'"
-                    label="优化模式"
-                  >
-                    <n-select
-                      v-model:value="editState.form.optimizationMode"
-                      :options="optimizationModeOptions"
-                      placeholder="选择优化模式"
-                    />
-                  </n-form-item>
-
-                  <n-form-item
-                    v-if="editState.form.functionMode === 'image'"
-                    label="图像模式"
-                  >
-                    <n-select
-                      v-model:value="editState.form.imageSubMode"
-                      :options="imageSubModeOptions"
-                      placeholder="选择图像模式"
-                    />
-                  </n-form-item>
-                </n-grid-item>
-              </n-grid>
-
-              <!-- 标签（跨越两列） -->
-              <n-form-item label="标签">
-                <n-dynamic-tags
-                  v-model:value="editState.form.tags"
-                  :max="10"
-                  placeholder="输入标签后按回车添加"
-                />
-              </n-form-item>
-            </n-form>
-          </n-card>
-
-          <!-- 正文内容区域 -->
-          <div>
-            <n-divider style="margin: 0 0 12px 0;">
-              <span style="font-weight: 600;">📝 正文内容</span>
-              <span style="color: #ff4d4f; margin-left: 4px;">*</span>
-            </n-divider>
-            <OutputDisplayCore
-              :content="editState.form.content"
-              mode="editable"
-              :enabled-actions="['copy', 'edit']"
-              height="400px"
-              placeholder="在这里输入提示词内容..."
-              @update:content="editState.form.content = $event"
-            />
-          </div>
-        </div>
-      </n-scrollbar>
-
-      <template #action>
-        <n-space justify="end">
-          <n-button @click="closeEditDialog" :disabled="editState.editing">取消</n-button>
-          <n-button type="primary" :loading="editState.editing" @click="handleEditConfirm">
-            保存
-          </n-button>
-        </n-space>
-      </template>
-    </n-modal>
+    <!-- 收藏编辑对话框 -->
+    <SaveFavoriteDialog
+      :show="editState.visible"
+      mode="edit"
+      :favorite="editState.favorite"
+      @update:show="editState.visible = $event"
+      @saved="handleFavoriteSaved"
+    />
 
     <!-- 分类管理 -->
     <n-modal
       :show="categoryManagerVisible"
       preset="card"
-      title="分类管理"
+      :title="t('favorites.manager.categoryManager.title')"
       :mask-closable="true"
       :style="{ width: 'min(800px, 90vw)', height: 'min(600px, 80vh)' }"
       @update:show="categoryManagerVisible = $event"
@@ -511,148 +222,29 @@
       <CategoryManager @category-updated="handleCategoryUpdated" />
     </n-modal>
 
-    <!-- 新建收藏对话框 -->
-    <n-modal
-      v-model:show="createState.visible"
-      preset="card"
-      title="新建收藏"
-      :style="{ width: 'min(90vw, 1200px)', height: 'min(85vh, 900px)' }"
-      :mask-closable="false"
-    >
-      <n-scrollbar style="max-height: calc(85vh - 150px);">
-        <div style="display: flex; flex-direction: column; gap: 16px;">
-          <!-- 基础信息面板 -->
-          <n-card title="📋 基础信息" :bordered="false" :segmented="{ content: true }" size="small">
-            <n-form label-placement="left" :label-width="80">
-              <n-grid :cols="2" :x-gap="16">
-                <!-- 左列 -->
-                <n-grid-item>
-                  <n-form-item label="标题" required>
-                    <n-input
-                      v-model:value="createState.form.title"
-                      placeholder="为这个提示词起个名字"
-                      maxlength="100"
-                      show-count
-                    />
-                  </n-form-item>
-
-                  <n-form-item label="分类">
-                    <n-select
-                      v-model:value="createState.form.category"
-                      :options="createCategoryOptions"
-                      placeholder="选择分类（可选）"
-                      clearable
-                    />
-                  </n-form-item>
-
-                  <n-form-item label="功能模式" required>
-                    <n-select
-                      v-model:value="createState.form.functionMode"
-                      :options="functionModeOptions"
-                      @update:value="handleFunctionModeChange"
-                    />
-                  </n-form-item>
-                </n-grid-item>
-
-                <!-- 右列 -->
-                <n-grid-item>
-                  <n-form-item label="描述">
-                    <n-input
-                      v-model:value="createState.form.description"
-                      type="textarea"
-                      placeholder="描述这个提示词的用途和特点"
-                      :rows="3"
-                      maxlength="300"
-                      show-count
-                    />
-                  </n-form-item>
-
-                  <!-- 动态显示：优化模式或图像模式 -->
-                  <n-form-item
-                    v-if="createState.form.functionMode === 'basic' || createState.form.functionMode === 'context'"
-                    label="优化模式"
-                  >
-                    <n-select
-                      v-model:value="createState.form.optimizationMode"
-                      :options="optimizationModeOptions"
-                      placeholder="选择优化模式"
-                    />
-                  </n-form-item>
-
-                  <n-form-item
-                    v-if="createState.form.functionMode === 'image'"
-                    label="图像模式"
-                  >
-                    <n-select
-                      v-model:value="createState.form.imageSubMode"
-                      :options="imageSubModeOptions"
-                      placeholder="选择图像模式"
-                    />
-                  </n-form-item>
-                </n-grid-item>
-              </n-grid>
-
-              <!-- 标签（跨越两列） -->
-              <n-form-item label="标签">
-                <n-dynamic-tags
-                  v-model:value="createState.form.tags"
-                  :max="10"
-                  placeholder="输入标签后按回车添加"
-                />
-              </n-form-item>
-            </n-form>
-          </n-card>
-
-          <!-- 正文内容区域 -->
-          <div>
-            <n-divider style="margin: 0 0 12px 0;">
-              <span style="font-weight: 600;">📝 正文内容</span>
-              <span style="color: #ff4d4f; margin-left: 4px;">*</span>
-            </n-divider>
-            <OutputDisplayCore
-              :content="createState.form.content"
-              mode="editable"
-              :enabled-actions="['copy', 'edit']"
-              height="400px"
-              placeholder="在这里输入提示词内容..."
-              @update:content="createState.form.content = $event"
-            />
-          </div>
-        </div>
-      </n-scrollbar>
-
-      <template #action>
-        <n-space justify="end">
-          <n-button @click="closeCreateDialog" :disabled="createState.creating">取消</n-button>
-          <n-button type="primary" :loading="createState.creating" @click="handleCreateConfirm">
-            保存
-          </n-button>
-        </n-space>
-      </template>
-    </n-modal>
-      </div>
-    </NScrollbar>
+    <!-- 新建/编辑收藏对话框 -->
+    <SaveFavoriteDialog
+      :show="createState.visible"
+      mode="create"
+      @update:show="createState.visible = $event"
+      @saved="handleFavoriteSaved"
+    />
   </NModal>
   </ToastUI>
 </template>
 
 <script setup lang="ts">
-import { h, inject, onMounted, reactive, ref, watch, computed, type Ref } from 'vue';
+import { h, inject, onBeforeUnmount, onMounted, reactive, ref, watch, computed, type Ref } from 'vue';
+import { useDebounceFn } from '@vueuse/core';
 import {
   NButton,
-  NButtonGroup,
   NIcon,
-  NTreeSelect,
   NSelect,
-  NDynamicTags,
   NInput,
   NDropdown,
   NSpace,
   NEmpty,
-  NList,
-  NListItem,
   NPagination,
-  NTag,
   NText,
   NModal,
   NForm,
@@ -661,35 +253,28 @@ import {
   NRadioButton,
   NUpload,
   NUploadDragger,
-  NCard,
-  NDivider,
-  NScrollbar,
-  NTooltip,
-  NPopconfirm,
-  NEllipsis,
+  NGrid,
+  NGridItem,
   type UploadFileInfo,
   type UploadChangeParam,
   type TreeSelectOption
 } from 'naive-ui';
+import { useI18n } from 'vue-i18n';
 import { useToast } from '../composables/useToast';
 import ToastUI from './Toast.vue';
+
+const { t } = useI18n();
 import FavoriteCard from './FavoriteCard.vue';
 import OutputDisplayFullscreen from './OutputDisplayFullscreen.vue';
-import OutputDisplayCore from './OutputDisplayCore.vue';
 import CategoryManager from './CategoryManager.vue';
+import CategoryTreeSelect from './CategoryTreeSelect.vue';
+import SaveFavoriteDialog from './SaveFavoriteDialog.vue';
 import {
-  LayoutGrid,
-  List,
   Search,
   DotsVertical,
   Upload,
   Download,
   Trash,
-  Copy,
-  PlayerPlay,
-  Eye,
-  Edit,
-  Folder,
   Plus
 } from '@vicons/tabler';
 import type { FavoritePrompt, FavoriteCategory } from '@prompt-optimizer/core';
@@ -722,8 +307,6 @@ const message = useToast();
 const loading = ref(false);
 const favorites = ref<FavoritePrompt[]>([]);
 const categories = ref<FavoriteCategory[]>([]);
-const viewMode = ref<'grid' | 'list'>('grid');
-const pageSize = ref(24);
 const currentPage = ref(1);
 const searchKeyword = ref('');
 const selectedCategory = ref<string>('');
@@ -737,36 +320,17 @@ const importState = reactive({
 });
 const editState = reactive({
   visible: false,
-  editing: false,
-  favorite: null as FavoritePrompt | null,
-  form: {
-    title: '',
-    description: '',
-    content: '',
-    category: '',
-    tags: [] as string[],
-    functionMode: 'basic' as 'basic' | 'context' | 'image',
-    optimizationMode: 'system' as 'system' | 'user' | undefined,
-    imageSubMode: undefined as 'text2image' | 'image2image' | undefined
-  }
+  favorite: null as FavoritePrompt | null
 });
 const createState = reactive({
-  visible: false,
-  creating: false,
-  form: {
-    title: '',
-    description: '',
-    content: '',
-    category: '',
-    tags: [] as string[],
-    functionMode: 'basic' as 'basic' | 'context' | 'image',
-    optimizationMode: 'system' as 'system' | 'user' | undefined,
-    imageSubMode: undefined as 'text2image' | 'image2image' | undefined
-  }
+  visible: false
 });
 const previewFavorite = ref<FavoritePrompt | null>(null);
 const categoryManagerVisible = ref(false);
 
+// 响应式的视口宽度
+const viewportWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 1280);
+
 // 计算属性
 const filteredFavorites = computed(() => {
   let result = favorites.value;
@@ -797,8 +361,6 @@ const filteredFavorites = computed(() => {
   return result;
 });
 
-const totalPages = computed(() => Math.ceil(filteredFavorites.value.length / pageSize.value));
-
 const paginatedFavorites = computed(() => {
   const start = (currentPage.value - 1) * pageSize.value;
   const end = start + pageSize.value;
@@ -807,7 +369,7 @@ const paginatedFavorites = computed(() => {
 
 const categoryOptions = computed(() => {
   return [
-    { label: '全部分类', value: '' },
+    { label: t('favorites.manager.allCategories'), value: '' },
     ...categories.value.map(cat => ({
       label: cat.name,
       value: cat.id
@@ -828,7 +390,7 @@ const categoryTreeOptions = computed<TreeSelectOption[]>(() => {
   };
 
   return [
-    { label: '全部分类', key: '' },
+    { label: t('favorites.manager.allCategories'), key: '' },
     ...buildTree(undefined)
   ];
 });
@@ -864,32 +426,6 @@ const tagOptions = computed(() => {
     }));
 });
 
-// 新建收藏专用分类选项（不包含"全部分类"）
-const createCategoryOptions = computed(() => {
-  return categories.value.map(cat => ({
-    label: cat.name,
-    value: cat.id
-  }));
-});
-
-// 功能模式选项
-const functionModeOptions = [
-  { label: '基础', value: 'basic' },
-  { label: '上下文', value: 'context' },
-  { label: '图像', value: 'image' }
-];
-
-// 优化模式选项（用于 basic/context）
-const optimizationModeOptions = [
-  { label: '系统提示词', value: 'system' },
-  { label: '用户提示词', value: 'user' }
-];
-
-// 图像子模式选项（用于 image）
-const imageSubModeOptions = [
-  { label: '文生图', value: 'text2image' },
-  { label: '图生图', value: 'image2image' }
-];
 
 const previewVisible = computed({
   get: () => previewFavorite.value !== null,
@@ -913,9 +449,40 @@ const previewOriginalContent = computed(() => {
   return previewFavorite.value.metadata?.originalContent ?? '';
 });
 
-const actionMenuOptions = [
+// 网格布局配置：根据视口宽度自适应列数
+// 移动端 (< 768px): 1 列
+// 平板 (768-1023px): 2 列
+// 桌面 (>= 1024px): 4 列
+const gridCols = computed(() => {
+  const width = viewportWidth.value;
+  if (width < 768) return 1;
+  if (width < 1024) return 2;
+  return 4;
+});
+
+// 计算每个卡片的高度：根据列数动态计算
+const cardHeight = computed(() => {
+  const cols = gridCols.value;
+  const rows = cols === 1 ? 4 : 2; // 1列显示4行，其他显示2行
+  const gap = 20; // y-gap
+  const contentPadding = 32; // content 的 padding
+  const availableHeight = 540 - contentPadding; // 508px
+  const totalGapHeight = gap * (rows - 1);
+  const availableForCards = availableHeight - totalGapHeight;
+  const height = Math.floor(availableForCards / rows);
+  return height;
+});
+
+// 每页显示数量：根据列数和行数计算
+const pageSize = computed(() => {
+  const cols = gridCols.value;
+  const rows = cols === 1 ? 4 : 2;
+  return cols * rows;
+});
+
+const actionMenuOptions = computed(() => [
   {
-    label: '导出收藏',
+    label: t('favorites.manager.actions.export'),
     key: 'export',
     icon: () => h(NIcon, null, { default: () => h(Download) })
   },
@@ -923,11 +490,11 @@ const actionMenuOptions = [
     type: 'divider'
   },
   {
-    label: '清空收藏',
+    label: t('favorites.manager.actions.clear'),
     key: 'clear',
     icon: () => h(NIcon, null, { default: () => h(Trash) })
   }
-];
+]);
 
 const resetImportState = () => {
   importState.rawJson = '';
@@ -952,7 +519,7 @@ const readFileAsText = (file: File) =>
   new Promise<string>((resolve, reject) => {
     const reader = new FileReader();
     reader.onload = () => resolve(String(reader.result ?? ''));
-    reader.onerror = () => reject(new Error('读取文件失败'));
+    reader.onerror = () => reject(new Error(t('favorites.manager.importDialog.readFileFailed')));
     reader.readAsText(file);
   });
 
@@ -974,7 +541,7 @@ const tryCopyToClipboard = async (text: string, successMessage: string) => {
     return true;
   } catch (error) {
     console.error('复制失败:', error);
-    message.error('复制失败');
+    message.error(t('favorites.manager.actions.copyFailed'));
     return false;
   }
 };
@@ -988,112 +555,15 @@ const handleCategoryUpdated = async () => {
 };
 
 const handleCreateFavorite = () => {
-  // 重置表单为默认值
-  createState.form = {
-    title: '',
-    description: '',
-    content: '',
-    category: '',
-    tags: [],
-    functionMode: 'basic',
-    optimizationMode: 'system',
-    imageSubMode: undefined
-  };
   createState.visible = true;
 };
 
-const closeCreateDialog = () => {
+// 收藏保存成功后的回调
+const handleFavoriteSaved = async () => {
+  await loadFavorites();
   createState.visible = false;
 };
 
-const resetCreateState = () => {
-  createState.form = {
-    title: '',
-    description: '',
-    content: '',
-    category: '',
-    tags: [],
-    functionMode: 'basic',
-    optimizationMode: 'system',
-    imageSubMode: undefined
-  };
-  createState.creating = false;
-};
-
-// 功能模式切换处理（新建）
-const handleFunctionModeChange = (mode: 'basic' | 'context' | 'image') => {
-  createState.form.functionMode = mode;
-
-  if (mode === 'basic' || mode === 'context') {
-    // 切换到 basic/context，设置默认优化模式，清空图像子模式
-    createState.form.optimizationMode = 'system';
-    createState.form.imageSubMode = undefined;
-  } else if (mode === 'image') {
-    // 切换到 image，设置默认图像子模式，清空优化模式
-    createState.form.imageSubMode = 'text2image';
-    createState.form.optimizationMode = undefined;
-  }
-};
-
-// 功能模式切换处理（编辑）
-const handleEditFunctionModeChange = (mode: 'basic' | 'context' | 'image') => {
-  editState.form.functionMode = mode;
-
-  if (mode === 'basic' || mode === 'context') {
-    // 切换到 basic/context，设置默认优化模式，清空图像子模式
-    editState.form.optimizationMode = editState.form.optimizationMode || 'system';
-    editState.form.imageSubMode = undefined;
-  } else if (mode === 'image') {
-    // 切换到 image，设置默认图像子模式，清空优化模式
-    editState.form.imageSubMode = editState.form.imageSubMode || 'text2image';
-    editState.form.optimizationMode = undefined;
-  }
-};
-
-// 新建收藏的保存逻辑
-const handleCreateConfirm = async () => {
-  const servicesValue = services?.value;
-  if (!servicesValue?.favoriteManager) {
-    message.warning('收藏功能暂不可用，请稍后再试');
-    return;
-  }
-
-  // 验证必填字段
-  if (!createState.form.title.trim()) {
-    message.warning('标题不能为空');
-    return;
-  }
-
-  if (!createState.form.content.trim()) {
-    message.warning('内容不能为空');
-    return;
-  }
-
-  createState.creating = true;
-  try {
-    await servicesValue.favoriteManager.addFavorite({
-      title: createState.form.title.trim(),
-      description: createState.form.description.trim(),
-      content: createState.form.content.trim(),
-      category: createState.form.category,
-      tags: createState.form.tags,
-      functionMode: createState.form.functionMode,
-      optimizationMode: createState.form.optimizationMode,
-      imageSubMode: createState.form.imageSubMode,
-      useCount: 0,
-      createdAt: Date.now(),
-      updatedAt: Date.now()
-    } as any);
-
-    message.success('新建收藏成功');
-    await loadFavorites();
-    closeCreateDialog();
-  } catch (error: any) {
-    message.error(`新建失败: ${error?.message || '未知错误'}`);
-  } finally {
-    createState.creating = false;
-  }
-};
 
 const handlePreviewFavorite = (favorite: FavoritePrompt) => {
   previewFavorite.value = favorite;
@@ -1102,9 +572,9 @@ const handlePreviewFavorite = (favorite: FavoritePrompt) => {
 const handlePreviewCopy = (_content: string, type: 'content' | 'reasoning' | 'all') => {
   if (!previewFavorite.value) return;
   const successMessages = {
-    content: '已复制优化后的提示词',
-    reasoning: '已复制推理内容',
-    all: '已复制内容'
+    content: t('favorites.manager.actions.copiedOptimized'),
+    reasoning: t('favorites.manager.actions.copiedReasoning'),
+    all: t('favorites.manager.actions.copiedAll')
   } as const;
   const messageKey = successMessages[type];
   if (messageKey) {
@@ -1115,7 +585,7 @@ const handlePreviewCopy = (_content: string, type: 'content' | 'reasoning' | 'al
 const handleImportConfirm = async () => {
   const servicesValue = services?.value;
   if (!servicesValue?.favoriteManager) {
-    message.warning('收藏功能暂不可用，请稍后再试');
+    message.warning(t('favorites.manager.messages.unavailable'));
     return;
   }
 
@@ -1126,14 +596,14 @@ const handleImportConfirm = async () => {
       try {
         payload = await readFileAsText(file);
       } catch (error: any) {
-        message.error(`读取文件失败: ${error?.message || '未知错误'}`);
+        message.error(`${t('favorites.manager.importDialog.readFileFailed')}: ${error?.message || '未知错误'}`);
         return;
       }
     }
   }
 
   if (!payload) {
-    message.warning('请先选择文件或粘贴导入数据');
+    message.warning(t('favorites.manager.importDialog.selectFileOrPaste'));
     return;
   }
 
@@ -1142,107 +612,30 @@ const handleImportConfirm = async () => {
     const result = await servicesValue.favoriteManager.importFavorites(payload, {
       mergeStrategy: importState.mergeStrategy
     });
-    message.success(`导入完成：成功 ${result.imported} 项，跳过 ${result.skipped} 项`);
+    message.success(t('favorites.manager.importDialog.importSuccess', { imported: result.imported, skipped: result.skipped }));
     if (result.errors.length > 0) {
-      message.warning(`部分收藏导入失败：\n${result.errors.join('\n')}`);
+      message.warning(`${t('favorites.manager.importDialog.importPartialFailed')}：\n${result.errors.join('\n')}`);
     }
     await loadFavorites();
     closeImportDialog();
   } catch (error: any) {
-    message.error(`导入失败: ${error?.message || '未知错误'}`);
+    message.error(`${t('favorites.manager.importDialog.importFailed')}: ${error?.message || '未知错误'}`);
   } finally {
     importState.importing = false;
   }
 };
 
-const openEditDialog = (favorite: FavoritePrompt) => {
+const handleEditFavorite = (favorite: FavoritePrompt) => {
   editState.favorite = favorite;
-  editState.form = {
-    title: favorite.title,
-    description: favorite.description || '',
-    content: favorite.content,
-    category: favorite.category,
-    tags: [...favorite.tags],
-    functionMode: favorite.functionMode || 'basic',
-    optimizationMode: favorite.optimizationMode,
-    imageSubMode: favorite.imageSubMode
-  };
   editState.visible = true;
 };
 
-const closeEditDialog = () => {
-  editState.visible = false;
-  editState.favorite = null;
-};
-
-const resetEditState = () => {
-  editState.form = {
-    title: '',
-    description: '',
-    content: '',
-    category: '',
-    tags: [],
-    functionMode: 'basic',
-    optimizationMode: 'system',
-    imageSubMode: undefined
-  };
-  editState.editing = false;
-};
-
-const handleEditFavorite = (favorite: FavoritePrompt) => {
-  openEditDialog(favorite);
-};
-
-const handleEditConfirm = async () => {
-  const servicesValue = services?.value;
-  if (!servicesValue?.favoriteManager) {
-    message.warning('收藏功能暂不可用，请稍后再试');
-    return;
-  }
-
-  if (!editState.favorite) {
-    message.error('编辑目标不存在');
-    return;
-  }
-
-  if (!editState.form.title.trim()) {
-    message.warning('标题不能为空');
-    return;
-  }
-
-  if (!editState.form.content.trim()) {
-    message.warning('内容不能为空');
-    return;
-  }
-
-  editState.editing = true;
-  try {
-    await servicesValue.favoriteManager.updateFavorite(editState.favorite.id, {
-      title: editState.form.title.trim(),
-      description: editState.form.description.trim(),
-      content: editState.form.content.trim(),
-      category: editState.form.category,
-      tags: editState.form.tags,
-      functionMode: editState.form.functionMode,
-      optimizationMode: editState.form.optimizationMode,
-      imageSubMode: editState.form.imageSubMode
-    });
-    message.success('编辑成功');
-    await loadFavorites();
-    closeEditDialog();
-  } catch (error: any) {
-    message.error(`编辑失败: ${error?.message || '未知错误'}`);
-  } finally {
-    editState.editing = false;
-  }
-};
-
 const handleShareFavorite = () => {
-  message.info('分享功能即将上线');
+  message.info(t('favorites.manager.actions.shareComingSoon'));
 };
 
 const handleToggleCategory = () => {
-  message.info('分类管理功能将在后续版本提供');
+  message.info(t('favorites.manager.actions.categoryManagementComingSoon'));
 };
 
 const bumpUseCountLocally = (id: string) => {
@@ -1265,7 +658,7 @@ const loadFavorites = async () => {
   const servicesValue = services?.value;
   if (!servicesValue) return;
   if (!servicesValue.favoriteManager) {
-    console.warn('收藏管理器未初始化，跳过收藏加载');
+    console.warn(t('favorites.manager.messages.managerNotInitialized'));
     return;
   }
 
@@ -1279,7 +672,7 @@ const loadFavorites = async () => {
     }
   } catch (error: any) {
     console.error('加载收藏失败:', error);
-    message.error(`加载收藏失败: ${error.message || '未知错误'}`);
+    message.error(`${t('favorites.manager.messages.loadFailed')}: ${error.message || '未知错误'}`);
   } finally {
     loading.value = false;
   }
@@ -1289,7 +682,7 @@ const loadCategories = async () => {
   const servicesValue = services?.value;
   if (!servicesValue) return;
   if (!servicesValue.favoriteManager) {
-    console.warn('收藏管理器未初始化，跳过分类加载');
+    console.warn(t('favorites.manager.messages.managerNotInitialized'));
     return;
   }
 
@@ -1297,7 +690,7 @@ const loadCategories = async () => {
     categories.value = await servicesValue.favoriteManager.getCategories();
   } catch (error: any) {
     console.error('加载分类失败:', error);
-    message.error(`加载分类失败: ${error.message || '未知错误'}`);
+    message.error(`${t('favorites.manager.messages.loadCategoryFailed')}: ${error.message || '未知错误'}`);
   }
 };
 
@@ -1314,7 +707,7 @@ const handleSearch = () => {
 };
 
 const handleCopyFavorite = async (favorite: FavoritePrompt) => {
-  const copied = await tryCopyToClipboard(favorite.content, '已复制到剪贴板');
+  const copied = await tryCopyToClipboard(favorite.content, t('favorites.manager.actions.copySuccess'));
   if (!copied) return;
 
   const servicesValue = services?.value;
@@ -1327,7 +720,7 @@ const handleCopyFavorite = async (favorite: FavoritePrompt) => {
 const handleDeleteFavorite = (favorite: FavoritePrompt) => {
   const confirmed = typeof window === 'undefined'
     ? true
-    : window.confirm(`确定要删除收藏 "${favorite.title}" 吗？此操作不可恢复。`);
+    : window.confirm(t('favorites.manager.actions.deleteConfirm', { title: favorite.title }));
 
   if (!confirmed) return;
 
@@ -1336,13 +729,13 @@ const handleDeleteFavorite = (favorite: FavoritePrompt) => {
       const servicesValue = services?.value;
       if (servicesValue?.favoriteManager) {
         await servicesValue.favoriteManager.deleteFavorite(favorite.id);
-        message.success('删除成功');
+        message.success(t('favorites.manager.actions.deleteSuccess'));
         await loadFavorites();
       } else {
-        message.warning('收藏功能暂不可用，请稍后再试');
+        message.warning(t('favorites.manager.messages.unavailable'));
       }
     } catch (error: any) {
-      message.error(`删除失败: ${error.message || '未知错误'}`);
+      message.error(`${t('favorites.manager.actions.deleteFailed')}: ${error.message || '未知错误'}`);
     }
   })();
   if (previewFavorite.value?.id === favorite.id) {
@@ -1364,11 +757,6 @@ const handleUseFavorite = (favorite: FavoritePrompt) => {
   }
 };
 
-const handlePageSizeChange = (size: number) => {
-  pageSize.value = size;
-  currentPage.value = 1;
-};
-
 const handleActionMenuSelect = (key: string) => {
   switch (key) {
     case 'export':
@@ -1377,7 +765,7 @@ const handleActionMenuSelect = (key: string) => {
     case 'clear': {
       const confirmed = typeof window === 'undefined'
         ? true
-        : window.confirm('确定要清空所有收藏吗？此操作不可恢复。');
+        : window.confirm(t('favorites.manager.actions.clearConfirm'));
 
       if (!confirmed) {
         break;
@@ -1389,13 +777,13 @@ const handleActionMenuSelect = (key: string) => {
           if (servicesValue?.favoriteManager) {
             const allIds = favorites.value.map(f => f.id);
             await servicesValue.favoriteManager.deleteFavorites(allIds);
-            message.success('清空成功');
+            message.success(t('favorites.manager.actions.clearSuccess'));
             await loadFavorites();
           } else {
-            message.warning('收藏功能暂不可用，请稍后再试');
+            message.warning(t('favorites.manager.messages.unavailable'));
           }
         } catch (error: any) {
-          message.error(`清空失败: ${error.message || '未知错误'}`);
+          message.error(`${t('favorites.manager.actions.clearFailed')}: ${error.message || '未知错误'}`);
         }
       })();
       break;
@@ -1416,13 +804,13 @@ const handleExportFavorites = async () => {
         a.download = `favorites_${new Date().toISOString().split('T')[0]}.json`;
         a.click();
         URL.revokeObjectURL(url);
-        message.success('导出成功');
+        message.success(t('favorites.manager.actions.exportSuccess'));
       }
     } else {
-      message.warning('收藏功能暂不可用，请稍后再试');
+      message.warning(t('favorites.manager.messages.unavailable'));
     }
   } catch (error: any) {
-    message.error(`导出失败: ${error.message || '未知错误'}`);
+    message.error(`${t('favorites.manager.actions.exportFailed')}: ${error.message || '未知错误'}`);
   }
 };
 
@@ -1436,13 +824,13 @@ const formatDate = (timestamp: number) => {
     const hours = Math.floor(diff / (1000 * 60 * 60));
     if (hours === 0) {
       const minutes = Math.floor(diff / (1000 * 60));
-      return minutes <= 1 ? '刚刚' : `${minutes}分钟前`;
+      return minutes <= 1 ? t('favorites.manager.time.justNow') : t('favorites.manager.time.minutesAgo', { minutes });
     }
-    return `${hours}小时前`;
+    return t('favorites.manager.time.hoursAgo', { hours });
   } else if (days === 1) {
-    return '昨天';
+    return t('favorites.manager.time.yesterday');
   } else if (days < 7) {
-    return `${days}天前`;
+    return t('favorites.manager.time.daysAgo', { days });
   } else {
     return date.toLocaleDateString();
   }
@@ -1450,17 +838,17 @@ const formatDate = (timestamp: number) => {
 
 const previewDialogTitle = computed(() => {
   if (!previewFavorite.value) {
-    return '收藏详情';
+    return t('favorites.manager.preview.title');
   }
 
   const title = previewFavorite.value.title?.trim();
   const categoryName = previewFavorite.value.category
     ? getCategoryById(previewFavorite.value.category)?.name?.trim()
     : '';
-  const updatedLabel = `更新于 ${formatDate(previewFavorite.value.updatedAt)}`;
+  const updatedLabel = t('favorites.manager.preview.updatedAt', { time: formatDate(previewFavorite.value.updatedAt) });
 
   const parts = [
-    title && title.length > 0 ? title : '收藏详情',
+    title && title.length > 0 ? title : t('favorites.manager.preview.title'),
     categoryName && categoryName.length > 0 ? categoryName : null,
     updatedLabel
   ].filter(Boolean) as string[];
@@ -1492,13 +880,7 @@ watch(() => importState.visible, (visible) => {
 
 watch(() => editState.visible, (visible) => {
   if (!visible) {
-    resetEditState();
-  }
-});
-
-watch(() => createState.visible, (visible) => {
-  if (!visible) {
-    resetCreateState();
+    editState.favorite = null;
   }
 });
 
@@ -1507,6 +889,24 @@ onMounted(() => {
     loadFavorites();
     loadCategories();
   }
+
+  // 监听窗口大小变化
+  const handleResize = () => {
+    if (typeof window !== 'undefined') {
+      viewportWidth.value = window.innerWidth;
+    }
+  };
+  const debouncedResize = useDebounceFn(handleResize, 150);
+
+  if (typeof window !== 'undefined') {
+    window.addEventListener('resize', debouncedResize);
+  }
+
+  onBeforeUnmount(() => {
+    if (typeof window !== 'undefined') {
+      window.removeEventListener('resize', debouncedResize);
+    }
+  });
 });
 
 defineExpose({
@@ -1515,12 +915,10 @@ defineExpose({
 </script>
 
 <style scoped>
-.favorite-manager-content {
-  @apply flex flex-col h-full;
-}
-
+/* 固定工具栏 */
 .toolbar {
   @apply p-4 border-b border-gray-200 dark:border-gray-700;
+  background: var(--n-color);
 }
 
 .button-text {
@@ -1534,45 +932,18 @@ defineExpose({
   }
 }
 
+/* 固定内容区域 */
 .content {
-  @apply flex-1 p-4 overflow-y-auto;
-}
-
-/* 网格视图：使用 CSS Grid 响应式布局 */
-.grid-view {
-  @apply min-h-full;
-  display: grid;
-  gap: 20px;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-}
-
-/* 响应式断点优化 */
-@media (max-width: 640px) {
-  .grid-view {
-    grid-template-columns: 1fr;
-    gap: 16px;
-  }
-}
-
-@media (min-width: 641px) and (max-width: 1024px) {
-  .grid-view {
-    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-    gap: 18px;
-  }
-}
-
-@media (min-width: 1441px) {
-  .grid-view {
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-    gap: 24px;
-  }
-}
-
-.list-view {
-  @apply min-h-full;
+  @apply p-4;
+  /* 固定内容区域高度，正好容纳网格 */
+  height: 540px; /* 500px 网格 + 40px padding */
+  overflow: hidden;
 }
 
+/* 分页固定在底部 */
 .pagination {
   @apply p-4 border-t border-gray-200 dark:border-gray-700;
+  background: var(--n-color);
+  flex-shrink: 0;
 }
 </style>
diff --git a/packages/ui/src/components/SaveFavoriteDialog.vue b/packages/ui/src/components/SaveFavoriteDialog.vue
index 5cf27715..a961e529 100644
--- a/packages/ui/src/components/SaveFavoriteDialog.vue
+++ b/packages/ui/src/components/SaveFavoriteDialog.vue
@@ -2,7 +2,7 @@
   <n-modal
     :show="show"
     preset="card"
-    title="保存到收藏夹"
+    :title="dialogTitle"
     :style="{ width: 'min(90vw, 1200px)', height: 'min(85vh, 900px)' }"
     :mask-closable="false"
     @update:show="handleClose"
@@ -10,34 +10,33 @@
     <n-scrollbar style="max-height: calc(85vh - 150px);">
       <div style="display: flex; flex-direction: column; gap: 16px;">
         <!-- 基础信息面板 -->
-        <n-card title="📋 基础信息" :bordered="false" :segmented="{ content: true }" size="small">
+        <n-card :title="t('favorites.dialog.basicInfo')" :bordered="false" :segmented="{ content: true }" size="small">
           <n-form label-placement="left" :label-width="80">
             <n-grid :cols="2" :x-gap="16">
               <!-- 左列 -->
               <n-grid-item>
-                <n-form-item label="标题" required>
+                <n-form-item :label="t('favorites.dialog.titleLabel')" required>
                   <n-input
                     v-model:value="formData.title"
-                    placeholder="为这个提示词起个名字"
+                    :placeholder="t('favorites.dialog.titlePlaceholder')"
                     maxlength="100"
                     show-count
                   />
                 </n-form-item>
 
-                <n-form-item label="分类">
-                  <n-select
-                    v-model:value="formData.category"
-                    :options="categoryOptions"
-                    placeholder="选择分类(可选)"
-                    clearable
+                <n-form-item :label="t('favorites.dialog.categoryLabel')">
+                  <CategoryTreeSelect
+                    v-model="formData.category"
+                    :placeholder="t('favorites.dialog.categoryPlaceholder')"
+                    :show-all-option="false"
                   />
                 </n-form-item>
 
-                <n-form-item label="功能模式" required>
+                <n-form-item :label="t('favorites.dialog.functionModeLabel')" required>
                   <n-select
                     v-model:value="formData.functionMode"
                     :options="functionModeOptions"
-                    :disabled="isFromOptimization"
+                    :disabled="props.mode === 'save' && !!props.originalContent"
                     @update:value="handleFunctionModeChange"
                   />
                 </n-form-item>
@@ -45,11 +44,11 @@
 
               <!-- 右列 -->
               <n-grid-item>
-                <n-form-item label="描述">
+                <n-form-item :label="t('favorites.dialog.descriptionLabel')">
                   <n-input
                     v-model:value="formData.description"
                     type="textarea"
-                    placeholder="描述这个提示词的用途和特点"
+                    :placeholder="t('favorites.dialog.descriptionPlaceholder')"
                     :rows="3"
                     maxlength="300"
                     show-count
@@ -59,36 +58,36 @@
                 <!-- 动态显示:优化模式或图像模式 -->
                 <n-form-item
                   v-if="formData.functionMode === 'basic' || formData.functionMode === 'context'"
-                  label="优化模式"
+                  :label="t('favorites.dialog.optimizationModeLabel')"
                 >
                   <n-select
                     v-model:value="formData.optimizationMode"
                     :options="optimizationModeOptions"
-                    placeholder="选择优化模式"
-                    :disabled="isFromOptimization"
+                    :placeholder="t('favorites.dialog.optimizationModePlaceholder')"
+                    :disabled="props.mode === 'save' && !!props.originalContent"
                   />
                 </n-form-item>
 
                 <n-form-item
                   v-if="formData.functionMode === 'image'"
-                  label="图像模式"
+                  :label="t('favorites.dialog.imageModeLabel')"
                 >
                   <n-select
                     v-model:value="formData.imageSubMode"
                     :options="imageSubModeOptions"
-                    placeholder="选择图像模式"
-                    :disabled="isFromOptimization"
+                    :placeholder="t('favorites.dialog.imageModePlaceholder')"
+                    :disabled="props.mode === 'save' && !!props.originalContent"
                   />
                 </n-form-item>
               </n-grid-item>
             </n-grid>
 
             <!-- 标签(跨越两列) -->
-            <n-form-item label="标签">
+            <n-form-item :label="t('favorites.dialog.tagsLabel')">
               <n-dynamic-tags
                 v-model:value="formData.tags"
                 :max="10"
-                placeholder="输入标签后按回车添加"
+                :placeholder="t('favorites.dialog.tagsPlaceholder')"
               />
             </n-form-item>
           </n-form>
@@ -97,7 +96,7 @@
         <!-- 正文内容区域 -->
         <div>
           <n-divider style="margin: 0 0 12px 0;">
-            <span style="font-weight: 600;">📝 正文内容</span>
+            <span style="font-weight: 600;">{{ t('favorites.dialog.contentTitle') }}</span>
             <span style="color: #ff4d4f; margin-left: 4px;">*</span>
           </n-divider>
           <OutputDisplayCore
@@ -105,7 +104,7 @@
             mode="editable"
             :enabled-actions="['copy', 'edit']"
             height="400px"
-            placeholder="在这里输入提示词内容..."
+            :placeholder="t('favorites.dialog.contentPlaceholder')"
             @update:content="formData.content = $event"
           />
         </div>
@@ -114,9 +113,9 @@
 
     <template #action>
       <n-space justify="end">
-        <n-button @click="handleClose" :disabled="saving">取消</n-button>
+        <n-button @click="handleClose" :disabled="saving">{{ t('favorites.dialog.cancel') }}</n-button>
         <n-button type="primary" :loading="saving" @click="handleSave">
-          保存
+          {{ t('favorites.dialog.save') }}
         </n-button>
       </n-space>
     </template>
@@ -140,19 +139,39 @@ import {
   NGrid,
   NGridItem
 } from 'naive-ui';
+import { useI18n } from 'vue-i18n';
 import { useToast } from '../composables/useToast';
 import OutputDisplayCore from './OutputDisplayCore.vue';
+import CategoryTreeSelect from './CategoryTreeSelect.vue';
 import type { AppServices } from '../types/services';
 
+const { t } = useI18n();
+
 interface Props {
+  /** 是否显示对话框 */
   show: boolean
-  content: string
+  /** 对话框模式: 'create' 新建空白收藏, 'save' 从优化器保存, 'edit' 编辑现有收藏 */
+  mode?: 'create' | 'save' | 'edit'
+  /** 收藏内容(优化后的提示词) */
+  content?: string
+  /** 原始内容(用于从优化器保存时) */
   originalContent?: string
-  currentFunctionMode: 'basic' | 'context' | 'image'
-  currentOptimizationMode: 'system' | 'user'
+  /** 当前功能模式(用于从优化器保存时预填充) */
+  currentFunctionMode?: 'basic' | 'context' | 'image'
+  /** 当前优化模式(用于从优化器保存时预填充) */
+  currentOptimizationMode?: 'system' | 'user'
+  /** 要编辑的收藏(仅用于 edit 模式) */
+  favorite?: any
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  mode: 'save',
+  content: '',
+  originalContent: undefined,
+  currentFunctionMode: 'basic',
+  currentOptimizationMode: 'system',
+  favorite: undefined
+});
 
 const emit = defineEmits<{
   'update:show': [value: boolean]
@@ -163,7 +182,13 @@ const services = inject<Ref<AppServices | null>>('services');
 const message = useToast();
 
 const saving = ref(false);
-const categories = ref<Array<{ id: string; name: string }>>([]);
+
+// 对话框标题
+const dialogTitle = computed(() => {
+  if (props.mode === 'create') return t('favorites.dialog.createTitle');
+  if (props.mode === 'edit') return t('favorites.dialog.editTitle');
+  return t('favorites.dialog.saveTitle');
+});
 
 // 表单数据
 const formData = reactive({
@@ -177,32 +202,22 @@ const formData = reactive({
   imageSubMode: undefined as 'text2image' | 'image2image' | undefined
 });
 
-// 是否从优化器保存(功能模式字段只读)
-const isFromOptimization = computed(() => !!props.originalContent);
-
 // 选项配置
-const functionModeOptions = [
-  { label: '基础', value: 'basic' },
-  { label: '上下文', value: 'context' },
-  { label: '图像', value: 'image' }
-];
+const functionModeOptions = computed(() => [
+  { label: t('favorites.dialog.functionModes.basic'), value: 'basic' },
+  { label: t('favorites.dialog.functionModes.context'), value: 'context' },
+  { label: t('favorites.dialog.functionModes.image'), value: 'image' }
+]);
 
-const optimizationModeOptions = [
-  { label: '系统提示词', value: 'system' },
-  { label: '用户提示词', value: 'user' }
-];
+const optimizationModeOptions = computed(() => [
+  { label: t('favorites.dialog.optimizationModes.system'), value: 'system' },
+  { label: t('favorites.dialog.optimizationModes.user'), value: 'user' }
+]);
 
-const imageSubModeOptions = [
-  { label: '文生图', value: 'text2image' },
-  { label: '图生图', value: 'image2image' }
-];
-
-const categoryOptions = computed(() => {
-  return categories.value.map(cat => ({
-    label: cat.name,
-    value: cat.id
-  }));
-});
+const imageSubModeOptions = computed(() => [
+  { label: t('favorites.dialog.imageModes.text2image'), value: 'text2image' },
+  { label: t('favorites.dialog.imageModes.image2image'), value: 'image2image' }
+]);
 
 // 功能模式切换处理
 const handleFunctionModeChange = (mode: 'basic' | 'context' | 'image') => {
@@ -228,106 +243,125 @@ const handleClose = () => {
 const handleSave = async () => {
   const servicesValue = services?.value;
   if (!servicesValue?.favoriteManager) {
-    message.warning('收藏功能暂不可用,请稍后再试');
+    message.warning(t('favorites.dialog.messages.unavailable'));
     return;
   }
 
   // 验证必填字段
   if (!formData.title.trim()) {
-    message.warning('标题不能为空');
+    message.warning(t('favorites.dialog.validation.titleRequired'));
     return;
   }
 
   if (!formData.content.trim()) {
-    message.warning('内容不能为空');
+    message.warning(t('favorites.dialog.validation.contentRequired'));
     return;
   }
 
   saving.value = true;
   try {
-    // 构建收藏数据
-    const favoriteData: any = {
-      title: formData.title.trim(),
-      description: formData.description.trim(),
-      content: formData.content.trim(),
-      category: formData.category,
-      tags: formData.tags,
-      functionMode: formData.functionMode,
-      optimizationMode: formData.optimizationMode,
-      imageSubMode: formData.imageSubMode
-    };
-
-    // 如果是从优化器保存,添加元数据
-    if (props.originalContent) {
-      favoriteData.metadata = {
-        originalContent: props.originalContent
+    if (props.mode === 'edit' && props.favorite) {
+      // 编辑模式：更新现有收藏
+      await servicesValue.favoriteManager.updateFavorite(props.favorite.id, {
+        title: formData.title.trim(),
+        description: formData.description.trim(),
+        content: formData.content.trim(),
+        category: formData.category,
+        tags: formData.tags,
+        functionMode: formData.functionMode,
+        optimizationMode: formData.optimizationMode,
+        imageSubMode: formData.imageSubMode
+      });
+      message.success(t('favorites.dialog.messages.editSuccess'));
+    } else {
+      // 创建模式或保存模式：添加新收藏
+      const favoriteData: any = {
+        title: formData.title.trim(),
+        description: formData.description.trim(),
+        content: formData.content.trim(),
+        category: formData.category,
+        tags: formData.tags,
+        functionMode: formData.functionMode,
+        optimizationMode: formData.optimizationMode,
+        imageSubMode: formData.imageSubMode
       };
+
+      // 如果是从优化器保存,添加元数据
+      if (props.originalContent) {
+        favoriteData.metadata = {
+          originalContent: props.originalContent
+        };
+      }
+
+      await servicesValue.favoriteManager.addFavorite(favoriteData);
+      message.success(t('favorites.dialog.messages.saveSuccess'));
     }
 
-    await servicesValue.favoriteManager.addFavorite(favoriteData);
-
-    message.success('保存到收藏夹成功');
     emit('saved');
     emit('update:show', false);
   } catch (error: any) {
-    message.error(`保存失败: ${error?.message || '未知错误'}`);
+    const failedKey = props.mode === 'edit' ? 'favorites.dialog.messages.editFailed' : 'favorites.dialog.messages.saveFailed';
+    message.error(`${t(failedKey)}: ${error?.message || '未知错误'}`);
   } finally {
     saving.value = false;
   }
 };
 
-// 加载分类列表
-const loadCategories = async () => {
-  const servicesValue = services?.value;
-  if (!servicesValue?.favoriteManager) return;
-
-  try {
-    const data = await servicesValue.favoriteManager.getCategories();
-    categories.value = data.map(cat => ({
-      id: cat.id,
-      name: cat.name
-    }));
-  } catch (error) {
-    console.warn('加载分类失败:', error);
-  }
-};
-
 // 监听对话框显示,初始化表单
 watch(() => props.show, (newShow) => {
   if (newShow) {
-    // 智能预填充
-    // 1. 标题 = 原始提示词前30字符(去除换行符)
-    const titleSource = props.originalContent || props.content;
-    formData.title = titleSource
-      .replace(/\r?\n/g, ' ')  // 替换换行为空格
-      .substring(0, 30)
-      .trim();
-
-    // 2. 内容 = 优化后的提示词
-    formData.content = props.content;
-
-    // 3. 根据当前功能模式和优化模式自动设置
-    if (props.currentFunctionMode === 'image') {
-      formData.functionMode = 'image';
-      formData.imageSubMode = 'text2image';  // 默认文生图
-      formData.optimizationMode = undefined;
-    } else if (props.currentFunctionMode === 'context') {
-      formData.functionMode = 'context';
-      formData.optimizationMode = props.currentOptimizationMode;
-      formData.imageSubMode = undefined;
-    } else {
+    if (props.mode === 'create') {
+      // 新建模式: 重置为空表单
+      formData.title = '';
+      formData.description = '';
+      formData.content = '';
+      formData.category = '';
+      formData.tags = [];
       formData.functionMode = 'basic';
-      formData.optimizationMode = props.currentOptimizationMode;
+      formData.optimizationMode = 'system';
       formData.imageSubMode = undefined;
+    } else if (props.mode === 'edit' && props.favorite) {
+      // 编辑模式: 加载现有收藏数据
+      formData.title = props.favorite.title;
+      formData.description = props.favorite.description || '';
+      formData.content = props.favorite.content;
+      formData.category = props.favorite.category || '';
+      formData.tags = [...(props.favorite.tags || [])];
+      formData.functionMode = props.favorite.functionMode || 'basic';
+      formData.optimizationMode = props.favorite.optimizationMode;
+      formData.imageSubMode = props.favorite.imageSubMode;
+    } else {
+      // 保存模式: 智能预填充
+      // 1. 标题 = 原始提示词前30字符(去除换行符)
+      const titleSource = props.originalContent || props.content || '';
+      formData.title = titleSource
+        .replace(/\r?\n/g, ' ')  // 替换换行为空格
+        .substring(0, 30)
+        .trim();
+
+      // 2. 内容 = 优化后的提示词
+      formData.content = props.content || '';
+
+      // 3. 根据当前功能模式和优化模式自动设置
+      if (props.currentFunctionMode === 'image') {
+        formData.functionMode = 'image';
+        formData.imageSubMode = 'text2image';  // 默认文生图
+        formData.optimizationMode = undefined;
+      } else if (props.currentFunctionMode === 'context') {
+        formData.functionMode = 'context';
+        formData.optimizationMode = props.currentOptimizationMode;
+        formData.imageSubMode = undefined;
+      } else {
+        formData.functionMode = 'basic';
+        formData.optimizationMode = props.currentOptimizationMode;
+        formData.imageSubMode = undefined;
+      }
+
+      // 重置其他字段
+      formData.description = '';
+      formData.category = '';
+      formData.tags = [];
     }
-
-    // 重置其他字段
-    formData.description = '';
-    formData.category = '';
-    formData.tags = [];
-
-    // 加载分类列表
-    loadCategories();
   }
 }, { immediate: true });
 </script>
diff --git a/packages/ui/src/composables/index.ts b/packages/ui/src/composables/index.ts
index f43d9b0f..2f2fb70a 100644
--- a/packages/ui/src/composables/index.ts
+++ b/packages/ui/src/composables/index.ts
@@ -27,3 +27,4 @@ export * from './useFocusManager'
 export * from './useAccessibilityTesting'
 export * from 'vue-i18n'
 export * from './useAppInitializer'
+export * from './useTooltipTheme'
diff --git a/packages/ui/src/composables/useTooltipTheme.ts b/packages/ui/src/composables/useTooltipTheme.ts
new file mode 100644
index 00000000..15613bec
--- /dev/null
+++ b/packages/ui/src/composables/useTooltipTheme.ts
@@ -0,0 +1,59 @@
+import { computed } from 'vue';
+import type { CSSProperties } from 'vue';
+import { useThemeVars } from 'naive-ui';
+import type { TooltipProps } from 'naive-ui';
+
+type TooltipThemeOverrides = NonNullable<TooltipProps['themeOverrides']>;
+
+interface UseTooltipThemeOptions {
+  maxWidth?: CSSProperties['maxWidth'];
+  maxHeight?: CSSProperties['maxHeight'];
+  whiteSpace?: CSSProperties['whiteSpace'];
+  wordBreak?: CSSProperties['wordBreak'];
+  overflowWrap?: CSSProperties['overflowWrap'];
+  padding?: CSSProperties['padding'];
+  overflowY?: CSSProperties['overflowY'];
+}
+
+/**
+ * Naive UI 默认会将 Tooltip 叠加层合成成接近黑色的背景，这在浅色主题下会显得突兀。
+ * 这里基于 ConfigProvider 的主题变量构建 tooltip 的 themeOverrides，并提供常用的内容样式，
+ * 让 Tooltip 的背景与弹层类组件保持一致，同时限制尺寸防止遮挡。
+ */
+export function useTooltipTheme(options: UseTooltipThemeOptions = {}) {
+  const themeVars = useThemeVars();
+
+  const tooltipThemeOverrides = computed<TooltipThemeOverrides>(() => {
+    const vars = themeVars.value;
+
+    return {
+      color: vars.popoverColor,
+      textColor: vars.textColor2,
+      boxShadow: vars.boxShadow2,
+      borderRadius: vars.borderRadius
+    };
+  });
+
+  const tooltipOverlayStyle = computed<CSSProperties>(() => ({
+    maxWidth: options.maxWidth ?? 'calc(100vw - 32px)',
+    maxHeight: options.maxHeight ?? 'calc(100vh - 32px)'
+  }));
+
+  const tooltipContentStyle = computed<CSSProperties>(() => ({
+    maxWidth: '100%',
+    maxHeight: options.maxHeight ?? 'calc(100vh - 32px)',
+    whiteSpace: options.whiteSpace ?? 'pre-wrap',
+    wordBreak: options.wordBreak ?? 'break-word',
+    overflowWrap: options.overflowWrap ?? 'anywhere',
+    padding: options.padding ?? '12px 16px',
+    overflowY: options.overflowY ?? 'auto',
+    border: `1px solid ${themeVars.value.dividerColor}`,
+    boxSizing: 'border-box'
+  }));
+
+  return {
+    tooltipThemeOverrides,
+    tooltipOverlayStyle,
+    tooltipContentStyle
+  };
+}
diff --git a/packages/ui/src/i18n/locales/en-US.ts b/packages/ui/src/i18n/locales/en-US.ts
index 4d0b45f9..7e802119 100644
--- a/packages/ui/src/i18n/locales/en-US.ts
+++ b/packages/ui/src/i18n/locales/en-US.ts
@@ -103,6 +103,133 @@ export default {
   },
   favorites: {
     title: 'My Favorites',
+    manager: {
+      title: 'Favorites Manager',
+      searchPlaceholder: 'Search favorites...',
+      allCategories: 'All Categories',
+      allTags: 'All Tags',
+      totalCount: '{count} items',
+      import: 'Import',
+      add: 'Add',
+      emptySearchResult: 'No matching favorites found',
+      emptyDescription: 'No favorites yet',
+      startOptimize: 'Start optimizing prompts',
+      importDialog: {
+        title: 'Import Favorites',
+        selectFile: 'Select JSON file',
+        uploadHint: 'Click or drag file to this area',
+        supportFormat: 'Supports .json files',
+        orPasteJson: 'Or paste exported favorites JSON',
+        pastePlaceholder: 'Paste favorites data...',
+        mergeStrategy: 'Merge Strategy',
+        skipDuplicate: 'Skip Duplicates',
+        overwriteDuplicate: 'Overwrite Duplicates',
+        createCopy: 'Create Copy',
+        cancel: 'Cancel',
+        import: 'Import',
+        importing: 'Importing...',
+        selectFileOrPaste: 'Please select a file or paste import data first',
+        importSuccess: 'Import completed: {imported} successful, {skipped} skipped',
+        importPartialFailed: 'Some favorites failed to import',
+        importFailed: 'Import failed',
+        readFileFailed: 'Failed to read file'
+      },
+      categoryManager: {
+        title: 'Category Manager'
+      },
+      actions: {
+        export: 'Export Favorites',
+        clear: 'Clear Favorites',
+        exportSuccess: 'Export successful',
+        exportFailed: 'Export failed',
+        clearConfirm: 'Are you sure you want to clear all favorites? This action cannot be undone.',
+        clearSuccess: 'Cleared successfully',
+        clearFailed: 'Clear failed',
+        deleteConfirm: 'Are you sure you want to delete favorite "{title}"? This action cannot be undone.',
+        deleteSuccess: 'Deleted successfully',
+        deleteFailed: 'Delete failed',
+        copySuccess: 'Copied to clipboard',
+        copyFailed: 'Copy failed',
+        copiedOptimized: 'Optimized prompt copied',
+        copiedReasoning: 'Reasoning content copied',
+        copiedAll: 'Content copied',
+        shareComingSoon: 'Share feature coming soon',
+        categoryManagementComingSoon: 'Category management coming in a future version'
+      },
+      preview: {
+        title: 'Favorite Details',
+        updatedAt: 'Updated {time}'
+      },
+      messages: {
+        unavailable: 'Favorites feature is temporarily unavailable, please try again later',
+        loadFailed: 'Failed to load favorites',
+        loadCategoryFailed: 'Failed to load categories',
+        managerNotInitialized: 'Favorites manager not initialized'
+      },
+      time: {
+        justNow: 'Just now',
+        minutesAgo: '{minutes} minutes ago',
+        hoursAgo: '{hours} hours ago',
+        yesterday: 'Yesterday',
+        daysAgo: '{days} days ago'
+      },
+      card: {
+        useCount: 'Use count',
+        copyContent: 'Copy content',
+        useNow: 'Use now',
+        edit: 'Edit',
+        delete: 'Delete',
+        cancel: 'Cancel',
+        deleteConfirm: 'Delete "{title}"?'
+      }
+    },
+    dialog: {
+      createTitle: 'Create Favorite',
+      editTitle: 'Edit Favorite',
+      saveTitle: 'Save to Favorites',
+      basicInfo: '📋 Basic Information',
+      contentTitle: '📝 Content',
+      titleLabel: 'Title',
+      titlePlaceholder: 'Name this prompt',
+      categoryLabel: 'Category',
+      categoryPlaceholder: 'Select category (optional)',
+      functionModeLabel: 'Function Mode',
+      descriptionLabel: 'Description',
+      descriptionPlaceholder: 'Describe the purpose and characteristics of this prompt',
+      optimizationModeLabel: 'Optimization Mode',
+      optimizationModePlaceholder: 'Select optimization mode',
+      imageModeLabel: 'Image Mode',
+      imageModePlaceholder: 'Select image mode',
+      tagsLabel: 'Tags',
+      tagsPlaceholder: 'Enter tags and press Enter to add',
+      contentPlaceholder: 'Enter prompt content here...',
+      cancel: 'Cancel',
+      save: 'Save',
+      functionModes: {
+        basic: 'Basic',
+        context: 'Context',
+        image: 'Image'
+      },
+      optimizationModes: {
+        system: 'System Prompt',
+        user: 'User Prompt'
+      },
+      imageModes: {
+        text2image: 'Text-to-Image',
+        image2image: 'Image-to-Image'
+      },
+      validation: {
+        titleRequired: 'Title is required',
+        contentRequired: 'Content is required'
+      },
+      messages: {
+        editSuccess: 'Edit successful',
+        saveSuccess: 'Saved to favorites successfully',
+        saveFailed: 'Save failed',
+        editFailed: 'Edit failed',
+        unavailable: 'Favorites feature is temporarily unavailable, please try again later'
+      }
+    },
     categoryManager: {
       title: 'Category Manager',
       addRootCategory: 'Add Root Category',
@@ -134,6 +261,20 @@ export default {
       validation: {
         nameRequired: 'Please enter category name',
         nameLength: 'Category name length should be 1-50 characters'
+      },
+      defaultCategories: {
+        uncategorized: 'Uncategorized',
+        uncategorizedDesc: 'Default category',
+        systemPrompt: 'System Prompts',
+        systemPromptDesc: 'Optimized system prompts',
+        userPrompt: 'User Prompts',
+        userPromptDesc: 'Optimized user prompts',
+        creativeWriting: 'Creative Writing',
+        creativeWritingDesc: 'Creative writing related prompts',
+        programming: 'Programming',
+        programmingDesc: 'Programming and development related prompts',
+        businessAnalysis: 'Business Analysis',
+        businessAnalysisDesc: 'Business analysis related prompts'
       }
     }
   },
diff --git a/packages/ui/src/i18n/locales/zh-CN.ts b/packages/ui/src/i18n/locales/zh-CN.ts
index 78f44fdc..4f7ae37c 100644
--- a/packages/ui/src/i18n/locales/zh-CN.ts
+++ b/packages/ui/src/i18n/locales/zh-CN.ts
@@ -103,6 +103,133 @@
   },
   favorites: {
     title: '我的收藏',
+    manager: {
+      title: '收藏管理',
+      searchPlaceholder: '搜索收藏...',
+      allCategories: '全部分类',
+      allTags: '全部标签',
+      totalCount: '共 {count} 项',
+      import: '导入',
+      add: '添加',
+      emptySearchResult: '没有找到匹配的收藏',
+      emptyDescription: '还没有收藏任何提示词',
+      startOptimize: '开始优化提示词',
+      importDialog: {
+        title: '导入收藏',
+        selectFile: '选择 JSON 文件',
+        uploadHint: '点击或拖拽文件到此区域',
+        supportFormat: '支持 .json 文件',
+        orPasteJson: '或粘贴导出的收藏 JSON',
+        pastePlaceholder: '粘贴收藏数据...',
+        mergeStrategy: '合并策略',
+        skipDuplicate: '跳过重复',
+        overwriteDuplicate: '覆盖重复',
+        createCopy: '创建副本',
+        cancel: '取消',
+        import: '导入',
+        importing: '导入中...',
+        selectFileOrPaste: '请先选择文件或粘贴导入数据',
+        importSuccess: '导入完成：成功 {imported} 项，跳过 {skipped} 项',
+        importPartialFailed: '部分收藏导入失败',
+        importFailed: '导入失败',
+        readFileFailed: '读取文件失败'
+      },
+      categoryManager: {
+        title: '分类管理'
+      },
+      actions: {
+        export: '导出收藏',
+        clear: '清空收藏',
+        exportSuccess: '导出成功',
+        exportFailed: '导出失败',
+        clearConfirm: '确定要清空所有收藏吗？此操作不可恢复。',
+        clearSuccess: '清空成功',
+        clearFailed: '清空失败',
+        deleteConfirm: '确定要删除收藏 "{title}" 吗？此操作不可恢复。',
+        deleteSuccess: '删除成功',
+        deleteFailed: '删除失败',
+        copySuccess: '已复制到剪贴板',
+        copyFailed: '复制失败',
+        copiedOptimized: '已复制优化后的提示词',
+        copiedReasoning: '已复制推理内容',
+        copiedAll: '已复制内容',
+        shareComingSoon: '分享功能即将上线',
+        categoryManagementComingSoon: '分类管理功能将在后续版本提供'
+      },
+      preview: {
+        title: '收藏详情',
+        updatedAt: '更新于 {time}'
+      },
+      messages: {
+        unavailable: '收藏功能暂不可用，请稍后再试',
+        loadFailed: '加载收藏失败',
+        loadCategoryFailed: '加载分类失败',
+        managerNotInitialized: '收藏管理器未初始化'
+      },
+      time: {
+        justNow: '刚刚',
+        minutesAgo: '{minutes}分钟前',
+        hoursAgo: '{hours}小时前',
+        yesterday: '昨天',
+        daysAgo: '{days}天前'
+      },
+      card: {
+        useCount: '使用次数',
+        copyContent: '复制内容',
+        useNow: '立即使用',
+        edit: '编辑',
+        delete: '删除',
+        cancel: '取消',
+        deleteConfirm: '确定删除"{title}"吗？'
+      }
+    },
+    dialog: {
+      createTitle: '新建收藏',
+      editTitle: '编辑收藏',
+      saveTitle: '保存到收藏夹',
+      basicInfo: '📋 基础信息',
+      contentTitle: '📝 正文内容',
+      titleLabel: '标题',
+      titlePlaceholder: '为这个提示词起个名字',
+      categoryLabel: '分类',
+      categoryPlaceholder: '选择分类（可选）',
+      functionModeLabel: '功能模式',
+      descriptionLabel: '描述',
+      descriptionPlaceholder: '描述这个提示词的用途和特点',
+      optimizationModeLabel: '优化模式',
+      optimizationModePlaceholder: '选择优化模式',
+      imageModeLabel: '图像模式',
+      imageModePlaceholder: '选择图像模式',
+      tagsLabel: '标签',
+      tagsPlaceholder: '输入标签后按回车添加',
+      contentPlaceholder: '在这里输入提示词内容...',
+      cancel: '取消',
+      save: '保存',
+      functionModes: {
+        basic: '基础',
+        context: '上下文',
+        image: '图像'
+      },
+      optimizationModes: {
+        system: '系统提示词',
+        user: '用户提示词'
+      },
+      imageModes: {
+        text2image: '文生图',
+        image2image: '图生图'
+      },
+      validation: {
+        titleRequired: '标题不能为空',
+        contentRequired: '内容不能为空'
+      },
+      messages: {
+        editSuccess: '编辑成功',
+        saveSuccess: '保存到收藏夹成功',
+        saveFailed: '保存失败',
+        editFailed: '编辑失败',
+        unavailable: '收藏功能暂不可用,请稍后再试'
+      }
+    },
     categoryManager: {
       title: '分类管理',
       addRootCategory: '添加根分类',
@@ -134,6 +261,20 @@
       validation: {
         nameRequired: '请输入分类名称',
         nameLength: '分类名称长度应在 1-50 之间'
+      },
+      defaultCategories: {
+        uncategorized: '未分类',
+        uncategorizedDesc: '默认分类',
+        systemPrompt: '系统提示词',
+        systemPromptDesc: '优化后的系统提示词',
+        userPrompt: '用户提示词',
+        userPromptDesc: '优化后的用户提示词',
+        creativeWriting: '创意写作',
+        creativeWritingDesc: '创意写作相关的提示词',
+        programming: '编程开发',
+        programmingDesc: '编程开发相关的提示词',
+        businessAnalysis: '商业分析',
+        businessAnalysisDesc: '商业分析相关的提示词'
       }
     }
   },
diff --git a/packages/ui/src/i18n/locales/zh-TW.ts b/packages/ui/src/i18n/locales/zh-TW.ts
index ba689e1d..32262268 100644
--- a/packages/ui/src/i18n/locales/zh-TW.ts
+++ b/packages/ui/src/i18n/locales/zh-TW.ts
@@ -103,6 +103,180 @@ export default {
   },
   favorites: {
     title: '我的收藏',
+    manager: {
+      title: '收藏管理',
+      searchPlaceholder: '搜尋收藏...',
+      allCategories: '全部分類',
+      allTags: '全部標籤',
+      totalCount: '共 {count} 項',
+      import: '匯入',
+      add: '新增',
+      emptySearchResult: '沒有找到相符的收藏',
+      emptyDescription: '還沒有收藏任何提示詞',
+      startOptimize: '開始優化提示詞',
+      importDialog: {
+        title: '匯入收藏',
+        selectFile: '選擇 JSON 檔案',
+        uploadHint: '點選或拖曳檔案到此區域',
+        supportFormat: '支援 .json 檔案',
+        orPasteJson: '或貼上匯出的收藏 JSON',
+        pastePlaceholder: '貼上收藏資料...',
+        mergeStrategy: '合併策略',
+        skipDuplicate: '跳過重複',
+        overwriteDuplicate: '覆蓋重複',
+        createCopy: '建立副本',
+        cancel: '取消',
+        import: '匯入',
+        importing: '匯入中...',
+        selectFileOrPaste: '請先選擇檔案或貼上匯入資料',
+        importSuccess: '匯入完成：成功 {imported} 項，跳過 {skipped} 項',
+        importPartialFailed: '部分收藏匯入失敗',
+        importFailed: '匯入失敗',
+        readFileFailed: '讀取檔案失敗'
+      },
+      categoryManager: {
+        title: '分類管理'
+      },
+      actions: {
+        export: '匯出收藏',
+        clear: '清空收藏',
+        exportSuccess: '匯出成功',
+        exportFailed: '匯出失敗',
+        clearConfirm: '確定要清空所有收藏嗎？此操作不可恢復。',
+        clearSuccess: '清空成功',
+        clearFailed: '清空失敗',
+        deleteConfirm: '確定要刪除收藏 "{title}" 嗎？此操作不可恢復。',
+        deleteSuccess: '刪除成功',
+        deleteFailed: '刪除失敗',
+        copySuccess: '已複製到剪貼簿',
+        copyFailed: '複製失敗',
+        copiedOptimized: '已複製優化後的提示詞',
+        copiedReasoning: '已複製推理內容',
+        copiedAll: '已複製內容',
+        shareComingSoon: '分享功能即將上線',
+        categoryManagementComingSoon: '分類管理功能將在後續版本提供'
+      },
+      preview: {
+        title: '收藏詳情',
+        updatedAt: '更新於 {time}'
+      },
+      messages: {
+        unavailable: '收藏功能暫不可用，請稍後再試',
+        loadFailed: '載入收藏失敗',
+        loadCategoryFailed: '載入分類失敗',
+        managerNotInitialized: '收藏管理器未初始化'
+      },
+      time: {
+        justNow: '剛剛',
+        minutesAgo: '{minutes}分鐘前',
+        hoursAgo: '{hours}小時前',
+        yesterday: '昨天',
+        daysAgo: '{days}天前'
+      },
+      card: {
+        useCount: '使用次數',
+        copyContent: '複製內容',
+        useNow: '立即使用',
+        edit: '編輯',
+        delete: '刪除',
+        cancel: '取消',
+        deleteConfirm: '確定刪除"{title}"嗎？'
+      }
+    },
+    dialog: {
+      createTitle: '新建收藏',
+      editTitle: '編輯收藏',
+      saveTitle: '儲存到收藏夾',
+      basicInfo: '📋 基礎資訊',
+      contentTitle: '📝 正文內容',
+      titleLabel: '標題',
+      titlePlaceholder: '為這個提示詞起個名字',
+      categoryLabel: '分類',
+      categoryPlaceholder: '選擇分類（可選）',
+      functionModeLabel: '功能模式',
+      descriptionLabel: '描述',
+      descriptionPlaceholder: '描述這個提示詞的用途和特點',
+      optimizationModeLabel: '優化模式',
+      optimizationModePlaceholder: '選擇優化模式',
+      imageModeLabel: '圖像模式',
+      imageModePlaceholder: '選擇圖像模式',
+      tagsLabel: '標籤',
+      tagsPlaceholder: '輸入標籤後按Enter新增',
+      contentPlaceholder: '在這裡輸入提示詞內容...',
+      cancel: '取消',
+      save: '儲存',
+      functionModes: {
+        basic: '基礎',
+        context: '情境',
+        image: '圖像'
+      },
+      optimizationModes: {
+        system: '系統提示詞',
+        user: '使用者提示詞'
+      },
+      imageModes: {
+        text2image: '文生圖',
+        image2image: '圖生圖'
+      },
+      validation: {
+        titleRequired: '標題不能為空',
+        contentRequired: '內容不能為空'
+      },
+      messages: {
+        editSuccess: '編輯成功',
+        saveSuccess: '儲存到收藏夾成功',
+        saveFailed: '儲存失敗',
+        editFailed: '編輯失敗',
+        unavailable: '收藏功能暫不可用，請稍後再試'
+      }
+    },
+    categoryManager: {
+      title: '分類管理',
+      addRootCategory: '新增根分類',
+      addSubCategory: '新增子分類',
+      expandAll: '全部展開',
+      collapseAll: '全部摺疊',
+      edit: '編輯',
+      delete: '刪除',
+      editCategory: '編輯分類',
+      addCategory: '新增分類',
+      categoryName: '分類名稱',
+      categoryNamePlaceholder: '請輸入分類名稱',
+      categoryDescription: '分類描述',
+      categoryDescriptionPlaceholder: '請輸入分類描述',
+      parentCategory: '父分類',
+      parentCategoryPlaceholder: '選擇父分類（不選則為根分類）',
+      categoryColor: '分類顏色',
+      confirmDelete: '確認刪除',
+      deleteWarning: '確定要刪除分類 <strong>{name}</strong> 嗎？',
+      deleteChildrenWarning: '警告：該分類下還有 {count} 個子分類，將一併刪除！',
+      deleteUsageWarning: '提示：該分類已被 {count} 個收藏使用，刪除後這些收藏將變為未分類。',
+      deleteSuccess: '刪除成功',
+      deleteFailed: '刪除失敗',
+      saveSuccess: '儲存成功',
+      addSuccess: '新增成功',
+      updateSuccess: '更新成功',
+      saveFailed: '儲存失敗',
+      loadFailed: '載入分類失敗',
+      validation: {
+        nameRequired: '請輸入分類名稱',
+        nameLength: '分類名稱長度應在 1-50 之間'
+      },
+      defaultCategories: {
+        uncategorized: '未分類',
+        uncategorizedDesc: '預設分類',
+        systemPrompt: '系統提示詞',
+        systemPromptDesc: '優化後的系統提示詞',
+        userPrompt: '使用者提示詞',
+        userPromptDesc: '優化後的使用者提示詞',
+        creativeWriting: '創意寫作',
+        creativeWritingDesc: '創意寫作相關的提示詞',
+        programming: '程式開發',
+        programmingDesc: '程式開發相關的提示詞',
+        businessAnalysis: '商業分析',
+        businessAnalysisDesc: '商業分析相關的提示詞'
+      }
+    }
   },
   promptOptimizer: {
     title: '提示詞優化器',