fix: show tag only one selected

src/components/seal-form/simple-select.tsx

@@ -54,7 +54,13 @@ const SimpleSelect: React.FC<
   }
 > = forwardRef((props, ref) => {
   const intl = useIntl();
-  const { options = [], showTags, styles = {}, ...restProps } = props;
+  const {
+    options = [],
+    showTags: tagsVisible,
+    styles = {},
+    maxTagCount: tagCount,
+    ...restProps
+  } = props;
 
   const [allSelection, setAllSelection] = React.useState<{
     checked: boolean;
@@ -67,6 +73,10 @@ const SimpleSelect: React.FC<
   const selectRef = React.useRef<any>(null);
   const selectorRef = React.useRef<any>(null);
 
+  const showTags = Array.isArray(props.value) && props.value.length === 1;
+  const maxTagCount =
+    Array.isArray(props.value) && props.value.length === 1 ? 1 : 0;
+
   useEffect(() => {
     setOptionsList(options || []);
   }, [options]);
@@ -268,8 +278,9 @@ const SimpleSelect: React.FC<
           ...styles.select
         }}
         ref={selectorRef}
+        maxTagTextLength={restProps.maxTagTextLength ?? 15}
         options={optionsList}
-        maxTagCount={restProps.maxTagCount || 0}
+        maxTagCount={maxTagCount}
         defaultActiveFirstOption={false}
         popupRender={dropdownRender}
         optionRender={optionRender}

src/pages/usage/components/breakdown-tabs.tsx

@@ -36,7 +36,13 @@ const BreakdownTabs: React.FC<{
       key: 'users',
       label: 'Users',
       forceRender: true,
-      children: <UsersTable users={filters.users || []} dateRange={dateRange} />
+      children: (
+        <UsersTable
+          users={filters.users || []}
+          dateRange={dateRange}
+          scope={scope}
+        />
+      )
     },
     {
       key: 'api_keys',

src/pages/usage/components/filter-bar.tsx

@@ -1,4 +1,3 @@
-import BaseSelect from '@/components/seal-form/base/select';
 import SimpleSelect from '@/components/seal-form/simple-select';
 import useRangePickerPreset from '@/pages/dashboard/hooks/use-rangepicker-preset';
 import { useModel } from '@@/plugin-model';
@@ -7,7 +6,6 @@ import { useIntl } from '@umijs/max';
 import { Button, DatePicker, Dropdown, MenuProps } from 'antd';
 import dayjs from 'dayjs';
 import React from 'react';
-import { scopeOptions } from '../config';
 import { UsageFilterItem } from '../config/types';
 import FilterBarCss from '../styles/filter-bar.less';
 
@@ -109,14 +107,14 @@ const FilterBar: React.FC<FilterBarProps> = (props) => {
   return (
     <div className={FilterBarCss.wrapper}>
       <div className={FilterBarCss.filters}>
-        {initialState?.currentUser?.is_admin && (
+        {/* {initialState?.currentUser?.is_admin && (
           <BaseSelect
             options={scopeOptions}
             value={scope}
             onChange={onScopeChange}
             style={{ width: 150 }}
           />
-        )}
+        )} */}
         <DatePicker.RangePicker
           maxDate={dayjs()}
           defaultValue={[
@@ -143,19 +141,20 @@ const FilterBar: React.FC<FilterBarProps> = (props) => {
           value={selectedModels}
           onChange={onModelsChange}
         />
-        <SimpleSelect
+        {initialState?.currentUser?.is_admin && (
-          allowClear
+          <SimpleSelect
-          showSearch
+            allowClear
-          mode="multiple"
+            showSearch
-          options={userOptions}
+            mode="multiple"
-          maxTagCount={0}
+            options={userOptions}
-          placeholder="User"
+            placeholder="User"
-          styles={{
+            styles={{
-            wrapper: { flex: 1, maxWidth: 240, minWidth: 150 }
+              wrapper: { flex: 1, maxWidth: 240, minWidth: 150 }
-          }}
+            }}
-          value={selectedUsers}
+            value={selectedUsers}
-          onChange={onUsersChange}
+            onChange={onUsersChange}
-        />
+          />
+        )}
         <SimpleSelect
           allowClear
           showSearch

src/pages/usage/index.tsx

@@ -259,7 +259,10 @@ const Usage: React.FC = () => {
       />
       <BreakdownTabs
         filters={filters}
-        dateRange={commonFilters}
+        dateRange={{
+          start_date: commonFilters.start_date,
+          end_date: commonFilters.end_date
+        }}
         scope={commonFilters.scope}
       ></BreakdownTabs>
     </div>

src/pages/usage/tables/users-table.tsx

@@ -13,7 +13,8 @@ import useQueryBreakdownList from '../services/use-query-breakdown-list';
 const Users: React.FC<{
   users: FilterOptionType[];
   dateRange: { start_date: string; end_date: string };
-}> = ({ users, dateRange }) => {
+  scope: string;
+}> = ({ users, dateRange, scope }) => {
   const intl = useIntl();
 
   const { loading, dataSource, fetchData } = useQueryBreakdownList({
@@ -54,16 +55,18 @@ const Users: React.FC<{
   };
 
   useEffect(() => {
-    fetchData({
+    if (scope === 'all') {
-      ...queryParams,
+      fetchData({
-      group_by: 'user',
+        ...queryParams,
-      filters: {
+        group_by: 'user',
-        users: users || []
+        filters: {
-      },
+          users: users || []
-      scope: 'all',
+        },
-      ...dateRange
+        scope: scope,
-    });
+        ...dateRange
-  }, [dateRange, users, queryParams]);
+      });
+    }
+  }, [dateRange, users, queryParams, scope]);
 
   return (
     <>