From 6405d93ee32df974725d969cfefad61301aa1f46 Mon Sep 17 00:00:00 2001
From: xudaotutou <13435638964@163.com>
Date: Fri, 1 Dec 2023 11:18:20 +0800
Subject: [PATCH] fix(object-storage): switch kc (#4355)

---
 .github/workflows/frontend.yml                |   2 +-
 frontend/Dockerfile                           |   6 +-
 frontend/pnpm-lock.yaml                       |   5 +-
 .../providers/objectstorage/next.config.js    |  29 +++++
 frontend/providers/objectstorage/package.json |   1 +
 .../public/locales/en/common.json             |   3 +-
 .../public/locales/zh/common.json             |   1 +
 .../objectstorage/src/api/monitor.ts          |   2 +-
 .../BucketContainer/BucketHeader.tsx          |   7 +-
 .../BucketContainer/FileManager.tsx           |  29 +++--
 .../components/BucketContainer/Monitor.tsx    |  45 ++++----
 .../components/BucketContainer/lineChart.tsx  |   1 +
 .../src/components/SideBar/index.tsx          |  57 ++++++++--
 .../common/modal/CreateFolderModal/index.tsx  |  10 ++
 .../common/modal/ParamterModal/index.tsx      |   2 +-
 .../common/modal/UploadModal/index.tsx        |  27 ++++-
 .../providers/objectstorage/src/consts.ts     |   8 +-
 .../src/hooks/useBillingData.tsx              |  29 +++++
 .../objectstorage/src/pages/_app.tsx          |  58 +++++-----
 .../objectstorage/src/pages/api/billing.ts    | 106 ++++++++++++++++++
 .../src/pages/api/bucket/create.ts            |  35 +++++-
 .../src/pages/api/bucket/delete.ts            |   4 +-
 .../src/pages/api/bucket/info.ts              |   4 +-
 .../src/pages/api/bucket/list.ts              |   4 +-
 .../objectstorage/src/pages/api/monitor.ts    |  10 +-
 .../objectstorage/src/pages/api/quota.ts      |   4 +-
 .../objectstorage/src/pages/api/user/init.ts  |   8 +-
 .../objectstorage/src/services/request.ts     |   4 +-
 .../objectstorage/src/store/ossStore.ts       |  10 ++
 .../objectstorage/src/types/billing.ts        |  56 +++++++++
 .../objectstorage/src/utils/json2Yaml.ts      |   8 +-
 .../objectstorage/src/utils/tools.ts          |   6 +-
 .../providers/objectstorage/src/utils/user.ts |   6 +-
 33 files changed, 450 insertions(+), 137 deletions(-)
 create mode 100644 frontend/providers/objectstorage/src/hooks/useBillingData.tsx
 create mode 100644 frontend/providers/objectstorage/src/pages/api/billing.ts
 create mode 100644 frontend/providers/objectstorage/src/types/billing.ts

diff --git a/.github/workflows/frontend.yml b/.github/workflows/frontend.yml
index eb73c8e49cb..4ccd482e7ec 100644
--- a/.github/workflows/frontend.yml
+++ b/.github/workflows/frontend.yml
@@ -64,7 +64,7 @@ jobs:
             providers/terminal,
             providers/dbprovider,
             providers/costcenter,
-            #            providers/objectstorage,
+            providers/objectstorage,
             desktop,
           ]
     steps:
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
index 4ecc443ef07..f1a118a0856 100644
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -31,6 +31,7 @@ RUN --mount=type=cache,id=pnpm,target=/pnpm/store \
 COPY ./tsconfig.json ./tsconfig.json
 COPY ./tsconfig.deps.json ./tsconfig.deps.json
 COPY ./tsconfig.base.json ./tsconfig.base.json
+COPY ./tsconfig.web.json ./tsconfig.web.json
 COPY ./packages ./packages
 
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store \
@@ -51,12 +52,11 @@ ENV NEXT_TELEMETRY_DISABLED 1
 
 # COPY --from=deps /app/packages ./packages
 
-COPY . .
-
-
 ARG name
 ARG path
 
+COPY ${path} ${path}
+
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm --offline --filter=$name install && pnpm --filter=$name run build
 
 # Production image, copy all the files and run next
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 1255bdd5e27..29fffb646b6 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -1245,6 +1245,9 @@ importers:
       i18next:
         specifier: ^22.5.1
         version: 22.5.1
+      immer:
+        specifier: ^10.0.3
+        version: 10.0.3
       js-yaml:
         specifier: ^4.1.0
         version: 4.1.0
@@ -1286,7 +1289,7 @@ importers:
         version: 5.2.2
       zustand:
         specifier: ^4.4.1
-        version: 4.4.7(@types/react@18.2.37)(immer@9.0.21)(react@18.2.0)
+        version: 4.4.7(@types/react@18.2.37)(immer@10.0.3)(react@18.2.0)
     devDependencies:
       '@types/jest':
         specifier: ^29.5.5
diff --git a/frontend/providers/objectstorage/next.config.js b/frontend/providers/objectstorage/next.config.js
index a90e8194fbc..754b666905f 100644
--- a/frontend/providers/objectstorage/next.config.js
+++ b/frontend/providers/objectstorage/next.config.js
@@ -16,6 +16,35 @@ module.exports = (phase, { defaultConfig }) => {
       experimental: {
         outputFileTracingRoot: path.join(__dirname, '../../')
       },
+      webpack(config, { isServer }) {
+        if (!isServer) {
+          config.resolve = {
+            ...config.resolve,
+            fallback: {
+              ...config.resolve.fallback,
+              fs: false
+            }
+          };
+        }
+        Object.assign(config.resolve.alias, {
+          'utf-8-validate': false,
+          bufferutil: false
+        });
+        config.module = {
+          ...config.module,
+          rules: config.module.rules.concat([
+            {
+              test: /\.svg$/i,
+              issuer: /\.[jt]sx?$/,
+              use: ['@svgr/webpack']
+            }
+          ]),
+          exprContextCritical: false,
+          unknownContextCritical: false
+        };
+
+        return config;
+      },
       async headers() {
         return [
           {
diff --git a/frontend/providers/objectstorage/package.json b/frontend/providers/objectstorage/package.json
index d84e7eb8172..919d0bc6db1 100644
--- a/frontend/providers/objectstorage/package.json
+++ b/frontend/providers/objectstorage/package.json
@@ -27,6 +27,7 @@
     "framer-motion": "^10.16.4",
     "fuse.js": "^7.0.0",
     "i18next": "^22.5.1",
+    "immer": "^10.0.3",
     "js-yaml": "^4.1.0",
     "jszip": "^3.10.1",
     "lodash": "^4.17.21",
diff --git a/frontend/providers/objectstorage/public/locales/en/common.json b/frontend/providers/objectstorage/public/locales/en/common.json
index 05b651a53f1..550d2e04236 100644
--- a/frontend/providers/objectstorage/public/locales/en/common.json
+++ b/frontend/providers/objectstorage/public/locales/en/common.json
@@ -14,5 +14,6 @@
   "totalSpace": "Total Space",
   "s3ServiceParams": "Access Key",
   "refresh": "Refresh",
+  "dailyEstimate": "Daily Estimate",
   "deleteWarning": "Delete Warning"
-}
\ No newline at end of file
+}
diff --git a/frontend/providers/objectstorage/public/locales/zh/common.json b/frontend/providers/objectstorage/public/locales/zh/common.json
index 9b87b184746..4adf3f958b2 100644
--- a/frontend/providers/objectstorage/public/locales/zh/common.json
+++ b/frontend/providers/objectstorage/public/locales/zh/common.json
@@ -12,6 +12,7 @@
   "totalSpace": "总空间用量",
   "s3ServiceParams": "访问密钥",
   "refresh": "刷新",
+  "dailyEstimate": "每日估价",
   "config": "基础配置",
   "deleteWarning": "删除警告"
 }
\ No newline at end of file
diff --git a/frontend/providers/objectstorage/src/api/monitor.ts b/frontend/providers/objectstorage/src/api/monitor.ts
index 261502bf39d..3878f094401 100644
--- a/frontend/providers/objectstorage/src/api/monitor.ts
+++ b/frontend/providers/objectstorage/src/api/monitor.ts
@@ -6,5 +6,5 @@ import { AxiosInstance } from 'axios';
  * @ bucket : bucketName(ns-bucketCRName)
  */
 export const _monitor = (request: AxiosInstance) => (data: { bucket: string }) =>
-  request.post<any, MonitorData['result'][]>('/api/monitor', data);
+  request.post<any, (MonitorData['result'] & { name: string })[]>('/api/monitor', data);
 export const monitor = _monitor(request);
diff --git a/frontend/providers/objectstorage/src/components/BucketContainer/BucketHeader.tsx b/frontend/providers/objectstorage/src/components/BucketContainer/BucketHeader.tsx
index f9fff3f8210..31004f9e906 100644
--- a/frontend/providers/objectstorage/src/components/BucketContainer/BucketHeader.tsx
+++ b/frontend/providers/objectstorage/src/components/BucketContainer/BucketHeader.tsx
@@ -1,10 +1,6 @@
-import { Authority, QueryKey, TBucket, bucketConfigQueryParam } from '@/consts';
+import { bucketConfigQueryParam } from '@/consts';
 import { Text, HStack, StackProps, ButtonGroup, Button } from '@chakra-ui/react';
-import AuthorityTips from '@/components/common/AuthorityTip';
-import DeleteIcon from '@/components/Icons/DeleteIcon';
 import { useOssStore } from '@/store/ossStore';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { deleteBucket } from '@/api/bucket';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
 import EditIcon from '../Icons/EditIcon';
@@ -21,7 +17,6 @@ export default function BucketHeader({ ...styles }: StackProps) {
         <Text fontSize={'24px'} fontWeight={'500'}>
           {bucket.name}
         </Text>
-        <AuthorityTips authority={Authority.private} />
       </HStack>
       <ButtonGroup variant={'secondary'} spacing={'16px'}>
         <Button
diff --git a/frontend/providers/objectstorage/src/components/BucketContainer/FileManager.tsx b/frontend/providers/objectstorage/src/components/BucketContainer/FileManager.tsx
index 23eb863ec42..0e220ded981 100644
--- a/frontend/providers/objectstorage/src/components/BucketContainer/FileManager.tsx
+++ b/frontend/providers/objectstorage/src/components/BucketContainer/FileManager.tsx
@@ -52,6 +52,7 @@ import { format } from 'date-fns';
 import DeleteFileModal from '../common/modal/DeleteFileModal';
 import DeleteSingleFileModal from '../common/modal/DeleteSingleFileModal';
 import StorageIcon from '../Icons/StorageIcon';
+import useSessionStore from '@/store/session';
 
 type EntryType = {
   LastModified?: Date;
@@ -67,6 +68,7 @@ export default function FileManager({ ...styles }: FlexProps) {
   const { t: toolsT } = useTranslation('tools');
   const bucket = useOssStore((s) => s.currentBucket);
   const s3client = useOssStore((s) => s.client);
+  const session = useSessionStore((s) => s.session);
   const Bucket = bucket?.name || '';
   const prefix = useOssStore((s) => s.prefix);
   const Prefix = prefix.length === 0 ? '' : [...prefix, ''].join('/');
@@ -81,9 +83,13 @@ export default function FileManager({ ...styles }: FlexProps) {
     setpageStack([]);
     setContinuationToken(undefined);
   };
+
   const { copyData } = useCopyData();
   const objectsQuery = useQuery({
-    queryKey: [QueryKey.minioFileList, { Bucket, Prefix, MaxKeys, ContinuationToken }],
+    queryKey: [
+      QueryKey.minioFileList,
+      { Bucket, Prefix, MaxKeys, ContinuationToken, s3client, session }
+    ],
     queryFn: () =>
       listObjects(s3client!)({ Bucket, Prefix, Delimiter: '/', ContinuationToken, MaxKeys }),
     select(data) {
@@ -91,9 +97,11 @@ export default function FileManager({ ...styles }: FlexProps) {
     },
     enabled: !!s3client && !!Bucket
   });
-
   useEffect(() => {
-    if (objectsQuery.data?.IsTruncated) {
+    if (objectsQuery.isError) {
+      // @ts-ignore
+      toast({ title: objectsQuery.failureReason?.message, status: 'error' });
+    } else if (objectsQuery.data?.IsTruncated) {
       const data = objectsQuery.data;
       const token = data.NextContinuationToken;
       if (!!token && !pageStack.includes(token)) {
@@ -101,7 +109,7 @@ export default function FileManager({ ...styles }: FlexProps) {
         setpageStack((pageStack) => [...pageStack, token]);
       }
     }
-  }, [objectsQuery.data]);
+  }, [objectsQuery.data, objectsQuery.isError]);
   // clear delete items
   useEffect(() => {
     deleteCheckBoxGroupState.setValue([]);
@@ -265,6 +273,7 @@ export default function FileManager({ ...styles }: FlexProps) {
           gap={['0', null, null, null, '16px']}
           ml="auto"
           mr="12px"
+          isDisabled={objectsQuery.isError}
           color="grayModern.500"
         >
           <UploadModal />
@@ -465,18 +474,6 @@ export default function FileManager({ ...styles }: FlexProps) {
         </TableContainer>
       )}
       <HStack justifyContent={'flex-end'} minH={'max-content'} mt="auto" mb="0">
-        {
-          // <HStack>
-          //   <HStack gap="8px">
-          //     <Circle size={'8px'} bg={'blue.600'} />
-          //     <Text> 对象数 : 132</Text>
-          //   </HStack>
-          //   <HStack gap="8px">
-          //     <Circle size={'8px'} bg="adora.600" />
-          //     <Text> 已使用 13KB</Text>
-          //   </HStack>
-          // </HStack>
-        }
         <ButtonGroup variant={'white-bg-icon'}>
           <Button
             isDisabled={
diff --git a/frontend/providers/objectstorage/src/components/BucketContainer/Monitor.tsx b/frontend/providers/objectstorage/src/components/BucketContainer/Monitor.tsx
index 382c9d7e793..e944cc397d0 100644
--- a/frontend/providers/objectstorage/src/components/BucketContainer/Monitor.tsx
+++ b/frontend/providers/objectstorage/src/components/BucketContainer/Monitor.tsx
@@ -62,29 +62,28 @@ export default function DataMonitor({ ...styles }: BoxProps) {
     if (monitorQuery.isSuccess && monitorQuery.data) {
       const _data = monitorQuery.data;
       for (let i = 0; i < 4; i++) {
-        const curdata = _data?.[i]?.reduce<[number, string][]>(
-          (pre, cur) => [
-            ...pre,
-            ...cur.values
-              .map<[number, string]>(([time, v]) => [time * 1000, v])
-              // clean data
-              .filter(([time, v], idx, arr) => {
-                if (
-                  !['minio_bucket_usage_object_total', 'minio_bucket_usage_total_bytes'].includes(
-                    cur.metric.__name__
-                  )
-                ) {
-                  if (idx > 0 && BigInt(arr[idx - 1][1]) > BigInt(v)) {
-                    console.log(time, v);
-                    return false;
-                  } else return true;
-                } else {
-                  return true;
-                }
-              })
-          ],
-          []
-        );
+        // sort slice
+        _data[i].sort((a, b) => a.values[0][0] - b.values[0][0]);
+        const curdata = _data?.[i]?.reduce<[number, string][]>((pre, cur) => {
+          let maxVal = BigInt(0);
+          const column = cur.values
+            .map<[number, string]>(([time, v]) => [time * 1000, v])
+            // clean data
+            .filter(([_time, v]) => {
+              if (
+                !['minio_bucket_usage_object_total', 'minio_bucket_usage_total_bytes'].includes(
+                  cur.metric.__name__
+                ) &&
+                maxVal > BigInt(v)
+              ) {
+                return false;
+              }
+              maxVal = BigInt(v);
+              return true;
+            });
+
+          return [...pre, ...column];
+        }, []);
         data[i].push(...curdata);
       }
     }
diff --git a/frontend/providers/objectstorage/src/components/BucketContainer/lineChart.tsx b/frontend/providers/objectstorage/src/components/BucketContainer/lineChart.tsx
index 9c95bf5c9c3..db6f56f4810 100644
--- a/frontend/providers/objectstorage/src/components/BucketContainer/lineChart.tsx
+++ b/frontend/providers/objectstorage/src/components/BucketContainer/lineChart.tsx
@@ -86,6 +86,7 @@ export default function TrendChart({
           width: 0.5
         }
       },
+      minInterval: 1,
       nameTextStyle: {
         padding: [10, 10, 10, 10]
       }
diff --git a/frontend/providers/objectstorage/src/components/SideBar/index.tsx b/frontend/providers/objectstorage/src/components/SideBar/index.tsx
index c2048cb66fd..78daced5ed9 100644
--- a/frontend/providers/objectstorage/src/components/SideBar/index.tsx
+++ b/frontend/providers/objectstorage/src/components/SideBar/index.tsx
@@ -16,7 +16,7 @@ import {
 import RefreshIcon from '@/components/Icons/RefreshIcon';
 import BucketIcon from '@/components/Icons/BucketIcon';
 import MoreIcon from '@/components/Icons/MoreIcon';
-import { ReactNode, useEffect } from 'react';
+import { ReactNode, useEffect, useMemo } from 'react';
 import ParamterModal from '@/components/common/modal/ParamterModal';
 import CreateBucketModal from '@/components/common/modal/CreateBucketModal';
 import EditIcon from '../Icons/EditIcon';
@@ -27,9 +27,15 @@ import { getQuota, listBucket } from '@/api/bucket';
 import { useRouter } from 'next/router';
 import { useOssStore } from '@/store/ossStore';
 import { useToast } from '@/hooks/useToast';
-import { formatBytes } from '@/utils/tools';
+import { displayMoney, formatBytes, formatMoney } from '@/utils/tools';
 import { useTranslation } from 'next-i18next';
 import DeleteBucketModal from '../common/modal/DeleteBucketModal';
+import useBillingData from '@/hooks/useBillingData';
+import { endOfDay, formatISO, startOfDay, startOfHour } from 'date-fns';
+import { BillingData, BillingSpec, BillingType } from '@/types/billing';
+import request from '@/services/request';
+import { ApiResp } from '@/services/kubernet';
+import useSessionStore from '@/store/session';
 
 function MoreMenu({ bucket }: { bucket: TBucket }) {
   const router = useRouter();
@@ -145,26 +151,52 @@ function QuotaProgress({
   );
 }
 function BucketOverview({ ...styles }: StackProps) {
+  const session = useSessionStore((s) => s.session);
   const quotaQuery = useQuery({
-    queryKey: [QueryKey.bucketInfo],
+    queryKey: [QueryKey.bucketInfo, session],
     queryFn: getQuota
   });
   const { t } = useTranslation('common');
   const limit = quotaQuery.data?.quota.total || 0;
   const used = quotaQuery.data?.quota.used || 0;
   const count = quotaQuery.data?.quota.count || 0;
+  // const end = startOfHour(new Date());
+  // const leastCost = useQuery({
+  //   queryKey: ['billing', { end }],
+  //   queryFn: () => {
+  //     const spec: BillingSpec = {
+  //       appType: 'OBJECT-STORAGE',
+  //       startTime: formatISO(startOfDay(end), { representation: 'complete' }),
+  //       endTime: formatISO(endOfDay(end), { representation: 'complete' }),
+  //       page: 1,
+  //       pageSize: 1,
+  //       type: BillingType.CONSUME,
+  //       orderID: ''
+  //     };
+  //     return request<any, BillingData, { spec: BillingSpec }>('/api/billing', {
+  //       method: 'POST',
+  //       data: {
+  //         spec
+  //       }
+  //     });
+  //   },
+  //   select(data) {
+  //     console.log(data?.status.item);
+  //     return data?.status.item?.[0].amount || 0;
+  //   }
+  // });
   return (
     <Stack fontSize={'12px'} {...styles}>
       {
         // <Flex justifyContent={'space-between'}>
-        //   <Text>price:</Text>
-        //   <Text w="160px">123</Text>
+        //   <Text>{t('dailyEstimate')}:</Text>
+        //   <Text w="160px">{displayMoney(formatMoney((leastCost.data ?? 0) * 24))}</Text>
         // </Flex>
-        <Flex justifyContent={'space-between'}>
-          <Text>{t('totalObjects')}：</Text>
-          <Text w="160px">{count}</Text>
-        </Flex>
       }
+      <Flex justifyContent={'space-between'}>
+        <Text>{t('totalObjects')}：</Text>
+        <Text w="160px">{count}</Text>
+      </Flex>
       {!quotaQuery.isLoading && (
         <QuotaProgress
           name={'storage'}
@@ -194,12 +226,13 @@ function BucketOverview({ ...styles }: StackProps) {
 }
 
 export default function SideBar() {
-  const ossStore = useOssStore();
+  const s3client = useOssStore((s) => s.client);
+  const session = useSessionStore((s) => s.session);
   const { t } = useTranslation('bucket');
   const listBucketQuery = useQuery({
-    queryKey: [QueryKey.bucketList],
+    queryKey: [QueryKey.bucketList, session],
     queryFn: listBucket,
-    enabled: !!ossStore.client
+    enabled: !!s3client
   });
   const bucketList = listBucketQuery.data?.list || [];
   const currentBucket = useOssStore((s) => s.currentBucket);
diff --git a/frontend/providers/objectstorage/src/components/common/modal/CreateFolderModal/index.tsx b/frontend/providers/objectstorage/src/components/common/modal/CreateFolderModal/index.tsx
index 72968d50c5a..3aff6c7561c 100644
--- a/frontend/providers/objectstorage/src/components/common/modal/CreateFolderModal/index.tsx
+++ b/frontend/providers/objectstorage/src/components/common/modal/CreateFolderModal/index.tsx
@@ -18,17 +18,27 @@ import { putObject } from '@/api/s3';
 import { useOssStore } from '@/store/ossStore';
 import { FolderPlaceholder, QueryKey } from '@/consts';
 import { useTranslation } from 'next-i18next';
+import { useToast } from '@/hooks/useToast';
 export default function CreateFolderModal({ ...styles }: Omit<IconButtonProps, 'aria-label'>) {
   const { onOpen, onClose, isOpen } = useDisclosure();
   const [folderName, setFolderName] = useState('');
   const queryClient = useQueryClient();
   const oss = useOssStore();
   const { t } = useTranslation('file');
+  const { toast } = useToast();
   const mutation = useMutation({
     mutationFn: putObject(oss.client!),
     onSuccess() {
       queryClient.invalidateQueries([QueryKey.minioFileList]);
       onClose();
+    },
+    onError(error) {
+      toast({
+        //@ts-ignore
+        title: error.message,
+        status: 'error'
+      });
+      onClose();
     }
   });
   return (
diff --git a/frontend/providers/objectstorage/src/components/common/modal/ParamterModal/index.tsx b/frontend/providers/objectstorage/src/components/common/modal/ParamterModal/index.tsx
index fd2b7f7c565..ac92ac66aa8 100644
--- a/frontend/providers/objectstorage/src/components/common/modal/ParamterModal/index.tsx
+++ b/frontend/providers/objectstorage/src/components/common/modal/ParamterModal/index.tsx
@@ -44,7 +44,7 @@ export default function ParamterModal({ ...styles }: ButtonProps) {
         >
           <ModalCloseButton right={'24px'} top="24px" p="0" />
           <ModalHeader p="0">{t('s3ServiceParams')}</ModalHeader>
-          <ModalBody h="100%" w="100%" p="40px">
+          <ModalBody h="100%" w="100%" p="20px">
             {miniouser.isSuccess ? (
               <SimpleGrid columns={2} spacingY={'15px'} gridTemplateColumns={'auto max-content'}>
                 <Box>Access Key</Box>
diff --git a/frontend/providers/objectstorage/src/components/common/modal/UploadModal/index.tsx b/frontend/providers/objectstorage/src/components/common/modal/UploadModal/index.tsx
index 092567e47e5..e7db1ba54e9 100644
--- a/frontend/providers/objectstorage/src/components/common/modal/UploadModal/index.tsx
+++ b/frontend/providers/objectstorage/src/components/common/modal/UploadModal/index.tsx
@@ -26,6 +26,7 @@ import { useOssStore } from '@/store/ossStore';
 import { useDropzone } from 'react-dropzone';
 import { FolderPlaceholder, QueryKey } from '@/consts';
 import { useTranslation } from 'next-i18next';
+import { useToast } from '@/hooks/useToast';
 export default function UploadModal({ ...styles }: Omit<IconButtonProps, 'aria-label'> & {}) {
   const { onOpen, onClose, isOpen } = useDisclosure();
   const { t, i18n } = useTranslation('file');
@@ -63,12 +64,9 @@ export default function UploadModal({ ...styles }: Omit<IconButtonProps, 'aria-l
   const prefix = useOssStore((s) => s.prefix);
   const [isLoading, setIsLoading] = useState(false);
   const mutation = useMutation({
-    mutationFn: putObject(s3client!),
-    onSuccess() {
-      setIsLoading(false);
-      queryClient.invalidateQueries([QueryKey.minioFileList]);
-    }
+    mutationFn: putObject(s3client!)
   });
+  const { toast } = useToast();
   const { getRootProps, getInputProps, isDragAccept, inputRef } = useDropzone({
     noClick: true,
     noKeyboard: true,
@@ -91,9 +89,26 @@ export default function UploadModal({ ...styles }: Omit<IconButtonProps, 'aria-l
             Body: file
           });
         })
-      ).finally(() => {
+      ).then((results) => {
+        if (
+          results.some((res) => {
+            return res.status === 'rejected';
+          })
+        ) {
+          toast({
+            status: 'error',
+            title: 'upload error'
+          });
+        } else {
+          toast({
+            status: 'success',
+            title: 'upload success'
+          });
+        }
         // @ts-ignore
         inputRef.current && (inputRef.current.value = null);
+        setIsLoading(false);
+        queryClient.invalidateQueries([QueryKey.minioFileList]);
         onClose();
       });
     },
diff --git a/frontend/providers/objectstorage/src/consts.ts b/frontend/providers/objectstorage/src/consts.ts
index 9d29335502e..3c1c1fd850e 100644
--- a/frontend/providers/objectstorage/src/consts.ts
+++ b/frontend/providers/objectstorage/src/consts.ts
@@ -49,7 +49,7 @@ type MinioGroup<
 > = {
   input: Omit<
     {
-      apiVersion: 'minio.sealos.io/v1';
+      apiVersion: 'objectstorage.sealos.io/v1';
       kind: Kind;
       metadata: TMetadata;
       spec: Tspec;
@@ -58,7 +58,7 @@ type MinioGroup<
   >;
   output: Omit<
     {
-      apiVersion: 'minio.sealos.io/v1';
+      apiVersion: 'objectstorage.sealos.io/v1';
       kind: Kind;
       metadata: {
         annotations?: unknown;
@@ -75,7 +75,7 @@ type MinioGroup<
   >;
 };
 export type BucketCR = MinioGroup<
-  'Bucket',
+  'ObjectStorageBucket',
   {
     name: string;
     namespace: string;
@@ -89,7 +89,7 @@ export type BucketCR = MinioGroup<
   | undefined
 >;
 export type UserCR = MinioGroup<
-  'MinioUser',
+  'ObjectStorageUser',
   {
     name: string;
     namespace: string;
diff --git a/frontend/providers/objectstorage/src/hooks/useBillingData.tsx b/frontend/providers/objectstorage/src/hooks/useBillingData.tsx
new file mode 100644
index 00000000000..dbe53b97051
--- /dev/null
+++ b/frontend/providers/objectstorage/src/hooks/useBillingData.tsx
@@ -0,0 +1,29 @@
+import { ApiResp } from '@/services/backend/response';
+import request from '@/services/request';
+import { BillingSpec, BillingData, BillingType } from '@/types/billing';
+import { useQuery } from '@tanstack/react-query';
+import { endOfDay, formatISO, startOfDay } from 'date-fns';
+
+export default function useBillingData() {
+  const end = startOfDay(new Date());
+  return useQuery({
+    queryKey: ['billing', { end }],
+    queryFn: () => {
+      const spec: BillingSpec = {
+        appType: 'OBJECT-STORAGE',
+        startTime: formatISO(startOfDay(end), { representation: 'complete' }),
+        endTime: formatISO(endOfDay(end), { representation: 'complete' }),
+        page: 1,
+        pageSize: 1,
+        type: BillingType.CONSUME,
+        orderID: ''
+      };
+      return request<any, ApiResp<BillingData>, { spec: BillingSpec }>('/api/billing', {
+        method: 'POST',
+        data: {
+          spec
+        }
+      });
+    }
+  });
+}
diff --git a/frontend/providers/objectstorage/src/pages/_app.tsx b/frontend/providers/objectstorage/src/pages/_app.tsx
index e5f8162db1a..2fe2c3cb22e 100644
--- a/frontend/providers/objectstorage/src/pages/_app.tsx
+++ b/frontend/providers/objectstorage/src/pages/_app.tsx
@@ -5,7 +5,7 @@ import useSessionStore from '@/store/session';
 import { theme } from '@/styles/chakraTheme';
 // import '@/styles/globals.css';
 import { ChakraProvider } from '@chakra-ui/react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query';
 import { appWithTranslation, i18n, useTranslation } from 'next-i18next';
 import type { AppProps } from 'next/app';
 import { useRouter } from 'next/router';
@@ -19,43 +19,21 @@ function App({ Component, pageProps }: AppProps) {
         queries: {
           // With SSR, we usually want to set some default staleTime
           // above 0 to avoid refetching immediately on the client
-          // staleTime: 60 * 1000,
+          staleTime: 60 * 1000
         }
       }
     })
   );
   const initMinioClient = useOssStore((s) => s.initClient);
   const client = useOssStore((s) => s.client);
-  const setSession = useSessionStore((s) => s.setSession);
-  // const {i18n} = useTranslation()
+  // const setSession = useSessionStore((s) => s.setSession);
+  const { session: oldSession, setSession } = useSessionStore();
+  const clearClient = useOssStore((s) => s.clearClient);
+  const router = useRouter();
   useEffect(() => {
     createSealosApp();
   }, []);
-  useEffect(() => {
-    if (!client) {
-      queryClient.fetchQuery({ queryFn: initUser, queryKey: [QueryKey.bucketUser] }).then(
-        (userInit) => {
-          const accessKeyId = userInit?.secret?.CONSOLE_ACCESS_KEY;
-          const secretAccessKey = userInit?.secret?.CONSOLE_SECRET_KEY;
-          const external = userInit?.secret?.external;
-          if (!accessKeyId || !secretAccessKey || !external) return;
-          initMinioClient({
-            credentials: {
-              accessKeyId,
-              secretAccessKey
-            },
-            endpoint: 'https://' + external,
-            forcePathStyle: true,
-            region: 'us-east-1'
-          });
-        },
-        (error) => {
-          console.error(error);
-        }
-      );
-    }
-  }, [client]);
-  const router = useRouter();
+
   useEffect(() => {
     const changeI18n = async (data: any) => {
       const locale = data.currentLanguage;
@@ -79,12 +57,28 @@ function App({ Component, pageProps }: AppProps) {
   useEffect(() => {
     const initApp = async () => {
       try {
-        const result = await sealosApp.getSession();
-        setSession(result);
+        const session = await sealosApp.getSession();
+        if (oldSession?.kubeconfig === session.kubeconfig && client) return;
+        setSession(session);
+        const userInit = await queryClient.fetchQuery([QueryKey.bucketUser, { session }], initUser);
+        const accessKeyId = userInit?.secret?.CONSOLE_ACCESS_KEY;
+        const secretAccessKey = userInit?.secret?.CONSOLE_SECRET_KEY;
+        const external = userInit?.secret?.external;
+        if (!accessKeyId || !secretAccessKey || !external) return;
+        initMinioClient({
+          credentials: {
+            accessKeyId,
+            secretAccessKey
+          },
+          endpoint: 'https://' + external,
+          forcePathStyle: true,
+          region: 'us-east-1'
+        });
+        queryClient.invalidateQueries();
       } catch (error) {}
     };
     initApp();
-  }, [setSession]);
+  }, [queryClient, client]);
   return (
     <QueryClientProvider client={queryClient}>
       <ChakraProvider theme={theme}>
diff --git a/frontend/providers/objectstorage/src/pages/api/billing.ts b/frontend/providers/objectstorage/src/pages/api/billing.ts
new file mode 100644
index 00000000000..04186232781
--- /dev/null
+++ b/frontend/providers/objectstorage/src/pages/api/billing.ts
@@ -0,0 +1,106 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import crypto from 'crypto';
+import type { BillingData, BillingItem, BillingSpec, Costs, RawCosts } from '@/types/billing';
+import { initK8s } from 'sealos-desktop-sdk/service';
+import { jsonRes } from '@/services/backend/response';
+import { getUserNamespace } from '@/utils/user';
+const convertGpu = (_deduction?: RawCosts) =>
+  _deduction
+    ? Object.entries(_deduction).reduce<Costs>(
+        (pre, cur) => {
+          if (cur[0] === 'cpu') pre.cpu = cur[1];
+          else if (cur[0] === 'memory') pre.memory = cur[1];
+          else if (cur[0] === 'storage') pre.storage = cur[1];
+          else if (cur[0] === 'network') pre.network = cur[1];
+          else if (cur[0].startsWith('gpu-')) {
+            typeof pre.gpu === 'number' && (pre.gpu += cur[1]);
+          }
+          return pre;
+        },
+        {
+          cpu: 0,
+          memory: 0,
+          storage: 0,
+          gpu: 0,
+          network: 0
+        }
+      )
+    : {
+        cpu: 0,
+        memory: 0,
+        storage: 0,
+        network: 0,
+        gpu: 0
+      };
+export default async function handler(req: NextApiRequest, resp: NextApiResponse) {
+  try {
+    const client = await initK8s({ req });
+    // get user account payment amount
+    const user = client.kube_user.name;
+    if (!user) {
+      return jsonRes(resp, { code: 403, message: 'user null' });
+    }
+    const namespace = client.namespace;
+    const body = req.body;
+    let spec: BillingSpec = { ...body.spec, namespace };
+    if (!spec) {
+      return jsonRes(resp, { code: 400, error: '参数错误' });
+    }
+    // 用react query 管理缓存
+    let origin = JSON.stringify(spec) + new Date().getTime();
+    const hash = crypto.createHash('sha256').update(origin);
+    const name = hash.digest('hex');
+    const crdSchema = {
+      apiVersion: `account.sealos.io/v1`,
+      kind: 'BillingRecordQuery',
+      metadata: {
+        name,
+        namespace: 'ns-' + client.kube_user.name
+      },
+      spec
+    };
+    const group = 'account.sealos.io';
+    const version = 'v1';
+    const plural = 'billingrecordqueries';
+    try {
+      await client.k8sCustomObjects.createNamespacedCustomObject(
+        group,
+        version,
+        crdSchema.metadata.namespace,
+        plural,
+        crdSchema
+      );
+      await new Promise<void>((resolve) => setTimeout(() => resolve(), 1000));
+    } finally {
+      const cr = (await client.k8sCustomObjects.getNamespacedCustomObjectStatus(
+        group,
+        version,
+        crdSchema.metadata.namespace,
+        plural,
+        name
+      )) as { body: BillingData<RawCosts> };
+      const body = cr?.body;
+      if (!body || !body.status) throw new Error('get billing error');
+      const item =
+        body.status?.item?.map<BillingItem>((v) => ({
+          ...v,
+          costs: convertGpu(v?.costs)
+        })) || [];
+      const deductionAmount = convertGpu(cr?.body?.status?.deductionAmount);
+      return jsonRes<BillingData>(resp, {
+        code: 200,
+        data: {
+          ...body,
+          status: {
+            ...body.status,
+            deductionAmount,
+            item
+          }
+        }
+      });
+    }
+  } catch (error) {
+    console.log(error);
+    jsonRes(resp, { code: 500, message: 'get billing error' });
+  }
+}
diff --git a/frontend/providers/objectstorage/src/pages/api/bucket/create.ts b/frontend/providers/objectstorage/src/pages/api/bucket/create.ts
index 2d00c58e70b..fa438ec1454 100644
--- a/frontend/providers/objectstorage/src/pages/api/bucket/create.ts
+++ b/frontend/providers/objectstorage/src/pages/api/bucket/create.ts
@@ -19,9 +19,9 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
         code: 400,
         message: '"bucketPolicy" is invaild'
       });
-    const group = 'minio.sealos.io';
+    const group = 'objectstorage.sealos.io';
     const version = 'v1';
-    const plural = 'buckets';
+    const plural = 'objectstoragebuckets';
     const name = bucketName;
     const policy = bucketPolicy;
     const getBucket = () =>
@@ -32,6 +32,17 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
         plural,
         name
       );
+    const listBucket = () =>
+      client.k8sCustomObjects.listNamespacedCustomObject(
+        group,
+        version,
+        client.namespace,
+        plural,
+        undefined,
+        undefined,
+        undefined,
+        `metadata.name=${name}`
+      );
     const createBucket = () =>
       client.k8sCustomObjects.createNamespacedCustomObject(
         group,
@@ -44,7 +55,6 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
       getBucket().then(
         (data) => {
           // 修改Bucket
-          console.log(data);
           client.k8sCustomObjects
             .patchNamespacedCustomObject(
               group,
@@ -75,8 +85,23 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
           //没有，要创建
           if (body.code === 404)
             createBucket()
-              .then((data) => {
-                resolve(data);
+              .then(() => {
+                let retries = 3;
+                const makeSureFn = () => {
+                  listBucket().then(
+                    (data) => {
+                      resolve(data);
+                    },
+                    (err) => {
+                      if (retries-- > 0) {
+                        new Promise((_resolve) => setTimeout(_resolve, 1000)).finally(makeSureFn);
+                      } else {
+                        reject(err.body);
+                      }
+                    }
+                  );
+                };
+                makeSureFn();
               })
               .catch((err) => {
                 const _body = err.body as V1Status;
diff --git a/frontend/providers/objectstorage/src/pages/api/bucket/delete.ts b/frontend/providers/objectstorage/src/pages/api/bucket/delete.ts
index 99796e5fe52..a8875c0bedb 100644
--- a/frontend/providers/objectstorage/src/pages/api/bucket/delete.ts
+++ b/frontend/providers/objectstorage/src/pages/api/bucket/delete.ts
@@ -9,10 +9,10 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
     if (!bucketName) return jsonRes(res, { code: 400, data: { error: 'bucketName is invaild' } });
     await client.k8sCustomObjects
       .deleteNamespacedCustomObject(
-        'minio.sealos.io',
+        'objectstorage.sealos.io',
         'v1',
         client.namespace,
-        'buckets',
+        'objectstoragebuckets',
         bucketName.replace(client.namespace.replace('ns-', '') + '-', '')
       )
       .then(
diff --git a/frontend/providers/objectstorage/src/pages/api/bucket/info.ts b/frontend/providers/objectstorage/src/pages/api/bucket/info.ts
index 365d20d3603..254e99e8c29 100644
--- a/frontend/providers/objectstorage/src/pages/api/bucket/info.ts
+++ b/frontend/providers/objectstorage/src/pages/api/bucket/info.ts
@@ -7,10 +7,10 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
     const { bucketName } = req.body as { bucketName?: string };
     if (!bucketName) return jsonRes(res, { code: 400, data: { error: 'bucketName is invaild' } });
     const infoRes = await client.k8sCustomObjects.getNamespacedCustomObject(
-      'minio.sealos.io',
+      'objectstorage.sealos.io',
       'v1',
       client.namespace,
-      'buckets',
+      'objectstoragebuckets',
       bucketName
     );
     jsonRes(res, { data: infoRes });
diff --git a/frontend/providers/objectstorage/src/pages/api/bucket/list.ts b/frontend/providers/objectstorage/src/pages/api/bucket/list.ts
index e01065a6890..74989d955ba 100644
--- a/frontend/providers/objectstorage/src/pages/api/bucket/list.ts
+++ b/frontend/providers/objectstorage/src/pages/api/bucket/list.ts
@@ -6,10 +6,10 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
   try {
     const client = await initK8s({ req });
     const k8sRes = await client.k8sCustomObjects.listNamespacedCustomObject(
-      'minio.sealos.io',
+      'objectstorage.sealos.io',
       'v1',
       client.namespace,
-      'buckets'
+      'objectstoragebuckets'
     );
     if (k8sRes.response.statusCode !== 200) throw k8sRes.response.errored;
     const list = (
diff --git a/frontend/providers/objectstorage/src/pages/api/monitor.ts b/frontend/providers/objectstorage/src/pages/api/monitor.ts
index 1ee83766e64..a28b699729a 100644
--- a/frontend/providers/objectstorage/src/pages/api/monitor.ts
+++ b/frontend/providers/objectstorage/src/pages/api/monitor.ts
@@ -38,9 +38,15 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
         })
       );
     }
-    Promise.all(result).then((resArr) => {
+    await Promise.all(result).then((resArr) => {
       if (resArr.every((response) => response.data.status === 'success')) {
-        return jsonRes(res, { data: resArr.map((v) => v.data.data.result) });
+        return jsonRes(res, {
+          data: resArr.map((v, i) => {
+            const result = v.data.data.result;
+            result.name = queries[i];
+            return result;
+          })
+        });
       } else {
         return jsonRes(res, { data: resArr.map((v) => v.data) });
       }
diff --git a/frontend/providers/objectstorage/src/pages/api/quota.ts b/frontend/providers/objectstorage/src/pages/api/quota.ts
index 2f9fd0a6817..2f9793f07cb 100644
--- a/frontend/providers/objectstorage/src/pages/api/quota.ts
+++ b/frontend/providers/objectstorage/src/pages/api/quota.ts
@@ -5,9 +5,9 @@ import { initK8s } from 'sealos-desktop-sdk/service';
 export default async function handler(req: NextApiRequest, res: NextApiResponse<ApiResp>) {
   try {
     const client = await initK8s({ req });
-    const group = 'minio.sealos.io';
+    const group = 'objectstorage.sealos.io';
     const version = 'v1';
-    const plural = 'miniousers';
+    const plural = 'objectstorageusers';
     const name = client.namespace.replace('ns-', '');
     const getData = async () => {
       const userRes = await client.k8sCustomObjects.getNamespacedCustomObject(
diff --git a/frontend/providers/objectstorage/src/pages/api/user/init.ts b/frontend/providers/objectstorage/src/pages/api/user/init.ts
index 36eca1356f0..2c4455fdb50 100644
--- a/frontend/providers/objectstorage/src/pages/api/user/init.ts
+++ b/frontend/providers/objectstorage/src/pages/api/user/init.ts
@@ -7,9 +7,9 @@ import { initK8s } from 'sealos-desktop-sdk/service';
 export default async function handler(req: NextApiRequest, res: NextApiResponse<ApiResp>) {
   try {
     const client = await initK8s({ req });
-    const group = 'minio.sealos.io';
+    const group = 'objectstorage.sealos.io';
     const version = 'v1';
-    const plural = 'miniousers';
+    const plural = 'objectstorageusers';
     const name = client.namespace.replace('ns-', '');
     const getUser = async () => {
       const userRes = await client.k8sCustomObjects.getNamespacedCustomObjectStatus(
@@ -88,7 +88,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
           }
         );
       });
-    promise().then(
+    await promise().then(
       (secret) => {
         return jsonRes<{ secret: UserSecretData }>(res, {
           data: {
@@ -107,7 +107,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
     );
   } catch (err: any) {
     console.log(err);
-    jsonRes(res, {
+    return jsonRes(res, {
       code: 500,
       message: 'get secret error'
     });
diff --git a/frontend/providers/objectstorage/src/services/request.ts b/frontend/providers/objectstorage/src/services/request.ts
index ac2267b851c..78ace5a6310 100644
--- a/frontend/providers/objectstorage/src/services/request.ts
+++ b/frontend/providers/objectstorage/src/services/request.ts
@@ -22,9 +22,9 @@ request.interceptors.request.use(
       config.url = '' + config.url;
     }
     let _headers: AxiosHeaders = config.headers;
-
+    const kc = getUserKubeConfig();
     //获取token，并将其添加至请求头中
-    _headers['Authorization'] = encodeURIComponent(getUserKubeConfig());
+    _headers['Authorization'] = encodeURIComponent(kc);
     if (!config.headers || config.headers['Content-Type'] === '') {
       _headers['Content-Type'] = 'application/json';
     }
diff --git a/frontend/providers/objectstorage/src/store/ossStore.ts b/frontend/providers/objectstorage/src/store/ossStore.ts
index b8dc84bd002..67a81bd91df 100644
--- a/frontend/providers/objectstorage/src/store/ossStore.ts
+++ b/frontend/providers/objectstorage/src/store/ossStore.ts
@@ -9,10 +9,13 @@ import { immer } from 'zustand/middleware/immer';
 type State = {
   currentBucket?: TBucket;
   client?: S3;
+  ak: string;
   prefix: Exclude<string, ''>[];
+  setAk: (ak: string) => void;
   switchBucket: (bucket: TBucket) => void;
   initClient: (clientOptions: S3ClientConfig) => void;
   setPrefix: (prefix: string[]) => void;
+  clearClient: () => void;
 };
 
 export const useOssStore = create<State>()(
@@ -20,10 +23,17 @@ export const useOssStore = create<State>()(
     immer((set) => ({
       currentBucket: undefined,
       client: undefined,
+      ak: '',
       prefix: [],
+      setAk(ak) {
+        set({ ak });
+      },
       switchBucket: (bucket) => {
         set({ currentBucket: bucket, prefix: [] });
       },
+      clearClient() {
+        set({ client: undefined });
+      },
       initClient: (clientOptions) => set({ client: new S3(clientOptions) }),
       setPrefix: (prefix: string[]) => set({ prefix })
     }))
diff --git a/frontend/providers/objectstorage/src/types/billing.ts b/frontend/providers/objectstorage/src/types/billing.ts
new file mode 100644
index 00000000000..f2a696e0a35
--- /dev/null
+++ b/frontend/providers/objectstorage/src/types/billing.ts
@@ -0,0 +1,56 @@
+export enum BillingType {
+  ALL = -1,
+  CONSUME,
+  RECHARGE,
+  RECEIVE,
+  TRANSFER
+}
+export type BillingSpec =
+  | {
+      appType: 'OBJECT-STORAGE';
+      page: number; //给定结果数据的page页
+      pageSize: number; //设置返回数据每页数据大小
+      startTime: string; //数据在 [startTime-endTime]之间，包括startTime和endTime
+      endTime: string;
+      type: BillingType; //0为扣费，1为充值；用于billing数据查找：如为-1则查找type为0和1的数据，如果给定type值则查找type为给定值的数据
+      owner?: string; //用于billing数据中查找的owner字段值
+      namespace?: string;
+    }
+  | {
+      orderID: string; //如果给定orderId，则查找该id的值，该值为唯一值，因此当orderId给定时忽略其他查找限定值
+    };
+export type RawCosts = Record<'network' | 'cpu' | 'memory' | 'storage' | `gpu-${string}`, number>;
+export type Costs = {
+  cpu: number;
+  memory: number;
+  storage: number;
+  network: number;
+  gpu?: number;
+};
+export type BillingItem<T = Costs> = {
+  amount: number;
+  appType: string;
+  costs: T;
+  payment?: {
+    amount: number;
+  };
+  order_id: string;
+  owner: string;
+  time: string;
+  name: string;
+  namespace: string;
+  type: BillingType;
+};
+export type BillingData<T = Costs> = {
+  apiVersion: 'account.sealos.io/v1';
+  kind: 'BillingRecordQuery';
+  metadata: any;
+  spec: BillingSpec;
+  status: {
+    deductionAmount: T;
+    item: BillingItem[];
+    pageLength: number;
+    totalCount: number;
+    rechargeAmount: number;
+  };
+};
diff --git a/frontend/providers/objectstorage/src/utils/json2Yaml.ts b/frontend/providers/objectstorage/src/utils/json2Yaml.ts
index cdcf5d44662..b1d7d39587e 100644
--- a/frontend/providers/objectstorage/src/utils/json2Yaml.ts
+++ b/frontend/providers/objectstorage/src/utils/json2Yaml.ts
@@ -6,8 +6,8 @@ export const generateBucketCR = (data: {
   policy: Authority;
   namespace: string;
 }): BucketCR['input'] => ({
-  apiVersion: 'minio.sealos.io/v1',
-  kind: 'Bucket',
+  apiVersion: 'objectstorage.sealos.io/v1',
+  kind: 'ObjectStorageBucket',
   metadata: {
     name: data.name,
     namespace: data.namespace
@@ -23,8 +23,8 @@ export const generateUserCR = ({
   name: string;
   namespace: string;
 }): UserCR['input'] => ({
-  apiVersion: 'minio.sealos.io/v1',
-  kind: 'MinioUser',
+  apiVersion: 'objectstorage.sealos.io/v1',
+  kind: 'ObjectStorageUser',
   metadata: {
     name,
     namespace
diff --git a/frontend/providers/objectstorage/src/utils/tools.ts b/frontend/providers/objectstorage/src/utils/tools.ts
index 51e1dee98ab..8d30e8ed400 100644
--- a/frontend/providers/objectstorage/src/utils/tools.ts
+++ b/frontend/providers/objectstorage/src/utils/tools.ts
@@ -1,6 +1,5 @@
 import { Authority } from '@/consts';
 import { useToast } from '@/hooks/useToast';
-import { addHours, format, set, startOfDay } from 'date-fns';
 import { useTranslation } from 'next-i18next';
 
 /**
@@ -178,7 +177,10 @@ export const delay = (ms: number) =>
 
 export const inAuthority = (val: unknown): boolean =>
   Object.values(Authority).includes(val as Authority);
-
+// 1¥=1000000
+export const formatMoney = (money: number) => money / 1000000;
+export const deFormatMoney = (money: number) => money * 1000000;
+export const displayMoney = (money: number) => money.toFixed(2);
 export function formatBytes(
   bytes: number,
   decimals = 2
diff --git a/frontend/providers/objectstorage/src/utils/user.ts b/frontend/providers/objectstorage/src/utils/user.ts
index 1a08ca1f51b..3a1d60da023 100644
--- a/frontend/providers/objectstorage/src/utils/user.ts
+++ b/frontend/providers/objectstorage/src/utils/user.ts
@@ -19,9 +19,9 @@ type KC = {
 };
 
 export const getUserKubeConfig = () =>
-  (process.env.NODE_ENV === 'development'
-    ? process.env.NEXT_PUBLIC_MOCK_USER
-    : useSessionStore.getState().session?.kubeconfig) || '';
+  // (process.env.NODE_ENV === 'development'
+  //   ? process.env.NEXT_PUBLIC_MOCK_USER
+  useSessionStore.getState().session?.kubeconfig || '';
 
 export const getUserNamespace = () => {
   const kubeConfig = getUserKubeConfig();