✨ feat: 增加 AppContainer 组件

docs/demos/AppContainer/WithoutProvider.tsx

@@ -0,0 +1,11 @@
+/**
+ * iframe: 80
+ */
+const App = () => {
+  return (
+    <div style={{ padding: 16 }}>
+      <a href="">节点样式</a>
+    </div>
+  );
+};
+export default App;

docs/demos/AppContainer/default.tsx

@@ -1,33 +1,16 @@
 /**
- * iframe: true
+ * iframe: 80
  */
-import { Button, Divider, Space } from 'antd';
-import { AppContainer, message } from 'antd-style';
+import { AppContainer } from 'antd-style';
 
-const App = () => {
-  return (
-    <Space>
-      <Button
-        onClick={() => {
-          message.success('成功');
-        }}
-      >
-        打开 message
-      </Button>
-      <a href="">节点样式</a>
-    </Space>
-  );
-};
 export default () => {
   return (
     <>
-      <AppContainer appearance={'dark'}>
-        <App />
+      <AppContainer>
+        <div style={{ padding: 16 }}>
+          <a href="">节点样式</a>
+        </div>
       </AppContainer>
-
-      <Divider>没有包裹</Divider>
-
-      <App />
     </>
   );
 };

docs/guide/styled.md

@@ -0,0 +1,7 @@
+---
+title: 使用 styled
+---
+
+# 使用 styled 组织样式组件
+
+antd-style 中 styled 的 `styled` 方法和 `styled-component` 基本一致

docs/usage/app-container.md

@@ -2,6 +2,8 @@
 title: AppContainer
 order: 2
 group: 容器组件
+demo:
+  cols: 2
 ---
 
 # AppContainer
@@ -12,7 +14,12 @@ group: 容器组件
 
 ## 基础使用
 
+### 基础样式重置
+
+如果没有包裹，在 dumi 文档中 a 节点的默认效果右下所示，而通过 antd App 组件的样式重置，可以保障不在 antd 组件中的原生标签也能符合 antd 的默认样式：
+
 <code src="../demos/AppContainer/default.tsx"></code>
+<code src="../demos/AppContainer/WithoutProvider.tsx"></code>
 
 ## 与 ThemeProvider 的区别？
 

src/containers/AppContainer/AntdProvider.tsx

@@ -0,0 +1,18 @@
+import { App, ConfigProvider } from 'antd';
+import { ConfigProviderProps } from 'antd/es/config-provider';
+import { type FC } from 'react';
+
+import StaticMethod from './AntdStaticMethod';
+
+const AntdProvider: FC<ConfigProviderProps> = ({ children, ...props }) => {
+  return (
+    <ConfigProvider {...props}>
+      <App>
+        <StaticMethod />
+        {children}
+      </App>
+    </ConfigProvider>
+  );
+};
+
+export default AntdProvider;

src/containers/AppContainer/AntdStaticMethod.tsx

@@ -0,0 +1,19 @@
+// Entry component
+import { App } from 'antd';
+import type { MessageInstance } from 'antd/es/message/interface';
+import type { ModalStaticFunctions } from 'antd/es/modal/confirm';
+import type { NotificationInstance } from 'antd/es/notification/interface';
+
+let message: MessageInstance;
+let notification: NotificationInstance;
+let modal: Omit<ModalStaticFunctions, 'warn'>;
+
+export default () => {
+  const staticFunction = App.useApp();
+  message = staticFunction.message;
+  modal = staticFunction.modal;
+  notification = staticFunction.notification;
+  return null;
+};
+
+export { message, notification, modal };

src/containers/AppContainer/AppContainer.tsx

@@ -0,0 +1,35 @@
+import { ThemeConfig } from 'antd/es/config-provider/context';
+import { FC, ReactNode } from 'react';
+
+import AntdProvider from './AntdProvider';
+
+export type DisplayTheme = 'dark' | 'light';
+
+export type ThemeMode = 'auto' | 'dark' | 'light';
+
+export interface AppContainerProps {
+  /**
+   * 应用的展示外观主题，只存在亮色和暗色两种
+   */
+  appearance?: DisplayTheme;
+  defaultAppearance?: DisplayTheme;
+  onAppearanceChange?: (mode: DisplayTheme) => void;
+  /**
+   * 主题的展示模式，有三种配置：跟随系统、亮色、暗色
+   * 默认不开启自动模式，需要手动进行配置
+   * @default light
+   */
+  themeMode?: ThemeMode;
+  defaultThemeMode?: ThemeMode;
+  onThemeModeChange?: (mode: ThemeMode) => void;
+
+  /**
+   * 透传到 antd CP 中的主题对象
+   */
+  antdTheme?: ThemeConfig;
+  children: ReactNode;
+}
+
+export const AppContainer: FC<AppContainerProps> = ({ children }) => {
+  return <AntdProvider>{children}</AntdProvider>;
+};

src/containers/AppContainer/index.ts

@@ -0,0 +1,2 @@
+export { message, modal, notification } from './AntdStaticMethod';
+export { AppContainer } from './AppContainer';

src/containers/index.ts

@@ -1 +1,2 @@
+export * from './AppContainer';
 export * from './ThemeProvider';