mantur-components 0.1.1 → 0.1.3
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.
- package/README.md +43 -15
- package/dist/header/ManturHeader.d.ts +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/mantur-components.js +715 -402
- package/dist/mantur-components.umd.cjs +1 -1
- package/dist/types.d.ts +1 -0
- package/dist/utils/date.d.ts +6 -0
- package/package.json +4 -1
package/README.md
CHANGED
|
@@ -14,6 +14,8 @@ npm install mantur-components
|
|
|
14
14
|
npm install react react-dom @arco-design/web-react next-themes react-i18next
|
|
15
15
|
```
|
|
16
16
|
|
|
17
|
+
`next-themes` 用于组件库内置的 `ThemeSwitch`,它不是 Next.js 框架本身,普通 React/Vite 宿主也可以使用。
|
|
18
|
+
|
|
17
19
|
组件库使用 Tailwind 工具类,不再导出独立的 CSS 文件,不需要引入 `mantur-components/style.css`。
|
|
18
20
|
|
|
19
21
|
## ManturHeader
|
|
@@ -75,6 +77,7 @@ interface ManturHeaderProps {
|
|
|
75
77
|
disabled?: boolean;
|
|
76
78
|
brandSlot?: React.ReactNode;
|
|
77
79
|
children?: React.ReactNode;
|
|
80
|
+
onTenantContextChange?: (detail: ManturTenantContextDetail) => void;
|
|
78
81
|
}
|
|
79
82
|
```
|
|
80
83
|
|
|
@@ -86,6 +89,8 @@ interface ManturHeaderProps {
|
|
|
86
89
|
|
|
87
90
|
`children`:Header 中间弹性区域插槽。传入后显示传入内容;不传则保持为空。
|
|
88
91
|
|
|
92
|
+
`onTenantContextChange`:Header 完成团队上下文初始化或切换团队成功后触发,直接透出当前选中团队、团队列表和当前团队认证上下文。宿主项目需要同步自己的 store 时优先使用这个回调。
|
|
93
|
+
|
|
89
94
|
### 用户类型
|
|
90
95
|
|
|
91
96
|
```ts
|
|
@@ -118,14 +123,10 @@ window.__MANTUR_COMPONENTS_POINTS_ENDPOINT__ = "/users/me/points";
|
|
|
118
123
|
|
|
119
124
|
团队列表、当前团队、切换团队都由 `ManturHeader` 内部处理。
|
|
120
125
|
|
|
121
|
-
如果宿主项目需要同步自己的 store,例如 `activeTenantId
|
|
126
|
+
如果宿主项目需要同步自己的 store,例如 `activeTenantId`、权限、角色、已开通应用,优先通过 `ManturHeader` 的 `onTenantContextChange` 回调获取当前团队上下文。
|
|
122
127
|
|
|
123
128
|
```tsx
|
|
124
|
-
import {
|
|
125
|
-
getManturTenantContextSnapshot,
|
|
126
|
-
MANTUR_TENANT_CONTEXT_CHANGE_EVENT,
|
|
127
|
-
type ManturTenantContextDetail,
|
|
128
|
-
} from "mantur-components";
|
|
129
|
+
import { ManturHeader, type ManturTenantContextDetail } from "mantur-components";
|
|
129
130
|
|
|
130
131
|
function applyTenantContext(detail: ManturTenantContextDetail) {
|
|
131
132
|
const tenantId = detail.auth?.tenantId || detail.currentTenant?.tenantId;
|
|
@@ -137,15 +138,8 @@ function applyTenantContext(detail: ManturTenantContextDetail) {
|
|
|
137
138
|
// setEnabledApps(detail.auth?.enabledApps || [])
|
|
138
139
|
}
|
|
139
140
|
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
applyTenantContext(event.detail as ManturTenantContextDetail);
|
|
143
|
-
}
|
|
144
|
-
});
|
|
145
|
-
|
|
146
|
-
const snapshot = getManturTenantContextSnapshot();
|
|
147
|
-
if (snapshot) {
|
|
148
|
-
applyTenantContext(snapshot);
|
|
141
|
+
function Header({ userInfo }: { userInfo: UserInfo | null }) {
|
|
142
|
+
return <ManturHeader user={userInfo} onTenantContextChange={applyTenantContext} />;
|
|
149
143
|
}
|
|
150
144
|
```
|
|
151
145
|
|
|
@@ -166,10 +160,44 @@ interface ManturTenantContextDetail {
|
|
|
166
160
|
}
|
|
167
161
|
```
|
|
168
162
|
|
|
163
|
+
## i18n 文案
|
|
164
|
+
|
|
165
|
+
组件库文案按组件拆分为 JSON 文件,目录结构为:
|
|
166
|
+
|
|
167
|
+
```text
|
|
168
|
+
src/i18n/locales/{locale}/{component}.json
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
例如:
|
|
172
|
+
|
|
173
|
+
```text
|
|
174
|
+
src/i18n/locales/zh-CN/header.json
|
|
175
|
+
src/i18n/locales/zh-CN/lang-switch.json
|
|
176
|
+
src/i18n/locales/en-US/header.json
|
|
177
|
+
src/i18n/locales/en-US/lang-switch.json
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
新增组件文案时,按组件新增对应 JSON 文件,并在 `src/i18n.ts` 中聚合。
|
|
181
|
+
|
|
182
|
+
## 日期工具
|
|
183
|
+
|
|
184
|
+
组件库导出 `formatDateByLang`,用于按语言格式化日期:
|
|
185
|
+
|
|
186
|
+
```ts
|
|
187
|
+
import { formatDateByLang } from "mantur-components";
|
|
188
|
+
|
|
189
|
+
formatDateByLang("2026-05-19T12:00:00Z");
|
|
190
|
+
formatDateByLang("2026-05-19T12:00:00Z", "date");
|
|
191
|
+
formatDateByLang("2026-05-19T12:00:00Z", "datetime", "en-US");
|
|
192
|
+
```
|
|
193
|
+
|
|
194
|
+
未传语言时会读取组件库当前语言;中文输出 `YYYY-MM-DD` / `YYYY-MM-DD HH:mm:ss`,英文输出 `MM/DD/YYYY` / `MM/DD/YYYY HH:mm:ss`。
|
|
195
|
+
|
|
169
196
|
## 导出的工具方法
|
|
170
197
|
|
|
171
198
|
```ts
|
|
172
199
|
import {
|
|
200
|
+
formatDateByLang,
|
|
173
201
|
getManturCurrentTenant,
|
|
174
202
|
getManturTenantContextSnapshot,
|
|
175
203
|
getManturTenants,
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import type { ManturHeaderProps } from "../types";
|
|
2
|
-
export declare function ManturHeader({ user, disabled, brandSlot, children, }: ManturHeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export declare function ManturHeader({ user, disabled, brandSlot, children, onTenantContextChange, }: ManturHeaderProps): import("react/jsx-runtime").JSX.Element;
|
package/dist/index.d.ts
CHANGED
|
@@ -3,5 +3,7 @@ export { getManturCurrentTenant, getManturTenantContextSnapshot, getManturTenant
|
|
|
3
3
|
export { getManturMessages, getStoredManturLocale, MANTUR_LANGUAGE_CHANGE_EVENT, MANTUR_LANGUAGE_SOURCE_STORAGE_KEY, MANTUR_LANGUAGE_STORAGE_KEY, MANTUR_MESSAGES, normalizeManturLocale, } from "./i18n";
|
|
4
4
|
export { LangSwitch, LANGUAGE_SOURCE_STORAGE_KEY, LANGUAGE_STORAGE_KEY } from "./lang-switch";
|
|
5
5
|
export { ThemeSwitch } from "./theme-switch";
|
|
6
|
+
export { formatDateByLang } from "./utils/date";
|
|
6
7
|
export type { ManturLocale, ManturMessages } from "./i18n";
|
|
8
|
+
export type { ManturDateFormatType, ManturDateInput } from "./utils/date";
|
|
7
9
|
export type { ManturHeaderLabels, ManturHeaderProps, ManturHeaderUser, ManturProfileValues, ManturRole, ManturTenant, ManturTenantAuthContext, ManturTenantContextDetail, ManturUserPoints, } from "./types";
|