feat: 添加事件总线

Author: Ohh-889

src/pages/(base)/function/event-bus/index.tsx

@@ -0,0 +1,120 @@
+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>
+  );
+}
+
+const EventBusDemo = () => {
+  return (
+    <ACard
+      className="h-full card-wrapper"
+      size="small"
+      variant="borderless"
+    >
+      <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>
+  );
+};
+
+export const handle = {
+  i18nKey: 'route.function_event-bus',
+  icon: 'ant-design:send-outlined',
+  title: 'function_event-bus'
+};
+
+export default EventBusDemo;

src/pages/(base)/projects/index.tsx

@@ -4,7 +4,7 @@ const Projects = () => {
 
 export const handle = {
   i18nKey: 'route.(base)_projects',
-  order: 6,
+  order: 10,
   title: '(base)_projects'
 };