style&fix&perf: a big style and fix and perf of devbox (#5105)

* style:  screen compatibility

* fix: remove unused code

* chore: change extension url

* chore: remove console.log

* fix: lastState adjust

* chore: update i18n message

* style: error color

* chore: update vscode uri

* fix: devbox name bug

* fix: create yaml bug

* fix: some type adjust

* perf: little perf

* fix: adjust getdetail time interval

* chore: typo adjust

* style: devboxList adjust

* chore: add some new runtime svg

* fix: change resourcePrice url

* chore: add some new runtime svg

* feat: sealosDomain->ingressDomain

* fix: iris svg name change

* chore: change svg name

* chore: change django svg color

* chore: svg

* chore: svg

* fix: detail show bug

* fix: for adapt old user network publicDomain,so do this commit

* chore: add some new svg

* perf: transform static to zustand to manage

* fix: 曲线救国 localstorage persist

* feat: support runtime multiple version

* style: detail show bug

* style: detail version and header style adjust

* chore: some type adjust

* perf: devboxList perf

* fix: form style and devboxName regrex adjust

* chore: add some svg

* perf: devboxList and devboxDetail request split

* perf: devboxDetail fetech store

* perf: getDevboxByName

* chore: adjust header button logic

* perf: version loading and fetch logic perf

* perf: version list refetch only status is not success

* fix: i18n release bug

* perf: cancel fetch monitor when init devboxdetail data

* chore: Enhance code readability

* perf: abstract idebutton component

* fix: delete devbox bug

* style: Form disable ui

* perf: release modal checkbox delay

* fix: status bug in cause of performance

* fix: deal merge conflict

* fix: annoying semgrep bug

* chore: remove unrelated letters setting code

* chore: adjust hard-code to const env

* fix: i18n message standard

* chore: add svg

* chore: add nginx svg

* fix: deploy bug

* fix: desktop linkError bug

frontend/desktop/README.md

@@ -164,7 +164,7 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 
 1. 获取登录凭证: 由于 login 页面不是在 desktop 项目里，所以需要从线上 sealos 获取登录凭证到本地开发: <https://cloud.sealos.io/> 。复制 storage 里的 session 到 localhost 环境实现 mock 登录。
 
-2. Chakra ui <https://chakra-ui.com/getting-started>
+2. Chakra ui <https://v2.chakra-ui.com/getting-started>
 
 3. TanStack Query 用法：<https://cangsdarm.github.io/react-query-web-i18n/react>
 

frontend/providers/devbox/.env.template

@@ -5,3 +5,4 @@ REGISTRY_ADDR=
 DEVBOX_AFFINITY_ENABLE=
 SQUASH_ENABLE=
 NODE_TLS_REJECT_UNAUTHORIZED=
+ROOT_RUNTIME_NAMESPACE=

frontend/providers/devbox/.vscode/settings.json

@@ -19,63 +19,5 @@
     "deepl",
     "google",
   ],
-  "cSpell.words": [
-    "apecloud",
-    "applaunchpad",
-    "Autoscaler",
-    "backuprepos",
-    "bdstatic",
-    "chakra",
-    "clusterdefinition",
-    "clusterversion",
-    "clusterversions",
-    "dataprotection",
-    "devbox",
-    "devboxes",
-    "devboxreleases",
-    "echarts",
-    "formatjs",
-    "grpcs",
-    "hljs",
-    "immer",
-    "jsonpatch",
-    "kbcli",
-    "kubeblocks",
-    "kubeconfig",
-    "kubernet",
-    "letsencrypt",
-    "localematcher",
-    "milvus",
-    "minio",
-    "mlhiter",
-    "nextjs",
-    "nextline",
-    "nodeports",
-    "nprogress",
-    "oname",
-    "openai",
-    "Parens",
-    "pitr",
-    "pricequeries",
-    "qdrant",
-    "Reconfig",
-    "rolebinding",
-    "runtimeclasses",
-    "runtimes",
-    "sailos",
-    "sealos",
-    "SSHDOMAIN",
-    "statefulset",
-    "svgr",
-    "Tailnet",
-    "tanstack",
-    "tolerations",
-    "weaviate",
-    "weixin",
-    "yalc",
-    "Yamls",
-    "zustand"
-  ],
   "typescript.tsdk": "node_modules/typescript/lib",
-  "svg.preview.background": "transparent",
 }

frontend/providers/devbox/api/devbox.ts

@@ -7,14 +7,25 @@ import {
   DevboxVersionListItemType,
   runtimeNamespaceMapType
 } from '@/types/devbox'
+import {
+  adaptDevboxDetail,
+  adaptDevboxListItem,
+  adaptDevboxVersionListItem,
+  adaptPod
+} from '@/utils/adapt'
 import { GET, POST, DELETE } from '@/services/request'
 import { KBDevboxType, KBDevboxReleaseType } from '@/types/k8s'
 import { MonitorDataResult, MonitorQueryKey } from '@/types/monitor'
-import { adaptDevboxListItem, adaptDevboxVersionListItem, adaptPod } from '@/utils/adapt'
 
 export const getMyDevboxList = () =>
   GET<KBDevboxType[]>('/api/getDevboxList').then((data): DevboxListItemType[] =>
-    data.map(adaptDevboxListItem)
+    data.map(adaptDevboxListItem).sort((a, b) => {
+      return new Date(b.createTime).getTime() - new Date(a.createTime).getTime()
+    })
+  )
+export const getDevboxByName = (devboxName: string) =>
+  GET<KBDevboxType & { portInfos: any[] }>('/api/getDevboxByName', { devboxName }).then((data) =>
+    adaptDevboxDetail(data)
   )
 
 export const applyYamlList = (yamlList: string[], type: 'create' | 'replace' | 'update') =>
@@ -28,8 +39,7 @@ export const createDevbox = (payload: {
 export const updateDevbox = (payload: { patch: DevboxPatchPropsType; devboxName: string }) =>
   POST(`/api/updateDevbox`, payload)
 
-export const delDevbox = (devboxName: string, networks: string[]) =>
-  DELETE('/api/delDevbox', { devboxName, networks: JSON.stringify(networks) })
+export const delDevbox = (devboxName: string) => DELETE('/api/delDevbox', { devboxName })
 
 export const restartDevbox = (data: { devboxName: string }) => POST('/api/restartDevbox', data)
 
@@ -39,7 +49,10 @@ export const pauseDevbox = (data: { devboxName: string }) => POST('/api/pauseDev
 
 export const getDevboxVersionList = (devboxName: string, devboxUid: string) =>
   GET<KBDevboxReleaseType[]>('/api/getDevboxVersionList', { devboxName, devboxUid }).then(
-    (data): DevboxVersionListItemType[] => data.map(adaptDevboxVersionListItem)
+    (data): DevboxVersionListItemType[] =>
+      data.map(adaptDevboxVersionListItem).sort((a, b) => {
+        return new Date(b.createTime).getTime() - new Date(a.createTime).getTime()
+      })
   )
 
 export const releaseDevbox = (data: {

frontend/providers/devbox/api/platform.ts

@@ -1,9 +1,7 @@
 import { GET, POST } from '@/services/request'
 import type { UserQuotaItemType } from '@/types/user'
-import { SystemEnvResponse } from '@/app/api/getEnv/route'
-import type { Response as resourcePriceResponse } from '@/app/api/platform/resourcePrice/route'
-
-export const getAppEnv = () => GET<SystemEnvResponse>('/api/getEnv')
+import type { Env } from '@/types/static'
+export const getAppEnv = () => GET<Env>('/api/getEnv')
 
 export const getUserQuota = () =>
   GET<{
@@ -12,9 +10,7 @@ export const getUserQuota = () =>
 
 export const getRuntime = () => GET('/api/platform/getRuntime')
 
-export const getResourcePrice = () => GET<resourcePriceResponse>('/api/platform/resourcePrice')
+export const getResourcePrice = () => GET('/api/platform/resourcePrice')
 
 export const postAuthCname = (data: { publicDomain: string; customDomain: string }) =>
   POST('/api/platform/authCname', data)
-
-export const getNamespace = () => GET<string>('/api/platform/getNamespace')