@jike-js/ui 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +8 -0
  2. package/dist/styles.css +7 -6
  3. package/package.json +1 -1
package/README.md CHANGED
@@ -2,6 +2,14 @@
2
2
 
3
3
  这是 jike 统一前端组件的参考实现，组件契约见 `frontend/UI_COMPONENT_CATALOG.md`。
4
4
 
5
+ ## 安装
6
+
7
+ ```powershell
8
+ pnpm add @jike-js/ui
9
+ ```
10
+
11
+ 当前公开版本：`0.1.0`；行高隔离修订的源码版本为 `0.1.1`，尚未发布。业务项目安装后锁定明确版本，不使用 Git、本地 `file:` 或未发布版本。
12
+
5
13
  业务项目只需引入 `@jike-js/ui/styles.css` 一个样式入口；该入口在构建时包含 Token、基础层和组件层，避免漏引或形成第二份 reset。Token 的唯一源文件仍是 `frontend/tokens/design-tokens.json`，CSS 是其运行时输出。
6
14
 
7
15
  当前提供：`LoginShell`、`PageLayout`、`PageHeader`、`Notice`、`EmptyState`、`LoadingState`。包构建会同时检查 TypeScript，并输出单一 `styles.css`。
package/dist/styles.css CHANGED
@@ -77,6 +77,7 @@
77
77
  --login-subtitle-form-gap: 24px;
78
78
  --login-field-gap: 16px;
79
79
  --login-button-gap: 8px;
80
+ --login-form-line-height: normal;
80
81
  --login-form-offset-y: -24px;
81
82
  --login-mobile-breakpoint: 768px;
82
83
  --z-sidebar: 20;
@@ -130,7 +131,7 @@ svg {
130
131
  display: block;
131
132
  }
132
133
 
133
- .jike-login-shell { box-sizing: border-box; min-height: 100vh; display: grid; place-items: center; padding: var(--space-6); background: var(--color-bg-page); color: var(--color-text-primary); font-family: var(--font-family-sans); }
134
+ .jike-login-shell { box-sizing: border-box; min-height: 100vh; display: grid; place-items: center; padding: var(--space-6); background: var(--color-bg-page); color: var(--color-text-primary); font-family: var(--font-family-sans); line-height: var(--login-form-line-height); }
134
135
  .jike-login-shell__card { box-sizing: border-box; display: grid; grid-template-columns: var(--login-column-ratio); width: var(--login-container-width); max-width: var(--login-container-max-width); min-height: var(--login-container-min-height); overflow: hidden; background: var(--color-bg-surface); border: var(--border-width-default) solid var(--color-border); border-radius: var(--radius-container); box-shadow: var(--shadow-login); }
135
136
  .jike-login-shell__brand { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--login-brand-padding-y) var(--login-brand-padding-x); color: var(--color-bg-surface); text-align: center; background: linear-gradient(135deg, var(--color-brand), var(--color-brand-hover)); }
136
137
  .jike-login-shell__logo { display: grid; place-items: center; width: var(--login-logo-size); height: var(--login-logo-size); margin-bottom: var(--space-6); }
@@ -139,18 +140,18 @@ svg {
139
140
  .jike-login-shell__brand p { margin: var(--space-4) 0 0; font-size: var(--font-size-lg); line-height: var(--line-height-body); }
140
141
  .jike-login-shell__form-panel { display: flex; flex-direction: column; justify-content: center; padding: var(--login-panel-padding-y) var(--login-panel-padding-x); transform: translateY(var(--login-form-offset-y)); }
141
142
  .jike-login-shell__form-panel h2 { font-size: var(--font-size-3xl); }
142
- .jike-login-shell__hint { margin: var(--space-2) 0 var(--login-subtitle-form-gap); color: var(--color-text-muted); font-size: var(--font-size-md); }
143
- .jike-login-shell__field { display: block; margin-bottom: var(--login-field-gap); color: var(--color-text-secondary); font-size: var(--font-size-md); font-weight: 600; }
143
+ .jike-login-shell__hint { margin: var(--space-2) 0 var(--login-subtitle-form-gap); color: var(--color-text-muted); font-size: var(--font-size-md); line-height: var(--login-form-line-height); }
144
+ .jike-login-shell__field { display: block; margin-bottom: var(--login-field-gap); color: var(--color-text-secondary); font-size: var(--font-size-md); font-weight: 600; line-height: var(--login-form-line-height); }
144
145
  .jike-login-shell__control { position: relative; display: block; margin-top: var(--space-2); }
145
146
  .jike-login-shell__control svg { position: absolute; top: 50%; left: var(--space-4); width: var(--icon-size-sm); height: var(--icon-size-sm); color: var(--color-text-muted); transform: translateY(-50%); pointer-events: none; }
146
- .jike-login-shell__control input { box-sizing: border-box; width: 100%; height: var(--login-control-height); padding: 0 var(--control-input-padding-x) 0 var(--control-input-icon-padding-left); color: var(--color-text-primary); font: inherit; font-size: var(--font-size-md); background: var(--color-bg-muted); border: var(--border-width-default) solid var(--color-border); border-radius: var(--radius-control); transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease; }
147
+ .jike-login-shell__control input { box-sizing: border-box; width: 100%; height: var(--login-control-height); padding: 0 var(--control-input-padding-x) 0 var(--control-input-icon-padding-left); color: var(--color-text-primary); font: inherit; font-size: var(--font-size-md); line-height: var(--login-form-line-height); background: var(--color-bg-muted); border: var(--border-width-default) solid var(--color-border); border-radius: var(--radius-control); transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease; }
147
148
  .jike-login-shell__control input:hover:not(:disabled) { border-color: var(--color-text-muted); background: var(--color-bg-surface); }
148
149
  .jike-login-shell__control input:focus { outline: none; border-color: var(--color-primary); background: var(--color-bg-surface); box-shadow: var(--focus-ring); }
149
150
  .jike-login-shell__control input[aria-invalid="true"] { border-color: var(--color-danger); }
150
151
  .jike-login-shell__control input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, .18); }
151
152
  .jike-login-shell__control input:disabled { cursor: not-allowed; background: var(--color-bg-muted); }
152
- .jike-login-shell__error { margin: calc(var(--space-2) * -1) 0 var(--space-4); color: var(--color-danger); font-size: var(--font-size-sm); }
153
- .jike-login-shell__submit { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; height: var(--login-control-height); margin-top: var(--login-button-gap); color: var(--color-bg-surface); font: inherit; font-size: var(--font-size-lg); font-weight: 600; background: var(--color-brand); border: var(--border-width-default) solid var(--color-brand); border-radius: var(--radius-control); transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
153
+ .jike-login-shell__error { margin: calc(var(--space-2) * -1) 0 var(--space-4); color: var(--color-danger); font-size: var(--font-size-sm); line-height: var(--login-form-line-height); }
154
+ .jike-login-shell__submit { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; height: var(--login-control-height); margin-top: var(--login-button-gap); color: var(--color-bg-surface); font: inherit; font-size: var(--font-size-lg); font-weight: 600; line-height: var(--login-form-line-height); background: var(--color-brand); border: var(--border-width-default) solid var(--color-brand); border-radius: var(--radius-control); transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
154
155
  .jike-login-shell__submit:hover:not(:disabled) { background: var(--color-brand-hover); border-color: var(--color-brand-hover); }
155
156
  .jike-login-shell__submit:focus-visible { outline: none; box-shadow: var(--focus-ring); }
156
157
  .jike-login-shell__submit:active:not(:disabled) { transform: translateY(1px); }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jike-js/ui",
3
- "version": "0.1.0",
3
+ "version": "0.1.1",
4
4
  "description": "jike 统一前端组件实现",
5
5
  "license": "MIT",
6
6
  "repository": {