Skip to content

Commit 4ae281f

Browse files
CC11001100CC11001100
committed
feat: 提示词tokens过大时按钮变色提示
1 parent 1bb490c commit 4ae281f

File tree

3 files changed

+85
-26
lines changed

3 files changed

+85
-26
lines changed

‎src/pages/CopyButton.tsx‎

Lines changed: 49 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,28 @@ import Button from '@mui/material/Button';
33
import Snackbar from '@mui/material/Snackbar';
44
import Alert from '@mui/material/Alert';
55
import {FileInfo} from "../types/types.ts";
6+
import {keyframes} from '@mui/system';
67

78
interface CopyButtonProps {
89
content: string;
910
files: FileInfo[];
1011
}
1112

13+
const breathAnimation = keyframes`
14+
0% {
15+
background-position: 0% 50%;
16+
opacity: 0.8;
17+
}
18+
50% {
19+
background-position: 100% 50%;
20+
opacity: 1;
21+
}
22+
100% {
23+
background-position: 0% 50%;
24+
opacity: 0.8;
25+
}
26+
`;
27+
1228
const formatTokenCount = (count: number): string => {
1329
if (count >= 10000) {
1430
return `${(count / 10000).toFixed(1).replace(/\.0$/, '')}万`;
@@ -31,7 +47,6 @@ const CopyButton: React.FC<CopyButtonProps> = ({content, files}) => {
3147
`\`\`\`${file.path}\n${file.content}\n\`\`\``
3248
).join('\n\n');
3349
const totalContent = `${content}\n\n${filesContent}`;
34-
// 使用近似算法：1个token约等于4个字符
3550
return Math.ceil(totalContent.length / 4);
3651
}, [content, files]);
3752

@@ -56,13 +71,42 @@ const CopyButton: React.FC<CopyButtonProps> = ({content, files}) => {
5671
<Button
5772
variant="contained"
5873
onClick={handleCopy}
59-
sx={{
74+
sx={theme => ({
6075
mt: 3,
6176
fontSize: '1.1rem',
6277
padding: '12px 24px',
63-
width: '100%'
64-
}}>
65-
构造提示词并复制到剪切板 (约 {formattedToken} Tokens)
78+
width: '100%',
79+
position: 'relative',
80+
overflow: 'hidden',
81+
'&::before': tokenCount >= 10000 ? {
82+
content: '""',
83+
position: 'absolute',
84+
top: '-4px',
85+
left: '-4px',
86+
right: '-4px',
87+
bottom: '-4px',
88+
background: `linear-gradient(45deg,
89+
rgba(255, 80, 80, 0.8) 0%,
90+
rgba(255, 120, 120, 0.6) 50%,
91+
rgba(255, 80, 80, 0.8) 100%)`,
92+
borderRadius: 'inherit',
93+
animation: `${breathAnimation} 2s infinite ease-in-out`,
94+
zIndex: 1,
95+
} : {},
96+
'& .MuiButton-contained': {
97+
position: 'relative',
98+
zIndex: 2
99+
},
100+
'&:hover': {
101+
backgroundColor: tokenCount >= 10000
102+
? theme.palette.error.light
103+
: theme.palette.primary.dark
104+
}
105+
})}
106+
>
107+
<span style={{position: 'relative', zIndex: 2}}>
108+
构造提示词并复制到剪切板 (约 {formattedToken} Tokens)
109+
</span>
66110
</Button>
67111
<Snackbar
68112
open={open}

‎src/pages/MarkdownEditor.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,10 @@ interface FileInfo {
2121
interface MarkdownEditorProps {
2222
ruleContent: string;
2323
roleContent: string;
24+
outputContent: string;
2425
}
2526

26-
const MarkdownEditor: React.FC<MarkdownEditorProps> = ({ruleContent, roleContent}) => {
27+
const MarkdownEditor: React.FC<MarkdownEditorProps> = ({ruleContent, roleContent, outputContent}) => {
2728
const [markdownContent, setMarkdownContent] = useState(() => {
2829
const saved = localStorage.getItem('markdownContent');
2930
return saved || '';
@@ -91,7 +92,7 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = ({ruleContent, roleContent
9192
</SyntaxHighlighter>
9293
);
9394

94-
const combinedContent = `# 角色\n${roleContent}\n\n# 规则\n${ruleContent}\n\n# 任务\n${markdownContent}`;
95+
const combinedContent = `# 角色\n${roleContent}\n\n# 规则\n${ruleContent}\n\n# 任务\n${markdownContent}\n\n# 输出格式\n${outputContent}`;
9596

9697
return (
9798
<div className="editor-container">

‎src/pages/PromptTemplate.tsx‎

Lines changed: 33 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import {Button, TextField} from '@mui/material';
66
import {useNavigate, useParams} from 'react-router-dom';
77

88
export default function PromptTemplate() {
9-
109
const {id} = useParams();
1110
const navigate = useNavigate();
1211

@@ -20,6 +19,11 @@ export default function PromptTemplate() {
2019
return saved || '';
2120
});
2221

22+
const [outputContent, setOutputContent] = useState(() => {
23+
const saved = localStorage.getItem('outputContent');
24+
return saved || '';
25+
});
26+
2327
useEffect(() => {
2428
const timer = setTimeout(() => {
2529
localStorage.setItem('ruleContent', ruleContent);
@@ -34,17 +38,21 @@ export default function PromptTemplate() {
3438
return () => clearTimeout(timer);
3539
}, [roleContent]);
3640

41+
useEffect(() => {
42+
const timer = setTimeout(() => {
43+
localStorage.setItem('outputContent', outputContent);
44+
}, 500);
45+
return () => clearTimeout(timer);
46+
}, [outputContent]);
47+
3748
return (
3849
<div className="template-container">
39-
{/* 标题区域 */}
4050
<header className="template-header">
4151
<h1>AI辅助写代码提示词构造器</h1>
4252
<p>支持文件拖拽上传</p>
4353
</header>
4454

45-
{/* 功能区域 */}
4655
<main className="editor-wrapper">
47-
4856
<div className="role-input-section">
4957
<TextField
5058
fullWidth
@@ -55,13 +63,7 @@ export default function PromptTemplate() {
5563
onChange={(e) => setRoleContent(e.target.value)}
5664
label="角色信息（Markdown格式）"
5765
variant="outlined"
58-
sx={{
59-
marginBottom: 2,
60-
'& .MuiInputBase-root': {
61-
overflow: 'hidden',
62-
transition: 'height 0.2s ease-out'
63-
}
64-
}}
66+
sx={{marginBottom: 2}}
6567
/>
6668
</div>
6769

@@ -75,17 +77,29 @@ export default function PromptTemplate() {
7577
onChange={(e) => setRuleContent(e.target.value)}
7678
label="规则内容（Markdown格式）"
7779
variant="outlined"
78-
sx={{
79-
marginBottom: 2,
80-
'& .MuiInputBase-root': {
81-
overflow: 'hidden',
82-
transition: 'height 0.2s ease-out'
83-
}
84-
}}
80+
sx={{marginBottom: 2}}
81+
/>
82+
</div>
83+
84+
<div className="output-input-section">
85+
<TextField
86+
fullWidth
87+
multiline
88+
minRows={4}
89+
maxRows={10}
90+
value={outputContent}
91+
onChange={(e) => setOutputContent(e.target.value)}
92+
label="输出结果（Markdown格式）"
93+
variant="outlined"
94+
sx={{marginBottom: 2}}
8595
/>
8696
</div>
8797

88-
<MarkdownEditor ruleContent={ruleContent} roleContent={roleContent}/>
98+
<MarkdownEditor
99+
ruleContent={ruleContent}
100+
roleContent={roleContent}
101+
outputContent={outputContent}
102+
/>
89103
</main>
90104

91105
{id && (

0 commit comments

Comments
 (0)