feat: add cache size retrieval functionality and integrate with UI (#5689)

* feat: add cache size retrieval functionality and integrate with UI

* chore: clean

* update

* update

package.json

@@ -86,6 +86,7 @@
     "fast-xml-parser": "^5.2.0",
     "fetch-socks": "^1.3.2",
     "fs-extra": "^11.2.0",
+    "go-get-folder-size": "^0.5.5",
     "got-scraping": "^4.1.1",
     "jsdom": "^26.0.0",
     "markdown-it": "^14.1.0",

packages/shared/IpcChannel.ts

@@ -1,4 +1,5 @@
 export enum IpcChannel {
+  App_GetCacheSize = 'app:get-cache-size',
   App_ClearCache = 'app:clear-cache',
   App_SetLaunchOnBoot = 'app:set-launch-on-boot',
   App_SetLanguage = 'app:set-language',

src/main/ipc.ts

@@ -8,6 +8,7 @@ import { IpcChannel } from '@shared/IpcChannel'
 import { Shortcut, ThemeMode } from '@types'
 import { BrowserWindow, ipcMain, nativeTheme, session, shell } from 'electron'
 import log from 'electron-log'
+import { getFolderSizeBin } from 'go-get-folder-size'
 
 import { titleBarOverlayDark, titleBarOverlayLight } from './config'
 import AppUpdater from './services/AppUpdater'
@@ -31,8 +32,9 @@ import { setOpenLinkExternal } from './services/WebviewService'
 import { windowService } from './services/WindowService'
 import { getResourcePath } from './utils'
 import { decrypt, encrypt } from './utils/aes'
-import { getConfigDir, getFilesDir } from './utils/file'
+import { getCacheDir, getConfigDir, getFilesDir } from './utils/file'
 import { compress, decompress } from './utils/zip'
+
 const fileManager = new FileStorage()
 const backupManager = new BackupManager()
 const exportService = new ExportService(fileManager)
@@ -179,6 +181,19 @@ export function registerIpc(mainWindow: BrowserWindow, app: Electron.App) {
     }
   })
 
+  // get cache size
+  ipcMain.handle(IpcChannel.App_GetCacheSize, async () => {
+    const cachePath = getCacheDir()
+    const size = await getFolderSizeBin(cachePath, true, {
+      // ignore files that we can't access
+      loose: true
+    }).catch((err) => {
+      log.error('Failed to get cache size:', err)
+    })
+
+    return size || '0MB'
+  })
+
   // check for update
   ipcMain.handle(IpcChannel.App_CheckForUpdate, async () => {
     await appUpdater.checkForUpdates()

src/main/utils/file.ts

@@ -81,6 +81,10 @@ export function getConfigDir() {
   return path.join(os.homedir(), '.cherrystudio', 'config')
 }
 
+export function getCacheDir() {
+  return path.join(app.getPath('userData'), 'Cache')
+}
+
 export function getAppConfigDir(name: string) {
   return path.join(getConfigDir(), name)
 }

src/preload/index.ts

@@ -23,6 +23,7 @@ const api = {
     ipcRenderer.invoke(IpcChannel.App_HandleZoomFactor, delta, reset),
   setAutoUpdate: (isActive: boolean) => ipcRenderer.invoke(IpcChannel.App_SetAutoUpdate, isActive),
   openWebsite: (url: string) => ipcRenderer.invoke(IpcChannel.Open_Website, url),
+  getCacheSize: () => ipcRenderer.invoke(IpcChannel.App_GetCacheSize),
   clearCache: () => ipcRenderer.invoke(IpcChannel.App_ClearCache),
   system: {
     getDeviceType: () => ipcRenderer.invoke(IpcChannel.System_GetDeviceType),

src/renderer/src/pages/settings/DataSettings/DataSettings.tsx

@@ -36,6 +36,7 @@ import YuqueSettings from './YuqueSettings'
 const DataSettings: FC = () => {
   const { t } = useTranslation()
   const [appInfo, setAppInfo] = useState<AppInfo>()
+  const [cacheSize, setCacheSize] = useState<string>('')
   const { size, removeAllFiles } = useKnowledgeFiles()
   const { theme } = useTheme()
   const [menu, setMenu] = useState<string>('data')
@@ -106,6 +107,7 @@ const DataSettings: FC = () => {
 
   useEffect(() => {
     window.api.getAppInfo().then(setAppInfo)
+    window.api.getCacheSize().then(setCacheSize)
   }, [])
 
   const handleOpenPath = (path?: string) => {
@@ -130,6 +132,7 @@ const DataSettings: FC = () => {
       onOk: async () => {
         try {
           await window.api.clearCache()
+          await window.api.getCacheSize().then(setCacheSize)
           window.message.success(t('settings.data.clear_cache.success'))
         } catch (error) {
           window.message.error(t('settings.data.clear_cache.error'))
@@ -228,7 +231,10 @@ const DataSettings: FC = () => {
               </SettingRow>
               <SettingDivider />
               <SettingRow>
-                <SettingRowTitle>{t('settings.data.clear_cache.title')}</SettingRowTitle>
+                <SettingRowTitle>
+                  {t('settings.data.clear_cache.title')}
+                  <CacheText>({cacheSize})</CacheText>
+                </SettingRowTitle>
                 <HStack gap="5px">
                   <Button onClick={handleClearCache} danger>
                     {t('settings.data.clear_cache.button')}
@@ -280,6 +286,16 @@ const MenuList = styled.div`
   }
 `
 
+const CacheText = styled(Typography.Text)`
+  color: var(--color-text-3);
+  font-size: 12px;
+  margin-left: 5px;
+  line-height: 16px;
+  display: inline-block;
+  vertical-align: middle;
+  text-align: left;
+`
+
 const PathText = styled(Typography.Text)`
   flex: 1;
   min-width: 0;

yarn.lock

@@ -4425,6 +4425,7 @@ __metadata:
     fast-xml-parser: "npm:^5.2.0"
     fetch-socks: "npm:^1.3.2"
     fs-extra: "npm:^11.2.0"
+    go-get-folder-size: "npm:^0.5.5"
     got-scraping: "npm:^4.1.1"
     html-to-image: "npm:^1.11.13"
     husky: "npm:^9.1.7"
@@ -8963,6 +8964,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"go-get-folder-size@npm:^0.5.5":
+  version: 0.5.5
+  resolution: "go-get-folder-size@npm:0.5.5"
+  dependencies:
+    std-env: "npm:^3.7.0"
+  bin:
+    go-get-folder-size: bin/cli.js
+  checksum: 10c0/eb69b686952218cc114dccf65763e0dff5056050fa3e9b2afa6161b933c3978500455503b104f9f28d96aab2fedd64ccb0255d6ea16d699fe020795f431ed7b8
+  languageName: node
+  linkType: hard
+
 "google-auth-library@npm:^9.14.2":
   version: 9.15.1
   resolution: "google-auth-library@npm:9.15.1"
@@ -16013,7 +16025,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"std-env@npm:^3.8.1":
+"std-env@npm:^3.7.0, std-env@npm:^3.8.1":
   version: 3.9.0
   resolution: "std-env@npm:3.9.0"
   checksum: 10c0/4a6f9218aef3f41046c3c7ecf1f98df00b30a07f4f35c6d47b28329bc2531eef820828951c7d7b39a1c5eb19ad8a46e3ddfc7deb28f0a2f3ceebee11bab7ba50