principles.tsx

概述

提示工程原则总结组件。以卡片列表形式展示核心提示工程原则，每个原则配有图标、标题和简要说明。

组件

PrinciplesSummary

原则总结展示组件，从本地化数据动态加载原则列表。

功能特性：

• 动态加载本地化原则数据
• 图标映射显示
• 彩色卡片样式
• 响应式网格布局（移动端单列，桌面端自适应）

数据结构：

从 locales/*.ts 的 principles 字段获取数据：

interface Principle {
  iconName: string;    // 图标名称
  title: string;       // 原则标题
  description: string; // 原则描述
  color: string;       // 颜色键
}

支持的颜色：

颜色键	背景	边框	图标
blue	blue-50	blue-200	blue-600
green	green-50	green-200	green-600
purple	purple-50	purple-200	purple-600
amber	amber-50	amber-200	amber-600
pink	pink-50	pink-200	pink-600
cyan	cyan-50	cyan-200	cyan-600
indigo	indigo-50	indigo-200	indigo-600
rose	rose-50	rose-200	rose-600

支持的内置图标：

图标名	Lucide 组件	典型用途
Gem	Gem	价值/质量原则
Target	Target	明确性原则
Crown	Crown	优先级原则
Compass	Compass	方向/指导原则
RefreshCw	RefreshCw	迭代优化原则
Sparkles	Sparkles	创意/创新原则
Ruler	Ruler	衡量/约束原则
CheckCircle	CheckCircle	验证/确认原则

视觉样式：

• 网格布局：grid gap-2
• 卡片内边距：p-3
• 圆角：rounded-lg
• 图标尺寸：h-5 w-5
• 标题加粗：font-semibold
• 描述文字：muted 颜色

使用示例：

import { PrinciplesSummary } from "@/components/book/elements/principles";

export function ChapterSummary() {
  return (
    <div className="chapter-end">
      <h2>本章核心原则</h2>
      <PrinciplesSummary />
    </div>
  );
}

本地化数据示例

// locales/zh.ts
export default {
  principles: [
    {
      iconName: "Target",
      title: "明确具体",
      description: "清晰地描述你期望的输出格式和内容",
      color: "blue"
    },
    {
      iconName: "Gem", 
      title: "提供上下文",
      description: "给出足够的背景信息帮助 AI 理解任务",
      color: "purple"
    },
    {
      iconName: "RefreshCw",
      title: "迭代优化", 
      description: "根据输出结果持续改进提示词",
      color: "green"
    }
  ]
} satisfies LocaleData;

依赖

依赖	用途
lucide-react	图标组件（Gem, Target, Crown 等）
@/lib/utils - cn	类名合并
next-intl - useLocale	获取当前语言
./locales - getLocaleField, Principle	本地化数据获取

组件实现细节

export function PrinciplesSummary() {
  const locale = useLocale();
  const principles = getLocaleField(locale, "principles");
  
  return (
    <div className="my-6 grid gap-2">
      {principles.map((principle, index) => {
        const colors = principleColors[principle.color];
        const Icon = iconMap[principle.iconName];
        return (
          <div
            key={index}
            className={cn(
              "flex items-center gap-3 p-3 rounded-lg border", 
              colors.bg, 
              colors.border
            )}
          >
            <Icon className={cn("h-5 w-5 shrink-0", colors.icon)} />
            <div>
              <span className="font-semibold">{principle.title}</span>
              <span className="text-muted-foreground">
                {" — "}{principle.description}
              </span>
            </div>
          </div>
        );
      })}
    </div>
  );
}

扩展指南

添加新图标：

import { NewIcon } from "lucide-react";

const iconMap: Record<string, typeof Gem> = {
  // ... 现有图标
  NewIcon,  // 添加新图标
};

{
  iconName: "NewIcon",
  title: "新原则",
  description: "原则描述",
  color: "blue"
}