npmapps 1.1.4 → 1.1.6

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

@@ -0,0 +1,32 @@
+{
+  "name": "wujie-react-child",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@types/react-router-dom": "^5.3.3",
+    "antd": "^5.24.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.1.5"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.19.0",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.19.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.18",
+    "globals": "^15.14.0",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.22.0",
+    "vite": "^6.1.0"
+  }
+}

package/app/wujie-wk/wujie-react-child/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/app/wujie-wk/wujie-react-child/src/App.tsx

@@ -0,0 +1,72 @@
+// 导入必要的依赖和样式
+import './App.css'
+import { BrowserRouter, Routes, Route, useNavigate } from 'react-router-dom'
+import { Menu } from 'antd'
+import type { MenuProps } from 'antd'
+import { useEffect, useState } from 'react'
+import { routes,getMenuItems } from './router/index.tsx'
+import type { WujieRouteJumpDataT } from './types/wujie'
+
+// 应用内容组件
+function AppContent() {
+  // 在组件挂载时初始化无界通信
+  useEffect(() => {
+    const wujie = window.$wujie;
+    if (wujie?.bus) {
+      // 监听其他应用发起的路由跳转事件
+      wujie.bus.$on('router-jump', (data: WujieRouteJumpDataT) => {
+        if (data.app === 'react-child') {
+          // 构建带查询参数的URL并进行导航
+          const queryString = data.query ? `?${new URLSearchParams(data.query as Record<string, string>).toString()}` : '';
+          navigate(`${data.path}${queryString}`);
+        }
+      });
+      // 向主应用发送加载完成事件
+      wujie.bus.$emit('loaded', 'react-child');
+    } else {
+      console.warn('无界实例未正确初始化');
+    }
+  }, []);
+
+  // 菜单当前选中项状态
+  const [current, setCurrent] = useState('home');
+  const navigate = useNavigate();
+
+  // 菜单点击事件处理
+  const onClick: MenuProps['onClick'] = (e) => {
+    setCurrent(e.key);
+    navigate(e.key === 'home' ? '/' : `/${e.key}`);
+  }
+
+  // 渲染导航菜单和路由内容
+  return (
+    <>
+      <Menu 
+        onClick={onClick} 
+        selectedKeys={[current]} 
+        mode="horizontal" 
+        items={getMenuItems()} 
+      />
+      <Routes>
+        {routes.map(route => (
+          <Route
+            key={route.path}
+            path={route.path}
+            element={route.element}
+          />
+        ))}
+      </Routes>
+    </>
+  )
+}
+
+// 根组件
+function App() {
+  return (
+    <BrowserRouter>
+      <AppContent />
+    </BrowserRouter>
+  )
+}
+
+export default App

package/app/wujie-wk/wujie-react-child/src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

package/app/wujie-wk/wujie-react-child/src/components/FeatureCards.css

@@ -0,0 +1,63 @@
+.feature-cards-container {
+  padding: 24px;
+}
+
+.feature-card {
+  height: 100%;
+  border: none;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.feature-card:hover {
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+}
+
+.feature-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  color: white;
+}
+
+.feature-icon {
+  font-size: 2.5rem;
+  margin-bottom: 16px;
+}
+
+.feature-content h3 {
+  margin: 0 0 8px;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: white;
+}
+
+.feature-content p {
+  margin: 0;
+  font-size: 0.875rem;
+  opacity: 0.9;
+  color: white;
+}
+
+/* 覆盖 Ant Design Card 的默认样式 */
+.feature-card .ant-card-body {
+  padding: 24px;
+  height: 100%;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .feature-icon {
+    font-size: 2rem;
+  }
+
+  .feature-content h3 {
+    font-size: 1.1rem;
+  }
+
+  .feature-content p {
+    font-size: 0.8rem;
+  }
+}

package/app/wujie-wk/wujie-react-child/src/components/FeatureCards.tsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import { Card, Row, Col } from 'antd';
+import { use3DCard } from '../hooks/use3DCard';
+import {
+  AppstoreOutlined,
+  ApiOutlined,
+  DatabaseOutlined,
+  ScheduleOutlined,
+  RobotOutlined,
+  CloudServerOutlined,
+  CodeOutlined,
+  SettingOutlined
+} from '@ant-design/icons';
+import './FeatureCards.css';
+
+const FeatureCards: React.FC = () => {
+  const card1Ref = use3DCard({ sensitivity: 25 });
+  const card2Ref = use3DCard({ sensitivity: 25 });
+  const card3Ref = use3DCard({ sensitivity: 25 });
+  const card4Ref = use3DCard({ sensitivity: 25 });
+  const card5Ref = use3DCard({ sensitivity: 25 });
+  const card6Ref = use3DCard({ sensitivity: 25 });
+  const card7Ref = use3DCard({ sensitivity: 25 });
+  const card8Ref = use3DCard({ sensitivity: 25 });
+
+  const features = [
+    {
+      icon: <AppstoreOutlined className="feature-icon" />,
+      title: '插件系统',
+      description: '增强机器人的能力',
+      ref: card1Ref,
+      gradient: 'linear-gradient(135deg, #FF6B6B, #FF8E53)'
+    },
+    {
+      icon: <ApiOutlined className="feature-icon" />,
+      title: '工作流',
+      description: '将想法转化为机器人技能',
+      ref: card2Ref,
+      gradient: 'linear-gradient(135deg, #4ECDC4, #556270)'
+    },
+    {
+      icon: <DatabaseOutlined className="feature-icon" />,
+      title: '长期记忆',
+      description: '持久化的数据存储能力',
+      ref: card3Ref,
+      gradient: 'linear-gradient(135deg, #6C5B7B, #C06C84)'
+    },
+    {
+      icon: <ScheduleOutlined className="feature-icon" />,
+      title: '定时任务',
+      description: '自动化的对话触发',
+      ref: card4Ref,
+      gradient: 'linear-gradient(135deg, #3494E6, #EC6EAD)'
+    },
+    {
+      icon: <RobotOutlined className="feature-icon" />,
+      title: 'AI 助手',
+      description: '智能对话与任务处理',
+      ref: card5Ref,
+      gradient: 'linear-gradient(135deg, #11998E, #38EF7D)'
+    },
+    {
+      icon: <CloudServerOutlined className="feature-icon" />,
+      title: '云端部署',
+      description: '灵活的部署选项',
+      ref: card6Ref,
+      gradient: 'linear-gradient(135deg, #F857A6, #FF5858)'
+    },
+    {
+      icon: <CodeOutlined className="feature-icon" />,
+      title: '开发工具',
+      description: '完整的开发支持',
+      ref: card7Ref,
+      gradient: 'linear-gradient(135deg, #5433FF, #20BDFF)'
+    },
+    {
+      icon: <SettingOutlined className="feature-icon" />,
+      title: '系统配置',
+      description: '灵活的系统设置',
+      ref: card8Ref,
+      gradient: 'linear-gradient(135deg, #A8E063, #56AB2F)'
+    }
+  ];
+
+  return (
+    <div className="feature-cards-container">
+      <Row gutter={[24, 24]}>
+        {features.map((feature, index) => (
+          <Col xs={24} sm={12} md={8} lg={6} key={index}>
+            <Card
+              ref={feature.ref}
+              className="feature-card"
+              style={{
+                background: feature.gradient,
+                transition: 'transform 0.3s ease'
+              }}
+              hoverable
+            >
+              <div className="feature-content">
+                {feature.icon}
+                <h3>{feature.title}</h3>
+                <p>{feature.description}</p>
+              </div>
+            </Card>
+          </Col>
+        ))}
+      </Row>
+    </div>
+  );
+};
+
+export default FeatureCards;

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { useLightCard } from '../../hooks/useLightCard';
+import './style.css';
+
+const LightCard: React.FC = () => {
+  const cardRefs = [
+    useLightCard(),
+    useLightCard({ light: { color: '#ffffff', width: 100 } }),
+    useLightCard({ light: { color: '#ffeb3b', width: 80, blur: 50 } }),
+    useLightCard({ light: { color: '#4caf50', width: 70, blur: 45 } }),
+    useLightCard({ light: { color: '#2196f3', width: 90, blur: 55 } }),
+    useLightCard({ light: { color: '#9c27b0', width: 85, blur: 48 } }),
+    useLightCard({ light: { color: '#e91e63', width: 75, blur: 42 } }),
+    useLightCard({ light: { color: '#ff5722', width: 95, blur: 52 } }),
+    useLightCard({ light: { color: '#00bcd4', width: 88, blur: 47 } }),
+    useLightCard({ light: { color: '#8bc34a', width: 82, blur: 44 } }),
+    useLightCard({ light: { color: '#ffc107', width: 78, blur: 46 } }),
+    useLightCard({ light: { color: '#795548', width: 92, blur: 51 } }),
+    useLightCard({ light: { color: '#607d8b', width: 86, blur: 49 } }),
+    useLightCard({ light: { color: '#f44336', width: 73, blur: 43 } }),
+    useLightCard({ light: { color: '#009688', width: 87, blur: 50 } }),
+    useLightCard({ light: { color: '#673ab7', width: 83, blur: 45 } }),
+    useLightCard({ light: { color: '#3f51b5', width: 77, blur: 48 } }),
+    useLightCard({ light: { color: '#ff9800', width: 89, blur: 53 } })
+  ];
+
+  return (
+    <div className="light-card-container">
+      {cardRefs.map((ref, index) => (
+        <div key={index} className="light-card-item" ref={ref.cardRef}></div>
+      ))}
+    </div>
+  );
+};
+
+export default LightCard;

package/app/wujie-wk/wujie-react-child/src/components/LightCard/style.css

@@ -0,0 +1,20 @@
+.light-card-container {
+  background: black;
+  width: 100%;
+  box-sizing: border-box;
+  min-height: 100vh;
+  padding: 40px;
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 20px;
+  justify-items: center;
+}
+
+.light-card-item {
+  position: relative;
+  width: 220px;
+  height: 220px;
+  background: #1c1c1f;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  transition: transform 0.3s ease;
+}

package/app/wujie-wk/wujie-react-child/src/hooks/use3DCard.ts

@@ -0,0 +1,53 @@
+import { useRef, useEffect } from 'react';
+
+interface Use3DCardProps {
+  sensitivity?: number;
+  resetOnLeave?: boolean;
+  perspective?: number;
+}
+
+export const use3DCard = ({
+  sensitivity = 35,
+  resetOnLeave = true,
+  perspective = 1000
+}: Use3DCardProps = {}) => {
+  const cardRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const card = cardRef.current;
+    if (!card) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      const rect = card.getBoundingClientRect();
+      const centerX = rect.left + rect.width / 2;
+      const centerY = rect.top + rect.height / 2;
+      const mouseX = e.clientX;
+      const mouseY = e.clientY;
+
+      const rotateX = ((mouseY - centerY) / sensitivity) * -1;
+      const rotateY = (mouseX - centerX) / sensitivity;
+
+      card.style.transform = `perspective(${perspective}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+    };
+
+    const handleMouseLeave = () => {
+      if (resetOnLeave) {
+        card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0)';
+      }
+    };
+
+    card.addEventListener('mousemove', handleMouseMove);
+    if (resetOnLeave) {
+      card.addEventListener('mouseleave', handleMouseLeave);
+    }
+
+    return () => {
+      card.removeEventListener('mousemove', handleMouseMove);
+      if (resetOnLeave) {
+        card.removeEventListener('mouseleave', handleMouseLeave);
+      }
+    };
+  }, [sensitivity, resetOnLeave, perspective]);
+
+  return cardRef;
+};

package/app/wujie-wk/wujie-react-child/src/hooks/useLightCard.ts

@@ -0,0 +1,141 @@
+import { useRef, useEffect } from 'react';
+
+/**
+ * 光效卡片配置接口
+ * @interface LightOptions
+ * @property {Object} light - 光效相关配置
+ * @property {number} light.width - 光效宽度（像素）
+ * @property {number} light.height - 光效高度（像素）
+ * @property {string} light.color - 光效颜色
+ * @property {number} light.blur - 模糊程度（像素）
+ */
+interface LightOptions {
+  light?: {
+    width?: number;
+    height?: number;
+    color?: string;
+    blur?: number;
+  };
+}
+
+/**
+ * 光效卡片Hook
+ * 实现鼠标悬停时的光效和3D旋转效果
+ * @param {LightOptions} options - 光效配置选项
+ * @returns {Object} 返回包含cardRef的对象，用于绑定到DOM元素
+ */
+export const useLightCard = (options: LightOptions = {}) => {
+  // 卡片DOM引用
+  const cardRef = useRef<HTMLDivElement>(null);
+  // 光效DOM引用
+  const lightRef = useRef<HTMLDivElement | null>(null);
+  // 保存卡片原始overflow样式
+  let cardOverflow = '';
+
+  useEffect(() => {
+    // 创建光效元素
+    lightRef.current = document.createElement('div');
+    // 解构配置参数，设置默认值
+    const { width = 60, height = 60, color = '#ff4132', blur = 40 } = options.light ?? {};
+    
+    // 设置光效元素样式
+    if (lightRef.current) {
+      lightRef.current.style.position = 'absolute';
+      lightRef.current.style.width = `${width}px`;
+      lightRef.current.style.height = `${height}px`;
+      lightRef.current.style.background = color;
+      lightRef.current.style.filter = `blur(${blur}px)`;
+    }
+
+    // 设置卡片overflow为hidden，防止光效溢出
+    const setCardOverflowHidden = () => {
+      if (cardRef.current) {
+        cardOverflow = cardRef.current.style.overflow;
+        cardRef.current.style.overflow = 'hidden';
+      }
+    };
+
+    // 恢复卡片原始overflow样式
+    const restoreCardOverflow = () => {
+      if (cardRef.current) {
+        cardRef.current.style.overflow = cardOverflow;
+      }
+    };
+
+    // 添加光效元素到卡片
+    const addLight = () => {
+      if (cardRef.current && lightRef.current) {
+        cardRef.current.appendChild(lightRef.current);
+      }
+    };
+
+    // 从卡片移除光效元素
+    const removeLight = () => {
+      if (cardRef.current && lightRef.current) {
+        cardRef.current.removeChild(lightRef.current);
+      }
+    };
+
+    // 鼠标进入事件处理
+    const handleMouseEnter = () => {
+      addLight();
+      setCardOverflowHidden();
+    };
+
+    // 鼠标移动事件处理
+    const handleMouseMove = (e: MouseEvent) => {
+      const { clientX, clientY } = e;
+      if (cardRef.current && lightRef.current) {
+        // 获取卡片和光效元素的位置信息
+        const { x, y } = cardRef.current.getBoundingClientRect();
+        const { width, height } = lightRef.current.getBoundingClientRect();
+
+        // 更新光效元素位置，跟随鼠标移动
+        lightRef.current.style.left = `${clientX - x - width / 2}px`;
+        lightRef.current.style.top = `${clientY - y - height / 2}px`;
+
+        // 3D旋转效果参数
+        const maxXRotation = 10; // 最大X轴旋转角度
+        const maxYRotation = 10; // 最大Y轴旋转角度
+        const rangeX = 200 / 2; // X轴旋转范围
+        const rangeY = 200 / 2; // Y轴旋转范围
+
+        // 计算旋转角度
+        const rotateX = ((clientX - x - rangeY) / rangeY) * maxXRotation;
+        const rotateY = -1 * ((clientY - y - rangeX) / rangeX) * maxYRotation;
+
+        // 应用3D变换
+        cardRef.current.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+      }
+    };
+
+    // 鼠标离开事件处理
+    const handleMouseLeave = () => {
+      removeLight();
+      restoreCardOverflow();
+      if (cardRef.current) {
+        // 重置3D变换
+        cardRef.current.style.transform = 'perspective(1000px) rotateX(0deg) rotateY(0deg)';
+      }
+    };
+
+    // 绑定事件监听
+    const card = cardRef.current;
+    if (card) {
+      card.addEventListener('mouseenter', handleMouseEnter);
+      card.addEventListener('mousemove', handleMouseMove);
+      card.addEventListener('mouseleave', handleMouseLeave);
+    }
+
+    // 清理函数：移除事件监听
+    return () => {
+      if (card) {
+        card.removeEventListener('mouseenter', handleMouseEnter);
+        card.removeEventListener('mousemove', handleMouseMove);
+        card.removeEventListener('mouseleave', handleMouseLeave);
+      }
+    };
+  }, [options.light]); // 依赖项：当light配置变化时重新执行
+
+  return { cardRef };
+};

package/app/wujie-wk/wujie-react-child/src/main.tsx

@@ -0,0 +1,8 @@
+// import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+    <App></App>
+)

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

@@ -0,0 +1,55 @@
+.child-to-parent {
+  padding: 20px;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.child-to-parent h1 {
+  color: #333;
+  margin-bottom: 30px;
+  text-align: center;
+}
+
+.form-container {
+  background: #fff;
+  padding: 24px;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+/* 自定义Ant Design组件样式 */
+.form-container .ant-form-item-label > label {
+  color: #606266;
+}
+
+.form-container .ant-input,
+.form-container .ant-select-selector,
+.form-container .ant-input-number {
+  height: 36px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  transition: border-color 0.2s;
+}
+
+.form-container .ant-input:focus,
+.form-container .ant-select-selector:focus,
+.form-container .ant-input-number:focus {
+  border-color: #409eff;
+  box-shadow: none;
+}
+
+.form-container .ant-btn-primary {
+  height: 40px;
+  background-color: #409eff;
+  border: none;
+  border-radius: 4px;
+  transition: background-color 0.3s;
+}
+
+.form-container .ant-btn-primary:hover {
+  background-color: #66b1ff;
+}
+
+.form-container .ant-btn-primary:active {
+  background-color: #3a8ee6;
+}