fix: show tag only one selected

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
-          allowClear
-          showSearch
-          mode="multiple"
-          options={userOptions}
-          maxTagCount={0}
-          placeholder="User"
-          styles={{
-            wrapper: { flex: 1, maxWidth: 240, minWidth: 150 }
-          }}
-          value={selectedUsers}
-          onChange={onUsersChange}
-        />
+        {initialState?.currentUser?.is_admin && (
+          <SimpleSelect
+            allowClear
+            showSearch
+            mode="multiple"
+            options={userOptions}
+            placeholder="User"
+            styles={{
+              wrapper: { flex: 1, maxWidth: 240, minWidth: 150 }
+            }}
+            value={selectedUsers}
+            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({
-      ...queryParams,
-      group_by: 'user',
-      filters: {
-        users: users || []
-      },
-      scope: 'all',
-      ...dateRange
-    });
-  }, [dateRange, users, queryParams]);
+    if (scope === 'all') {
+      fetchData({
+        ...queryParams,
+        group_by: 'user',
+        filters: {
+          users: users || []
+        },
+        scope: scope,
+        ...dateRange
+      });
+    }
+  }, [dateRange, users, queryParams, scope]);
 
   return (
     <>