diff --git a/.gitignore b/.gitignore index 6f80278..67173cf 100644 --- a/.gitignore +++ b/.gitignore @@ -12,9 +12,9 @@ build/ !.env.example # ---------- 数据库与运行时数据 ---------- -backend/data/*.db -backend/data/*.db-* -backend/data/*.sqlite* +# backend/data/ 放的是运行时产物（trade.db、汇率缓存 fx-cache.json 等）， +# 全是本机生成的数据，一律不入库；新环境部署时由服务自动创建。 +backend/data/ backend/uploads/ # ---------- 日志 ---------- diff --git a/backend/lib/fx.js b/backend/lib/fx.js new file mode 100644 index 0000000..ae8f729 --- /dev/null +++ b/backend/lib/fx.js @@ -0,0 +1,202 @@ +/** + * happy 出口通 —— 汇率取数 + * + * 目标：给顶栏的汇率计算器提供**任意两种货币之间**的换算汇率。 + * + * 设计要点： + * 1. 所有汇率统一以 USD 为基准存取（rates[X] = 1 USD 值多少 X）， + * 任意币种对 (from → to) 用 rates[to] / rates[from] 即可算出交叉汇率。 + * 2. 两个公开数据源按顺序尝试，任一成功即用： + * - open.er-api.com 免费无需 key，约 160+ 币种，带更新日期 + * - frankfurter.app 欧洲央行数据，约 30 币种，权威但覆盖面小 + * 3. 结果写内存 + 落盘（backend/data/fx-cache.json，该目录已 gitignore）。 + * 重启后仍能立刻给出上次的汇率，不必等网络。 + * 4. 网络彻底不可用时回退内置离线汇率表，并在响应里标注 source='offline'， + * 让前端能明确提示「这是离线参考值」。宁可给一个标清楚来源的估算， + * 也不要让计算器变成一块空白。 + */ +const fs = require('fs'); +const path = require('path'); + +const DATA_DIR = path.join(__dirname, '..', 'data'); +const CACHE_FILE = path.join(DATA_DIR, 'fx-cache.json'); + +/** 内存缓存的保鲜期：1 小时后下次访问会去拉新数据。 */ +const TTL_MS = 60 * 60 * 1000; +/** 单个数据源的超时。 */ +const TIMEOUT_MS = 8000; +const USER_AGENT = 'happy-export-fx'; + +/* ------------------------------ 数据源 ------------------------------ */ + +/** + * 每个数据源负责把自家返回体归一成 { rates, updatedAt }。 + * rates 必须以 USD 为基准，键为大写三位币种码。 + */ +const PROVIDERS = [ + { + id: 'open.er-api.com', + label: 'ExchangeRate-API', + url: 'https://open.er-api.com/v6/latest/USD', + pick(json) { + if (!json || json.result === 'error' || !json.rates) return null; + const unix = Number(json.time_last_update_unix); + return { + rates: json.rates, + // 这个源会给到精确到秒的更新时间；没有就退回 next_update 或当前时间 + updatedAt: Number.isFinite(unix) && unix > 0 + ? new Date(unix * 1000).toISOString() + : new Date().toISOString() + }; + } + }, + { + id: 'frankfurter.app', + label: 'Frankfurter（欧洲央行）', + url: 'https://api.frankfurter.app/latest?from=USD', + pick(json) { + if (!json || !json.rates) return null; + return { + // 这个源不返回基准货币自身，补上 USD: 1 + rates: { USD: 1, ...json.rates }, + updatedAt: json.date ? new Date(`${json.date}T00:00:00Z`).toISOString() : new Date().toISOString() + }; + } + } +]; + +/** + * 离线兜底汇率（1 USD 值多少目标币）。 + * 仅在两个数据源都拿不到、且本地也没有任何历史缓存时启用。 + * 数值是写这份代码时的市场中间价量级，只适合粗估，响应里会明确标注。 + */ +const OFFLINE_RATES = { + USD: 1, + CNY: 7.10, HKD: 7.80, TWD: 32.2, JPY: 152, KRW: 1360, SGD: 1.34, + EUR: 0.92, GBP: 0.78, CHF: 0.88, SEK: 10.5, NOK: 10.7, DKK: 6.88, + PLN: 3.95, CZK: 23.0, TRY: 34.0, RUB: 92.0, + AUD: 1.51, NZD: 1.64, CAD: 1.37, MXN: 18.5, BRL: 5.55, ARS: 950, CLP: 930, + INR: 83.5, PKR: 278, BDT: 118, LKR: 300, NPR: 134, VND: 24800, + THB: 34.5, MYR: 4.45, IDR: 15600, PHP: 56.5, KHR: 4100, MMK: 2100, + AED: 3.6725, SAR: 3.75, QAR: 3.64, KWD: 0.307, OMR: 0.385, ILS: 3.72, + EGP: 48.5, ZAR: 18.2, NGN: 1600, KES: 129, MAD: 9.85, TZS: 2700, + UAH: 41.0, RON: 4.58, HUF: 360, BGN: 1.80, ISK: 138, GEL: 2.72 +}; + +/* ------------------------------ 工具 ------------------------------ */ + +/** 只保留「键是 3 位字母、值是正数」的条目，顺手统一成大写。 */ +function sanitizeRates(raw) { + const out = {}; + if (!raw || typeof raw !== 'object') return out; + for (const [key, value] of Object.entries(raw)) { + const code = String(key).trim().toUpperCase(); + const num = Number(value); + if (/^[A-Z]{3}$/.test(code) && Number.isFinite(num) && num > 0) out[code] = num; + } + out.USD = 1; + return out; +} + +function readDiskCache() { + try { + const parsed = JSON.parse(fs.readFileSync(CACHE_FILE, 'utf8')); + const rates = sanitizeRates(parsed && parsed.rates); + if (Object.keys(rates).length > 1) { + return { + rates, + updatedAt: parsed.updatedAt || null, + fetchedAt: Number(parsed.fetchedAt) || 0, + source: parsed.source || 'cache' + }; + } + } catch { + /* 没有缓存或文件损坏都走正常取数流程 */ + } + return null; +} + +function writeDiskCache(payload) { + try { + fs.mkdirSync(DATA_DIR, { recursive: true }); + fs.writeFileSync(CACHE_FILE, JSON.stringify(payload, null, 2), 'utf8'); + } catch { + /* 写不进去不影响本次换算，只是下次重启享受不到缓存 */ + } +} + +/** 带超时的 GET，返回解析后的 JSON 对象或 null。 */ +async function fetchJson(url) { + const controller = new AbortController(); + const timer = setTimeout(() => controller.abort(), TIMEOUT_MS); + try { + const response = await fetch(url, { + headers: { 'User-Agent': USER_AGENT, Accept: 'application/json' }, + signal: controller.signal + }); + if (!response.ok) return null; + return await response.json(); + } catch { + return null; + } finally { + clearTimeout(timer); + } +} + +/* ------------------------------ 主流程 ------------------------------ */ + +let memory = readDiskCache(); +/** 同一个进程里并发调用只发一次网络请求。 */ +let inflight = null; + +async function refresh() { + for (const provider of PROVIDERS) { + const json = await fetchJson(provider.url); + const picked = json && provider.pick(json); + if (!picked) continue; + const rates = sanitizeRates(picked.rates); + if (Object.keys(rates).length < 10) continue; // 明显不完整，换下一个源 + const payload = { + rates, + updatedAt: picked.updatedAt, + fetchedAt: Date.now(), + source: provider.id, + sourceLabel: provider.label + }; + memory = payload; + writeDiskCache(payload); + return payload; + } + return null; +} + +/** + * 取汇率表。永远不抛异常。 + * @param {boolean} force 为 true 时忽略缓存有效期，强制刷新 + */ +async function getRates(force = false) { + const fresh = memory && Date.now() - memory.fetchedAt < TTL_MS; + if (fresh && !force) return { ...memory, stale: false, cached: true }; + + if (!inflight) { + inflight = refresh().finally(() => { inflight = null; }); + } + const refreshed = await inflight; + if (refreshed) return { ...refreshed, stale: false, cached: false }; + + // 网络失败：有旧数据就先用旧数据，但要标出来 + if (memory) return { ...memory, stale: true, cached: true, warning: '汇率刷新失败，显示的是上次成功获取的数据' }; + + return { + rates: OFFLINE_RATES, + updatedAt: null, + fetchedAt: Date.now(), + source: 'offline', + sourceLabel: '内置离线汇率', + stale: true, + cached: false, + warning: '当前无法连接汇率服务，显示的是内置离线参考值' + }; +} + +module.exports = { getRates, PROVIDERS, OFFLINE_RATES }; diff --git a/backend/routes/fx.js b/backend/routes/fx.js new file mode 100644 index 0000000..2c3ae23 --- /dev/null +++ b/backend/routes/fx.js @@ -0,0 +1,31 @@ +/** + * 汇率接口。 + * 挂载点：/api/fx + */ +const express = require('express'); +const fx = require('../lib/fx'); + +const router = express.Router(); + +/** + * GET /api/fx/rates?force=1 + * + * 返回以 USD 为基准的完整汇率表： + * { ok, base: 'USD', rates: { USD:1, CNY:7.1, ... }, updatedAt, source, sourceLabel, + * stale, cached, warning? } + * + * 前端拿到后自行做交叉汇率：amount * rates[to] / rates[from]。 + * 一次请求覆盖所有币种，切货币不再发请求。 + */ +router.get('/rates', async (req, res) => { + try { + const force = String(req.query.force || '') === '1'; + const data = await fx.getRates(force); + res.json({ ok: true, base: 'USD', count: Object.keys(data.rates).length, ...data }); + } catch (error) { + // getRates 内部已兜底，走到这里属于意料之外 + res.status(500).json({ ok: false, error: error.message }); + } +}); + +module.exports = router; diff --git a/backend/server.js b/backend/server.js index ca483ba..ae2880b 100644 --- a/backend/server.js +++ b/backend/server.js @@ -5,6 +5,7 @@ const http = require('http'); const db = require('./db/db'); const updater = require('./lib/updater'); const systemRoutes = require('./routes/system'); +const fxRoutes = require('./routes/fx'); const app = express(); const PORT = process.env.PORT || 4300; @@ -81,6 +82,9 @@ app.get('/api/health', (req, res) => { // 系统信息与版本更新检查 app.use('/api/system', systemRoutes); +// 汇率（顶栏汇率计算器用） +app.use('/api/fx', fxRoutes); + // 获取工作台数据 app.get('/api/dashboard', (req, res) => { try { diff --git a/frontend/src/components/FxCalculator.jsx b/frontend/src/components/FxCalculator.jsx new file mode 100644 index 0000000..35b20f2 --- /dev/null +++ b/frontend/src/components/FxCalculator.jsx @@ -0,0 +1,285 @@ +import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react' +import axios from 'axios' +import { CalculatorIcon, ChevronDownIcon, RefreshIcon, SwapIcon } from './Icons' +import { + buildCurrencyOptions, crossRate, currencyLabel, formatAmount, formatRate, parseAmount +} from '../currencies' + +const DEFAULT_FROM = 'USD' +const DEFAULT_TO = 'CNY' +const PAIR_STORAGE_KEY = 'happy.fxPair' +/** 面板开着时的自动刷新间隔（后端本身也有 1 小时缓存，这里只是保证长开着不会太旧）。 */ +const AUTO_REFRESH_MS = 30 * 60 * 1000 + +function readStoredPair() { + try { + const raw = JSON.parse(localStorage.getItem(PAIR_STORAGE_KEY) || 'null') + if (raw && /^[A-Z]{3}$/.test(raw.from) && /^[A-Z]{3}$/.test(raw.to)) return raw + } catch { /* 用默认值 */ } + return { from: DEFAULT_FROM, to: DEFAULT_TO } +} + +/* ------------------------------------------------------------------ */ +/* 币种选择器：面板内两侧各一个，带搜索 */ +/* ------------------------------------------------------------------ */ +function CurrencyPicker({ value, options, onChange, align }) { + const [open, setOpen] = useState(false) + const [keyword, setKeyword] = useState('') + const boxRef = useRef(null) + const inputRef = useRef(null) + + useEffect(() => { + if (!open) { setKeyword(''); return } + const timer = window.setTimeout(() => inputRef.current?.focus(), 0) + const onPointerDown = event => { + if (!boxRef.current?.contains(event.target)) setOpen(false) + } + document.addEventListener('mousedown', onPointerDown) + return () => { window.clearTimeout(timer); document.removeEventListener('mousedown', onPointerDown) } + }, [open]) + + const filtered = useMemo(() => { + const term = keyword.trim().toUpperCase() + if (!term) return options + return options.filter(item => item.code.includes(term) || (item.name && item.name.includes(keyword.trim()))) + }, [options, keyword]) + + return ( +
+ + {open && ( +
+ setKeyword(event.target.value)} + placeholder="搜索币种 / 代码" + aria-label="搜索币种" + /> +
+ {filtered.length === 0 + ?
没有匹配的币种
+ : filtered.map(item => ( + + ))} +
+
+ )} +
+ ) +} + +/* ------------------------------------------------------------------ */ +/* 汇率计算器 */ +/* ------------------------------------------------------------------ */ +function FxCalculator() { + const [open, setOpen] = useState(false) + const [status, setStatus] = useState('idle') // idle | loading | ready | error + const [rates, setRates] = useState(null) + const [meta, setMeta] = useState(null) + const [error, setError] = useState('') + const [pair, setPair] = useState(readStoredPair) + /* 只存「用户正在输入的那一侧」的原始文本，另一侧永远是算出来的。 + 这样不存在两个输入框互相改、改出抖动的可能。 */ + const [entry, setEntry] = useState({ value: '1000', side: 'from' }) + + const panelRef = useRef(null) + const loadedRef = useRef(false) + + const { from, to } = pair + + const loadRates = useCallback(async force => { + setStatus(prev => (prev === 'ready' ? prev : 'loading')) + try { + const response = await axios.get('/api/fx/rates', { params: force ? { force: 1 } : {} }) + const data = response.data || {} + if (!data.ok || !data.rates) throw new Error(data.error || '汇率数据不可用') + setRates(data.rates) + setMeta({ + source: data.sourceLabel || data.source || '', + updatedAt: data.updatedAt, + stale: !!data.stale, + warning: data.warning || '' + }) + setError('') + setStatus('ready') + } catch (err) { + setError(err.response?.data?.error || err.message || '获取汇率失败') + setStatus(prev => (rates ? 'ready' : 'error')) + } + }, [rates]) + + /* 首次展开才去取数 —— 没打开过的用户不该为这个功能付一次请求。 */ + useEffect(() => { + if (!open || loadedRef.current) return + loadedRef.current = true + loadRates(false) + }, [open, loadRates]) + + useEffect(() => { + if (!open) return + const timer = window.setInterval(() => loadRates(true), AUTO_REFRESH_MS) + return () => window.clearInterval(timer) + }, [open, loadRates]) + + /* 点面板外或按 Esc 关闭 */ + useEffect(() => { + if (!open) return + const onPointerDown = event => { + if (!panelRef.current?.contains(event.target)) setOpen(false) + } + const onKeyDown = event => { if (event.key === 'Escape') setOpen(false) } + document.addEventListener('mousedown', onPointerDown) + window.addEventListener('keydown', onKeyDown) + return () => { + document.removeEventListener('mousedown', onPointerDown) + window.removeEventListener('keydown', onKeyDown) + } + }, [open]) + + useEffect(() => { + try { localStorage.setItem(PAIR_STORAGE_KEY, JSON.stringify(pair)) } catch { /* 忽略 */ } + }, [pair]) + + const options = useMemo(() => buildCurrencyOptions(rates, [DEFAULT_FROM, DEFAULT_TO, 'EUR', 'GBP', 'JPY']), [rates]) + const rate = crossRate(rates, from, to) // 1 from = ? to + const inverse = crossRate(rates, to, from) // 1 to = ? from + const num = parseAmount(entry.value) + + const fromDisplay = entry.side === 'from' + ? entry.value + : (num !== null && rate ? formatAmount(num / rate) : '') + const toDisplay = entry.side === 'to' + ? entry.value + : (num !== null && rate ? formatAmount(num * rate) : '') + + /* 换币种时锁住「那一侧现在的数字」——符合直觉：1000 美元换成 1000 欧元的输入， + 再按新汇率算出右边。 */ + const changeFrom = code => { + if (code === from) return + const keep = fromDisplay + setPair(cur => ({ ...cur, from: code })) + setEntry({ value: keep, side: 'from' }) + } + const changeTo = code => { + if (code === to) return + const keep = toDisplay + setPair(cur => ({ ...cur, to: code })) + setEntry({ value: keep, side: 'to' }) + } + /* 互换：把右边的结果挪到左边，换算关系保持不变 */ + const swap = () => { + setPair(cur => ({ from: cur.to, to: cur.from })) + setEntry({ value: toDisplay, side: 'from' }) + } + + const updatedLabel = meta?.updatedAt + ? new Date(meta.updatedAt).toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' }) + : '' + + return ( +
+ + + {open && ( +
+
+ 汇率换算 + +
+ +
+
+ setEntry({ value: event.target.value, side: 'from' })} + placeholder="0" + aria-label={`金额（${from}）`} + /> + +
+ + + +
+ setEntry({ value: event.target.value, side: 'to' })} + placeholder="0" + aria-label={`金额（${to}）`} + /> + +
+
+ +
+ {status === 'loading' && !rates + ? '正在获取最新汇率…' + : status === 'error' + ? {error} + : rate + ? <>1 {from} = {formatRate(rate)} {to}· 1 {to} = {formatRate(inverse)} {from} + : '—'} +
+ +
+ {meta?.warning + ? {meta.warning} + : 数据源 {meta?.source || '—'}{updatedLabel ? ` · ${updatedLabel} 更新` : ''}{meta?.stale ? '（已过期）' : ''}} +
+
+ )} +
+ ) +} + +export default FxCalculator diff --git a/frontend/src/components/GlobalHeader.jsx b/frontend/src/components/GlobalHeader.jsx index 407af9e..8dc9ab9 100644 --- a/frontend/src/components/GlobalHeader.jsx +++ b/frontend/src/components/GlobalHeader.jsx @@ -1,7 +1,9 @@ -import React, { useEffect, useMemo, useRef, useState } from 'react' +import React, { useEffect, useRef, useState } from 'react' import { useLocation, useNavigate } from 'react-router-dom' import axios from 'axios' -import { BotIcon, ClockIcon, CloudDbIcon, PlusCircleIcon, SearchIcon } from './Icons' +import { BotIcon, CloudDbIcon, PlusCircleIcon, SearchIcon } from './Icons' +import TimeZoneClock from './TimeZoneClock' +import FxCalculator from './FxCalculator' import { HOME_PATH, PAGE_LABELS } from '../navigation' const TABS_STORAGE_KEY = 'happy.openTabs' @@ -86,8 +88,6 @@ function GlobalHeader({ onOpenAssistant }) { return () => window.removeEventListener('keydown', onKeyDown) }, []) - const timeLabel = useMemo(() => now.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit', second: '2-digit' }), [now]) - const dateLabel = useMemo(() => now.toLocaleDateString('zh-CN', { month: 'long', day: 'numeric', weekday: 'short' }), [now]) const selectResult = result => { navigate(result.path); setQuery(''); setSearchOpen(false) } return ( @@ -116,7 +116,7 @@ function GlobalHeader({ onOpenAssistant }) { ) })} -
{dateLabel}{timeLabel}
+
) } diff --git a/frontend/src/components/Icons.jsx b/frontend/src/components/Icons.jsx index cd2f1c5..2a6b551 100644 --- a/frontend/src/components/Icons.jsx +++ b/frontend/src/components/Icons.jsx @@ -209,6 +209,25 @@ export const ChevronDownIcon = ({ size = 16, className = '' }) => ( ) +/* 汇率计算器：机身 + 显示屏 + 按键点阵 */ +export const CalculatorIcon = ({ size = 20, className = '' }) => ( + +) + +/* 货币互换：上下两条反向箭头 */ +export const SwapIcon = ({ size = 20, className = '' }) => ( + +) + /* 客户报价单 */ export const QuoteIcon = ({ size = 20, className = '' }) => (
+ + + {open && ( +
+
客户所在地时间
+
+ {TIMEZONES.map(item => { + const active = item.key === zoneKey + return ( + + ) + })} +
+
+ )} +
+ ) +} + +export default TimeZoneClock diff --git a/frontend/src/currencies.js b/frontend/src/currencies.js new file mode 100644 index 0000000..9ab67ab --- /dev/null +++ b/frontend/src/currencies.js @@ -0,0 +1,110 @@ +/** + * 币种清单（顶栏汇率计算器用） + * + * 只是「展示用」的名字与排序。真正有哪些币种、汇率多少，全部以 + * 后端 /api/fx/rates 返回的 rates 为准 —— 接口给了 160+ 币种， + * 这份清单里没列到的也会照常出现在下拉里（只显示代码）。 + * + * ORDER 决定下拉里的先后（外贸常用币种在前），未列出的按字母序排在后面。 + */ +export const CURRENCY_NAMES = { + USD: '美元', CNY: '人民币', EUR: '欧元', GBP: '英镑', HKD: '港币', JPY: '日元', + AUD: '澳元', CAD: '加元', SGD: '新加坡元', CHF: '瑞士法郎', NZD: '新西兰元', KRW: '韩元', + AED: '阿联酋迪拉姆', SAR: '沙特里亚尔', RUB: '卢布', INR: '印度卢比', BRL: '巴西雷亚尔', + MXN: '墨西哥比索', THB: '泰铢', VND: '越南盾', MYR: '马来西亚林吉特', IDR: '印尼盾', + PHP: '菲律宾比索', TRY: '土耳其里拉', ZAR: '南非兰特', PLN: '波兰兹罗提', + SEK: '瑞典克朗', NOK: '挪威克朗', DKK: '丹麦克朗', EGP: '埃及镑', NGN: '尼日利亚奈拉', + PKR: '巴基斯坦卢比', BDT: '孟加拉塔卡', KES: '肯尼亚先令', KWD: '科威特第纳尔', + QAR: '卡塔尔里亚尔', OMR: '阿曼里亚尔', BHD: '巴林第纳尔', ILS: '以色列谢克尔', + TWD: '新台币', CLP: '智利比索', COP: '哥伦比亚比索', PEN: '秘鲁索尔', ARS: '阿根廷比索', + UAH: '乌克兰格里夫纳', CZK: '捷克克朗', HUF: '匈牙利福林', RON: '罗马尼亚列伊', + LKR: '斯里兰卡卢比', NPR: '尼泊尔卢比', MMK: '缅甸元', KHR: '柬埔寨瑞尔', + TZS: '坦桑尼亚先令', MAD: '摩洛哥迪拉姆', GHS: '加纳塞地', ETB: '埃塞俄比亚比尔', + UGX: '乌干达先令', ZMW: '赞比亚克瓦查', DZD: '阿尔及利亚第纳尔', TND: '突尼斯第纳尔', + JOD: '约旦第纳尔', IQD: '伊拉克第纳尔', LBP: '黎巴嫩镑', AZN: '阿塞拜疆马纳特', + KZT: '哈萨克斯坦坚戈', UZS: '乌兹别克斯坦苏姆', GEL: '格鲁吉亚拉里', AMD: '亚美尼亚德拉姆', + MNT: '蒙古图格里克', KGS: '吉尔吉斯斯坦索姆', BND: '文莱元', MOP: '澳门元', + ISK: '冰岛克朗', UYU: '乌拉圭比索', BOB: '玻利维亚诺', PYG: '巴拉圭瓜拉尼', + CRC: '哥斯达黎加科朗', GTQ: '危地马拉格查尔', DOP: '多米尼加比索', JMD: '牙买加元', + TTD: '特立尼达和多巴哥元', RSD: '塞尔维亚第纳尔', BGN: '保加利亚列弗', + HRK: '克罗地亚库纳', ALL: '阿尔巴尼亚列克', MKD: '北马其顿第纳尔' +} + +/** 下拉排序权重：外贸结算最常见的排前面。 */ +const ORDER = [ + 'USD', 'CNY', 'EUR', 'GBP', 'HKD', 'JPY', 'AUD', 'CAD', 'SGD', 'CHF', 'NZD', 'KRW', + 'AED', 'SAR', 'RUB', 'INR', 'BRL', 'MXN', 'THB', 'VND', 'MYR', 'IDR', 'PHP', 'TRY', + 'ZAR', 'PLN', 'SEK', 'NOK', 'DKK', 'TWD', 'EGP', 'NGN', 'PKR', 'BDT', 'KES', 'KWD', + 'QAR', 'OMR', 'BHD', 'ILS', 'CLP', 'COP', 'PEN', 'ARS', 'UAH', 'CZK', 'HUF', 'RON' +] + +const RANK = new Map(ORDER.map((code, index) => [code, index])) + +/** + * 把接口返回的 rates 变成下拉选项，按常用度排序。 + * @param {Record} rates 以 USD 为基准的汇率表 + * @param {string[]} extra 兜底币种（接口没回来时也要有 USD/CNY 可选） + */ +export function buildCurrencyOptions(rates, extra = ['USD', 'CNY']) { + const codes = Object.keys(rates || {}) + const merged = Array.from(new Set([...extra, ...codes])) + return merged + .map(code => ({ code, name: CURRENCY_NAMES[code] || '' })) + .sort((a, b) => { + const ra = RANK.has(a.code) ? RANK.get(a.code) : 999 + const rb = RANK.has(b.code) ? RANK.get(b.code) : 999 + if (ra !== rb) return ra - rb + return a.code.localeCompare(b.code) + }) +} + +/** "USD 美元" / 没中文名时只显示代码 */ +export function currencyLabel(code) { + const name = CURRENCY_NAMES[code] + return name ? `${code} ${name}` : code +} + +/** + * 交叉汇率：1 from = ? to + * rates 以 USD 为基准，所以 rates[to] / rates[from] 就是任意两币之间的汇率。 + */ +export function crossRate(rates, from, to) { + if (!rates) return null + const rf = Number(rates[from]) + const rt = Number(rates[to]) + if (!Number.isFinite(rf) || !Number.isFinite(rt) || rf <= 0) return null + return rt / rf +} + +/** + * 金额显示：汇率结果的有效位数差别很大 + * （1 CNY ≈ 0.00004 USD，1 USD ≈ 25000 VND）， + * 固定两位小数会让小额变 0、大额全是没意义的零，所以按数量级取精度。 + */ +export function formatAmount(value) { + if (!Number.isFinite(value)) return '' + const abs = Math.abs(value) + let digits + if (abs === 0) digits = 2 + else if (abs >= 1000) digits = 2 + else if (abs >= 1) digits = 4 + else if (abs >= 0.001) digits = 6 + else digits = 8 + return value.toLocaleString('zh-CN', { minimumFractionDigits: 0, maximumFractionDigits: digits }) +} + +/** 汇率本身用 6 位有效数字展示：0.000131 这种小汇率也能看清。 */ +export function formatRate(value) { + if (!Number.isFinite(value)) return '' + if (value >= 1000) return value.toLocaleString('zh-CN', { maximumFractionDigits: 2 }) + if (value >= 1) return value.toLocaleString('zh-CN', { maximumFractionDigits: 4 }) + return value.toPrecision(4) +} + +/** 把输入框里的字符串转成数字；空串、半截输入（"1."）都返回 null 而不是崩掉。 */ +export function parseAmount(text) { + const cleaned = String(text ?? '').replace(/[,\s]/g, '') + if (!cleaned) return null + const num = Number(cleaned) + return Number.isFinite(num) ? num : null +} diff --git a/frontend/src/pages/Dashboard.jsx b/frontend/src/pages/Dashboard.jsx index 96808d3..416c672 100644 --- a/frontend/src/pages/Dashboard.jsx +++ b/frontend/src/pages/Dashboard.jsx @@ -97,7 +97,7 @@ function Dashboard() { return (
-
[WORKSPACE / OVERVIEW]

工作台

把今天的节奏、客户和订单放在同一个视野里。

运行日期{new Date().toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' })}
+
[WORKSPACE / OVERVIEW]

工作台

把今天的节奏、客户和订单放在同一个视野里。

diff --git a/frontend/src/styles/luxury.css b/frontend/src/styles/luxury.css index 3d269a4..92e1c4f 100644 --- a/frontend/src/styles/luxury.css +++ b/frontend/src/styles/luxury.css @@ -228,7 +228,7 @@ input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px .header-status-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: var(--success); box-shadow: 0 0 10px var(--success); } .global-search { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; width: min(360px, 30vw); min-height: 38px; padding: 0 11px; color: var(--text-tertiary); background: var(--surface-deep); border: 1px solid var(--border-light); border-radius: 11px; transition: border-color 150ms, box-shadow 150ms; } .global-search:focus-within { border-color: var(--primary-border); box-shadow: 0 0 0 3px var(--accent-glow); } -.global-search input { 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 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); } /* ---- 已打开页面标签：搜索框后的快速跳转（参考 GoodJob 的顶部标签条） ---- */ @@ -245,8 +245,27 @@ input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px .page-tab.active .page-tab-close { color: var(--text-secondary); } .page-tab.active .page-tab-close:hover { color: var(--danger); } .global-header-actions { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; margin-left: auto; } -.header-clock { display: flex; align-items: center; gap: 8px; margin-right: 8px; color: var(--text-tertiary); font: 11px var(--font-mono); white-space: nowrap; } -.header-clock b { color: var(--text-primary); font-size: 13px; font-weight: 500; } +.header-clock { position: relative; flex: 0 0 auto; } +.clock-trigger { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: var(--text-tertiary); cursor: pointer; white-space: nowrap; transition: background 150ms, border-color 150ms; } +.clock-trigger:hover, .clock-trigger.is-open { background: var(--surface-hover); border-color: var(--border-light); } +.clock-trigger > svg:first-child { flex: 0 0 auto; } +.clock-zone { color: var(--text-secondary); font-size: 11.5px; letter-spacing: .01em; } +.clock-caret { flex: 0 0 auto; color: var(--text-tertiary); transition: transform 180ms; } +.clock-trigger.is-open .clock-caret { transform: rotate(180deg); } +.clock-readout { display: grid; justify-items: end; gap: 2px; } +.clock-time { color: var(--text-primary); font: 600 20px/1 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: .01em; } +.clock-date { color: var(--text-tertiary); font-size: 10px; font-style: normal; line-height: 1; } +.clock-pop { position: absolute; top: calc(100% + 9px); right: 0; z-index: 60; width: 318px; padding: 6px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: 0 20px 52px rgba(0, 0, 0, .25), inset 0 1px 0 var(--panel-highlight); } +.clock-pop-head { padding: 8px 10px 7px; color: var(--text-tertiary); font-size: 10px; letter-spacing: .1em; } +.clock-pop-list { max-height: 344px; overflow-y: auto; } +.clock-zone-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 12px; text-align: left; transition: background 120ms, color 120ms; } +.clock-zone-item:hover { background: var(--surface-hover); color: var(--text-primary); } +.clock-zone-item.active { background: var(--primary-bg); color: var(--text-primary); } +.clock-zone-name { white-space: nowrap; } +.clock-zone-right { display: flex; flex: 0 0 auto; align-items: baseline; gap: 7px; } +.clock-zone-right b { color: var(--text-primary); font: 500 12px var(--font-mono); font-variant-numeric: tabular-nums; } +.clock-zone-item.active .clock-zone-right b { color: var(--primary-light); } +.clock-zone-right em { color: var(--text-tertiary); font-size: 9.5px; font-style: normal; } .quick-create-btn, .ai-entry-btn, .mobile-search-btn { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; min-height: 36px; padding: 8px 11px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 12px; white-space: nowrap; transition: background 150ms, border-color 150ms, color 150ms; } .quick-create-btn:hover, .mobile-search-btn:hover { color: var(--text-primary); background: var(--surface-hover); border-color: var(--border-light); } .ai-entry-btn { color: var(--primary-light); background: var(--primary-bg); border-color: var(--primary-border); box-shadow: 0 0 18px var(--accent-glow); } @@ -259,9 +278,6 @@ input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px .dashboard-welcome { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 22px; } .dashboard-welcome .page-title { margin: 0; } .dashboard-welcome p { margin: 7px 0 0; color: var(--text-secondary); font-size: 13px; } -.dashboard-date-chip { display: grid; gap: 5px; min-width: 150px; padding: 12px 14px; border-radius: 12px; background: var(--surface); box-shadow: var(--panel-shadow); text-align: right; } -.dashboard-date-chip span { color: var(--text-tertiary); font: 10px var(--font-mono); letter-spacing: .08em; } -.dashboard-date-chip strong { color: var(--text-primary); font-size: 13px; font-weight: 600; } .dashboard-panel { margin-bottom: 18px; padding: 20px; border-radius: 16px; background: var(--surface); box-shadow: var(--panel-shadow); } .dashboard-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .dashboard-panel-header h2 { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text-primary); font-size: 15px; } @@ -329,9 +345,57 @@ input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px .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; } +/* ---------- 汇率计算器（顶栏） ---------- */ +.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:hover { color: var(--text-primary); background: var(--surface-hover); border-color: var(--border-light); } +.header-tool-btn.is-open { color: var(--primary-light); background: var(--primary-bg); border-color: var(--primary-border); } +.fx-panel { position: absolute; top: calc(100% + 9px); right: 0; z-index: 60; width: min(396px, calc(100vw - 24px)); padding: 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: 0 20px 52px rgba(0, 0, 0, .25), inset 0 1px 0 var(--panel-highlight); } +.fx-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } +.fx-panel-title { display: inline-flex; align-items: center; gap: 7px; color: var(--text-primary); font-size: 12.5px; font-weight: 600; } +.fx-refresh { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid var(--border-light); border-radius: 8px; background: transparent; color: var(--text-tertiary); cursor: pointer; transition: color 150ms, border-color 150ms; } +.fx-refresh:hover { color: var(--primary-light); border-color: var(--primary-border); } +.fx-refresh:disabled { opacity: .45; cursor: default; } +.fx-panel-body { display: flex; align-items: center; gap: 10px; } +.fx-side { position: relative; flex: 1 1 0; min-width: 0; display: grid; gap: 6px; } +.fx-amount { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--border-light); border-radius: 11px; background: var(--surface-deep); color: var(--text-primary); font: 600 17px var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; } +.fx-amount:focus { outline: none; border-color: var(--primary-border); box-shadow: 0 0 0 3px var(--primary-bg); } +.fx-swap { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; padding: 0; border: 1px solid var(--border-light); border-radius: 50%; background: var(--surface-deep); color: var(--text-secondary); cursor: pointer; transition: color 150ms, border-color 150ms, transform 200ms; } +.fx-swap:hover { color: var(--primary-light); border-color: var(--primary-border); transform: rotate(180deg); } +.fx-picker { position: relative; } +.fx-picker-btn { display: flex; align-items: center; gap: 6px; width: 100%; height: 34px; padding: 0 9px; border: 1px solid var(--border-light); border-radius: 10px; background: var(--surface-deep); color: var(--text-secondary); cursor: pointer; transition: border-color 150ms, color 150ms; } +.fx-picker-btn:hover, .fx-picker-btn.is-open { border-color: var(--primary-border); color: var(--text-primary); } +.fx-picker-btn b { flex: 0 0 auto; color: var(--text-primary); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; } +.fx-picker-btn span { flex: 1 1 auto; overflow: hidden; color: var(--text-tertiary); font-size: 11px; text-align: left; text-overflow: ellipsis; white-space: nowrap; } +.fx-picker-btn svg { flex: 0 0 auto; color: var(--text-tertiary); } +.fx-picker-pop { position: absolute; top: calc(100% + 5px); z-index: 5; width: 232px; padding: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: 0 20px 52px rgba(0, 0, 0, .25), inset 0 1px 0 var(--panel-highlight); } +.fx-picker.left .fx-picker-pop { left: 0; } +.fx-picker.right .fx-picker-pop { right: 0; } +.fx-picker-search { width: 100%; height: 30px; margin-bottom: 5px; padding: 0 9px; border: 1px solid var(--border-light); border-radius: 8px; background: var(--surface-deep); color: var(--text-primary); font-size: 11.5px; } +.fx-picker-search:focus { outline: none; border-color: var(--primary-border); } +.fx-picker-list { max-height: 220px; overflow-y: auto; } +.fx-picker-item { display: flex; align-items: baseline; gap: 7px; width: 100%; padding: 6px 9px; border: 0; border-radius: 7px; background: transparent; color: var(--text-secondary); cursor: pointer; text-align: left; } +.fx-picker-item:hover { background: var(--surface-hover); color: var(--text-primary); } +.fx-picker-item.active { background: var(--primary-bg); } +.fx-picker-item b { flex: 0 0 auto; color: var(--text-primary); font-size: 12px; font-weight: 600; } +.fx-picker-item.active b { color: var(--primary-light); } +.fx-picker-item span { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } +.fx-picker-empty { padding: 12px 9px; color: var(--text-tertiary); font-size: 11px; text-align: center; } +.fx-rate-line { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border-light); color: var(--text-secondary); font-size: 12px; } +.fx-rate-line b { color: var(--primary-light); font-family: var(--font-mono); font-size: 13px; } +.fx-rate-line em { margin-left: 7px; color: var(--text-tertiary); font-size: 10.5px; font-style: normal; } +.fx-error, .fx-warn { color: var(--warning); } +.fx-panel-foot { margin-top: 7px; color: var(--text-tertiary); font-size: 10px; } +/* 时钟与汇率入口加进来后顶栏变宽，中等屏先收紧留白与品牌区，避免把右侧按钮挤出去 */ +@media (max-width: 1440px) { + .global-header { gap: 16px; padding: 0 clamp(14px, 2.2vw, 34px); } + .global-header-brand { min-width: 196px; } + .global-search { flex: 0 1 auto; width: min(340px, 26vw); min-width: 148px; } + .global-header-actions { gap: 7px; } +} @media (max-width: 1280px) { .page-tabs { display: none; } } -@media (max-width: 980px) { .global-header-brand { min-width: auto; }.global-header-brand div { display: none; }.global-search { width: min(360px, 40vw); }.header-clock span { 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; }.route-content { min-height: calc(100vh - var(--header-height)); padding: 22px 12px 42px; }.dashboard-welcome { align-items: flex-start; flex-direction: column; }.dashboard-date-chip { text-align: left; }.calendar-day { min-height: 68px; padding: 5px 4px; }.calendar-week-row > div { padding: 8px 4px; }.calendar-event { font-size: 8px; }.calendar-day-number { font-size: 10px; }.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: 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: 68px; padding: 5px 4px; }.calendar-week-row > div { padding: 8px 4px; }.calendar-event { font-size: 8px; }.calendar-day-number { font-size: 10px; }.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); } } /* 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; } diff --git a/frontend/src/timezones.js b/frontend/src/timezones.js new file mode 100644 index 0000000..6e48f01 --- /dev/null +++ b/frontend/src/timezones.js @@ -0,0 +1,108 @@ +/** + * 时区清单（顶栏时钟用） + * + * 用 IANA 时区名而不是写死的 UTC 偏移量 —— 偏移量一年会变两次， + * 伦敦夏天是 UTC+1、冬天是 UTC+0，写死必然算错。交给 + * Intl.DateTimeFormat 的 timeZone 处理，夏令时自动正确。 + * + * zone / cities 只是给人看的标签，实际取时间只认 key。 + * 排列按 UTC 偏移由西向东，方便顺着找客户所在时区。 + */ +export const TIMEZONES = [ + { key: 'Pacific/Honolulu', zone: '西十区', cities: '檀香山' }, + { key: 'America/Anchorage', zone: '西九区', cities: '安克雷奇' }, + { key: 'America/Los_Angeles', zone: '西八区', cities: '洛杉矶，温哥华' }, + { key: 'America/Denver', zone: '西七区', cities: '丹佛' }, + { key: 'America/Chicago', zone: '西六区', cities: '芝加哥，墨西哥城' }, + { key: 'America/New_York', zone: '西五区', cities: '纽约，多伦多' }, + { key: 'America/Halifax', zone: '西四区', cities: '哈利法克斯，圣地亚哥' }, + { key: 'America/Sao_Paulo', zone: '西三区', cities: '圣保罗，布宜诺斯艾利斯' }, + { key: 'Atlantic/Azores', zone: '西一区', cities: '亚速尔群岛' }, + { key: 'Europe/London', zone: '零时区', cities: '伦敦' }, + { key: 'Europe/Paris', zone: '东一区', cities: '巴黎，法兰克福' }, + { key: 'Europe/Athens', zone: '东二区', cities: '雅典，开罗' }, + { key: 'Europe/Moscow', zone: '东三区', cities: '莫斯科，利雅得' }, + { key: 'Asia/Dubai', zone: '东四区', cities: '迪拜' }, + { key: 'Asia/Karachi', zone: '东五区', cities: '卡拉奇，伊斯兰堡' }, + { key: 'Asia/Kolkata', zone: '东五区半', cities: '新德里，孟买' }, + { key: 'Asia/Dhaka', zone: '东六区', cities: '达卡，阿拉木图' }, + { key: 'Asia/Bangkok', zone: '东七区', cities: '曼谷，雅加达，河内' }, + { key: 'Asia/Shanghai', zone: '东八区', cities: '北京，上海' }, + { key: 'Asia/Tokyo', zone: '东九区', cities: '东京，首尔' }, + { key: 'Australia/Sydney', zone: '东十区', cities: '悉尼，墨尔本' }, + { key: 'Pacific/Noumea', zone: '东十一区', cities: '努美阿' }, + { key: 'Pacific/Auckland', zone: '东十二区', cities: '奥克兰' } +] + +/** 默认时区：Wayne 在上海，默认看本地时间。 */ +export const DEFAULT_TIMEZONE = 'Asia/Shanghai' + +export const TIMEZONE_STORAGE_KEY = 'happy.clockZone' + +/** 按 IANA 时区名找条目；找不到给一个兜底条目，避免界面出现空白。 */ +export function findTimeZone(key) { + return TIMEZONES.find(item => item.key === key) || TIMEZONES.find(item => item.key === DEFAULT_TIMEZONE) +} + +export function readStoredTimeZone() { + try { + const saved = localStorage.getItem(TIMEZONE_STORAGE_KEY) + return TIMEZONES.some(item => item.key === saved) ? saved : DEFAULT_TIMEZONE + } catch { + return DEFAULT_TIMEZONE + } +} + +/* Intl 的构造有开销，按时区缓存复用；界面每秒重绘一次，不缓存会白白产生垃圾。 */ +const timeFormatters = new Map() +const dateFormatters = new Map() +const offsetFormatters = new Map() + +function timeFormatter(timeZone) { + if (!timeFormatters.has(timeZone)) { + timeFormatters.set(timeZone, new Intl.DateTimeFormat('zh-CN', { + timeZone, hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' + })) + } + return timeFormatters.get(timeZone) +} + +function dateFormatter(timeZone) { + if (!dateFormatters.has(timeZone)) { + dateFormatters.set(timeZone, new Intl.DateTimeFormat('zh-CN', { + timeZone, month: 'long', day: 'numeric', weekday: 'short' + })) + } + return dateFormatters.get(timeZone) +} + +/** "09:28:57"（某些环境会给 24:00 表示午夜，统一成 00） */ +export function formatTimeIn(date, timeZone) { + return timeFormatter(timeZone).format(date).replace(/^24/, '00') +} + +/** "9月10日周三" */ +export function formatDateIn(date, timeZone) { + return dateFormatter(timeZone).format(date) +} + +/** + * "UTC+8" / "UTC+5:30" / "UTC"。 + * 优先用 Intl 的 longOffset（自动含夏令时），环境不支持时退回手算。 + */ +export function formatOffsetIn(date, timeZone) { + try { + if (!offsetFormatters.has(timeZone)) { + offsetFormatters.set(timeZone, new Intl.DateTimeFormat('en-US', { timeZone, timeZoneName: 'longOffset' })) + } + const part = offsetFormatters.get(timeZone).formatToParts(date).find(item => item.type === 'timeZoneName') + const raw = part && part.value // "GMT+08:00" / "GMT" + if (!raw) return '' + if (raw === 'GMT') return 'UTC' + const match = raw.match(/GMT([+-])(\d{1,2})(?::(\d{2}))?/) + if (!match) return raw + return `UTC${match[1]}${Number(match[2])}${match[3] && match[3] !== '00' ? `:${match[3]}` : ''}` + } catch { + return '' + } +}