neo-cmp-cli 1.13.21 → 1.13.23

package/template/neo-bi-cmps/src/components/targetNumber__c/style.scss

@@ -7,11 +7,19 @@
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   margin-bottom: 12px;
 
-  // 组件标题（根据 titleStyle.show 展示）
+  // 组件标题（根据 titleStyle.show 展示，具体字号等可由 inline titleStyle 覆盖）
   .target-number-title {
+    flex-shrink: 0;
+    padding: 8px 16px 8px 14px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+      'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+    font-size: 16px;
+    font-weight: 500;
     line-height: 1.4;
-    background-color: #eaf3fc;
-    padding: 8px 12px;
+    letter-spacing: 0.08em;
+    color: #1f1f1f;
+    background: linear-gradient(180deg, #fafbfd 0%, #f4f7fb 100%);
+    border-left: 4px solid #1677ff;
   }
 
   .target-number-block {
@@ -102,13 +110,13 @@
 
     @media (max-width: 576px) {
       padding: 8px;
-      min-width: calc(50% - 4px);
+      min-width: calc(50% - 30px);
     }
   }
 
   .target-number-value {
     font-size: 32px;
-    font-weight: 600;
+    font-weight: 500;
     color: #262626;
     line-height: 1.2;
     word-break: break-all;

package/template/neo-custom-cmp-template/CODEBUDDY.md

@@ -0,0 +1,92 @@
+# CODEBUDDY.md
+
+This file provides guidance to CodeBuddy Code when working with code in this repository.
+
+## Project Overview
+
+NeoCRM 自定义业务组件模板项目。基于 React 16 + TypeScript + Ant Design 4 + SCSS，通过 `neo-cmp-cli` 工具链进行预览、调试和发布。
+
+## Commands
+
+```bash
+npm i                    # 安装依赖
+npm run preview          # 预览组件 (neo preview)
+npm run linkDebug        # 外链调试 - 在线上页面设计器端预览自定义组件
+npm run neoLogin         # OAuth2 登录 NeoCRM 平台
+npm run pushCmp          # 构建并发布组件到 NeoCRM 平台
+npm run pullCmp          # 从平台拉取组件
+npm run deleteCmp        # 删除平台上的组件
+npm run format           # Prettier 格式化
+```
+
+没有标准的 build/dev/test 命令。构建在 `neo push cmp` 时隐式执行，无测试框架配置。
+
+## Architecture
+
+### Component Structure
+
+每个自定义组件位于 `src/components/` 下，以 `cmpType__c` 命名（`__c` 后缀表示自定义）：
+
+```
+src/components/xxCmp__c/
+├── index.tsx     # 组件实现（默认入口）
+├── model.ts      # 模型文件 - 对接页面设计器的属性/事件/函数声明
+├── style.scss    # 组件样式
+└── README.md     # 组件文档（可选）
+```
+
+当 `neo.config.js` 的 `entry` 为空时，CLI 根据 `src/components/` 目录结构自动生成 entry 和注册文件，开发者无需关注 `neo-register`。
+
+### Component Base Class
+
+- `BaseCmp`（来自 `neo-ui-common`）：主要基类，继承自 `React.PureComponent`
+- 部分组件也可直接继承 `React.PureComponent`
+- 类型定义在 `@types/neo-ui-common.d.ts`
+
+### Model File
+
+`model.ts` 定义组件在设计器中的配置，关键字段：
+
+- `label` / `description`：组件名称和描述
+- `targetPage`：支持页面类型（`all` / `entityFormPage` / `customPage`）
+- `targetDevice`：支持终端（`web` / `mobile`）
+- `iconUrl`：组件图标
+- `defaultComProps`：默认属性
+- `propsSchema`：编辑器属性面板配置
+- `events`：组件事件声明
+- `functions`：组件对外暴露的函数
+
+### Platform APIs
+
+- **neo-open-api / xObject**：实体数据 CRUD（`query`, `get`, `create`, `update`, `delete`, `getDesc`, `getEntityTypeList`）
+- **neo-open-api / customApi**：自定义 API 代理调用（`customApi.run`）
+- **neo-ui-common / NeoEvent**：事件系统
+  - `@NeoEvent.function` 装饰器：声明可被其他组件调用的函数
+  - `@NeoEvent.dispatch`：声明事件派发
+  - `NeoEvent.broadcast` / `NeoEvent.listen`：广播/监听事件
+- **props.data.__NeoSystemInfo**：平台系统信息
+
+### Data Fetching Modes
+
+1. **自动获取**（`autoFetchData: true`）：平台自动注入 `props.entityData` 和 `props.xObjectDataApi.fieldDescList`
+2. **手动获取**：组件自行通过 `neo-open-api` SDK 调用接口
+
+### Path Aliases (webpack)
+
+- `@` → `./src`
+- `$assets` → `./src/assets`
+- `$public` → `./public`
+- `$utils` → `./src/utils`
+
+### SCSS Auto-injection
+
+`src/assets/css/common.scss`（变量、函数）和 `src/assets/css/mixin.scss`（通用 mixin）通过 `sassResources` 自动注入所有 SCSS 文件，无需手动 import。
+
+## Key Rules
+
+- **React 16**：必须使用 React 16 版本
+- **样式隔离**：组件最外层设置唯一 className（如 `entityForm__c`），所有样式放在该选择器内
+- **组件命名**：目录名使用 `cmpType__c` 格式
+- **发布要求**：`package.json` 的 `name` 值必须唯一，`version` 值不能重复
+- **代码风格**：Prettier 配置为单引号、分号、2 空格缩进、尾逗号 all
+- **Commit 规范**：type 必须是 feat/fix/bug/docs/style/refactor/test/chore/perf/build/ci 之一

package/template/neo-custom-cmp-template/package.json

@@ -55,7 +55,7 @@
     "@types/react": "^16.9.11",
     "@types/react-dom": "^16.9.15",
     "@types/axios": "^0.14.0",
-    "neo-cmp-cli": "^1.13.21",
+    "neo-cmp-cli": "^1.13.23",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.9",
     "prettier": "^2.0.5"

package/template/neo-custom-cmp-template/src/components/customApi__c/index.tsx

@@ -145,13 +145,13 @@ export default class CustomApiCmp extends BaseCmp<
     const { className, title: propsTitle } = this.props;
     const displayTitle = propsTitle || '自定义 API 示例';
 
-    console.log('this.props:', this.props);
-
     return (
       <div className={`customApi__c ${className || ''}`}>
         <div className="table-wrapper">
           <div className="panel-header">
-            <h3>{displayTitle}</h3>
+            <div className="panel-header-text">
+              <h3>{displayTitle}</h3>
+            </div>
           </div>
           <div className="table-container">
             <Spin spinning={loading} tip="加载数据中...">
@@ -171,7 +171,11 @@ export default class CustomApiCmp extends BaseCmp<
                   columns={POST_COLUMNS}
                   dataSource={dataSource}
                   rowKey="id"
-                  pagination={{ pageSize: 10, showSizeChanger: true }}
+                  pagination={{
+                    pageSize: 10,
+                    showSizeChanger: true,
+                    showTotal: (total) => `共 ${total} 条`,
+                  }}
                   scroll={{ y: 'max-content' }}
                 />
               )}

package/template/neo-custom-cmp-template/src/components/customApi__c/model.ts

@@ -5,7 +5,7 @@ export class CustomApiCmpModel {
   label: string = '自定义API示例';
 
   description: string =
-    '通过通用代理 customApi.run 请求 JSONPlaceholder posts 并以表格展示';
+    '通过通用代理请求外部数据接口，并以表格形式展示外部接口数据';
 
   iconUrl: string = 'https://custom-widgets.bj.bcebos.com/table.svg';
 

package/template/neo-custom-cmp-template/src/components/customApi__c/style.scss

@@ -1,25 +1,33 @@
 .customApi__c {
+  background: #fff;
+  border-radius: 8px;
+
   .table-wrapper {
-    border: 1px solid #ddd;
-    border-radius: 4px;
+    padding: 16px 20px;
     display: flex;
     flex-direction: column;
     overflow: hidden;
   }
 
   .panel-header {
-    padding: 15px;
-    background: #f5f5f5;
-    border-bottom: 1px solid #ddd;
+    padding: 8px 0;
+    background: #fff;
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    align-items: flex-start;
+    margin-bottom: 12px;
+    border-bottom: 1px solid #f0f0f0;
+
+    .panel-header-text {
+      flex: 1;
+      min-width: 0;
+    }
 
     h3 {
       margin: 0;
       font-size: 16px;
-      font-weight: 600;
-      color: #262626;
+      font-weight: 500;
+      color: #434343;
     }
   }
 
@@ -30,7 +38,7 @@
     .ant-table {
       .ant-table-thead > tr > th {
         background-color: #f9f9f9;
-        font-weight: 600;
+        font-weight: 500;
         color: #262626;
         border-bottom: 1px solid #eee;
         padding: 10px;
@@ -38,6 +46,7 @@
         font-size: 13px;
         position: sticky;
         top: 0;
+        z-index: 1;
       }
 
       .ant-table-tbody > tr > td {
@@ -52,6 +61,11 @@
       }
     }
 
+    .ant-pagination {
+      padding: 12px 0 0;
+      margin: 0;
+    }
+
     .ant-empty {
       padding: 40px 0;
 
@@ -73,14 +87,9 @@
     }
   }
 
-  // 响应式设计
   @media (max-width: 768px) {
     .panel-header {
-      padding: 12px;
-
-      h3 {
-        font-size: 14px;
-      }
+      padding: 12px 0 6px 0;
     }
 
     .table-container {
@@ -96,11 +105,7 @@
 
   @media (max-width: 576px) {
     .panel-header {
-      padding: 10px;
-
-      h3 {
-        font-size: 13px;
-      }
+      padding: 10px 0 6px 0;
     }
 
     .table-container {

package/template/neo-custom-cmp-template/src/components/entityDetail__c/index.tsx

@@ -1,19 +1,7 @@
 import * as React from 'react';
-import {
-  Card,
-  Row,
-  Col,
-  Spin,
-  Empty,
-  Descriptions,
-  Button,
-  Tag,
-  Divider,
-  Typography,
-} from 'antd';
+import { Spin, Empty, Button, Tag, Divider, Typography } from 'antd';
 import {
   ReloadOutlined,
-  InfoCircleOutlined,
   CheckCircleOutlined,
   CloseCircleOutlined,
 } from '@ant-design/icons';
@@ -21,7 +9,7 @@ import {
 import { xObject } from 'neo-open-api'; // Neo OpenAPI SDK
 import './style.scss';
 
-const { Title, Text } = Typography;
+const { Title } = Typography;
 
 interface EntityDetailProps {
   title?: string;
@@ -165,7 +153,7 @@ export default class EntityDetail extends React.PureComponent<
 
   renderFieldValue(value: any, fieldType: string) {
     if (value === null || value === undefined || value === '') {
-      return <Text type="secondary">-</Text>;
+      return <span className="info-value-empty">-</span>;
     }
 
     // 根据字段类型渲染不同的值
@@ -245,39 +233,28 @@ export default class EntityDetail extends React.PureComponent<
     }
 
     return (
-      <Row gutter={[24, 24]}>
-        {columnGroups.map((fields, colIndex) => (
-          <Col xs={24} sm={24} md={24 / columnCount} key={colIndex}>
-            <Card className="detail-column-card" bordered={false} size="small">
-              <Descriptions
-                column={1}
-                size="middle"
-                bordered
-                labelStyle={{
-                  fontWeight: 500,
-                  backgroundColor: '#fafafa',
-                  width: '35%',
-                }}
-                contentStyle={{
-                  backgroundColor: '#ffffff',
-                }}
-              >
-                {fields.map((fieldKey) => {
-                  const fieldType = this.getFieldType(fieldKey);
-                  const fieldLabel = this.getFieldLabel(fieldKey);
-                  const fieldValue = detailData[fieldKey];
-
-                  return (
-                    <Descriptions.Item label={fieldLabel} key={fieldKey}>
+      <div className="detail-info-body">
+        <div className="info-grid">
+          {columnGroups.map((fields, colIndex) => (
+            <div key={colIndex} className="info-column">
+              {fields.map((fieldKey) => {
+                const fieldType = this.getFieldType(fieldKey);
+                const fieldLabel = this.getFieldLabel(fieldKey);
+                const fieldValue = detailData[fieldKey];
+
+                return (
+                  <div key={fieldKey} className="info-item">
+                    <div className="info-label">{fieldLabel}</div>
+                    <div className="info-value">
                       {this.renderFieldValue(fieldValue, fieldType)}
-                    </Descriptions.Item>
-                  );
-                })}
-              </Descriptions>
-            </Card>
-          </Col>
-        ))}
-      </Row>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          ))}
+        </div>
+      </div>
     );
   }
 
@@ -289,18 +266,12 @@ export default class EntityDetail extends React.PureComponent<
     console.log('this.props：', this.props);
 
     return (
-      <div className={`entityDetail__c ${className}`}>
+      <div className={['entityDetail__c', className].filter(Boolean).join(' ')}>
         {showTitle && (
           <div className="detail-header">
             <div className="header-content">
               <Title level={4} className="header-title">
-                <InfoCircleOutlined className="title-icon" />
-                {title || '实体数据详情'}
-                {systemInfo.tenantName ? (
-                  <Tag color="blue" style={{ marginLeft: 8 }}>
-                    {systemInfo.tenantName}
-                  </Tag>
-                ) : null}
+                {title || '实体详情数据'}
               </Title>
               <Button
                 type="primary"

package/template/neo-custom-cmp-template/src/components/entityDetail__c/model.ts

@@ -14,7 +14,7 @@ export class EntityDetailModel {
   label: string = '实体数据详情';
 
   /** 组件描述，用于设置在编辑器左侧组件面板中展示的描述 */
-  description: string = '展示实体数据详情信息，支持多列布局和字段类型识别';
+  description: string = '实体详情信息展示，支持多列布局';
 
   /** 分类标签，用于设置在编辑器左侧组件面板哪个分类中展示  */
   // tags: string[] = ['自定义组件'];