build: base url

.eslintrc.js

@@ -1,7 +1,8 @@
 module.exports = {
   extends: require.resolve('@umijs/max/eslint'),
-  // react/no-unstable-nested-components config
   rules: {
-    'react/no-unstable-nested-components': 'on'
+    'react/no-unstable-nested-components': 1,
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': 'off'
   }
 };

config/config.ts

@@ -1,14 +1,14 @@
 import { defineConfig } from '@umijs/max';
+
 import proxy from './proxy';
 import routes from './routes';
-const { REACT_APP_ENV = 'dev' } = process.env;
-
-console.log('env+++++++++++++++', process.env.NODE_ENV, REACT_APP_ENV);
 
 export default defineConfig({
   proxy: {
     ...proxy()
   },
+  base: process.env.npm_config_base || '/',
+  esbuildMinifyIIFE: true,
   clickToComponent: {},
   antd: {
     style: 'less',

src/components/seal-table/components/table-row.tsx

@@ -39,9 +39,12 @@ const TableRow: React.FC<
   }, [rowSelection]);
 
   const handleRowExpand = async () => {
+    setExpanded(!expanded);
+    onExpand?.(!expanded, record);
+    if (expanded) {
+      return;
+    }
     try {
-      setExpanded(!expanded);
-      onExpand?.(!expanded, record);
       setLoading(true);
       const data = await loadChildren?.(record);
       setChildrenData(data || []);

src/components/status-tag/index.less

@@ -1,10 +1,31 @@
 .status-tag {
+  position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 2px 10px;
   border-radius: 20px;
   width: fit-content;
+  min-width: 76px;
   height: 26px;
   font-size: var(--font-size-base);
+  overflow: hidden;
+
+  .download {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    height: 100%;
+    background-color: var(--ant-color-primary);
+  }
+
+  .progress {
+    position: relative;
+    z-index: 10;
+    color: var(--color-white-1);
+  }
 }

src/components/status-tag/index.tsx

@@ -33,9 +33,22 @@ const StatusTag: React.FC<StatusTagProps> = ({ statusValue, download }) => {
     setStatusColor(StatusColorMap[status]);
   }, [status]);
 
+  const renderContent = () => {
+    const percent = download?.percent || 0;
+
+    if (download && percent > 0 && percent < 100) {
+      return (
+        <>
+          <span className="progress">{download?.percent || 0}%</span>
+          <span className="download" style={{ width: `${percent}%` }}></span>
+        </>
+      );
+    }
+    return <span>{text}</span>;
+  };
   return (
     <span
-      className={classNames('status-tag', { download: download })}
+      className={classNames('status-tag')}
       style={
         download
           ? {
@@ -48,7 +61,7 @@ const StatusTag: React.FC<StatusTagProps> = ({ statusValue, download }) => {
             }
       }
     >
-      {text}
+      {renderContent()}
     </span>
   );
 };

src/pages/api-keys/index.tsx

@@ -51,7 +51,7 @@ const Models: React.FC = () => {
   const { sortOrder, setSortOrder } = useTableSort({
     defaultSortOrder: 'descend'
   });
-  const [total, setTotal] = useState(100);
+  const [total, setTotal] = useState(0);
   const [openAddModal, setOpenAddModal] = useState(false);
   const [loading, setLoading] = useState(false);
   const [action, setAction] = useState<PageActionType>(PageAction.CREATE);
@@ -91,7 +91,7 @@ const Models: React.FC = () => {
   const handleAddUser = () => {
     setOpenAddModal(true);
     setAction(PageAction.CREATE);
-    setTitle('Add User');
+    setTitle('Add API Key');
   };
 
   const handleClickMenu = (e: any) => {
@@ -160,7 +160,7 @@ const Models: React.FC = () => {
                 type="primary"
                 onClick={handleAddUser}
               >
-                Add API-key
+                Add API Key
               </Button>
               <Button
                 icon={<DeleteOutlined />}
@@ -209,7 +209,7 @@ const Models: React.FC = () => {
             key="operation"
             render={(text, record) => {
               return (
-                <Space>
+                <Space size={20}>
                   <Tooltip title="编辑">
                     <Button
                       size="small"

src/pages/llmodels/index.tsx

@@ -1,5 +1,4 @@
 import PageTools from '@/components/page-tools';
-import ProgressBar from '@/components/progress-bar';
 import SealTable from '@/components/seal-table';
 import RowChildren from '@/components/seal-table/components/row-children';
 import SealColumn from '@/components/seal-table/components/seal-column';
@@ -57,7 +56,7 @@ const Models: React.FC = () => {
   });
   const [logContent, setLogContent] = useState('');
   const [openLogModal, setOpenLogModal] = useState(false);
-  const [hoverChildIndex, setHoverChildIndex] = useState(-1);
+  const [hoverChildIndex, setHoverChildIndex] = useState<string | number>(-1);
   const [total, setTotal] = useState(100);
   const [openAddModal, setOpenAddModal] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -213,8 +212,8 @@ const Models: React.FC = () => {
     });
   };
 
-  const handleOnMouseEnter = (index: number) => {
+  const handleOnMouseEnter = (id: number, index: number) => {
-    setHoverChildIndex(index);
+    setHoverChildIndex(`${id}-${index}`);
   };
 
   const handleOnMouseLeave = () => {
@@ -238,7 +237,7 @@ const Models: React.FC = () => {
           return (
             <div
               key={`${item.id}`}
-              onMouseEnter={() => handleOnMouseEnter(index)}
+              onMouseEnter={() => handleOnMouseEnter(item.id, index)}
               onMouseLeave={handleOnMouseLeave}
             >
               <RowChildren>
@@ -248,12 +247,6 @@ const Models: React.FC = () => {
                   </Col>
                   <Col span={5}>
                     <span>{item.huggingface_repo_id}</span>
-                    <div style={{ marginTop: '4px' }}>
-                      <ProgressBar
-                        download
-                        percent={item.download_progress || 0}
-                      ></ProgressBar>
-                    </div>
                   </Col>
                   <Col span={4}>
                     {dayjs(item.updated_at).format('YYYY-MM-DD HH:mm:ss')}
@@ -261,7 +254,11 @@ const Models: React.FC = () => {
                   <Col span={4}>
                     {item.state && (
                       <StatusTag
-                        download={{ percent: 10 }}
+                        download={
+                          item.download_progress !== 100
+                            ? { percent: item.download_progress }
+                            : undefined
+                        }
                         statusValue={{
                           status: status[item.state] as any,
                           text: item.state
@@ -270,7 +267,7 @@ const Models: React.FC = () => {
                     )}
                   </Col>
                   <Col span={7}>
-                    {hoverChildIndex === index && (
+                    {hoverChildIndex === `${item.id}-${index}` && (
                       <Space size={20}>
                         <Tooltip title="Delete">
                           <Button