@skyroc/web-admin-styles

概述

这是一个纯 CSS 包，不导出任何 JS / TS 符号，也没有 . 主入口。三个 CSS 文件各自暴露成子路径：

{
  "exports": {
    "./global.css": "./src/global.css",
    "./nprogress.css": "./src/nprogress.css",
    "./reset.css": "./src/reset.css"
  }
}

使用

global.css 开头就 @import 了另外两个文件，所以只引它一个就够了：

// apps/admin/src/plugins/assets.ts
import 'uno.css';
import 'virtual:svg-icons-register';
import '@skyroc/web-admin-styles/global.css';

这个 assets 文件在应用启动期一次性引入：

// bootstrap.tsx
import './plugins/assets';

只在需要单独控制加载顺序、或者确定不用 NProgress 时，才分开引 reset.css / nprogress.css。

各文件作用

reset.css

一份 UnoCSS / Tailwind 风格的 preflight reset（约 380 行）：

• box-sizing: border-box，并把 border-width 归零、border-style 设成 solid，默认边框色读 --un-default-border-color——所以之后写 border 一个类就能出边框；
• html 上统一 line-height: 1.5、tab-size: 4、系统 sans 字体栈，禁用 iOS 横竖屏字号调整；
• 标题、列表、表单控件的浏览器默认样式归零，body 去 margin。

global.css

只有 50 来行，全是应用级基线：

@import './reset.css';
@import './nprogress.css';

• html / body / #app 铺满高度，text-autospace: normal（中英文间自动间距）；
• html 的边框色、字号、文字色分别绑到 --color-border、--font-size、--color-text-base——这几个变量由 @skyroc/web-admin-theme 在运行时写到 :root 上；
• 全局细滚动条：scrollbar-width: thin 加一整套 webkit 伪元素，宽 7px、圆角 10px、轨道透明，并单独把 antd 表头的滚动条背景抹掉；
• html.grayscale 一键灰度（哀悼模式），配合主题设置里的开关；
• 关掉 ::view-transition-old/new(root) 的默认动画，让主题切换的 View Transition 由应用自己控制。

nprogress.css

把 nprogress 官方样式改成跟随主题：

• 进度条颜色统一走 --nprogress-bar-color，取值链是 var(--nprogress, var(--color-primary, #6366f1))——应用可以单独覆盖 --nprogress，不覆盖就跟主题色走，再兜底一个靛蓝；
• 顶部 2px 高、z-index: 1031 固定条，末端 peg 带同色发光；
• 保留 spinner，同样用主题色描边。

配合 @skyroc/web-admin-runtime 的 setupNProgress 使用：JS 在那个包里，样式在这个包里。

为什么单独成包

与其它样式来源的分工

一个 Admin 应用里同时有四层样式，职责不重叠：

加载顺序上 reset 最先、库样式其次、应用样式最后，后者可以覆盖前者。

Last updated on