feat(component): 添加组件预览功能

- 在添加组件弹窗中集成组件预览模块
- 新增 CompReview 组件用于展示组件设计数据
- 调整组件市场复制接口路径至 componentBase
- 优化组件预览样式与布局结构
- 支持组件输入输出参数的动态渲染
- 增加无参数时的占位提示信息

src/api/componentMarket.ts

@@ -11,5 +11,5 @@ export function getReviewGroupByNew(params: ReviewGroup) {
 
 // 复制组件设计
 export function copyDesign(params) {
-  return axios.post(`${urlPrefix}/componentMarket/copyDesign`, params);
+  return axios.post(`${urlPrefix}/componentBase/copyDesign`, params);
 }

src/pages/componentDevelopment/componentList/addComponentModal.tsx

@@ -18,6 +18,7 @@ import { IconPlus, IconEdit } from '@arco-design/web-react/icon';
 import styles from './style/addComponentModal.module.less';
 import EditorSection from '@/components/EditorSection';
 import AddApiModal from '@/pages/componentDevelopment/componentList/addApiModal';
+import CompReview from '@/pages/componentDevelopment/componentList/compReview';
 import { getComponentClassify } from '@/api/componentClassify';
 import { compProjectValidate, compSubmit, getTagList, copyAll } from '@/api/componentBase';
 import { copyDesign } from '@/api/componentMarket';
@@ -500,11 +501,10 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh, mode = 'c
               <div
                 style={{
                   width: '80%',
-                  height: 200,
+                  height: 200
-                  border: '1px solid #dcdfe6',
-                  borderRadius: 5
                 }}
-              >组件外壳
+              >
+                <CompReview componentDesignData={componentDesignData} />
               </div>
             </FormItem>
           </div>

src/pages/componentDevelopment/componentList/compReview.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import styles from './style/compReview.module.less';
+
+const CompReview = ({ componentDesignData }) => {
+  console.log('componentDesignData:', componentDesignData);
+
+  // 确保数据是数组格式
+  const dataArray = Array.isArray(componentDesignData) ? componentDesignData :
+    componentDesignData ? [componentDesignData] : [];
+
+  return (
+    <div className={styles['comp-review-container']}>
+      <div className={styles['comp-review-header']}>
+        <div className={styles['comp-review-title']}>组件预览</div>
+      </div>
+      <div className={styles['comp-review-body']}>
+        <div className={styles['comp-review-content']}>
+          {/* 上方内容 - 根据数组长度渲染 */}
+          <div className={styles['comp-review-top']}>
+            {dataArray.map((data, index) => (
+              <div key={data.key || data.id || index} className={styles['comp-review-item']}>
+                <div className={styles['comp-review-name']}>{data.ident}</div>
+              </div>
+            ))}
+          </div>
+
+          {/* 输入输出部分 - 根据数组长度渲染 */}
+          <div className={styles['comp-review-io']}>
+            {/* 输入部分 */}
+            <div className={styles['comp-review-input']}>
+              <div className={styles['comp-review-io-label']}>input</div>
+              <div className={styles['comp-review-io-items']}>
+                {dataArray.map((data, index) => {
+                  // 确保参数始终是数组格式
+                  const parameters = Array.isArray(data.parameters) ? data.parameters :
+                    (data.parameters ? [data.parameters] : []);
+
+                  return (
+                    <div key={data.key || data.id || index}>
+                      {parameters.length > 0 ? (
+                        parameters.map((param, paramIndex) => (
+                          <div key={paramIndex} className={styles['comp-review-io-item']}>
+                            {param.ident} {param.type}
+                          </div>
+                        ))
+                      ) : (
+                        <div className={styles['comp-review-io-placeholder']}>
+                          无输入参数
+                        </div>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+
+            {/* 输出部分 */}
+            <div className={styles['comp-review-output']}>
+              <div className={styles['comp-review-io-label']}>output</div>
+              <div className={styles['comp-review-io-items']}>
+                {dataArray.map((data, index) => {
+                  // 确保响应始终是数组格式
+                  const responses = Array.isArray(data.responses) ? data.responses :
+                    (data.responses ? [data.responses] : []);
+
+                  return (
+                    <div key={data.key || data.id || index}>
+                      {responses.length > 0 ? (
+                        responses.map((response, responseIndex) => (
+                          <div key={responseIndex} className={styles['comp-review-io-item']}>
+                            {response.type} {response.ident}
+                          </div>
+                        ))
+                      ) : (
+                        <div className={styles['comp-review-io-placeholder']}>
+                          无输出参数
+                        </div>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CompReview;

src/pages/componentDevelopment/componentList/style/compReview.module.less

@@ -0,0 +1,94 @@
+.comp-review-container {
+  width: 300px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.comp-review-header {
+  background-color: #FFA500;
+  color: white;
+  padding: 8px 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+}
+
+.comp-review-icon {
+  font-size: 16px;
+  margin-right: 8px;
+}
+
+.comp-review-title {
+  font-weight: bold;
+}
+
+.comp-review-actions {
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.comp-review-body {
+  background-color: white;
+  padding: 12px;
+}
+
+.comp-review-content {
+  border-radius: 4px;
+  padding: 8px;
+  min-height: 120px;
+}
+
+.comp-review-top {
+  margin-bottom: 12px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.comp-review-name {
+  font-weight: bold;
+  margin-bottom: 4px;
+}
+
+.comp-review-desc {
+  color: #666;
+  font-size: 12px;
+}
+
+.comp-review-io {
+  height: 100%;
+}
+
+.comp-review-input,
+.comp-review-output {
+  flex: 1;
+  padding: 8px;
+}
+
+.comp-review-output {
+  border-right: none;
+  text-align: right;
+}
+
+.comp-review-io-label {
+  font-weight: bold;
+  margin-bottom: 4px;
+  font-size: 12px;
+}
+
+.comp-review-io-items {
+  margin-top: 4px;
+}
+
+.comp-review-io-item {
+  margin-bottom: 4px;
+  position: relative;
+}
+
+
+.comp-review-io-placeholder {
+  color: #999;
+  font-size: 12px;
+  text-align: center;
+  padding: 8px 0;
+}