feat: 准备部署

CC11001100 · CC11001100 · commit aa94726afc88 · 2025-02-11T03:48:46.000+08:00
diff --git a/.env b/.env
@@ -0,0 +1 @@
+VITE_BASE_URL=/ai-coding-prompt-builder/
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,30 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main  # 触发分支
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist
+          publish_branch: gh-pages
diff --git a/src/pages/About.tsx b/src/pages/About.tsx
@@ -1,11 +1,63 @@
-import React from "react";
+import React, { useState } from "react";
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import CloseIcon from '@mui/icons-material/Close';
 
 export default function About() {
+    const [openWeChat, setOpenWeChat] = useState(false);
+
     return (
         <div className="page-container">
             <h1>About Page</h1>
             <p>This is the about page description</p>
             <p>Built with React {React.version}</p>
+
+            <div style={{ marginTop: '20px', display: 'flex', gap: '10px' }}>
+                <Button
+                    variant="contained"
+                    color="primary"
+                    href="https://github.com/your-repo"
+                    target="_blank"
+                >
+                    GitHub Repository
+                </Button>
+                <Button
+                    variant="contained"
+                    color="secondary"
+                    onClick={() => setOpenWeChat(true)}
+                >
+                    Join WeChat Group
+                </Button>
+            </div>
+
+            <Dialog open={openWeChat} onClose={() => setOpenWeChat(false)}>
+                <DialogTitle>
+                    Scan QR Code
+                    <CloseIcon
+                        style={{
+                            position: 'absolute',
+                            right: '8px',
+                            top: '8px',
+                            cursor: 'pointer'
+                        }}
+                        onClick={() => setOpenWeChat(false)}
+                    />
+                </DialogTitle>
+                <DialogContent>
+                    <img
+                        src="/wechat-qr.png"
+                        alt="WeChat QR Code"
+                        style={{ width: '256px', height: '256px' }}
+                    />
+                    <p>Scan the QR code to join the technical exchange group.</p>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setOpenWeChat(false)}>Close</Button>
+                </DialogActions>
+            </Dialog>
         </div>
     );
 }
diff --git a/src/pages/CopyButton.tsx b/src/pages/CopyButton.tsx
@@ -6,7 +6,7 @@ import Alert from '@mui/material/Alert';
 
 interface CopyButtonProps {
     content: string;
-    files: Array<{ name: string; content: string }>;
+    files: Array<{ path: string; content: string }>;
 }
 
 const CopyButton: React.FC<CopyButtonProps> = ({ content, files }) => {
@@ -18,7 +18,7 @@ const CopyButton: React.FC<CopyButtonProps> = ({ content, files }) => {
 
     const handleCopy = async () => {
         const filesContent = files.map(file =>
-            `\`\`\`${file.name}\n${file.content}\n\`\`\``
+            `\`\`\`${file.path}\n${file.content}\n\`\`\``
         ).join('\n\n');
 
         const fullContent = `${content}\n\n# 相关参考文件：\n${filesContent}`;
diff --git a/src/pages/FileUpload.tsx b/src/pages/FileUpload.tsx
@@ -15,6 +15,7 @@ const FileUpload: React.FC<FileUploadProps> = ({onFilesUploaded}) => {
             reader.onload = (e) => {
                 resolve({
                     name: file.name,
+                    path: (file as any).path || file.name, // 获取完整路径
                     size: file.size,
                     extension: file.name.split('.').pop() || '',
                     content: e.target?.result as string
@@ -54,7 +55,7 @@ const FileUpload: React.FC<FileUploadProps> = ({onFilesUploaded}) => {
                 onChange={handleFileSelect}
                 className="file-input"
             />
-            <p>拖放文件到这里或点击选择文件</p>
+            <p>拖放AI参考代码文件到这里或点击此处选择文件（参考上下文越完整，AI推理结果越好）</p>
         </div>
     );
 };
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -33,8 +33,8 @@ export default function Home() {
         <div className="home-container">
             {/* 标题区域 */}
             <header className="home-header">
-                <h1>任务</h1>
-                <p>支持文件拖拽上传与内容合并复制</p>
+                <h1>AI辅助写代码提示词构造器</h1>
+                <p>支持文件拖拽上传</p>
             </header>
 
             {/* 功能区域 */}
@@ -44,25 +44,39 @@ export default function Home() {
                     <TextField
                         fullWidth
                         multiline
-                        rows={4}
+                        minRows={4}
+                        maxRows={10}
                         value={roleContent}
                         onChange={(e) => setRoleContent(e.target.value)}
                         label="角色信息（Markdown格式）"
                         variant="outlined"
-                        sx={{marginBottom: 2}}
+                        sx={{
+                            marginBottom: 2,
+                            '& .MuiInputBase-root': {
+                                overflow: 'hidden',
+                                transition: 'height 0.2s ease-out'
+                            }
+                        }}
                     />
                 </div>
 
                 <div className="rule-input-section">
                     <TextField
                         fullWidth
                         multiline
-                        rows={4}
+                        minRows={4}
+                        maxRows={10}
                         value={ruleContent}
                         onChange={(e) => setRuleContent(e.target.value)}
                         label="规则内容（Markdown格式）"
                         variant="outlined"
-                        sx={{marginBottom: 2}}
+                        sx={{
+                            marginBottom: 2,
+                            '& .MuiInputBase-root': {
+                                overflow: 'hidden',
+                                transition: 'height 0.2s ease-out'
+                            }
+                        }}
                     />
                 </div>
 
diff --git a/src/pages/MarkdownEditor.tsx b/src/pages/MarkdownEditor.tsx
@@ -1,5 +1,5 @@
 // MarkdownEditor.tsx
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import FileUpload from './FileUpload';
 import CopyButton from './CopyButton';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
@@ -11,6 +11,7 @@ import './styles.css';
 
 interface FileInfo {
     name: string;
+    path: string;
     size: number;
     extension: string;
     content: string;
@@ -29,6 +30,7 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = ({ ruleContent, roleConten
     const [files, setFiles] = useState<FileInfo[]>([]);
     const [previewFile, setPreviewFile] = useState<FileInfo | null>(null);
     const [isDialogOpen, setIsDialogOpen] = useState(false);
+    const previewContentRef = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
         const timer = setTimeout(() => {
@@ -37,6 +39,16 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = ({ ruleContent, roleConten
         return () => clearTimeout(timer);
     }, [markdownContent]);
 
+    useEffect(() => {
+        if (previewFile && previewContentRef.current) {
+            const savedScrollTop = parseInt(
+                localStorage.getItem(`scrollPosition:${previewFile.name}`) || '0',
+                10
+            );
+            previewContentRef.current.scrollTop = savedScrollTop;
+        }
+    }, [previewFile]);
+
     const handleFilesUploaded = (newFiles: FileInfo[]) => {
         setFiles(prev => [...prev, ...newFiles]);
     };
@@ -72,7 +84,7 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = ({ ruleContent, roleConten
         </SyntaxHighlighter>
     );
 
-    const combinedContent = `# 角色\n${roleContent}\n\n# 任务\n${markdownContent}\n\n# 规则\n${ruleContent}`;
+    const combinedContent = `# 角色\n${roleContent}\n\n# 规则\n${ruleContent}\n\n# 任务\n${markdownContent}`;
 
     return (
         <div className="editor-container">
@@ -93,7 +105,7 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = ({ ruleContent, roleConten
                                 }}
                             >
                                 <Typography variant="subtitle1">
-                                    {file.name}
+                                    {file.path}
                                 </Typography>
                                 <Typography variant="caption">
                                     {formatFileSize(file.size)} - {file.extension}
@@ -121,15 +133,25 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = ({ ruleContent, roleConten
                 fullWidth
             >
                 <DialogTitle>
-                    {previewFile?.name}
+                    {previewFile?.path}
                     <IconButton
                         onClick={() => setIsDialogOpen(false)}
                         sx={{ position: 'absolute', right: 8, top: 8 }}
                     >
                         <CloseIcon />
                     </IconButton>
                 </DialogTitle>
-                <DialogContent dividers>
+                <DialogContent
+                    dividers
+                    ref={previewContentRef}
+                    onScroll={(e) => {
+                        if (previewFile) {
+                            const scrollTop = e.currentTarget.scrollTop;
+                            localStorage.setItem(`scrollPosition:${previewFile.name}`, scrollTop.toString());
+                        }
+                    }}
+                    sx={{ overflow: 'auto' }}
+                >
                     {previewFile && (
                         <CodePreview
                             content={previewFile.content}
@@ -143,12 +165,19 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = ({ ruleContent, roleConten
                 <TextField
                     fullWidth
                     multiline
-                    rows={10}
+                    minRows={10}
+                    maxRows={20}
                     value={markdownContent}
                     onChange={(e) => setMarkdownContent(e.target.value)}
                     label="执行任务（Markdown格式）"
                     variant="outlined"
                     className="markdown-editor"
+                    sx={{
+                        '& .MuiInputBase-root': {
+                            overflow: 'hidden',
+                            transition: 'height 0.2s ease-out'
+                        }
+                    }}
                 />
             </div>
 
diff --git a/vite.config.ts b/vite.config.ts
@@ -3,5 +3,6 @@ import react from '@vitejs/plugin-react'
 
 // https://vite.dev/config/
 export default defineConfig({
+  base: process.env.NODE_ENV === 'production' ? '/ai-coding-prompt-builder/' : '/',
   plugins: [react()],
 })

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+VITE_BASE_URL=/ai-coding-prompt-builder/`