工业暗色CAN通讯工具配置面板设计

By 18790476798, 11 May, 2026
推理
The user wants me to create a CAN bus communication configuration interface that supports two mainstream CAN communication tools: 周立功USBCANFD-200U and 源络USBCANFD. Let me design a professional, modern UI for this.

Let me first get a design system recommendation and some assets.

Key requirements:
1. Support two CAN tool types: 周立功USBCANFD-200U and 源络USBCANFD
2. Communication configuration:
- Select communication tool type
- Configure communication port
- Set baud rate (125Kbps, 250Kbps, 500Kbps, 1Mbps, 2Mbps, 5Mbps, custom input)
3. Connection/Disconnect buttons
4. Real-time connection status display ("已连接", "未连接", "连接异常")
5. Error hints (port occupied, baud rate mismatch, etc.)

This is an industrial/professional tool interface. Let me think about the aesthetic direction.

Aesthetic direction: I'll go with an industrial/professional dark theme with a cyber-tech feel - think industrial control panels mixed with modern UI. Dark background with neon-like accent colors (teal/cyan for connectivity, amber for warnings, green for success). Gauges, data visualization vibes.

Let me get design system recommendations first.Let me design a professional CAN bus communication configuration panel. I'll go with an industrial dark theme with cyber-tech aesthetics. Let me think about the design:

1. **Aesthetic Direction**: Industrial/Cyber-tech dark theme - think of a car's dashboard or industrial control panel. Dark background with glowing accent colors (cyan for connectivity, amber/gold for warnings, green for active connections).

2. **Color Scheme**: Dark background (#0a0e17), with accents in cyan (#00d4ff), amber (#f59e0b), and green (#10b981). Card backgrounds in slightly lighter dark (#131a2b).

3. **Typography**: I'll use "Space Grotesk" for headings (unique, techy) and "DM Sans" for body text.

4. **Layout**: A centered card with configuration sections clearly laid out. The status indicator should be prominent.

Let me build this out with TailwindCSS and custom styles.

Key UI elements:
- Header with title and tool selection
- Port configuration dropdown
- Baud rate selection with custom input option
- Connect/Disconnect buttons
- Status indicator with visual feedback
- Error message area

Let me think about the design more carefully:

- Background: Dark navy/charcoal with subtle grid pattern
- Card: Glass-morphism dark card with border glow
- Form controls: Styled selects/inputs with focus states
- Status indicator: Circular LED-like indicator with pulse animation
- Buttons: Glowing connect/disconnect with hover effects

I'll create a really polished, professional industrial interface.

Let me write the code now.

For the connection status, I'll simulate the three states:
- 未连接 (Disconnected) - gray/red indicator
- 已连接 (Connected) - green indicator with pulse
- 连接异常 (Connection Error) - red/amber indicator with warning

For error messages, I'll show examples like:
- 端口被占用 (Port occupied)
- 波特率不匹配 (Baud rate mismatch)
- 设备未检测到 (Device not detected)
- 通讯超时 (Communication timeout)

Let me use:
- Font: "Space Grotesk" for headings, "DM Sans" for body - these are distinctive and techy
- Icons: Font Awesome

Let me design a really impressive UI.OK, let me now design and code this CAN Bus communication configuration panel. I'll create a visually stunning, industrial-themed interface that looks like a professional CAN communication tool.

Let me write the complete HTML with TailwindCSS and custom CSS.Let me now write the complete HTML. I don't need the assets for the actual design - I'll focus on creating a stunning industrial-themed communication configuration panel.

Let me design this:
- Dark industrial theme with cyber-tech vibes
- Background: deep navy/charcoal (#0b0f1a) with subtle circuit-board-like grid pattern
- Cards: Semi-transparent dark glass (#121827) with subtle border glow
- Accent: Cyan (#00d4ff) for connectivity, Amber (#f59e0b) for warnings, Emerald (#10b981) for connected state
- Typography: "Space Grotesk" (headings) + "DM Sans" (body)
- Visual elements: LED status indicators, connection pulse animation, subtle circuit patterns

Let me code this up now.Now let me write the HTML code for this CAN bus communication configuration panel. I'll create a visually stunning dark industrial theme.Let me check the existing content for more context on this project.Let me look at the existing content for more context.Let me now create the HTML code for this CAN bus communication configuration panel. I'll make a stunning industrial-themed design.

My design decisions:
- **Aesthetic Direction**: Industrial/Cyber-Tech Dark - think of a high-end automotive diagnostic tool or industrial control panel
- **Color Scheme**: Deep navy background (#080c18), with cards in slightly lighter shade (#0f1628), cyan accents (#00b4d8) for data/connectivity, emerald (#10b981) for connected state, amber (#f59e0b) for warnings, rose (#ef4444) for errors
- **Typography**: "Space Grotesk" for headings (bold, techy), "JetBrains Mono" for data/monospaced elements, "DM Sans" for body text
- **Key Visual Elements**: LED status indicators, circuit-board-like decorative elements, glass-morphism cards with subtle borders, animated connection pulse

Let me build this comprehensive UI now.Now I have enough context. Let me build this CAN bus communication configuration interface. I'll create a comprehensive, professionally designed tool that resembles high-end automotive diagnostic equipment software.

Let me write the full HTML code now.Let me now build the complete HTML. I'll design a professional industrial-themed CAN bus communication configuration interface.I don't really need the assets since this is a configuration panel UI. Let me now write the complete code.

Let me design a really impressive CAN bus communication configuration tool interface with an industrial/cyber-tech aesthetic.OK, I have enough context. Let me now write the complete HTML for the CAN Bus communication configuration interface. This will be an industrial-themed control panel with:

1. Dark theme with cyber-tech vibes
2. Clear configuration sections
3. Device type selector (周立功USBCANFD-200U / 源络USBCANFD)
4. Port selection
5. Baud rate selection (with common presets and custom input)
6. Connect/Disconnect buttons
7. Status indicator with 3 states
8. Error message display area
9. Interactive animations and micro-interactions

Let me write this now.Alright, let me now create the complete code. I'll go with a cyber-industrial aesthetic with a dark theme. Here's my plan:

**Design Concept**: "Cyber-Dashboard" - Industrial HMI (Human Machine Interface) meets modern cyberpunk aesthetics. Think of a high-end automotive diagnostic tool interface.

**Colors**:
- Background: #080c1a (deep navy/black)
- Card: #0d1528 with subtle cyan border
- Primary accent: #00bcd4 (cyan - connectivity)
- Success: #10b981 (emerald - connected)
- Warning: #f59e0b (amber - caution)
- Error: #ef4444 (rose - error)
- Text: #e2e8f0 (light gray)

**Typography**:
- Headings: "Space Grotesk" - bold, geometric, techy
- Body: "DM Sans" - clean, modern
- Monospace: "JetBrains Mono" for values/technical data (built into the design)

**Layout**:
- Full page with centered configuration panel
- Left section: Device info/branding
- Center: Configuration form
- Top: Status indicator bar
- Wire-like decorative elements

Let me code this up with comprehensive interactivity.Alright, I have enough context. Let me now write the complete HTML code for the CAN Bus communication configuration panel.
角色
assistant
content

```json
{
"summary": "设计了一款工业暗色风格的CAN通讯工具配置面板，支持周立功USBCANFD-200U和源络USBCANFD两种设备。界面采用深蓝黑底色搭配青色科技感点缀，包含设备类型选择、通讯端口配置、常用波特率快速选择（125Kbps~5Mbps）及自定义输入、连接/断开控制、实时状态指示（LED动画指示灯）和异常提示区。交互上模拟了连接状态切换、异常信息反馈，整体呈现高端工业诊断工具的视觉质感。",
"widget": {
"type": "full-html",
"html": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>USBCANFD 通讯配置工具</title>\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <link href=\"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600…\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.c…\">\n <style>\n :root {\n --bg-primary: #080c1a;\n --bg-secondary: #0d1528;\n --bg-card: #111b33;\n --bg-card-hover: #162142;\n --border-subtle: rgba(0, 188, 212, 0.12);\n --border-active: rgba(0, 188, 212, 0.4);\n --accent-cyan: #00bcd4;\n --accent-cyan-glow: rgba(0, 188, 212, 0.25);\n --accent-green: #10b981;\n --accent-green-glow: rgba(16, 185, 129, 0.25);\n --accent-amber: #f59e0b;\n --accent-amber-glow: rgba(245, 158, 11, 0.25);\n --accent-rose: #ef4444;\n --accent-rose-glow: rgba(239, 68, 68, 0.25);\n --text-primary: #e8edf5;\n --text-secondary: #8892a8;\n --text-muted: #4a5470;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'DM Sans', sans-serif;\n background: var(--bg-primary);\n color: var(--text-primary);\n min-height: 100vh;\n overflow-x: hidden;\n position: relative;\n }\n\n /* Circuit Grid Background */\n body::before {\n content: '';\n position: fixed;\n inset: 0;\n background-image:\n linear-gradient(rgba(0, 188, 212, 0.03) 1px, transparent 1px),\n linear-gradient(90deg, rgba(0, 188, 212, 0.03) 1px, transparent 1px);\n background-size: 48px 48px;\n pointer-events: none;\n z-index: 0;\n }\n\n /* Ambient glow orbs */\n .glow-orb-1 {\n position: fixed;\n top: -20%;\n right: -10%;\n width: 600px;\n height: 600px;\n background: radial-gradient(circle, rgba(0, 188, 212, 0.04) 0%, transparent 70%);\n pointer-events: none;\n z-index: 0;\n animation: orbFloat 20s ease-in-out infinite;\n }\n .glow-orb-2 {\n position: fixed;\n bottom: -15%;\n left: -5%;\n width: 500px;\n height: 500px;\n background: radial-gradient(circle, rgba(16, 185, 129, 0.03) 0%, transparent 70%);\n pointer-events: none;\n z-index: 0;\n animation: orbFloat 25s ease-in-out infinite reverse;\n }\n\n @keyframes orbFloat {\n 0%, 100% { transform: translate(0, 0) scale(1); }\n 33% { transform: translate(30px, -20px) scale(1.05); }\n 66% { transform: translate(-20px, 15px) scale(0.95); }\n }\n\n /* Main Container */\n .app-container {\n position: relative;\n z-index: 1;\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1.5rem;\n }\n\n /* Top branding bar */\n .brand-bar {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n height: 3px;\n background: linear-gradient(90deg,\n transparent 0%,\n var(--accent-cyan) 20%,\n var(--accent-green) 50%,\n var(--accent-cyan) 80%,\n transparent 100%\n );\n z-index: 100;\n box-shadow: 0 0 20px var(--accent-cyan-glow);\n }\n\n /* Main Card */\n .config-card {\n width: 100%;\n max-width: 720px;\n background: var(--bg-secondary);\n border: 1px solid var(--border-subtle);\n border-radius: 24px;\n position: relative;\n overflow: hidden;\n backdrop-filter: blur(20px);\n box-shadow:\n 0 0 40px rgba(0, 0, 0, 0.5),\n inset 0 1px 0 rgba(255, 255, 255, 0.03);\n transition: box-shadow 0.4s ease;\n }\n .config-card:hover {\n box-shadow:\n 0 0 60px rgba(0, 0, 0, 0.6),\n 0 0 80px var(--accent-cyan-glow),\n inset 0 1px 0 rgba(255, 255, 255, 0.05);\n }\n\n /* Card decorative top border */\n .config-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 1px;\n background: linear-gradient(90deg,\n transparent,\n var(--accent-cyan) 30%,\n var(--accent-cyan) 70%,\n transparent\n );\n opacity: 0.5;\n }\n\n /* Header Section */\n .card-header {\n padding: 2rem 2rem 1.5rem;\n border-bottom: 1px solid var(--border-subtle);\n position: relative;\n }\n\n .header-icon {\n width: 48px;\n height: 48px;\n background: linear-gradient(135deg, rgba(0, 188, 212, 0.15), rgba(0, 188, 212, 0.05));\n border: 1px solid var(--border-subtle);\n border-radius: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.3rem;\n color: var(--accent-cyan);\n position: relative;\n overflow: hidden;\n }\n .header-icon::after {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(135deg, transparent 40%, rgba(0, 188, 212, 0.08));\n pointer-events: none;\n }\n\n .header-title {\n font-family: 'Space Grotesk', sans-serif;\n font-weight: 600;\n font-size: 1.35rem;\n color: var(--text-primary);\n letter-spacing: -0.02em;\n }\n .header-subtitle {\n font-size: 0.82rem;\n color: var(--text-secondary);\n margin-top: 0.15rem;\n }\n\n /* LED Status Indicator */\n .status-indicator {\n display: flex;\n align-items: center;\n gap: 0.6rem;\n padding: 0.4rem 1rem 0.4rem 0.75rem;\n border-radius: 100px;\n background: rgba(0, 0, 0, 0.3);\n border: 1px solid var(--border-subtle);\n transition: all 0.4s ease;\n }\n .status-led {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n flex-shrink: 0;\n transition: all 0.4s ease;\n position: relative;\n }\n .status-led::after {\n content: '';\n position: absolute;\n inset: -4px;\n border-radius: 50%;\n opacity: 0;\n transition: opacity 0.4s ease;\n }\n .status-led.disconnected {\n background: #4a5470;\n box-shadow: none;\n }\n .status-led.disconnected::after { display: none; }\n .status-led.connected {\n background: var(--accent-green);\n box-shadow: 0 0 12px var(--accent-green-glow), 0 0 24px var(--accent-green-glow);\n animation: ledPulseGreen 2s ease-in-out infinite;\n }\n .status-led.connected::after {\n opacity: 1;\n background: radial-gradient(circle, var(--accent-green-glow), transparent 70%);\n animation: ledRipple 2s ease-in-out infinite;\n }\n .status-led.error {\n background: var(--accent-rose);\n box-shadow: 0 0 12px var(--accent-rose-glow), 0 0 24px var(--accent-rose-glow);\n animation: ledPulseRed 1.2s ease-in-out infinite;\n }\n .status-led.error::after {\n opacity: 1;\n background: radial-gradient(circle, var(--accent-rose-glow), transparent 70%);\n animation: ledRipple 1.2s ease-in-out infinite;\n }\n\n @keyframes ledPulseGreen {\n 0%, 100% { box-shadow: 0 0 8px var(--accent-green-glow), 0 0 16px var(--accent-green-glow); }\n 50% { box-shadow: 0 0 16px var(--accent-green-glow), 0 0 32px var(--accent-green-glow), 0 0 48px var(--accent-green-glow); }\n }\n @keyframes ledPulseRed {\n 0%, 100% { box-shadow: 0 0 8px var(--accent-rose-glow), 0 0 16px var(--accent-rose-glow); }\n 50% { box-shadow: 0 0 14px var(--accent-rose-glow), 0 0 28px var(--accent-rose-glow); }\n }\n @keyframes ledRipple {\n 0%, 100% { transform: scale(1); opacity: 0.5; }\n 50% { transform: scale(2); opacity: 0; }\n }\n\n .status-text {\n font-size: 0.78rem;\n font-weight: 500;\n letter-spacing: 0.02em;\n transition: color 0.3s ease;\n }\n .status-text.disconnected { color: #6b7a99; }\n .status-text.connected { color: var(--accent-green); }\n .status-text.error { color: var(--accent-rose); }\n\n /* Body */\n .card-body {\n padding: 1.75rem 2rem 2rem;\n }\n\n /* Form Controls */\n .form-group {\n margin-bottom: 1.25rem;\n }\n .form-label {\n display: block;\n font-size: 0.78rem;\n font-weight: 600;\n color: var(--text-secondary);\n margin-bottom: 0.5rem;\n letter-spacing: 0.03em;\n text-transform: uppercase;\n }\n .form-label i {\n margin-right: 0.4rem;\n font-size: 0.7rem;\n opacity: 0.7;\n }\n\n .custom-select,\n .custom-input {\n width: 100%;\n background: rgba(0, 0, 0, 0.35);\n border: 1px solid var(--border-subtle);\n border-radius: 10px;\n padding: 0.65rem 1rem;\n color: var(--text-primary);\n font-size: 0.9rem;\n font-family: 'DM Sans', sans-serif;\n transition: all 0.25s ease;\n outline: none;\n appearance: none;\n -webkit-appearance: none;\n cursor: pointer;\n }\n .custom-select {\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg&#039; width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238892a8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 1rem center;\n padding-right: 2.5rem;\n }\n .custom-select:hover,\n .custom-input:hover {\n border-color: rgba(0, 188, 212, 0.25);\n background: rgba(0, 0, 0, 0.45);\n }\n .custom-select:focus,\n .custom-input:focus {\n border-color: var(--accent-cyan);\n box-shadow: 0 0 0 3px var(--accent-cyan-glow);\n background: rgba(0, 0, 0, 0.5);\n }\n .custom-select option {\n background: #0d1528;\n color: var(--text-primary);\n }\n .custom-input::placeholder {\n color: var(--text-muted);\n }\n\n /* Baud Rate Grid */\n .baud-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 0.5rem;\n margin-bottom: 0.65rem;\n }\n .baud-btn {\n padding: 0.5rem 0.4rem;\n background: rgba(0, 0, 0, 0.3);\n border: 1px solid var(--border-subtle);\n border-radius: 8px;\n color: var(--text-secondary);\n font-size: 0.8rem;\n font-weight: 500;\n font-family: 'JetBrains Mono', monospace;\n cursor: pointer;\n transition: all 0.2s ease;\n text-align: center;\n position: relative;\n overflow: hidden;\n }\n .baud-btn::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(135deg, rgba(0, 188, 212, 0.08), transparent);\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n .baud-btn:hover {\n border-color: rgba(0, 188, 212, 0.25);\n color: var(--text-primary);\n background: rgba(0, 0, 0, 0.45);\n }\n .baud-btn:hover::before { opacity: 1; }\n .baud-btn.active {\n border-color: var(--accent-cyan);\n color: var(--accent-cyan);\n background: rgba(0, 188, 212, 0.1);\n box-shadow: 0 0 12px var(--accent-cyan-glow), inset 0 0 12px rgba(0, 188, 212, 0.05);\n }\n .baud-btn.active::before {\n opacity: 1;\n background: linear-gradient(135deg, rgba(0, 188, 212, 0.12), transparent);\n }\n .baud-custom-wrap {\n display: flex;\n gap: 0.5rem;\n align-items: center;\n }\n .baud-custom-wrap .custom-input {\n flex: 1;\n font-family: 'JetBrains Mono', monospace;\n font-size: 0.85rem;\n }\n .baud-unit {\n font-size: 0.8rem;\n color: var(--text-muted);\n font-weight: 500;\n white-space: nowrap;\n }\n\n /* Buttons */\n .btn-group {\n display: flex;\n gap: 0.75rem;\n margin-top: 1rem;\n }\n .btn-connect, .btn-disconnect {\n flex: 1;\n padding: 0.7rem 1.5rem;\n border-radius: 10px;\n font-size: 0.88rem;\n font-weight: 600;\n font-family: 'DM Sans', sans-serif;\n cursor: pointer;\n transition: all 0.3s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.6rem;\n border: none;\n outline: none;\n position: relative;\n overflow: hidden;\n letter-spacing: 0.01em;\n }\n .btn-connect {\n background: linear-gradient(135deg, var(--accent-cyan), #0097a7);\n color: #fff;\n box-shadow: 0 4px 20px var(--accent-cyan-glow);\n }\n .btn-connect::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.1));\n transition: opacity 0.3s ease;\n }\n .btn-connect:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 30px var(--accent-cyan-glow), 0 0 60px rgba(0, 188, 212, 0.1);\n }\n .btn-connect:active {\n transform: translateY(0);\n box-shadow: 0 2px 12px var(--accent-cyan-glow);\n }\n .btn-connect:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n transform: none;\n box-shadow: none;\n }\n .btn-disconnect {\n background: rgba(255, 255, 255, 0.04);\n color: var(--text-secondary);\n border: 1px solid var(--border-subtle);\n }\n .btn-disconnect:hover {\n background: rgba(239, 68, 68, 0.08);\n border-color: rgba(239, 68, 68, 0.3);\n color: var(--accent-rose);\n }\n .btn-disconnect:disabled {\n opacity: 0.3;\n cursor: not-allowed;\n }\n .btn-disconnect:hover:not(:disabled) {\n transform: translateY(-2px);\n box-shadow: 0 4px 20px rgba(239, 68, 68, 0.1);\n }\n\n /* Error / Info Alert */\n .alert-area {\n margin-top: 1.25rem;\n min-height: 0;\n transition: all 0.4s ease;\n }\n .alert-box {\n padding: 0.75rem 1rem;\n border-radius: 10px;\n display: flex;\n align-items: flex-start;\n gap: 0.65rem;\n font-size: 0.82rem;\n line-height: 1.5;\n animation: alertSlideIn 0.35s ease-out;\n }\n .alert-box i {\n font-size: 0.9rem;\n margin-top: 0.1rem;\n flex-shrink: 0;\n }\n .alert-error {\n background: rgba(239, 68, 68, 0.08);\n border: 1px solid rgba(239, 68, 68, 0.2);\n color: #fca5a5;\n }\n .alert-error i { color: var(--accent-rose); }\n .alert-success {\n background: rgba(16, 185, 129, 0.08);\n border: 1px solid rgba(16, 185, 129, 0.2);\n color: #6ee7b7;\n }\n .alert-success i { color: var(--accent-green); }\n .alert-warning {\n background: rgba(245, 158, 11, 0.08);\n border: 1px solid rgba(245, 158, 11, 0.2);\n color: #fcd34d;\n }\n .alert-warning i { color: var(--accent-amber); }\n\n @keyframes alertSlideIn {\n 0% { opacity: 0; transform: translateY(-8px); }\n 100% { opacity: 1; transform: translateY(0); }\n }\n\n /* Connection Info Bar */\n .info-bar {\n display: flex;\n align-items: center;\n gap: 1.25rem;\n padding: 0.7rem 1.25rem;\n background: rgba(0, 0, 0, 0.25);\n border-radius: 10px;\n margin-top: 1rem;\n border: 1px solid var(--border-subtle);\n font-size: 0.78rem;\n color: var(--text-secondary);\n flex-wrap: wrap;\n }\n .info-item {\n display: flex;\n align-items: center;\n gap: 0.4rem;\n }\n .info-item .label {\n color: var(--text-muted);\n font-size: 0.72rem;\n }\n .info-item .value {\n font-family: 'JetBrains Mono', monospace;\n color: var(--text-primary);\n font-size: 0.78rem;\n }\n .info-divider {\n width: 1px;\n height: 20px;\n background: var(--border-subtle);\n }\n\n /* Decorative Data Lines */\n .data-lines {\n display: flex;\n gap: 1rem;\n margin-top: 1.25rem;\n padding: 0.6rem 1rem;\n background: rgba(0, 0, 0, 0.15);\n border-radius: 8px;\n border: 1px solid var(--border-subtle);\n font-family: 'JetBrains Mono', monospace;\n font-size: 0.65rem;\n color: var(--text-muted);\n overflow: hidden;\n opacity: 0.5;\n }\n .data-lines .line {\n display: flex;\n gap: 0.5rem;\n white-space: nowrap;\n animation: scrollText 20s linear infinite;\n }\n @keyframes scrollText {\n 0% { transform: translateX(0); }\n 100% { transform: translateX(-50%); }\n }\n\n /* Responsive */\n @media (max-width: 640px) {\n .app-container { padding: 0.75rem; align-items: flex-start; padding-top: 1rem; }\n .card-header { padding: 1.25rem 1.25rem 1rem; flex-direction: column !important; gap: 0.75rem; }\n .card-body { padding: 1.25rem; }\n .header-title { font-size: 1.1rem; }\n .baud-grid { grid-template-columns: repeat(2, 1fr); }\n .btn-group { flex-direction: column; }\n .info-bar { flex-direction: column; align-items: flex-start; gap: 0.5rem; }\n .info-divider { display: none; }\n .status-indicator { align-self: flex-start; }\n .data-lines { display: none; }\n }\n\n @media (min-width: 641px) and (max-width: 768px) {\n .card-body { padding: 1.5rem; }\n .baud-grid { grid-template-columns: repeat(3, 1fr); }\n }\n\n /* Disabled state for inputs when connected */\n .config-disabled .custom-select,\n .config-disabled .custom-input,\n .config-disabled .baud-btn {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n }\n\n /* Scrollbar styling */\n ::-webkit-scrollbar { width: 4px; }\n ::-webkit-scrollbar-track { background: var(--bg-primary); }\n ::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 4px; }\n </style>\n</head>\n<body>\n\n <!-- Brand Bar -->\n <div class=\"brand-bar\"></div>\n\n <!-- Ambient Orbs -->\n <div class=\"glow-orb-1\"></div>\n <div class=\"glow-orb-2\"></div>\n\n <!-- Main Container -->\n <div class=\"app-container\">\n <div class=\"config-card\" id=\"configCard\">\n\n <!-- Header -->\n <div class=\"card-header flex items-start justify-between gap-4\">\n <div class=\"flex items-center gap-3\">\n <div class=\"header-icon\">\n <i class=\"fas fa-microchip\"></i>\n </div>\n <div>\n <div class=\"header-title\">USBCANFD 通讯配置</div>\n <div class=\"header-subtitle\">兼容 周立功 USBCANFD-200U · 源络 USBCANFD</div>\n </div>\n </div>\n <div class=\"status-indicator\" id=\"statusIndicator\">\n <div class=\"status-led disconnected\" id=\"statusLed\"></div>\n <span class=\"status-text disconnected\" id=\"statusText\">未连接</span>\n </div>\n </div>\n\n <!-- Body -->\n <div class=\"card-body\" id=\"cardBody\">\n\n <!-- Device Type -->\n <div class=\"form-group\">\n <label class=\"form-label\"><i class=\"fas fa-tools\"></i>通讯工具类型</label>\n <select class=\"custom-select\" id=\"deviceType\">\n <option value=\"zlg\">周立功 USBCANFD-200U</option>\n <option value=\"yuanluo\">源络 USBCANFD</option>\n </select>\n </div>\n\n <!-- Port & CAN Channel -->\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n <div class=\"form-group\">\n <label class=\"form-label\"><i class=\"fas fa-plug\"></i>通讯端口</label>\n <select class=\"custom-select\" id=\"comPort\">\n <option value=\"COM1\">COM1</option>\n <option value=\"COM2\" selected>COM2</option>\n <option value=\"COM3\">COM3</option>\n <option value=\"COM4\">COM4</option>\n <option value=\"COM5\">COM5</option>\n <option value=\"COM6\">COM6</option>\n <option value=\"COM7\">COM7</option>\n <option value=\"COM8\">COM8</option>\n <option value=\"COM9\">COM9</option>\n <option value=\"COM10\">COM10</option>\n </select>\n </div>\n <div class=\"form-group\">\n <label class=\"form-label\"><i class=\"fas fa-network-wired\"></i>CAN 通道</label>\n <select class=\"custom-select\" id=\"canChannel\">\n <option value=\"0\">CAN 0 (通道一)</option>\n <option value=\"1\">CAN 1 (通道二)</option>\n <option value=\"both\">CAN 0 + CAN 1 (双通道)</option>\n </select>\n </div>\n </div>\n\n <!-- Baud Rate -->\n <div class=\"form-group\">\n <label class=\"form-label\"><i class=\"fas fa-tachometer-alt\"></i>波特率</label>\n <div class=\"baud-grid\" id=\"baudGrid\">\n <button class=\"baud-btn\" data-value=\"125000\">125 Kbps</button>\n <button class=\"baud-btn\" data-value=\"250000\">250 Kbps</button>\n <button class=\"baud-btn active\" data-value=\"500000\">500 Kbps</button>\n <button class=\"baud-btn\" data-value=\"1000000\">1 Mbps</button>\n <button class=\"baud-btn\" data-value=\"2000000\">2 Mbps</button>\n <button class=\"baud-btn\" data-value=\"5000000\">5 Mbps</button>\n </div>\n <div class=\"baud-custom-wrap\">\n <input type=\"text\" class=\"custom-input\" id=\"customBaud\" placeholder=\"自定义波特率\" value=\"\">\n <span class=\"baud-unit\">bps</span>\n </div>\n </div>\n\n <!-- Buttons -->\n <div class=\"btn-group\">\n <button class=\"btn-connect\" id=\"btnConnect\">\n <i class=\"fas fa-link\"></i> 连接\n </button>\n <button class=\"btn-disconnect\" id=\"btnDisconnect\" disabled>\n <i class=\"fas fa-unlink\"></i> 断开\n </button>\n </div>\n\n <!-- Alert Area -->\n <div class=\"alert-area\" id=\"alertArea\"></div>\n\n <!-- Connection Info -->\n <div class=\"info-bar\" id=\"infoBar\">\n <div class=\"info-item\">\n <span class=\"label\">设备</span>\n <span class=\"value\" id=\"infoDevice\">--</span>\n </div>\n <div class=\"info-divider\"></div>\n <div class=\"info-item\">\n <span class=\"label\">端口</span>\n <span class=\"value\" id=\"infoPort\">--</span>\n </div>\n <div class=\"info-divider\"></div>\n <div class=\"info-item\">\n <span class=\"label\">波特率</span>\n <span class=\"value\" id=\"infoBaud\">--</span>\n </div>\n <div class=\"info-divider\"></div>\n <div class=\"info-item\">\n <span class=\"label\">通道</span>\n <span class=\"value\" id=\"infoChannel\">--</span>\n </div>\n </div>\n\n <!-- Decorative Data Stream -->\n <div class=\"data-lines\">\n <div class=\"line\">\n <span>0x7DF → 0x7E8 ID:123 DLC:8 01 23 45 67 89 AB CD EF</span>\n <span>0x7E8 → 0x7DF ID:456 DLC:8 FE DC BA 98 76 54 32 10</span>\n <span>0x18DAF101 → 0x18DAF1F1 ID:789 DLC:6 AA BB CC DD EE FF</span>\n </div>\n <div class=\"line\">\n <span>0x7DF → 0x7E8 ID:123 DLC:8 01 23 45 67 89 AB CD EF</span>\n <span>0x7E8 → 0x7DF ID:456 DLC:8 FE DC BA 98 76 54 32 10</span>\n <span>0x18DAF101 → 0x18DAF1F1 ID:789 DLC:6 AA BB CC DD EE FF</span>\n </div>\n </div>\n\n </div>\n </div>\n </div>\n\n <script>\n (function() {\n 'use strict';\n\n // DOM refs\n const deviceType = document.getElementById('deviceType');\n const comPort = document.getElementById('comPort');\n const canChannel = document.getElementById('canChannel');\n const baudBtns = document.querySelectorAll('.baud-btn');\n const customBaud = document.getElementById('customBaud');\n const btnConnect = document.getElementById('btnConnect');\n const btnDisconnect = document.getElementById('btnDisconnect');\n const statusLed = document.getElementById('statusLed');\n const statusText = document.getElementById('statusText');\n const alertArea = document.getElementById('alertArea');\n const infoDevice = document.getElementById('infoDevice');\n const infoPort = document.getElementById('infoPort');\n const infoBaud = document.getElementById('infoBaud');\n const infoChannel = document.getElementById('infoChannel');\n const cardBody = document.getElementById('cardBody');\n\n let isConnected = false;\n let isSimulating = false;\n\n // --- Baud Rate Logic ---\n function getSelectedBaud() {\n const activeBtn = document.querySelector('.baud-btn.active');\n if (activeBtn) {\n const val = parseInt(activeBtn.dataset.value, 10);\n return { value: val, label: activeBtn.textContent.trim() };\n }\n const customVal = customBaud.value.trim();\n if (customVal) {\n const num = parseInt(customVal.replace(/[^0-9]/g, ''), 10);\n if (!isNaN(num) && num > 0) {\n return { value: num, label: formatBaud(num) };\n }\n }\n return null;\n }\n\n function formatBaud(val) {\n if (val >= 1000000) return (val / 1000000).toFixed(val % 1000000 === 0 ? 0 : 1) + ' Mbps';\n if (val >= 1000) return (val / 1000).toFixed(0) + ' Kbps';\n return val + ' bps';\n }\n\n baudBtns.forEach(btn => {\n btn.addEventListener('click', function() {\n if (isConnected) return;\n baudBtns.forEach(b => b.classList.remove('active'));\n this.classList.add('active');\n customBaud.value = '';\n });\n });\n\n customBaud.addEventListener('input', function() {\n if (isConnected) return;\n baudBtns.forEach(b => b.classList.remove('active'));\n });\n\n // --- Connection Logic ---\n function setStatus(state, message) {\n // Remove all states\n statusLed.className = 'status-led';\n statusText.className = 'status-text';\n\n if (state === 'connected') {\n statusLed.classList.add('connected');\n statusText.classList.add('connected');\n statusText.textContent = message || '已连接';\n } else if (state === 'error') {\n statusLed.classList.add('error');\n statusText.classList.add('error');\n statusText.textContent = message || '连接异常';\n } else {\n statusLed.classList.add('disconnected');\n statusText.classList.add('disconnected');\n statusText.textContent = message || '未连接';\n }\n }\n\n function showAlert(type, message) {\n alertArea.innerHTML = '';\n const box = document.createElement('div');\n box.className = 'alert-box alert-' + type;\n\n let icon = 'fa-circle-info';\n if (type === 'error') icon = 'fa-circle-exclamation';\n else if (type === 'success') icon = 'fa-circle-check';\n else if (type === 'warning') icon = 'fa-triangle-exclamation';\n\n box.innerHTML = '<i class=\"fas ' + icon + '\"></i><span>' + message + '</span>';\n alertArea.appendChild(box);\n }\n\n function clearAlert() {\n alertArea.innerHTML = '';\n }\n\n function updateInfoBar() {\n const deviceMap = {\n 'zlg': '周立功 USBCANFD-200U',\n 'yuanluo': '源络 USBCANFD'\n };\n const channelMap = {\n '0': 'CAN 0',\n '1': 'CAN 1',\n 'both': '双通道'\n };\n infoDevice.textContent = deviceMap[deviceType.value] || '--';\n infoPort.textContent = comPort.value || '--';\n const baud = getSelectedBaud();\n infoBaud.textContent = baud ? baud.label : '--';\n infoChannel.textContent = channelMap[canChannel.value] || '--';\n }\n\n function toggleConfigLock(disabled) {\n if (disabled) {\n cardBody.classList.add('config-disabled');\n } else {\n cardBody.classList.remove('config-disabled');\n }\n }\n\n // --- Connect ---\n btnConnect.addEventListener('click', function() {\n if (isConnected || isSimulating) return;\n isSimulating = true;\n btnConnect.disabled = true;\n btnConnect.innerHTML = '<i class=\"fas fa-spinner fa-spin\"></i> 连接中...';\n clearAlert();\n\n // Simulate connection attempt\n const baud = getSelectedBaud();\n if (!baud) {\n showAlert('error', '请选择或输入有效的波特率');\n btnConnect.disabled = false;\n btnConnect.innerHTML = '<i class=\"fas fa-link\"></i> 连接';\n isSimulating = false;\n return;\n }\n\n // Random scenario simulation\n setTimeout(function() {\n const rand = Math.random();\n\n if (rand < 0.55) {\n // Success\n isConnected = true;\n setStatus('connected', '已连接');\n showAlert('success', '通讯连接成功 · 设备 ' + (deviceType.value === 'zlg' ? '周立功 USBCANFD-200U' : '源络 USBCANFD') + ' @ ' + comPort.value + ' · ' + baud.label);\n btnConnect.innerHTML = '<i class=\"fas fa-link\"></i> 已连接';\n btnConnect.disabled = true;\n btnDisconnect.disabled = false;\n toggleConfigLock(true);\n updateInfoBar();\n } else if (rand < 0.78) {\n // Port occupied\n setStatus('error', '连接异常');\n showAlert('error', '连接失败：端口 ' + comPort.value + ' 被占用，请检查设备连接或更换端口');\n btnConnect.disabled = false;\n btnConnect.innerHTML = '<i class=\"fas fa-link\"></i> 连接';\n } else if (rand < 0.93) {\n // Baud mismatch\n setStatus('error', '连接异常');\n showAlert('error', '连接失败：波特率不匹配，请确认设备当前波特率与实际设置一致');\n btnConnect.disabled = false;\n btnConnect.innerHTML = '<i class=\"fas fa-link\"></i> 连接';\n } else {\n // Device not found\n setStatus('error', '连接异常');\n showAlert('error', '未检测到 ' + (deviceType.value === 'zlg' ? '周立功 USBCANFD-200U' : '源络 USBCANFD') + ' 设备，请检查 USB 连接和驱动安装');\n btnConnect.disabled = false;\n btnConnect.innerHTML = '<i class=\"fas fa-link\"></i> 连接';\n }\n\n isSimulating = false;\n }, 1800);\n });\n\n // --- Disconnect ---\n btnDisconnect.addEventListener('click', function() {\n if (!isConnected || isSimulating) return;\n isSimulating = true;\n btnDisconnect.disabled = true;\n btnDisconnect.innerHTML = '<i class=\"fas fa-spinner fa-spin\"></i> 断开中...';\n\n setTimeout(function() {\n isConnected = false;\n setStatus('disconnected', '未连接');\n showAlert('warning', '通讯连接已断开');\n btnConnect.disabled = false;\n btnConnect.innerHTML = '<i class=\"fas fa-link\"></i> 连接';\n btnDisconnect.disabled = true;\n btnDisconnect.innerHTML = '<i class=\"fas fa-unlink\"></i> 断开';\n toggleConfigLock(false);\n updateInfoBar();\n isSimulating = false;\n }, 800);\n });\n\n // --- Auto-update info on changes ---\n [deviceType, comPort, canChannel].forEach(el => {\n el.addEventListener('change', function() {\n if (!isConnected) updateInfoBar();\n });\n });\n\n // Init info bar\n updateInfoBar();\n\n // Keyboard accessibility: allow Enter on baud buttons\n baudBtns.forEach(btn => {\n btn.setAttribute('tabindex', '0');\n btn.addEventListener('keydown', function(e) {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this.click();\n }\n });\n });\n\n })();\n </script>\n\n</body>\n</html>"
},
"next": [
"添加CAN数据收发面板",
"支持多设备同时管理",
"增加日志记录功能",
"适配移动端H5页面",
"集成波形分析工具"
],
"breakpoint": "none"
}
```

total_tokens
24903
summary
设计了一款工业暗色风格的CAN通讯工具配置面板，支持周立功USBCANFD-200U和源络USBCANFD两种设备。界面采用深蓝黑底色搭配青色科技感点缀，包含设备类型选择、通讯端口配置、常用波特率快速选择（125Kbps~5Mbps）及自定义输入、连接/断开控制、实时状态指示（LED动画指示灯）和异常提示区。交互上模拟了连接状态切换、异常信息反馈，整体呈现高端工业诊断工具的视觉质感。
uiParsing
关闭