File size: 4,264 Bytes
d47b053 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | /**
* 提示词侧边栏 - 简洁风格
*/
import type { RoleType, SharedModuleType } from '../types/api';
import type { SelectionType } from '../hooks/usePrompts';
import { useI18n } from '../i18n';
// ============================================================================
// 配置
// ============================================================================
interface Props {
selection: SelectionType;
onSelect: (sel: SelectionType) => void;
}
export function PromptSidebar({ selection, onSelect }: Props) {
const { t } = useI18n();
const roleLabels: Record<RoleType, string> = {
problemFraming: t('prompts.role.problemFraming'),
conceptDesigner: t('prompts.role.conceptDesigner'),
codeGeneration: t('prompts.role.codeGeneration'),
codeRetry: t('prompts.role.codeRetry'),
codeEdit: t('prompts.role.codeEdit')
};
const sharedLabels: Record<SharedModuleType, string> = {
apiIndex: t('prompts.shared.apiIndex'),
specification: t('prompts.shared.specification')
};
const isRoleSelected = (role: RoleType, promptType: 'system' | 'user') =>
selection.kind === 'role' &&
selection.role === role &&
selection.promptType === promptType;
const isSharedSelected = (module: SharedModuleType) =>
selection.kind === 'shared' && selection.module === module;
return (
<div className="w-56 bg-bg-secondary/20 border-r border-bg-tertiary/30 overflow-y-auto">
<div className="p-3 space-y-4">
{/* 角色提示词 */}
<div>
<h3 className="px-3 py-1.5 text-xs font-medium text-text-secondary/50 uppercase tracking-wider">
{t('prompts.roleSection')}
</h3>
<div className="space-y-0.5">
{(Object.keys(roleLabels) as RoleType[]).map(role => (
<div key={role}>
{/* 角色名 */}
<div className="px-3 py-1.5 text-xs text-text-secondary/70">
{roleLabels[role]}
</div>
{/* System / User 按钮 */}
<div className="flex gap-1 px-3 pb-1">
<button
onClick={() => onSelect({ kind: 'role', role, promptType: 'system' })}
className={`flex-1 px-2 py-1 text-xs rounded transition-colors ${
isRoleSelected(role, 'system')
? 'bg-accent/20 text-accent'
: 'text-text-secondary/60 hover:bg-bg-tertiary/50 hover:text-text-secondary'
}`}
>
{t('common.system')}
</button>
<button
onClick={() => onSelect({ kind: 'role', role, promptType: 'user' })}
className={`flex-1 px-2 py-1 text-xs rounded transition-colors ${
isRoleSelected(role, 'user')
? 'bg-accent/20 text-accent'
: 'text-text-secondary/60 hover:bg-bg-tertiary/50 hover:text-text-secondary'
}`}
>
{t('common.user')}
</button>
</div>
</div>
))}
</div>
</div>
{/* 分隔线 */}
<div className="border-t border-bg-tertiary/30" />
{/* 共享模块 */}
<div>
<h3 className="px-3 py-1.5 text-xs font-medium text-text-secondary/50 uppercase tracking-wider">
{t('prompts.sharedSection')}
</h3>
<div className="space-y-0.5">
{(Object.keys(sharedLabels) as SharedModuleType[]).map(module => (
<button
key={module}
onClick={() => onSelect({ kind: 'shared', module })}
className={`w-full px-3 py-2 text-left text-sm rounded transition-colors ${
isSharedSelected(module)
? 'bg-accent/20 text-accent'
: 'text-text-secondary/70 hover:bg-bg-tertiary/50 hover:text-text-secondary'
}`}
>
{sharedLabels[module]}
</button>
))}
</div>
</div>
</div>
</div>
);
}
|