fix: 访问前台跳转+暗色背景+英文+白字修复

frontend/src/pages/admin/DeveloperTools.tsx

@@ -134,7 +134,7 @@ export default function AdminDeveloperTools() {
   };
 
   const handleDeleteWebhook = async (id: string) => {
-    if (!confirm('Delete this webhook?')) return;
+    if (!confirm('确定删除此 Webhook？')) return;
     try {
       await api(`/admin/developer-tools/webhooks/${id}`, { method: 'DELETE' });
       loadWebhooks();
@@ -232,7 +232,7 @@ export default function AdminDeveloperTools() {
 
                 <table className="dev-table">
                   <thead>
-                    <tr><th>Event</th><th>Status</th><th>Response Code</th><th>Response Time</th><th>Attempts</th><th>Time</th><th>Error</th></tr>
+                    <tr><th>事件</th><th>状态</th><th>响应码</th><th>响应时间</th><th>尝试次数</th><th>时间</th><th>错误</th></tr>
                   </thead>
                   <tbody>
                     {deliveries.items.map(d => (
@@ -265,7 +265,7 @@ export default function AdminDeveloperTools() {
                 </div>
                 <table className="dev-table">
                   <thead>
-                    <tr><th>Name</th><th>URL</th><th>Events</th><th>Status</th><th>Deliveries</th><th>Success Rate</th><th>Last Triggered</th><th>Actions</th></tr>
+                    <tr><th>名称</th><th>地址</th><th>事件</th><th>状态</th><th>投递数</th><th>成功率</th><th>最后触发</th><th>操作</th></tr>
                   </thead>
                   <tbody>
                     {webhooks.items.map(w => (
@@ -305,15 +305,15 @@ export default function AdminDeveloperTools() {
                   </div>
                 )}
 
-                {/* Supported Events Info */}
+                {/* 支持的事件 Info */}
                 {webhookEvents.length > 0 && (
                   <div style={{ marginTop: '20px', padding: '16px', background: 'rgba(0,0,0,0.02)', borderRadius: '8px' }}>
-                    <h4 style={{ margin: '0 0 12px', color: 'rgba(255,255,255,0.85)' }}>Supported Events</h4>
+                    <h4 style={{ margin: '0 0 12px', color: '#1A1F36' }}>支持的事件</h4>
                     <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: '8px' }}>
                       {webhookEvents.map(ev => (
                         <div key={ev.value} style={{ padding: '8px 12px', background: 'rgba(0,0,0,0.04)', borderRadius: '6px' }}>
                           <code style={{ color: '#69b1ff' }}>{ev.value}</code>
-                          <div style={{ fontSize: '12px', color: 'rgba(255,255,255,0.45)', marginTop: '2px' }}>{ev.desc}</div>
+                          <div style={{ fontSize: '12px', color: '#8892B0', marginTop: '2px' }}>{ev.desc}</div>
                         </div>
                       ))}
                     </div>
@@ -326,7 +326,7 @@ export default function AdminDeveloperTools() {
             {showWebhookModal && (
               <div className="dev-modal-overlay" onClick={() => setShowWebhookModal(false)}>
                 <div className="dev-modal" onClick={e => e.stopPropagation()}>
-                  <h3>New Webhook</h3>
+                  <h3>新建 Webhook</h3>
                   <div className="dev-form-group">
                     <label>Name</label>
                     <input className="dev-input" value={webhookForm.name} onChange={e => setWebhookForm({ ...webhookForm, name: e.target.value })} placeholder="My Webhook" />
@@ -351,7 +351,7 @@ export default function AdminDeveloperTools() {
                   </div>
                   <div className="dev-modal-actions">
                     <button className="dev-btn" onClick={() => setShowWebhookModal(false)}>Cancel</button>
-                    <button className="dev-btn primary" onClick={handleCreateWebhook} disabled={!webhookForm.name || !webhookForm.url}>Create</button>
+                    <button className="dev-btn primary" onClick={handleCreateWebhook} disabled={!webhookForm.name || !webhookForm.url}>创建</button>
                   </div>
                 </div>
               </div>
@@ -377,8 +377,8 @@ export default function AdminDeveloperTools() {
                 <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '16px' }}>
                   <div>
                     <h3 style={{ margin: '0 0 4px' }}>{pkg.name} <span className="dev-badge badge-active">v{pkg.version}</span></h3>
-                    <p style={{ margin: '0', color: 'rgba(255,255,255,0.55)' }}>{pkg.description}</p>
-                    <p style={{ margin: '4px 0 0', fontSize: '13px', color: 'rgba(255,255,255,0.4)' }}>Requires: {pkg.min_version}</p>
+                    <p style={{ margin: '0', color: '#5A6480' }}>{pkg.description}</p>
+                    <p style={{ margin: '4px 0 0', fontSize: '13px', color: '#8892B0' }}>Requires: {pkg.min_version}</p>
                   </div>
                   <div style={{ display: 'flex', gap: '8px' }}>
                     <a href={pkg.download_url} target="_blank" rel="noopener noreferrer" className="dev-btn primary">Download</a>
@@ -388,7 +388,7 @@ export default function AdminDeveloperTools() {
 
                 {/* Install Command */}
                 <div style={{ marginBottom: '16px' }}>
-                  <label style={{ fontSize: '13px', color: 'rgba(255,255,255,0.5)', marginBottom: '4px', display: 'block' }}>Installation</label>
+                  <label style={{ fontSize: '13px', color: '#5A6480', marginBottom: '4px', display: 'block' }}>安装方式</label>
                   <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                     <code style={{ flex: 1, padding: '10px 14px', background: 'rgba(0,0,0,0.3)', borderRadius: '8px', fontFamily: 'monospace', fontSize: '14px' }}>
                       {pkg.install_cmd}
@@ -397,9 +397,9 @@ export default function AdminDeveloperTools() {
                   </div>
                 </div>
 
-                {/* Features */}
+                {/* 功能特性 */}
                 <div style={{ marginBottom: '16px' }}>
-                  <label style={{ fontSize: '13px', color: 'rgba(255,255,255,0.5)', marginBottom: '8px', display: 'block' }}>Features</label>
+                  <label style={{ fontSize: '13px', color: '#5A6480', marginBottom: '8px', display: 'block' }}>功能特性</label>
                   <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
                     {pkg.features.map(f => (
                       <span key={f} style={{ padding: '4px 12px', background: 'rgba(82,196,26,0.15)', borderRadius: '16px', fontSize: '13px', color: '#52c41a', border: '1px solid rgba(82,196,26,0.3)' }}>
@@ -411,7 +411,7 @@ export default function AdminDeveloperTools() {
 
                 {/* Code Example */}
                 <div>
-                  <label style={{ fontSize: '13px', color: 'rgba(255,255,255,0.5)', marginBottom: '4px', display: 'block' }}>Quick Start Example</label>
+                  <label style={{ fontSize: '13px', color: '#5A6480', marginBottom: '4px', display: 'block' }}>快速开始示例</label>
                   <div style={{ position: 'relative' }}>
                     <pre style={{ padding: '16px', background: 'rgba(0,0,0,0.4)', borderRadius: '8px', overflow: 'auto', fontSize: '13px', lineHeight: '1.6', maxHeight: '400px' }}>
                       <code>{pkg.code_example}</code>
@@ -431,14 +431,14 @@ export default function AdminDeveloperTools() {
           <div>
             <div style={{ marginBottom: '16px', padding: '12px 16px', background: 'rgba(22,119,255,0.1)', borderRadius: '8px', border: '1px solid rgba(22,119,255,0.3)' }}>
               <strong style={{ color: '#69b1ff' }}>Base URL:</strong>
-              <code style={{ marginLeft: '8px', color: 'rgba(255,255,255,0.8)' }}>http://210.16.161.218:18080</code>
-              <span style={{ marginLeft: '16px', color: 'rgba(255,255,255,0.4)' }}>API Version: v1</span>
+              <code style={{ marginLeft: '8px', color: '#1A1F36' }}>http://210.16.161.218:18080</code>
+              <span style={{ marginLeft: '16px', color: '#8892B0' }}>API Version: v1</span>
             </div>
 
             {docSections.map(section => {
               const isExpanded = expandedSection === section.section;
               return (
-                <div key={section.section} style={{ marginBottom: '8px', borderRadius: '8px', overflow: 'hidden', border: '1px solid rgba(255,255,255,0.1)' }}>
+                <div key={section.section} style={{ marginBottom: '8px', borderRadius: '8px', overflow: 'hidden', border: '1px solid rgba(0,0,0,0.08)' }}>
                   {/* Section Header */}
                   <div
                     onClick={() => setExpandedSection(isExpanded ? null : section.section)}
@@ -448,16 +448,16 @@ export default function AdminDeveloperTools() {
                       <span style={{ fontSize: '18px' }}>
                         {section.icon === 'lock' ? '🔒' : section.icon === 'chat' ? '💬' : section.icon === 'book' ? '📚' : section.icon === 'robot' ? '🤖' : section.icon === 'workflow' ? '🔄' : section.icon === 'storage' ? '💾' : section.icon === 'webhook' ? '🔗' : '📋'}
                       </span>
-                      <strong style={{ color: 'rgba(255,255,255,0.85)' }}>{section.section}</strong>
-                      <span style={{ color: 'rgba(255,255,255,0.4)', fontSize: '13px' }}>{section.endpoints.length} endpoints</span>
+                      <strong style={{ color: '#1A1F36' }}>{section.section}</strong>
+                      <span style={{ color: '#8892B0', fontSize: '13px' }}>{section.endpoints.length} endpoints</span>
                     </div>
-                    <span style={{ color: 'rgba(255,255,255,0.4)' }}>{isExpanded ? '▼' : '▶'}</span>
+                    <span style={{ color: '#8892B0' }}>{isExpanded ? '▼' : '▶'}</span>
                   </div>
 
                   {/* Section Content */}
                   {isExpanded && (
                     <div style={{ background: 'rgba(0,0,0,0.2)' }}>
-                      <p style={{ padding: '8px 16px', margin: '0', color: 'rgba(255,255,255,0.5)', fontSize: '13px' }}>{section.description}</p>
+                      <p style={{ padding: '8px 16px', margin: '0', color: '#5A6480', fontSize: '13px' }}>{section.description}</p>
                       {section.endpoints.map(ep => {
                         const epKey = `${section.section}-${ep.path}`;
                         const isEpExpanded = expandedEndpoint === epKey;
@@ -468,28 +468,28 @@ export default function AdminDeveloperTools() {
                               style={{ padding: '10px 16px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '12px' }}
                             >
                               {methodBadge(ep.method)}
-                              <code style={{ color: 'rgba(255,255,255,0.7)', fontSize: '13px' }}>{ep.path}</code>
-                              <span style={{ color: 'rgba(255,255,255,0.5)', fontSize: '13px' }}>{ep.title}</span>
-                              <span style={{ marginLeft: 'auto', color: 'rgba(255,255,255,0.3)' }}>{isEpExpanded ? '▼' : '▶'}</span>
+                              <code style={{ color: '#5A6480', fontSize: '13px' }}>{ep.path}</code>
+                              <span style={{ color: '#5A6480', fontSize: '13px' }}>{ep.title}</span>
+                              <span style={{ marginLeft: 'auto', color: '#8892B0' }}>{isEpExpanded ? '▼' : '▶'}</span>
                             </div>
                             {isEpExpanded && (
                               <div style={{ padding: '0 16px 16px 16px' }}>
-                                <p style={{ color: 'rgba(255,255,255,0.55)', margin: '4px 0 12px', fontSize: '13px' }}>{ep.description}</p>
+                                <p style={{ color: '#5A6480', margin: '4px 0 12px', fontSize: '13px' }}>{ep.description}</p>
 
-                                {/* Parameters */}
+                                {/* 参数 */}
                                 {ep.params.length > 0 && (
                                   <div style={{ marginBottom: '12px' }}>
-                                    <label style={{ fontSize: '12px', color: 'rgba(255,255,255,0.4)', display: 'block', marginBottom: '6px' }}>Parameters</label>
+                                    <label style={{ fontSize: '12px', color: '#8892B0', display: 'block', marginBottom: '6px' }}>参数</label>
                                     <table className="dev-table" style={{ fontSize: '13px' }}>
                                       <thead>
-                                        <tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr>
+                                        <tr><th>名称</th><th>类型</th><th>必填</th><th>描述</th></tr>
                                       </thead>
                                       <tbody>
                                         {ep.params.map(p => (
                                           <tr key={p.name}>
                                             <td className="mono-text">{p.name}</td>
                                             <td>{p.type}</td>
-                                            <td>{p.required ? <span style={{ color: '#ff4d4f' }}>Yes</span> : <span style={{ color: 'rgba(255,255,255,0.4)' }}>No</span>}</td>
+                                            <td>{p.required ? <span style={{ color: '#ff4d4f' }}>是</span> : <span style={{ color: '#8892B0' }}>否</span>}</td>
                                             <td>{p.desc}</td>
                                           </tr>
                                         ))}
@@ -498,20 +498,20 @@ export default function AdminDeveloperTools() {
                                   </div>
                                 )}
 
-                                {/* Example Request */}
+                                {/* 请求示例 */}
                                 {ep.example_request && (
                                   <div style={{ marginBottom: '12px' }}>
-                                    <label style={{ fontSize: '12px', color: 'rgba(255,255,255,0.4)', display: 'block', marginBottom: '4px' }}>Example Request</label>
+                                    <label style={{ fontSize: '12px', color: '#8892B0', display: 'block', marginBottom: '4px' }}>请求示例</label>
                                     <pre style={{ padding: '10px 14px', background: 'rgba(0,0,0,0.3)', borderRadius: '6px', fontSize: '12px', overflow: 'auto' }}>
                                       <code>{ep.example_request}</code>
                                     </pre>
                                   </div>
                                 )}
 
-                                {/* Example Response */}
+                                {/* 响应示例 */}
                                 {ep.example_response && (
                                   <div>
-                                    <label style={{ fontSize: '12px', color: 'rgba(255,255,255,0.4)', display: 'block', marginBottom: '4px' }}>Example Response</label>
+                                    <label style={{ fontSize: '12px', color: '#8892B0', display: 'block', marginBottom: '4px' }}>响应示例</label>
                                     <pre style={{ padding: '10px 14px', background: 'rgba(0,0,0,0.3)', borderRadius: '6px', fontSize: '12px', overflow: 'auto' }}>
                                       <code>{ep.example_response}</code>
                                     </pre>