feat(workspace): 日历再瘦身 + 右侧面板等高填满 + 日期跳转按钮 + 小屁浮窗化

日历
- 单元格 72→60px,日号 19→17px、字号 11→10px,事件条与周标同步收紧,
  标题区 padding 与提示文案一起压小
- 工具条右边的「月」按钮删掉,换成日历小图标按钮:悬浮/展开变蓝(primary 实底),
  点击弹出迷你月历(自带年月切换 + 回到今天),点某天即跳月并选中该日

右侧面板
- 「今日 to do」与「待办事项」改成按列高 58/42 平分,列表自身 flex 撑满并可滚动;
  之前待办被挤到底部只剩一条空文案,现在两块都填满整列
- 跳转浮层 z-index 82,压过小屁浮窗(78);设置遮罩提到 90,保证仍是最高层

AI 助手 → 小屁
- 全屏遮罩 + 右侧整条抽屉删掉,改成右上角 348px 宽浮动小窗:
  可拖动(位置记 localStorage,越界自动夹回视口)、可最小化成小条、双击标题栏切换
- App.jsx 不再因为小屁打开而 inert 主界面(只有设置才是模态),
  所以可以一边让小屁干活一边自己点系统:实测开着窗导航、选日期、填备忘录都正常
- 文案全部改名小屁,顶栏按钮、面板标题、工作台摘要里的引导语一并更新

顺手
- 顶栏搜索的 ⌘K 提示块加 nowrap,1024 宽度下不再折成两行
This commit is contained in:
Drsakura
2026-09-10 23:56:52 +08:00
parent b9d6296591
commit 4c3ec995b6
6 changed files with 294 additions and 62 deletions
+2 -1
View File
@@ -57,7 +57,8 @@ function App() {
return ( return (
<Router> <Router>
<div className="app-container"> <div className="app-container">
<div className="app-shell" inert={settingsOpen || assistantOpen ? "" : undefined}> {/* 只有设置是模态;「小屁」是浮窗,不能再 inert 主界面,否则没法边聊边操作 */}
<div className="app-shell" inert={settingsOpen ? "" : undefined}>
{/* 顶栏横跨整宽,压在侧边栏之上 */} {/* 顶栏横跨整宽,压在侧边栏之上 */}
<GlobalHeader onOpenAssistant={() => setAssistantOpen(true)} /> <GlobalHeader onOpenAssistant={() => setAssistantOpen(true)} />
+113 -19
View File
@@ -1,25 +1,58 @@
import React, { useEffect, useMemo, useRef, useState } from 'react' import React, { useEffect, useMemo, useRef, useState } from 'react'
import axios from 'axios' import axios from 'axios'
import { BotIcon, CloseIcon, SendIcon, SparkIcon } from './Icons' import { BotIcon, CloseIcon, MinusIcon, SendIcon, SparkIcon } from './Icons'
const POS_KEY = 'happy.aiPos'
const WIN_WIDTH = 348
const starterMessages = [ const starterMessages = [
{ role: 'assistant', text: '你好,我是你的供应链 AI 助手。可以帮你查看客户、产品、供应商、订单、商机和待办,也可以协助发起系统内的业务操作。' }, { role: 'assistant', text: '我是小屁,你的外贸业务助理。可以帮你查客户、产品、供应商、订单、商机和待办,也能代你发起系统内的操作。' },
] ]
function readStoredPos() {
try {
const raw = JSON.parse(localStorage.getItem(POS_KEY) || 'null')
if (raw && Number.isFinite(raw.left) && Number.isFinite(raw.top)) return { left: raw.left, top: raw.top }
} catch { /* 存储不可用时用默认位置 */ }
return null
}
/** 拖动或改窗口大小后,把窗口夹回视口,保证整窗(至少是标题栏)能点到 */
function clampPos(pos, height) {
if (!pos) return pos
const maxLeft = Math.max(8, window.innerWidth - WIN_WIDTH - 8)
const usable = Math.min(height || 320, window.innerHeight - 60)
const maxTop = Math.max(8, window.innerHeight - usable - 8)
return {
left: Math.min(Math.max(8, pos.left), maxLeft),
top: Math.min(Math.max(8, pos.top), maxTop)
}
}
/**
* 小屁 —— 右上角浮动小窗。
* 不是模态:没有遮罩、不 inert 主界面,所以可以一边让它干活一边自己点系统。
*/
function AIAssistant({ isOpen, onClose }) { function AIAssistant({ isOpen, onClose }) {
const [messages, setMessages] = useState(starterMessages) const [messages, setMessages] = useState(starterMessages)
const [input, setInput] = useState('') const [input, setInput] = useState('')
const [context, setContext] = useState(null) const [context, setContext] = useState(null)
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
const [minimized, setMinimized] = useState(false)
const [pos, setPos] = useState(readStoredPos)
const inputRef = useRef(null) const inputRef = useRef(null)
const panelRef = useRef(null) const winRef = useRef(null)
const dragRef = useRef(null)
useEffect(() => { useEffect(() => {
if (!isOpen) return if (isOpen && !minimized) inputRef.current?.focus()
inputRef.current?.focus() }, [isOpen, minimized])
const onKeyDown = (event) => {
if (event.key === 'Escape') onClose() // Esc 只收窗,不做任何全局拦截
} useEffect(() => {
if (!isOpen) return undefined
const onKeyDown = (event) => { if (event.key === 'Escape') onClose() }
window.addEventListener('keydown', onKeyDown) window.addEventListener('keydown', onKeyDown)
return () => window.removeEventListener('keydown', onKeyDown) return () => window.removeEventListener('keydown', onKeyDown)
}, [isOpen, onClose]) }, [isOpen, onClose])
@@ -29,11 +62,41 @@ function AIAssistant({ isOpen, onClose }) {
axios.get('/api/assistant/context').then(response => setContext(response.data)).catch(() => setContext(null)) axios.get('/api/assistant/context').then(response => setContext(response.data)).catch(() => setContext(null))
}, [isOpen]) }, [isOpen])
useEffect(() => {
if (!isOpen || !pos) return undefined
const onResize = () => setPos(current => clampPos(current, winRef.current?.offsetHeight))
window.addEventListener('resize', onResize)
return () => window.removeEventListener('resize', onResize)
}, [isOpen, pos])
const onDragStart = (event) => {
if (event.target.closest('button')) return
const rect = winRef.current?.getBoundingClientRect()
if (!rect) return
dragRef.current = { dx: event.clientX - rect.left, dy: event.clientY - rect.top }
try { event.currentTarget.setPointerCapture(event.pointerId) } catch { /* 合成事件或指针已释放 */ }
}
const onDragMove = (event) => {
if (!dragRef.current) return
setPos(clampPos({ left: event.clientX - dragRef.current.dx, top: event.clientY - dragRef.current.dy }, winRef.current?.offsetHeight))
}
const onDragEnd = (event) => {
if (!dragRef.current) return
dragRef.current = null
try { event.currentTarget.releasePointerCapture(event.pointerId) } catch { /* 指针已释放 */ }
const rect = winRef.current?.getBoundingClientRect()
if (rect) {
try { localStorage.setItem(POS_KEY, JSON.stringify({ left: rect.left, top: rect.top })) } catch { /* 仅本次会话 */ }
}
}
const capabilities = useMemo(() => [ const capabilities = useMemo(() => [
'读取全局业务概览与实时统计', '读取全局业务概览与实时统计',
'检索客户、供应商、产品和订单', '检索客户、供应商、产品和订单',
'查看商机、待办与近期活动', '查看商机、待办与近期活动',
'发起已授权的新增、更新和状态操作', '发起已授权的新增、更新和状态操作'
], []) ], [])
if (!isOpen) return null if (!isOpen) return null
@@ -56,16 +119,46 @@ function AIAssistant({ isOpen, onClose }) {
} }
return ( return (
<div className="assistant-layer" onClick={onClose}> <aside
<aside ref={panelRef} className="ai-assistant-panel" role="dialog" aria-modal="true" aria-labelledby="ai-assistant-title" onClick={event => event.stopPropagation()}> ref={winRef}
<div className="ai-panel-header"> className={`ai-window${minimized ? ' is-minimized' : ''}`}
<div className="ai-panel-title"><span className="ai-orb"><BotIcon size={20} /></span><div><span className="section-label">[SYSTEM COPILOT]</span><h2 id="ai-assistant-title">AI 助手</h2></div></div> style={pos ? { left: pos.left, top: pos.top, right: 'auto' } : undefined}
<button className="ai-close-btn" onClick={onClose} aria-label="关闭 AI 助手"><CloseIcon size={18} /></button> role="complementary"
aria-labelledby="ai-assistant-title"
>
<div
className="ai-window-bar"
onPointerDown={onDragStart}
onPointerMove={onDragMove}
onPointerUp={onDragEnd}
onPointerCancel={onDragEnd}
onDoubleClick={() => setMinimized(value => !value)}
>
<div className="ai-panel-title">
<span className="ai-orb"><BotIcon size={16} /></span>
<div><span className="section-label">[COPILOT]</span><h2 id="ai-assistant-title">小屁</h2></div>
</div>
<div className="ai-window-actions">
{!minimized && <span className="ai-live-dot" title="已连接系统业务层" />}
<button
type="button"
className="ai-icon-btn"
onClick={() => setMinimized(value => !value)}
aria-label={minimized ? '展开小屁' : '最小化小屁'}
title={minimized ? '展开' : '最小化(也可以双击标题栏)'}
>
{minimized ? <SparkIcon size={15} /> : <MinusIcon size={16} />}
</button>
<button type="button" className="ai-icon-btn" onClick={onClose} aria-label="关闭小屁" title="关闭">
<CloseIcon size={15} />
</button>
</div>
</div> </div>
<div className="ai-access-banner"><span className="ai-live-dot" /><div><strong>已连接系统业务层</strong><small>可读取模块数据,敏感写操作会先请求确认</small></div></div> {!minimized && (
<React.Fragment>
<div className="ai-panel-body"> <div className="ai-panel-body">
<div className="ai-access-banner"><span className="ai-live-dot" /><div><strong>已连接系统业务层</strong><small>可读取模块数据,敏感写操作会先请求确认</small></div></div>
<div className="ai-capability-card"><div className="ai-capability-heading"><SparkIcon size={15} />我能帮你</div>{capabilities.map(capability => <div className="ai-capability-row" key={capability}><span>✓</span>{capability}</div>)}</div> <div className="ai-capability-card"><div className="ai-capability-heading"><SparkIcon size={15} />我能帮你</div>{capabilities.map(capability => <div className="ai-capability-row" key={capability}><span>✓</span>{capability}</div>)}</div>
{context && <div className="ai-context-strip"><span>当前数据快照</span><b>{context.stats?.customers || 0} 客户</b><b>{context.stats?.products || 0} 产品</b><b>{context.stats?.orders || 0} 订单</b></div>} {context && <div className="ai-context-strip"><span>当前数据快照</span><b>{context.stats?.customers || 0} 客户</b><b>{context.stats?.products || 0} 产品</b><b>{context.stats?.orders || 0} 订单</b></div>}
<div className="ai-message-list"> <div className="ai-message-list">
@@ -75,10 +168,11 @@ function AIAssistant({ isOpen, onClose }) {
</div> </div>
<div className="ai-suggestion-row"><button onClick={() => sendMessage('汇总今天最重要的事项')}>汇总今天事项</button><button onClick={() => sendMessage('查看系统数据概览')}>查看系统概览</button></div> <div className="ai-suggestion-row"><button onClick={() => sendMessage('汇总今天最重要的事项')}>汇总今天事项</button><button onClick={() => sendMessage('查看系统数据概览')}>查看系统概览</button></div>
<form className="ai-input-row" onSubmit={event => { event.preventDefault(); sendMessage() }}><input ref={inputRef} value={input} onChange={event => setInput(event.target.value)} placeholder="告诉 AI 你要查什么或做什么…" aria-label="输入给 AI 助手的内容" /><button type="submit" disabled={!input.trim() || loading} aria-label="发送"><SendIcon size={18} /></button></form> <form className="ai-input-row" onSubmit={event => { event.preventDefault(); sendMessage() }}><input ref={inputRef} value={input} onChange={event => setInput(event.target.value)} placeholder="告诉小屁你要查什么或做什么…" aria-label="输入给小屁的内容" /><button type="submit" disabled={!input.trim() || loading} aria-label="发送"><SendIcon size={18} /></button></form>
<div className="ai-panel-footer">AI 会先说明将要执行的操作,再进行需要写入数据的动作。</div> <div className="ai-panel-footer">小屁会先说明将要执行的操作,再进行需要写入数据的动作。</div>
</React.Fragment>
)}
</aside> </aside>
</div>
) )
} }
+1 -1
View File
@@ -116,7 +116,7 @@ function GlobalHeader({ onOpenAssistant }) {
) )
})} })}
</nav> </nav>
<div className="global-header-actions"><TimeZoneClock now={now} /><FxCalculator /><button className="quick-create-btn" title="快速新建"><PlusCircleIcon size={19} /><span>快速新建</span></button><button className="ai-entry-btn" onClick={onOpenAssistant} title="打开 AI 助手"><BotIcon size={19} /><span>AI 助手</span><i>β</i></button><button className="header-avatar" title="当前用户">W</button><button className="mobile-search-btn" onClick={() => { setSearchOpen(v => !v); window.setTimeout(() => searchRef.current?.focus(), 0) }} title="搜索"><SearchIcon size={18} /></button></div> <div className="global-header-actions"><TimeZoneClock now={now} /><FxCalculator /><button className="quick-create-btn" title="快速新建"><PlusCircleIcon size={19} /><span>快速新建</span></button><button className="ai-entry-btn" onClick={onOpenAssistant} title="打开小屁"><BotIcon size={19} /><span>小屁</span><i>β</i></button><button className="header-avatar" title="当前用户">W</button><button className="mobile-search-btn" onClick={() => { setSearchOpen(v => !v); window.setTimeout(() => searchRef.current?.focus(), 0) }} title="搜索"><SearchIcon size={18} /></button></div>
</header> </header>
) )
} }
+6
View File
@@ -118,6 +118,12 @@ export const CalendarIcon = ({ size = 20, className = '' }) => (
</svg> </svg>
) )
export const MinusIcon = ({ size = 20, className = '' }) => (
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className} aria-hidden="true">
<line x1="5" y1="12" x2="19" y2="12" />
</svg>
)
export const BellIcon = ({ size = 20, className = '' }) => ( export const BellIcon = ({ size = 20, className = '' }) => (
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}> <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" /> <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
+103 -2
View File
@@ -28,6 +28,8 @@ const PRIORITY_LABELS = { high: '高', medium: '中', low: '低' }
const COMPOSER_WIDTH = 306 const COMPOSER_WIDTH = 306
const TIP_WIDTH = 268 const TIP_WIDTH = 268
const JUMP_WIDTH = 262
const JUMP_HEIGHT = 292
const MAX_CELL_EVENTS = 2 const MAX_CELL_EVENTS = 2
// 春节(农历正月初一)公历日期,逐年查表;2025–2035 与天文台公布数据一致。 // 春节(农历正月初一)公历日期,逐年查表;2025–2035 与天文台公布数据一致。
@@ -297,9 +299,15 @@ function CalendarBoard({ todos: seedTodos, onTodoCreated }) {
const [draft, setDraft] = useState({ title: '', priority: 'medium', description: '' }) const [draft, setDraft] = useState({ title: '', priority: 'medium', description: '' })
const [saving, setSaving] = useState(false) const [saving, setSaving] = useState(false)
const [formError, setFormError] = useState('') const [formError, setFormError] = useState('')
// 快速跳转日期:工具条上的小日历按钮 + 浮出的迷你月历
const [jumpOpen, setJumpOpen] = useState(false)
const [jumpPos, setJumpPos] = useState(null)
const [jumpMonth, setJumpMonth] = useState(() => new Date(today.getFullYear(), today.getMonth(), 1))
const composerRef = useRef(null) const composerRef = useRef(null)
const tipRef = useRef(null) const tipRef = useRef(null)
const jumpRef = useRef(null)
const jumpBtnRef = useRef(null)
const anchorElRef = useRef(null) const anchorElRef = useRef(null)
const pendingSelectRef = useRef(null) const pendingSelectRef = useRef(null)
@@ -372,6 +380,16 @@ function CalendarBoard({ todos: seedTodos, onTodoCreated }) {
const activeKey = selectedKey || todayKey const activeKey = selectedKey || todayKey
const activeEvents = events[activeKey] || [] const activeEvents = events[activeKey] || []
// 迷你月历:按真实天数出行数,避免六月/九月都留一行空
const jumpStartDay = (jumpMonth.getDay() + 6) % 7
const jumpRows = Math.ceil((jumpStartDay + new Date(jumpMonth.getFullYear(), jumpMonth.getMonth() + 1, 0).getDate()) / 7)
const jumpDays = useMemo(() => (
Array.from({ length: jumpRows * 7 }, (_, index) => {
const date = new Date(jumpMonth.getFullYear(), jumpMonth.getMonth(), index - jumpStartDay + 1)
return { date, key: toDateKey(date), currentMonth: date.getMonth() === jumpMonth.getMonth() }
})
), [jumpMonth, jumpStartDay, jumpRows])
const closeComposer = useCallback(() => { const closeComposer = useCallback(() => {
setComposerKey(null) setComposerKey(null)
setComposerAnchor(null) setComposerAnchor(null)
@@ -487,6 +505,53 @@ function CalendarBoard({ todos: seedTodos, onTodoCreated }) {
const shiftMonth = (delta) => setMonth(current => new Date(current.getFullYear(), current.getMonth() + delta, 1)) const shiftMonth = (delta) => setMonth(current => new Date(current.getFullYear(), current.getMonth() + delta, 1))
const resetMonth = () => setMonth(new Date(today.getFullYear(), today.getMonth(), 1)) const resetMonth = () => setMonth(new Date(today.getFullYear(), today.getMonth(), 1))
/* 跳转浮层挂在工具条按钮右缘(右对齐),下方放不下就翻到上方 */
const positionJump = useCallback((element) => {
const rect = element.getBoundingClientRect()
const left = Math.min(Math.max(12, rect.right - JUMP_WIDTH), Math.max(12, window.innerWidth - JUMP_WIDTH - 12))
const flipUp = rect.bottom + 9 + JUMP_HEIGHT > window.innerHeight && rect.top - 9 - JUMP_HEIGHT > 0
setJumpPos({ left, top: flipUp ? rect.top - 9 : rect.bottom + 9, placement: flipUp ? 'above' : 'below' })
}, [])
const toggleJump = (event) => {
if (jumpOpen) { setJumpOpen(false); return }
jumpBtnRef.current = event.currentTarget
positionJump(event.currentTarget)
setJumpMonth(new Date(month.getFullYear(), month.getMonth(), 1))
setJumpOpen(true)
}
const pickJumpDay = (key) => {
const [year, monthIndex] = key.split('-').map(Number)
setMonth(new Date(year, monthIndex - 1, 1))
setSelectedKey(key)
setJumpOpen(false)
}
// 点空白处收起跳转浮层(点按钮本身交给 toggleJump 处理)
useEffect(() => {
if (!jumpOpen) return undefined
const onPointerDown = (event) => {
if (jumpRef.current?.contains(event.target)) return
if (event.target.closest?.('.calendar-jump-btn')) return
setJumpOpen(false)
}
document.addEventListener('mousedown', onPointerDown)
return () => document.removeEventListener('mousedown', onPointerDown)
}, [jumpOpen])
// 滚动 / 缩放时跟着按钮走
useEffect(() => {
if (!jumpOpen) return undefined
const reposition = () => { if (jumpBtnRef.current) positionJump(jumpBtnRef.current) }
window.addEventListener('scroll', reposition, true)
window.addEventListener('resize', reposition)
return () => {
window.removeEventListener('scroll', reposition, true)
window.removeEventListener('resize', reposition)
}
}, [jumpOpen, positionJump])
const submitDraft = async (event) => { const submitDraft = async (event) => {
event.preventDefault() event.preventDefault()
const title = draft.title.trim() const title = draft.title.trim()
@@ -521,7 +586,7 @@ function CalendarBoard({ todos: seedTodos, onTodoCreated }) {
<h2><CalendarIcon size={18} /> 工作日历</h2> <h2><CalendarIcon size={18} /> 工作日历</h2>
<p className="calendar-hint">单击日期选中,再次单击添加日程 · 悬浮日程或节日查看详情</p> <p className="calendar-hint">单击日期选中,再次单击添加日程 · 悬浮日程或节日查看详情</p>
</div> </div>
<div className="calendar-toolbar"><button className="calendar-today-btn" onClick={resetMonth}>今天</button><button onClick={() => shiftMonth(-1)} aria-label="上个月">‹</button><strong>{monthLabel}</strong><button onClick={() => shiftMonth(1)} aria-label="下个月">›</button><button className="calendar-view-btn">月</button></div> <div className="calendar-toolbar"><button className="calendar-today-btn" onClick={resetMonth}>今天</button><button onClick={() => shiftMonth(-1)} aria-label="上个月">‹</button><strong>{monthLabel}</strong><button onClick={() => shiftMonth(1)} aria-label="下个月">›</button><button type="button" ref={jumpBtnRef} className={`calendar-jump-btn${jumpOpen ? ' is-open' : ''}`} onClick={toggleJump} aria-label="快速跳转日期" aria-expanded={jumpOpen} title="快速跳转日期"><CalendarIcon size={16} /></button></div>
</div> </div>
<div className="calendar-layout"> <div className="calendar-layout">
@@ -721,6 +786,42 @@ function CalendarBoard({ todos: seedTodos, onTodoCreated }) {
)} )}
</div> </div>
)} )}
{jumpOpen && jumpPos && (
<div
className="calendar-popover calendar-jump-pop"
ref={jumpRef}
role="dialog"
aria-label="快速跳转日期"
style={{
left: jumpPos.left,
top: jumpPos.top,
transform: jumpPos.placement === 'above' ? 'translateY(-100%)' : 'none'
}}
>
<div className="jump-head">
<button type="button" onClick={() => setJumpMonth(current => new Date(current.getFullYear(), current.getMonth() - 1, 1))} aria-label="上个月">‹</button>
<strong>{jumpMonth.getFullYear()}年{jumpMonth.getMonth() + 1}月</strong>
<button type="button" onClick={() => setJumpMonth(current => new Date(current.getFullYear(), current.getMonth() + 1, 1))} aria-label="下个月">›</button>
</div>
<div className="jump-week">{WEEKDAYS.map(day => <span key={day}>{day.slice(1)}</span>)}</div>
<div className="jump-grid">
{jumpDays.map(({ date, key, currentMonth }) => (
<button
type="button"
key={key}
className={`jump-day${currentMonth ? '' : ' is-outside'}${key === todayKey ? ' is-today' : ''}${key === selectedKey ? ' is-selected' : ''}`}
onClick={() => pickJumpDay(key)}
aria-label={describeDate(key)}
title={describeDate(key)}
>
{date.getDate()}
</button>
))}
</div>
<button type="button" className="jump-today" onClick={() => pickJumpDay(todayKey)}>回到今天</button>
</div>
)}
</section> </section>
) )
} }
@@ -755,7 +856,7 @@ function Dashboard() {
<div className="dashboard-content-grid"> <div className="dashboard-content-grid">
<div className="dashboard-primary-column"> <div className="dashboard-primary-column">
<section className="dashboard-panel ai-digest-panel"><div className="dashboard-panel-header"><div><span className="section-label">[AI BRIEFING]</span><h2><SparkIcon size={16} /> 今日工作摘要</h2></div><span className="panel-live-status"><i />实时</span></div><div className="ai-digest-body"><strong>系统已准备好协助你处理今天的业务。</strong><p>当前共有 <b>{stats.pendingTodos || 0}</b> 项待办、<b>{stats.activeDeals || 0}</b> 个进行中商机和 <b>{stats.orders || 0}</b> 笔进行中订单。打开右上角 AI 助手,可以直接用自然语言查阅和操作系统。</p><div className="digest-tags"><span>供应链</span><span>客户跟进</span><span>订单节奏</span></div></div></section> <section className="dashboard-panel ai-digest-panel"><div className="dashboard-panel-header"><div><span className="section-label">[AI BRIEFING]</span><h2><SparkIcon size={16} /> 今日工作摘要</h2></div><span className="panel-live-status"><i />实时</span></div><div className="ai-digest-body"><strong>系统已准备好协助你处理今天的业务。</strong><p>当前共有 <b>{stats.pendingTodos || 0}</b> 项待办、<b>{stats.activeDeals || 0}</b> 个进行中商机和 <b>{stats.orders || 0}</b> 笔进行中订单。打开右上角的小屁,可以直接用自然语言查阅和操作系统。</p><div className="digest-tags"><span>供应链</span><span>客户跟进</span><span>订单节奏</span></div></div></section>
<section className="dashboard-panel"><div className="dashboard-panel-header"><div><span className="section-label">[ACTIVITY LOG]</span><h2><ActivityIcon size={17} /> 最近活动</h2></div><button className="panel-link">查看日志</button></div>{recentActivities.length === 0 ? <div className="dashboard-empty">暂无最近活动</div> : <ul className="activity-list">{recentActivities.map(activity => <li key={activity.id} className="activity-item"><span className="activity-time">{new Date(activity.created_at).toLocaleString('zh-CN')}</span><div className="activity-content"><strong>{activity.subject}</strong><span>{activity.content}</span></div></li>)}</ul>}</section> <section className="dashboard-panel"><div className="dashboard-panel-header"><div><span className="section-label">[ACTIVITY LOG]</span><h2><ActivityIcon size={17} /> 最近活动</h2></div><button className="panel-link">查看日志</button></div>{recentActivities.length === 0 ? <div className="dashboard-empty">暂无最近活动</div> : <ul className="activity-list">{recentActivities.map(activity => <li key={activity.id} className="activity-item"><span className="activity-time">{new Date(activity.created_at).toLocaleString('zh-CN')}</span><div className="activity-content"><strong>{activity.subject}</strong><span>{activity.content}</span></div></li>)}</ul>}</section>
</div> </div>
+60 -30
View File
@@ -117,7 +117,8 @@ body { font-size: 14px; }
.drawer { border-radius: 22px 0 0 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; } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Settings shell: a single rounded, softly illuminated surface. */ /* Settings shell: a single rounded, softly illuminated surface. */
.settings-overlay { padding: 24px; background: rgba(4, 9, 18, .64); backdrop-filter: blur(9px); } /* 设置仍是模态,层级要压过「小屁」浮窗(z-index 78) */
.settings-overlay { z-index: 90; padding: 24px; background: rgba(4, 9, 18, .64); backdrop-filter: blur(9px); }
.settings-modal.luxury-settings { .settings-modal.luxury-settings {
position: relative; width: min(1020px, 100%); height: min(700px, calc(100dvh - 48px)); position: relative; width: min(1020px, 100%); height: min(700px, calc(100dvh - 48px));
display: flex; flex-direction: row; overflow: hidden; border: 0; display: flex; flex-direction: row; overflow: hidden; border: 0;
@@ -230,7 +231,7 @@ input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px
.global-search:focus-within { border-color: var(--primary-border); box-shadow: 0 0 0 3px var(--accent-glow); } .global-search:focus-within { border-color: var(--primary-border); box-shadow: 0 0 0 3px var(--accent-glow); }
.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 { 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 input:focus { box-shadow: none; }
.global-search kbd { margin-left: auto; padding: 2px 5px; color: var(--text-tertiary); background: var(--surface); border: 1px solid var(--border-light); border-radius: 5px; font: 10px var(--font-mono); } .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); }
/* ---- 已打开页面标签:搜索框后的快速跳转(参考 GoodJob 的顶部标签条) ---- */ /* ---- 已打开页面标签:搜索框后的快速跳转(参考 GoodJob 的顶部标签条) ---- */
.page-tabs { display: flex; align-items: center; gap: 3px; flex: 0 1 auto; min-width: 0; max-width: min(520px, 30vw); padding: 4px; border: 1px solid var(--border-light); border-radius: 11px; background: var(--surface-deep); overflow-x: auto; scrollbar-width: none; } .page-tabs { display: flex; align-items: center; gap: 3px; flex: 0 1 auto; min-width: 0; max-width: min(520px, 30vw); padding: 4px; border: 1px solid var(--border-light); border-radius: 11px; background: var(--surface-deep); overflow-x: auto; scrollbar-width: none; }
.page-tabs::-webkit-scrollbar { display: none; } .page-tabs::-webkit-scrollbar { display: none; }
@@ -283,28 +284,31 @@ input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px
.dashboard-panel-header h2 { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text-primary); font-size: 15px; } .dashboard-panel-header h2 { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text-primary); font-size: 15px; }
.dashboard-panel-header .section-label { margin-bottom: 7px; } .dashboard-panel-header .section-label { margin-bottom: 7px; }
.calendar-board { overflow: hidden; padding: 0; } .calendar-board { overflow: hidden; padding: 0; }
.calendar-board-header { padding: 15px 18px 12px; margin: 0; border-bottom: 1px solid var(--border-light); } .calendar-board-header { padding: 12px 16px 10px; margin: 0; border-bottom: 1px solid var(--border-light); }
.calendar-toolbar { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); } .calendar-toolbar { display: flex; align-items: center; gap: 7px; color: var(--text-secondary); }
.calendar-toolbar button { display: inline-grid; place-items: center; min-width: 30px; height: 30px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text-secondary); cursor: pointer; } .calendar-toolbar button { display: inline-grid; place-items: center; min-width: 28px; height: 28px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text-secondary); cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); }
.calendar-toolbar button:hover { background: var(--surface-hover); border-color: var(--border-light); color: var(--text-primary); } .calendar-toolbar button:hover { background: var(--surface-hover); border-color: var(--border-light); color: var(--text-primary); }
.calendar-toolbar strong { min-width: 94px; color: var(--text-primary); text-align: center; font-size: 13px; } .calendar-toolbar strong { min-width: 88px; color: var(--text-primary); text-align: center; font-size: 12.5px; }
.calendar-toolbar .calendar-today-btn, .calendar-toolbar .calendar-view-btn { padding: 0 9px; border-color: var(--border-light); background: var(--surface-deep); font-size: 11px; } .calendar-toolbar .calendar-today-btn { padding: 0 9px; border-color: var(--border-light); background: var(--surface-deep); font-size: 11px; }
/* 快速跳转日期:平时是低调的日历图标,悬浮/展开变蓝 */
.calendar-toolbar .calendar-jump-btn { border-color: var(--border-light); background: var(--surface-deep); }
.calendar-toolbar .calendar-jump-btn:hover, .calendar-toolbar .calendar-jump-btn.is-open { border-color: var(--primary); background: var(--primary); color: var(--surface-deep); box-shadow: 0 0 14px var(--accent-glow); }
.calendar-week-row, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); } .calendar-week-row, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-week-row { background: var(--surface-deep); border-bottom: 1px solid var(--border-light); } .calendar-week-row { background: var(--surface-deep); border-bottom: 1px solid var(--border-light); }
.calendar-week-row > div { padding: 7px 8px; color: var(--text-tertiary); font: 10px var(--font-mono); letter-spacing: .08em; } .calendar-week-row > div { padding: 5px 8px; color: var(--text-tertiary); font: 9.5px var(--font-mono); letter-spacing: .08em; }
.calendar-day { min-height: 72px; padding: 6px 7px; border-right: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); background: var(--surface); } .calendar-day { min-height: 60px; padding: 4px 6px; border-right: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); background: var(--surface); }
.calendar-day:nth-child(7n) { border-right: 0; } .calendar-day:nth-child(7n) { border-right: 0; }
.calendar-day.is-outside { background: var(--surface-deep); opacity: .58; } .calendar-day.is-outside { background: var(--surface-deep); opacity: .58; }
.calendar-day.is-today { background: linear-gradient(180deg, var(--primary-bg), var(--surface)); } .calendar-day.is-today { background: linear-gradient(180deg, var(--primary-bg), var(--surface)); }
.calendar-day-number { display: inline-grid; place-items: center; min-width: 19px; height: 19px; color: var(--text-secondary); font: 11px var(--font-mono); transition: background var(--transition-base), color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base); } .calendar-day-number { display: inline-grid; place-items: center; min-width: 17px; height: 17px; color: var(--text-secondary); font: 10px var(--font-mono); transition: background var(--transition-base), color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base); }
.calendar-day.is-today .calendar-day-number { border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--primary); color: var(--primary-light); font-weight: 800; } .calendar-day.is-today .calendar-day-number { border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--primary); color: var(--primary-light); font-weight: 800; }
.calendar-events { display: grid; gap: 3px; margin-top: 4px; } .calendar-events { display: grid; gap: 2px; margin-top: 2px; }
.calendar-event { display: block; overflow: hidden; padding: 2px 5px; border-left: 2px solid var(--primary); border-radius: 3px; background: var(--primary-bg); color: var(--text-secondary); font-size: 10px; line-height: 1.28; text-overflow: ellipsis; white-space: nowrap; } .calendar-event { display: block; overflow: hidden; padding: 1px 5px; border-left: 2px solid var(--primary); border-radius: 3px; background: var(--primary-bg); color: var(--text-secondary); font-size: 9.5px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.calendar-event.danger { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); } .calendar-event.danger { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
.calendar-event.holiday { border-color: var(--success); background: var(--success-bg); color: var(--success); } .calendar-event.holiday { border-color: var(--success); background: var(--success-bg); color: var(--success); }
/* ---------- 工作日历交互:单击选中 → 再次单击添加日程;悬浮日程/节日看详情 ---------- */ /* ---------- 工作日历交互:单击选中 → 再次单击添加日程;悬浮日程/节日看详情 ---------- */
.calendar-hint { margin: 7px 0 0; color: var(--text-tertiary); font-size: 11px; line-height: 1.4; } .calendar-hint { margin: 5px 0 0; color: var(--text-tertiary); font-size: 10.5px; line-height: 1.4; }
.calendar-day { position: relative; cursor: pointer; transition: background var(--transition-fast), box-shadow var(--transition-fast); } .calendar-day { position: relative; cursor: pointer; transition: background var(--transition-fast), box-shadow var(--transition-fast); }
.calendar-day:hover { background: var(--surface-hover); } .calendar-day:hover { background: var(--surface-hover); }
.calendar-day.is-outside:hover { background: var(--surface-alt); opacity: .82; } .calendar-day.is-outside:hover { background: var(--surface-alt); opacity: .82; }
@@ -336,8 +340,10 @@ input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px
.calendar-side-empty { margin: 0; padding: 14px 0 8px; color: var(--text-tertiary); font-size: 11.5px; text-align: center; } .calendar-side-empty { margin: 0; padding: 14px 0 8px; color: var(--text-tertiary); font-size: 11.5px; text-align: center; }
/* 今日 to do */ /* 今日 to do */
.calendar-side-block.is-memo { display: flex; flex-direction: column; flex: 1 1 auto; } /* 两块按列高平分(to do 略高),列表自己滚,不再缩在角落留一片空地 */
.memo-list { display: grid; gap: 1px; margin: 0 0 8px; padding: 0; max-height: 206px; overflow-y: auto; list-style: none; } .calendar-side-block.is-memo { display: flex; flex-direction: column; flex: 1 1 58%; min-height: 0; }
.calendar-side-block.is-day { display: flex; flex-direction: column; flex: 1 1 42%; min-height: 0; }
.memo-list { display: grid; gap: 1px; flex: 1 1 auto; min-height: 0; margin: 0 0 8px; padding: 0; overflow-y: auto; list-style: none; }
.memo-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 4px 6px 5px; border-radius: var(--radius-sm); animation: memo-item-in 180ms cubic-bezier(.2, .8, .2, 1); } .memo-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 4px 6px 5px; border-radius: var(--radius-sm); animation: memo-item-in 180ms cubic-bezier(.2, .8, .2, 1); }
@keyframes memo-item-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } } @keyframes memo-item-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.memo-item:hover { background: var(--surface-hover); } .memo-item:hover { background: var(--surface-hover); }
@@ -359,7 +365,7 @@ input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px
.memo-add input::placeholder { color: var(--text-disabled); } .memo-add input::placeholder { color: var(--text-disabled); }
/* 选中日待办 */ /* 选中日待办 */
.day-list { display: grid; gap: 7px; margin: 0; padding: 0; max-height: 224px; overflow-y: auto; list-style: none; } .day-list { display: grid; align-content: start; gap: 7px; flex: 1 1 auto; min-height: 0; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.day-item { display: flex; gap: 8px; padding: 8px 9px; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--surface); } .day-item { display: flex; gap: 8px; padding: 8px 9px; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--surface); }
.day-item.is-holiday { border-color: var(--success-border); background: var(--success-bg); } .day-item.is-holiday { border-color: var(--success-border); background: var(--success-bg); }
.day-item.is-done { opacity: .58; } .day-item.is-done { opacity: .58; }
@@ -412,6 +418,24 @@ input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px
.calendar-tip-note { margin: 9px 0 0; padding-top: 9px; border-top: 1px solid var(--border-light); color: var(--text-secondary); font-size: 11px; line-height: 1.55; } .calendar-tip-note { margin: 9px 0 0; padding-top: 9px; border-top: 1px solid var(--border-light); color: var(--text-secondary); font-size: 11px; line-height: 1.55; }
.calendar-tip-more { display: grid; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-light); } .calendar-tip-more { display: grid; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-light); }
.calendar-tip-more span { color: var(--text-secondary); font-size: 11px; line-height: 1.4; } .calendar-tip-more span { color: var(--text-secondary); font-size: 11px; line-height: 1.4; }
.calendar-side-block.is-day .calendar-side-empty { display: grid; place-items: center; flex: 1 1 auto; padding: 10px 0; }
/* ---------- 快速跳转日期浮层(工具条上的小日历按钮) ---------- */
.calendar-jump-pop { z-index: 82; width: min(262px, calc(100vw - 24px)); padding: 10px 10px 9px; }
.jump-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 7px; }
.jump-head button { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--text-secondary); cursor: pointer; }
.jump-head button:hover { border-color: var(--border-light); background: var(--surface-hover); color: var(--text-primary); }
.jump-head strong { flex: 1; color: var(--text-primary); text-align: center; font-size: 12px; }
.jump-week, .jump-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.jump-week span { padding: 3px 0; color: var(--text-tertiary); text-align: center; font: 9.5px var(--font-mono); }
.jump-grid { gap: 1px; }
.jump-day { display: grid; place-items: center; height: 27px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--text-secondary); font: 11px var(--font-mono); cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); }
.jump-day:hover { border-color: var(--primary-border); background: var(--primary-bg); color: var(--primary-light); }
.jump-day.is-outside { color: var(--text-disabled); }
.jump-day.is-today { box-shadow: inset 0 0 0 1.5px var(--primary); color: var(--primary-light); font-weight: 800; }
.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); }
.dashboard-content-grid { display: grid; grid-template-columns: minmax(0, 1.52fr) minmax(280px, .72fr); gap: 18px; align-items: start; } .dashboard-content-grid { display: grid; grid-template-columns: minmax(0, 1.52fr) minmax(280px, .72fr); gap: 18px; align-items: start; }
.dashboard-primary-column, .dashboard-secondary-column { min-width: 0; } .dashboard-primary-column, .dashboard-secondary-column { min-width: 0; }
.ai-digest-panel { background: linear-gradient(135deg, color-mix(in srgb, var(--primary-bg) 82%, var(--surface)), var(--surface)); } .ai-digest-panel { background: linear-gradient(135deg, color-mix(in srgb, var(--primary-bg) 82%, var(--surface)), var(--surface)); }
@@ -441,20 +465,26 @@ input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px
.completion-legend .done { color: var(--primary); }.completion-legend .pending { color: var(--text-disabled); } .completion-legend .done { color: var(--primary); }.completion-legend .pending { color: var(--text-disabled); }
.quick-panel > button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 0; border: 0; border-top: 1px solid var(--border-light); background: transparent; color: var(--text-secondary); cursor: pointer; text-align: left; font-size: 12px; }.quick-panel > button:hover { color: var(--primary-light); } .quick-panel > button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 0; border: 0; border-top: 1px solid var(--border-light); background: transparent; color: var(--text-secondary); cursor: pointer; text-align: left; font-size: 12px; }.quick-panel > button:hover { color: var(--primary-light); }
/* AI assistant drawer */ /* AI assistant —— 右上角浮动小窗。没有遮罩、不 inert 主界面,可以边聊边自己点系统 */
.assistant-layer { position: fixed; inset: 0; z-index: 80; background: rgba(3, 8, 15, .46); backdrop-filter: blur(5px); } .ai-window { position: fixed; top: calc(var(--header-height) + 14px); right: 16px; z-index: 78; display: flex; flex-direction: column; width: min(348px, calc(100vw - 24px)); max-height: min(560px, calc(100vh - var(--header-height) - 28px)); overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: 0 22px 60px rgba(0, 0, 0, .34), inset 0 1px 0 var(--panel-highlight); animation: ai-window-in 200ms var(--ease-out); }
.ai-assistant-panel { position: absolute; top: 14px; right: 14px; bottom: 14px; display: flex; flex-direction: column; width: min(430px, calc(100vw - 28px)); overflow: hidden; border: 1px solid var(--border-light); border-radius: 22px; background: var(--surface); box-shadow: 0 28px 80px rgba(0,0,0,.36), inset 0 1px 0 var(--panel-highlight); animation: assistant-in 220ms var(--ease-out); } @keyframes ai-window-in { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes assistant-in { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: translateX(0); } } .ai-window.is-minimized { width: min(258px, calc(100vw - 24px)); }
.ai-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 14px; } .ai-window-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 9px 9px 12px; border-bottom: 1px solid var(--border-light); background: var(--surface-deep); cursor: grab; touch-action: none; user-select: none; }
.ai-panel-title { display: flex; align-items: center; gap: 11px; }.ai-panel-title h2 { margin: 0; font-size: 21px; }.ai-panel-title .section-label { margin-bottom: 4px; } .ai-window-bar:active { cursor: grabbing; }
.ai-orb { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 15px; color: var(--primary-light); background: var(--primary-bg); box-shadow: 0 0 20px var(--accent-glow); } .ai-window.is-minimized .ai-window-bar { border-bottom: 0; }
.ai-close-btn { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--surface-deep); color: var(--text-secondary); cursor: pointer; }.ai-close-btn:hover { background: var(--surface-hover); color: var(--text-primary); } .ai-window-actions { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.ai-access-banner { display: flex; align-items: center; gap: 10px; margin: 0 20px 14px; padding: 10px 12px; border: 1px solid var(--primary-border); border-radius: 12px; background: var(--primary-bg); }.ai-access-banner strong, .ai-access-banner small { display: block; }.ai-access-banner strong { color: var(--text-primary); font-size: 12px; }.ai-access-banner small { margin-top: 3px; color: var(--text-secondary); font-size: 10px; }.ai-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px var(--success); } .ai-icon-btn { display: grid; place-items: center; width: 25px; height: 25px; padding: 0; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--text-tertiary); cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); }
.ai-panel-body { flex: 1; overflow-y: auto; padding: 0 20px 16px; }.ai-capability-card { padding: 13px; border-radius: 14px; background: var(--surface-deep); box-shadow: inset 0 1px 0 var(--panel-highlight); }.ai-capability-heading { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; color: var(--primary-light); font-size: 12px; font-weight: 700; }.ai-capability-row { display: flex; gap: 7px; padding: 4px 0; color: var(--text-secondary); font-size: 11px; }.ai-capability-row span { color: var(--success); } .ai-icon-btn:hover { border-color: var(--border-light); background: var(--surface-hover); color: var(--text-primary); }
.ai-panel-title { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ai-panel-title h2 { margin: 0; font-size: 15px; }
.ai-panel-title .section-label { margin-bottom: 1px; font-size: 8.5px; }
.ai-orb { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 10px; color: var(--primary-light); background: var(--primary-bg); box-shadow: 0 0 16px var(--accent-glow); }
.ai-access-banner { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--primary-border); border-radius: 10px; background: var(--primary-bg); }.ai-access-banner strong, .ai-access-banner small { display: block; }.ai-access-banner strong { color: var(--text-primary); font-size: 11.5px; }.ai-access-banner small { margin-top: 2px; color: var(--text-secondary); font-size: 9.5px; }.ai-live-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px var(--success); }
.ai-panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 13px; }.ai-capability-card { padding: 10px 11px; border-radius: 11px; background: var(--surface-deep); box-shadow: inset 0 1px 0 var(--panel-highlight); }.ai-capability-heading { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; color: var(--primary-light); font-size: 11.5px; font-weight: 700; }.ai-capability-row { display: flex; gap: 7px; padding: 3px 0; color: var(--text-secondary); font-size: 10.5px; }.ai-capability-row span { color: var(--success); }
.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-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: 13px; margin-top: 14px; }.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: 9px 11px; border-radius: 4px 13px 13px 13px; background: var(--surface-deep); }.ai-message.user .ai-message-content { border-radius: 13px 4px 13px 13px; background: var(--primary-bg); }.ai-message-content p { margin: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.7; }.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: 34px; }.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-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: 8px 20px; overflow-x: auto; }.ai-suggestion-row button { flex: 0 0 auto; padding: 6px 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-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: 10px 16px; border-top: 1px solid var(--border-light); }.ai-input-row input { min-height: 40px; background: var(--surface-deep); }.ai-input-row button { display: grid; place-items: center; width: 40px; min-width: 40px; border: 0; border-radius: 11px; background: var(--primary); color: var(--surface-deep); cursor: pointer; }.ai-input-row button:disabled { cursor: not-allowed; opacity: .4; }.ai-panel-footer { padding: 8px 20px 13px; color: var(--text-tertiary); font-size: 10px; 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; 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; }
/* ---------- 汇率计算器(顶栏) ---------- */ /* ---------- 汇率计算器(顶栏) ---------- */
.fx-calc { position: relative; flex: 0 0 auto; } .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; } .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; }
@@ -523,7 +553,7 @@ input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px
.calendar-toolbar { justify-content: space-between; } .calendar-toolbar { justify-content: space-between; }
} }
@media (max-width: 980px) { .global-header-brand { min-width: auto; }.global-header-brand div { display: none; }.global-search { width: min(360px, 40vw); }.clock-zone, .clock-caret { display: none; }.dashboard-content-grid { grid-template-columns: 1fr; }.dashboard-secondary-column { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }.dashboard-secondary-column .dashboard-panel { margin-bottom: 0; } } @media (max-width: 980px) { .global-header-brand { min-width: auto; }.global-header-brand div { display: none; }.global-search { width: min(360px, 40vw); }.clock-zone, .clock-caret { display: none; }.dashboard-content-grid { grid-template-columns: 1fr; }.dashboard-secondary-column { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }.dashboard-secondary-column .dashboard-panel { margin-bottom: 0; } }
@media (max-width: 680px) { :root { --header-height: 62px; }.global-header { gap: 8px; padding: 0 12px; }.global-search { display: none; }.global-search.is-open { position: absolute; left: 12px; right: 12px; top: 65px; display: flex; width: auto; background: var(--surface); }.mobile-search-btn { display: inline-flex; }.quick-create-btn span, .ai-entry-btn span, .header-clock { display: none; }.ai-entry-btn { padding: 8px; }.fx-panel { position: fixed; top: calc(var(--header-height) + 8px); left: 12px; right: 12px; width: auto; max-height: calc(100vh - var(--header-height) - 24px); overflow-y: auto; }.route-content { min-height: calc(100vh - var(--header-height)); padding: 22px 12px 42px; }.dashboard-welcome { align-items: flex-start; flex-direction: column; }.calendar-day { min-height: 58px; padding: 5px 4px; }.calendar-week-row > div { padding: 6px 4px; }.calendar-event { font-size: 9px; }.calendar-day-number { font-size: 10px; }.calendar-side-block { padding: 12px; }.memo-list, .day-list { max-height: 168px; }.dashboard-secondary-column { display: block; }.dashboard-secondary-column .dashboard-panel { margin-bottom: 18px; }.ai-assistant-panel { top: 8px; right: 8px; bottom: 8px; width: calc(100vw - 16px); } } @media (max-width: 680px) { :root { --header-height: 62px; }.global-header { gap: 8px; padding: 0 12px; }.global-search { display: none; }.global-search.is-open { position: absolute; left: 12px; right: 12px; top: 65px; display: flex; width: auto; background: var(--surface); }.mobile-search-btn { display: inline-flex; }.quick-create-btn span, .ai-entry-btn span, .header-clock { display: none; }.ai-entry-btn { padding: 8px; }.fx-panel { position: fixed; top: calc(var(--header-height) + 8px); left: 12px; right: 12px; width: auto; max-height: calc(100vh - var(--header-height) - 24px); overflow-y: auto; }.route-content { min-height: calc(100vh - var(--header-height)); padding: 22px 12px 42px; }.dashboard-welcome { align-items: flex-start; flex-direction: column; }.calendar-day { min-height: 48px; padding: 3px 4px; }.calendar-week-row > div { padding: 4px 4px; }.calendar-event { font-size: 8.5px; }.calendar-day-number { font-size: 9.5px; }.calendar-side-block { padding: 12px; }.memo-list, .day-list { max-height: 180px; }.dashboard-secondary-column { display: block; }.dashboard-secondary-column .dashboard-panel { margin-bottom: 18px; }.ai-window { top: calc(var(--header-height) + 8px); right: 8px; width: calc(100vw - 16px); max-height: min(64vh, 460px); } }
/* Requested compact navigation controls. */ /* Requested compact navigation controls. */
.collapse-btn { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--sb-border); border-radius: 8px; background: transparent; color: var(--sb-text); box-shadow: none; } .collapse-btn { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--sb-border); border-radius: 8px; background: transparent; color: var(--sb-text); box-shadow: none; }