add

2025-04-10 18:06:45 +08:00
commit 54650cd944
154 changed files with 29090 additions and 0 deletions
@@ -0,0 +1,63 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPlus, faTimes } from '@fortawesome/free-solid-svg-icons';
+import styles from '../styles';
+import { RequestHeader } from '../types';
+import { useLanguage } from '@/context/LanguageContext';
+
+interface RequestHeadersProps {
+  headers: RequestHeader[];
+  onAddHeader: () => void;
+  onUpdateHeader: (id: string, key: string, value: string) => void;
+  onRemoveHeader: (id: string) => void;
+}
+
+const RequestHeaders: React.FC<RequestHeadersProps> = ({
+  headers,
+  onAddHeader,
+  onUpdateHeader,
+  onRemoveHeader,
+}) => {
+  const { t } = useLanguage();
+
+  return (
+    <div>
+      <div className="mb-4">
+        <button 
+          className="btn-secondary text-xs px-3 py-1"
+          onClick={onAddHeader}
+        >
+          <FontAwesomeIcon icon={faPlus} className="mr-1" />
+          {t('tools.http_tester.add_header')}
+        </button>
+      </div>
+      
+      {headers.map(header => (
+        <div key={header.id} className={styles.headerRow}>
+          <input 
+            type="text"
+            placeholder={t('tools.http_tester.header_key')}
+            value={header.key}
+            onChange={(e) => onUpdateHeader(header.id, e.target.value, header.value)}
+            className="flex-1 bg-block text-primary px-3 py-1 text-sm rounded-md border border-purple-glow/20 focus:border-purple-glow"
+          />
+          <input
+            type="text"
+            placeholder={t('tools.http_tester.header_value')}
+            value={header.value}
+            onChange={(e) => onUpdateHeader(header.id, header.key, e.target.value)}
+            className="flex-1 bg-block text-primary px-3 py-1 text-sm rounded-md border border-purple-glow/20 focus:border-purple-glow"
+          />
+          <button 
+            onClick={() => onRemoveHeader(header.id)}
+            className={styles.iconButton}
+          >
+            <FontAwesomeIcon icon={faTimes} />
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default RequestHeaders;