npm - neo-cmp-cli - Versions diffs - 1.1.6 → 1.1.8 - Mend

neo-cmp-cli 1.1.6 → 1.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (44) hide show

package/src/template/antd-custom-cmp-template/public/template.html ADDED Viewed

@@ -0,0 +1,13 @@
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="format-detection" content="telephone=no"/>
+  <meta name="viewport" content="initial-scale=1.0,user-scalable=no,width=device-width,viewport-fit=cover">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>自定义组件预览页</title>
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>

package/src/template/antd-custom-cmp-template/src/assets/css/common.scss ADDED Viewed

@@ -0,0 +1,127 @@
+/* 公共的自定义函数 */
+@function px2vw($px, $screen-width: 750) {
+  @return ($px / $screen-width) * 100vw;
+}
+@function px2rem($px, $remRate: 100) {
+  @return ($px / $remRate) + rem;
+}
+@function px2vmin($px, $screen-width: 750) {
+  @return ($px / $screen-width) * 100vmin;
+}
+@mixin fillBox {
+  width: 100%;
+  height: 100%;
+}
+/* 头部细线 */
+@mixin borderTop {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  width: 100%;
+  height: 1px;
+  background: #ddd;
+  transform: scaleY(0.5);
+}
+/* 底部细线 */
+@mixin borderBtm {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 1px;
+  background: #ddd;
+  transform: scaleY(0.5);
+}
+/* 统一的内边距 */
+@mixin unifiedPadding($value: 40) {
+  padding: 0 px2rem($value) 0 px2rem($value);
+}
+/* 统一的左内边距 */
+@mixin unifiedLeftPadding($value: 40) {
+  padding-left: px2rem($value);
+}
+/* 统一的右内边距 */
+@mixin unifiedRightPadding($value: 40) {
+  padding-right: px2rem($value);
+}
+/* 统一的底部边框样式 */
+@mixin unifiedBottomBorder {
+  border-bottom: 1px solid #ddd;
+}
+/* 统一的上边框样式 */
+@mixin unifiedTopBorder {
+  border-top: 1px solid #ddd;
+}
+/* 统一的Item高度 */
+@mixin unifiedItemHeight {
+  line-height: px2rem(120);
+  height: px2rem(120);
+}
+/* 设置行高样式 */
+@mixin setItemHeight($value: 120) {
+  line-height: px2rem($value);
+  height: px2rem($value);
+}
+/* 统一的Item样式 */
+@mixin unifiedItemStyle {
+  font-family: PingFangSC-Regular;
+  font-size: px2rem(28);
+  color: #828282;
+  letter-spacing: 0;
+}
+/* 统一的弹性盒子样式 */
+@mixin unifiedFlexBoxStyle {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+}
+/* 统一的Title样式 */
+@mixin unifiedTitleStyle {
+  font-family: PingFangSC-Regular;
+  font-size: px2rem(40);
+  color: #1e1e1e;
+}
+/* 统一的内容样式 */
+@mixin unifiedContentStyle {
+  font-family: PingFangSC-Regular;
+  font-size: px2rem(28);
+  color: #1e1e1e;
+  letter-spacing: 0;
+  text-align: right;
+  line-height: px2rem(28);
+}
+/* 底部导航盒子样式 */
+@mixin fixedBottomBox {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+}
+// 常用的变量
+$background-color: #fafafa;
+$border-color: #f7f7f7;
+$page-padding-top: px2rem(20);

package/src/template/antd-custom-cmp-template/src/assets/css/mixin.scss ADDED Viewed

@@ -0,0 +1,47 @@
+// 通用mixin
+$borderColor: #ddd;
+// type 为top 或者 bottom
+@mixin borderTopOrBtm($type) {
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    #{$type}: 0;
+    width: 100%;
+    height: 1px;
+    background: $borderColor;
+    transform: scaleY(0.5);
+  }
+}
+// type为 right 或者 left
+@mixin borderRtOrLt($type) {
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    #{$type}: 0;
+    height: 100%;
+    width: 1px;
+    background: $borderColor;
+    transform: scaleX(0.5);
+  }
+}
+//超出1行显示...
+@mixin ellipsis1 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+// 超出多行显示...
+@mixin ellipsis($num) {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: $num;
+  -webkit-box-orient: vertical;
+}

package/src/template/antd-custom-cmp-template/src/components/data-dashboard/README.md ADDED Viewed

@@ -0,0 +1,39 @@
+### 特别说明
+- 这是通过 Cursor 生成的一个自定义组件示例
+### 数据仪表板组件特性
+#### ✨ 核心功能
+- 动态数据展示 - 使用 Mock 数据模拟实时数据更新
+- 多种主题支持 - 渐变、深色、浅色三种主题
+- 流畅动画效果 - 包含淡入、脉冲、发光、浮动等多种动画
+- 响应式设计 - 完美适配各种屏幕尺寸
+#### 界面特点
+- 渐变背景 - 使用 CSS 渐变和毛玻璃效果
+- 卡片式布局 - 现代化的卡片设计，支持悬停效果
+- 图标系统 - 丰富的 Antd 图标，增强视觉效果
+- 数据可视化 - 进度条、徽章、统计数字等元素
+#### 📊 数据模块
+- 核心指标 - 总用户数、订单数、收入、转化率
+- 热门产品 - 产品销量排行，带增长趋势
+- 实时动态 - 用户活动流，支持点赞和查看
+- 性能指标 - 系统性能监控，带目标对比
+- 活跃用户 - 圆形头像展示，浮动动画效果
+#### 🔧 技术特性
+- TypeScript 支持 - 完整的类型定义
+- Antd 4.9.4 兼容 - 使用指定版本的组件
+- SCSS 样式 - 模块化样式管理
+- 自动数据更新 - 10秒间隔自动刷新数据
+- 加载状态 - 数据更新时的加载动画
+#### 交互体验
+- 悬停效果 - 卡片悬停时的动画和阴影
+- 点击反馈 - 按钮和卡片的点击反馈
+- 平滑过渡 - 所有状态变化都有平滑过渡
+- 视觉层次 - 清晰的信息层次和视觉引导
+#### 属性配置
+支持在编辑器中配置标题、主题和动画开关等属性

package/src/template/antd-custom-cmp-template/src/components/data-dashboard/index.tsx ADDED Viewed

@@ -0,0 +1,462 @@
+import * as React from 'react';
+import {
+  Card,
+  Statistic,
+  Row,
+  Col,
+  Progress,
+  Badge,
+  Avatar,
+  Tag,
+  Button,
+  Tooltip,
+  Spin,
+} from 'antd';
+import {
+  UserOutlined,
+  ShoppingCartOutlined,
+  DollarOutlined,
+  TrophyOutlined,
+  FireOutlined,
+  ThunderboltOutlined,
+  StarOutlined,
+  HeartOutlined,
+  EyeOutlined,
+  LikeOutlined,
+} from '@ant-design/icons';
+import './style.scss';
+interface DataDashboardProps {
+  title: string;
+  theme: 'dark' | 'light' | 'gradient';
+  showAnimations: boolean;
+  data?: any;
+}
+interface MockData {
+  totalUsers: number;
+  totalOrders: number;
+  totalRevenue: number;
+  conversionRate: number;
+  activeUsers: number;
+  topProducts: Array<{
+    name: string;
+    sales: number;
+    growth: number;
+    color: string;
+  }>;
+  recentActivities: Array<{
+    id: string;
+    user: string;
+    action: string;
+    time: string;
+    avatar: string;
+  }>;
+  performanceMetrics: Array<{
+    name: string;
+    value: number;
+    target: number;
+    color: string;
+  }>;
+}
+export default class DataDashboard extends React.PureComponent<DataDashboardProps> {
+  private animationTimer: NodeJS.Timeout | null = null;
+  private dataUpdateTimer: NodeJS.Timeout | null = null;
+  constructor(props: DataDashboardProps) {
+    super(props);
+    this.state = {
+      currentData: this.generateMockData(),
+      isAnimating: false,
+      loading: false,
+    };
+  }
+  componentDidMount() {
+    if (this.props.showAnimations) {
+      this.startDataAnimation();
+    }
+  }
+  componentWillUnmount() {
+    if (this.animationTimer) {
+      clearInterval(this.animationTimer);
+    }
+    if (this.dataUpdateTimer) {
+      clearInterval(this.dataUpdateTimer);
+    }
+  }
+  generateMockData = (): MockData => ({
+    totalUsers: Math.floor(Math.random() * 50000) + 10000,
+    totalOrders: Math.floor(Math.random() * 10000) + 2000,
+    totalRevenue: Math.floor(Math.random() * 1000000) + 500000,
+    conversionRate: Math.floor(Math.random() * 30) + 5,
+    activeUsers: Math.floor(Math.random() * 5000) + 1000,
+    topProducts: [
+      { name: '智能手表', sales: 1250, growth: 15.6, color: '#1890ff' },
+      { name: '无线耳机', sales: 980, growth: 8.2, color: '#52c41a' },
+      { name: '智能音箱', sales: 756, growth: -2.1, color: '#faad14' },
+      { name: '平板电脑', sales: 634, growth: 12.8, color: '#f5222d' },
+      { name: '智能手环', sales: 520, growth: 25.3, color: '#722ed1' },
+    ],
+    recentActivities: [
+      {
+        id: '1',
+        user: '张三',
+        action: '购买了智能手表',
+        time: '2分钟前',
+        avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=1',
+      },
+      {
+        id: '2',
+        user: '李四',
+        action: '完成了订单支付',
+        time: '5分钟前',
+        avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=2',
+      },
+      {
+        id: '3',
+        user: '王五',
+        action: '添加了商品到购物车',
+        time: '8分钟前',
+        avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=3',
+      },
+      {
+        id: '4',
+        user: '赵六',
+        action: '发表了产品评价',
+        time: '12分钟前',
+        avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=4',
+      },
+      {
+        id: '5',
+        user: '钱七',
+        action: '分享了产品链接',
+        time: '15分钟前',
+        avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=5',
+      },
+    ],
+    performanceMetrics: [
+      { name: '页面加载速度', value: 85, target: 90, color: '#1890ff' },
+      { name: '用户满意度', value: 92, target: 95, color: '#52c41a' },
+      { name: '系统稳定性', value: 98, target: 99, color: '#faad14' },
+      { name: '数据准确性', value: 96, target: 98, color: '#f5222d' },
+    ],
+  });
+  startDataAnimation = () => {
+    this.dataUpdateTimer = setInterval(() => {
+      this.setState({ loading: true });
+      setTimeout(() => {
+        this.setState({
+          currentData: this.generateMockData(),
+          loading: false,
+          isAnimating: true,
+        });
+        setTimeout(() => {
+          this.setState({ isAnimating: false });
+        }, 1000);
+      }, 500);
+    }, 10000);
+  };
+  formatNumber = (num: number): string => {
+    if (num >= 1000000) {
+      return `${(num / 1000000).toFixed(1)}M`;
+    }
+    if (num >= 1000) {
+      return `${(num / 1000).toFixed(1)}K`;
+    }
+    return num.toString();
+  };
+  render() {
+    const { title, theme, showAnimations } = this.props;
+    const { currentData, isAnimating, loading } = this.state as any;
+    const curAmisData = this.props.data || {};
+    const userInfo = curAmisData.__NeoCurrentUser;
+    const systemInfo = curAmisData.__NeoSystemInfo || {};
+    return (
+      <div
+        className={`data-dashboard-container ${theme} ${
+          isAnimating ? 'animating' : ''
+        }`}
+      >
+        <div className="dashboard-header">
+          <h2 className="dashboard-title">
+            {title || '数据仪表板'}
+            {systemInfo.tenantName && (
+              <Tag color="blue">【{systemInfo.tenantName}】</Tag>
+            )}
+          </h2>
+          {userInfo && (
+            <div className="user-info">
+              <Avatar size={40} src={userInfo.icon} icon={<UserOutlined />} />
+              <span className="user-name">{userInfo.name}</span>
+            </div>
+          )}
+        </div>
+        <Spin spinning={loading} tip="数据更新中...">
+          <div className="dashboard-content">
+            {/* 核心指标卡片 */}
+            <Row gutter={[16, 16]} className="metrics-row">
+              <Col xs={24} sm={12} lg={6}>
+                <Card className="metric-card users-card" hoverable>
+                  <Statistic
+                    title="总用户数"
+                    value={currentData.totalUsers}
+                    formatter={(value) => this.formatNumber(value as number)}
+                    prefix={<UserOutlined className="metric-icon" />}
+                    valueStyle={{ color: '#1890ff' }}
+                  />
+                  <div className="metric-trend">
+                    <Badge count="+12.5%" color="#52c41a" />
+                    <span className="trend-text">较上月</span>
+                  </div>
+                </Card>
+              </Col>
+              <Col xs={24} sm={12} lg={6}>
+                <Card className="metric-card orders-card" hoverable>
+                  <Statistic
+                    title="总订单数"
+                    value={currentData.totalOrders}
+                    formatter={(value) => this.formatNumber(value as number)}
+                    prefix={<ShoppingCartOutlined className="metric-icon" />}
+                    valueStyle={{ color: '#52c41a' }}
+                  />
+                  <div className="metric-trend">
+                    <Badge count="+8.3%" color="#52c41a" />
+                    <span className="trend-text">较上月</span>
+                  </div>
+                </Card>
+              </Col>
+              <Col xs={24} sm={12} lg={6}>
+                <Card className="metric-card revenue-card" hoverable>
+                  <Statistic
+                    title="总收入"
+                    value={currentData.totalRevenue}
+                    formatter={(value) =>
+                      `¥${this.formatNumber(value as number)}`
+                    }
+                    prefix={<DollarOutlined className="metric-icon" />}
+                    valueStyle={{ color: '#faad14' }}
+                  />
+                  <div className="metric-trend">
+                    <Badge count="+15.2%" color="#52c41a" />
+                    <span className="trend-text">较上月</span>
+                  </div>
+                </Card>
+              </Col>
+              <Col xs={24} sm={12} lg={6}>
+                <Card className="metric-card conversion-card" hoverable>
+                  <Statistic
+                    title="转化率"
+                    value={currentData.conversionRate}
+                    suffix="%"
+                    prefix={<TrophyOutlined className="metric-icon" />}
+                    valueStyle={{ color: '#f5222d' }}
+                  />
+                  <div className="metric-trend">
+                    <Badge count="+2.1%" color="#52c41a" />
+                    <span className="trend-text">较上月</span>
+                  </div>
+                </Card>
+              </Col>
+            </Row>
+            {/* 热门产品和活动动态 */}
+            <Row gutter={[16, 16]} className="content-row">
+              <Col xs={24} lg={12}>
+                <Card
+                  title={
+                    <span>
+                      <FireOutlined className="section-icon" />
+                      热门产品
+                    </span>
+                  }
+                  className="products-card"
+                  extra={<Button type="link">查看全部</Button>}
+                >
+                  <div className="products-list">
+                    {currentData.topProducts.map(
+                      (product: any, index: number) => (
+                        <div key={index} className="product-item">
+                          <div className="product-info">
+                            <div className="product-name">{product.name}</div>
+                            <div className="product-sales">
+                              {product.sales} 销量
+                            </div>
+                          </div>
+                          <div className="product-growth">
+                            <Tag color={product.growth > 0 ? 'green' : 'red'}>
+                              {product.growth > 0 ? '+' : ''}
+                              {product.growth}%
+                            </Tag>
+                          </div>
+                          <div className="product-progress">
+                            <Progress
+                              percent={Math.min(
+                                (product.sales / 1500) * 100,
+                                100,
+                              )}
+                              strokeColor={product.color}
+                              showInfo={false}
+                              size="small"
+                            />
+                          </div>
+                        </div>
+                      ),
+                    )}
+                  </div>
+                </Card>
+              </Col>
+              <Col xs={24} lg={12}>
+                <Card
+                  title={
+                    <span>
+                      <ThunderboltOutlined className="section-icon" />
+                      实时动态
+                    </span>
+                  }
+                  className="activities-card"
+                  extra={<Button type="link">查看全部</Button>}
+                >
+                  <div className="activities-list">
+                    {currentData.recentActivities.map((activity: any) => (
+                      <div key={activity.id} className="activity-item">
+                        <Avatar
+                          size={32}
+                          src={activity.avatar}
+                          icon={<UserOutlined />}
+                        />
+                        <div className="activity-content">
+                          <div className="activity-text">
+                            <span className="user-name">{activity.user}</span>
+                            <span className="action">{activity.action}</span>
+                          </div>
+                          <div className="activity-time">{activity.time}</div>
+                        </div>
+                        <div className="activity-actions">
+                          <Tooltip title="点赞">
+                            <Button
+                              type="text"
+                              icon={<LikeOutlined />}
+                              size="small"
+                            />
+                          </Tooltip>
+                          <Tooltip title="查看">
+                            <Button
+                              type="text"
+                              icon={<EyeOutlined />}
+                              size="small"
+                            />
+                          </Tooltip>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </Card>
+              </Col>
+            </Row>
+            {/* 性能指标 */}
+            <Row gutter={[16, 16]} className="performance-row">
+              <Col xs={24}>
+                <Card
+                  title={
+                    <span>
+                      <StarOutlined className="section-icon" />
+                      性能指标
+                    </span>
+                  }
+                  className="performance-card"
+                >
+                  <Row gutter={[16, 16]}>
+                    {currentData.performanceMetrics.map(
+                      (metric: any, index: number) => (
+                        <Col xs={24} sm={12} lg={6} key={index}>
+                          <div className="performance-item">
+                            <div className="performance-header">
+                              <span className="metric-name">{metric.name}</span>
+                              <span className="metric-value">
+                                {metric.value}%
+                              </span>
+                            </div>
+                            <Progress
+                              percent={metric.value}
+                              strokeColor={metric.color}
+                              trailColor="#f0f0f0"
+                              strokeWidth={8}
+                            />
+                            <div className="performance-target">
+                              目标: {metric.target}%
+                            </div>
+                          </div>
+                        </Col>
+                      ),
+                    )}
+                  </Row>
+                </Card>
+              </Col>
+            </Row>
+            {/* 活跃用户统计 */}
+            <Row gutter={[16, 16]} className="active-users-row">
+              <Col xs={24}>
+                <Card
+                  title={
+                    <span>
+                      <HeartOutlined className="section-icon" />
+                      活跃用户统计
+                    </span>
+                  }
+                  className="active-users-card"
+                >
+                  <div className="active-users-content">
+                    <div className="active-users-main">
+                      <div className="active-users-number">
+                        <span className="number">
+                          {this.formatNumber(currentData.activeUsers)}
+                        </span>
+                        <span className="unit">活跃用户</span>
+                      </div>
+                      <div className="active-users-description">
+                        当前在线用户数量，实时更新
+                      </div>
+                    </div>
+                    <div className="active-users-visual">
+                      <div className="user-avatars">
+                        {Array.from({ length: 8 }, (_, i) => (
+                          <Avatar
+                            key={i}
+                            size={80}
+                            src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${
+                              i + 10
+                            }`}
+                            className="user-avatar"
+                            style={{
+                              animationDelay: `${i * 0.1}s`,
+                              transform: `rotate(${
+                                i * 45
+                              }deg) translateY(-60px) rotate(-${i * 45}deg)`,
+                            }}
+                          />
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </Card>
+              </Col>
+            </Row>
+          </div>
+        </Spin>
+      </div>
+    );
+  }
+}