feat(component): 调整组件发布功能及界面布局

src/api/componentMarket.ts

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { ComponentMarketParams, ReviewGroup } from '@/api/interface';
+import { ComponentMarketParams, PublishComponentParams, ReviewGroup } from '@/api/interface';
 
 // 公共路径
 const urlPrefix = '/api/v1/bpms-workbench';
@@ -17,4 +17,18 @@ export function copyDesign(params) {
 // 组件市场
 export function getComponentMarket(params: ComponentMarketParams) {
   return axios.get(`${urlPrefix}/componentMarket/list`, { params });
+}
+
+// 组件发布
+export function publishComponent(params: PublishComponentParams) {
+  return axios.post(`${urlPrefix}/componentMarket/componentSubmitNew`, params);
+}
+
+// 多文件上传
+export function uploadComponentFile(formData: FormData) {
+  return axios.post(`${urlPrefix}/componentMarket/multiFileUpload`, formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  });
 }

src/api/interface/index.ts

@@ -1,5 +1,5 @@
 // application
-import { getReviewGroupByNew } from '@/api/componentMarket';
+import { getReviewGroupByNew, publishComponent, uploadComponentFile } from '@/api/componentMarket';
 
 export interface CronModel {
   appId: string;
@@ -271,4 +271,11 @@ export interface ComponentMarketParams {
   keyword: string;
   current?: string | number;
   size?: string | number;
+}
+
+export interface PublishComponentParams {
+  id: string;
+  recommend: string;
+  files?: string;
+  filesName?: string;
 }

src/pages/componentDevelopment/componentList/addComponentModal.tsx

@@ -529,7 +529,7 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh, mode = 'c
       visible={visible}
       autoFocus={false}
       focusLock={true}
-      style={{ width: '60%' }}
+      style={{ width: '75%' }}
       footer={modalFooter}
       onCancel={() => setVisible(false)}
       afterClose={() => {
@@ -561,7 +561,7 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh, mode = 'c
           </div>
           <div className={styles['component-info']}>
             <Grid.Row gutter={8}>
-              <Grid.Col span={12}>
+              <Grid.Col span={10}>
                 <FormItem label="名称：" field="name" required rules={[
                   {
                     validator(value, cb) {
@@ -576,7 +576,7 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh, mode = 'c
                   <Input style={{ width: '90%' }} allowClear placeholder="请输入名称" />
                 </FormItem>
               </Grid.Col>
-              <Grid.Col span={12}>
+              <Grid.Col span={14}>
                 <FormItem label="代码标识：" field="projectId" required rules={[
                   {
                     validator(value, cb) {
@@ -599,7 +599,7 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh, mode = 'c
               </Grid.Col>
             </Grid.Row>
             <Grid.Row gutter={8}>
-              <Grid.Col span={12}>
+              <Grid.Col span={10}>
                 <FormItem label="分类：" field="componentClassify" required rules={[
                   {
                     validator(value, cb) {
@@ -623,7 +623,7 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh, mode = 'c
                   </Select>
                 </FormItem>
               </Grid.Col>
-              <Grid.Col span={12}>
+              <Grid.Col span={14}>
                 <FormItem label="组件语言：" field="codeLanguage" required rules={[
                   {
                     validator(value, cb) {
@@ -650,7 +650,7 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh, mode = 'c
               </Grid.Col>
             </Grid.Row>
             <Grid.Row gutter={8}>
-              <Grid.Col span={12}>
+              <Grid.Col span={10}>
                 <FormItem label="标签：" field="tags">
                   <Select
                     placeholder="请选择标签"
@@ -666,7 +666,7 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh, mode = 'c
                   </Select>
                 </FormItem>
               </Grid.Col>
-              <Grid.Col span={12}>
+              <Grid.Col span={14}>
                 <FormItem label="组件类型：" field="type" required rules={[
                   {
                     validator(value, cb) {

src/pages/componentDevelopment/componentList/handleButtonGroup.tsx

@@ -96,13 +96,13 @@ const HandleButtonGroup: React.FC<HandleButtonGroupProps> = ({
 
   return (
     <>
-      {/* 发布组件/更新版本*/}
+      {/* 发布组件*/}
-      {row.publicStatus !== publicStatus.REVIEW && isEligible([componentStatusConstant.CODING, componentStatusConstant.DEPLOYED, componentStatusConstant.PUBLISHED], row.componentStatus) && (
+      {row.publicStatus !== publicStatus.PUBLISHED && isEligible([componentStatusConstant.CODING, componentStatusConstant.DEPLOYED, componentStatusConstant.PUBLISHED], row.componentStatus) && (
         <Button
           type="text"
           onClick={() => onHandlePublishComponent(row)}
         >
-          {row.publicStatus === publicStatus.PUBLISHED ? '更新版本' : '发布组件'}
+          发布组件
         </Button>
       )}
 

src/pages/componentDevelopment/componentList/index.tsx

@@ -7,6 +7,7 @@ import { getReviewGroupByNew } from '@/api/componentMarket';
 import { componentRelease, componentRevoke } from '@/api/componentRelease';
 import { ComponentItem } from '@/api/interface';
 import AddComponentModal from '@/pages/componentDevelopment/componentList/addComponentModal';
+import PublishComponentModal from '@/pages/componentDevelopment/componentList/publishComponentModal';
 import HandleButtonGroup from '@/pages/componentDevelopment/componentList/handleButtonGroup';
 import {
   componentStatusConstant,
@@ -32,6 +33,8 @@ const GlobalVarContainer = () => {
   });
   const [loading, setLoading] = useState(false);
   const [visible, setVisible] = useState(false);
+  const [publishModalVisible, setPublishModalVisible] = useState(false);
+  const [selectedPublishComponent, setSelectedPublishComponent] = useState(null);
   const [mode, setMode] = useState<'create' | 'edit' | 'copy'>('create'); // 添加模式状态
   const [searchValue, setSearchValue] = useState(''); // 添加搜索状态
   const [componentStatus, setComponentStatus] = useState(''); // 添加组件状态筛选
@@ -135,8 +138,8 @@ const GlobalVarContainer = () => {
           row={record}
           index={index}
           onHandlePublishComponent={(row) => {
-            // TODO: 实现发布组件逻辑
+            setSelectedPublishComponent(row);
-            console.log('Handle publish component', row);
+            setPublishModalVisible(true);
           }}
           onGoToReview={(row) => {
             // TODO: 实现查看审核逻辑
@@ -465,6 +468,19 @@ const GlobalVarContainer = () => {
         onReFresh={fetchComponentData}
         mode={mode} // 传递模式
       />
+
+      {/*发布组件弹窗*/}
+      <PublishComponentModal
+        visible={publishModalVisible}
+        componentInfo={selectedPublishComponent}
+        onCancel={() => {
+          setPublishModalVisible(false);
+          setSelectedPublishComponent(null);
+        }}
+        onSuccess={() => {
+          fetchComponentData();
+        }}
+      />
     </>
   );
 };

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

@@ -40,7 +40,7 @@
       }
 
       .markdown-editor {
-        padding-left: 50px;
+        padding-left: 25px;
         padding-right: 40px;
       }
     }

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

@@ -1,5 +1,5 @@
 .comp-review-container {
-  width: 300px;
+  width: 100%;
   border-radius: 8px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   overflow: hidden;