wayne/happy-export
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(ui): 助手正名「小皮」+ 全站输入框去掉描边方框

Browse Source 
助手改名
- 「小屁」→「小皮」（AI 浮窗标题/按钮/占位文案/工作台引导语 + 注释）

输入框一律无方框（靠底色区分，聚焦换成 primary 底色）
- 根因一：全局选择器写成 input[type="text"] 列表，AI 浮窗输入框没写 type
  完全没吃到样式，渲染成浏览器默认的 2px 灰直角框（就是「丑出天际」那个），
  顺手补上 input:not([type]) 兜底 + 给该输入框补 type="text"
- 根因二：聚焦时同时叠了 input[type] 的 1px 描边 + 3px 光环，以及
  :focus-visible 的 2px 外描边（鼠标点文本框也会命中），一共三层方框
- 覆盖范围：全局 form 控件、顶栏搜索、汇率金额、备忘录添加行、
  日历添加日程、跳转浮层年月输入框、设置里 API Key / 下拉
This commit is contained in:
Drsakura
2026-09-11 11:45:20 +08:00
parent 850abe9327
commit fa4dd6482b
6 changed files with 42 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/industrial.css
+12 -7
View File
@@ -160,22 +160,27 @@ a { color: inherit; }
.btn-link { border: 0; background: transparent; color: var(--primary-light); font-weight: 600; cursor: pointer; padding: 5px 0; }
.btn-link:hover { color: var(--text-primary); }
input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], select, textarea, .form-input, .form-select {
/* 输入框一律「无方框」：不做描边，只靠底色区分。
⚠️ 末尾的 input:not([type]) 是为了兜住没写 type 的裸 <input>（AI 输入框曾因此掉进浏览器默认样式）。
用的都是 (0,1,1) 同权重，别改成 :not() 链，会压过各处的局部覆盖。 */
input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input:not([type]), select, textarea, .form-input, .form-select {
width: 100%;
min-height: 38px;
padding: 9px 11px;
border: 1px solid var(--border);
border: 0;
border-radius: var(--radius-md);
background: var(--surface-deep);
color: var(--text-primary);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
transition: background var(--transition-fast), color var(--transition-fast);
}
input::placeholder, textarea::placeholder { color: var(--text-tertiary); }
input:focus, select:focus, textarea:focus, .form-input:focus, .form-select:focus {
/* 聚焦同样不用方框（原来的 3px 光环 + 描边就是「丑方框」的来源） */
input:focus, input:not([type]):focus, select:focus, textarea:focus, .form-input:focus, .form-select:focus {
outline: none;
border-color: var(--primary);
background: var(--surface);
box-shadow: 0 0 0 3px rgba(42, 167, 220, 0.14);
border: 0;
background: var(--primary-bg);
color: var(--text-primary);
box-shadow: none;
}
/* 标签、状态、表格 */
frontend/src/styles/luxury.css
+20 -16
View File
@@ -115,9 +115,12 @@ body { font-size: 14px; }
.btn-sm { min-height: 32px; padding: 5px 10px; }
.modal-content, .drawer { border-color: var(--border-light); border-radius: 22px; }
.drawer { border-radius: 22px 0 0 22px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* 文本框不再画 2px 描边方框（鼠标点进去也会命中 :focus-visible，那是「丑方框」的主要来源）；
聚焦反馈统一交给底色变化。按钮/链接保留键盘可见性轮廓。 */
button:focus-visible, a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
/* Settings shell: a single rounded, softly illuminated surface. */
/* 设置仍是模态，层级要压过「小屁」浮窗（z-index 78） */
/* 设置仍是模态，层级要压过「小皮」浮窗（z-index 78） */
.settings-overlay { z-index: 90; padding: 24px; background: rgba(4, 9, 18, .64); backdrop-filter: blur(9px); }
.settings-modal.luxury-settings {
position: relative; width: min(1020px, 100%); height: min(700px, calc(100dvh - 48px));
@@ -227,8 +230,8 @@ input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px
.global-header-brand strong { font-size: 19px; letter-spacing: .01em; line-height: 1.2; }
.global-header-brand span:not(.header-status-dot):not(.brand-mark) { color: var(--text-tertiary); font: 10px var(--font-mono); letter-spacing: .14em; margin-top: 2px; }
.header-status-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: var(--success); box-shadow: 0 0 10px var(--success); }
.global-search { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; width: min(360px, 30vw); min-height: 38px; padding: 0 11px; color: var(--text-tertiary); background: var(--surface-deep); border: 1px solid var(--border-light); border-radius: 11px; transition: border-color 150ms, box-shadow 150ms; }
.global-search:focus-within { border-color: var(--primary-border); box-shadow: 0 0 0 3px var(--accent-glow); }
.global-search { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; width: min(360px, 30vw); min-height: 38px; padding: 0 11px; color: var(--text-tertiary); background: var(--surface-deep); border: 0; border-radius: 11px; transition: background var(--transition-fast); }
.global-search:focus-within { background: var(--primary-bg); }
.global-search input { min-width: 0; min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--text-primary); }
.global-search input:focus { box-shadow: none; }
.global-search kbd { margin-left: auto; flex: 0 0 auto; white-space: nowrap; padding: 2px 5px; color: var(--text-tertiary); background: var(--surface); border: 1px solid var(--border-light); border-radius: 5px; font: 10px var(--font-mono); }
@@ -358,8 +361,8 @@ input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px
.memo-remove { flex: 0 0 auto; display: grid; place-items: center; width: 19px; height: 19px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-disabled); cursor: pointer; opacity: 0; transition: opacity var(--transition-fast), color var(--transition-fast); }
.memo-item:hover .memo-remove, .memo-remove:focus-visible { opacity: 1; }
.memo-remove:hover { color: var(--danger); }
.memo-add { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border: 1px dashed var(--border); border-radius: var(--radius-sm); background: var(--surface); transition: border-color var(--transition-fast), background var(--transition-fast); }
.memo-add:focus-within { border-style: solid; border-color: var(--primary); background: var(--surface-raised); }
.memo-add { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border: 0; border-radius: 10px; background: var(--surface-deep); transition: background var(--transition-fast); }
.memo-add:focus-within { background: var(--primary-bg); }
.memo-add[data-saving="true"] { opacity: .6; }
.memo-add-icon { display: grid; place-items: center; flex: 0 0 auto; color: var(--text-tertiary); transition: color var(--transition-fast); }
.memo-add:focus-within .memo-add-icon { color: var(--primary-light); }
@@ -390,10 +393,10 @@ input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px
.calendar-popover-close:hover { border-color: var(--border); color: var(--text-primary); }
.calendar-field { display: block; margin-bottom: 10px; }
.calendar-field > span { display: block; margin-bottom: 5px; color: var(--text-tertiary); font: 10px var(--font-mono); letter-spacing: .08em; }
.calendar-field input, .calendar-field textarea { width: 100%; padding: 8px 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-deep); color: var(--text-primary); font: 12px var(--font-body); }
.calendar-field input, .calendar-field textarea { width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; background: var(--surface-deep); color: var(--text-primary); font: 12px var(--font-body); }
.calendar-field textarea { min-height: 56px; resize: vertical; }
.calendar-field input::placeholder, .calendar-field textarea::placeholder { color: var(--text-disabled); }
.calendar-field input:focus, .calendar-field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-bg); }
.calendar-field input:focus, .calendar-field textarea:focus { outline: none; border: 0; background: var(--primary-bg); box-shadow: none; }
.calendar-priority-row { display: flex; gap: 6px; }
.calendar-priority-row button { flex: 1; height: 30px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-deep); color: var(--text-secondary); font-size: 11px; cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast); }
.calendar-priority-row button:hover { border-color: var(--border-strong); color: var(--text-primary); }
@@ -438,11 +441,11 @@ input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px
.jump-day.is-selected { border-color: var(--primary); background: var(--primary); color: var(--surface-deep); font-weight: 800; }
.jump-today { width: 100%; height: 27px; margin-top: 8px; border: 1px solid var(--border-light); border-radius: 7px; background: var(--surface-deep); color: var(--text-secondary); font-size: 11px; cursor: pointer; }
.jump-today:hover { border-color: var(--primary); color: var(--primary-light); }
/* 跳转浮层标题 = 直接输入年月（前 4 位年 + 后 1~2 位月，回车跳转） */
.jump-head .jump-month-input { display: block; flex: 1; width: auto; min-width: 0; min-height: 0; height: 26px; padding: 0 8px; border: 1px solid var(--border-light); border-radius: 7px; background: var(--surface-deep); box-shadow: none; color: var(--text-primary); font: 12px var(--font-body); font-variant-numeric: tabular-nums; text-align: center; outline: none; cursor: text; transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast); }
.jump-head .jump-month-input:hover { border-color: var(--primary-border); background: var(--primary-bg); }
.jump-head .jump-month-input:focus { border-color: var(--primary); background: var(--primary-bg); color: var(--primary-light); font-weight: 700; letter-spacing: .3px; }
.jump-head .jump-month-input.is-invalid { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
/* 跳转浮层标题 = 直接输入年月（前 4 位年 + 后 1~2 位月，回车跳转）；无描边，只靠底色 */
.jump-head .jump-month-input { display: block; flex: 1; width: auto; min-width: 0; min-height: 0; height: 26px; padding: 0 8px; border: 0; border-radius: 8px; background: var(--surface-deep); box-shadow: none; color: var(--text-primary); font: 12px var(--font-body); font-variant-numeric: tabular-nums; text-align: center; outline: none; cursor: text; transition: background var(--transition-fast), color var(--transition-fast); }
.jump-head .jump-month-input:hover { background: var(--primary-bg); color: var(--primary-light); }
.jump-head .jump-month-input:focus { background: var(--primary-bg); color: var(--primary-light); font-weight: 700; letter-spacing: .3px; }
.jump-head .jump-month-input.is-invalid { background: var(--danger-bg); color: var(--danger); }
.jump-head .jump-month-input::selection { background: var(--primary); color: var(--surface-deep); }
/* 年月拨盘（iOS 闹钟式滚轮） */
.calendar-wheel-pop { --wheel-item: 32px; padding: 12px 14px 10px; }
@@ -508,7 +511,8 @@ input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px
.ai-context-strip { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0; color: var(--text-tertiary); font-size: 10px; }.ai-context-strip span { margin-right: auto; }.ai-context-strip b { padding: 3px 6px; border-radius: 5px; color: var(--text-secondary); background: var(--surface-deep); font-weight: 500; }
.ai-message-list { display: grid; gap: 11px; margin-top: 12px; }.ai-message { display: flex; align-items: flex-start; gap: 8px; }.ai-message.user { flex-direction: row-reverse; }.ai-message-avatar { display: grid; place-items: center; width: 25px; height: 25px; flex: 0 0 25px; border-radius: 9px; background: var(--surface-deep); color: var(--primary-light); font-size: 10px; font-weight: 800; }.ai-message.user .ai-message-avatar { color: var(--surface-deep); background: var(--primary); }.ai-message-content { max-width: 82%; padding: 8px 10px; border-radius: 4px 12px 12px 12px; background: var(--surface-deep); }.ai-message.user .ai-message-content { border-radius: 12px 4px 12px 12px; background: var(--primary-bg); }.ai-message-content p { margin: 0; color: var(--text-secondary); font-size: 11.5px; line-height: 1.65; }.ai-message-content small { display: block; margin-top: 5px; color: var(--text-tertiary); font: 9px var(--font-mono); }.ai-thinking { display: flex; gap: 4px; align-items: center; min-height: 32px; }.ai-thinking span { width: 5px; height: 5px; border-radius: 50%; background: var(--primary); animation: ai-bounce 1s infinite ease-in-out; }.ai-thinking span:nth-child(2) { animation-delay: .15s; }.ai-thinking span:nth-child(3) { animation-delay: .3s; }@keyframes ai-bounce { 0%,80%,100% { transform: translateY(0); opacity:.45; } 40% { transform: translateY(-4px); opacity:1; } }
.ai-suggestion-row { display: flex; gap: 7px; padding: 7px 13px; overflow-x: auto; }.ai-suggestion-row button { flex: 0 0 auto; padding: 5px 9px; border: 1px solid var(--border-light); border-radius: 99px; background: var(--surface-deep); color: var(--text-secondary); cursor: pointer; font-size: 10px; }.ai-suggestion-row button:hover { color: var(--primary-light); border-color: var(--primary-border); }
.ai-input-row { display: flex; gap: 8px; padding: 9px 12px; border-top: 1px solid var(--border-light); }.ai-input-row input { min-height: 36px; background: var(--surface-deep); }.ai-input-row button { display: grid; place-items: center; width: 36px; min-width: 36px; border: 0; border-radius: 10px; background: var(--primary); color: var(--surface-deep); cursor: pointer; }.ai-input-row button:disabled { cursor: not-allowed; opacity: .4; }.ai-panel-footer { padding: 6px 13px 10px; color: var(--text-tertiary); font-size: 9.5px; text-align: center; }
.ai-input-row { display: flex; gap: 8px; padding: 9px 12px; border-top: 1px solid var(--border-light); }.ai-input-row input { min-height: 36px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--surface-deep); }
.ai-input-row input:focus { background: var(--primary-bg); }.ai-input-row button { display: grid; place-items: center; width: 36px; min-width: 36px; border: 0; border-radius: 10px; background: var(--primary); color: var(--surface-deep); cursor: pointer; }.ai-input-row button:disabled { cursor: not-allowed; opacity: .4; }.ai-panel-footer { padding: 6px 13px 10px; color: var(--text-tertiary); font-size: 9.5px; text-align: center; }
/* ---------- 汇率计算器（顶栏） ---------- */
.fx-calc { position: relative; flex: 0 0 auto; }
.header-tool-btn { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--text-secondary); cursor: pointer; transition: background 150ms, border-color 150ms, color 150ms; }
@@ -522,8 +526,8 @@ input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px
.fx-refresh:disabled { opacity: .45; cursor: default; }
.fx-panel-body { display: flex; align-items: center; gap: 10px; }
.fx-side { position: relative; flex: 1 1 0; min-width: 0; display: grid; gap: 6px; }
.fx-amount { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--border-light); border-radius: 11px; background: var(--surface-deep); color: var(--text-primary); font: 600 17px var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.fx-amount:focus { outline: none; border-color: var(--primary-border); box-shadow: 0 0 0 3px var(--primary-bg); }
.fx-amount { width: 100%; height: 44px; padding: 0 12px; border: 0; border-radius: 11px; background: var(--surface-deep); color: var(--text-primary); font: 600 17px var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.fx-amount:focus { outline: none; background: var(--primary-bg); color: var(--primary-light); box-shadow: none; }
.fx-swap { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; padding: 0; border: 1px solid var(--border-light); border-radius: 50%; background: var(--surface-deep); color: var(--text-secondary); cursor: pointer; transition: color 150ms, border-color 150ms, transform 200ms; }
.fx-swap:hover { color: var(--primary-light); border-color: var(--primary-border); transform: rotate(180deg); }
.fx-picker { position: relative; }