mirror of https://github.com/linshenkx/prompt-optimizer.git synced 2026-06-20 11:02:16 +08:00

Files

linshen acf592ab2c refactor(template): 优化模板管理与服务注入，增强错误处理并添加故障排除清单

- 添加模板管理故障排除清单，以帮助用户解决模板管理中遇到的常见问题。
- 统一服务注入逻辑，移除不必要的props定义，增强错误处理机制。
- 优化模板管理，统一服务注入与存储键管理。
- 更新 `TemplateSelect.vue`，移除 `services` prop，改用 `inject` 注入服务。
- 整合 `useTemplateManager`，统一模板选择保存逻辑及存储键管理。
- 新增 `storage-keys.ts`，集中管理存储键常量，避免重复定义，便于维护与遍历。
- 更新相关组件以适配新的模板管理方式，确保模板选择状态正确保存和恢复。
- 修正了模板类型错误的问题，确保在管理界面切换分类后添加的模板类型与当前显示的分类一致。
- 修复了模板管理器打开位置错误的问题，确保从不同入口打开模板管理器时，定位到正确的分类。
- 优化了模板保存和导入逻辑，增加了错误处理和提示。
- 确保所有异步模板操作都使用了 `await` 关键字，避免潜在的时序问题。
- 移除了 `usePromptOptimizer` 中 `selectedOptimizationMode` 的默认值，强制传入该参数。
- 优化了 `TemplateSelect` 组件中 `optimizationMode` prop 的处理，设为 `required`。

2025-06-29 10:10:26 +08:00

1.8 KiB

Raw Permalink Blame History

布局系统经验总结

📋 功能概述

项目中动态Flex布局系统的设计、实现和优化经验总结，包括核心布局原则、常见问题解决方案和最佳实践。

🎯 核心成果

建立了完整的动态Flex布局体系
解决了复杂响应式布局问题
形成了系统化的布局调试方法
建立了布局问题快速排查流程

📅 时间线

开始时间: 2024-12-01
完成时间: 2024-12-21
当前状态: ✅ 已完成

🏗️ 核心原则

黄金法则

最高指导原则: 一个元素若要作为 Flex 子项（flex-1）进行伸缩，其直接父元素必须是 Flex 容器（display: flex）
约束链完整性: 从顶层到底层的所有相关父子元素都必须遵循 Flex 规则
黄金组合: flex: 1 + min-h-0（或 min-w-0）

实施要点

/* 父容器 */
.parent {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 或其他明确高度 */
}

/* 动态子项 */
.child {
  flex: 1;
  min-height: 0; /* 关键：允许收缩 */
}

/* 滚动容器 */
.scrollable {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

🔧 重要修复案例

TestPanel 复杂响应式布局修复

问题: flex 布局问题，内容被推向上方
原因: 高度约束传递不完整，混合布局模式处理不当
解决: 完整的 flex 约束链，标题标记为 flex-none

📚 相关文档

🔗 关联功能

104-test-panel-refactor - 测试面板重构
105-output-display-v2 - 输出显示v2

状态: ✅ 已完成
负责人: AI Assistant
最后更新: 2025-07-01

1.8 KiB Raw Permalink Blame History Unescape Escape