feat(components): 添加通知弹出位置的设置项

caixw · caixw · commit 37cd8cf6df2c · 2026-07-22T13:37:28.000+08:00
diff --git a/apps/docs/src/components/demo/config/options/api.zh-Hans.json b/apps/docs/src/components/demo/config/options/api.zh-Hans.json
@@ -46,6 +46,12 @@
 				"type": "\"system\" | \"dark\" | \"light\" | undefined",
 				"def": "'system'\n\n"
 			},
+			{
+				"name": "palette",
+				"summary": "默认的主题调色板，当在\n`config`\n中存在时，当前值将被忽略。\n\n",
+				"type": "\"primary\" | \"secondary\" | \"tertiary\" | \"error\" | \"surface\" | undefined",
+				"def": "'surface'\n\n"
+			},
 			{
 				"name": "transitionDuration",
 				"summary": "动画效果的时长，单位为 ms。当在\n`config`\n中存在时，当前值将被忽略。\n\n",
diff --git a/apps/docs/src/components/demo/notify/notify.tsx b/apps/docs/src/components/demo/notify/notify.tsx
@@ -21,6 +21,7 @@ export default function (): JSX.Element {
 		<>
 			<div class="flex w-40 flex-col gap-2">
 				<Choice
+					closable
 					placeholder="type"
 					value={typ()}
 					onChange={setTyp}
@@ -33,6 +34,7 @@ export default function (): JSX.Element {
 					placeholder="position"
 					value={pos()}
 					onChange={setPos}
+					closable
 					options={Notify.positions.map(v => {
 						return { type: 'item', value: v, label: v };
 					})}
diff --git a/apps/docs/src/components/demo/wizard/tour/api.zh-Hans.json b/apps/docs/src/components/demo/wizard/tour/api.zh-Hans.json
@@ -11,7 +11,8 @@
 			{
 				"name": "accentPalette",
 				"summary": "突出元素的色盘\n\n",
-				"type": "\"primary\" | \"secondary\" | \"tertiary\" | \"error\" | \"surface\" | undefined"
+				"type": "\"primary\" | \"secondary\" | \"tertiary\" | \"error\" | \"surface\" | undefined",
+				"reactive": true
 			},
 			{
 				"name": "start",
diff --git a/apps/docs/src/docs/usage/api.zh-Hans.json b/apps/docs/src/docs/usage/api.zh-Hans.json
@@ -21,5 +21,47 @@
 			"type": "void"
 		},
 		"pkg": "@cmfx/core"
+	},
+	{
+		"kind": "function",
+		"name": "palette",
+		"summary": "获取当前元素所属的色盘\n\n",
+		"type": "function palette(elem: HTMLElement, next?: number): Palette | undefined",
+		"params": [
+			{
+				"name": "elem",
+				"summary": "查询的元素；\n\n",
+				"type": "HTMLElement"
+			},
+			{
+				"name": "next",
+				"summary": "如果指定了该值，则表示当前色盘往后移动的数量；\n\n",
+				"type": "number | undefined"
+			}
+		],
+		"return": {
+			"type": "\"primary\" | \"secondary\" | \"tertiary\" | \"error\" | \"surface\" | undefined"
+		},
+		"pkg": "@cmfx/themes"
+	},
+	{
+		"kind": "function",
+		"name": "nextPalette",
+		"summary": "计算色盘 p 之后 next 的色盘\n\n",
+		"type": "function nextPalette(p: Palette, next?: number): Palette",
+		"params": [
+			{
+				"name": "p",
+				"type": "\"primary\" | \"secondary\" | \"tertiary\" | \"error\" | \"surface\""
+			},
+			{
+				"name": "next",
+				"type": "number | undefined"
+			}
+		],
+		"return": {
+			"type": "\"primary\" | \"secondary\" | \"tertiary\" | \"error\" | \"surface\""
+		},
+		"pkg": "@cmfx/themes"
 	}
 ]
diff --git a/packages/components/src/context/options/context.tsx b/packages/components/src/context/options/context.tsx
@@ -8,16 +8,19 @@ import { createContext, type JSX, type ParentProps, splitProps, useContext } fro
 import { createStore } from 'solid-js/store';
 
 import { LocaleProvider } from '@components/context/locale';
-import type { ReqOptions } from './options';
-
-const localeKey = 'locale';
-const displayStyleKey = 'display-style';
-const schemeKey = 'scheme';
-const modeKey = 'mode';
-const tzKey = 'timezone';
-const staysKey = 'stays';
-const fontSizeKey = 'font-size';
-const transitionDurationKey = 'transition-duration';
+import type { ConfigurableOptions, NotifyPosition, ReqOptions } from './options';
+
+const keys: Record<keyof ConfigurableOptions, string> = {
+	fontSize: 'font-size',
+	scheme: 'scheme',
+	mode: 'mode',
+	transitionDuration: 'transition-duration',
+	locale: 'locale',
+	displayStyle: 'display-style',
+	timezone: 'timezone',
+	stays: 'stays',
+	notifyPosition: 'notify-position',
+} as const;
 
 /**
  * 提供了对全局配置的存取功能
@@ -83,19 +86,21 @@ export function buildAccessor(o: ReqOptions) {
 		stays: o.stays,
 		fontSize: o.fontSize,
 		transitionDuration: o.transitionDuration,
+		notifyPosition: o.notifyPosition,
 	});
 
 	const read = () => {
 		// 从配置内容中读取
 		set({
-			scheme: conf.get(schemeKey) ?? val.scheme,
-			mode: conf.get(modeKey) ?? val.mode,
-			locale: conf.get(localeKey) ?? val.locale,
-			displayStyle: conf.get(displayStyleKey) ?? val.displayStyle,
-			timezone: conf.get(tzKey) ?? val.timezone,
-			stays: conf.get(staysKey) ?? val.stays,
-			fontSize: conf.get(fontSizeKey) ?? val.fontSize,
-			transitionDuration: conf.get(transitionDurationKey) ?? val.transitionDuration,
+			scheme: conf.get(keys.scheme) ?? val.scheme,
+			mode: conf.get(keys.mode) ?? val.mode,
+			locale: conf.get(keys.locale) ?? val.locale,
+			displayStyle: conf.get(keys.displayStyle) ?? val.displayStyle,
+			timezone: conf.get(keys.timezone) ?? val.timezone,
+			stays: conf.get(keys.stays) ?? val.stays,
+			fontSize: conf.get(keys.fontSize) ?? val.fontSize,
+			transitionDuration: conf.get(keys.transitionDuration) ?? val.transitionDuration,
+			notifyPosition: conf.get(keys.notifyPosition) ?? val.notifyPosition,
 		});
 
 		if (val.fontSize !== document.documentElement.style.fontSize) {
@@ -150,7 +155,7 @@ export function buildAccessor(o: ReqOptions) {
 		 */
 		setFontSize(size: string): void {
 			set({ fontSize: size });
-			conf.set(fontSizeKey, size);
+			conf.set(keys.fontSize, size);
 			document.documentElement.style.fontSize = size;
 		},
 
@@ -163,7 +168,7 @@ export function buildAccessor(o: ReqOptions) {
 		 */
 		setTransitionDuration(duration: number): void {
 			set({ transitionDuration: duration });
-			conf.set(transitionDurationKey, duration);
+			conf.set(keys.transitionDuration, duration);
 			document.documentElement.style.setProperty('--default-transition-duration', `${duration}ms`);
 		},
 
@@ -178,7 +183,7 @@ export function buildAccessor(o: ReqOptions) {
 		 */
 		setLocale(id: string): void {
 			set({ locale: id });
-			conf.set(localeKey, id);
+			conf.set(keys.locale, id);
 			document.documentElement.lang = id;
 		},
 
@@ -191,7 +196,7 @@ export function buildAccessor(o: ReqOptions) {
 		 */
 		setDisplayStyle(style: DisplayStyle): void {
 			set({ displayStyle: style });
-			conf.set(displayStyleKey, style);
+			conf.set(keys.displayStyle, style);
 		},
 
 		getDisplayStyle(): DisplayStyle {
@@ -203,7 +208,7 @@ export function buildAccessor(o: ReqOptions) {
 		 */
 		setTimezone(tz: string): void {
 			set({ timezone: tz });
-			conf.set(tzKey, tz);
+			conf.set(keys.timezone, tz);
 		},
 
 		getTimezone(): string {
@@ -223,7 +228,7 @@ export function buildAccessor(o: ReqOptions) {
 			}
 
 			set({ scheme: s });
-			conf.set(schemeKey, s);
+			conf.set(keys.scheme, s);
 		},
 
 		getScheme(): Scheme {
@@ -235,7 +240,7 @@ export function buildAccessor(o: ReqOptions) {
 		 */
 		setMode(mode: Mode): void {
 			set({ mode: mode });
-			conf.set(modeKey, mode);
+			conf.set(keys.mode, mode);
 		},
 
 		getMode(): Mode {
@@ -247,13 +252,25 @@ export function buildAccessor(o: ReqOptions) {
 		 */
 		setStays(stay: number): void {
 			set({ stays: stay });
-			conf.set(staysKey, stay);
+			conf.set(keys.stays, stay);
 		},
 
 		getStays(): number {
 			return val.stays;
 		},
 
+		/**
+		 * 设置当前配置中通知的显示位置
+		 */
+		setNotifyPosition(position: NotifyPosition): void {
+			set({ notifyPosition: position });
+			conf.set(keys.notifyPosition, position);
+		},
+
+		getNotifyPosition(): NotifyPosition {
+			return val.notifyPosition;
+		},
+
 		/**
 		 * 清除当前用户的配置
 		 */
diff --git a/packages/components/src/context/options/options.tsx b/packages/components/src/context/options/options.tsx
@@ -11,30 +11,14 @@ import { default as IconLoading } from '~icons/cmfx/loading';
 import { handleProblem, type ProblemHandler } from './problem';
 import styles from './style.module.css';
 
-/**
- * 组件库的全局配置项
- */
-export interface Options {
-	/**
-	 * 提供用于保存配置项到 {@link Storage} 对象的接口
-	 */
-	config: Config;
-
-	/**
-	 * 项目的 LOGO
-	 */
-	logo: string;
+export const notifyPositions = ['top', 'bottom'] as const;
 
-	/**
-	 * 表示加载状态的组件
-	 *
-	 * @remarks
-	 * 在页面未加载完成之前会显示此组件的内容。一般为一个动态的图标组件。
-	 *
-	 * @defaultValue `~icons/cmfx/loading`
-	 */
-	loading?: Component<ThemeProps>;
+export type NotifyPosition = (typeof notifyPositions)[number];
 
+/**
+ * 可配置的配置项
+ */
+export interface ConfigurableOptions {
 	/**
 	 * 字体大小，当在 {@link config} 中存在时，当前值将被忽略。
 	 */
@@ -50,16 +34,6 @@ export interface Options {
 	 */
 	scheme?: string | Scheme;
 
-	/**
-	 * 支持的主题列表
-	 *
-	 * @remarks
-	 * {@link ../theme/schemes#schemes} 下定义部分主题可以直接在此处使用。
-	 *
-	 * @defaultValue `new Map()`
-	 */
-	schemes?: Map<string, Scheme>;
-
 	/**
 	 * 默认的主题模式，当在 {@link config} 中存在时，当前值将被忽略。
 	 *
@@ -102,6 +76,48 @@ export interface Options {
 	 */
 	stays?: number;
 
+	/**
+	 * 通知的显示位置
+	 *
+	 * @defaultValue 'top'
+	 */
+	notifyPosition?: NotifyPosition;
+}
+
+/**
+ * 组件库的全局配置项
+ */
+export interface Options extends ConfigurableOptions {
+	/**
+	 * 提供用于保存配置项到 {@link Storage} 对象的接口
+	 */
+	config: Config;
+
+	/**
+	 * 项目的 LOGO
+	 */
+	logo: string;
+
+	/**
+	 * 表示加载状态的组件
+	 *
+	 * @remarks
+	 * 在页面未加载完成之前会显示此组件的内容。一般为一个动态的图标组件。
+	 *
+	 * @defaultValue `~icons/cmfx/loading`
+	 */
+	loading?: Component<ThemeProps>;
+
+	/**
+	 * 支持的主题列表
+	 *
+	 * @remarks
+	 * {@link ../theme/schemes#schemes} 下定义部分主题可以直接在此处使用。
+	 *
+	 * @defaultValue `new Map()`
+	 */
+	schemes?: Map<string, Scheme>;
+
 	/**
 	 * 当前支持的语言列表以及加载方法
 	 */
@@ -162,6 +178,7 @@ export const presetOptions: PickOptional<Options> = {
 	mode: 'system',
 	timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
 	stays: 5000,
+	notifyPosition: 'top',
 	titleSeparator: ' - ',
 	pageSizes: [10, 20, 50, 100],
 	pageSize: 20,
diff --git a/packages/components/src/messages/en.lang.ts b/packages/components/src/messages/en.lang.ts
@@ -127,6 +127,10 @@ const messages = {
 			transitionDuration: 'Transition duration',
 			transitionDurationDesc:
 				'Sets the duration of all animation effects. If animations are disabled in the operating system, this setting will not be available.',
+			notifyPosition: 'Notify position',
+			notifyPositionDesc: 'Set the position of the notify',
+			topPosition: 'Top',
+			bottomPosition: 'Bottom',
 		},
 		table: {
 			nodata: 'No data',
diff --git a/packages/components/src/messages/zh-Hans.lang.ts b/packages/components/src/messages/zh-Hans.lang.ts
@@ -128,6 +128,10 @@ const messages: Messages = {
 			resetOptions: '重置设置项',
 			transitionDuration: '动画时长',
 			transitionDurationDesc: '设置所有动画效果的时长，如果操作系统禁用了动画，那么此处将无法设置！',
+			notifyPosition: '通知位置',
+			notifyPositionDesc: '设置通知出现的位置',
+			topPosition: '顶部',
+			bottomPosition: '底部',
 		},
 		table: {
 			nodata: '没有数据',
diff --git a/packages/components/src/notify/notify/notify.tsx b/packages/components/src/notify/notify/notify.tsx
diff --git a/packages/components/src/settings/root.tsx b/packages/components/src/settings/root.tsx

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,8 @@`
`11`	`11`	`{`
`12`	`12`	`"name": "accentPalette",`
`13`	`13`	`"summary": "突出元素的色盘\n\n",`
`14`		`- "type": "\"primary\" \| \"secondary\" \| \"tertiary\" \| \"error\" \| \"surface\" \| undefined"`
	`14`	`+ "type": "\"primary\" \| \"secondary\" \| \"tertiary\" \| \"error\" \| \"surface\" \| undefined",`
	`15`	`+ "reactive": true`
`15`	`16`	`},`
`16`	`17`	`{`
`17`	`18`	`"name": "start",`