feat(projects): add event bus hooks demo

soybeanjs · Dec 14, 2024 · b7080ed · b7080ed
1 parent 9f14555
commit b7080ed
Show file tree

Hide file tree

Showing 8 changed files with 133 additions and 0 deletions.
diff --git a/src/locales/langs/en-us/route.ts b/src/locales/langs/en-us/route.ts
@@ -16,6 +16,7 @@ const route: App.I18n.Schema['translation']['route'] = {
   exception_404: '404',
   exception_500: '500',
   function: 'System Function',
+  'function_event-bus': 'Event Bus Demo',
   'function_hide-child': 'Hide Child',
   'function_hide-child_one': 'Hide Child',
   'function_hide-child_three': 'Three',

diff --git a/src/locales/langs/zh-cn/route.ts b/src/locales/langs/zh-cn/route.ts
@@ -16,6 +16,7 @@ const route: App.I18n.Schema['translation']['route'] = {
   exception_404: '404',
   exception_500: '500',
   function: '系统功能',
+  'function_event-bus': '事件总线演示',
   'function_hide-child': '隐藏子菜单',
   'function_hide-child_one': '隐藏子菜单',
   'function_hide-child_three': '菜单三',

diff --git a/src/pages/function/event-bus/index.tsx b/src/pages/function/event-bus/index.tsx
@@ -0,0 +1,114 @@
+import { useEmit, useOn } from '@sa/hooks';
+
+const { Text, Title } = ATypography;
+
+// Sender 组件：负责发送消息
+function Sender() {
+  const emit = useEmit();
+  const sendMessage = () => {
+    emit('message', 'Hello from Sender!', new Date().toLocaleTimeString());
+  };
+
+  return (
+    <ACard
+      className="shadow-sm transition-shadow duration-300 hover:shadow-md"
+      title={
+        <ASpace>
+          <IconAntDesignSendOutlined className="text-blue-500" />
+          <Text strong>Sender Component</Text>
+        </ASpace>
+      }
+    >
+      <AButton
+        className="w-full"
+        icon={<IconAntDesignSendOutlined />}
+        size="large"
+        type="primary"
+        onClick={sendMessage}
+      >
+        Send Message
+      </AButton>
+    </ACard>
+  );
+}
+
+// Receiver 组件：负责接收消息
+function Receiver() {
+  const [message, setMessage] = useState<string>('');
+  const [time, setTime] = useState<string>('');
+
+  useOn('message', (msg: string, timestamp: string) => {
+    setMessage(msg);
+    setTime(timestamp);
+  });
+
+  const MessageDisplay = () => (
+    <ASpace
+      className="w-full"
+      direction="vertical"
+    >
+      <div className="rounded-lg">
+        <Text type="secondary">Message:</Text>
+        <Text
+          strong
+          className="block"
+        >
+          {message}
+        </Text>
+        <ADivider className="my-2" />
+        <Text type="secondary">Received at:</Text>
+        <Text className="block">{time}</Text>
+      </div>
+    </ASpace>
+  );
+
+  const EmptyMessage = () => (
+    <div className="py-4 text-center text-gray-400">
+      <div className="mb-2 text-2xl">
+        <IconAntDesignInboxOutlined />
+      </div>
+      <Text type="secondary">No message received.</Text>
+    </div>
+  );
+
+  return (
+    <ACard
+      className="shadow-sm transition-shadow duration-300 hover:shadow-md"
+      title={
+        <ASpace>
+          <IconAntDesignInboxOutlined className="text-green-500" />
+          <Text strong>Receiver Component</Text>
+        </ASpace>
+      }
+    >
+      {message ? <MessageDisplay /> : <EmptyMessage />}
+    </ACard>
+  );
+}
+
+export function Component() {
+  return (
+    <ACard
+      bordered={false}
+      className="h-full card-wrapper"
+      size="small"
+    >
+      <Title
+        className="mb-8 text-center"
+        level={2}
+      >
+        Event Bus Example: Sibling Communication
+      </Title>
+      <ASpace
+        className="w-full"
+        direction="vertical"
+        size="large"
+      >
+        <Sender />
+        <Receiver />
+      </ASpace>
+    </ACard>
+  );
+}
+
+Component.displayName = 'EventBusDemo';
diff --git a/src/router/elegant/imports.ts b/src/router/elegant/imports.ts
@@ -22,6 +22,7 @@ export const pages: Record<LastLevelRouteKey, LazyRouteFunction<CustomRouteObjec
   500: () => import("@/pages/_builtin/500/index.tsx"),
   "iframe-page": () => import("@/pages/_builtin/iframe-page/[url].tsx"),
   about: () => import("@/pages/about/index.tsx"),
+  "function_event-bus": () => import("@/pages/function/event-bus/index.tsx"),
   "function_hide-child_one": () => import("@/pages/function/hide-child/one/index.tsx"),
   "function_hide-child_three": () => import("@/pages/function/hide-child/three/index.tsx"),
   "function_hide-child_two": () => import("@/pages/function/hide-child/two/index.tsx"),

diff --git a/src/router/elegant/routes.ts b/src/router/elegant/routes.ts
@@ -61,6 +61,16 @@ export const generatedRoutes: GeneratedRoute[] = [
       order: 6
     },
     children: [
+      {
+        name: 'function_event-bus',
+        path: 'event-bus',
+        component: 'view.function_event-bus',
+        meta: {
+          i18nKey: 'route.function_event-bus',
+          title: 'function_event-bus',
+          icon: 'ant-design:send-outlined'
+        }
+      },
       {
         name: 'function_hide-child',
         path: 'hide-child',

diff --git a/src/router/elegant/transform.ts b/src/router/elegant/transform.ts
@@ -218,6 +218,7 @@ const routeMap: RouteMap = {
   "500": "/500",
   "about": "/about",
   "function": "/function",
+  "function_event-bus": "event-bus",
   "function_hide-child": "hide-child",
   "function_hide-child_one": "one",
   "function_hide-child_three": "three",

diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts
@@ -37,6 +37,7 @@ declare global {
   const ATag: typeof import('antd')['Tag']
   const ATooltip: typeof import('antd')['Tooltip']
   const ATree: typeof import('antd')['Tree']
+  const ATypography: typeof import('antd')['Typography']
   const AWatermark: typeof import('antd')['Watermark']
   const AppProvider: typeof import('../components/stateful/AppProvider')['default']
   const BetterScroll: typeof import('../components/stateless/custom/BetterScroll')['default']
@@ -48,7 +49,9 @@ declare global {
   const FullScreen: typeof import('../components/stateless/common/FullScreen')['default']
   const GlobalLoading: typeof import('../components/stateless/common/GlobalLoading')['default']
   const IconAntDesignEnterOutlined: typeof import('~icons/ant-design/enter-outlined.tsx')['default']
+  const IconAntDesignInboxOutlined: typeof import('~icons/ant-design/inbox-outlined.tsx')['default']
   const IconAntDesignReloadOutlined: typeof import('~icons/ant-design/reload-outlined.tsx')['default']
+  const IconAntDesignSendOutlined: typeof import('~icons/ant-design/send-outlined.tsx')['default']
   const IconAntDesignSettingOutlined: typeof import('~icons/ant-design/setting-outlined.tsx')['default']
   const IconCarbonAdd: typeof import('~icons/carbon/add.tsx')['default']
   const IconGridiconsFullscreen: typeof import('~icons/gridicons/fullscreen.tsx')['default']

diff --git a/src/types/elegant-router.d.ts b/src/types/elegant-router.d.ts
@@ -37,6 +37,7 @@ declare module "@elegant-router/types" {
     "500": "/500";
     "about": "/about";
     "function": "/function";
+    "function_event-bus": "event-bus";
     "function_hide-child": "hide-child";
     "function_hide-child_one": "one";
     "function_hide-child_three": "three";
@@ -144,6 +145,7 @@ declare module "@elegant-router/types" {
     | "500"
     | "iframe-page"
     | "about"
+    | "function_event-bus"
     | "function_hide-child_one"
     | "function_hide-child_three"
     | "function_hide-child_two"