fix:

1.空数据处理添加创建按钮

src/app/components/CheckCardList.jsx

@@ -1,12 +1,13 @@
 import {CheckCard} from '@ant-design/pro-components';
-import { Dropdown, Flex, Input, Pagination, theme, Tooltip} from 'antd';
+import { Dropdown, Flex, Input, Pagination, theme, Tooltip,Button, Empty, Typography} from 'antd';
 import {memo, useCallback, useState} from 'react'
 const { Search } = Input;
 import { Avatar ,Card,Checkbox ,Tag,Col,Divider} from 'antd';
 const CheckboxGroup = Checkbox.Group;
 import {styled} from 'styled-components';
 import {EllipsisOutlined} from "@ant-design/icons";
-
+import useI18NPrefix from "../hooks/useI18NPrefix";
+import EMPTY from '../assets/empty.svg'
 /**
  * @style: 样式
  *
@@ -41,8 +42,10 @@ export const CheckCardList=memo(({
   actions,
   onDoubleClick,
   onChecked,
-  pagination
+  pagination,
+  onCreate
 })=>{
+  const t = useI18NPrefix('global');
   const isArray = Object.prototype.toString.call(options) === '[object Array]';
   const {token} = theme.useToken();
   const [check,setCheck]=useState([]);
@@ -85,91 +88,111 @@ export const CheckCardList=memo(({
   }
   return (
     <>
-      {onSearch && <Search allowClear onSearch={onSearch} style={{marginBottom:8}} placeholder="输入关键字进行搜索"/>}
+      {onSearch && <Search allowClear onSearch={onSearch} style={{marginBottom:8}} placeholder={t("placeholder.filter")}/>}
       {extra}
-      <Container style={{height:pagination?'65vh':'67.5vh'}}>
-        {
-          type==="card" &&
-          <CheckCard.Group style={style?style:{width:"100%"}} onChange={onSelect&&onSelect}>
-            {
-              isArray&&options.map(item=>
-                <CheckCard
-                  style={{width:"100%",marginBlockEnd:3,cursor:'pointer'}}
-                  key={item?.value?.id||item?.value}
-                  title={item?.title}
-                  value={item?.value}
-                  extra={cardExtra(item)}
-                  onDoubleClick={()=>{
-                    onDoubleClick && onDoubleClick(item)
-                  }}
-                  avatar={
-                    item?.avatar&&
-                    <Avatar
-                      size={item?.avatar?.size}
-                      shape={item?.avatar?.shape}
-                      src={item?.avatar?.src}
-                    />
-                  }
-                />
-              )
+      {
+        options.length === 0 &&
+          <Empty
+            style={{height:pagination?'65vh':'67.5vh',paddingTop:'15%'}}
+            image={EMPTY}
+            imageStyle={{
+              height: 60,
+            }}
+            description={
+              <Typography.Text>
+                {t("placeholder.emptyAdd")}
+              </Typography.Text>
             }
-          </CheckCard.Group>
-        }
-        {
-          type==="checkBox" &&
-          <CheckboxGroup onChange={onCardCheck} style={{width:'100%'}}>
-            {
-              isArray&&options.map(item=>
-                <Col span={24} key={item?.value}>
-                  <CustomCard
-                    size="small"
-                    style={styleFun(item?.value)}
+          >
+            {onCreate && <Button type="primary" onClick={onCreate}>{t("button.createNow")}</Button>}
+          </Empty>
+      }
+      {
+        options.length > 0 &&
+        <Container style={{height:pagination?'65vh':'67.5vh'}}>
+          {
+            type==="card" &&
+            <CheckCard.Group style={style?style:{width:"100%"}} onChange={onSelect&&onSelect}>
+              {
+                isArray&&options.map(item=>
+                  <CheckCard
+                    style={{width:"100%",marginBlockEnd:3,cursor:'pointer'}}
+                    key={item?.value?.id||item?.value}
+                    title={item?.title}
+                    value={item?.value}
+                    extra={cardExtra(item)}
                     onDoubleClick={()=>{
                       onDoubleClick && onDoubleClick(item)
                     }}
-                  >
-                    <Tooltip placement="top" title={tooltip} mouseEnterDelay={0.5}>
-                      <Flex>
-                        {/*卡片头信息 以及 内容*/}
-                        <Col flex="auto" >
-                          <Checkbox value={item}>
-                            <Span>
-                              {item?.title}
-                              {
-                                item?.tag &&
-                                <Tag color={item?.tag?.color?item?.tag?.color:'#2db7f5'} style={{marginLeft:10}}>{item?.tag?.label}</Tag>
-                              }
-                            </Span>
-                          </Checkbox>
-
-                          <Contant>
-                            {item?.content}
-                          </Contant>
-                        </Col>
-
-                        {/*卡片头Extra按钮*/}
-                        {
-                          item?.extra && Object.prototype.toString.call(item?.extra) === '[object Array]' &&
-                          (
-                            <>
-                              <CustomDivider type="vertical" />
-                              <Col flex="auto" style={{paddingBlockStart:40,paddingBlockEnd:40}}>
+                    avatar={
+                      item?.avatar&&
+                      <Avatar
+                        size={item?.avatar?.size}
+                        shape={item?.avatar?.shape}
+                        src={item?.avatar?.src}
+                      />
+                    }
+                  />
+                )
+              }
+            </CheckCard.Group>
+          }
+          {
+            type==="checkBox" &&
+            <CheckboxGroup onChange={onCardCheck} style={{width:'100%'}}>
+              {
+                isArray&&options.map(item=>
+                  <Col span={24} key={item?.value}>
+                    <CustomCard
+                      size="small"
+                      style={styleFun(item?.value)}
+                      onDoubleClick={()=>{
+                        onDoubleClick && onDoubleClick(item)
+                      }}
+                    >
+                      <Tooltip placement="top" title={tooltip} mouseEnterDelay={0.5}>
+                        <Flex>
+                          {/*卡片头信息 以及 内容*/}
+                          <Col flex="auto" >
+                            <Checkbox value={item}>
+                              <Span>
+                                {item?.title}
                                 {
-                                  item.extra.map(item=>item)
+                                  item?.tag &&
+                                  <Tag color={item?.tag?.color?item?.tag?.color:'#2db7f5'} style={{marginLeft:10}}>{item?.tag?.label}</Tag>
                                 }
-                              </Col>
-                            </>
-                          )
-                        }
-                      </Flex>
-                    </Tooltip>
-                  </CustomCard>
-                </Col>
-              )
-            }
-          </CheckboxGroup>
-        }
-      </Container>
+                              </Span>
+                            </Checkbox>
+
+                            <Contant>
+                              {item?.content}
+                            </Contant>
+                          </Col>
+
+                          {/*卡片头Extra按钮*/}
+                          {
+                            item?.extra && Object.prototype.toString.call(item?.extra) === '[object Array]' &&
+                            (
+                              <>
+                                <CustomDivider type="vertical" />
+                                <Col flex="auto" style={{paddingBlockStart:40,paddingBlockEnd:40}}>
+                                  {
+                                    item.extra.map(item=>item)
+                                  }
+                                </Col>
+                              </>
+                            )
+                          }
+                        </Flex>
+                      </Tooltip>
+                    </CustomCard>
+                  </Col>
+                )
+              }
+            </CheckboxGroup>
+          }
+        </Container>
+      }
       { type==="checkBox" && pagination && <Pagination align="end" showSizeChanger {...pagination}/>}
     </>
   )

src/app/components/SelectModal.jsx

@@ -1,4 +1,4 @@
-import {memo, useState, forwardRef, useMemo} from 'react'
+import {memo, useState, forwardRef, useMemo, useImperativeHandle} from 'react'
 import {Modal, Button} from 'antd'
 import {PlusOutlined, PlusSquareFilled} from '@ant-design/icons'
 import {styled} from 'styled-components'
@@ -22,6 +22,12 @@ const component = forwardRef(({
     setIsModalOpen(false)
   }
 
+  useImperativeHandle(ref, () => ({
+    onModelSelectOpen(){
+      setIsModalOpen(true)
+    }
+  }));
+
   const mergeStyle = {
     height:250,
     width:"90%",

src/app/pages/IndexDefine/components/IndexFilterForm.jsx

@@ -1,4 +1,4 @@
-import {memo} from 'react';
+import {forwardRef, memo, useImperativeHandle, useRef} from 'react';
 import {Button} from "antd";
 import {SelectModal} from "../../../components/SelectModal";
 import {ProFormSelect, ProFormText, QueryFilter} from "@ant-design/pro-components";
@@ -6,16 +6,22 @@ import {FORM_TYPE, INDEX_TYPE, PUBLISH_STATUS, SENSITIVE} from "../constants";
 import {STATUS_TYPE} from "../../../constants";
 import useI18NPrefix from "../../../hooks/useI18NPrefix";
 
-export const IndexFilterForm = memo(({
+const component = forwardRef(({
   onModelSelect,
   onFinish
-}) => {
+},ref) => {
   const t = useI18NPrefix('global');
+  const selectComp = useRef(null)
   const modalTypeOption = [
     {...FORM_TYPE.ATOMIC, icon: true},
     {...FORM_TYPE.DERIVED, icon: true},
     {...FORM_TYPE.COMPOSITE, icon: true},
   ]
+  useImperativeHandle(ref, () => ({
+    onModelSelectOpen(){
+      selectComp.current.onModelSelectOpen();
+    }
+  }));
   return (
     <QueryFilter
       defaultCollapsed
@@ -34,6 +40,7 @@ export const IndexFilterForm = memo(({
               description={t("placeholder.establishingMode")}
               options={modalTypeOption}
               onSelect={onModelSelect}
+              ref={selectComp}
               buttonProps={{
                 children:t("button.metricCreate"),
                 style:{
@@ -68,3 +75,4 @@ export const IndexFilterForm = memo(({
     </QueryFilter>
   )
 })
+export const IndexFilterForm=memo(component)

src/app/pages/IndexDefine/index.jsx

@@ -49,6 +49,8 @@ export const IndexDefine = () => {
   const [openIndexAuth,setOpenIndexAuth] = useState(false);
   /** 当前主题名称 */
   const [subTile,setSubTitle] = useState(t("title.baseInfo"));
+  /** 筛选的Ref */
+  const filterRef = useRef(null);
   /** 数据缓存*/
   const commonRef = useRef({
     treeSelect: {
@@ -640,7 +642,7 @@ export const IndexDefine = () => {
       {/** 主面板 */}
       <ProCard bordered headerBordered title={subTile} bodyStyle={{overflowY: 'auto',height:'80vh'}}>
         {/** 筛选栏 */}
-        <IndexFilterForm onModelSelect={onModelSelect} onFinish={onFilterFormFinish}/>
+        <IndexFilterForm onModelSelect={onModelSelect} onFinish={onFilterFormFinish} ref={filterRef}/>
 
         <Span>
           <CustomButton onClick={onIndexAuthPanelOpen}>{t("button.batchAuth")}</CustomButton>
@@ -656,9 +658,7 @@ export const IndexDefine = () => {
           onSelect={onCardSelect}
           onDoubleClick={onCardDoubleClick}
           onChecked={onCardChecked}
-          // pagination={{
-          //   total: 50,
-          // }}
+          onCreate={()=>{filterRef.current.onModelSelectOpen()}}
         />
       </ProCard>
     </ProCard>

src/locales/en/translation.json

@@ -61,6 +61,7 @@
     "version": "Version",
     "button": {
       "create": "Create",
+      "createNow": "Create Now",
       "save": "Save",
       "edit": "Edit",
       "archive": "Archive",
@@ -293,7 +294,9 @@
       "modelName": "Please enter the model name",
       "rightClick": "Right-click to edit",
       "expr": "Please enter an Expression",
-      "lang": "Click to use to take effect"
+      "lang": "Click to use to take effect",
+      "empty": "No data yet",
+      "emptyAdd": "We don't have data yet. Let's create one."
     },
     "columns": {
       "name": "Name",

src/locales/zh/translation.json

@@ -61,6 +61,7 @@
     "version": "版本",
     "button": {
       "create": "新建",
+      "createNow": "立即创建",
       "save": "保存",
       "edit": "编辑",
       "archive": "移至回收站",
@@ -293,7 +294,9 @@
       "modelName": "请输入模型的名称",
       "rightClick": "右键编辑",
       "expr": "请输入表达式",
-      "lang": "点击使用后生效"
+      "lang": "点击使用后生效",
+      "empty": "暂无数据",
+      "emptyAdd": "还没有数据，快创建一个吧"
     },
     "columns": {
       "name": "名称",