diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 08efbc9..c726755 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -57,7 +57,7 @@ function App() { return (
- {/* 只有设置是模态;「小屁」是浮窗,不能再 inert 主界面,否则没法边聊边操作 */} + {/* 只有设置是模态;「小皮」是浮窗,不能再 inert 主界面,否则没法边聊边操作 */}
{/* 顶栏横跨整宽,压在侧边栏之上 */} setAssistantOpen(true)} /> diff --git a/frontend/src/components/AIAssistant.jsx b/frontend/src/components/AIAssistant.jsx index 1a4c6c0..cd54e84 100644 --- a/frontend/src/components/AIAssistant.jsx +++ b/frontend/src/components/AIAssistant.jsx @@ -6,7 +6,7 @@ const POS_KEY = 'happy.aiPos' const WIN_WIDTH = 348 const starterMessages = [ - { role: 'assistant', text: '我是小屁,你的外贸业务助理。可以帮你查客户、产品、供应商、订单、商机和待办,也能代你发起系统内的操作。' }, + { role: 'assistant', text: '我是小皮,你的外贸业务助理。可以帮你查客户、产品、供应商、订单、商机和待办,也能代你发起系统内的操作。' }, ] function readStoredPos() { @@ -30,7 +30,7 @@ function clampPos(pos, height) { } /** - * 小屁 —— 右上角浮动小窗。 + * 小皮 —— 右上角浮动小窗。 * 不是模态:没有遮罩、不 inert 主界面,所以可以一边让它干活一边自己点系统。 */ function AIAssistant({ isOpen, onClose }) { @@ -136,7 +136,7 @@ function AIAssistant({ isOpen, onClose }) { >
-
[COPILOT]

小屁

+
[COPILOT]

小皮

{!minimized && } @@ -144,12 +144,12 @@ function AIAssistant({ isOpen, onClose }) { type="button" className="ai-icon-btn" onClick={() => setMinimized(value => !value)} - aria-label={minimized ? '展开小屁' : '最小化小屁'} + aria-label={minimized ? '展开小皮' : '最小化小皮'} title={minimized ? '展开' : '最小化(也可以双击标题栏)'} > {minimized ? : } -
@@ -168,8 +168,8 @@ function AIAssistant({ isOpen, onClose }) {
-
{ event.preventDefault(); sendMessage() }}> setInput(event.target.value)} placeholder="告诉小屁你要查什么或做什么…" aria-label="输入给小屁的内容" />
-
小屁会先说明将要执行的操作,再进行需要写入数据的动作。
+
{ event.preventDefault(); sendMessage() }}> setInput(event.target.value)} placeholder="告诉小皮你要查什么或做什么…" aria-label="输入给小皮的内容" autoComplete="off" />
+
小皮会先说明将要执行的操作,再进行需要写入数据的动作。
)} diff --git a/frontend/src/components/GlobalHeader.jsx b/frontend/src/components/GlobalHeader.jsx index 786ba6a..1e94b6a 100644 --- a/frontend/src/components/GlobalHeader.jsx +++ b/frontend/src/components/GlobalHeader.jsx @@ -116,7 +116,7 @@ function GlobalHeader({ onOpenAssistant }) { ) })} -
+
) } diff --git a/frontend/src/pages/Dashboard.jsx b/frontend/src/pages/Dashboard.jsx index 7db3ffb..2d7518f 100644 --- a/frontend/src/pages/Dashboard.jsx +++ b/frontend/src/pages/Dashboard.jsx @@ -1015,7 +1015,7 @@ function Dashboard() {
-
[AI BRIEFING]

今日工作摘要

实时
系统已准备好协助你处理今天的业务。

当前共有 {stats.pendingTodos || 0} 项待办、{stats.activeDeals || 0} 个进行中商机和 {stats.orders || 0} 笔进行中订单。打开右上角的小屁,可以直接用自然语言查阅和操作系统。

供应链客户跟进订单节奏
+
[AI BRIEFING]

今日工作摘要

实时
系统已准备好协助你处理今天的业务。

当前共有 {stats.pendingTodos || 0} 项待办、{stats.activeDeals || 0} 个进行中商机和 {stats.orders || 0} 笔进行中订单。打开右上角的小皮,可以直接用自然语言查阅和操作系统。

供应链客户跟进订单节奏
[ACTIVITY LOG]

最近活动

{recentActivities.length === 0 ?
暂无最近活动
:
    {recentActivities.map(activity =>
  • {new Date(activity.created_at).toLocaleString('zh-CN')}
    {activity.subject}{activity.content}
  • )}
}
diff --git a/frontend/src/styles/industrial.css b/frontend/src/styles/industrial.css index 836a81a..ff357c5 100644 --- a/frontend/src/styles/industrial.css +++ b/frontend/src/styles/industrial.css @@ -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 的裸 (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; } /* 标签、状态、表格 */ diff --git a/frontend/src/styles/luxury.css b/frontend/src/styles/luxury.css index f537526..44fd585 100644 --- a/frontend/src/styles/luxury.css +++ b/frontend/src/styles/luxury.css @@ -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; }