技能管理菜单

web/app/(commonLayout)/layout.tsx

@@ -10,6 +10,7 @@ import { ProviderContextProvider } from '@/context/provider-context'
 import { ModalContextProvider } from '@/context/modal-context'
 
 const Layout = ({ children }: { children: ReactNode }) => {
+  console.log(children)
   return (
     <>
       <GA gaType={GaType.admin} />

web/app/(commonLayout)/skill/page.tsx

@@ -0,0 +1,13 @@
+'use client'
+import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import React from 'react'
+import SkillIndex from '@/app/components/skill/index'
+
+const Layout: FC = () => {
+  const { t } = useTranslation()
+  document.title = `${t('common.menus.skill')}`
+
+  return <SkillIndex />
+}
+export default React.memo(Layout)

web/app/components/skill/index.tsx

@@ -0,0 +1,111 @@
+'use client'
+import { useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import cn from '@/utils/classnames'
+import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
+import TabSliderNew from '@/app/components/base/tab-slider-new'
+import Input from '@/app/components/base/input'
+import { useAllToolProviders } from '@/service/use-tools'
+
+const SkillIndex = () => {
+  const { t } = useTranslation()
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  const [activeTab, setActiveTab] = useTabSearchParams({
+    defaultTab: 'corpus',
+  })
+  const options = [
+    { value: 'corpus', text: '训练语料' },
+    { value: 'intent', text: '意图识别' },
+    { value: 'log', text: '训练日志' },
+  ]
+  const [tagFilterValue, setTagFilterValue] = useState<string[]>([])
+
+  const [keywords, setKeywords] = useState<string>('')
+  const handleKeywordsChange = (value: string) => {
+    setKeywords(value)
+  }
+  const { data: collectionList = [], refetch } = useAllToolProviders()
+  const filteredCollectionList = useMemo(() => {
+    return collectionList.filter((collection) => {
+      if (collection.type !== activeTab)
+        return false
+      if (tagFilterValue.length > 0 && (!collection.labels || collection.labels.every(label => !tagFilterValue.includes(label))))
+        return false
+      if (keywords)
+        return Object.values(collection.label).some(value => value.toLowerCase().includes(keywords.toLowerCase()))
+      return true
+    })
+  }, [activeTab, tagFilterValue, keywords, collectionList])
+
+  return (
+    <>
+      <div className='relative flex h-0 shrink-0 grow overflow-hidden'>
+        <div
+          ref={containerRef}
+          className='relative flex grow flex-col overflow-y-auto bg-background-body'
+        >
+          <div className={cn(
+            'sticky top-0 z-20 flex flex-wrap items-center justify-between gap-y-2 bg-background-body px-12 pb-2 pt-4 leading-[56px]',
+            currentProvider && 'pr-6',
+          )}>
+            <TabSliderNew
+              value={activeTab}
+              onChange={(state) => {
+                setActiveTab(state)
+                if (state !== activeTab)
+                  setCurrentProvider(undefined)
+              }}
+              options={options}
+            />
+            <div className='flex items-center gap-2'>
+              <Input
+                showLeftIcon
+                showClearIcon
+                wrapperClassName='w-[200px]'
+                value={keywords}
+                onChange={e => handleKeywordsChange(e.target.value)}
+                onClear={() => handleKeywordsChange('')}
+              />
+            </div>
+          </div>
+          {/* {(filteredCollectionList.length > 0 || activeTab !== 'builtin') && ( */}
+          {/*  <div className={cn( */}
+          {/*    'relative grid shrink-0 grid-cols-1 content-start gap-4 px-12 pb-4 pt-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4', */}
+          {/*    !filteredCollectionList.length && activeTab === 'workflow' && 'grow', */}
+          {/*  )}> */}
+          {/*    {activeTab === 'api' && <CustomCreateCard onRefreshData={refetch} />} */}
+          {/*    {filteredCollectionList.map(collection => ( */}
+          {/*      <div */}
+          {/*        key={collection.id} */}
+          {/*        onClick={() => setCurrentProvider(collection)} */}
+          {/*      > */}
+          {/*        <Card */}
+          {/*          className={cn( */}
+          {/*            'cursor-pointer border-[1.5px] border-transparent', */}
+          {/*            currentProvider?.id === collection.id && 'border-components-option-card-option-selected-border', */}
+          {/*          )} */}
+          {/*          hideCornerMark */}
+          {/*          payload={{ */}
+          {/*            ...collection, */}
+          {/*            brief: collection.description, */}
+          {/*            org: collection.plugin_id ? collection.plugin_id.split('/')[0] : '', */}
+          {/*            name: collection.plugin_id ? collection.plugin_id.split('/')[1] : collection.name, */}
+          {/*          } as any} */}
+          {/*          footer={ */}
+          {/*            <CardMoreInfo */}
+          {/*              tags={collection.labels} */}
+          {/*            /> */}
+          {/*          } */}
+          {/*        /> */}
+          {/*      </div> */}
+          {/*    ))} */}
+          {/*  </div> */}
+          {/* )} */}
+        </div>
+      </div>
+    </>
+  )
+}
+SkillIndex.displayName = 'SkillIndex'
+export default SkillIndex