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:
@@ -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)} />
|
||||||
|
|
||||||
|
|||||||
@@ -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>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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" />
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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; }
|
||||||
|
|||||||
Reference in New Issue
Block a user