Merge branch 'feature/v1.2' into 'main'

Feature/v1.2 See merge request apipark/APIPark!64
2026-06-12 18:11:34 +08:00 · 2024-10-29 13:39:06 +08:00
parent 7e419cb2de 6ae5b4992f
commit 8e4ce11053
6 changed files with 103 additions and 165 deletions
@@ -1,27 +1,24 @@

-import { GetProp, TransferProps, TreeDataNode, theme, Transfer, Tree, Spin } from "antd";
-import { DataNode, TreeProps } from "antd/es/tree";
+import { TransferProps, TreeDataNode, Tree, Spin, Input } from "antd";
+import { DataNode } from "antd/es/tree";
 import {  Ref, forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
-import { ApartmentOutlined, LoadingOutlined, UserOutlined } from "@ant-design/icons";
-import { cloneDeep, debounce } from "lodash-es";
+import { LoadingOutlined } from "@ant-design/icons";
 import { ColumnsType } from "antd/es/table";
 import { $t } from "@common/locales";
 import { useGlobalContext } from "@common/contexts/GlobalStateContext";
-
-type TransferItem = GetProp<TransferProps, 'dataSource'>[number];
+import Search from "antd/es/input/Search";

 export type TransferTableProps<T> = {
  request?:(k?:string)=>Promise<{data:T[],success:boolean}>
  columns: ColumnsType<T>
  primaryKey:string
-  onSelect:(selectedData:T[])=>void
+  onSelect:(selectedData:string[])=>void
  tableType?:'member'|'api'
  disabledData:string[]
  searchPlaceholder?:string
 }

 export type TransferTableHandle<T> = {
-  selectedData: () => T[];
  selectedRowKeys: () => React.Key[];
 }

@@ -31,10 +28,6 @@ interface TreeTransferProps {
  onChange: TransferProps['onChange'];
 }
  
-// Customize Table Transfer
-const isChecked = (selectedKeys: React.Key[], eventKey: React.Key) =>
-  selectedKeys.includes(eventKey);
-
 const generateTree = (
  treeNodes: TreeDataNode[] = [],
  checkedKeys: TreeTransferProps['targetKeys'] = [], 
@@ -73,167 +66,102 @@ const generateTree = (
    )
 };

-const TransferTree = (props)=>{
-  const { direction, token, tableHeight, dataSource, targetKeys, onItemSelect, onItemSelectAll,checkedKey,selectedKeys, filteredItems ,disabledData} = props;
-  const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
-
-  const getExpandedKeys = (newData:TreeDataNode[], expandedSet:Set<string> = new Set())=>{
-    newData.forEach((item)=>{
-      if(item.children && item.children.length > 0){
-        expandedSet.add(item.key)
-        getExpandedKeys(item.children,expandedSet)
-      }
-    })
-    return expandedSet
-  }
-
-  const treeData:TreeDataNode[] = useMemo(()=>{
-    const filteredSet = filteredItems && filteredItems.length > 0 ? new Set(filteredItems.map((x)=>x.id))  : new Set()
-    const res =  dataSource && dataSource.length > 0 ? generateTree(dataSource, targetKeys,direction === 'right',disabledData,filteredSet) : []
-    setExpandedKeys(Array.from(getExpandedKeys(res)))
-    return res
-  },[
-    dataSource, targetKeys,direction ,disabledData,filteredItems
-  ])
-
-  const onExpand: TreeProps['onExpand'] = (expandedKeysValue) => {
-    setExpandedKeys(expandedKeysValue as string[]);
-  };
-
-  return (
-    
-    <div style={{ padding: token.paddingXS }}>
-      <Tree
-          className="icon-tree"
-          blockNode
-          checkable
-          showIcon
-          checkedKeys={direction === 'left' ? Array.from(new Set([...checkedKey,...disabledData])) : selectedKeys }
-          defaultExpandAll
-          expandedKeys={expandedKeys}
-          onExpand={onExpand}
-          height={tableHeight}
-          icon={(props)=> { return (props.type === 'member' ? <UserOutlined /> :<ApartmentOutlined /> )} }
-          treeData={treeData}
-          onCheck={(_checkedKeys, e:{checked: boolean, checkedNodes, node, event, halfCheckedKeys}) => {
-              if(e.checked){
-                  onItemSelectAll( _checkedKeys, e.checked);
-              }else{
-                  const checkedKeyArrFromTree = e.checkedNodes.map(node => node.key)
-                  onItemSelectAll((checkedKey as string[]).filter(key => checkedKeyArrFromTree.indexOf(key) === -1),e.checked)
-              }
-          }}
-          onSelect={(_, { node: { key } }) => {
-              onItemSelect(key as string, !isChecked(checkedKey, key));
-          }}
-      />
-    </div>
-  )
-}
-

 const MemberTransfer= forwardRef<TransferTableHandle<{[k:string]:unknown}>, TransferTableProps<{[k:string]:unknown}>>(
  <T extends {[k:string]:unknown}>(props: TransferTableProps<T>, ref:Ref<TransferTableHandle<T>>) => {
    const {request,columns,primaryKey,onSelect,tableType,disabledData = [],searchPlaceholder} = props
-    const [tableHeight, setTableHeight] = useState(window.innerHeight * 80 / 100 - 64 - 72 - 56 - 16 -3);
    const [targetKeys, setTargetKeys] = useState<TreeTransferProps['targetKeys']>([]);
    const [dataSource, setDataSource] = useState<DataNode[] >([])
    const parentRef = useRef<HTMLDivElement>(null);
    const [loading, setLoading] = useState<boolean>(false)
    const {state} = useGlobalContext()
-    
+    const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
+    const [searchWord, setSearchWord] = useState<string>('')
    useEffect(()=>{
      setTargetKeys(disabledData)
    },[disabledData])

    useImperativeHandle(ref, () =>({
-      selectedData: () => dataSource,
      selectedRowKeys: () => targetKeys,}))

-    const onChange: TreeTransferProps['onChange'] = (keys) => {
-      onSelect?.(new Set(keys))
-      setTargetKeys(Array.from(new Set(keys)));
-    };
+  const translatedDataSource = useMemo(()=>{
+    
+    const loop = (data: DataNode[]): DataNode[] =>
+      data?.map((item) => {
+          const strTitle:string = item.name === '所有成员' ? $t(item.name) as string : item.name as string;
+          const index = strTitle.indexOf(searchWord);
+          const beforeStr = strTitle.substring(0, index);
+          const afterStr = strTitle.slice(index + searchWord.length);
+          const title =
+              index > -1 ? (
+                  <span className='w-[calc(100%-16px)] truncate' title={strTitle}>
+                      {beforeStr}
+                      <span className="text-theme">{searchWord}</span>
+                      {afterStr}
+                  </span>
+              ) : (
+                  <span className='w-[calc(100%-16px)] truncate' title={`${strTitle}`}>{strTitle}</span>
+              )
+          if (item.children) {
+              return {
+                  ...item,
+                  title, 
+                  disableCheckbox:disabledData.indexOf(item.key as string) !== -1,
+                  children: loop(item.children as T[]) };
+          }

-  const { token } = theme.useToken();
-
-  const transferDataSource: TransferItem[] = useMemo(()=>{
-      function flatten(list: TreeDataNode[] = [], res:TransferItem[]) {
-        list.forEach((item) => {
-          res.push({...item, title:item.title === '所有成员' ? $t((item as unknown as {title:string}).title):item.title }as TransferItem);
-          flatten(item.children,res);
-        });
-      }
-      const res:TransferItem[] =[]
-      flatten(dataSource,res);
-      return res
-  },[
-    dataSource, state.language
-  ])
-
-
-  const translatedDataSource = useMemo(()=>dataSource.map((item)=>({
-    ...item, 
-    name:item.name === '所有成员' ? $t((item as unknown as {name:string}).name):item.name,
-  })),[dataSource, state.language])
-
-
-
-  let memo: Record<string, boolean> = {};
-
-  const handlerFilterOption = (inputValue: string, item: any, parentResult: boolean = false, childrenSet: Set<string> = new Set()): boolean => {
-    const cacheKey = `${inputValue}_${item.key}`;
-    if (memo[cacheKey]) {
-      return memo[cacheKey];
-    }
-
-    childrenSet.add(item.key);
-    let result = item.title.includes(inputValue) || parentResult
-    if (item.children) {
-      for (const child of item.children) {
-        if (handlerFilterOption(inputValue, child, result,childrenSet)) {
-          result = true;
-        }
-      }
-    }
-  
-    if (result) {
-      memo[cacheKey] = result;
-      childrenSet.forEach((key) => {
-        memo[`${inputValue}_${key}`] = result;
+          return {
+              ...item,
+              title, 
+              isLeaf:true,
+              disableCheckbox:disabledData.indexOf(item.key as string) !== -1
+          };
      });
-    }
-    return result;
-  };
+      console.log(searchWord, dataSource)
+  return loop(dataSource);
+  },[dataSource, state.language, searchWord])
+
+  const getInitExpandKeys = (data:T[], expandKeys:string[] = [])=>{
+    data.forEach((item)=>{
+      if(item.children?.length){
+        expandKeys.push(item.key as string)
+        getInitExpandKeys(item.children,expandKeys)
+      }
+    })
+    return expandKeys
+  }
  
  const getDataSource = ()=>{
    setLoading(true)
    request && request().then((res)=>{
        const {data,success} = res
        setDataSource(success? data : [])
+        setExpandedKeys(getInitExpandKeys(success? data:[]))
    }).finally(()=>{setLoading(false)})
-}
+  }

-useEffect(() => {
-  getDataSource()
-  const handleResize = () => {
-      setTableHeight(window.innerHeight * 80 / 100 - 64 - 72 - 56 - 16 -3)
-  };

-  const debouncedHandleResize = debounce(handleResize, 200);
-
-  // 监听窗口大小变化
-  window.addEventListener('resize', debouncedHandleResize);
-  handleResize();
-  return () => {
-    window.removeEventListener('resize', debouncedHandleResize);
-  };
-}, []);
+  useEffect(() => {
+    getDataSource()
+  }, []);

    return (
        <div ref={parentRef}>
        <Spin indicator={<LoadingOutlined style={{ fontSize: 24 }} spin />} spinning={loading} className=''>
-          <Transfer
+        <Input  placeholder={searchPlaceholder} onChange={(e)=>setSearchWord(e.target.value)} value={searchWord} />
+        <Tree
+          checkable
+          expandedKeys={expandedKeys}
+          checkedKeys={targetKeys}
+          selectable={false}
+          onCheck={(e)=>{setTargetKeys(e);
+            onSelect(((e as string[])?.filter(x=>disabledData.indexOf(x as string) === -1))||[])}}
+          onExpand={setExpandedKeys}
+          treeData={translatedDataSource}
+          blockNode 
+        />
+
+          {/* <Transfer
            showSearch
            onSearch={(dir)=>{
              memo = {}; 
@@ -266,7 +194,7 @@ useEffect(() => {
                  );
                }
            }}
-            </Transfer>
+            </Transfer> */}
            </Spin>
        </div>
      );
@@ -290,3 +290,8 @@ a{
    transition: background-color 0s 600000s, color 0s 600000s !important;
  }
  }
+
+  .ant-select-selection-overflow-item:first-child {
+    max-width: calc(100% - 60px);
+    margin-right: 4px;
+    }
@@ -21,22 +21,22 @@ export default function Guide(){
                {
                    title: $t("配置你的 AI 模型"),
                    description: $t('通过 APIPark 快速接入各种 AI 模型，使用统一的格式来调用API，并且可以随意切换模型。'),
-                    link: 'https://docs.apipark.com/docs/quick/pre-work/team'
+                    link: 'https://docs.apipark.com/docs/system_setting/ai_model_providers'
                },
                {
                    title: $t("创建 AI 服务和 API"),
                    description: $t('创建 AI 类型的服务，并且你可以将 Prompt 提示词设置为一个 API，简化使用 AI 的流程。'),
-                    link: 'https://docs.apipark.com/docs/quick/provider/service'
+                    link: 'https://docs.apipark.com/docs/services/ai_services'
                },
                {
                    title: $t("创建调用 Token"),
                    description: $t('为了安全地调用 API，你需要创建一个消费者以及Token。'),
-                    link: 'https://docs.apipark.com/docs/quick/suberscriber/application'
+                    link: 'https://docs.apipark.com/docs/consumers'
                },
                {
                    title: $t("调用"),
                    description: $t('现在你可以通过 Token 来调用这些 API。'),
-                    link: 'https://docs.apipark.com/docs/quick/suberscriber/application'
+                    link: 'https://docs.apipark.com/docs/call_api'
                }
            ]
        },
@@ -46,17 +46,17 @@ export default function Guide(){
                {
                    title: $t("创建 REST 服务和 API"),
                    description: $t('创建 AI 类型的服务，并且你可以将 Prompt 提示词设置为一个 API，简化使用 AI 的流程。'),
-                    link: 'https://docs.apipark.com/docs/tutorials/api-market/service'
+                    link: 'https://docs.apipark.com/docs/services/rest_services'
                },
                {
                    title: $t("创建调用 Token"),
                    description: $t('为了安全地调用 API，你需要创建一个消费者以及Token。'),
-                    link: 'https://docs.apipark.com/docs/quick/suberscriber/subscribe'
+                    link: 'https://docs.apipark.com/docs/consumers'
                },
                {
                    title: $t("调用"),
                    description: $t('现在你可以通过 Token 来调用这些 API。'),
-                    link: 'https://docs.apipark.com/docs/quick/provider/approve'
+                    link: 'https://docs.apipark.com/docs/call_api'
                }
            ]
        },
@@ -66,7 +66,7 @@ export default function Guide(){
                {
                    title: $t("统计 API 调用情况"),
                    description: $t('仪表盘中提供了多种统计图表，帮助我们了解 API 的运行情况。'),
-                    link: 'https://docs.apipark.com/docs/quick/pre-work/monitor'
+                    link: 'https://docs.apipark.com/docs/analysis'
                }
            ]
        }
@@ -78,17 +78,17 @@ export default function Guide(){
                {
                    title: $t("账号与角色"),
                    description: $t('邀请你的团队成员加入 APIPark，共同管理和调用 API。'),
-                    link: 'https://docs.apipark.com/docs/quick/pre-work/team'
+                    link: 'https://docs.apipark.com/docs/system_setting/account_role'
                },
                {
                    title: $t("团队"),
                    description: $t('团队中包含了人员、消费者和服务，不同团队之间的消费者和服务数据是隔离的，可用于管理企业内部不同的部门/项目组/团队。'),
-                    link: 'https://docs.apipark.com/docs/quick/provider/service'
+                    link: 'https://docs.apipark.com/docs/teams'
                },
                {
                    title: $t("服务"),
                    description: $t('服务内包含一组 API，并且可以发布到 API 市场被其他团队使用。'),
-                    link: 'https://docs.apipark.com/docs/quick/suberscriber/application'
+                    link: 'https://docs.apipark.com/docs/category/-%E6%9C%8D%E5%8A%A1'
                }
            ]
        },
@@ -98,12 +98,12 @@ export default function Guide(){
                {
                    title: $t("订阅服务"),
                    description: $t('如果需要调用某个服务的 API，需要先订阅该服务，并且等待提供服务的团队审核后才可发起 API 请求。'),
-                    link: 'https://docs.apipark.com/docs/tutorials/api-market/service'
+                    link: 'https://docs.apipark.com/docs/developer_portal'
                },
                {
                    title: $t("审核订阅申请"),
                    description: $t('提供服务的团队可以审核来自其他团队的订阅申请，审核通过后的消费者才可发起 API 请求。'),
-                    link: 'https://docs.apipark.com/docs/quick/suberscriber/subscribe'
+                    link: 'https://docs.apipark.com/docs/services/review_consumers'
                }
            ]
        },
@@ -113,7 +113,7 @@ export default function Guide(){
                {
                    title: $t("日志"),
                    description: $t('APIPark 提供详尽的 API 调用日志，帮助企业监控、分析和审计 API 的运行状况。'),
-                    link: 'https://docs.apipark.com/docs/quick/pre-work/monitor'
+                    link: 'https://docs.apipark.com/docs/system_setting/log/'
                }
            ]
        }
@@ -117,7 +117,6 @@ export const MemberDropdownModal = forwardRef<MemberDropdownModalHandle,MemberDr
        return loop(departmentList);
    }, [departmentList,state.language]);

-    console.log(treeData)

    return (<WithPermission access="">
        <Form
@@ -34,7 +34,7 @@ const TeamConfig= forwardRef<TeamConfigHandle,TeamConfigProps>((props,ref) => {
    const [managerOption, setManagerOption] = useState<DefaultOptionType[]>([])
    const { setBreadcrumb} = useBreadcrumb()
    const { setTeamInfo } =useTeamContext()
-    const {checkPermission,accessInit} = useGlobalContext()
+    const {checkPermission,accessInit,state} = useGlobalContext()
    const pageType= useMemo(()=>{
        if(!accessInit) return 'myteam'
        return checkPermission('system.workspace.team.view_all') ? 'manage' : 'myteam'
@@ -128,7 +128,10 @@ const TeamConfig= forwardRef<TeamConfigHandle,TeamConfigProps>((props,ref) => {
            getTeamInfo();
        } else {
            setOnEdit(false);
-            form.setFieldsValue({id:uuidv4()}); // 清空 initialValues
+            form.setFieldsValue(
+                {id:uuidv4(),
+                    master:state?.userData?.uid
+                }); // 清空 initialValues
        }
        return (form.setFieldsValue({}))
    }, [teamId]);
@@ -273,7 +273,6 @@ const TeamInsideMember:FC = ()=>{
    },[ state.language,roleList])

    useEffect(() => {
-        getRoleList()
        setBreadcrumb([
            {title:<Link to="/team/list">{$t('团队')}</Link>},
            {title:$t('成员')}
@@ -281,6 +280,11 @@ const TeamInsideMember:FC = ()=>{
        manualReloadTable()
    }, [teamId]);

+
+    useEffect(()=>{
+        getRoleList()
+    },[state.language])
+
    const treeDisabledData = useMemo(()=>{ return [...allMemberIds,...allMemberSelectedDepartIds]},[allMemberIds,allMemberSelectedDepartIds])
    
    return (
@@ -303,7 +307,7 @@ const TeamInsideMember:FC = ()=>{
                   title={$t("添加成员")}
                   open={modalVisible}
                   destroyOnClose={true}
-                   width={900}
+                   width={600}
                   onCancel={() => cleanModalData()}
                   maskClosable={false}
                   footer={[
@@ -327,10 +331,9 @@ const TeamInsideMember:FC = ()=>{
                    disabledData={treeDisabledData}
                    request={()=>getDepartmentMemberList()}
                    onSelect={(selectedData: Set<string>) => {
-                        const memberKeyFromModal = Array.from(selectedData)?.filter(x => allMemberIds.indexOf(x) === -1 &&selectableMemberIds.has(x)) || [];
-                        setAddMemberBtnDisabled((memberKeyFromModal.length === 0));
+                        setAddMemberBtnDisabled((selectedData.length === 0));
                    }}
-                    searchPlaceholder={$t("搜索用户名、邮箱")}
+                    searchPlaceholder={$t("搜索用户名")}
                 />
               </Modal>
        </>