mirror of
https://github.com/claude-code-best/claude-code.git
synced 2026-06-23 00:35:51 +00:00
style: 完成所有文件的lint
This commit is contained in:
claude-code-best
@@ -1,7 +1,7 @@
|
||||
import { useState } from "react";
|
||||
import type { Question } from "../types";
|
||||
import { esc, cn, truncate } from "../lib/utils";
|
||||
import { TriangleAlert, Check } from "lucide-react";
|
||||
import { useState } from 'react';
|
||||
import type { Question } from '../types';
|
||||
import { esc, cn, truncate } from '../lib/utils';
|
||||
import { TriangleAlert, Check } from 'lucide-react';
|
||||
|
||||
// ============================================================
|
||||
// PermissionPromptView — simple approve/reject for tool use
|
||||
@@ -22,7 +22,7 @@ export function PermissionPromptView({
|
||||
onApprove: () => void;
|
||||
onReject: () => void;
|
||||
}) {
|
||||
const inputStr = typeof toolInput === "string" ? toolInput : JSON.stringify(toolInput, null, 2);
|
||||
const inputStr = typeof toolInput === 'string' ? toolInput : JSON.stringify(toolInput, null, 2);
|
||||
|
||||
return (
|
||||
<div className="rounded-xl border border-warning-border/30 bg-surface-1 p-4">
|
||||
@@ -34,7 +34,7 @@ export function PermissionPromptView({
|
||||
</div>
|
||||
{description && <div className="mb-2 text-sm text-text-secondary">{esc(description)}</div>}
|
||||
<div className="mb-2 font-mono text-xs font-bold text-text-primary">{esc(toolName)}</div>
|
||||
{toolName !== "AskUserQuestion" && (
|
||||
{toolName !== 'AskUserQuestion' && (
|
||||
<pre className="mb-3 max-h-40 overflow-auto rounded-lg bg-surface-1 p-2 text-xs text-text-secondary font-mono">
|
||||
{truncate(inputStr, 500)}
|
||||
</pre>
|
||||
@@ -80,7 +80,7 @@ export function AskUserPanelView({
|
||||
const handleSelect = (qIdx: number, oIdx: number, multiSelect: boolean) => {
|
||||
if (multiSelect) {
|
||||
const current = (answers[qIdx] as number[]) || [];
|
||||
const next = current.includes(oIdx) ? current.filter((i) => i !== oIdx) : [...current, oIdx];
|
||||
const next = current.includes(oIdx) ? current.filter(i => i !== oIdx) : [...current, oIdx];
|
||||
setAnswers({ ...answers, [qIdx]: next });
|
||||
} else {
|
||||
setAnswers({ ...answers, [qIdx]: oIdx });
|
||||
@@ -91,7 +91,7 @@ export function AskUserPanelView({
|
||||
const text = otherTexts[qIdx]?.trim();
|
||||
if (!text) return;
|
||||
setAnswers({ ...answers, [qIdx]: text });
|
||||
setOtherTexts({ ...otherTexts, [qIdx]: "" });
|
||||
setOtherTexts({ ...otherTexts, [qIdx]: '' });
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
@@ -99,8 +99,8 @@ export function AskUserPanelView({
|
||||
for (const [qIdx, val] of Object.entries(answers)) {
|
||||
const q = questions[parseInt(qIdx, 10)];
|
||||
if (!q) continue;
|
||||
if (typeof val === "number") mapped[qIdx] = q.options?.[val]?.label || String(val);
|
||||
else if (Array.isArray(val)) mapped[qIdx] = val.map((i) => q.options?.[i]?.label || String(i));
|
||||
if (typeof val === 'number') mapped[qIdx] = q.options?.[val]?.label || String(val);
|
||||
else if (Array.isArray(val)) mapped[qIdx] = val.map(i => q.options?.[i]?.label || String(i));
|
||||
else mapped[qIdx] = val;
|
||||
}
|
||||
onSubmit(mapped);
|
||||
@@ -114,22 +114,20 @@ export function AskUserPanelView({
|
||||
return (
|
||||
<div className="rounded-xl border border-brand/30 bg-surface-1 p-4">
|
||||
<div className="mb-3 text-sm font-semibold text-text-primary">
|
||||
{esc(description || q.question || "Question")}
|
||||
{esc(description || q.question || 'Question')}
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{(q.options || []).map((opt, j) => {
|
||||
const isSelected = multiSelect
|
||||
? ((answers[0] as number[]) || []).includes(j)
|
||||
: answers[0] === j;
|
||||
const isSelected = multiSelect ? ((answers[0] as number[]) || []).includes(j) : answers[0] === j;
|
||||
return (
|
||||
<button
|
||||
key={j}
|
||||
onClick={() => handleSelect(0, j, multiSelect)}
|
||||
className={cn(
|
||||
"w-full rounded-lg border px-4 py-2.5 text-left text-sm transition-colors",
|
||||
'w-full rounded-lg border px-4 py-2.5 text-left text-sm transition-colors',
|
||||
isSelected
|
||||
? "border-brand bg-brand/10 text-text-primary"
|
||||
: "border-border bg-surface-2 text-text-secondary hover:border-border-light",
|
||||
? 'border-brand bg-brand/10 text-text-primary'
|
||||
: 'border-border bg-surface-2 text-text-secondary hover:border-border-light',
|
||||
)}
|
||||
>
|
||||
<div className="font-medium">{esc(opt.label)}</div>
|
||||
@@ -140,20 +138,33 @@ export function AskUserPanelView({
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={otherTexts[0] || ""}
|
||||
onChange={(e) => setOtherTexts({ ...otherTexts, [0]: e.target.value })}
|
||||
value={otherTexts[0] || ''}
|
||||
onChange={e => setOtherTexts({ ...otherTexts, [0]: e.target.value })}
|
||||
placeholder="Other..."
|
||||
className="flex-1 rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:border-brand focus:outline-none"
|
||||
onKeyDown={(e) => e.key === "Enter" && handleOtherSubmit(0)}
|
||||
onKeyDown={e => e.key === 'Enter' && handleOtherSubmit(0)}
|
||||
/>
|
||||
<button onClick={() => handleOtherSubmit(0)} className="rounded-lg border border-border px-3 py-2 text-sm text-text-secondary hover:bg-surface-2 transition-colors">
|
||||
<button
|
||||
onClick={() => handleOtherSubmit(0)}
|
||||
className="rounded-lg border border-border px-3 py-2 text-sm text-text-secondary hover:bg-surface-2 transition-colors"
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 flex gap-2">
|
||||
<button onClick={handleSubmit} className="rounded-lg bg-brand px-4 py-2 text-sm font-medium text-white hover:bg-brand-light transition-colors">Submit</button>
|
||||
<button onClick={onSkip} className="rounded-lg border border-border px-4 py-2 text-sm text-text-secondary hover:bg-surface-2 transition-colors">Skip</button>
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
className="rounded-lg bg-brand px-4 py-2 text-sm font-medium text-white hover:bg-brand-light transition-colors"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
<button
|
||||
onClick={onSkip}
|
||||
className="rounded-lg border border-border px-4 py-2 text-sm text-text-secondary hover:bg-surface-2 transition-colors"
|
||||
>
|
||||
Skip
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -164,15 +175,15 @@ export function AskUserPanelView({
|
||||
|
||||
return (
|
||||
<div className="rounded-xl border border-brand/30 bg-surface-1 p-4">
|
||||
<div className="mb-3 text-sm font-semibold text-text-primary">{esc(description || "Questions")}</div>
|
||||
<div className="mb-3 text-sm font-semibold text-text-primary">{esc(description || 'Questions')}</div>
|
||||
<div className="mb-3 flex gap-1 overflow-x-auto">
|
||||
{questions.map((q, i) => (
|
||||
<button
|
||||
key={i}
|
||||
onClick={() => setActiveTab(i)}
|
||||
className={cn(
|
||||
"rounded-md px-3 py-1.5 text-xs whitespace-nowrap transition-colors",
|
||||
activeTab === i ? "bg-brand/20 text-brand" : "text-text-muted hover:bg-surface-2",
|
||||
'rounded-md px-3 py-1.5 text-xs whitespace-nowrap transition-colors',
|
||||
activeTab === i ? 'bg-brand/20 text-brand' : 'text-text-muted hover:bg-surface-2',
|
||||
)}
|
||||
>
|
||||
{q.header || `Q${i + 1}`}
|
||||
@@ -193,10 +204,22 @@ export function AskUserPanelView({
|
||||
)}
|
||||
|
||||
<div className="mt-4 flex items-center justify-between">
|
||||
<span className="text-xs text-text-muted">{activeTab + 1} / {questions.length}</span>
|
||||
<span className="text-xs text-text-muted">
|
||||
{activeTab + 1} / {questions.length}
|
||||
</span>
|
||||
<div className="flex gap-2">
|
||||
<button onClick={handleSubmit} className="rounded-lg bg-brand px-4 py-2 text-sm font-medium text-white hover:bg-brand-light transition-colors">Submit All</button>
|
||||
<button onClick={onSkip} className="rounded-lg border border-border px-4 py-2 text-sm text-text-secondary hover:bg-surface-2 transition-colors">Skip</button>
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
className="rounded-lg bg-brand px-4 py-2 text-sm font-medium text-white hover:bg-brand-light transition-colors"
|
||||
>
|
||||
Submit All
|
||||
</button>
|
||||
<button
|
||||
onClick={onSkip}
|
||||
className="rounded-lg border border-border px-4 py-2 text-sm text-text-secondary hover:bg-surface-2 transition-colors"
|
||||
>
|
||||
Skip
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -204,7 +227,13 @@ export function AskUserPanelView({
|
||||
}
|
||||
|
||||
function QuestionTab({
|
||||
question, qIdx, answers, otherTexts, onSelect, onOtherTextChange, onOtherSubmit,
|
||||
question,
|
||||
qIdx,
|
||||
answers,
|
||||
otherTexts,
|
||||
onSelect,
|
||||
onOtherTextChange,
|
||||
onOtherSubmit,
|
||||
}: {
|
||||
question: Question;
|
||||
qIdx: number;
|
||||
@@ -221,18 +250,16 @@ function QuestionTab({
|
||||
<div className="mb-2 text-sm text-text-secondary">{esc(question.question)}</div>
|
||||
<div className="space-y-2">
|
||||
{(question.options || []).map((opt, j) => {
|
||||
const isSelected = multiSelect
|
||||
? ((answers[qIdx] as number[]) || []).includes(j)
|
||||
: answers[qIdx] === j;
|
||||
const isSelected = multiSelect ? ((answers[qIdx] as number[]) || []).includes(j) : answers[qIdx] === j;
|
||||
return (
|
||||
<button
|
||||
key={j}
|
||||
onClick={() => onSelect(qIdx, j, multiSelect)}
|
||||
className={cn(
|
||||
"w-full rounded-lg border px-4 py-2.5 text-left text-sm transition-colors",
|
||||
'w-full rounded-lg border px-4 py-2.5 text-left text-sm transition-colors',
|
||||
isSelected
|
||||
? "border-brand bg-brand/10 text-text-primary"
|
||||
: "border-border bg-surface-2 text-text-secondary hover:border-border-light",
|
||||
? 'border-brand bg-brand/10 text-text-primary'
|
||||
: 'border-border bg-surface-2 text-text-secondary hover:border-border-light',
|
||||
)}
|
||||
>
|
||||
<div className="font-medium">{esc(opt.label)}</div>
|
||||
@@ -243,13 +270,18 @@ function QuestionTab({
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={otherTexts[qIdx] || ""}
|
||||
onChange={(e) => onOtherTextChange(qIdx, e.target.value)}
|
||||
value={otherTexts[qIdx] || ''}
|
||||
onChange={e => onOtherTextChange(qIdx, e.target.value)}
|
||||
placeholder="Other..."
|
||||
className="flex-1 rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:border-brand focus:outline-none"
|
||||
onKeyDown={(e) => e.key === "Enter" && onOtherSubmit(qIdx)}
|
||||
onKeyDown={e => e.key === 'Enter' && onOtherSubmit(qIdx)}
|
||||
/>
|
||||
<button onClick={() => onOtherSubmit(qIdx)} className="rounded-lg border border-border px-3 py-2 text-sm text-text-secondary hover:bg-surface-2 transition-colors">Send</button>
|
||||
<button
|
||||
onClick={() => onOtherSubmit(qIdx)}
|
||||
className="rounded-lg border border-border px-3 py-2 text-sm text-text-secondary hover:bg-surface-2 transition-colors"
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -271,12 +303,12 @@ export function PlanPanelView({
|
||||
onSubmit: (value: string, feedback?: string) => void;
|
||||
}) {
|
||||
const [selected, setSelected] = useState<string | null>(null);
|
||||
const [feedback, setFeedback] = useState("");
|
||||
const [feedback, setFeedback] = useState('');
|
||||
const isEmpty = !planContent || !planContent.trim();
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (!selected) return;
|
||||
onSubmit(selected, selected === "no" ? feedback : undefined);
|
||||
onSubmit(selected, selected === 'no' ? feedback : undefined);
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -286,33 +318,49 @@ export function PlanPanelView({
|
||||
<Check className="h-3 w-3" strokeWidth={2.5} />
|
||||
</span>
|
||||
<span className="text-sm font-semibold text-text-primary">
|
||||
{isEmpty ? "Exit plan mode?" : "Ready to code?"}
|
||||
{isEmpty ? 'Exit plan mode?' : 'Ready to code?'}
|
||||
</span>
|
||||
</div>
|
||||
{!isEmpty && (
|
||||
<div
|
||||
className="mb-4 max-h-64 overflow-auto rounded-lg bg-tool-card p-4 text-sm text-text-secondary"
|
||||
// biome-ignore lint/security/noDangerouslySetInnerHtml: content is sanitized by formatPlanContent
|
||||
dangerouslySetInnerHTML={{ __html: formatPlanContent(planContent) }}
|
||||
/>
|
||||
)}
|
||||
<div className="space-y-2">
|
||||
{isEmpty ? (
|
||||
<>
|
||||
<PlanOption selected={selected === "yes-default"} onClick={() => setSelected("yes-default")} label="Yes" />
|
||||
<PlanOption selected={selected === "no"} onClick={() => setSelected("no")} label="No" />
|
||||
<PlanOption selected={selected === 'yes-default'} onClick={() => setSelected('yes-default')} label="Yes" />
|
||||
<PlanOption selected={selected === 'no'} onClick={() => setSelected('no')} label="No" />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<PlanOption selected={selected === "yes-accept-edits"} onClick={() => setSelected("yes-accept-edits")} label="Yes, auto-accept edits" desc="Approve plan and auto-accept file edits" />
|
||||
<PlanOption selected={selected === "yes-default"} onClick={() => setSelected("yes-default")} label="Yes, manually approve edits" desc="Approve plan but confirm each edit" />
|
||||
<PlanOption selected={selected === "no"} onClick={() => setSelected("no")} label="No, keep planning" desc="Provide feedback to refine the plan" />
|
||||
<PlanOption
|
||||
selected={selected === 'yes-accept-edits'}
|
||||
onClick={() => setSelected('yes-accept-edits')}
|
||||
label="Yes, auto-accept edits"
|
||||
desc="Approve plan and auto-accept file edits"
|
||||
/>
|
||||
<PlanOption
|
||||
selected={selected === 'yes-default'}
|
||||
onClick={() => setSelected('yes-default')}
|
||||
label="Yes, manually approve edits"
|
||||
desc="Approve plan but confirm each edit"
|
||||
/>
|
||||
<PlanOption
|
||||
selected={selected === 'no'}
|
||||
onClick={() => setSelected('no')}
|
||||
label="No, keep planning"
|
||||
desc="Provide feedback to refine the plan"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{selected === "no" && (
|
||||
{selected === 'no' && (
|
||||
<textarea
|
||||
value={feedback}
|
||||
onChange={(e) => setFeedback(e.target.value)}
|
||||
onChange={e => setFeedback(e.target.value)}
|
||||
placeholder="Tell Claude what to change..."
|
||||
className="mt-3 w-full rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:border-brand focus:outline-none"
|
||||
rows={3}
|
||||
@@ -331,21 +379,35 @@ export function PlanPanelView({
|
||||
);
|
||||
}
|
||||
|
||||
function PlanOption({ selected, onClick, label, desc }: { selected: boolean; onClick: () => void; label: string; desc?: string }) {
|
||||
function PlanOption({
|
||||
selected,
|
||||
onClick,
|
||||
label,
|
||||
desc,
|
||||
}: {
|
||||
selected: boolean;
|
||||
onClick: () => void;
|
||||
label: string;
|
||||
desc?: string;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
className={cn(
|
||||
"w-full rounded-lg border px-4 py-2.5 text-left text-sm transition-colors",
|
||||
selected ? "border-brand bg-brand/10 text-text-primary" : "border-border bg-surface-2 text-text-secondary hover:border-border-light",
|
||||
'w-full rounded-lg border px-4 py-2.5 text-left text-sm transition-colors',
|
||||
selected
|
||||
? 'border-brand bg-brand/10 text-text-primary'
|
||||
: 'border-border bg-surface-2 text-text-secondary hover:border-border-light',
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={cn(
|
||||
"flex h-4 w-4 items-center justify-center rounded-full border text-[10px] transition-colors",
|
||||
selected ? "border-brand bg-brand text-white" : "border-border",
|
||||
)}>
|
||||
{selected && "\u2713"}
|
||||
<span
|
||||
className={cn(
|
||||
'flex h-4 w-4 items-center justify-center rounded-full border text-[10px] transition-colors',
|
||||
selected ? 'border-brand bg-brand text-white' : 'border-border',
|
||||
)}
|
||||
>
|
||||
{selected && '\u2713'}
|
||||
</span>
|
||||
<span className="font-medium">{label}</span>
|
||||
</div>
|
||||
@@ -356,10 +418,12 @@ function PlanOption({ selected, onClick, label, desc }: { selected: boolean; onC
|
||||
|
||||
function formatPlanContent(content: string): string {
|
||||
let html = esc(content);
|
||||
html = html.replace(/```(\w*)\n?([\s\S]*?)```/g, (_, _l, code) =>
|
||||
`<pre class="my-2 overflow-x-auto rounded-lg bg-tool-card p-3 font-mono text-xs">${code.trim()}</pre>`
|
||||
html = html.replace(
|
||||
/```(\w*)\n?([\s\S]*?)```/g,
|
||||
(_, _l, code) =>
|
||||
`<pre class="my-2 overflow-x-auto rounded-lg bg-tool-card p-3 font-mono text-xs">${code.trim()}</pre>`,
|
||||
);
|
||||
html = html.replace(/`([^`]+)`/g, '<code class="rounded bg-tool-card px-1.5 py-0.5 font-mono text-xs">$1</code>');
|
||||
html = html.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
|
||||
html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
|
||||
return html;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user