npmapps 1.1.4 → 1.1.6

package/app/wujie-wk/wujie-react-child/src/pages/ChildToParent/index.tsx

@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+import { Form, Input, Select, Button, InputNumber } from 'antd';
+import './index.css';
+
+const { Option } = Select;
+
+interface FormData {
+  title: string;
+  message: string;
+  type: 'success' | 'warning' | 'error' | 'info';
+  duration: number;
+}
+
+const ChildToParent: React.FC = () => {
+  const [formData, setFormData] = useState<FormData>({
+    title: 'react子应用测试title',
+    message: 'react子应用测试消息',
+    type: 'success',
+    duration: 3000
+  });
+
+  const handleChange = (field: keyof FormData, value: any) => {
+    setFormData(prev => ({
+      ...prev,
+      [field]: value
+    }));
+  };
+
+  const sendToParent = () => {
+    window.$wujie?.bus.$emit('child-event', {
+      message: formData.message,
+      type: formData.type,
+      duration: formData.duration,
+      title: formData.title
+    }, 'react子应用');
+  };
+
+  return (
+    <div className="child-to-parent">
+      <h1>子应用消息发送</h1>
+      <div className="form-container">
+        <Form layout="vertical">
+          <Form.Item label="标题：">
+            <Input
+              value={formData.title}
+              onChange={e => handleChange('title', e.target.value)}
+              placeholder="请输入标题"
+            />
+          </Form.Item>
+          <Form.Item label="消息：">
+            <Input
+              value={formData.message}
+              onChange={e => handleChange('message', e.target.value)}
+              placeholder="请输入消息内容"
+            />
+          </Form.Item>
+          <Form.Item label="类型：">
+            <Select
+              value={formData.type}
+              onChange={value => handleChange('type', value)}
+              style={{ width: '100%' }}
+            >
+              <Option value="success">成功</Option>
+              <Option value="warning">警告</Option>
+              <Option value="error">错误</Option>
+              <Option value="info">信息</Option>
+            </Select>
+          </Form.Item>
+          <Form.Item label="持续时间：">
+            <InputNumber
+              value={formData.duration}
+              onChange={value => handleChange('duration', value)}
+              placeholder="持续时间(ms)"
+              style={{ width: '100%' }}
+            />
+          </Form.Item>
+          <Form.Item>
+            <Button type="primary" onClick={sendToParent} block>
+              发送消息
+            </Button>
+          </Form.Item>
+        </Form>
+      </div>
+    </div>
+  );
+};
+
+export default ChildToParent;

package/app/wujie-wk/wujie-react-child/src/pages/Css.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Tabs, Card } from 'antd';
+import FeatureCards from '../components/FeatureCards';
+import LightCard from '../components/LightCard';
+
+const { TabPane } = Tabs;
+
+const Css: React.FC = () => {
+    return (
+        <Card>
+            <Tabs type="card">
+                <TabPane tab="卡片悬浮发光" key="2">
+                    <div>
+                        <LightCard />
+                    </div>
+                </TabPane>
+                <TabPane tab="3d旋转卡片" key="1">
+                    <div>
+                        <FeatureCards />
+                    </div>
+                </TabPane>
+
+            </Tabs>
+        </Card>
+    );
+};
+
+export default Css;

package/app/wujie-wk/wujie-react-child/src/pages/Home.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Card, Row, Col, Statistic, Typography, Space } from 'antd';
+import { UserOutlined, ProjectOutlined, TeamOutlined } from '@ant-design/icons';
+import { use3DCard } from '../hooks/use3DCard';
+import LightCard from '../components/LightCard';
+// import FeatureCards from '../components/FeatureCards';
+
+const { Title } = Typography;
+
+const Home: React.FC = () => {
+  const card1Ref = use3DCard({ sensitivity: 35 });
+  const card2Ref = use3DCard({ sensitivity: 35 });
+  const card3Ref = use3DCard({ sensitivity: 35 });
+
+  return (
+    <>
+      <div className="home" style={{ padding: '24px' }}>
+        <Title level={2} style={{ marginBottom: '24px', textAlign: 'center' }}>欢迎使用React微前端应用</Title>
+
+        <Row gutter={[16, 16]}>
+          <Col xs={24} sm={8}>
+            <Card hoverable ref={card1Ref} style={{ transition: 'transform 0.3s ease' }}>
+              <Statistic
+                title="活跃用户"
+                value={1234}
+                prefix={<UserOutlined />}
+                valueStyle={{ color: '#3f8600' }}
+              />
+            </Card>
+          </Col>
+          <Col xs={24} sm={8}>
+            <Card hoverable ref={card2Ref} style={{ transition: 'transform 0.3s ease' }}>
+              <Statistic
+                title="项目数量"
+                value={42}
+                prefix={<ProjectOutlined />}
+                valueStyle={{ color: '#1677ff' }}
+              />
+            </Card>
+          </Col>
+          <Col xs={24} sm={8}>
+            <Card hoverable ref={card3Ref} style={{ transition: 'transform 0.3s ease' }}>
+              <Statistic
+                title="团队成员"
+                value={18}
+                prefix={<TeamOutlined />}
+                valueStyle={{ color: '#722ed1' }}
+              />
+            </Card>
+          </Col>
+        </Row>
+
+        <Row style={{ marginTop: '24px' }}>
+          <Col span={24}>
+            <Card>
+              <Space direction="vertical" size="middle" style={{ width: '100%' }}>
+                <Title level={4}>系统公告</Title>
+                <p>• 欢迎使用我们的微前端解决方案！</p>
+                <p>• 本系统采用无界微前端框架，实现应用间的无缝集成。</p>
+                <p>• 如果您在使用过程中遇到任何问题，请随时联系技术支持团队。</p>
+              </Space>
+            </Card>
+          </Col>
+        </Row>
+      </div>
+      <LightCard />
+      {/* <FeatureCards /> */}
+    </>
+  );
+};
+
+export default Home;

package/app/wujie-wk/wujie-react-child/src/pages/ParentToChild.css

@@ -0,0 +1,85 @@
+.parent-to-child {
+  padding: 24px;
+  background-color: #f5f7fa;
+  min-height: 100vh;
+}
+
+.page-title {
+  color: #303133;
+  margin-bottom: 24px;
+  font-size: 24px;
+}
+
+.message-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 24px;
+}
+
+.message-section {
+  background: white;
+  border-radius: 8px;
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.message-list {
+  max-height: 500px;
+  overflow-y: auto;
+}
+
+.message-item {
+  padding: 12px;
+  border-bottom: 1px solid #ebeef5;
+  transition: background-color 0.3s;
+}
+
+.message-item:hover {
+  background-color: #f5f7fa;
+}
+
+.message-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.message-time {
+  font-size: 12px;
+  color: #909399;
+}
+
+.message-title {
+  margin: 8px 0;
+  font-size: 14px;
+  color: #303133;
+}
+
+.message-content {
+  margin: 8px 0 0;
+  color: #606266;
+  line-height: 1.5;
+}
+
+.empty-message {
+  padding: 30px 0;
+}
+
+/* 滚动条样式 */
+.message-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.message-list::-webkit-scrollbar-thumb {
+  background: #c0c4cc;
+  border-radius: 3px;
+}
+
+.message-list::-webkit-scrollbar-track {
+  background: #f5f7fa;
+}

package/app/wujie-wk/wujie-react-child/src/pages/ParentToChild.tsx

@@ -0,0 +1,119 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Card, Empty, Tag } from 'antd';
+import './ParentToChild.css';
+
+interface Message {
+  type: 'info' | 'success' | 'warning' | 'error';
+  title: string;
+  message: string;
+  time: string;
+}
+
+const ParentToChild: React.FC = () => {
+  const [globalMessages, setGlobalMessages] = useState<Message[]>([]);
+  const [directMessages, setDirectMessages] = useState<Message[]>([]);
+
+  const formatTime = () => {
+    const now = new Date();
+    return `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
+  };
+
+  const clearGlobalMessages = () => {
+    setGlobalMessages([]);
+  };
+
+  const clearDirectMessages = () => {
+    setDirectMessages([]);
+  };
+
+  useEffect(() => {
+    // 监听全局广播消息
+    window.$wujie?.bus.$on('global-message', (data: Omit<Message, 'time'>) => {
+      setGlobalMessages(prev => [{
+        ...data,
+        time: formatTime()
+      }, ...prev]);
+    });
+
+    // 监听定向消息
+    window.$wujie?.bus.$on('react-child-message', (data: Omit<Message, 'time'>) => {
+      setDirectMessages(prev => [{
+        ...data,
+        time: formatTime()
+      }, ...prev]);
+    });
+
+    return () => {
+      // 移除全局广播消息监听
+      window.$wujie?.bus.$off('global-message');
+      // 移除定向消息监听
+      window.$wujie?.bus.$off('react-child-message');
+    };
+
+  }, []);
+
+  const renderMessageList = (messages: Message[]) => {
+    if (messages.length === 0) {
+      return <Empty description="暂无消息" className="empty-message" />;
+    }
+    return messages.map((msg, index) => (
+      <div key={index} className="message-item">
+        <div className="message-header">
+          <span className="message-time">{msg.time}</span>
+          <Tag color={
+            msg.type === 'info' ? 'blue' :
+            msg.type === 'success' ? 'green' :
+            msg.type === 'warning' ? 'orange' :
+            'red'
+          }>
+            {msg.type}
+          </Tag>
+        </div>
+        <h4 className="message-title">{msg.title}</h4>
+        <p className="message-content">{msg.message}</p>
+      </div>
+    ));
+  };
+
+  return (
+    <div className="parent-to-child">
+      <h2 className="page-title">消息接收中心</h2>
+      
+      <div className="message-container">
+        <Card
+          title={
+            <div className="section-header">
+              <span>全局广播消息</span>
+              <Button type="primary" size="small" onClick={clearGlobalMessages}>
+                清空消息
+              </Button>
+            </div>
+          }
+          className="message-section"
+        >
+          <div className="message-list">
+            {renderMessageList(globalMessages)}
+          </div>
+        </Card>
+
+        <Card
+          title={
+            <div className="section-header">
+              <span>定向消息</span>
+              <Button type="primary" size="small" onClick={clearDirectMessages}>
+                清空消息
+              </Button>
+            </div>
+          }
+          className="message-section"
+        >
+          <div className="message-list">
+            {renderMessageList(directMessages)}
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+export default ParentToChild;

package/app/wujie-wk/wujie-react-child/src/pages/RouterJump/index.css

@@ -0,0 +1,61 @@
+.flex-container {
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-start;
+  padding: 20px;
+  gap: 20px;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  padding: 20px;
+  background-color: #f8f8f8;
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  width: 45%;
+  margin: 0;
+  transition: box-shadow 0.3s ease-in-out;
+}
+
+h1 {
+  color: #333;
+  margin-bottom: 20px;
+  font-family: "Helvetica Neue", Arial, sans-serif;
+}
+
+.input-field {
+  width: 100% !important;
+  margin-bottom: 10px;
+}
+
+.action-button {
+  width: 100%;
+  height: 40px;
+}
+
+.route-params {
+  padding: 20px;
+  background-color: #eef2f7;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  width: 45%;
+  margin: 0;
+}
+
+.route-params h1 {
+  color: #007bff;
+  font-size: 24px;
+}
+
+.route-params p {
+  font-size: 16px;
+  color: #333;
+  margin-bottom: 10px;
+  background-color: #fff;
+  padding: 10px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+}

package/app/wujie-wk/wujie-react-child/src/pages/RouterJump/index.tsx

@@ -0,0 +1,87 @@
+import React, { useState, useEffect } from 'react';
+import { Input, Select, Button } from 'antd';
+import { useLocation } from 'react-router-dom';
+import './index.css';
+
+const { Option } = Select;
+
+const RouterJump: React.FC = () => {
+  const [url, setUrl] = useState('/router-jump');
+  const [name, setName] = useState('name');
+  const [age, setAge] = useState('age');
+  const [selectedApp, setSelectedApp] = useState('main');
+  const [isShow, setIsShow] = useState(true);
+  const location = useLocation();
+
+  useEffect(() => {
+    if (!(window as any).$wujie) {
+      setIsShow(false);
+    }
+  }, []);
+
+  const jumpToMain = () => {
+    (window as any).$wujie?.bus.$emit('router-jump-to-main', {
+      app: selectedApp,
+      path: url,
+      query: {
+        name,
+        age,
+      },
+    });
+  };
+
+  const searchParams = new URLSearchParams(location.search);
+  const queryParams = Object.fromEntries(searchParams.entries());
+
+  return (
+    <div className="flex-container">
+      <div className="container">
+        <h1>React子应用路由跳转</h1>
+        <Input
+          value={url}
+          onChange={(e) => setUrl(e.target.value)}
+          placeholder="请输入地址"
+          className="input-field"
+        />
+        <Input
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          placeholder="请输入姓名"
+          className="input-field"
+        />
+        <Input
+          value={age}
+          onChange={(e) => setAge(e.target.value)}
+          type="number"
+          placeholder="请输入年龄"
+          className="input-field"
+        />
+        <Select
+          value={selectedApp}
+          onChange={(value) => setSelectedApp(value)}
+          placeholder="请选择应用"
+          className="input-field"
+        >
+          <Option value="main">main</Option>
+          <Option value="vue3-child-copy">vue3-child-copy</Option>
+        </Select>
+        {isShow && (
+          <Button type="primary" onClick={jumpToMain} className="action-button">
+            跳转到主应用
+          </Button>
+        )}
+      </div>
+      <div className="route-params">
+        <h1>接收到的路由参数：</h1>
+        <p>路径: {location.pathname}</p>
+        {Object.entries(queryParams).map(([key, value]) => (
+          <p key={key}>
+            {key}:{value}
+          </p>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default RouterJump;

package/app/wujie-wk/wujie-react-child/src/router/index.tsx

@@ -0,0 +1,63 @@
+import { lazy } from 'react';
+
+const Home = lazy(() => import('../pages/Home'));
+const RouterJump = lazy(() => import('../pages/RouterJump'));
+const ChildToParent = lazy(() => import('../pages/ChildToParent'));
+const ParentToChild = lazy(() => import('../pages/ParentToChild'));
+const Css = lazy(() => import('../pages/Css'));
+
+export interface RouteConfig {
+  path: string;
+  element: React.ReactNode;
+  label: string;
+  key: string;
+  showInMenu?: boolean;
+  children?: RouteConfig[];
+}
+
+export const routes: RouteConfig[] = [
+  {
+    path: '/',
+    element: <Home />,
+    label: '首页',
+    key: 'home',
+    showInMenu: true
+  },
+  {
+    path: '/router-jump',
+    element: <RouterJump />,
+    label: '跳转',
+    key: 'router-jump',
+    showInMenu: true
+  },
+  {
+    path: '/child-to-parent',
+    element: <ChildToParent />,
+    label: '子应用到父应用',
+    key: 'child-to-parent',
+    showInMenu: true
+  },
+  {
+    path: '/parent-to-child',
+    element: <ParentToChild />,
+    label: '消息接收中心',
+    key: 'parent-to-child',
+    showInMenu: true
+  },
+  {
+    path: 'css',
+    element: <Css/>,
+    label: 'CSS',
+    key: 'css',
+    showInMenu: true,
+  }
+];
+
+export const getMenuItems = () => {
+  return routes
+    .filter(route => route.showInMenu)
+    .map(({ label, key }) => ({
+      label,
+      key
+    }));
+};

package/app/wujie-wk/wujie-react-child/src/types/wujie.d.ts

@@ -0,0 +1,26 @@
+// 定义无界跨应用路由跳转数据接口
+export interface WujieRouteJumpDataT {
+  app: string;      // 目标应用名称
+  path: string;     // 目标路由路径
+  query: Record<string, string>;  // 查询参数
+  type: string;     // 跳转类型
+}
+
+// 定义无界通信总线接口
+export interface WujieBus {
+  $on: (event: string, callback: (data: any) => void) => void;   // 事件监听方法
+  $emit: (event: string, data: any,type?: any) => void;                      // 事件触发方法
+  $off: (event: string, callback?: (data: any) => void) => void;  // 事件移除方法
+}
+
+// 定义无界实例接口
+export interface WujieInstance {
+  bus: WujieBus;    // 无界通信总线
+}
+
+// 扩展全局Window接口，添加无界实例
+declare global {
+  interface Window {
+    $wujie?: WujieInstance;
+  }
+}

package/app/wujie-wk/wujie-react-child/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/app/wujie-wk/wujie-react-child/tsconfig.app.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/app/wujie-wk/wujie-react-child/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/app/wujie-wk/wujie-react-child/tsconfig.node.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}