- Single palette (web/src/styles/palette.ts) taken from the Stitch design, exposed as ap-* UnoCSS colors and --ap-* CSS variables and used for Element Plus dark theme overrides, KLineChart and the news iframe; zero radius, JetBrains Mono / Space Grotesk bundled locally - New sidebar and header layout; trading page, plan card and analysis drawer follow the design; other pages use the same panels - Status API reports today's closed trades, wins and net PnL, shown as today's PnL and win rate on the trading page
52 lines
1.8 KiB
TypeScript
52 lines
1.8 KiB
TypeScript
import { defineConfig, presetAttributify, presetWind3 } from "unocss"
|
||
import { PALETTE } from "./src/styles/palette"
|
||
|
||
// camelCase → kebab-case:类名写 bg-ap-panel-high,CSS 变量为 --ap-panel-high
|
||
const kebab = (name: string) => name.replace(/[A-Z]/g, c => `-${c.toLowerCase()}`)
|
||
const apColors = Object.fromEntries(Object.entries(PALETTE).map(([k, v]) => [kebab(k), v]))
|
||
const CJK = `"PingFang SC", "Microsoft YaHei", "Noto Sans SC"`
|
||
|
||
export default defineConfig({
|
||
// 预设
|
||
presets: [
|
||
// 属性化模式 & 无值的属性模式
|
||
presetAttributify({
|
||
prefix: "un-",
|
||
prefixedOnly: false
|
||
}),
|
||
// 默认预设
|
||
presetWind3({
|
||
important: "#app"
|
||
})
|
||
],
|
||
theme: {
|
||
colors: { ap: apColors },
|
||
fontFamily: {
|
||
// 界面、表格、数字
|
||
mono: `"JetBrains Mono Variable", ui-monospace, ${CJK}, monospace`,
|
||
// 标题
|
||
head: `"Space Grotesk Variable", ${CJK}, sans-serif`,
|
||
// 正文类:新闻、Markdown、Chat 回复
|
||
sans: `-apple-system, BlinkMacSystemFont, "Segoe UI", ${CJK}, sans-serif`
|
||
}
|
||
},
|
||
preflights: [{
|
||
getCSS: ({ theme }) => {
|
||
const fonts = (theme as { fontFamily: Record<string, string> }).fontFamily
|
||
return `:root{${Object.entries(apColors).map(([k, v]) => `--ap-${k}:${v};`).join("")}`
|
||
+ `--ap-font-mono:${fonts.mono};--ap-font-head:${fonts.head};--ap-font-sans:${fonts.sans};}`
|
||
}
|
||
}],
|
||
// 自定义规则
|
||
rules: [],
|
||
// 自定义快捷方式
|
||
shortcuts: {
|
||
"wh-full": "w-full h-full",
|
||
"flex-center": "flex justify-center items-center",
|
||
"flex-x-center": "flex justify-center",
|
||
"flex-y-center": "flex items-center",
|
||
// 面板标题条里的标题
|
||
"panel-title": "font-head text-[12px] font-bold tracking-wider text-ap-text"
|
||
}
|
||
})
|