From 4c3ec995b6c4f4ae5c6a0aa4eb67d7d4612f7622 Mon Sep 17 00:00:00 2001 From: Drsakura Date: Thu, 10 Sep 2026 23:56:52 +0800 Subject: [PATCH] =?UTF-8?q?feat(workspace):=20=E6=97=A5=E5=8E=86=E5=86=8D?= =?UTF-8?q?=E7=98=A6=E8=BA=AB=20+=20=E5=8F=B3=E4=BE=A7=E9=9D=A2=E6=9D=BF?= =?UTF-8?q?=E7=AD=89=E9=AB=98=E5=A1=AB=E6=BB=A1=20+=20=E6=97=A5=E6=9C=9F?= =?UTF-8?q?=E8=B7=B3=E8=BD=AC=E6=8C=89=E9=92=AE=20+=20=E5=B0=8F=E5=B1=81?= =?UTF-8?q?=E6=B5=AE=E7=AA=97=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 日历 - 单元格 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 宽度下不再折成两行 --- frontend/src/App.jsx | 3 +- frontend/src/components/AIAssistant.jsx | 150 ++++++++++++++++++----- frontend/src/components/GlobalHeader.jsx | 2 +- frontend/src/components/Icons.jsx | 6 + frontend/src/pages/Dashboard.jsx | 105 +++++++++++++++- frontend/src/styles/luxury.css | 90 +++++++++----- 6 files changed, 294 insertions(+), 62 deletions(-) diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 8d90e70..08efbc9 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -57,7 +57,8 @@ function App() { return (
-
+ {/* 只有设置是模态；「小屁」是浮窗，不能再 inert 主界面，否则没法边聊边操作 */} +
{/* 顶栏横跨整宽，压在侧边栏之上 */} setAssistantOpen(true)} /> diff --git a/frontend/src/components/AIAssistant.jsx b/frontend/src/components/AIAssistant.jsx index 4a2a65c..1a4c6c0 100644 --- a/frontend/src/components/AIAssistant.jsx +++ b/frontend/src/components/AIAssistant.jsx @@ -1,25 +1,58 @@ import React, { useEffect, useMemo, useRef, useState } from 'react' 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 = [ - { 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 }) { const [messages, setMessages] = useState(starterMessages) const [input, setInput] = useState('') const [context, setContext] = useState(null) const [loading, setLoading] = useState(false) + const [minimized, setMinimized] = useState(false) + const [pos, setPos] = useState(readStoredPos) + const inputRef = useRef(null) - const panelRef = useRef(null) + const winRef = useRef(null) + const dragRef = useRef(null) useEffect(() => { - if (!isOpen) return - inputRef.current?.focus() - const onKeyDown = (event) => { - if (event.key === 'Escape') onClose() - } + if (isOpen && !minimized) inputRef.current?.focus() + }, [isOpen, minimized]) + + // Esc 只收窗，不做任何全局拦截 + useEffect(() => { + if (!isOpen) return undefined + const onKeyDown = (event) => { if (event.key === 'Escape') onClose() } window.addEventListener('keydown', onKeyDown) return () => window.removeEventListener('keydown', onKeyDown) }, [isOpen, onClose]) @@ -29,11 +62,41 @@ function AIAssistant({ isOpen, onClose }) { axios.get('/api/assistant/context').then(response => setContext(response.data)).catch(() => setContext(null)) }, [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(() => [ '读取全局业务概览与实时统计', '检索客户、供应商、产品和订单', '查看商机、待办与近期活动', - '发起已授权的新增、更新和状态操作', + '发起已授权的新增、更新和状态操作' ], []) if (!isOpen) return null @@ -56,29 +119,60 @@ function AIAssistant({ isOpen, onClose }) { } return ( -
- ) } diff --git a/frontend/src/components/GlobalHeader.jsx b/frontend/src/components/GlobalHeader.jsx index 8dc9ab9..786ba6a 100644 --- a/frontend/src/components/GlobalHeader.jsx +++ b/frontend/src/components/GlobalHeader.jsx @@ -116,7 +116,7 @@ function GlobalHeader({ onOpenAssistant }) { ) })} -
+
) } diff --git a/frontend/src/components/Icons.jsx b/frontend/src/components/Icons.jsx index 2a6b551..9eea668 100644 --- a/frontend/src/components/Icons.jsx +++ b/frontend/src/components/Icons.jsx @@ -118,6 +118,12 @@ export const CalendarIcon = ({ size = 20, className = '' }) => ( ) +export const MinusIcon = ({ size = 20, className = '' }) => ( + +) + export const BellIcon = ({ size = 20, className = '' }) => ( diff --git a/frontend/src/pages/Dashboard.jsx b/frontend/src/pages/Dashboard.jsx index 3a849f6..060b4b6 100644 --- a/frontend/src/pages/Dashboard.jsx +++ b/frontend/src/pages/Dashboard.jsx @@ -28,6 +28,8 @@ const PRIORITY_LABELS = { high: '高', medium: '中', low: '低' } const COMPOSER_WIDTH = 306 const TIP_WIDTH = 268 +const JUMP_WIDTH = 262 +const JUMP_HEIGHT = 292 const MAX_CELL_EVENTS = 2 // 春节（农历正月初一）公历日期，逐年查表；2025–2035 与天文台公布数据一致。 @@ -297,9 +299,15 @@ function CalendarBoard({ todos: seedTodos, onTodoCreated }) { const [draft, setDraft] = useState({ title: '', priority: 'medium', description: '' }) const [saving, setSaving] = useState(false) 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 tipRef = useRef(null) + const jumpRef = useRef(null) + const jumpBtnRef = useRef(null) const anchorElRef = useRef(null) const pendingSelectRef = useRef(null) @@ -372,6 +380,16 @@ function CalendarBoard({ todos: seedTodos, onTodoCreated }) { const activeKey = selectedKey || todayKey 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(() => { setComposerKey(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 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) => { event.preventDefault() const title = draft.title.trim() @@ -521,7 +586,7 @@ function CalendarBoard({ todos: seedTodos, onTodoCreated }) {

工作日历

单击日期选中，再次单击添加日程 · 悬浮日程或节日查看详情

-
{monthLabel}
+
{monthLabel}
@@ -721,6 +786,42 @@ function CalendarBoard({ todos: seedTodos, onTodoCreated }) { )}
)} + + {jumpOpen && jumpPos && ( +
+
+ + {jumpMonth.getFullYear()}年{jumpMonth.getMonth() + 1}月 + +
+
{WEEKDAYS.map(day => {day.slice(1)})}
+
+ {jumpDays.map(({ date, key, currentMonth }) => ( + + ))} +
+ +
+ )} ) } @@ -755,7 +856,7 @@ function Dashboard() {
-
[AI BRIEFING]

今日工作摘要

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

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

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

今日工作摘要

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

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

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

最近活动

{recentActivities.length === 0 ?
暂无最近活动
:
    {recentActivities.map(activity =>
  • {new Date(activity.created_at).toLocaleString('zh-CN')}
    {activity.subject}{activity.content}
    • )}
}
diff --git a/frontend/src/styles/luxury.css b/frontend/src/styles/luxury.css index eb2bb6a..1f81b8a 100644 --- a/frontend/src/styles/luxury.css +++ b/frontend/src/styles/luxury.css @@ -117,7 +117,8 @@ body { font-size: 14px; } .drawer { border-radius: 22px 0 0 22px; } 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-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 { position: relative; width: min(1020px, 100%); height: min(700px, calc(100dvh - 48px)); 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 input { min-width: 0; min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--text-primary); } .global-search input:focus { box-shadow: none; } -.global-search kbd { margin-left: auto; 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 的顶部标签条） ---- */ .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; } @@ -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 .section-label { margin-bottom: 7px; } .calendar-board { overflow: hidden; padding: 0; } -.calendar-board-header { padding: 15px 18px 12px; margin: 0; border-bottom: 1px solid var(--border-light); } -.calendar-toolbar { display: flex; align-items: center; gap: 8px; 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-board-header { padding: 12px 16px 10px; margin: 0; border-bottom: 1px solid var(--border-light); } +.calendar-toolbar { display: flex; align-items: center; gap: 7px; color: var(--text-secondary); } +.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 strong { min-width: 94px; color: var(--text-primary); text-align: center; font-size: 13px; } -.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 strong { min-width: 88px; color: var(--text-primary); text-align: center; font-size: 12.5px; } +.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 { 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-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-week-row > div { padding: 5px 8px; color: var(--text-tertiary); font: 9.5px var(--font-mono); letter-spacing: .08em; } +.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.is-outside { background: var(--surface-deep); opacity: .58; } .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-events { display: grid; gap: 3px; margin-top: 4px; } -.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-events { display: grid; gap: 2px; margin-top: 2px; } +.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.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:hover { background: var(--surface-hover); } .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; } /* 今日 to do */ -.calendar-side-block.is-memo { display: flex; flex-direction: column; flex: 1 1 auto; } -.memo-list { display: grid; gap: 1px; margin: 0 0 8px; padding: 0; max-height: 206px; overflow-y: auto; list-style: none; } +/* 两块按列高平分（to do 略高），列表自己滚，不再缩在角落留一片空地 */ +.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); } @keyframes memo-item-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } } .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); } /* 选中日待办 */ -.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.is-holiday { border-color: var(--success-border); background: var(--success-bg); } .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-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-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-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)); } @@ -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); } .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 */ -.assistant-layer { position: fixed; inset: 0; z-index: 80; background: rgba(3, 8, 15, .46); backdrop-filter: blur(5px); } -.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 assistant-in { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: translateX(0); } } -.ai-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 14px; } -.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-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-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-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-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 assistant —— 右上角浮动小窗。没有遮罩、不 inert 主界面，可以边聊边自己点系统 */ +.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); } +@keyframes ai-window-in { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } } +.ai-window.is-minimized { width: min(258px, calc(100vw - 24px)); } +.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-window-bar:active { cursor: grabbing; } +.ai-window.is-minimized .ai-window-bar { border-bottom: 0; } +.ai-window-actions { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; } +.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-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-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-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-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-message-list { display: grid; gap: 11px; margin-top: 12px; }.ai-message { display: flex; align-items: flex-start; gap: 8px; }.ai-message.user { flex-direction: row-reverse; }.ai-message-avatar { display: grid; place-items: center; width: 25px; height: 25px; flex: 0 0 25px; border-radius: 9px; background: var(--surface-deep); color: var(--primary-light); font-size: 10px; font-weight: 800; }.ai-message.user .ai-message-avatar { color: var(--surface-deep); background: var(--primary); }.ai-message-content { max-width: 82%; padding: 8px 10px; border-radius: 4px 12px 12px 12px; background: var(--surface-deep); }.ai-message.user .ai-message-content { border-radius: 12px 4px 12px 12px; background: var(--primary-bg); }.ai-message-content p { margin: 0; color: var(--text-secondary); font-size: 11.5px; line-height: 1.65; }.ai-message-content small { display: block; margin-top: 5px; color: var(--text-tertiary); font: 9px var(--font-mono); }.ai-thinking { display: flex; gap: 4px; align-items: center; min-height: 32px; }.ai-thinking span { width: 5px; height: 5px; border-radius: 50%; background: var(--primary); animation: ai-bounce 1s infinite ease-in-out; }.ai-thinking span:nth-child(2) { animation-delay: .15s; }.ai-thinking span:nth-child(3) { animation-delay: .3s; }@keyframes ai-bounce { 0%,80%,100% { transform: translateY(0); opacity:.45; } 40% { transform: translateY(-4px); opacity:1; } } +.ai-suggestion-row { display: flex; gap: 7px; padding: 7px 13px; overflow-x: auto; }.ai-suggestion-row button { flex: 0 0 auto; padding: 5px 9px; border: 1px solid var(--border-light); border-radius: 99px; background: var(--surface-deep); color: var(--text-secondary); cursor: pointer; font-size: 10px; }.ai-suggestion-row button:hover { color: var(--primary-light); border-color: var(--primary-border); } +.ai-input-row { display: flex; gap: 8px; padding: 9px 12px; border-top: 1px solid var(--border-light); }.ai-input-row input { min-height: 36px; background: var(--surface-deep); }.ai-input-row button { display: grid; place-items: center; width: 36px; min-width: 36px; border: 0; border-radius: 10px; background: var(--primary); color: var(--surface-deep); cursor: pointer; }.ai-input-row button:disabled { cursor: not-allowed; opacity: .4; }.ai-panel-footer { padding: 6px 13px 10px; color: var(--text-tertiary); font-size: 9.5px; text-align: center; } /* ---------- 汇率计算器（顶栏） ---------- */ .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; } @@ -523,7 +553,7 @@ input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px .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: 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. */ .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; }