小龙虾
5db3f66b8e
- 将SPI OTA帧格式升级为SPI Link v2，采用新的帧格式： | SOF0 0xA5 | SOF1 0x5A | VER 0x02 | FLAGS | SESSION 4B LE | TX_SEQ | ACK_SEQ | CREDIT | TYPE | LEN 2B LE | RSV 2B | PAYLOAD | CRC32 4B LE | - 新增V2_OVERHEAD=20字节开销，APP最大payload为236字节，BOOT为108字节 - 修改帧类型定义：ENTER_BOOT从0xB5合并至0xB0，新增CAN业务类型0xC0~C3 - 更新CAN协议文档，支持SPI Link v2-only模式，调整最大业务payload计算 - 扩展0xC1帧功能，支持双向通信和1Hz主动推送ID快照 - 添加0xC3完整ID快照帧类型，包含seq/rx_count等完整字段 - 更新协议文档中的错误码定义和反馈payload格式 refactor(main): 重构主程序入口并添加CAN反馈任务 - 在main.cpp中添加CAN反馈任务，更新启动流程注释 - 创建createCriticalTask辅助函数，统一关键任务创建逻辑 - 调整SPI初始化顺序，确保CAN反馈任务依赖正确 - 优化错误处理机制，关键任务失败时立即重启 - 将GD32版本探测移至ota_relay任务处理 - 更新版本号至0.3.48，调整编译时间和Git哈希 config: 更新SPI和BLE配置参数 - 添加SPI主机相关配置参数，包括CS GPIO、READY GPIO等引脚定义 - 配置SPI缓冲区大小：APP为256字节，BOOT为128字节 - 更新BLE滑动窗口参数，ACK窗口设为32，数据队列深度为72 - 调整SPI工作队列大小至5120字节，增加任务堆栈监控说明
242 lines
7.4 KiB
CSS
242 lines
7.4 KiB
CSS
/* === layout.css — 头部/主布局/卡片/表单/按钮/连接状态 === */
|
|
/* === HEADER — compact status bar === */
|
|
.header-bar {
|
|
display: flex; align-items: center; gap: 12px;
|
|
padding: 14px 20px; margin-bottom: 24px;
|
|
background: var(--bg-panel);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
flex-wrap: wrap;
|
|
}
|
|
.header-brand {
|
|
display: flex; align-items: center; gap: 10px;
|
|
padding-right: 20px; border-right: 1px solid var(--border);
|
|
white-space: nowrap;
|
|
}
|
|
.header-brand .dot-mark {
|
|
width: 10px; height: 10px; border-radius: 50%; background: var(--accent);
|
|
box-shadow: 0 0 8px var(--accent-dim);
|
|
flex-shrink: 0;
|
|
}
|
|
.header-brand strong { font-size: 15px; font-weight: 700; }
|
|
.header-status {
|
|
display: flex; align-items: center; gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.pill {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 500;
|
|
background: var(--bg-elevated); border: 1px solid var(--border);
|
|
white-space: nowrap;
|
|
}
|
|
.pill .indicator {
|
|
width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
|
|
}
|
|
.pill.online .indicator { background: var(--green); }
|
|
.pill.offline .indicator { background: var(--red); }
|
|
.pill.processing .indicator { background: var(--amber); animation: blink 1s infinite; }
|
|
.pill.idle .indicator { background: var(--text-dim); }
|
|
@keyframes blink { 50% { opacity: .35; } }
|
|
|
|
/* === MAIN LAYOUT === */
|
|
.main-layout {
|
|
display: grid;
|
|
grid-template-columns: 380px 1fr;
|
|
gap: var(--gap);
|
|
align-items: start;
|
|
}
|
|
|
|
/* === 右侧滑出抽屉：堆与任务栈 ===
|
|
* 总宽 = peek 把手 + 面板；默认 translateX(面板宽) 只露把手，hover 整板探出 */
|
|
.sys-drawer {
|
|
--sys-drawer-panel-w: min(380px, calc(100vw - 48px));
|
|
--sys-drawer-peek: 36px;
|
|
position: fixed;
|
|
top: 72px;
|
|
right: 0;
|
|
z-index: 80;
|
|
width: calc(var(--sys-drawer-panel-w) + var(--sys-drawer-peek));
|
|
height: calc(100vh - 88px);
|
|
max-height: calc(100vh - 88px);
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: stretch;
|
|
transform: translateX(var(--sys-drawer-panel-w));
|
|
transition: transform .28s cubic-bezier(.22, 1, .36, 1);
|
|
filter: drop-shadow(-6px 0 18px rgba(0, 0, 0, .35));
|
|
}
|
|
.sys-drawer:hover,
|
|
.sys-drawer:focus-within {
|
|
transform: translateX(0);
|
|
}
|
|
/* 平时露出的竖条把手 */
|
|
.sys-drawer-rail {
|
|
flex: 0 0 var(--sys-drawer-peek);
|
|
width: var(--sys-drawer-peek);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
padding: 14px 4px;
|
|
background: linear-gradient(180deg, #1a2a3a 0%, var(--bg-card) 100%);
|
|
border: 1px solid var(--border);
|
|
border-right: none;
|
|
border-radius: var(--radius) 0 0 var(--radius);
|
|
cursor: default;
|
|
}
|
|
.sys-drawer-rail-ico {
|
|
font-size: 16px;
|
|
line-height: 1;
|
|
}
|
|
.sys-drawer-rail-text {
|
|
writing-mode: vertical-rl;
|
|
text-orientation: mixed;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
letter-spacing: .12em;
|
|
color: var(--text-dim);
|
|
text-transform: none;
|
|
}
|
|
.sys-drawer:hover .sys-drawer-rail-text,
|
|
.sys-drawer:focus-within .sys-drawer-rail-text {
|
|
color: var(--accent);
|
|
}
|
|
.sys-drawer-panel {
|
|
flex: 1 1 var(--sys-drawer-panel-w);
|
|
width: var(--sys-drawer-panel-w);
|
|
min-width: 0;
|
|
height: 100%;
|
|
margin: 0 !important;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-radius: 0;
|
|
overflow: hidden;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-left: none;
|
|
border-right: none;
|
|
}
|
|
.sys-drawer-head {
|
|
cursor: default;
|
|
flex-shrink: 0;
|
|
}
|
|
.sys-drawer-head .card-head-btn {
|
|
margin-left: auto;
|
|
}
|
|
.sys-drawer-body {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
/* === CARDS === */
|
|
.card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
}
|
|
.card + .card { margin-top: var(--gap); }
|
|
.card-head {
|
|
display: flex; align-items: center; gap: 8px;
|
|
padding: 14px 18px;
|
|
border-bottom: 1px solid var(--border);
|
|
font-size: 13px; font-weight: 600;
|
|
color: var(--text-dim);
|
|
text-transform: uppercase; letter-spacing: .06em;
|
|
}
|
|
.card-head .ico { font-size: 15px; }
|
|
.card-head-btn {
|
|
margin-left: auto;
|
|
padding: 4px 10px;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
.card-body { padding: 16px 18px; }
|
|
.card.collapsed .card-body { display: none; }
|
|
.card-head { cursor: pointer; }
|
|
.card-head .collapse-arrow {
|
|
margin-left: auto; font-size: 10px; opacity: .45;
|
|
transition: transform .2s;
|
|
}
|
|
.card.collapsed .collapse-arrow { transform: rotate(-90deg); }
|
|
|
|
/* === FORM ELEMENTS === */
|
|
.form-row { margin-bottom: 14px; }
|
|
.form-row:last-child { margin-bottom: 0; }
|
|
.form-label {
|
|
display: block; font-size: 11px; color: var(--text-label);
|
|
text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px;
|
|
}
|
|
.input, select, textarea {
|
|
width: 100%; padding: 10px 12px; font-size: 13px; font-family: inherit;
|
|
background: var(--bg-input); color: var(--text);
|
|
border: 1px solid var(--border); border-radius: var(--radius-sm);
|
|
outline: none; transition: border-color .15s;
|
|
}
|
|
.input:focus, select:focus, textarea:focus {
|
|
border-color: var(--border-focus);
|
|
box-shadow: 0 0 0 3px var(--accent-dim);
|
|
}
|
|
select { cursor: pointer; }
|
|
select option { background: var(--bg-panel); color: var(--text); }
|
|
.input-group { display: flex; gap: 8px; }
|
|
.input-group .input { flex: 1; }
|
|
|
|
/* === BUTTONS === */
|
|
.btn {
|
|
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
|
|
padding: 9px 16px; border: none; border-radius: var(--radius-sm);
|
|
font-size: 13px; font-weight: 600; cursor: pointer;
|
|
transition: opacity .15s, transform .15s;
|
|
font-family: inherit; white-space: nowrap;
|
|
}
|
|
.btn:hover:not(:disabled) { transform: translateY(-1px); }
|
|
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
|
|
.btn-primary { background: var(--accent); color: #07121c; }
|
|
.btn-primary:hover:not(:disabled) { opacity: .88; }
|
|
.btn-success { background: var(--green); color: #051a0c; }
|
|
.btn-danger { background: var(--red); color: #fff; }
|
|
.btn-outline {
|
|
background: transparent; color: var(--text-dim);
|
|
border: 1px solid var(--border);
|
|
}
|
|
.btn-outline:hover:not(:disabled) { background: var(--bg-elevated); color: var(--text); }
|
|
.btn-ghost {
|
|
background: transparent; color: var(--text-dim);
|
|
}
|
|
.btn-ghost:hover:not(:disabled) { background: var(--bg-elevated); color: var(--text); }
|
|
.btn-block { width: 100%; justify-content: center; }
|
|
.btn-sm { padding: 6px 12px; font-size: 12px; }
|
|
|
|
/* === CONNECTION STATUS ROW === */
|
|
.conn-indicator {
|
|
display: flex; align-items: center; gap: 10px;
|
|
padding: 12px 16px; border-radius: var(--radius-sm);
|
|
background: var(--bg-elevated); border: 1px solid var(--border);
|
|
font-size: 13px; font-weight: 500;
|
|
}
|
|
.conn-indicator .light {
|
|
width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
|
|
}
|
|
.conn-indicator.ok .light { background: var(--green); }
|
|
.conn-indicator.err .light { background: var(--red); }
|
|
.conn-indicator.warn .light { background: var(--amber); }
|
|
|
|
.helper-note {
|
|
margin-top: 10px;
|
|
padding: 10px 12px;
|
|
border-radius: var(--radius-sm);
|
|
border: 1px solid var(--border);
|
|
background: var(--bg-elevated);
|
|
font-size: 12px;
|
|
line-height: 1.6;
|
|
color: var(--text-dim);
|
|
}
|
|
.helper-note.ok { border-color: rgba(34,197,94,.25); color: #b8f5cb; }
|
|
.helper-note.warn { border-color: rgba(245,158,11,.25); color: #fbd38d; }
|
|
.helper-note.err { border-color: rgba(239,68,68,.25); color: #fecaca; }
|
|
.helper-note code { color: #d7fbff; font-family: var(--font-mono); }
|