diff --git a/.github/workflows/server-test.yml b/.github/workflows/server-test.yml
index 6ec9d6d05..5dba495e2 100644
--- a/.github/workflows/server-test.yml
+++ b/.github/workflows/server-test.yml
@@ -171,7 +171,7 @@ jobs:
           export ALIYUN_ACCESS_KEY_ID=${{ secrets.ALIYUN_ACCESS_KEY_ID }}
           export ALIYUN_ACCESS_KEY_SECRET=${{ secrets.ALIYUN_ACCESS_KEY_SECRET }}
           export GITHUB_TOKEN=${{ secrets.GITHUB_TOKEN }}
-          docker run --rm -v `pwd`/e2e-plugins:/plugins oamdev/velaux:latest cp -r -a /app/velaux/plugins/app-demo /plugins/app-demo
+          docker run --rm -v `pwd`/e2e-plugins:/plugins oamdev/velaux:latest cp -r -a /app/velaux/plugins/ /plugins/
           make e2e-server-test
 
       - name: Upload coverage report
diff --git a/e2e-test/plugin_test.go b/e2e-test/plugin_test.go
index ddc0942f9..0a82ad4f1 100644
--- a/e2e-test/plugin_test.go
+++ b/e2e-test/plugin_test.go
@@ -17,12 +17,11 @@ limitations under the License.
 package e2e_test
 
 import (
-	"fmt"
-
 	"cuelang.org/go/pkg/strings"
 	"github.com/google/go-cmp/cmp"
 	. "github.com/onsi/ginkgo"
 	. "github.com/onsi/gomega"
+	corev1 "k8s.io/api/core/v1"
 
 	apisv1 "github.com/kubevela/velaux/pkg/server/interfaces/api/dto/v1"
 	"github.com/kubevela/velaux/pkg/server/utils/bcode"
@@ -62,8 +61,18 @@ var _ = Describe("Test to request the dex plugin", func() {
 		res := get(baseDomain + "/dex/a")
 		var bcode bcode.Bcode
 		err := decodeResponseBody(res, &bcode)
-		fmt.Println(err.Error())
 		Expect(strings.HasPrefix(err.Error(), "response code is not 200")).Should(BeTrue())
 		Expect(cmp.Diff(bcode.BusinessCode, int32(404))).Should(BeEmpty())
 	})
 })
+
+var _ = Describe("Test to request the kube API", func() {
+	It("Test to request the dex", func() {
+		defer GinkgoRecover()
+		res := get(baseDomain + "/proxy/plugins/node-dashboard/api/v1/nodes")
+		var nodeList corev1.NodeList
+		err := decodeResponseBody(res, &nodeList)
+		Expect(err).Should(BeNil())
+		Expect(cmp.Diff(len(nodeList.Items), int32(2))).Should(BeEmpty())
+	})
+})
diff --git a/package.json b/package.json
index 445efbdd3..988f7c000 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
         "packages:theme": "yarn workspace @velaux/theme build",
         "packages:ui": "yarn workspace @velaux/ui build",
         "packages:data": "yarn workspace @velaux/data build",
-        "packages:plugins": "yarn workspace @velaux-plugins/app-demo build"
+        "packages:plugins": "yarn workspace @velaux-plugins/app-demo build && yarn workspace @velaux-plugins/node-dashboard build"
     },
     "workspaces": {
         "packages": [
diff --git a/packages/velaux-data/src/api/cluster.ts b/packages/velaux-data/src/api/cluster.ts
new file mode 100644
index 000000000..bf288253f
--- /dev/null
+++ b/packages/velaux-data/src/api/cluster.ts
@@ -0,0 +1,29 @@
+export interface Cluster {
+  name: string;
+  kubeConfig: string;
+  alias?: string;
+  status?: string;
+  icon?: string;
+  description?: string;
+  createTime?: string;
+  dashboardURL?: string;
+  labels?: {};
+  providerInfo?: {
+    provider: string;
+    clusterID: string;
+    clusterName?: string;
+    regionID?: string;
+    vpcID?: string;
+    zoneID?: string;
+  };
+}
+
+export interface CreateCluster {
+  name: string;
+  alias?: string;
+  icon?: string;
+  description?: string;
+  dashboardURL?: string;
+  kubeConfig: string;
+  labels?: {};
+}
diff --git a/packages/velaux-data/src/api/index.ts b/packages/velaux-data/src/api/index.ts
new file mode 100644
index 000000000..1a5223c9d
--- /dev/null
+++ b/packages/velaux-data/src/api/index.ts
@@ -0,0 +1 @@
+export * from './cluster';
diff --git a/packages/velaux-data/src/index.ts b/packages/velaux-data/src/index.ts
index 256ee271f..1001f4537 100644
--- a/packages/velaux-data/src/index.ts
+++ b/packages/velaux-data/src/index.ts
@@ -1,2 +1,3 @@
 export * from './types';
 export * from './plugins';
+export * from './api';
diff --git a/packages/velaux-ui/package.json b/packages/velaux-ui/package.json
index fb307fd95..68c2ddc2d 100644
--- a/packages/velaux-ui/package.json
+++ b/packages/velaux-ui/package.json
@@ -3,7 +3,7 @@
   "version": "1.8.0",
   "private": true,
   "scripts": {
-    "build": "tsc -p ./tsconfig.build.json",
+    "build": "tsc -p ./tsconfig.build.json && rollup -c rollup.config.ts",
     "test": "ts-mocha -p tsconfig.test.json src/**/**.test.ts",
     "lint": "yarn lint:js && yarn lint:style && yarn lint:prettier",
     "lint:js": "eslint --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
@@ -21,11 +21,17 @@
       "path": "./node_modules/cz-customizable"
     }
   },
-  "types": "./types.ts",
+  "types": "src/types.ts",
   "main": "src/index.ts",
   "directories": {
     "src": "./src"
   },
+  "publishConfig": {
+    "main": "dist/types.js",
+    "module": "dist/esm/types.js",
+    "types": "dist/types.d.ts",
+    "access": "public"
+  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -42,6 +48,7 @@
     "@alifd/field": "1.6.2",
     "@alifd/next": "1.26.14",
     "@alifd/theme-2": "0.4.4",
+    "@kubernetes/client-node": "0.18.1",
     "@sentry/browser": "7.45.0",
     "@velaux/data": "0.0.1",
     "@velaux/theme": "0.0.1",
@@ -87,6 +94,9 @@
   "devDependencies": {
     "@grafana/tsconfig": "^1.2.0-rc1",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.1",
+    "@rollup/plugin-commonjs": "23.0.2",
+    "@rollup/plugin-json": "5.0.1",
+    "@rollup/plugin-node-resolve": "15.0.1",
     "@testing-library/react": "^12.1.2",
     "@types/base-64": "^1.0.0",
     "@types/chai": "^4.2.11",
@@ -104,6 +114,10 @@
     "@types/webpack-env": "1.18.0",
     "chai": "^4.2.0",
     "mocha": "10.2.0",
+    "rollup": "2.79.1",
+    "rollup-plugin-dts": "^5.0.0",
+    "rollup-plugin-esbuild": "5.0.0",
+    "rollup-plugin-node-externals": "^5.0.0",
     "ts-mocha": "10.0.0"
   }
 }
diff --git a/packages/velaux-ui/rollup.config.ts b/packages/velaux-ui/rollup.config.ts
new file mode 100644
index 000000000..0c6e8c5b9
--- /dev/null
+++ b/packages/velaux-ui/rollup.config.ts
@@ -0,0 +1,38 @@
+import resolve from '@rollup/plugin-node-resolve';
+import path from 'path';
+import dts from 'rollup-plugin-dts';
+import esbuild from 'rollup-plugin-esbuild';
+import { externals } from 'rollup-plugin-node-externals';
+import json from '@rollup/plugin-json';
+
+const pkg = require('./package.json');
+
+export default [
+  {
+    input: 'src/types.ts',
+    plugins: [externals({ deps: true, packagePath: './package.json' }), resolve(), esbuild(), json()],
+    output: [
+      {
+        format: 'cjs',
+        sourcemap: true,
+        dir: path.dirname(pkg.publishConfig.main),
+      },
+      {
+        format: 'esm',
+        sourcemap: true,
+        dir: path.dirname(pkg.publishConfig.module),
+        preserveModules: true,
+        // @ts-expect-error (TS cannot assure that `process.env.PROJECT_CWD` is a string)
+        preserveModulesRoot: path.join(process.env.PROJECT_CWD, `packages/velux-ui/src`),
+      },
+    ],
+  },
+  {
+    input: './compiled/types.d.ts',
+    plugins: [dts()],
+    output: {
+      file: pkg.publishConfig.types,
+      format: 'es',
+    },
+  },
+];
diff --git a/packages/velaux-ui/src/components/ApplicationDiff/index.tsx b/packages/velaux-ui/src/components/ApplicationDiff/index.tsx
index 16ad87677..2b98a207b 100644
--- a/packages/velaux-ui/src/components/ApplicationDiff/index.tsx
+++ b/packages/velaux-ui/src/components/ApplicationDiff/index.tsx
@@ -5,7 +5,7 @@ import type { ApplicationCompareResponse } from '../../interface/application';
 import './index.less';
 import { DiffEditor } from '../DiffEditor';
 import { If } from '../If';
-import Translation from '../Translation';
+import { Translation } from '../Translation';
 
 type ApplicationDiffProps = {
   baseName: string;
diff --git a/packages/velaux-ui/src/components/CustomSelect/index.tsx b/packages/velaux-ui/src/components/CustomSelect/index.tsx
index 23fbb6bc3..3dcb23193 100644
--- a/packages/velaux-ui/src/components/CustomSelect/index.tsx
+++ b/packages/velaux-ui/src/components/CustomSelect/index.tsx
@@ -2,7 +2,7 @@ import type { SelectProps } from '@alifd/next/lib/select';
 import { Select } from '@alifd/next';
 import * as React from 'react';
 
-import locale from '../../utils/locale';
+import { locale } from '../../utils/locale';
 
 interface CustomSelectProps extends SelectProps {
   enableInput?: boolean;
diff --git a/packages/velaux-ui/src/components/Drawer/index.tsx b/packages/velaux-ui/src/components/Drawer/index.tsx
index b572cdeea..3f8b95090 100644
--- a/packages/velaux-ui/src/components/Drawer/index.tsx
+++ b/packages/velaux-ui/src/components/Drawer/index.tsx
@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 
 import './index.less';
 import { If } from '../If';
-import Translation from '../Translation';
+import { Translation } from '../Translation';
 
 type Props = {
   onOk?: () => void;
@@ -20,18 +20,8 @@ type Props = {
 
 class DrawerWithFooter extends Component<Props, any> {
   render() {
-    const {
-      visible,
-      children,
-      title,
-      placement,
-      width,
-      onOk,
-      onClose,
-      extButtons,
-      onOkButtonText,
-      onOkButtonLoading,
-    } = this.props;
+    const { visible, children, title, placement, width, onOk, onClose, extButtons, onOkButtonText, onOkButtonLoading } =
+      this.props;
     return (
       <Drawer
         title={<>{title}</>}
diff --git a/packages/velaux-ui/src/components/Empty/index.tsx b/packages/velaux-ui/src/components/Empty/index.tsx
index 3682a5d7c..02bea5455 100644
--- a/packages/velaux-ui/src/components/Empty/index.tsx
+++ b/packages/velaux-ui/src/components/Empty/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { If } from '../If';
-import Translation from '../Translation';
+import { Translation } from '../Translation';
 
 import './index.less';
 
diff --git a/packages/velaux-ui/src/components/ErrorShow/index.tsx b/packages/velaux-ui/src/components/ErrorShow/index.tsx
index 455c7dab2..2fade02d3 100644
--- a/packages/velaux-ui/src/components/ErrorShow/index.tsx
+++ b/packages/velaux-ui/src/components/ErrorShow/index.tsx
@@ -1,5 +1,5 @@
 import React, { ErrorInfo } from 'react';
-import Translation from '../Translation';
+import { Translation } from '../Translation';
 
 interface Props {
   error: Error | null;
diff --git a/packages/velaux-ui/src/components/ListTitle/index.tsx b/packages/velaux-ui/src/components/ListTitle/index.tsx
index eb7e29141..a0eb3835d 100644
--- a/packages/velaux-ui/src/components/ListTitle/index.tsx
+++ b/packages/velaux-ui/src/components/ListTitle/index.tsx
@@ -1,18 +1,19 @@
 import { Button } from '@alifd/next';
 import React from 'react';
 
-import Translation from '../Translation';
+import { Translation } from '../Translation';
 import './index.less';
 import { If } from '../If';
-type Props = {
+export interface Props {
   title: string;
   subTitle?: string;
   extButtons?: [React.ReactNode];
   addButtonTitle?: string;
   addButtonClick?: () => void;
   buttonSize?: 'small' | 'medium' | 'large';
-};
-const ListTitle = function (props: Props) {
+}
+
+export const ListTitle = function (props: Props) {
   const { title, subTitle, extButtons, addButtonTitle, addButtonClick, buttonSize } = props;
 
   return (
@@ -43,5 +44,3 @@ const ListTitle = function (props: Props) {
     </div>
   );
 };
-
-export default ListTitle;
diff --git a/packages/velaux-ui/src/components/PlatformSetting/index.tsx b/packages/velaux-ui/src/components/PlatformSetting/index.tsx
index def48ba2e..82ee26e97 100644
--- a/packages/velaux-ui/src/components/PlatformSetting/index.tsx
+++ b/packages/velaux-ui/src/components/PlatformSetting/index.tsx
@@ -9,12 +9,12 @@ import { MdOutlineHelpCenter } from 'react-icons/md';
 import { getDexConfig } from '../../api/authentication';
 import { getProjectList, getProjectRoles } from '../../api/project';
 import { updateSystemInfo } from '../../api/system_config';
-import Translation from '../../components/Translation';
+import { Translation } from '../../components/Translation';
 import i18n from '../../i18n';
 import type { Project, ProjectRoleBase } from '../../interface/project';
 import type { DexConfig, SystemInfo } from '../../interface/system';
 import type { LoginUserInfo } from '../../interface/user';
-import locale from '../../utils/locale';
+import { locale } from '../../utils/locale';
 import { checkPermission } from '../../utils/permission';
 import { CustomSelect } from '../CustomSelect';
 import { If } from '../If';
diff --git a/packages/velaux-ui/src/components/RunPipeline/index.tsx b/packages/velaux-ui/src/components/RunPipeline/index.tsx
index 1bfb45c50..e3fea1e6f 100644
--- a/packages/velaux-ui/src/components/RunPipeline/index.tsx
+++ b/packages/velaux-ui/src/components/RunPipeline/index.tsx
@@ -7,14 +7,14 @@ import { deletePipelineContext, listPipelineContexts, runPipeline } from '../../
 import i18n from '../../i18n';
 import type { KeyValue, PipelineListItem } from '../../interface/pipeline';
 import './index.less';
-import locale from '../../utils/locale';
+import { locale } from '../../utils/locale';
 import { If } from '../If';
-import ListTitle from '../ListTitle';
+import { ListTitle } from '../ListTitle';
 
 import classNames from 'classnames';
 
 import Permission from '../Permission';
-import Translation from '../Translation';
+import { Translation } from '../Translation';
 
 import NewContext from './new-context';
 
diff --git a/packages/velaux-ui/src/components/RunPipeline/new-context.tsx b/packages/velaux-ui/src/components/RunPipeline/new-context.tsx
index 96bade747..e39988519 100644
--- a/packages/velaux-ui/src/components/RunPipeline/new-context.tsx
+++ b/packages/velaux-ui/src/components/RunPipeline/new-context.tsx
@@ -6,7 +6,7 @@ import KV from '../../extends/KV';
 import i18n from '../../i18n';
 import type { KeyValue, PipelineListItem } from '../../interface/pipeline';
 import { checkName } from '../../utils/common';
-import Translation from '../Translation';
+import { Translation } from '../Translation';
 
 const { Row, Col } = Grid;
 
@@ -58,21 +58,17 @@ class NewContext extends React.Component<NewContextProps> {
         keyValues.push({ key: key, value: values.values[key] });
       });
       if (editMode) {
-        updatePipelineContext(project.name, name, { name: values.name, values: keyValues }).then(
-          (res) => {
-            if (res) {
-              this.props.onSuccess();
-            }
-          },
-        );
+        updatePipelineContext(project.name, name, { name: values.name, values: keyValues }).then((res) => {
+          if (res) {
+            this.props.onSuccess();
+          }
+        });
       } else {
-        createPipelineContext(project.name, name, { name: values.name, values: keyValues }).then(
-          (res) => {
-            if (res) {
-              this.props.onSuccess();
-            }
-          },
-        );
+        createPipelineContext(project.name, name, { name: values.name, values: keyValues }).then((res) => {
+          if (res) {
+            this.props.onSuccess();
+          }
+        });
       }
     });
   };
diff --git a/packages/velaux-ui/src/components/StatusShow/index.tsx b/packages/velaux-ui/src/components/StatusShow/index.tsx
index 6233c7a7e..7c3408982 100644
--- a/packages/velaux-ui/src/components/StatusShow/index.tsx
+++ b/packages/velaux-ui/src/components/StatusShow/index.tsx
@@ -3,10 +3,10 @@ import { Link } from 'dva/router';
 import React from 'react';
 import { AiOutlineQuestionCircle } from 'react-icons/ai';
 
-import Translation from '../../components/Translation';
+import { Translation } from '../../components/Translation';
 import type { ApplicationStatus, Condition } from '../../interface/application';
 import type { Resource } from '../../interface/observation';
-import locale from '../../utils/locale';
+import { locale } from '../../utils/locale';
 import { If } from '../If';
 
 type Props = {
diff --git a/packages/velaux-ui/src/components/Title/index.tsx b/packages/velaux-ui/src/components/Title/index.tsx
index d0ba16162..e575bcb02 100644
--- a/packages/velaux-ui/src/components/Title/index.tsx
+++ b/packages/velaux-ui/src/components/Title/index.tsx
@@ -2,12 +2,12 @@ import { Grid } from '@alifd/next';
 import React from 'react';
 
 const { Col, Row } = Grid;
-export type Props = {
+export interface Props {
   title: string | React.ReactNode;
   actions: React.ReactNode[];
-};
+}
 
-const Title: React.FC<Props> = (props) => {
+export const Title: React.FC<Props> = (props) => {
   return (
     <Row>
       <Col span={12}>
@@ -23,5 +23,3 @@ const Title: React.FC<Props> = (props) => {
     </Row>
   );
 };
-
-export default Title;
diff --git a/packages/velaux-ui/src/components/Translation/index.tsx b/packages/velaux-ui/src/components/Translation/index.tsx
index 5cd50a12e..d0682bc3d 100644
--- a/packages/velaux-ui/src/components/Translation/index.tsx
+++ b/packages/velaux-ui/src/components/Translation/index.tsx
@@ -1,15 +1,13 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-type Props = {
+export type Props = {
   children: string;
   className?: string | undefined;
 };
 
-const Translation = (props: Props) => {
+export const Translation = (props: Props) => {
   const { t } = useTranslation();
   const { children, className = '' } = props;
   return <span className={className}>{t(children)}</span>;
 };
-
-export default Translation;
diff --git a/packages/velaux-ui/src/components/TreeGraph/component-node.tsx b/packages/velaux-ui/src/components/TreeGraph/component-node.tsx
index 748309fcb..63bdaa593 100644
--- a/packages/velaux-ui/src/components/TreeGraph/component-node.tsx
+++ b/packages/velaux-ui/src/components/TreeGraph/component-node.tsx
@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import * as dagre from 'dagre';
 import React, { useState } from 'react';
 
-import Translation from '../Translation';
+import { Translation } from '../Translation';
 
 import type { GraphNode, GraphEdge, TraitGraphNode, Line } from './interface';
 import { describeComponents, getGraphSize, ResourceIcon } from './utils';
@@ -127,9 +127,7 @@ function renderTraitTree(traits: TraitStatus[]) {
       {edges.map((edge) => (
         <div key={`${edge.from}-${edge.to}`} className="graph-edge">
           {edge.lines.map((line) => {
-            const distance = Math.sqrt(
-              Math.pow(line.x1 - line.x2, 2) + Math.pow(line.y1 - line.y2, 2),
-            );
+            const distance = Math.sqrt(Math.pow(line.x1 - line.x2, 2) + Math.pow(line.y1 - line.y2, 2));
             const xMid = (line.x1 + line.x2) / 2;
             const yMid = (line.y1 + line.y2) / 2;
             const angle = (Math.atan2(line.y1 - line.y2, line.x1 - line.x2) * 180) / Math.PI;
@@ -184,10 +182,8 @@ export const ComponentNode = (props: ComponentNodeProps) => {
     >
       {WithBalloon(
         <div className={classNames('icon')}>
-          <ResourceIcon
-            kind={node.resource.component?.componentType.substring(0, 1).toUpperCase() || ''}
-          />
-        </div>,
+          <ResourceIcon kind={node.resource.component?.componentType.substring(0, 1).toUpperCase() || ''} />
+        </div>
       )}
       {WithBalloon(
         <div className={classNames('name')}>
@@ -202,7 +198,7 @@ export const ComponentNode = (props: ComponentNodeProps) => {
               <Translation>UnHealthy</Translation>
             </If>
           </div>
-        </div>,
+        </div>
       )}
 
       <If condition={traits.length > 0}>
diff --git a/packages/velaux-ui/src/components/UISchema/index.tsx b/packages/velaux-ui/src/components/UISchema/index.tsx
index b878abee4..e6eecd0f7 100644
--- a/packages/velaux-ui/src/components/UISchema/index.tsx
+++ b/packages/velaux-ui/src/components/UISchema/index.tsx
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 
-import Translation from '../Translation';
+import { Translation } from '../Translation';
 import type { ParamCondition, UIParam, UIParamValidate } from '../../interface/application';
 
 import type { Rule } from '@alifd/field';
@@ -32,7 +32,7 @@ import Strings from '../../extends/Strings';
 import Structs from '../../extends/Structs';
 import type { Definition } from '../../interface/addon';
 import { checkImageName, replaceUrl } from '../../utils/common';
-import locale from '../../utils/locale';
+import { locale } from '../../utils/locale';
 import { getValue } from '../../utils/utils';
 import DefinitionCode from '../DefinitionCode';
 import { If } from '../If';
diff --git a/packages/velaux-ui/src/components/WorkflowPrompt/index.tsx b/packages/velaux-ui/src/components/WorkflowPrompt/index.tsx
index 34b812f4c..13b98cdf0 100644
--- a/packages/velaux-ui/src/components/WorkflowPrompt/index.tsx
+++ b/packages/velaux-ui/src/components/WorkflowPrompt/index.tsx
@@ -4,7 +4,7 @@ import type * as H from 'history';
 import React, { useEffect } from 'react';
 import type { Dispatch } from 'redux';
 
-import locale from '../../utils/locale';
+import { locale } from '../../utils/locale';
 
 export interface Props {
   changed: boolean;
@@ -15,52 +15,47 @@ export interface Props {
   onClearChanged: () => void;
 }
 
-export const WorkflowPrompt = React.memo(
-  ({ changed, content, onSave, dispatch, onClearChanged }: Props) => {
-    useEffect(() => {
-      const handleUnload = (event: BeforeUnloadEvent) => {
-        if (changed) {
-          event.preventDefault();
-          // No browser actually displays this message anymore.
-          // But Chrome requires it to be defined else the popup won't show.
-          event.returnValue = '';
-        }
-      };
-      window.addEventListener('beforeunload', handleUnload);
-      return () => window.removeEventListener('beforeunload', handleUnload);
-    }, [changed]);
-
-    const onHistoryBlock = (location: H.Location) => {
+export const WorkflowPrompt = React.memo(({ changed, content, onSave, dispatch, onClearChanged }: Props) => {
+  useEffect(() => {
+    const handleUnload = (event: BeforeUnloadEvent) => {
       if (changed) {
-        Dialog.confirm({
-          content: <div>{content}</div>,
-          locale: locale().Dialog,
-          onOk: () => {
-            onSave();
-            onClearChanged();
-            moveToBlockedLocationAfterReactStateUpdate(dispatch, location);
-          },
-          onCancel: () => {
-            onClearChanged();
-            moveToBlockedLocationAfterReactStateUpdate(dispatch, location);
-          },
-        });
-        return false;
+        event.preventDefault();
+        // No browser actually displays this message anymore.
+        // But Chrome requires it to be defined else the popup won't show.
+        event.returnValue = '';
       }
+    };
+    window.addEventListener('beforeunload', handleUnload);
+    return () => window.removeEventListener('beforeunload', handleUnload);
+  }, [changed]);
 
+  const onHistoryBlock = (location: H.Location) => {
+    if (changed) {
+      Dialog.confirm({
+        content: <div>{content}</div>,
+        locale: locale().Dialog,
+        onOk: () => {
+          onSave();
+          onClearChanged();
+          moveToBlockedLocationAfterReactStateUpdate(dispatch, location);
+        },
+        onCancel: () => {
+          onClearChanged();
+          moveToBlockedLocationAfterReactStateUpdate(dispatch, location);
+        },
+      });
       return false;
-    };
+    }
+
+    return false;
+  };
 
-    return <Prompt when={true} message={onHistoryBlock} />;
-  },
-);
+  return <Prompt when={true} message={onHistoryBlock} />;
+});
 
 WorkflowPrompt.displayName = 'WorkflowPrompt';
 
-function moveToBlockedLocationAfterReactStateUpdate(
-  dispatch?: Dispatch<any>,
-  location?: H.Location | null,
-) {
+function moveToBlockedLocationAfterReactStateUpdate(dispatch?: Dispatch<any>, location?: H.Location | null) {
   if (location) {
     setTimeout(() => {
       if (dispatch) {
diff --git a/packages/velaux-ui/src/components/WorkflowStudio/input-item.tsx b/packages/velaux-ui/src/components/WorkflowStudio/input-item.tsx
index e36955f9c..e38387746 100644
--- a/packages/velaux-ui/src/components/WorkflowStudio/input-item.tsx
+++ b/packages/velaux-ui/src/components/WorkflowStudio/input-item.tsx
@@ -4,7 +4,7 @@ import React, { useContext, useState } from 'react';
 import { IoMdAdd, IoMdRemove } from 'react-icons/io';
 import { WorkflowEditContext } from '../../context';
 import type { InputItem, OutputItem } from '../../interface/application';
-import locale from '../../utils/locale';
+import { locale } from '../../utils/locale';
 const { Row, Col } = Grid;
 
 export const InputItemForm = (props: { value?: InputItem; onChange: (i: InputItem) => void }) => {
diff --git a/packages/velaux-ui/src/components/WorkflowStudio/output-item.tsx b/packages/velaux-ui/src/components/WorkflowStudio/output-item.tsx
index c72a96487..6ea1011b8 100644
--- a/packages/velaux-ui/src/components/WorkflowStudio/output-item.tsx
+++ b/packages/velaux-ui/src/components/WorkflowStudio/output-item.tsx
@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import { IoMdAdd, IoMdRemove } from 'react-icons/io';
 
 import type { OutputItem } from '../../interface/application';
-import locale from '../../utils/locale';
+import { locale } from '../../utils/locale';
 const { Row, Col } = Grid;
 
 export const OutputItemForm = (props: { value?: OutputItem; onChange: (i: OutputItem) => void }) => {
diff --git a/packages/velaux-ui/src/components/WorkflowStudio/step-form.tsx b/packages/velaux-ui/src/components/WorkflowStudio/step-form.tsx
index 19c744edc..a94fc839b 100644
--- a/packages/velaux-ui/src/components/WorkflowStudio/step-form.tsx
+++ b/packages/velaux-ui/src/components/WorkflowStudio/step-form.tsx
@@ -15,7 +15,7 @@ import type { WorkflowStepBase } from '../../interface/pipeline';
 import { replaceUrl } from '../../utils/common';
 import DrawerWithFooter from '../Drawer';
 import { If } from '../If';
-import Translation from '../Translation';
+import { Translation } from '../Translation';
 import UISchema from '../UISchema';
 
 import { InputItems } from './input-item';
diff --git a/packages/velaux-ui/src/components/WorkflowStudio/type-select.tsx b/packages/velaux-ui/src/components/WorkflowStudio/type-select.tsx
index 4346e7b41..3b2d8006f 100644
--- a/packages/velaux-ui/src/components/WorkflowStudio/type-select.tsx
+++ b/packages/velaux-ui/src/components/WorkflowStudio/type-select.tsx
@@ -6,9 +6,9 @@ import i18n from '../../i18n';
 import type { DefinitionBase } from '../../interface/definitions';
 import type { WorkflowStepBase } from '../../interface/pipeline';
 import { checkName, showAlias } from '../../utils/common';
-import locale from '../../utils/locale';
+import { locale } from '../../utils/locale';
 import Item from '../Item';
-import Translation from '../Translation';
+import { Translation } from '../Translation';
 
 import { StepTypeIcon } from './step-icon';
 
diff --git a/packages/velaux-ui/src/components/WorkflowYAML/index.tsx b/packages/velaux-ui/src/components/WorkflowYAML/index.tsx
index 994044583..b010b6c0b 100644
--- a/packages/velaux-ui/src/components/WorkflowYAML/index.tsx
+++ b/packages/velaux-ui/src/components/WorkflowYAML/index.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 
 import type { WorkflowStep } from '../../interface/pipeline';
 import DefinitionCode from '../DefinitionCode';
-import Translation from '../Translation';
+import { Translation } from '../Translation';
 
 type Props = {
   steps?: WorkflowStep[];
diff --git a/packages/velaux-ui/src/components/index.ts b/packages/velaux-ui/src/components/index.ts
new file mode 100644
index 000000000..63a7d5973
--- /dev/null
+++ b/packages/velaux-ui/src/components/index.ts
@@ -0,0 +1,2 @@
+export { Translation } from './Translation';
+export { Title } from './Title';
diff --git a/packages/velaux-ui/src/extends/CertBase64/index.tsx b/packages/velaux-ui/src/extends/CertBase64/index.tsx
index ada875f59..eaed0cd39 100644
--- a/packages/velaux-ui/src/extends/CertBase64/index.tsx
+++ b/packages/velaux-ui/src/extends/CertBase64/index.tsx
@@ -6,7 +6,7 @@ import { v4 as uuid } from 'uuid';
 
 import DefinitionCode from '../../components/DefinitionCode';
 import { If } from '../../components/If';
-import Translation from '../../components/Translation';
+import { Translation } from '../../components/Translation';
 type Props = {
   value?: any;
   id: string;
diff --git a/packages/velaux-ui/src/extends/ComponentPatches/component-patch.tsx b/packages/velaux-ui/src/extends/ComponentPatches/component-patch.tsx
index 9cda02d41..7f432c396 100644
--- a/packages/velaux-ui/src/extends/ComponentPatches/component-patch.tsx
+++ b/packages/velaux-ui/src/extends/ComponentPatches/component-patch.tsx
@@ -8,10 +8,10 @@ import { AiOutlineDelete } from 'react-icons/ai';
 import { getApplicationComponent } from '../../api/application';
 import { CustomSelect } from '../../components/CustomSelect';
 import { If } from '../../components/If';
-import Translation from '../../components/Translation';
+import { Translation } from '../../components/Translation';
 import i18n from '../../i18n';
 import type { ApplicationComponent, ApplicationComponentBase, Trait } from '../../interface/application';
-import locale from '../../utils/locale';
+import { locale } from '../../utils/locale';
 const { Col, Row } = Grid;
 
 type Props = {
diff --git a/packages/velaux-ui/src/extends/ComponentSelect/index.tsx b/packages/velaux-ui/src/extends/ComponentSelect/index.tsx
index 311ff1a34..d4083413e 100644
--- a/packages/velaux-ui/src/extends/ComponentSelect/index.tsx
+++ b/packages/velaux-ui/src/extends/ComponentSelect/index.tsx
@@ -5,7 +5,7 @@ import React from 'react';
 import { getApplicationComponents } from '../../api/application';
 import i18n from '../../i18n';
 import type { ApplicationComponentBase } from '../../interface/application';
-import locale from '../../utils/locale';
+import { locale } from '../../utils/locale';
 
 type Props = {
   value?: string[];
@@ -42,14 +42,12 @@ class ComponentSelect extends React.Component<Props, State> {
       })
         .then((res) => {
           if (res && res.components) {
-            const componentOptions = (res.components || []).map(
-              (item: ApplicationComponentBase) => {
-                return {
-                  label: `${item.name}(${item.alias || '-'})`,
-                  value: item.name,
-                };
-              },
-            );
+            const componentOptions = (res.components || []).map((item: ApplicationComponentBase) => {
+              return {
+                label: `${item.name}(${item.alias || '-'})`,
+                value: item.name,
+              };
+            });
             this.setState({
               componentOptions: componentOptions,
             });
diff --git a/packages/velaux-ui/src/extends/Group/index.tsx b/packages/velaux-ui/src/extends/Group/index.tsx
index bf249ecbe..879704194 100644
--- a/packages/velaux-ui/src/extends/Group/index.tsx
+++ b/packages/velaux-ui/src/extends/Group/index.tsx
@@ -2,8 +2,8 @@ import type { Field } from '@alifd/next';
 import { Icon, Loading, Grid, Switch, Dialog } from '@alifd/next';
 import React from 'react';
 
-import Translation from '../../components/Translation';
-import locale from '../../utils/locale';
+import { Translation } from '../../components/Translation';
+import { locale } from '../../utils/locale';
 import './index.less';
 import { If } from '../../components/If';
 
@@ -56,14 +56,7 @@ class Group extends React.Component<Props, State> {
   }
 
   initSwitchState = () => {
-    const {
-      jsonKey = '',
-      propertyValue = {},
-      alwaysShow = false,
-      required,
-      closed,
-      initClose,
-    } = this.props;
+    const { jsonKey = '', propertyValue = {}, alwaysShow = false, required, closed, initClose } = this.props;
     const findKey = Object.keys(propertyValue).find((item) => item === jsonKey);
     if (findKey || alwaysShow) {
       this.setState({ enable: true, closed: false || initClose, checked: true });
@@ -85,15 +78,7 @@ class Group extends React.Component<Props, State> {
   }
 
   render() {
-    const {
-      title,
-      description,
-      children,
-      hasToggleIcon,
-      loading,
-      required,
-      disableAddon = false,
-    } = this.props;
+    const { title, description, children, hasToggleIcon, loading, required, disableAddon = false } = this.props;
     const { closed, enable, checked } = this.state;
     return (
       <Loading visible={loading || false} style={{ width: '100%' }}>
@@ -120,8 +105,8 @@ class Group extends React.Component<Props, State> {
                             type: 'confirm',
                             content: (
                               <Translation>
-                                The configuration will be reset if the switch is turned off. Are you
-                                sure want to do this?
+                                The configuration will be reset if the switch is turned off. Are you sure want to do
+                                this?
                               </Translation>
                             ),
                             onOk: () => {
@@ -135,11 +120,7 @@ class Group extends React.Component<Props, State> {
                     />
                   </If>
                   <If condition={enable && hasToggleIcon}>
-                    <Icon
-                      onClick={this.toggleShowClass}
-                      className="icon"
-                      type={closed ? 'arrow-down' : 'arrow-up'}
-                    />
+                    <Icon onClick={this.toggleShowClass} className="icon" type={closed ? 'arrow-down' : 'arrow-up'} />
                   </If>
                 </Col>
               </Row>
diff --git a/packages/velaux-ui/src/extends/HelmChartSelect/index.tsx b/packages/velaux-ui/src/extends/HelmChartSelect/index.tsx
index a66500e06..05253ba97 100644
--- a/packages/velaux-ui/src/extends/HelmChartSelect/index.tsx
+++ b/packages/velaux-ui/src/extends/HelmChartSelect/index.tsx
@@ -5,7 +5,7 @@ import React, { Component } from 'react';
 import { getCharts } from '../../api/repository';
 import i18n from '../../i18n';
 import type { HelmRepo } from '../../interface/repository';
-import locale from '../../utils/locale';
+import { locale } from '../../utils/locale';
 
 type Props = {
   value?: any;
@@ -56,7 +56,7 @@ class HelmChartSelect extends Component<Props, State> {
       getCharts({ url: helm.url, repoType: helm.repoType, secretName: repo?.secretName, project: project }).then(
         (re: string[]) => {
           this.setState({ charts: re && Array.isArray(re) ? re : [], loading: false, helm: helm });
-        },
+        }
       );
     }
   };
diff --git a/packages/velaux-ui/src/extends/HelmChartVersionSelect/index.tsx b/packages/velaux-ui/src/extends/HelmChartVersionSelect/index.tsx
index bd9d3e0dc..ea615bd26 100644
--- a/packages/velaux-ui/src/extends/HelmChartVersionSelect/index.tsx
+++ b/packages/velaux-ui/src/extends/HelmChartVersionSelect/index.tsx
@@ -5,7 +5,7 @@ import React, { Component } from 'react';
 import { getChartVersions } from '../../api/repository';
 import i18n from '../../i18n';
 import type { ChartVersion, HelmRepo } from '../../interface/repository';
-import locale from '../../utils/locale';
+import { locale } from '../../utils/locale';
 
 type Props = {
   value?: any;
@@ -65,7 +65,7 @@ class HelmChartVersionSelect extends Component<Props, State> {
         repoType: helm.repoType,
         chart: helm.chart,
         secretName: repo?.secretName,
-        project: project
+        project: project,
       }).then((re: { versions: ChartVersion[] }) => {
         if (re) {
           this.setState({ versions: re.versions || [], loading: false, helm: helm });
diff --git a/packages/velaux-ui/src/extends/HelmRepoSelect/index.tsx b/packages/velaux-ui/src/extends/HelmRepoSelect/index.tsx
index aa221080c..75eacf058 100644
--- a/packages/velaux-ui/src/extends/HelmRepoSelect/index.tsx
+++ b/packages/velaux-ui/src/extends/HelmRepoSelect/index.tsx
@@ -6,7 +6,7 @@ import React, { Component } from 'react';
 import { getChartRepos } from '../../api/repository';
 import i18n from '../../i18n';
 import type { HelmRepo } from '../../interface/repository';
-import locale from '../../utils/locale';
+import { locale } from '../../utils/locale';
 
 type Props = {
   value?: any;
diff --git a/packages/velaux-ui/src/extends/HelmValues/index.tsx b/packages/velaux-ui/src/extends/HelmValues/index.tsx
index 8590380e2..78f767a69 100644
--- a/packages/velaux-ui/src/extends/HelmValues/index.tsx
+++ b/packages/velaux-ui/src/extends/HelmValues/index.tsx
@@ -7,7 +7,7 @@ import React, { Component } from 'react';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { getChartValueFiles } from '../../api/repository';
 import HelmValueShow from '../../components/HelmValueShow';
-import Translation from '../../components/Translation';
+import { Translation } from '../../components/Translation';
 import type { UIParam } from '../../interface/application';
 import type { HelmRepo } from '../../interface/repository';
 import KV from '../KV';
@@ -100,7 +100,7 @@ class HelmValues extends Component<Props, State> {
               this.setState({ values: newValues, valueFiles: re, helm: helm, loading: false });
             } catch (err) {}
           }
-        },
+        }
       );
     }
   };
diff --git a/packages/velaux-ui/src/extends/ImageSecretSelect/index.tsx b/packages/velaux-ui/src/extends/ImageSecretSelect/index.tsx
index 2c52f7370..e798676c0 100644
--- a/packages/velaux-ui/src/extends/ImageSecretSelect/index.tsx
+++ b/packages/velaux-ui/src/extends/ImageSecretSelect/index.tsx
@@ -5,7 +5,7 @@ import React, { Component } from 'react';
 import { getImageRepos } from '../../api/repository';
 import i18n from '../../i18n';
 import type { ImageRegistry } from '../../interface/repository';
-import locale from '../../utils/locale';
+import { locale } from '../../utils/locale';
 
 type Props = {
   value?: any;
diff --git a/packages/velaux-ui/src/extends/K8sObjectsCode/index.tsx b/packages/velaux-ui/src/extends/K8sObjectsCode/index.tsx
index 404ec6421..66155e88c 100644
--- a/packages/velaux-ui/src/extends/K8sObjectsCode/index.tsx
+++ b/packages/velaux-ui/src/extends/K8sObjectsCode/index.tsx
@@ -6,7 +6,7 @@ import { v4 as uuid } from 'uuid';
 
 import DefinitionCode from '../../components/DefinitionCode';
 import { If } from '../../components/If';
-import Translation from '../../components/Translation';
+import { Translation } from '../../components/Translation';
 
 import type { KubernetesObject } from './objects';
 
diff --git a/packages/velaux-ui/src/extends/KV/index.tsx b/packages/velaux-ui/src/extends/KV/index.tsx
index c345ce47f..7b5814581 100644
--- a/packages/velaux-ui/src/extends/KV/index.tsx
+++ b/packages/velaux-ui/src/extends/KV/index.tsx
@@ -7,7 +7,7 @@ import { AiOutlineDelete } from 'react-icons/ai';
 import { If } from '../../components/If';
 import i18n from '../../i18n';
 import type { UIParam } from '../../interface/application';
-import locale from '../../utils/locale';
+import { locale } from '../../utils/locale';
 
 const { Row, Col } = Grid;
 
diff --git a/packages/velaux-ui/src/extends/PolicySelect/index.tsx b/packages/velaux-ui/src/extends/PolicySelect/index.tsx
index 445522606..6b741bbb2 100644
--- a/packages/velaux-ui/src/extends/PolicySelect/index.tsx
+++ b/packages/velaux-ui/src/extends/PolicySelect/index.tsx
@@ -5,7 +5,7 @@ import { getPolicyList } from '../../api/application';
 import { UISchemaContext } from '../../context';
 import i18n from '../../i18n';
 import type { ApplicationPolicyBase } from '../../interface/application';
-import locale from '../../utils/locale';
+import { locale } from '../../utils/locale';
 
 type Props = {
   onChange: (value: any) => void;
diff --git a/packages/velaux-ui/src/extends/SecretKeySelect/index.tsx b/packages/velaux-ui/src/extends/SecretKeySelect/index.tsx
index 0f4200f2d..a1f35d881 100644
--- a/packages/velaux-ui/src/extends/SecretKeySelect/index.tsx
+++ b/packages/velaux-ui/src/extends/SecretKeySelect/index.tsx
@@ -2,7 +2,7 @@ import i18n from 'i18next';
 import React from 'react';
 
 import { CustomSelect } from '../../components/CustomSelect';
-import locale from '../../utils/locale';
+import { locale } from '../../utils/locale';
 
 type Props = {
   onChange: (value: any) => void;
diff --git a/packages/velaux-ui/src/extends/SecretSelect/index.tsx b/packages/velaux-ui/src/extends/SecretSelect/index.tsx
index 50e426894..6ff2d99bc 100644
--- a/packages/velaux-ui/src/extends/SecretSelect/index.tsx
+++ b/packages/velaux-ui/src/extends/SecretSelect/index.tsx
@@ -5,7 +5,7 @@ import React from 'react';
 import { listCloudResourceSecrets } from '../../api/observation';
 import { CustomSelect } from '../../components/CustomSelect';
 import type { Secret } from '../../interface/observation';
-import locale from '../../utils/locale';
+import { locale } from '../../utils/locale';
 
 type Props = {
   onChange: (value: any) => void;
diff --git a/packages/velaux-ui/src/extends/StepSelect/index.tsx b/packages/velaux-ui/src/extends/StepSelect/index.tsx
index 10d1dcdd0..ea417c0de 100644
--- a/packages/velaux-ui/src/extends/StepSelect/index.tsx
+++ b/packages/velaux-ui/src/extends/StepSelect/index.tsx
@@ -5,7 +5,7 @@ import { WorkflowContext, WorkflowEditContext } from '../../context';
 import i18n from '../../i18n';
 import type { WorkflowStep, WorkflowStepBase } from '../../interface/pipeline';
 import { showAlias } from '../../utils/common';
-import locale from '../../utils/locale';
+import { locale } from '../../utils/locale';
 
 type Props = {
   value?: string[];
@@ -29,10 +29,7 @@ export const StepSelect = (props: Props) => {
       }
     });
   });
-  if (
-    workflow?.mode === 'DAG' &&
-    (workflow.subMode === 'DAG' || (workflow.subMode === 'StepByStep' && !inGroup))
-  ) {
+  if (workflow?.mode === 'DAG' && (workflow.subMode === 'DAG' || (workflow.subMode === 'StepByStep' && !inGroup))) {
     steps
       ?.filter((s) => s.name !== stepName)
       .map((step: WorkflowStep) => {
diff --git a/packages/velaux-ui/src/extends/Strings/index.tsx b/packages/velaux-ui/src/extends/Strings/index.tsx
index f8e598ec2..c5807063b 100644
--- a/packages/velaux-ui/src/extends/Strings/index.tsx
+++ b/packages/velaux-ui/src/extends/Strings/index.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 import './index.less';
 import { If } from '../../components/If';
-import Translation from '../../components/Translation';
+import { Translation } from '../../components/Translation';
 import { AiOutlineDelete } from 'react-icons/ai';
 
 type Props = {
diff --git a/packages/velaux-ui/src/layout/AppRootPage/index.tsx b/packages/velaux-ui/src/layout/AppRootPage/index.tsx
index 3cbf76617..2b6701279 100644
--- a/packages/velaux-ui/src/layout/AppRootPage/index.tsx
+++ b/packages/velaux-ui/src/layout/AppRootPage/index.tsx
@@ -1,6 +1,6 @@
 import { AppPagePlugin } from '@velaux/data';
 import * as React from 'react';
-import Translation from '../../components/Translation';
+import { Translation } from '../../components/Translation';
 import { locationService } from '../../services/LocationService';
 import { getPluginSrv, importAppPagePlugin } from '../../services/PluginService';
 
diff --git a/packages/velaux-ui/src/layout/Application/components/AddAndEditEnvBind/index.tsx b/packages/velaux-ui/src/layout/Application/components/AddAndEditEnvBind/index.tsx
index 148ee5201..eed473a5a 100644
--- a/packages/velaux-ui/src/layout/Application/components/AddAndEditEnvBind/index.tsx
+++ b/packages/velaux-ui/src/layout/Application/components/AddAndEditEnvBind/index.tsx
@@ -3,19 +3,16 @@ import { connect } from 'dva';
 import React, { Component } from 'react';
 import type { Dispatch } from 'redux';
 
-import {
-  createApplicationEnvbinding,
-  updateApplicationEnvbinding,
-} from '../../../../api/application';
+import { createApplicationEnvbinding, updateApplicationEnvbinding } from '../../../../api/application';
 import { getEnvs } from '../../../../api/env';
 import { If } from '../../../../components/If';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import type { ApplicationDetail, EnvBinding } from '../../../../interface/application';
 import type { Env } from '../../../../interface/env';
 import type { LoginUserInfo } from '../../../../interface/user';
 import EnvDialog from '../../../../pages/EnvPage/components/EnvDialog';
 import { showAlias } from '../../../../utils/common';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 
 interface Props {
   onClose: () => void;
@@ -150,7 +147,7 @@ class EnvBindPlanDialog extends Component<Props, State> {
       },
       () => {
         this.loadEnvs(this.setEnvValue);
-      },
+      }
     );
   };
   changeEnvDialog = (visible: boolean) => {
@@ -203,9 +200,7 @@ class EnvBindPlanDialog extends Component<Props, State> {
             <Row>
               <Col span={24} style={{ padding: '0 8px' }}>
                 <FormItem
-                  label={
-                    <Translation className="font-size-14 font-weight-bold">Environment</Translation>
-                  }
+                  label={<Translation className="font-size-14 font-weight-bold">Environment</Translation>}
                   help={
                     <a
                       onClick={() => {
diff --git a/packages/velaux-ui/src/layout/Application/components/DeployConfig/index.tsx b/packages/velaux-ui/src/layout/Application/components/DeployConfig/index.tsx
index 84d813606..af3818366 100644
--- a/packages/velaux-ui/src/layout/Application/components/DeployConfig/index.tsx
+++ b/packages/velaux-ui/src/layout/Application/components/DeployConfig/index.tsx
@@ -4,11 +4,11 @@ import { Link, routerRedux } from 'dva/router';
 import { dryRunApplication } from '../../../../api/application';
 import { ApplicationDryRun } from '../../../../components/ApplicationDryRun';
 import { If } from '../../../../components/If';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import i18n from '../../../../i18n';
 import type { ApplicationDetail, ApplicationDryRunResponse, Workflow } from '../../../../interface/application';
 import type { APIError } from '../../../../utils/errors';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 import './index.less';
 import { Dispatch } from 'redux';
 import { DeployModes } from '@velaux/data';
diff --git a/packages/velaux-ui/src/layout/Application/components/EnvTabs/index.tsx b/packages/velaux-ui/src/layout/Application/components/EnvTabs/index.tsx
index 408066ef2..4fc7eef2d 100644
--- a/packages/velaux-ui/src/layout/Application/components/EnvTabs/index.tsx
+++ b/packages/velaux-ui/src/layout/Application/components/EnvTabs/index.tsx
@@ -4,7 +4,7 @@ import React, { Component } from 'react';
 import './index.less';
 import { If } from '../../../../components/If';
 import Permission from '../../../../components/Permission';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import type { ApplicationDetail, EnvBinding } from '../../../../interface/application';
 import { beautifyTime } from '../../../../utils/common';
 import AddAndEditEnvBind from '../AddAndEditEnvBind';
diff --git a/packages/velaux-ui/src/layout/Application/components/Header/index.tsx b/packages/velaux-ui/src/layout/Application/components/Header/index.tsx
index 6fcf5af4c..88bb99ec2 100644
--- a/packages/velaux-ui/src/layout/Application/components/Header/index.tsx
+++ b/packages/velaux-ui/src/layout/Application/components/Header/index.tsx
@@ -9,7 +9,7 @@ import { Breadcrumb } from '../../../../components/Breadcrumb';
 import { deployApplication } from '../../../../api/application';
 import { If } from '../../../../components/If';
 import Permission from '../../../../components/Permission';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import type {
   ApplicationDetail,
   ApplicationStatus,
@@ -20,7 +20,7 @@ import type {
 } from '../../../../interface/application';
 import type { APIError } from '../../../../utils/errors';
 import { handleError } from '../../../../utils/errors';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 import DeployConfig from '../DeployConfig';
 import { Dispatch } from 'redux';
 
diff --git a/packages/velaux-ui/src/layout/Application/components/Menus/index.tsx b/packages/velaux-ui/src/layout/Application/components/Menus/index.tsx
index 0bc158452..40a6f471b 100644
--- a/packages/velaux-ui/src/layout/Application/components/Menus/index.tsx
+++ b/packages/velaux-ui/src/layout/Application/components/Menus/index.tsx
@@ -1,12 +1,12 @@
 import { Card } from '@alifd/next';
 import React, { Component } from 'react';
 
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 
 import './index.less';
 import { Link } from 'dva/router';
 
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 
 type Props = {
   envName: string;
@@ -81,11 +81,7 @@ class Menu extends Component<Props, any> {
             <Link
               key={item.key}
               to={item.to}
-              className={
-                item.key === activeKey || currentPath.startsWith(item.to)
-                  ? 'menu-item-active'
-                  : 'menu-item'
-              }
+              className={item.key === activeKey || currentPath.startsWith(item.to) ? 'menu-item-active' : 'menu-item'}
             >
               {item.label}
             </Link>
diff --git a/packages/velaux-ui/src/layout/Application/components/WorkflowSlider/index.tsx b/packages/velaux-ui/src/layout/Application/components/WorkflowSlider/index.tsx
index 271553283..9d14e2442 100644
--- a/packages/velaux-ui/src/layout/Application/components/WorkflowSlider/index.tsx
+++ b/packages/velaux-ui/src/layout/Application/components/WorkflowSlider/index.tsx
@@ -4,7 +4,7 @@ import React, { Component } from 'react';
 import type { WorkflowRecord } from '../../../../interface/application';
 import WorkflowStep from '../WorkflowStep';
 import './index.less';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import { If } from '../../../../components/If';
 
 type Props = {
@@ -66,11 +66,7 @@ class WorkflowSlider extends Component<Props, State> {
       <Card className="slide-workflow-wrapper" contentHeight={'auto'} />;
     }
     return (
-      <Card
-        className="slide-workflow-wrapper"
-        contentHeight={'auto'}
-        id={recordItem.applicationRevision}
-      >
+      <Card className="slide-workflow-wrapper" contentHeight={'auto'} id={recordItem.applicationRevision}>
         <div className="slide-header">
           <span className="slide-header-name">
             {recordItem.workflowAlias || recordItem.workflowName}({recordItem.status})
diff --git a/packages/velaux-ui/src/layout/Application/components/WorkflowStep/index.tsx b/packages/velaux-ui/src/layout/Application/components/WorkflowStep/index.tsx
index a00794299..de00f7622 100644
--- a/packages/velaux-ui/src/layout/Application/components/WorkflowStep/index.tsx
+++ b/packages/velaux-ui/src/layout/Application/components/WorkflowStep/index.tsx
@@ -7,7 +7,7 @@ import {
   rollbackApplicationWorkflowRecord,
   terminateApplicationWorkflowRecord,
 } from '../../../../api/application';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import type { WorkflowRecord, WorkflowStepStatus } from '../../../../interface/application';
 import './index.less';
 import i18n from '../../../../i18n';
diff --git a/packages/velaux-ui/src/layout/Configs/index.tsx b/packages/velaux-ui/src/layout/Configs/index.tsx
index fcf1b772b..dcc662aca 100644
--- a/packages/velaux-ui/src/layout/Configs/index.tsx
+++ b/packages/velaux-ui/src/layout/Configs/index.tsx
@@ -3,7 +3,7 @@ import { connect } from 'dva';
 import React, { Component } from 'react';
 
 import Empty from '../../components/Empty';
-import Title from '../../components/ListTitle';
+import { ListTitle } from '../../components/ListTitle';
 import type { ConfigTemplate } from '../../interface/configs';
 import { getMatchParamObj } from '../../utils/utils';
 
@@ -92,7 +92,7 @@ class ConfigsLayout extends Component<Props, State> {
     const { activeName } = this.state;
     return (
       <div className="configs-wrapper">
-        <Title
+        <ListTitle
           title={'Configs'}
           subTitle={'Provide templated, extensibility configuration management capabilities.'}
         />
diff --git a/packages/velaux-ui/src/layout/DefinitionDetails/index.tsx b/packages/velaux-ui/src/layout/DefinitionDetails/index.tsx
index cbec85153..8a245a6fc 100644
--- a/packages/velaux-ui/src/layout/DefinitionDetails/index.tsx
+++ b/packages/velaux-ui/src/layout/DefinitionDetails/index.tsx
@@ -4,7 +4,7 @@ import { Link } from 'dva/router';
 import _ from 'lodash';
 import React, { Component, Fragment } from 'react';
 
-import Translation from '../../components/Translation';
+import { Translation } from '../../components/Translation';
 import { Breadcrumb } from '../../components/Breadcrumb';
 import type { DefinitionMenuType } from '../../interface/definitions';
 import type { LoginUserInfo } from '../../interface/user';
diff --git a/packages/velaux-ui/src/layout/Definitions/index.tsx b/packages/velaux-ui/src/layout/Definitions/index.tsx
index 7cd123a7e..916958b8e 100644
--- a/packages/velaux-ui/src/layout/Definitions/index.tsx
+++ b/packages/velaux-ui/src/layout/Definitions/index.tsx
@@ -3,7 +3,7 @@ import { connect } from 'dva';
 import React, { Component } from 'react';
 
 import Empty from '../../components/Empty';
-import Title from '../../components/ListTitle';
+import { ListTitle } from '../../components/ListTitle';
 import type { DefinitionMenuType } from '../../interface/definitions';
 import { getMatchParamObj } from '../../utils/utils';
 
@@ -66,11 +66,9 @@ class DefinitionsLayout extends Component<Props, State> {
     const { activeType } = this.state;
     return (
       <div className="definitions-wrapper">
-        <Title
+        <ListTitle
           title={'Definitions'}
-          subTitle={
-            'This is achieved by implementing its application model as programmable entities'
-          }
+          subTitle={'This is achieved by implementing its application model as programmable entities'}
         />
         <If condition={!activeType}>
           <Empty style={{ marginTop: '40px' }} />
diff --git a/packages/velaux-ui/src/layout/Header/components/EditPlatFormUserDialog/index.tsx b/packages/velaux-ui/src/layout/Header/components/EditPlatFormUserDialog/index.tsx
index 967406761..c668f5f20 100644
--- a/packages/velaux-ui/src/layout/Header/components/EditPlatFormUserDialog/index.tsx
+++ b/packages/velaux-ui/src/layout/Header/components/EditPlatFormUserDialog/index.tsx
@@ -3,11 +3,11 @@ import React, { Component, Fragment } from 'react';
 import { AiOutlineEye } from 'react-icons/ai';
 
 import { updateUser } from '../../../../api/users';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import i18n from '../../../../i18n';
 import type { LoginUserInfo } from '../../../../interface/user';
 import { checkUserPassword } from '../../../../utils/common';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 
 type Props = {
   userInfo?: LoginUserInfo;
diff --git a/packages/velaux-ui/src/layout/Header/index.tsx b/packages/velaux-ui/src/layout/Header/index.tsx
index 54c6f744b..1346285f3 100644
--- a/packages/velaux-ui/src/layout/Header/index.tsx
+++ b/packages/velaux-ui/src/layout/Header/index.tsx
@@ -19,14 +19,14 @@ import { If } from '../../components/If';
 import Permission from '../../components/Permission';
 import PlatformSetting from '../../components/PlatformSetting';
 import SwitchLanguage from '../../components/SwitchButton/index';
-import Translation from '../../components/Translation';
+import { Translation } from '../../components/Translation';
 import i18n from '../../i18n';
 import type { AddonBaseStatus } from '../../interface/addon';
 import type { Config } from '../../interface/configs';
 import type { SystemInfo } from '../../interface/system';
 import type { LoginUserInfo } from '../../interface/user';
 import { getData, setData } from '../../utils/cache';
-import locale from '../../utils/locale';
+import { locale } from '../../utils/locale';
 import { checkPermission } from '../../utils/permission';
 import { getBrowserNameAndVersion, isAdminUserCheck } from '../../utils/utils';
 import CloudShell from '../CloudShell';
diff --git a/packages/velaux-ui/src/layout/LeftMenu/index.tsx b/packages/velaux-ui/src/layout/LeftMenu/index.tsx
index 3f302c18a..2bb5cd470 100644
--- a/packages/velaux-ui/src/layout/LeftMenu/index.tsx
+++ b/packages/velaux-ui/src/layout/LeftMenu/index.tsx
@@ -3,7 +3,7 @@ import { Link } from 'dva/router';
 import _ from 'lodash';
 import React, { useEffect, useState } from 'react';
 import { locationService } from '../../services/LocationService';
-import Translation from '../../components/Translation';
+import { Translation } from '../../components/Translation';
 import type { SystemInfo } from '../../interface/system';
 import type { LoginUserInfo } from '../../interface/user';
 import { menuService, LeftMenu } from '../../services/MenuService';
diff --git a/packages/velaux-ui/src/layout/Project/index.tsx b/packages/velaux-ui/src/layout/Project/index.tsx
index 3e3ac1b05..489db5a06 100644
--- a/packages/velaux-ui/src/layout/Project/index.tsx
+++ b/packages/velaux-ui/src/layout/Project/index.tsx
@@ -3,7 +3,7 @@ import { connect } from 'dva';
 import { Link } from 'dva/router';
 import React, { Component, Fragment } from 'react';
 
-import Translation from '../../components/Translation';
+import { Translation } from '../../components/Translation';
 import { Breadcrumb } from '../../components/Breadcrumb';
 import './index.less';
 import type { ProjectDetail } from '../../interface/project';
diff --git a/packages/velaux-ui/src/pages/Addons/components/card-conten/index.tsx b/packages/velaux-ui/src/pages/Addons/components/card-conten/index.tsx
index ec6617134..3aa9d8f99 100644
--- a/packages/velaux-ui/src/pages/Addons/components/card-conten/index.tsx
+++ b/packages/velaux-ui/src/pages/Addons/components/card-conten/index.tsx
@@ -6,10 +6,10 @@ import { Grid, Card, Tag, Balloon } from '@alifd/next';
 
 import Empty from '../../../../components/Empty';
 import { If } from '../../../../components/If';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import type { Addon, AddonBaseStatus } from '../../../../interface/addon';
 import { intersectionArray } from '../../../../utils/common';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 
 type State = {
   extendDotVisible: boolean;
diff --git a/packages/velaux-ui/src/pages/Addons/components/detail/index.tsx b/packages/velaux-ui/src/pages/Addons/components/detail/index.tsx
index e79fbe21d..6aea2b379 100644
--- a/packages/velaux-ui/src/pages/Addons/components/detail/index.tsx
+++ b/packages/velaux-ui/src/pages/Addons/components/detail/index.tsx
@@ -24,13 +24,13 @@ import DrawerWithFooter from '../../../../components/Drawer';
 import Empty from '../../../../components/Empty';
 import Permission from '../../../../components/Permission';
 import StatusShow from '../../../../components/StatusShow';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import UISchema from '../../../../components/UISchema';
 import i18n from '../../../../i18n';
 import type { Addon, AddonStatus, EnableAddonRequest } from '../../../../interface/addon';
 import type { ApplicationStatus, UIParam } from '../../../../interface/application';
 import type { NameAlias } from '../../../../interface/env';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 
 import 'github-markdown-css/github-markdown-light.css';
 import './index.less';
diff --git a/packages/velaux-ui/src/pages/Addons/components/registry-manage/index.tsx b/packages/velaux-ui/src/pages/Addons/components/registry-manage/index.tsx
index a86dc3a56..a80f5493f 100644
--- a/packages/velaux-ui/src/pages/Addons/components/registry-manage/index.tsx
+++ b/packages/velaux-ui/src/pages/Addons/components/registry-manage/index.tsx
@@ -4,11 +4,11 @@ import React from 'react';
 import { createAddonRegistry, deleteAddonRegistry } from '../../../../api/addons';
 import { If } from '../../../../components/If';
 import Permission from '../../../../components/Permission';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import type { AddonRegistry } from '../../../../interface/addon';
 import { checkName } from '../../../../utils/common';
 import { handleError } from '../../../../utils/errors';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 
 const { Row, Col } = Grid;
 
@@ -228,18 +228,11 @@ class RegistryManageDialog extends React.Component<Props, State> {
             <Col>
               <div className="tableButton">
                 <If condition={!existExperimental}>
-                  <Button
-                    type="secondary"
-                    onClick={this.addExperimental}
-                    style={{ marginRight: '16px' }}
-                  >
+                  <Button type="secondary" onClick={this.addExperimental} style={{ marginRight: '16px' }}>
                     <Translation>Add Experimental Registry</Translation>
                   </Button>
                 </If>
-                <Permission
-                  request={{ resource: 'addonRegistry:*', action: 'create' }}
-                  project={''}
-                >
+                <Permission request={{ resource: 'addonRegistry:*', action: 'create' }} project={''}>
                   <Button type="secondary" onClick={this.showAddRegistry}>
                     <Translation>New</Translation>
                   </Button>
@@ -252,18 +245,10 @@ class RegistryManageDialog extends React.Component<Props, State> {
             <Table.Column width="80px" title={<Translation>Type</Translation>} dataIndex="type" />
             <Table.Column title={<Translation>URL</Translation>} dataIndex="url" />
             <If condition={registryDataSource.find((item) => item.type === 'Gitlab')}>
-              <Table.Column
-                width="100px"
-                title={<Translation>Repository name</Translation>}
-                dataIndex="repo"
-              />
+              <Table.Column width="100px" title={<Translation>Repository name</Translation>} dataIndex="repo" />
             </If>
 
-            <Table.Column
-              width="160px"
-              title={<Translation>Path(Bucket)</Translation>}
-              dataIndex="path"
-            />
+            <Table.Column width="160px" title={<Translation>Path(Bucket)</Translation>} dataIndex="path" />
             <Table.Column
               cell={renderAction}
               width="100px"
@@ -349,16 +334,9 @@ class RegistryManageDialog extends React.Component<Props, State> {
                     </Form.Item>
                   </Col>
                 </If>
-                <If
-                  condition={
-                    selectType === 'Github' || selectType === 'Gitee' || selectType === 'Gitlab'
-                  }
-                >
+                <If condition={selectType === 'Github' || selectType === 'Gitee' || selectType === 'Gitlab'}>
                   <Col span={4} style={{ padding: '8px' }}>
-                    <Form.Item
-                      label={<Translation>Path</Translation>}
-                      help="The addon path in the repo"
-                    >
+                    <Form.Item label={<Translation>Path</Translation>} help="The addon path in the repo">
                       <Input
                         {...init('path', {
                           rules: [
@@ -372,10 +350,7 @@ class RegistryManageDialog extends React.Component<Props, State> {
                     </Form.Item>
                   </Col>
                   <Col span={selectType === 'Gitlab' ? 4 : 5} style={{ padding: '8px' }}>
-                    <Form.Item
-                      label={<Translation>Token</Translation>}
-                      help="Github Personal access token"
-                    >
+                    <Form.Item label={<Translation>Token</Translation>} help="Github Personal access token">
                       <Input
                         {...init('token', {
                           rules: [
@@ -391,10 +366,7 @@ class RegistryManageDialog extends React.Component<Props, State> {
                 </If>
                 <If condition={selectType === 'OSS'}>
                   <Col span={4} style={{ padding: '8px' }}>
-                    <Form.Item
-                      label={<Translation>Bucket</Translation>}
-                      help="The bucket path in the oss repo"
-                    >
+                    <Form.Item label={<Translation>Bucket</Translation>} help="The bucket path in the oss repo">
                       <Input
                         {...init('path', {
                           rules: [
@@ -409,12 +381,7 @@ class RegistryManageDialog extends React.Component<Props, State> {
                   </Col>
                 </If>
                 <Col span={2} style={{ padding: '43px 8px 8px 8px' }}>
-                  <Button
-                    size="small"
-                    type="secondary"
-                    onClick={this.onOk}
-                    style={{ height: '36px' }}
-                  >
+                  <Button size="small" type="secondary" onClick={this.onOk} style={{ height: '36px' }}>
                     <Translation>Submit</Translation>
                   </Button>
                 </Col>
diff --git a/packages/velaux-ui/src/pages/Addons/components/search/index.tsx b/packages/velaux-ui/src/pages/Addons/components/search/index.tsx
index 71926f733..0cacedc0c 100644
--- a/packages/velaux-ui/src/pages/Addons/components/search/index.tsx
+++ b/packages/velaux-ui/src/pages/Addons/components/search/index.tsx
@@ -2,9 +2,9 @@ import { Grid, Select, Input, Checkbox } from '@alifd/next';
 import React from 'react';
 import { AiOutlineSearch } from 'react-icons/ai';
 
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import i18n from '../../../../i18n';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 import './index.less';
 
 type Props = {
diff --git a/packages/velaux-ui/src/pages/Addons/constants.tsx b/packages/velaux-ui/src/pages/Addons/constants.tsx
index 679149087..24f2c26a7 100644
--- a/packages/velaux-ui/src/pages/Addons/constants.tsx
+++ b/packages/velaux-ui/src/pages/Addons/constants.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Translation from '../../components/Translation';
+import { Translation } from '../../components/Translation';
 export const pluginTitle = <Translation>Addon in management</Translation>;
 export const pluginSubTitle = <Translation>Addon in extension</Translation>;
 
diff --git a/packages/velaux-ui/src/pages/Addons/index.tsx b/packages/velaux-ui/src/pages/Addons/index.tsx
index a7c3b9917..a5972827c 100644
--- a/packages/velaux-ui/src/pages/Addons/index.tsx
+++ b/packages/velaux-ui/src/pages/Addons/index.tsx
@@ -3,9 +3,9 @@ import { connect } from 'dva';
 import React from 'react';
 
 import { If } from '../../components/If';
-import Title from '../../components/ListTitle';
+import { ListTitle } from '../../components/ListTitle';
 import Permission from '../../components/Permission';
-import Translation from '../../components/Translation';
+import { Translation } from '../../components/Translation';
 import type { Addon, AddonBaseStatus } from '../../interface/addon';
 
 import CardContend from './components/card-conten/index';
@@ -117,20 +117,13 @@ class Addons extends React.Component<Props, State> {
   };
 
   render() {
-    const {
-      addonsList = [],
-      registryList = [],
-      dispatch,
-      loading,
-      addonListMessage,
-      enabledAddons,
-    } = this.props;
+    const { addonsList = [], registryList = [], dispatch, loading, addonListMessage, enabledAddons } = this.props;
 
     const isLoading = loading.models.addons;
     const { showAddonDetail, addonName, showRegistryManage, tagList, selectTags } = this.state;
     return (
       <div>
-        <Title
+        <ListTitle
           title="Addons"
           subTitle="Manages and extends platform capabilities"
           extButtons={[
diff --git a/packages/velaux-ui/src/pages/ApplicationConfig/components/ComponentDialog/index.tsx b/packages/velaux-ui/src/pages/ApplicationConfig/components/ComponentDialog/index.tsx
index 74f85dbca..33d81efe6 100644
--- a/packages/velaux-ui/src/pages/ApplicationConfig/components/ComponentDialog/index.tsx
+++ b/packages/velaux-ui/src/pages/ApplicationConfig/components/ComponentDialog/index.tsx
@@ -12,7 +12,7 @@ import {
 } from '../../../../api/application';
 import { detailComponentDefinition } from '../../../../api/definitions';
 import DrawerWithFooter from '../../../../components/Drawer';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import UISchema from '../../../../components/UISchema';
 import i18n from '../../../../i18n';
 import type {
@@ -23,7 +23,7 @@ import type {
   ApplicationComponentBase,
 } from '../../../../interface/application';
 import { checkName } from '../../../../utils/common';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 import { transComponentDefinitions } from '../../../../utils/utils';
 
 import './index.less';
diff --git a/packages/velaux-ui/src/pages/ApplicationConfig/components/Components/index.tsx b/packages/velaux-ui/src/pages/ApplicationConfig/components/Components/index.tsx
index 6f83e617f..9d3f73d64 100644
--- a/packages/velaux-ui/src/pages/ApplicationConfig/components/Components/index.tsx
+++ b/packages/velaux-ui/src/pages/ApplicationConfig/components/Components/index.tsx
@@ -7,12 +7,12 @@ import terraform from '../../../../assets/terraform.svg';
 import Empty from '../../../../components/Empty';
 import { If } from '../../../../components/If';
 import Permission from '../../../../components/Permission';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import i18n from '../../../../i18n';
 import type { ApplicationBase, ApplicationComponentBase, Trait } from '../../../../interface/application';
 import './index.less';
 import { showAlias } from '../../../../utils/common';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 import { IoMdAdd } from 'react-icons/io';
 import { AiOutlineDelete } from 'react-icons/ai';
 
diff --git a/packages/velaux-ui/src/pages/ApplicationConfig/components/PolicyDialog/index.tsx b/packages/velaux-ui/src/pages/ApplicationConfig/components/PolicyDialog/index.tsx
index 76a927cd0..da5cab4da 100644
--- a/packages/velaux-ui/src/pages/ApplicationConfig/components/PolicyDialog/index.tsx
+++ b/packages/velaux-ui/src/pages/ApplicationConfig/components/PolicyDialog/index.tsx
@@ -14,7 +14,7 @@ import { detailPolicyDefinition, getPolicyDefinitions } from '../../../../api/de
 import DrawerWithFooter from '../../../../components/Drawer';
 import { If } from '../../../../components/If';
 import Permission from '../../../../components/Permission';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import i18n from '../../../../i18n';
 import type {
   ApplicationPolicyDetail,
@@ -30,7 +30,7 @@ import classNames from 'classnames';
 
 import type { DefinitionBase } from '../../../../interface/definitions';
 import { checkName } from '../../../../utils/common';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 import UISchema from '../../../../components/UISchema';
 
 import type { Rule } from '@alifd/next/lib/field';
diff --git a/packages/velaux-ui/src/pages/ApplicationConfig/components/PolicyList/index.tsx b/packages/velaux-ui/src/pages/ApplicationConfig/components/PolicyList/index.tsx
index 3ddd21932..859ae150c 100644
--- a/packages/velaux-ui/src/pages/ApplicationConfig/components/PolicyList/index.tsx
+++ b/packages/velaux-ui/src/pages/ApplicationConfig/components/PolicyList/index.tsx
@@ -8,8 +8,8 @@ import type { ApplicationDetail, ApplicationPolicyBase, EnvBinding } from '../..
 import { beautifyTime, momentDate } from '../../../../utils/common';
 import './index.less';
 import Empty from '../../../../components/Empty';
-import Translation from '../../../../components/Translation';
-import locale from '../../../../utils/locale';
+import { Translation } from '../../../../components/Translation';
+import { locale } from '../../../../utils/locale';
 import { AiOutlineDelete } from 'react-icons/ai';
 
 type Props = {
diff --git a/packages/velaux-ui/src/pages/ApplicationConfig/components/TraitDialog/index.tsx b/packages/velaux-ui/src/pages/ApplicationConfig/components/TraitDialog/index.tsx
index 10b4485aa..1d9bf457c 100644
--- a/packages/velaux-ui/src/pages/ApplicationConfig/components/TraitDialog/index.tsx
+++ b/packages/velaux-ui/src/pages/ApplicationConfig/components/TraitDialog/index.tsx
@@ -9,7 +9,7 @@ import { updateTrait, createTrait, getApplicationComponent } from '../../../../a
 import { detailTraitDefinition, getTraitDefinitions } from '../../../../api/definitions';
 import DrawerWithFooter from '../../../../components/Drawer';
 import { If } from '../../../../components/If';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import UISchema from '../../../../components/UISchema';
 import i18n from '../../../../i18n';
 import type { ApplicationComponent, DefinitionDetail, Trait } from '../../../../interface/application';
diff --git a/packages/velaux-ui/src/pages/ApplicationConfig/components/TraitsList/index.tsx b/packages/velaux-ui/src/pages/ApplicationConfig/components/TraitsList/index.tsx
index c0f928c28..39d96b297 100644
--- a/packages/velaux-ui/src/pages/ApplicationConfig/components/TraitsList/index.tsx
+++ b/packages/velaux-ui/src/pages/ApplicationConfig/components/TraitsList/index.tsx
@@ -4,7 +4,7 @@ import React, { Component, Fragment } from 'react';
 import type { Trait } from '../../../../interface/application';
 import { momentDate } from '../../../../utils/common';
 import './index.less';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 import i18n from '../../../../i18n';
 import { If } from '../../../../components/If';
 import { AiOutlineDelete, AiOutlinePlusCircle } from 'react-icons/ai';
diff --git a/packages/velaux-ui/src/pages/ApplicationConfig/components/TriggerDialog/index.tsx b/packages/velaux-ui/src/pages/ApplicationConfig/components/TriggerDialog/index.tsx
index 14a37807b..06761dc5c 100644
--- a/packages/velaux-ui/src/pages/ApplicationConfig/components/TriggerDialog/index.tsx
+++ b/packages/velaux-ui/src/pages/ApplicationConfig/components/TriggerDialog/index.tsx
@@ -7,7 +7,7 @@ import { detailComponentDefinition } from '../../../../api/definitions';
 import { getPayloadType } from '../../../../api/payload';
 import DrawerWithFooter from '../../../../components/Drawer';
 import { If } from '../../../../components/If';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import i18n from '../../../../i18n';
 import type {
   Workflow,
@@ -18,7 +18,7 @@ import type {
   UpdateTriggerRequest,
 } from '../../../../interface/application';
 import { checkName } from '../../../../utils/common';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 
 type Props = {
   visible: boolean;
@@ -81,9 +81,7 @@ class TriggerDialog extends React.Component<Props, State> {
     detailComponentDefinition({ name: value })
       .then((res) => {
         if (res) {
-          const findImageObj = (res.uiSchema || []).find(
-            (item: UIParam) => item.jsonKey === 'image',
-          );
+          const findImageObj = (res.uiSchema || []).find((item: UIParam) => item.jsonKey === 'image');
           const hasImage = findImageObj ? true : false;
           this.setState({
             hasImage,
@@ -354,12 +352,7 @@ class TriggerDialog extends React.Component<Props, State> {
               </If>
             </Col>
             <Col span={12} style={{ padding: '0 8px' }}>
-              <If
-                condition={
-                  this.field.getValue('type') === 'webhook' &&
-                  this.field.getValue('payloadType') === 'acr'
-                }
-              >
+              <If condition={this.field.getValue('type') === 'webhook' && this.field.getValue('payloadType') === 'acr'}>
                 <FormItem label={<Translation>Registry</Translation>}>
                   <Input
                     name="registry"
@@ -368,15 +361,12 @@ class TriggerDialog extends React.Component<Props, State> {
                       initValue: '',
                       rules: [
                         {
-                          pattern:
-                            '^(?=^.{3,255}$)[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$',
+                          pattern: '^(?=^.{3,255}$)[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$',
                           message: 'This is a invalid domain',
                         },
                       ],
                     })}
-                    placeholder={i18n.t(
-                      'For the ACR Enterprise Edition, you should set the domain of the registry.',
-                    )}
+                    placeholder={i18n.t('For the ACR Enterprise Edition, you should set the domain of the registry.')}
                   />
                 </FormItem>
               </If>
@@ -424,8 +414,7 @@ class TriggerDialog extends React.Component<Props, State> {
           </Row>
           <Message type="warning" animation={true} visible={this.isShowMessage()} title="Warning">
             <Translation>
-              Your component type does not support the image field, and the image update cannot be
-              performed
+              Your component type does not support the image field, and the image update cannot be performed
             </Translation>
           </Message>
         </Form>
diff --git a/packages/velaux-ui/src/pages/ApplicationConfig/components/TriggerList/index.tsx b/packages/velaux-ui/src/pages/ApplicationConfig/components/TriggerList/index.tsx
index e39a6d028..e40d2976c 100644
--- a/packages/velaux-ui/src/pages/ApplicationConfig/components/TriggerList/index.tsx
+++ b/packages/velaux-ui/src/pages/ApplicationConfig/components/TriggerList/index.tsx
@@ -7,7 +7,7 @@ import Empty from '../../../../components/Empty';
 import { If } from '../../../../components/If';
 import Item from '../../../../components/Item';
 import Permission from '../../../../components/Permission';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import type {
   ApplicationComponentBase,
   ApplicationComponent,
@@ -16,7 +16,7 @@ import type {
 } from '../../../../interface/application';
 import { momentDate, showAlias } from '../../../../utils/common';
 import './index.less';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 import { AiOutlineDelete } from 'react-icons/ai';
 
 type Props = {
diff --git a/packages/velaux-ui/src/pages/ApplicationConfig/constants.tsx b/packages/velaux-ui/src/pages/ApplicationConfig/constants.tsx
index a20bbff4c..094f09bd8 100644
--- a/packages/velaux-ui/src/pages/ApplicationConfig/constants.tsx
+++ b/packages/velaux-ui/src/pages/ApplicationConfig/constants.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Translation from '../../components/Translation';
+import { Translation } from '../../components/Translation';
 
 export const MANAGER_TITLE = <Translation>AppPlan Manager</Translation>;
 export const MANAGER_NAME = <Translation>App Name-</Translation>;
@@ -26,9 +26,7 @@ export const COMPONENT_NAME = <Translation>Component Name-</Translation>;
 export const RUNNING_INSTANCES = <Translation>Running instances</Translation>;
 export const LOG_QUERY = <Translation>Log query</Translation>;
 export const SURVEILLANCE_PANEL = <Translation>Surveillance panel</Translation>;
-export const COMPONENT_PARAMETER_CONFIGURATION = (
-  <Translation>Component parameter configuration</Translation>
-);
+export const COMPONENT_PARAMETER_CONFIGURATION = <Translation>Component parameter configuration</Translation>;
 export const DATA_INPUT = <Translation>Data input</Translation>;
 export const DATA_OUTPUT = <Translation>Data output</Translation>;
 export const OPERATING_CHARACTERISTICS = <Translation>Operating characteristics</Translation>;
diff --git a/packages/velaux-ui/src/pages/ApplicationConfig/index.tsx b/packages/velaux-ui/src/pages/ApplicationConfig/index.tsx
index 7e256ccc3..3e8a45a89 100644
--- a/packages/velaux-ui/src/pages/ApplicationConfig/index.tsx
+++ b/packages/velaux-ui/src/pages/ApplicationConfig/index.tsx
@@ -18,8 +18,8 @@ import { If } from '../../components/If';
 import Item from '../../components/Item';
 import NumItem from '../../components/NumItem';
 import Permission from '../../components/Permission';
-import Title from '../../components/Title';
-import Translation from '../../components/Translation';
+import { Title } from '../../components/Title';
+import { Translation } from '../../components/Translation';
 import { routerRedux, Link } from 'dva/router';
 import i18n from '../../i18n';
 import type {
@@ -38,7 +38,7 @@ import type {
 import { beautifyTime, momentDate, showAlias } from '../../utils/common';
 import type { APIError } from '../../utils/errors';
 import { handleError } from '../../utils/errors';
-import locale from '../../utils/locale';
+import { locale } from '../../utils/locale';
 import EditAppDialog from '../ApplicationList/components/EditAppDialog';
 
 import ComponentDialog from './components/ComponentDialog';
diff --git a/packages/velaux-ui/src/pages/ApplicationInstanceList/components/ContainerLog/index.tsx b/packages/velaux-ui/src/pages/ApplicationInstanceList/components/ContainerLog/index.tsx
index 5da1f9391..03252a567 100644
--- a/packages/velaux-ui/src/pages/ApplicationInstanceList/components/ContainerLog/index.tsx
+++ b/packages/velaux-ui/src/pages/ApplicationInstanceList/components/ContainerLog/index.tsx
@@ -2,10 +2,10 @@ import { Dialog, Grid, Checkbox, Dropdown, Menu } from '@alifd/next';
 import React, { Component } from 'react';
 
 import { If } from '../../../../components/If';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import type { ContainerLogResponse, PodBase } from '../../../../interface/observation';
 import { momentDate, momentShortDate } from '../../../../utils/common';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 import './index.less';
 import { listContainerLog } from '../../../../api/observation';
 
diff --git a/packages/velaux-ui/src/pages/ApplicationInstanceList/components/Header/index.tsx b/packages/velaux-ui/src/pages/ApplicationInstanceList/components/Header/index.tsx
index a36c6ea27..cf9b25257 100644
--- a/packages/velaux-ui/src/pages/ApplicationInstanceList/components/Header/index.tsx
+++ b/packages/velaux-ui/src/pages/ApplicationInstanceList/components/Header/index.tsx
@@ -14,7 +14,7 @@ import {
 import { ApplicationDiff } from '../../../../components/ApplicationDiff';
 import { If } from '../../../../components/If';
 import Permission from '../../../../components/Permission';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import type {
   ApplicationCompareResponse,
   ApplicationComponent,
@@ -24,7 +24,7 @@ import type {
 } from '../../../../interface/application';
 import type { Endpoint } from '../../../../interface/observation';
 import type { Target } from '../../../../interface/target';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 import { getLink } from '../../../../utils/utils';
 
 export type GatewayIP = {
diff --git a/packages/velaux-ui/src/pages/ApplicationInstanceList/components/PodDetail/index.tsx b/packages/velaux-ui/src/pages/ApplicationInstanceList/components/PodDetail/index.tsx
index a49fc8e4d..a71ed4f4e 100644
--- a/packages/velaux-ui/src/pages/ApplicationInstanceList/components/PodDetail/index.tsx
+++ b/packages/velaux-ui/src/pages/ApplicationInstanceList/components/PodDetail/index.tsx
@@ -10,14 +10,14 @@ import { AiOutlineCode, AiOutlineCopy } from 'react-icons/ai';
 
 import { listApplicationPodsDetails } from '../../../../api/observation';
 import { If } from '../../../../components/If';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import i18n from '../../../../i18n';
 import type { AddonBaseStatus } from '../../../../interface/addon';
 import type { ApplicationDetail, EnvBinding } from '../../../../interface/application';
 import type { PodBase, Container, Event } from '../../../../interface/observation';
 import type { LoginUserInfo } from '../../../../interface/user';
 import { checkEnabledAddon } from '../../../../utils/common';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 import { quantityToScalar } from '../../../../utils/utils';
 import ContainerLog from '../ContainerLog';
 import { HiOutlineNewspaper } from 'react-icons/hi';
diff --git a/packages/velaux-ui/src/pages/ApplicationInstanceList/index.tsx b/packages/velaux-ui/src/pages/ApplicationInstanceList/index.tsx
index 10a01ca1a..a058868c9 100644
--- a/packages/velaux-ui/src/pages/ApplicationInstanceList/index.tsx
+++ b/packages/velaux-ui/src/pages/ApplicationInstanceList/index.tsx
@@ -8,7 +8,7 @@ import { deployApplication } from '../../api/application';
 import { listApplicationPods, listCloudResources, listApplicationServiceEndpoints } from '../../api/observation';
 import { If } from '../../components/If';
 import StatusShow from '../../components/StatusShow';
-import Translation from '../../components/Translation';
+import { Translation } from '../../components/Translation';
 import i18n from '../../i18n';
 import type {
   ApplicationComponent,
@@ -23,7 +23,7 @@ import type { LoginUserInfo } from '../../interface/user';
 import { momentDate } from '../../utils/common';
 import type { APIError } from '../../utils/errors';
 import { handleError } from '../../utils/errors';
-import locale from '../../utils/locale';
+import { locale } from '../../utils/locale';
 
 import Header from './components/Header';
 import PodDetail from './components/PodDetail';
diff --git a/packages/velaux-ui/src/pages/ApplicationList/components/AddAppDialog/index.tsx b/packages/velaux-ui/src/pages/ApplicationList/components/AddAppDialog/index.tsx
index 105eb2cb9..1327a7304 100644
--- a/packages/velaux-ui/src/pages/ApplicationList/components/AddAppDialog/index.tsx
+++ b/packages/velaux-ui/src/pages/ApplicationList/components/AddAppDialog/index.tsx
@@ -7,14 +7,14 @@ import { createApplication } from '../../../../api/application';
 import { detailComponentDefinition } from '../../../../api/definitions';
 import { getEnvs } from '../../../../api/env';
 import DrawerWithFooter from '../../../../components/Drawer';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import UISchema from '../../../../components/UISchema';
 import type { DefinitionDetail } from '../../../../interface/application';
 import type { Env } from '../../../../interface/env';
 import type { Project } from '../../../../interface/project';
 import type { Target } from '../../../../interface/target';
 import type { LoginUserInfo } from '../../../../interface/user';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 import EnvDialog from '../../../EnvPage/components/EnvDialog';
 import GeneralConfig from '../GeneralConfig';
 
@@ -111,16 +111,7 @@ class AppDialog extends React.Component<Props, State> {
       if (error) {
         return;
       }
-      const {
-        description,
-        alias,
-        name,
-        icon = '',
-        componentType,
-        properties,
-        envBindings,
-        project,
-      } = values;
+      const { description, alias, name, icon = '', componentType, properties, envBindings, project } = values;
       const envbinding = envBindings?.map((env: string) => {
         return { name: env };
       });
@@ -222,8 +213,7 @@ class AppDialog extends React.Component<Props, State> {
   };
 
   changeStatus = (value: string) => {
-    const values: { componentType: string; envBindings: string[]; project: string } =
-      this.field.getValues();
+    const values: { componentType: string; envBindings: string[]; project: string } = this.field.getValues();
     const { envBindings } = values;
     if (value === 'isCreateComponent') {
       this.field.validateCallback(
@@ -253,7 +243,7 @@ class AppDialog extends React.Component<Props, State> {
           this.setState({
             dialogStats: value,
           });
-        },
+        }
       );
     } else if (value === 'isBasic') {
       this.setState({
@@ -315,7 +305,7 @@ class AppDialog extends React.Component<Props, State> {
       },
       () => {
         this.loadEnvs(this.setEnvValue);
-      },
+      }
     );
   };
   changeEnvDialog = (visible: boolean) => {
@@ -344,8 +334,7 @@ class AppDialog extends React.Component<Props, State> {
     const init = this.field.init;
     const FormItem = Form.Item;
     const { Row, Col } = Grid;
-    const { visible, setVisible, dispatch, projects, onClose, isDisableProject, userInfo } =
-      this.props;
+    const { visible, setVisible, dispatch, projects, onClose, isDisableProject, userInfo } = this.props;
     console.log(this.field);
     const { definitionDetail, dialogStats, envs, visibleEnvDialog } = this.state;
     const validator = (rule: Rule, value: any, callback: (error?: string) => void) => {
@@ -358,9 +347,7 @@ class AppDialog extends React.Component<Props, State> {
       };
     });
     const secondStep =
-      dialogStats === 'isCreateComponent' && definitionDetail && definitionDetail.uiSchema
-        ? true
-        : false;
+      dialogStats === 'isCreateComponent' && definitionDetail && definitionDetail.uiSchema ? true : false;
     init('test');
     return (
       <React.Fragment>
@@ -389,11 +376,7 @@ class AppDialog extends React.Component<Props, State> {
                 <Row>
                   <Col span={24} style={{ padding: '0 8px' }}>
                     <FormItem
-                      label={
-                        <Translation className="font-size-14 font-weight-bold">
-                          Main Component Type
-                        </Translation>
-                      }
+                      label={<Translation className="font-size-14 font-weight-bold">Main Component Type</Translation>}
                       required={true}
                       help={
                         <span>
@@ -426,11 +409,7 @@ class AppDialog extends React.Component<Props, State> {
                 <Row>
                   <Col span={24} style={{ padding: '0 8px' }}>
                     <FormItem
-                      label={
-                        <Translation className="font-size-14 font-weight-bold">
-                          Bind Environments
-                        </Translation>
-                      }
+                      label={<Translation className="font-size-14 font-weight-bold">Bind Environments</Translation>}
                       help={
                         <a
                           onClick={() => {
diff --git a/packages/velaux-ui/src/pages/ApplicationList/components/CardContent/index.tsx b/packages/velaux-ui/src/pages/ApplicationList/components/CardContent/index.tsx
index 5e584df4b..1b4c13e78 100644
--- a/packages/velaux-ui/src/pages/ApplicationList/components/CardContent/index.tsx
+++ b/packages/velaux-ui/src/pages/ApplicationList/components/CardContent/index.tsx
@@ -11,12 +11,12 @@ import appSvg from '../../../../assets/application.svg';
 import Empty from '../../../../components/Empty';
 import { If } from '../../../../components/If';
 import Permission from '../../../../components/Permission';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import type { ApplicationBase } from '../../../../interface/application';
 import type { Project } from '../../../../interface/project';
 import type { LoginUserInfo } from '../../../../interface/user';
 import { momentDate } from '../../../../utils/common';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 import { checkPermission } from '../../../../utils/permission';
 const { Column } = Table;
 
diff --git a/packages/velaux-ui/src/pages/ApplicationList/components/EditAppDialog/index.tsx b/packages/velaux-ui/src/pages/ApplicationList/components/EditAppDialog/index.tsx
index 2a5f83d6c..c472df133 100644
--- a/packages/velaux-ui/src/pages/ApplicationList/components/EditAppDialog/index.tsx
+++ b/packages/velaux-ui/src/pages/ApplicationList/components/EditAppDialog/index.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 
 import { updateApplication } from '../../../../api/application';
 import DrawerWithFooter from '../../../../components/Drawer';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import KV from '../../../../extends/KV';
 import type { ApplicationBase } from '../../../../interface/application';
 
diff --git a/packages/velaux-ui/src/pages/ApplicationList/components/GeneralConfig/index.tsx b/packages/velaux-ui/src/pages/ApplicationList/components/GeneralConfig/index.tsx
index 5592aabdf..f52f5b844 100644
--- a/packages/velaux-ui/src/pages/ApplicationList/components/GeneralConfig/index.tsx
+++ b/packages/velaux-ui/src/pages/ApplicationList/components/GeneralConfig/index.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 
 import { checkName } from '../../../../utils/common';
 import './index.less';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import i18n from '../../../../i18n';
 import type { Project } from '../../../../interface/project';
 import type { LoginUserInfo } from '../../../../interface/user';
@@ -38,11 +38,7 @@ class GeneralConfig extends React.Component<Props, State> {
     const projectOptions: Array<{ label: string; value: string }> = [];
     (projects || []).map((project) => {
       if (
-        checkPermission(
-          { resource: `project:${project.name}/application:*`, action: 'create' },
-          project.name,
-          userInfo,
-        )
+        checkPermission({ resource: `project:${project.name}/application:*`, action: 'create' }, project.name, userInfo)
       ) {
         if (project.name === 'default') {
           defaultProject = project.name;
@@ -69,11 +65,7 @@ class GeneralConfig extends React.Component<Props, State> {
         <Form {...formItemLayout} field={this.props.field}>
           <Row>
             <Col span={12} style={{ padding: '0 8px' }}>
-              <FormItem
-                label={<Translation>Name</Translation>}
-                labelTextAlign="left"
-                required={true}
-              >
+              <FormItem label={<Translation>Name</Translation>} labelTextAlign="left" required={true}>
                 <Input
                   name="name"
                   maxLength={31}
diff --git a/packages/velaux-ui/src/pages/ApplicationList/components/GeneralConfig/project-form.tsx b/packages/velaux-ui/src/pages/ApplicationList/components/GeneralConfig/project-form.tsx
index fba7150f1..8060c6e4b 100644
--- a/packages/velaux-ui/src/pages/ApplicationList/components/GeneralConfig/project-form.tsx
+++ b/packages/velaux-ui/src/pages/ApplicationList/components/GeneralConfig/project-form.tsx
@@ -3,9 +3,9 @@ import React from 'react';
 
 import { createProject } from '../../../../api/project';
 import { If } from '../../../../components/If';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import { checkName } from '../../../../utils/common';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 
 const { Col, Row } = Grid;
 const FormItem = Form.Item;
@@ -65,12 +65,7 @@ class ProjectForm extends React.Component<Props, State> {
     const { showProjectInput } = this.state;
     return (
       <React.Fragment>
-        <FormItem
-          {...formItemLayout}
-          label={<Translation>Project</Translation>}
-          labelTextAlign="left"
-          required={true}
-        >
+        <FormItem {...formItemLayout} label={<Translation>Project</Translation>} labelTextAlign="left" required={true}>
           <If condition={!showProjectInput}>
             <div className="cluster-container">
               <Select
@@ -118,11 +113,7 @@ class ProjectForm extends React.Component<Props, State> {
                     />
                   </Form.Item>
                 </Col>
-                <Button
-                  className="cluster-option-btn"
-                  type="secondary"
-                  onClick={this.createProject}
-                >
+                <Button className="cluster-option-btn" type="secondary" onClick={this.createProject}>
                   <Translation>Submit</Translation>
                 </Button>
                 <Button
diff --git a/packages/velaux-ui/src/pages/ApplicationList/components/SelectSearch/index.tsx b/packages/velaux-ui/src/pages/ApplicationList/components/SelectSearch/index.tsx
index 9f65a72a4..edcf1dc3b 100644
--- a/packages/velaux-ui/src/pages/ApplicationList/components/SelectSearch/index.tsx
+++ b/packages/velaux-ui/src/pages/ApplicationList/components/SelectSearch/index.tsx
@@ -5,7 +5,7 @@ import './index.less';
 import type { ShowMode } from '../..';
 import type { Env } from '../../../../interface/env';
 import type { Project } from '../../../../interface/project';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 import i18n from '../../../../i18n';
 import { AiOutlineSearch } from 'react-icons/ai';
 
diff --git a/packages/velaux-ui/src/pages/ApplicationList/components/YmalConfig/index.tsx b/packages/velaux-ui/src/pages/ApplicationList/components/YmalConfig/index.tsx
index d0b469b8a..c82570281 100644
--- a/packages/velaux-ui/src/pages/ApplicationList/components/YmalConfig/index.tsx
+++ b/packages/velaux-ui/src/pages/ApplicationList/components/YmalConfig/index.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { AiOutlineCloudUpload } from 'react-icons/ai';
 
 import DefinitionCode from '../../../../components/DefinitionCode';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import i18n from '../../../../i18n';
 import { checkName } from '../../../../utils/common';
 import NameSpaceForm from '../GeneralConfig/project-form';
diff --git a/packages/velaux-ui/src/pages/ApplicationList/index.tsx b/packages/velaux-ui/src/pages/ApplicationList/index.tsx
index ef82323c3..ee0aab687 100644
--- a/packages/velaux-ui/src/pages/ApplicationList/index.tsx
+++ b/packages/velaux-ui/src/pages/ApplicationList/index.tsx
@@ -5,9 +5,9 @@ import React, { Component } from 'react';
 import { deleteApplication } from '../../api/application';
 import { getComponentDefinitions } from '../../api/definitions';
 import { If } from '../../components/If';
-import Title from '../../components/ListTitle';
+import { ListTitle } from '../../components/ListTitle';
 import Permission from '../../components/Permission';
-import Translation from '../../components/Translation';
+import { Translation } from '../../components/Translation';
 import type { ApplicationBase } from '../../interface/application';
 import type { LoginUserInfo } from '../../interface/user';
 
@@ -134,50 +134,43 @@ class Application extends Component<Props, State> {
     let existIndex = -1;
     labelValue.map((key, index) => {
       if (key == label) {
-        existIndex = index
-        return
+        existIndex = index;
+        return;
       }
     });
     if (existIndex == -1) {
-      labelValue.push(label)
+      labelValue.push(label);
     } else {
       labelValue = labelValue.splice(existIndex, existIndex);
     }
     this.setState({
-      labelValue
+      labelValue,
     });
-    this.getApplications({labels: labelValue.join(",")});
+    this.getApplications({ labels: labelValue.join(',') });
   };
 
   render() {
     const { applicationList, targets, dispatch, envs, userInfo } = this.props;
-    const {
-      showAddApplication,
-      componentDefinitions,
-      isLoading,
-      showEditApplication,
-      editItem,
-      labelValue,
-      showMode,
-    } = this.state;
-    let appLabels: string[] = []
+    const { showAddApplication, componentDefinitions, isLoading, showEditApplication, editItem, labelValue, showMode } =
+      this.state;
+    let appLabels: string[] = [];
     applicationList.map((app) => {
-      app.labels && Object.keys(app.labels).map((key: string) => {
-        if (key.indexOf("ux.oam.dev") < 0 && key.indexOf("app.oam.dev")) {
-          if (app.labels) { appLabels.push(key+"="+app.labels[key]) }
-        }
-      })
-    })
+      app.labels &&
+        Object.keys(app.labels).map((key: string) => {
+          if (key.indexOf('ux.oam.dev') < 0 && key.indexOf('app.oam.dev')) {
+            if (app.labels) {
+              appLabels.push(key + '=' + app.labels[key]);
+            }
+          }
+        });
+    });
     return (
       <div>
-        <Title
+        <ListTitle
           title="Applications"
           subTitle="Deploy and manage all your applications"
           extButtons={[
-            <Permission
-              request={{ resource: 'project:?/application:*', action: 'create' }}
-              project={'?'}
-            >
+            <Permission request={{ resource: 'project:?/application:*', action: 'create' }} project={'?'}>
               <Button
                 type="primary"
                 onClick={() => {
@@ -241,11 +234,7 @@ class Application extends Component<Props, State> {
         </If>
 
         <If condition={showEditApplication && editItem}>
-          <EditAppDialog
-            editItem={editItem}
-            onOK={this.closeEditAppDialog}
-            onClose={this.closeEditAppDialog}
-          />
+          <EditAppDialog editItem={editItem} onOK={this.closeEditAppDialog} onClose={this.closeEditAppDialog} />
         </If>
       </div>
     );
diff --git a/packages/velaux-ui/src/pages/ApplicationLog/components/LogContainer/index.tsx b/packages/velaux-ui/src/pages/ApplicationLog/components/LogContainer/index.tsx
index 11b33a21f..52a62a937 100644
--- a/packages/velaux-ui/src/pages/ApplicationLog/components/LogContainer/index.tsx
+++ b/packages/velaux-ui/src/pages/ApplicationLog/components/LogContainer/index.tsx
@@ -3,7 +3,7 @@ import Ansi from 'ansi-to-react';
 import React, { Component, Fragment } from 'react';
 
 import { listContainerLog } from '../../../../api/observation';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import type { ContainerLogResponse, PodBase } from '../../../../interface/observation';
 import { momentDate, momentShortDate } from '../../../../utils/common';
 import './index.less';
diff --git a/packages/velaux-ui/src/pages/ApplicationLog/index.tsx b/packages/velaux-ui/src/pages/ApplicationLog/index.tsx
index a2781dd7b..53f00b041 100644
--- a/packages/velaux-ui/src/pages/ApplicationLog/index.tsx
+++ b/packages/velaux-ui/src/pages/ApplicationLog/index.tsx
@@ -4,7 +4,7 @@ import querystring from 'query-string';
 import React, { Fragment } from 'react';
 
 import { listApplicationPods, listApplicationPodsDetails } from '../../api/observation';
-import Translation from '../../components/Translation';
+import { Translation } from '../../components/Translation';
 import i18n from '../../i18n';
 import type {
   ApplicationComponent,
@@ -113,7 +113,7 @@ class ApplicationLog extends React.Component<Props, State> {
                 } else {
                   this.handlePodNameChange(res.podList[0].metadata.name);
                 }
-              },
+              }
             );
           } else {
             this.setState({
@@ -144,7 +144,7 @@ class ApplicationLog extends React.Component<Props, State> {
               },
               () => {
                 this.handleContainerNameChange(activeContainerName);
-              },
+              }
             );
           }
         })
@@ -152,12 +152,9 @@ class ApplicationLog extends React.Component<Props, State> {
     }
   };
   handleComponentNameChange = (value: string) => {
-    this.setState(
-      { activeComponentName: value, activePodName: '', activeContainerName: '' },
-      () => {
-        this.loadPodInstance();
-      },
-    );
+    this.setState({ activeComponentName: value, activePodName: '', activeContainerName: '' }, () => {
+      this.loadPodInstance();
+    });
   };
   handlePodNameChange = (value: any) => {
     const { podList } = this.state;
@@ -171,7 +168,7 @@ class ApplicationLog extends React.Component<Props, State> {
       },
       () => {
         this.loadPodDetail();
-      },
+      }
     );
   };
 
@@ -220,13 +217,7 @@ class ApplicationLog extends React.Component<Props, State> {
 
   render() {
     const { Row, Col } = Grid;
-    const {
-      pod,
-      activePodName,
-      activeContainerName,
-      activeComponentName,
-      isActiveContainerNameDisabled,
-    } = this.state;
+    const { pod, activePodName, activeContainerName, activeComponentName, isActiveContainerNameDisabled } = this.state;
     const podLabel = (
       <span>
         <Translation>Pod</Translation>:
diff --git a/packages/velaux-ui/src/pages/ApplicationRevisionList/components/Detail/index.tsx b/packages/velaux-ui/src/pages/ApplicationRevisionList/components/Detail/index.tsx
index 457ba1f27..dc14a2555 100644
--- a/packages/velaux-ui/src/pages/ApplicationRevisionList/components/Detail/index.tsx
+++ b/packages/velaux-ui/src/pages/ApplicationRevisionList/components/Detail/index.tsx
@@ -7,12 +7,9 @@ import DefinitionCode from '../../../../components/DefinitionCode';
 import DrawerWithFooter from '../../../../components/Drawer';
 import Empty from '../../../../components/Empty';
 import { If } from '../../../../components/If';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import i18n from '../../../../i18n';
-import type {
-  ApplicationRevision,
-  ApplicationRevisionDetail,
-} from '../../../../interface/application';
+import type { ApplicationRevision, ApplicationRevisionDetail } from '../../../../interface/application';
 import type { ResourceTreeNode } from '../../../../interface/observation';
 
 type RevisionProps = {
diff --git a/packages/velaux-ui/src/pages/ApplicationRevisionList/components/Empty/index.tsx b/packages/velaux-ui/src/pages/ApplicationRevisionList/components/Empty/index.tsx
index 0a0a44e6a..8c2267f5d 100644
--- a/packages/velaux-ui/src/pages/ApplicationRevisionList/components/Empty/index.tsx
+++ b/packages/velaux-ui/src/pages/ApplicationRevisionList/components/Empty/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 
 const Empty = function () {
   return (
diff --git a/packages/velaux-ui/src/pages/ApplicationRevisionList/components/Header/index.tsx b/packages/velaux-ui/src/pages/ApplicationRevisionList/components/Header/index.tsx
index efdb6977d..09735f700 100644
--- a/packages/velaux-ui/src/pages/ApplicationRevisionList/components/Header/index.tsx
+++ b/packages/velaux-ui/src/pages/ApplicationRevisionList/components/Header/index.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import i18n from '../../../../i18n';
 
 import type { EnvBinding } from '../../../../interface/application';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 
 interface Label {
   label: string;
diff --git a/packages/velaux-ui/src/pages/ApplicationRevisionList/components/List/index.tsx b/packages/velaux-ui/src/pages/ApplicationRevisionList/components/List/index.tsx
index 161977415..ef40fe253 100644
--- a/packages/velaux-ui/src/pages/ApplicationRevisionList/components/List/index.tsx
+++ b/packages/velaux-ui/src/pages/ApplicationRevisionList/components/List/index.tsx
@@ -13,7 +13,7 @@ import { ApplicationDiff } from '../../../../components/ApplicationDiff';
 import { If } from '../../../../components/If';
 import Item from '../../../../components/Item';
 import Permission from '../../../../components/Permission';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import type {
   ApplicationCompareRequest,
   ApplicationCompareResponse,
@@ -23,7 +23,7 @@ import type {
 } from '../../../../interface/application';
 import type { NameAlias } from '../../../../interface/env';
 import { momentDate, showAlias } from '../../../../utils/common';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 import { statusList } from '../../constants';
 
 type Props = {
diff --git a/packages/velaux-ui/src/pages/ApplicationRevisionList/index.tsx b/packages/velaux-ui/src/pages/ApplicationRevisionList/index.tsx
index 2248ac959..697bd583d 100644
--- a/packages/velaux-ui/src/pages/ApplicationRevisionList/index.tsx
+++ b/packages/velaux-ui/src/pages/ApplicationRevisionList/index.tsx
@@ -5,12 +5,8 @@ import type { Dispatch } from 'redux';
 
 import { listRevisions } from '../../api/application';
 import { If } from '../../components/If';
-import type {
-  ApplicationDetail,
-  EnvBinding,
-  ApplicationRevision,
-} from '../../interface/application';
-import locale from '../../utils/locale';
+import type { ApplicationDetail, EnvBinding, ApplicationRevision } from '../../interface/application';
+import { locale } from '../../utils/locale';
 
 import { ShowRevision } from './components/Detail';
 import Header from './components/Header';
@@ -86,11 +82,7 @@ class ApplicationRevisionList extends React.Component<Props, State> {
     });
   };
 
-  updateQuery = (updateQuery: {
-    isChangeEnv?: boolean;
-    isChangeStatus?: boolean;
-    value: string;
-  }) => {
+  updateQuery = (updateQuery: { isChangeEnv?: boolean; isChangeStatus?: boolean; value: string }) => {
     const { isChangeEnv, isChangeStatus, value } = updateQuery;
     if (isChangeEnv) {
       this.setState({ envName: value }, () => {
@@ -110,7 +102,7 @@ class ApplicationRevisionList extends React.Component<Props, State> {
       },
       () => {
         this.getRevisionList();
-      },
+      }
     );
   };
 
@@ -127,11 +119,7 @@ class ApplicationRevisionList extends React.Component<Props, State> {
         <Header
           envBinding={envbinding}
           statusList={statusList}
-          updateQuery={(params: {
-            isChangeEnv?: boolean;
-            isChangeStatus?: boolean;
-            value: string;
-          }) => {
+          updateQuery={(params: { isChangeEnv?: boolean; isChangeStatus?: boolean; value: string }) => {
             this.updateQuery(params);
           }}
         />
diff --git a/packages/velaux-ui/src/pages/ApplicationStatus/index.tsx b/packages/velaux-ui/src/pages/ApplicationStatus/index.tsx
index c54e36788..328b502d4 100644
--- a/packages/velaux-ui/src/pages/ApplicationStatus/index.tsx
+++ b/packages/velaux-ui/src/pages/ApplicationStatus/index.tsx
@@ -11,7 +11,7 @@ import {
   listApplicationServiceEndpoints,
 } from '../../api/observation';
 import { If } from '../../components/If';
-import Translation from '../../components/Translation';
+import { Translation } from '../../components/Translation';
 import i18n from '../../i18n';
 import type {
   ApplicationComponent,
@@ -27,7 +27,7 @@ import type { Target } from '../../interface/target';
 import type { LoginUserInfo } from '../../interface/user';
 import type { APIError } from '../../utils/errors';
 import { handleError } from '../../utils/errors';
-import locale from '../../utils/locale';
+import { locale } from '../../utils/locale';
 import { checkPermission } from '../../utils/permission';
 import Header from '../ApplicationInstanceList/components/Header';
 
diff --git a/packages/velaux-ui/src/pages/ApplicationWorkflowList/index.tsx b/packages/velaux-ui/src/pages/ApplicationWorkflowList/index.tsx
index 1ef5bea72..ff9b1dc43 100644
--- a/packages/velaux-ui/src/pages/ApplicationWorkflowList/index.tsx
+++ b/packages/velaux-ui/src/pages/ApplicationWorkflowList/index.tsx
@@ -8,11 +8,11 @@ import type { Dispatch } from 'redux';
 import { deleteWorkflow, listWorkflow } from '../../api/workflows';
 import { If } from '../../components/If';
 import Permission from '../../components/Permission';
-import Translation from '../../components/Translation';
+import { Translation } from '../../components/Translation';
 import i18n from '../../i18n';
 import type { ApplicationDetail, EnvBinding, Workflow } from '../../interface/application';
 import { momentDate } from '../../utils/common';
-import locale from '../../utils/locale';
+import { locale } from '../../utils/locale';
 
 type Props = {
   revisions: [];
diff --git a/packages/velaux-ui/src/pages/ApplicationWorkflowStatus/components/WorkflowRecord/index.tsx b/packages/velaux-ui/src/pages/ApplicationWorkflowStatus/components/WorkflowRecord/index.tsx
index 6cee3dace..d1632fae9 100644
--- a/packages/velaux-ui/src/pages/ApplicationWorkflowStatus/components/WorkflowRecord/index.tsx
+++ b/packages/velaux-ui/src/pages/ApplicationWorkflowStatus/components/WorkflowRecord/index.tsx
@@ -31,7 +31,7 @@ import {
 import Empty from '../../../../components/Empty';
 import { If } from '../../../../components/If';
 import PipelineGraph from '../../../../components/PipelineGraph';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import i18n from '../../../../i18n';
 import type { WorkflowStepBase, WorkflowStepInputs, WorkflowStepOutputs } from '../../../../interface/pipeline';
 import { convertAny, momentDate, timeDiff } from '../../../../utils/common';
diff --git a/packages/velaux-ui/src/pages/ApplicationWorkflowStatus/index.tsx b/packages/velaux-ui/src/pages/ApplicationWorkflowStatus/index.tsx
index 1a652490c..b3a2b68db 100644
--- a/packages/velaux-ui/src/pages/ApplicationWorkflowStatus/index.tsx
+++ b/packages/velaux-ui/src/pages/ApplicationWorkflowStatus/index.tsx
@@ -7,7 +7,7 @@ import { detailWorkflow, getEnvWorkflowRecord } from '../../api/workflows';
 import Empty from '../../components/Empty';
 import { If } from '../../components/If';
 import Permission from '../../components/Permission';
-import Translation from '../../components/Translation';
+import { Translation } from '../../components/Translation';
 import i18n from '../../i18n';
 import type {
   ApplicationDetail,
@@ -19,7 +19,7 @@ import type {
 } from '../../interface/application';
 import type { WorkflowStepBase } from '../../interface/pipeline';
 import { beautifyTime } from '../../utils/common';
-import locale from '../../utils/locale';
+import { locale } from '../../utils/locale';
 
 import ApplicationWorkflowRecord from './components/WorkflowRecord';
 
diff --git a/packages/velaux-ui/src/pages/ApplicationWorkflowStudio/components/CanarySetting/index.tsx b/packages/velaux-ui/src/pages/ApplicationWorkflowStudio/components/CanarySetting/index.tsx
index 0463f1571..0cc7654e3 100644
--- a/packages/velaux-ui/src/pages/ApplicationWorkflowStudio/components/CanarySetting/index.tsx
+++ b/packages/velaux-ui/src/pages/ApplicationWorkflowStudio/components/CanarySetting/index.tsx
@@ -5,7 +5,7 @@ import _ from 'lodash';
 import i18n from '../../../../i18n';
 import { Workflow, WorkflowMode } from '../../../../interface/application';
 import { WorkflowStep } from '../../../../interface/pipeline';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 import './index.less';
 import Item from '../../../../components/Item';
 import { DefinitionBase } from '../../../../interface/definitions';
diff --git a/packages/velaux-ui/src/pages/ApplicationWorkflowStudio/index.tsx b/packages/velaux-ui/src/pages/ApplicationWorkflowStudio/index.tsx
index ad7398a70..dc5285134 100644
--- a/packages/velaux-ui/src/pages/ApplicationWorkflowStudio/index.tsx
+++ b/packages/velaux-ui/src/pages/ApplicationWorkflowStudio/index.tsx
@@ -6,7 +6,7 @@ import type { Dispatch } from 'redux';
 
 import { detailWorkflow, getWorkflowDefinitions, updateWorkflow } from '../../api/workflows';
 import Item from '../../components/Item';
-import Translation from '../../components/Translation';
+import { Translation } from '../../components/Translation';
 import { WorkflowPrompt } from '../../components/WorkflowPrompt';
 import WorkflowStudio from '../../components/WorkflowStudio';
 import { WorkflowContext } from '../../context';
@@ -15,7 +15,7 @@ import type { ApplicationDetail, EnvBinding, Workflow, WorkflowMode } from '../.
 import type { DefinitionBase } from '../../interface/definitions';
 import type { WorkflowStep } from '../../interface/pipeline';
 import { showAlias } from '../../utils/common';
-import locale from '../../utils/locale';
+import { locale } from '../../utils/locale';
 
 import './index.less';
 import classNames from 'classnames';
diff --git a/packages/velaux-ui/src/pages/Cluster/components/AddClusterDialog/index.tsx b/packages/velaux-ui/src/pages/Cluster/components/AddClusterDialog/index.tsx
index 31026a75c..7ae1788b3 100644
--- a/packages/velaux-ui/src/pages/Cluster/components/AddClusterDialog/index.tsx
+++ b/packages/velaux-ui/src/pages/Cluster/components/AddClusterDialog/index.tsx
@@ -4,10 +4,10 @@ import { AiOutlineCloudUpload } from 'react-icons/ai';
 
 import { getClusterDetails, updateCluster } from '../../../../api/cluster';
 import DefinitionCode from '../../../../components/DefinitionCode';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import type { Cluster } from '../../../../interface/cluster';
 import { checkName } from '../../../../utils/common';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 const { Col, Row } = Grid;
 
 type Props = {
diff --git a/packages/velaux-ui/src/pages/Cluster/components/CardContent/index.tsx b/packages/velaux-ui/src/pages/Cluster/components/CardContent/index.tsx
index 9099dbf75..f1ce3abd5 100644
--- a/packages/velaux-ui/src/pages/Cluster/components/CardContent/index.tsx
+++ b/packages/velaux-ui/src/pages/Cluster/components/CardContent/index.tsx
@@ -5,10 +5,10 @@ import { Dropdown, Menu, Grid, Card, Dialog } from '@alifd/next';
 
 import kubernetesSvg from '../../../../assets/kubernetes.svg';
 import { If } from '../../../../components/If';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import type { Cluster } from '../../../../interface/cluster';
 import type { LoginUserInfo } from '../../../../interface/user';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 import { checkPermission } from '../../../../utils/permission';
 
 import { connect } from 'dva';
@@ -110,12 +110,7 @@ class CardContent extends React.Component<Props, State> {
                   <Row className="content-title">
                     <Col span={16} className="font-size-16 color1A1A1A">
                       <If condition={dashboardURL}>
-                        <a
-                          title={name}
-                          target="_blank"
-                          href={dashboardURL}
-                          rel="noopener noreferrer"
-                        >
+                        <a title={name} target="_blank" href={dashboardURL} rel="noopener noreferrer">
                           {showName}
                         </a>
                       </If>
diff --git a/packages/velaux-ui/src/pages/Cluster/components/CloudServiceDialog/index.tsx b/packages/velaux-ui/src/pages/Cluster/components/CloudServiceDialog/index.tsx
index e08f4fc8a..9a51bfc21 100644
--- a/packages/velaux-ui/src/pages/Cluster/components/CloudServiceDialog/index.tsx
+++ b/packages/velaux-ui/src/pages/Cluster/components/CloudServiceDialog/index.tsx
@@ -4,10 +4,10 @@ import React from 'react';
 import { getCloudClustersList } from '../../../../api/cluster';
 import { If } from '../../../../components/If';
 import Permission from '../../../../components/Permission';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import { ACKClusterStatus } from '../../../../utils/common';
 import { handleError } from '../../../../utils/errors';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 
 type Props = {
   visible: boolean;
diff --git a/packages/velaux-ui/src/pages/Cluster/index.tsx b/packages/velaux-ui/src/pages/Cluster/index.tsx
index ef730f470..70d9a506d 100644
--- a/packages/velaux-ui/src/pages/Cluster/index.tsx
+++ b/packages/velaux-ui/src/pages/Cluster/index.tsx
@@ -5,9 +5,9 @@ import React, { Fragment } from 'react';
 import { getEnabledAddons, getAddonsList } from '../../api/addons';
 import { deleteCluster } from '../../api/cluster';
 import { If } from '../../components/If';
-import Title from '../../components/ListTitle';
+import { ListTitle } from '../../components/ListTitle';
 import Permission from '../../components/Permission';
-import Translation from '../../components/Translation';
+import { Translation } from '../../components/Translation';
 import type { Addon } from '../../interface/addon';
 
 import AddClusterDialog from './components/AddClusterDialog/index';
@@ -149,7 +149,7 @@ class Cluster extends React.Component<Props, State> {
     } = this.state;
     return (
       <div>
-        <Title
+        <ListTitle
           title="Clusters"
           subTitle="Setup Kubernetes clusters by adding an existing one or creating a new one via cloud provider"
           extButtons={[
diff --git a/packages/velaux-ui/src/pages/Configs/components/CreateConfigDialog/index.tsx b/packages/velaux-ui/src/pages/Configs/components/CreateConfigDialog/index.tsx
index 75d40f061..509396db6 100644
--- a/packages/velaux-ui/src/pages/Configs/components/CreateConfigDialog/index.tsx
+++ b/packages/velaux-ui/src/pages/Configs/components/CreateConfigDialog/index.tsx
@@ -8,12 +8,12 @@ import { createConfig, detailConfig, detailTemplate, listTemplates, updateConfig
 import DrawerWithFooter from '../../../../components/Drawer';
 import { If } from '../../../../components/If';
 import Permission from '../../../../components/Permission';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import UISchema from '../../../../components/UISchema';
 import i18n from '../../../../i18n';
 import type { Config, ConfigTemplate, ConfigTemplateDetail, NamespacedName } from '../../../../interface/configs';
 import { checkName } from '../../../../utils/common';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 
 type Props = {
   visible: boolean;
diff --git a/packages/velaux-ui/src/pages/Configs/index.tsx b/packages/velaux-ui/src/pages/Configs/index.tsx
index daff5bb4b..b7261a772 100644
--- a/packages/velaux-ui/src/pages/Configs/index.tsx
+++ b/packages/velaux-ui/src/pages/Configs/index.tsx
@@ -5,11 +5,11 @@ import React, { Component, Fragment } from 'react';
 import { getConfigs, deleteConfig } from '../../api/config';
 import { If } from '../../components/If';
 import Permission from '../../components/Permission';
-import Translation from '../../components/Translation';
+import { Translation } from '../../components/Translation';
 import type { ConfigTemplate, Config } from '../../interface/configs';
 import type { LoginUserInfo } from '../../interface/user';
 import { momentDate } from '../../utils/common';
-import locale from '../../utils/locale';
+import { locale } from '../../utils/locale';
 import { getMatchParamObj } from '../../utils/utils';
 import './index.less';
 
diff --git a/packages/velaux-ui/src/pages/Definitions/index.tsx b/packages/velaux-ui/src/pages/Definitions/index.tsx
index 4eb096ef7..2f615c3da 100644
--- a/packages/velaux-ui/src/pages/Definitions/index.tsx
+++ b/packages/velaux-ui/src/pages/Definitions/index.tsx
@@ -6,13 +6,13 @@ import React, { Component, Fragment } from 'react';
 
 import { getDefinitionsList, updateDefinitionStatus } from '../../api/definitions';
 import Permission from '../../components/Permission';
-import Translation from '../../components/Translation';
+import { Translation } from '../../components/Translation';
 import type { DefinitionBase } from '../../interface/definitions';
 
 // import { momentDate } from '../../utils/common';
 
 import type { LoginUserInfo } from '../../interface/user';
-import locale from '../../utils/locale';
+import { locale } from '../../utils/locale';
 import { getMatchParamObj } from '../../utils/utils';
 
 import SelectSearch from './components/SelectSearch';
diff --git a/packages/velaux-ui/src/pages/EnvPage/components/EnvDialog/index.tsx b/packages/velaux-ui/src/pages/EnvPage/components/EnvDialog/index.tsx
index ac622e2cb..70e6a3aaa 100644
--- a/packages/velaux-ui/src/pages/EnvPage/components/EnvDialog/index.tsx
+++ b/packages/velaux-ui/src/pages/EnvPage/components/EnvDialog/index.tsx
@@ -1,15 +1,4 @@
-import {
-  Message,
-  Grid,
-  Dialog,
-  Form,
-  Input,
-  Field,
-  Select,
-  Loading,
-  Button,
-  Table,
-} from '@alifd/next';
+import { Message, Grid, Dialog, Form, Input, Field, Select, Loading, Button, Table } from '@alifd/next';
 import React from 'react';
 
 import { getClusterList } from '../../../../api/cluster';
@@ -18,7 +7,7 @@ import { listNamespaces } from '../../../../api/observation';
 import { getProjectTargetList } from '../../../../api/project';
 import { If } from '../../../../components/If';
 import Permission from '../../../../components/Permission';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import i18n from '../../../../i18n';
 import type { Cluster } from '../../../../interface/cluster';
 import type { Env } from '../../../../interface/env';
@@ -26,7 +15,7 @@ import type { Project } from '../../../../interface/project';
 import type { Target } from '../../../../interface/target';
 import type { LoginUserInfo } from '../../../../interface/user';
 import { checkName } from '../../../../utils/common';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 import { checkPermission } from '../../../../utils/permission';
 import TargetDialog from '../../../TargetList/components/TargetDialog';
 
@@ -189,9 +178,7 @@ class EnvDialog extends React.Component<Props, State> {
   convertTarget = () => {
     const { targets } = this.state;
     return (targets || []).map((target: Target) => ({
-      label: `${target.alias || target.name}(${target.cluster?.clusterName}/${
-        target.cluster?.namespace
-      })`,
+      label: `${target.alias || target.name}(${target.cluster?.clusterName}/${target.cluster?.namespace})`,
       value: target.name,
     }));
   };
@@ -231,11 +218,7 @@ class EnvDialog extends React.Component<Props, State> {
     const projectOptions: Array<{ label: string; value: string }> = [];
     (projects || []).map((project) => {
       if (
-        checkPermission(
-          { resource: `project:${project.name}/environment:*`, action: 'create' },
-          project.name,
-          userInfo,
-        )
+        checkPermission({ resource: `project:${project.name}/environment:*`, action: 'create' }, project.name, userInfo)
       ) {
         projectOptions.push({
           label: project.alias ? `${project.alias}(${project.name})` : project.name,
@@ -248,13 +231,7 @@ class EnvDialog extends React.Component<Props, State> {
         <Dialog
           v2
           locale={locale().Dialog}
-          title={
-            isEdit ? (
-              <Translation>Edit Environment</Translation>
-            ) : (
-              <Translation>New Environment</Translation>
-            )
-          }
+          title={isEdit ? <Translation>Edit Environment</Translation> : <Translation>New Environment</Translation>}
           autoFocus={true}
           overflowScroll={true}
           visible={visible}
@@ -284,9 +261,7 @@ class EnvDialog extends React.Component<Props, State> {
                           required: true,
                           pattern: checkName,
                           message: (
-                            <Translation>
-                              Please enter a valid name contains only alphabetical words
-                            </Translation>
+                            <Translation>Please enter a valid name contains only alphabetical words</Translation>
                           ),
                         },
                       ],
@@ -318,9 +293,7 @@ class EnvDialog extends React.Component<Props, State> {
                   <Input
                     name="namespace"
                     disabled={isEdit}
-                    placeholder={i18n
-                      .t('By default, it is the same as the Environment name')
-                      .toString()}
+                    placeholder={i18n.t('By default, it is the same as the Environment name').toString()}
                     {...init('namespace', {
                       rules: [
                         {
@@ -342,9 +315,7 @@ class EnvDialog extends React.Component<Props, State> {
                         {
                           maxLength: 256,
                           message: (
-                            <Translation>
-                              Enter a description that contains less than 256 characters
-                            </Translation>
+                            <Translation>Enter a description that contains less than 256 characters</Translation>
                           ),
                         },
                       ],
@@ -406,11 +377,7 @@ class EnvDialog extends React.Component<Props, State> {
                   project={this.field.getValue('project')}
                 >
                   <Col className="flexright">
-                    <Button
-                      onClick={this.showNewTarget}
-                      type="secondary"
-                      style={{ marginBottom: '16px' }}
-                    >
+                    <Button onClick={this.showNewTarget} type="secondary" style={{ marginBottom: '16px' }}>
                       <Translation>New Target</Translation>
                     </Button>
                   </Col>
@@ -429,14 +396,8 @@ class EnvDialog extends React.Component<Props, State> {
                         return t.name;
                       }}
                     />
-                    <Table.Column
-                      dataIndex={'cluster.clusterName'}
-                      title={i18n.t('Cluster').toString()}
-                    />
-                    <Table.Column
-                      dataIndex={'cluster.namespace'}
-                      title={i18n.t('Namespace').toString()}
-                    />
+                    <Table.Column dataIndex={'cluster.clusterName'} title={i18n.t('Cluster').toString()} />
+                    <Table.Column dataIndex={'cluster.namespace'} title={i18n.t('Namespace').toString()} />
                   </Table>
                 </Col>
               </Row>
diff --git a/packages/velaux-ui/src/pages/EnvPage/components/List/index.tsx b/packages/velaux-ui/src/pages/EnvPage/components/List/index.tsx
index 3f162a918..972e48e20 100644
--- a/packages/velaux-ui/src/pages/EnvPage/components/List/index.tsx
+++ b/packages/velaux-ui/src/pages/EnvPage/components/List/index.tsx
@@ -7,12 +7,12 @@ import { AiFillDelete, AiFillSetting } from 'react-icons/ai';
 import { deleteEnv } from '../../../../api/env';
 import { If } from '../../../../components/If';
 import Permission from '../../../../components/Permission';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import './index.less';
 import type { Env, NameAlias } from '../../../../interface/env';
 import type { Project } from '../../../../interface/project';
 import type { LoginUserInfo } from '../../../../interface/user';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 import { checkPermission } from '../../../../utils/permission';
 const { Group: TagGroup } = Tag;
 
diff --git a/packages/velaux-ui/src/pages/EnvPage/components/Namespace/index.tsx b/packages/velaux-ui/src/pages/EnvPage/components/Namespace/index.tsx
index 8718a62f1..173e6c863 100644
--- a/packages/velaux-ui/src/pages/EnvPage/components/Namespace/index.tsx
+++ b/packages/velaux-ui/src/pages/EnvPage/components/Namespace/index.tsx
@@ -3,8 +3,8 @@ import React from 'react';
 
 import { createClusterNamespace } from '../../../../api/cluster';
 import { If } from '../../../../components/If';
-import Translation from '../../../../components/Translation';
-import locale from '../../../../utils/locale';
+import { Translation } from '../../../../components/Translation';
+import { locale } from '../../../../utils/locale';
 
 type Props = {
   cluster?: string;
@@ -88,11 +88,7 @@ class Namespace extends React.Component<Props, State> {
               value={value}
             />
             <If condition={!disableNew}>
-              <Button
-                className="cluster-option-btn"
-                type="secondary"
-                onClick={this.openNamespaceInput}
-              >
+              <Button className="cluster-option-btn" type="secondary" onClick={this.openNamespaceInput}>
                 <Translation>New</Translation>
               </Button>
             </If>
@@ -100,16 +96,8 @@ class Namespace extends React.Component<Props, State> {
         </If>
         <If condition={showNameSpaceInput}>
           <div className="cluster-container">
-            <Input
-              onChange={(v) => this.setState({ createNamespace: v })}
-              className="cluster-params-input"
-            />
-            <Button
-              loading={loading}
-              className="cluster-option-btn"
-              type="secondary"
-              onClick={this.createNamespace}
-            >
+            <Input onChange={(v) => this.setState({ createNamespace: v })} className="cluster-params-input" />
+            <Button loading={loading} className="cluster-option-btn" type="secondary" onClick={this.createNamespace}>
               <Translation>Submit</Translation>
             </Button>
           </div>
diff --git a/packages/velaux-ui/src/pages/EnvPage/index.tsx b/packages/velaux-ui/src/pages/EnvPage/index.tsx
index 8e681e062..090845e55 100644
--- a/packages/velaux-ui/src/pages/EnvPage/index.tsx
+++ b/packages/velaux-ui/src/pages/EnvPage/index.tsx
@@ -3,12 +3,12 @@ import { connect } from 'dva';
 import React from 'react';
 
 import { If } from '../../components/If';
-import ListTitle from '../../components/ListTitle';
+import { ListTitle } from '../../components/ListTitle';
 import Permission from '../../components/Permission';
-import Translation from '../../components/Translation';
+import { Translation } from '../../components/Translation';
 import type { Env } from '../../interface/env';
 import type { LoginUserInfo } from '../../interface/user';
-import locale from '../../utils/locale';
+import { locale } from '../../utils/locale';
 
 import EnvDialog from './components/EnvDialog';
 import TableList from './components/List';
@@ -71,7 +71,7 @@ class EnvList extends React.Component<Props, State> {
       },
       () => {
         this.getEnvList();
-      },
+      }
     );
   };
 
@@ -101,7 +101,7 @@ class EnvList extends React.Component<Props, State> {
       },
       () => {
         this.getEnvList();
-      },
+      }
     );
   };
 
diff --git a/packages/velaux-ui/src/pages/Login/index.tsx b/packages/velaux-ui/src/pages/Login/index.tsx
index dfbb0706b..58b07c351 100644
--- a/packages/velaux-ui/src/pages/Login/index.tsx
+++ b/packages/velaux-ui/src/pages/Login/index.tsx
@@ -6,7 +6,7 @@ import LogoWhite from '../../assets/kubevela-logo-white.png';
 import Logo from '../../assets/kubevela-logo.png';
 import { If } from '../../components/If';
 import SwitchLanguage from '../../components/SwitchButton/index';
-import Translation from '../../components/Translation';
+import { Translation } from '../../components/Translation';
 import i18n from '../../i18n';
 import './index.less';
 import type { DexConfig } from '../../interface/system';
diff --git a/packages/velaux-ui/src/pages/MyProjectList/index.tsx b/packages/velaux-ui/src/pages/MyProjectList/index.tsx
index 246d1230c..8b022111e 100644
--- a/packages/velaux-ui/src/pages/MyProjectList/index.tsx
+++ b/packages/velaux-ui/src/pages/MyProjectList/index.tsx
@@ -3,13 +3,13 @@ import { Link } from 'dva/router';
 import React, { Fragment, Component } from 'react';
 
 import { deleteProject } from '../../api/project';
-import Title from '../../components/ListTitle';
+import { ListTitle as Title } from '../../components/ListTitle';
 import Permission from '../../components/Permission';
-import Translation from '../../components/Translation';
+import { Translation } from '../../components/Translation';
 import type { NameAlias } from '../../interface/env';
 import type { Project } from '../../interface/project';
 import { momentDate } from '../../utils/common';
-import locale from '../../utils/locale';
+import { locale } from '../../utils/locale';
 import { connect } from 'dva';
 import { LoginUserInfo } from '../../interface/user';
 
diff --git a/packages/velaux-ui/src/pages/PipelineListPage/components/CreatePipeline/index.tsx b/packages/velaux-ui/src/pages/PipelineListPage/components/CreatePipeline/index.tsx
index 54431d232..f733aa5e2 100644
--- a/packages/velaux-ui/src/pages/PipelineListPage/components/CreatePipeline/index.tsx
+++ b/packages/velaux-ui/src/pages/PipelineListPage/components/CreatePipeline/index.tsx
@@ -4,25 +4,16 @@ import * as yaml from 'js-yaml';
 import React from 'react';
 import { v4 as uuid } from 'uuid';
 
-import {
-  createPipeline,
-  createPipelineContext,
-  loadPipeline,
-  updatePipeline,
-} from '../../../../api/pipeline';
+import { createPipeline, createPipelineContext, loadPipeline, updatePipeline } from '../../../../api/pipeline';
 import type DefinitionCode from '../../../../components/DefinitionCode';
 import DrawerWithFooter from '../../../../components/Drawer';
 import { If } from '../../../../components/If';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import i18n from '../../../../i18n';
-import type {
-  PipelineBase,
-  PipelineDetail,
-  PipelineListItem,
-} from '../../../../interface/pipeline';
+import type { PipelineBase, PipelineDetail, PipelineListItem } from '../../../../interface/pipeline';
 import type { LoginUserInfo } from '../../../../interface/user';
 import { checkName } from '../../../../utils/common';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 import { checkPermission } from '../../../../utils/permission';
 
 import { templates } from './pipeline-template';
@@ -62,19 +53,17 @@ class CreatePipeline extends React.Component<PipelineProps, State> {
   componentDidMount() {
     const { pipeline } = this.props;
     if (pipeline) {
-      loadPipeline({ projectName: pipeline.project.name, pipelineName: pipeline.name }).then(
-        (res: PipelineDetail) => {
-          this.field.setValues({
-            name: res.name,
-            project: res.project.name,
-            alias: res.alias,
-            description: res.description,
-            steps: yaml.dump(res.spec.steps),
-            stepMode: res.spec.mode?.steps,
-            subStepMode: res.spec.mode?.subSteps,
-          });
-        },
-      );
+      loadPipeline({ projectName: pipeline.project.name, pipelineName: pipeline.name }).then((res: PipelineDetail) => {
+        this.field.setValues({
+          name: res.name,
+          project: res.project.name,
+          alias: res.alias,
+          description: res.description,
+          steps: yaml.dump(res.spec.steps),
+          stepMode: res.spec.mode?.steps,
+          subStepMode: res.spec.mode?.subSteps,
+        });
+      });
     }
   }
 
@@ -195,11 +184,7 @@ class CreatePipeline extends React.Component<PipelineProps, State> {
     const projectOptions: Array<{ label: string; value: string }> = [];
     (userInfo?.projects || []).map((project) => {
       if (
-        checkPermission(
-          { resource: `project:${project.name}/pipeline:*`, action: 'create' },
-          project.name,
-          userInfo,
-        )
+        checkPermission({ resource: `project:${project.name}/pipeline:*`, action: 'create' }, project.name, userInfo)
       ) {
         if (project.name === 'default') {
           defaultProject = project.name;
diff --git a/packages/velaux-ui/src/pages/PipelineListPage/components/PipelineClone/index.tsx b/packages/velaux-ui/src/pages/PipelineListPage/components/PipelineClone/index.tsx
index cd519fea9..5043298d5 100644
--- a/packages/velaux-ui/src/pages/PipelineListPage/components/PipelineClone/index.tsx
+++ b/packages/velaux-ui/src/pages/PipelineListPage/components/PipelineClone/index.tsx
@@ -2,19 +2,14 @@ import { Dialog, Field, Form, Grid, Input, Loading, Message, Select } from '@ali
 import { connect } from 'dva';
 import React from 'react';
 
-import {
-  createPipeline,
-  createPipelineContext,
-  listPipelineContexts,
-  loadPipeline,
-} from '../../../../api/pipeline';
+import { createPipeline, createPipelineContext, listPipelineContexts, loadPipeline } from '../../../../api/pipeline';
 import { If } from '../../../../components/If';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import i18n from '../../../../i18n';
 import type { PipelineListItem, PipelineDetail, KeyValue } from '../../../../interface/pipeline';
 import type { LoginUserInfo } from '../../../../interface/user';
 import { checkName } from '../../../../utils/common';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 import { checkPermission } from '../../../../utils/permission';
 
 const FormItem = Form.Item;
@@ -121,11 +116,7 @@ class ClonePipeline extends React.Component<PipelineProps, State> {
     const projectOptions: Array<{ label: string; value: string }> = [];
     (userInfo?.projects || []).map((project) => {
       if (
-        checkPermission(
-          { resource: `project:${project.name}/pipeline:*`, action: 'create' },
-          project.name,
-          userInfo,
-        )
+        checkPermission({ resource: `project:${project.name}/pipeline:*`, action: 'create' }, project.name, userInfo)
       ) {
         projectOptions.push({
           label: project.alias ? `${project.alias}(${project.name})` : project.name,
@@ -133,9 +124,7 @@ class ClonePipeline extends React.Component<PipelineProps, State> {
         });
       }
     });
-    const message = contexts
-      ? i18n.t('Includes') + ` ${Object.keys(contexts).length} ` + i18n.t('contexts')
-      : '';
+    const message = contexts ? i18n.t('Includes') + ` ${Object.keys(contexts).length} ` + i18n.t('contexts') : '';
     return (
       <Dialog
         onOk={this.onSubmit}
@@ -151,10 +140,7 @@ class ClonePipeline extends React.Component<PipelineProps, State> {
       >
         <Loading visible={loading || loadingContext}>
           <If condition={pipelineDetail && contexts}>
-            <Message
-              type="success"
-              title={i18n.t('Pipeline loaded successfully and is ready to clone.') + message}
-            />
+            <Message type="success" title={i18n.t('Pipeline loaded successfully and is ready to clone.') + message} />
             <Form field={this.field}>
               <Row wrap>
                 <Col span={8} style={{ padding: '0 8px' }}>
diff --git a/packages/velaux-ui/src/pages/PipelineListPage/components/SelectSearch/index.tsx b/packages/velaux-ui/src/pages/PipelineListPage/components/SelectSearch/index.tsx
index d864085dc..ca6639978 100644
--- a/packages/velaux-ui/src/pages/PipelineListPage/components/SelectSearch/index.tsx
+++ b/packages/velaux-ui/src/pages/PipelineListPage/components/SelectSearch/index.tsx
@@ -6,7 +6,7 @@ import type { ShowMode } from '../..';
 import { If } from '../../../../components/If';
 import i18n from '../../../../i18n';
 import type { Project } from '../../../../interface/project';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 import { AiOutlineSearch } from 'react-icons/ai';
 import { HiOutlineRefresh } from 'react-icons/hi';
 const { Row, Col } = Grid;
diff --git a/packages/velaux-ui/src/pages/PipelineListPage/components/ViewRuns/index.tsx b/packages/velaux-ui/src/pages/PipelineListPage/components/ViewRuns/index.tsx
index f2609f711..1ca122fd8 100644
--- a/packages/velaux-ui/src/pages/PipelineListPage/components/ViewRuns/index.tsx
+++ b/packages/velaux-ui/src/pages/PipelineListPage/components/ViewRuns/index.tsx
@@ -7,11 +7,11 @@ import { AiFillDelete } from 'react-icons/ai';
 import { deletePipelineRun, loadPipelineRuns } from '../../../../api/pipeline';
 import { If } from '../../../../components/If';
 import Permission from '../../../../components/Permission';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import i18n from '../../../../i18n';
 import type { PipelineListItem, PipelineRunBriefing } from '../../../../interface/pipeline';
 import { momentDate, timeDiff } from '../../../../utils/common';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 
 export interface ViewRunsProps {
   pipeline: PipelineListItem;
diff --git a/packages/velaux-ui/src/pages/PipelineListPage/index.tsx b/packages/velaux-ui/src/pages/PipelineListPage/index.tsx
index 432122b7a..47a7c56c0 100644
--- a/packages/velaux-ui/src/pages/PipelineListPage/index.tsx
+++ b/packages/velaux-ui/src/pages/PipelineListPage/index.tsx
@@ -1,4 +1,4 @@
-import Title from '../../components/ListTitle';
+import { ListTitle as Title } from '../../components/ListTitle';
 
 import { Loading, Button, Table, Dialog, Message, Balloon } from '@alifd/next';
 import { connect } from 'dva';
@@ -15,14 +15,14 @@ import './index.less';
 import { If } from '../../components/If';
 import Permission from '../../components/Permission';
 import RunPipeline from '../../components/RunPipeline';
-import Translation from '../../components/Translation';
+import { Translation } from '../../components/Translation';
 import i18n from '../../i18n';
 import type { AddonBaseStatus } from '../../interface/addon';
 import type { NameAlias } from '../../interface/env';
 import type { PipelineBase, PipelineListItem, PipelineRun, RunStateInfo } from '../../interface/pipeline';
 import type { LoginUserInfo } from '../../interface/user';
 import { beautifyTime, momentDate } from '../../utils/common';
-import locale from '../../utils/locale';
+import { locale } from '../../utils/locale';
 import RunStatusIcon from '../PipelineRunPage/components/RunStatusIcon';
 
 import CreatePipeline from './components/CreatePipeline';
diff --git a/packages/velaux-ui/src/pages/PipelineRunPage/components/Header/index.tsx b/packages/velaux-ui/src/pages/PipelineRunPage/components/Header/index.tsx
index 8f351b93c..c0d4e8d17 100644
--- a/packages/velaux-ui/src/pages/PipelineRunPage/components/Header/index.tsx
+++ b/packages/velaux-ui/src/pages/PipelineRunPage/components/Header/index.tsx
@@ -9,11 +9,11 @@ import { TiWarningOutline } from 'react-icons/ti';
 import { resumePipelineRun, runPipeline, stopPipelineRun, terminatePipelineRun } from '../../../../api/pipeline';
 import { If } from '../../../../components/If';
 import Permission from '../../../../components/Permission';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import i18n from '../../../../i18n';
 import type { PipelineDetail, PipelineRunBase, PipelineRunStatus } from '../../../../interface/pipeline';
 import { momentDate, timeDiff } from '../../../../utils/common';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 import RunStatusIcon from '../RunStatusIcon';
 import { Breadcrumb } from '../../../../components/Breadcrumb';
 
diff --git a/packages/velaux-ui/src/pages/PipelineRunPage/index.tsx b/packages/velaux-ui/src/pages/PipelineRunPage/index.tsx
index dcb80d6fe..385ef45c0 100644
--- a/packages/velaux-ui/src/pages/PipelineRunPage/index.tsx
+++ b/packages/velaux-ui/src/pages/PipelineRunPage/index.tsx
@@ -16,7 +16,7 @@ import {
 import Empty from '../../components/Empty';
 import { If } from '../../components/If';
 import PipelineGraph from '../../components/PipelineGraph';
-import Translation from '../../components/Translation';
+import { Translation } from '../../components/Translation';
 import type { WorkflowStepStatus } from '../../interface/application';
 import type {
   PipelineDetail,
diff --git a/packages/velaux-ui/src/pages/PipelineStudio/index.tsx b/packages/velaux-ui/src/pages/PipelineStudio/index.tsx
index bb995f8a5..86096805e 100644
--- a/packages/velaux-ui/src/pages/PipelineStudio/index.tsx
+++ b/packages/velaux-ui/src/pages/PipelineStudio/index.tsx
@@ -12,7 +12,7 @@ import { loadPipeline, updatePipeline } from '../../api/pipeline';
 import { getWorkflowDefinitions } from '../../api/workflows';
 import { If } from '../../components/If';
 import RunPipeline from '../../components/RunPipeline';
-import Translation from '../../components/Translation';
+import { Translation } from '../../components/Translation';
 import { WorkflowPrompt } from '../../components/WorkflowPrompt';
 import WorkflowStudio from '../../components/WorkflowStudio';
 import { WorkflowYAML } from '../../components/WorkflowYAML';
@@ -21,7 +21,7 @@ import i18n from '../../i18n';
 import type { WorkflowMode } from '../../interface/application';
 import type { DefinitionBase } from '../../interface/definitions';
 import type { PipelineDetail, WorkflowStep } from '../../interface/pipeline';
-import locale from '../../utils/locale';
+import { locale } from '../../utils/locale';
 import { WorkflowModeOptions } from '../ApplicationWorkflowStudio';
 
 const { Row, Col } = Grid;
diff --git a/packages/velaux-ui/src/pages/ProjectApplications/components/SelectSearch/index.tsx b/packages/velaux-ui/src/pages/ProjectApplications/components/SelectSearch/index.tsx
index ac603b099..64f1cf2aa 100644
--- a/packages/velaux-ui/src/pages/ProjectApplications/components/SelectSearch/index.tsx
+++ b/packages/velaux-ui/src/pages/ProjectApplications/components/SelectSearch/index.tsx
@@ -2,11 +2,11 @@ import { Grid, Icon, Select, Input, Button } from '@alifd/next';
 import React, { Fragment } from 'react';
 
 import Permission from '../../../../components/Permission';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import i18n from '../../../../i18n';
 import type { Env } from '../../../../interface/env';
 import type { Target } from '../../../../interface/target';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 import './index.less';
 import type { ShowMode } from '../../../ApplicationList';
 
@@ -76,15 +76,17 @@ class SelectSearch extends React.Component<Props, State> {
 
   handleChangeLabel(value: string[]) {
     const { setLabelValue } = this.props;
-    let label = value? value:[]
-    setLabelValue(label)
-    this.setState({
-      labelValue: label,
-    },
-    () => {
-      this.getApplications();
-    });
-  };
+    let label = value ? value : [];
+    setLabelValue(label);
+    this.setState(
+      {
+        labelValue: label,
+      },
+      () => {
+        this.getApplications();
+      }
+    );
+  }
 
   handleClickSearch = () => {
     this.getApplications();
diff --git a/packages/velaux-ui/src/pages/ProjectMembers/components/MemberDialog/index.tsx b/packages/velaux-ui/src/pages/ProjectMembers/components/MemberDialog/index.tsx
index 1b7e5e12a..fb364ce5e 100644
--- a/packages/velaux-ui/src/pages/ProjectMembers/components/MemberDialog/index.tsx
+++ b/packages/velaux-ui/src/pages/ProjectMembers/components/MemberDialog/index.tsx
@@ -3,11 +3,11 @@ import React from 'react';
 
 import { createProjectUsers, updateProjectUser } from '../../../../api/project';
 import DrawerWithFooter from '../../../../components/Drawer';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import i18n from '../../../../i18n';
 import type { ProjectMember, ProjectRoleBase } from '../../../../interface/project';
 import { checkName } from '../../../../utils/common';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 import { getSelectLabel } from '../../../../utils/utils';
 
 type Props = {
@@ -147,11 +147,7 @@ class MemberDialog extends React.Component<Props, State> {
           <Form {...formItemLayout} field={this.field}>
             <Row>
               <Col span={24} style={{ padding: '0 8px' }}>
-                <FormItem
-                  label={<Translation>Username</Translation>}
-                  labelTextAlign="left"
-                  required
-                >
+                <FormItem label={<Translation>Username</Translation>} labelTextAlign="left" required>
                   <Input
                     name="userName"
                     placeholder={i18n.t('Please enter').toString()}
diff --git a/packages/velaux-ui/src/pages/ProjectMembers/index.tsx b/packages/velaux-ui/src/pages/ProjectMembers/index.tsx
index 79e5dfb08..c94c9890e 100644
--- a/packages/velaux-ui/src/pages/ProjectMembers/index.tsx
+++ b/packages/velaux-ui/src/pages/ProjectMembers/index.tsx
@@ -4,10 +4,10 @@ import React, { Component, Fragment } from 'react';
 import { getProjectRoles, getProjectUsers, deleteProjectUser } from '../../api/project';
 import { If } from '../../components/If';
 import Permission from '../../components/Permission';
-import Translation from '../../components/Translation';
+import { Translation } from '../../components/Translation';
 import type { ProjectMember, ProjectRoleBase } from '../../interface/project';
 import { momentDate } from '../../utils/common';
-import locale from '../../utils/locale';
+import { locale } from '../../utils/locale';
 import './index.less';
 
 import MemberDialog from './components/MemberDialog';
diff --git a/packages/velaux-ui/src/pages/ProjectPipelines/index.tsx b/packages/velaux-ui/src/pages/ProjectPipelines/index.tsx
index c30779294..9c5227c3a 100644
--- a/packages/velaux-ui/src/pages/ProjectPipelines/index.tsx
+++ b/packages/velaux-ui/src/pages/ProjectPipelines/index.tsx
@@ -9,17 +9,17 @@ import type { Dispatch } from 'redux';
 
 import { deletePipeline, listPipelines } from '../../api/pipeline';
 import { If } from '../../components/If';
-import Title from '../../components/ListTitle';
+import { ListTitle as Title } from '../../components/ListTitle';
 import Permission from '../../components/Permission';
 import RunPipeline from '../../components/RunPipeline';
-import Translation from '../../components/Translation';
+import { Translation } from '../../components/Translation';
 import i18n from '../../i18n';
 import type { AddonBaseStatus } from '../../interface/addon';
 import type { NameAlias } from '../../interface/env';
 import type { PipelineBase, PipelineListItem, PipelineRun, RunStateInfo } from '../../interface/pipeline';
 import type { LoginUserInfo } from '../../interface/user';
 import { beautifyTime, momentDate } from '../../utils/common';
-import locale from '../../utils/locale';
+import { locale } from '../../utils/locale';
 import CreatePipeline from '../PipelineListPage/components/CreatePipeline';
 import ClonePipeline from '../PipelineListPage/components/PipelineClone';
 import SelectSearch from '../PipelineListPage/components/SelectSearch';
diff --git a/packages/velaux-ui/src/pages/ProjectRoles/components/Menu/index.tsx b/packages/velaux-ui/src/pages/ProjectRoles/components/Menu/index.tsx
index c3bc7dbef..07d0a5e14 100644
--- a/packages/velaux-ui/src/pages/ProjectRoles/components/Menu/index.tsx
+++ b/packages/velaux-ui/src/pages/ProjectRoles/components/Menu/index.tsx
@@ -3,7 +3,7 @@ import React, { Component, Fragment } from 'react';
 import { AiOutlineDelete } from 'react-icons/ai';
 
 import Permission from '../../../../components/Permission';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import type { ProjectRoleBase } from '../../../../interface/project';
 import './index.less';
 
diff --git a/packages/velaux-ui/src/pages/ProjectRoles/components/ProjectPermPoliciesDetail/index.tsx b/packages/velaux-ui/src/pages/ProjectRoles/components/ProjectPermPoliciesDetail/index.tsx
index bbc017e84..d61099272 100644
--- a/packages/velaux-ui/src/pages/ProjectRoles/components/ProjectPermPoliciesDetail/index.tsx
+++ b/packages/velaux-ui/src/pages/ProjectRoles/components/ProjectPermPoliciesDetail/index.tsx
@@ -5,7 +5,7 @@ import { createProjectRoles, updateProjectRoles } from '../../../../api/project'
 import Empty from '../../../../components/Empty';
 import { If } from '../../../../components/If';
 import Permission from '../../../../components/Permission';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import i18n from '../../../../i18n';
 import type { ProjectRoleBase } from '../../../../interface/project';
 import type { PermissionBase } from '../../../../interface/user';
@@ -115,10 +115,7 @@ class ProjectPermPoliciesDetail extends Component<Props, State> {
     const name = this.field.getValue('name');
     if (isCreateProjectRoles) {
       return (
-        <Permission
-          request={{ resource: `project:${projectName}/role:*`, action: 'create' }}
-          project={projectName}
-        >
+        <Permission request={{ resource: `project:${projectName}/role:*`, action: 'create' }} project={projectName}>
           <Button className="create-auth-btn" type="primary" onClick={this.onSubmit}>
             <Translation>{'Create'}</Translation>
           </Button>
@@ -193,11 +190,7 @@ class ProjectPermPoliciesDetail extends Component<Props, State> {
                   </FormItem>
                 </Col>
                 <Col span={12} style={{ padding: '16px 16px 0 30px' }}>
-                  <FormItem
-                    label={<Translation>Alias</Translation>}
-                    labelAlign="left"
-                    className="font-weight-400"
-                  >
+                  <FormItem label={<Translation>Alias</Translation>} labelAlign="left" className="font-weight-400">
                     <Input
                       name="alias"
                       placeholder={i18n.t('Please input the role alias').toString()}
diff --git a/packages/velaux-ui/src/pages/ProjectRoles/index.tsx b/packages/velaux-ui/src/pages/ProjectRoles/index.tsx
index a86d24a34..bac559bd2 100644
--- a/packages/velaux-ui/src/pages/ProjectRoles/index.tsx
+++ b/packages/velaux-ui/src/pages/ProjectRoles/index.tsx
@@ -3,10 +3,10 @@ import React, { Component } from 'react';
 
 import { getProjectRoles, getProjectPermissions, deleteProjectRoles } from '../../api/project';
 import { If } from '../../components/If';
-import Translation from '../../components/Translation';
+import { Translation } from '../../components/Translation';
 import type { ProjectRoleBase } from '../../interface/project';
 import type { PermissionBase } from '../../interface/user';
-import locale from '../../utils/locale';
+import { locale } from '../../utils/locale';
 
 import ProjectMenu from './components/Menu';
 import ProjectPermPoliciesDetail from './components/ProjectPermPoliciesDetail';
@@ -119,15 +119,13 @@ class ProjectRoles extends Component<Props, State> {
         this.setState({
           activeRoleItem: activeRoleItem || { name: '' },
         });
-      },
+      }
     );
   };
 
   findActiveRoleItem = () => {
     const { projectRoles, activeRoleName } = this.state;
-    return (projectRoles || [{ name: '' }]).find(
-      (item: { name: string }) => item.name === activeRoleName,
-    );
+    return (projectRoles || [{ name: '' }]).find((item: { name: string }) => item.name === activeRoleName);
   };
 
   onCreate = (activeRoleName: string) => {
@@ -158,8 +156,7 @@ class ProjectRoles extends Component<Props, State> {
 
   render() {
     const { Row, Col } = Grid;
-    const { projectName, projectRoles, isAddRole, projectPermissions, isCreateProjectRoles } =
-      this.state;
+    const { projectName, projectRoles, isAddRole, projectPermissions, isCreateProjectRoles } = this.state;
     return (
       <Row className="project-roles-wrapper">
         <Col span="6">
diff --git a/packages/velaux-ui/src/pages/ProjectSummary/components/ConfigDistribution/index.tsx b/packages/velaux-ui/src/pages/ProjectSummary/components/ConfigDistribution/index.tsx
index bfeee1d41..4895312b6 100644
--- a/packages/velaux-ui/src/pages/ProjectSummary/components/ConfigDistribution/index.tsx
+++ b/packages/velaux-ui/src/pages/ProjectSummary/components/ConfigDistribution/index.tsx
@@ -2,10 +2,10 @@ import { Table, Button, Tag, Balloon, Dialog, Message } from '@alifd/next';
 import React, { Component, Fragment } from 'react';
 
 import Permission from '../../../../components/Permission';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import type { ConfigDistribution } from '../../../../interface/configs';
 import { momentDate } from '../../../../utils/common';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 import './index.less';
 import { deleteProjectConfigDistribution, getProjectConfigDistributions } from '../../../../api/config';
 import type { WorkflowStepStatus } from '../../../../interface/application';
diff --git a/packages/velaux-ui/src/pages/ProjectSummary/components/Configs/config-distribute.tsx b/packages/velaux-ui/src/pages/ProjectSummary/components/Configs/config-distribute.tsx
index 5f15bc1b9..c13a446ad 100644
--- a/packages/velaux-ui/src/pages/ProjectSummary/components/Configs/config-distribute.tsx
+++ b/packages/velaux-ui/src/pages/ProjectSummary/components/Configs/config-distribute.tsx
@@ -4,14 +4,10 @@ import React from 'react';
 import './index.less';
 import { applyProjectConfigDistribution } from '../../../../api/config';
 import { getProjectTargetList } from '../../../../api/project';
-import Translation from '../../../../components/Translation';
-import type {
-  NamespacedName,
-  TargetCluster,
-  TargetClusterStatus,
-} from '../../../../interface/configs';
+import { Translation } from '../../../../components/Translation';
+import type { NamespacedName, TargetCluster, TargetClusterStatus } from '../../../../interface/configs';
 import type { Target } from '../../../../interface/target';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 const { Col, Row } = Grid;
 
 type Props = {
diff --git a/packages/velaux-ui/src/pages/ProjectSummary/components/Configs/index.tsx b/packages/velaux-ui/src/pages/ProjectSummary/components/Configs/index.tsx
index 863387f46..964bde4f9 100644
--- a/packages/velaux-ui/src/pages/ProjectSummary/components/Configs/index.tsx
+++ b/packages/velaux-ui/src/pages/ProjectSummary/components/Configs/index.tsx
@@ -3,10 +3,10 @@ import React, { Component, Fragment } from 'react';
 
 import { If } from '../../../../components/If';
 import Permission from '../../../../components/Permission';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import type { Config, TargetClusterStatus } from '../../../../interface/configs';
 import { momentDate } from '../../../../utils/common';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 import './index.less';
 import { deleteConfig, getProjectConfigs } from '../../../../api/config';
 import CreateConfig from '../../../Configs/components/CreateConfigDialog';
diff --git a/packages/velaux-ui/src/pages/ProjectSummary/components/General/index.tsx b/packages/velaux-ui/src/pages/ProjectSummary/components/General/index.tsx
index c9e8e33c8..ae5051d3b 100644
--- a/packages/velaux-ui/src/pages/ProjectSummary/components/General/index.tsx
+++ b/packages/velaux-ui/src/pages/ProjectSummary/components/General/index.tsx
@@ -4,11 +4,11 @@ import React, { Component, Fragment } from 'react';
 import { If } from '../../../../components/If';
 import Item from '../../../../components/Item';
 import Permission from '../../../../components/Permission';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import type { Project, ProjectDetail } from '../../../../interface/project';
 import type { User } from '../../../../interface/user';
 import { momentDate } from '../../../../utils/common';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 import GeneralDialog from '../GeneralDialog';
 import './index.less';
 
@@ -74,10 +74,7 @@ class General extends Component<Props, State> {
               <span className="card-title">
                 <Translation>General</Translation>
               </span>
-              <Permission
-                request={{ resource: `project:${projectName}`, action: 'update' }}
-                project={projectName}
-              >
+              <Permission request={{ resource: `project:${projectName}`, action: 'update' }} project={projectName}>
                 <Button
                   className="card-button-wrapper"
                   onClick={() => {
@@ -114,16 +111,10 @@ class General extends Component<Props, State> {
               </Row>
               <Row wrap={true}>
                 <Col m={12} xs={24}>
-                  <Item
-                    label={<Translation>Create Time</Translation>}
-                    value={momentDate(projectDetails.createTime)}
-                  />
+                  <Item label={<Translation>Create Time</Translation>} value={momentDate(projectDetails.createTime)} />
                 </Col>
                 <Col m={12} xs={24}>
-                  <Item
-                    label={<Translation>Update Time</Translation>}
-                    value={momentDate(projectDetails.updateTime)}
-                  />
+                  <Item label={<Translation>Update Time</Translation>} value={momentDate(projectDetails.updateTime)} />
                 </Col>
               </Row>
             </section>
diff --git a/packages/velaux-ui/src/pages/ProjectSummary/components/GeneralDialog/index.tsx b/packages/velaux-ui/src/pages/ProjectSummary/components/GeneralDialog/index.tsx
index cec9a2298..7c79e2a3c 100644
--- a/packages/velaux-ui/src/pages/ProjectSummary/components/GeneralDialog/index.tsx
+++ b/packages/velaux-ui/src/pages/ProjectSummary/components/GeneralDialog/index.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 import { updateProject } from '../../../../api/project';
 import DrawerWithFooter from '../../../../components/Drawer';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import i18n from '../../../../i18n';
 import type { Project } from '../../../../interface/project';
 import type { User } from '../../../../interface/user';
@@ -118,11 +118,7 @@ class GeneralDialog extends React.Component<Props, State> {
           <Form {...formItemLayout} field={this.field}>
             <Row>
               <Col span={12} style={{ padding: '0 8px' }}>
-                <FormItem
-                  label={<Translation>Name</Translation>}
-                  labelTextAlign="left"
-                  required={true}
-                >
+                <FormItem label={<Translation>Name</Translation>} labelTextAlign="left" required={true}>
                   <Input
                     name="name"
                     disabled={isEditGeneral ? true : false}
@@ -174,9 +170,7 @@ class GeneralDialog extends React.Component<Props, State> {
                         {
                           required: true,
                           pattern: checkName,
-                          message: (
-                            <Translation>Please select a owner for this project</Translation>
-                          ),
+                          message: <Translation>Please select a owner for this project</Translation>,
                         },
                       ],
                     })}
diff --git a/packages/velaux-ui/src/pages/ProjectSummary/components/Targets/index.tsx b/packages/velaux-ui/src/pages/ProjectSummary/components/Targets/index.tsx
index 027a50b8b..c2f4ad86d 100644
--- a/packages/velaux-ui/src/pages/ProjectSummary/components/Targets/index.tsx
+++ b/packages/velaux-ui/src/pages/ProjectSummary/components/Targets/index.tsx
@@ -4,8 +4,8 @@ import React, { Component, Fragment } from 'react';
 
 import { getProjectTargetList } from '../../../../api/project';
 import Permission from '../../../../components/Permission';
-import Translation from '../../../../components/Translation';
-import locale from '../../../../utils/locale';
+import { Translation } from '../../../../components/Translation';
+import { locale } from '../../../../utils/locale';
 import './index.less';
 
 type Props = {
@@ -73,11 +73,7 @@ class Targets extends Component<Props, State> {
         key: 'cluster',
         title: <Translation>Cluster/Namespace</Translation>,
         dataIndex: 'cluster',
-        cell: (
-          v: string,
-          i: number,
-          record: { cluster: { clusterName: string; namespace: string } },
-        ) => {
+        cell: (v: string, i: number, record: { cluster: { clusterName: string; namespace: string } }) => {
           const { cluster = { clusterName: '', namespace: '' } } = record;
           return <span>{`${cluster.clusterName}/${cluster.namespace}`}</span>;
         },
diff --git a/packages/velaux-ui/src/pages/Projects/components/CreateProjectDialog/index.tsx b/packages/velaux-ui/src/pages/Projects/components/CreateProjectDialog/index.tsx
index 44e9bb1d2..cc8d32533 100644
--- a/packages/velaux-ui/src/pages/Projects/components/CreateProjectDialog/index.tsx
+++ b/packages/velaux-ui/src/pages/Projects/components/CreateProjectDialog/index.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 import { createProject, updateProject } from '../../../../api/project';
 import DrawerWithFooter from '../../../../components/Drawer';
 import { If } from '../../../../components/If';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import i18n from '../../../../i18n';
 import type { Project } from '../../../../interface/project';
 import type { User } from '../../../../interface/user';
@@ -142,11 +142,7 @@ class CreateConfig extends React.Component<Props, State> {
           <Form {...formItemLayout} field={this.field}>
             <Row>
               <Col span={12} style={{ padding: '0 8px' }}>
-                <FormItem
-                  label={<Translation>Name</Translation>}
-                  labelTextAlign="left"
-                  required={true}
-                >
+                <FormItem label={<Translation>Name</Translation>} labelTextAlign="left" required={true}>
                   <Input
                     name="name"
                     placeholder={i18n.t('Please enter').toString()}
@@ -209,11 +205,7 @@ class CreateConfig extends React.Component<Props, State> {
             <Row>
               <Col span={24} style={{ padding: '0 8px' }}>
                 <FormItem label={<Translation>Description</Translation>}>
-                  <Input
-                    name="description"
-                    placeholder={i18n.t('Please enter').toString()}
-                    {...init('description')}
-                  />
+                  <Input name="description" placeholder={i18n.t('Please enter').toString()} {...init('description')} />
                 </FormItem>
               </Col>
             </Row>
diff --git a/packages/velaux-ui/src/pages/Projects/index.tsx b/packages/velaux-ui/src/pages/Projects/index.tsx
index 6c35c663d..cae40e5d4 100644
--- a/packages/velaux-ui/src/pages/Projects/index.tsx
+++ b/packages/velaux-ui/src/pages/Projects/index.tsx
@@ -5,14 +5,14 @@ import React, { Fragment, Component } from 'react';
 import { getProjectList, deleteProject } from '../../api/project';
 import { getUserList } from '../../api/users';
 import { If } from '../../components/If';
-import Title from '../../components/ListTitle';
+import { ListTitle as Title } from '../../components/ListTitle';
 import Permission from '../../components/Permission';
-import Translation from '../../components/Translation';
+import { Translation } from '../../components/Translation';
 import type { NameAlias } from '../../interface/env';
 import type { Project } from '../../interface/project';
 import type { User } from '../../interface/user';
 import { momentDate } from '../../utils/common';
-import locale from '../../utils/locale';
+import { locale } from '../../utils/locale';
 
 import CreateProjectDialog from './components/CreateProjectDialog';
 
diff --git a/packages/velaux-ui/src/pages/Roles/components/RolesDialog/index.tsx b/packages/velaux-ui/src/pages/Roles/components/RolesDialog/index.tsx
index 4d138e662..9bb969a19 100644
--- a/packages/velaux-ui/src/pages/Roles/components/RolesDialog/index.tsx
+++ b/packages/velaux-ui/src/pages/Roles/components/RolesDialog/index.tsx
@@ -4,12 +4,12 @@ import React from 'react';
 import { createRole, updateRole } from '../../../../api/roles';
 import DrawerWithFooter from '../../../../components/Drawer';
 import { If } from '../../../../components/If';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import i18n from '../../../../i18n';
 import type { RolesBase } from '../../../../interface/roles';
 import type { PermissionBase } from '../../../../interface/user';
 import { checkName } from '../../../../utils/common';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 import { getSelectLabel } from '../../../../utils/utils';
 
 type Props = {
@@ -146,11 +146,7 @@ class RolesDialog extends React.Component<Props, State> {
           <Form {...formItemLayout} field={this.field}>
             <Row>
               <Col span={12} style={{ padding: '0 8px' }}>
-                <FormItem
-                  label={<Translation>Name</Translation>}
-                  labelTextAlign="left"
-                  required={true}
-                >
+                <FormItem label={<Translation>Name</Translation>} labelTextAlign="left" required={true}>
                   <Input
                     name="name"
                     placeholder={i18n.t('Please enter').toString()}
diff --git a/packages/velaux-ui/src/pages/Roles/index.tsx b/packages/velaux-ui/src/pages/Roles/index.tsx
index 593bfd91a..a49eddcf5 100644
--- a/packages/velaux-ui/src/pages/Roles/index.tsx
+++ b/packages/velaux-ui/src/pages/Roles/index.tsx
@@ -4,13 +4,13 @@ import React, { Fragment, Component } from 'react';
 import { getPlatformPermissions } from '../../api/rbac';
 import { getRoleList, deleteRole } from '../../api/roles';
 import { If } from '../../components/If';
-import Title from '../../components/ListTitle';
+import { ListTitle as Title } from '../../components/ListTitle';
 import Permission from '../../components/Permission';
-import Translation from '../../components/Translation';
+import { Translation } from '../../components/Translation';
 import type { RolesBase } from '../../interface/roles';
 import type { PermissionBase } from '../../interface/user';
 import { momentDate } from '../../utils/common';
-import locale from '../../utils/locale';
+import { locale } from '../../utils/locale';
 import './index.less';
 
 import RolesDialog from './components/RolesDialog';
diff --git a/packages/velaux-ui/src/pages/TargetList/components/List/index.tsx b/packages/velaux-ui/src/pages/TargetList/components/List/index.tsx
index 4620e704a..82cba4bdb 100644
--- a/packages/velaux-ui/src/pages/TargetList/components/List/index.tsx
+++ b/packages/velaux-ui/src/pages/TargetList/components/List/index.tsx
@@ -4,11 +4,11 @@ import { AiFillDelete, AiFillSetting } from 'react-icons/ai';
 
 import { deleteTarget } from '../../../../api/target';
 import Permission from '../../../../components/Permission';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import './index.less';
 import type { Project } from '../../../../interface/project';
 import type { Target } from '../../../../interface/target';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 
 import { Link } from 'dva/router';
 
diff --git a/packages/velaux-ui/src/pages/TargetList/components/Namespace/index.tsx b/packages/velaux-ui/src/pages/TargetList/components/Namespace/index.tsx
index f1347b3d6..781a2d43c 100644
--- a/packages/velaux-ui/src/pages/TargetList/components/Namespace/index.tsx
+++ b/packages/velaux-ui/src/pages/TargetList/components/Namespace/index.tsx
@@ -3,8 +3,8 @@ import React from 'react';
 
 import { createClusterNamespace } from '../../../../api/cluster';
 import { If } from '../../../../components/If';
-import Translation from '../../../../components/Translation';
-import locale from '../../../../utils/locale';
+import { Translation } from '../../../../components/Translation';
+import { locale } from '../../../../utils/locale';
 
 type Props = {
   cluster?: string;
diff --git a/packages/velaux-ui/src/pages/TargetList/components/TargetDialog/index.tsx b/packages/velaux-ui/src/pages/TargetList/components/TargetDialog/index.tsx
index 19409b311..f020d4433 100644
--- a/packages/velaux-ui/src/pages/TargetList/components/TargetDialog/index.tsx
+++ b/packages/velaux-ui/src/pages/TargetList/components/TargetDialog/index.tsx
@@ -4,14 +4,14 @@ import React from 'react';
 import { listNamespaces } from '../../../../api/observation';
 import { getCloudServiceProviderList, getProjectList } from '../../../../api/project';
 import { createTarget, updateTarget } from '../../../../api/target';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import Group from '../../../../extends/Group';
 import i18n from '../../../../i18n';
 import type { Cluster } from '../../../../interface/cluster';
 import type { Project } from '../../../../interface/project';
 import type { Target, ProvideList } from '../../../../interface/target';
 import { checkName } from '../../../../utils/common';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 import Namespace from '../Namespace';
 import type { NamespaceItem } from '../Namespace';
 type Props = {
@@ -267,9 +267,7 @@ class TargetDialog extends React.Component<Props, State> {
         <Dialog
           v2
           locale={locale().Dialog}
-          title={
-            isEdit ? <Translation>Edit Target</Translation> : <Translation>New Target</Translation>
-          }
+          title={isEdit ? <Translation>Edit Target</Translation> : <Translation>New Target</Translation>}
           autoFocus={true}
           overflowScroll={true}
           visible={visible}
@@ -363,8 +361,7 @@ class TargetDialog extends React.Component<Props, State> {
                           rules: [
                             {
                               maxLength: 256,
-                              message:
-                                'Enter a description that contains less than 256 characters.',
+                              message: 'Enter a description that contains less than 256 characters.',
                             },
                           ],
                         })}
@@ -421,9 +418,7 @@ class TargetDialog extends React.Component<Props, State> {
                   <Group
                     title={<Translation>Shared Variables</Translation>}
                     required={false}
-                    description={
-                      <Translation>You can define parameters such as region or zone</Translation>
-                    }
+                    description={<Translation>You can define parameters such as region or zone</Translation>}
                     hasToggleIcon
                   >
                     <Row>
diff --git a/packages/velaux-ui/src/pages/TargetList/index.tsx b/packages/velaux-ui/src/pages/TargetList/index.tsx
index 0d4025abb..c36c3fdea 100644
--- a/packages/velaux-ui/src/pages/TargetList/index.tsx
+++ b/packages/velaux-ui/src/pages/TargetList/index.tsx
@@ -3,12 +3,12 @@ import { connect } from 'dva';
 import React from 'react';
 
 import { If } from '../../components/If';
-import ListTitle from '../../components/ListTitle';
+import { ListTitle } from '../../components/ListTitle';
 import Permission from '../../components/Permission';
-import Translation from '../../components/Translation';
+import { Translation } from '../../components/Translation';
 import type { Cluster } from '../../interface/cluster';
 import type { Target } from '../../interface/target';
-import locale from '../../utils/locale';
+import { locale } from '../../utils/locale';
 
 import TableList from './components/List';
 import TargetDialog from './components/TargetDialog';
@@ -84,7 +84,7 @@ class TargetList extends React.Component<Props, State> {
       },
       () => {
         this.getTargetList();
-      },
+      }
     );
   };
 
@@ -114,7 +114,7 @@ class TargetList extends React.Component<Props, State> {
       },
       () => {
         this.getTargetList();
-      },
+      }
     );
   };
 
@@ -127,11 +127,7 @@ class TargetList extends React.Component<Props, State> {
           title="Targets"
           subTitle="Define the targets that applications would deliver to"
           extButtons={[
-            <Permission
-              key={'new-target'}
-              request={{ resource: 'target:*', action: 'create' }}
-              project={''}
-            >
+            <Permission key={'new-target'} request={{ resource: 'target:*', action: 'create' }} project={''}>
               <Button
                 type="primary"
                 onClick={() => {
diff --git a/packages/velaux-ui/src/pages/UiSchema/index.tsx b/packages/velaux-ui/src/pages/UiSchema/index.tsx
index 5505a7f86..81073518d 100644
--- a/packages/velaux-ui/src/pages/UiSchema/index.tsx
+++ b/packages/velaux-ui/src/pages/UiSchema/index.tsx
@@ -10,11 +10,11 @@ import DefinitionCode from '../../components/DefinitionCode';
 import Empty from '../../components/Empty';
 import { If } from '../../components/If';
 import Permission from '../../components/Permission';
-import Translation from '../../components/Translation';
+import { Translation } from '../../components/Translation';
 import UISchema from '../../components/UISchema';
 import i18n from '../../i18n';
 import type { UIParam } from '../../interface/application';
-import locale from '../../utils/locale';
+import { locale } from '../../utils/locale';
 
 import './index.less';
 
diff --git a/packages/velaux-ui/src/pages/Users/components/CreateUser/index.tsx b/packages/velaux-ui/src/pages/Users/components/CreateUser/index.tsx
index 5ad383867..2c184093b 100644
--- a/packages/velaux-ui/src/pages/Users/components/CreateUser/index.tsx
+++ b/packages/velaux-ui/src/pages/Users/components/CreateUser/index.tsx
@@ -4,12 +4,12 @@ import React from 'react';
 import { createUser, updateUser } from '../../../../api/users';
 import DrawerWithFooter from '../../../../components/Drawer';
 import { If } from '../../../../components/If';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import i18n from '../../../../i18n';
 import type { RolesBase } from '../../../../interface/roles';
 import type { User } from '../../../../interface/user';
 import { checkUserPassword, checkName } from '../../../../utils/common';
-import locale from '../../../../utils/locale';
+import { locale } from '../../../../utils/locale';
 import { getSelectLabel } from '../../../../utils/utils';
 
 type Props = {
diff --git a/packages/velaux-ui/src/pages/Users/components/ResetPassword/index.tsx b/packages/velaux-ui/src/pages/Users/components/ResetPassword/index.tsx
index 51c8c9614..97435c4b3 100644
--- a/packages/velaux-ui/src/pages/Users/components/ResetPassword/index.tsx
+++ b/packages/velaux-ui/src/pages/Users/components/ResetPassword/index.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 import { updateUser } from '../../../../api/users';
 import DrawerWithFooter from '../../../../components/Drawer';
-import Translation from '../../../../components/Translation';
+import { Translation } from '../../../../components/Translation';
 import i18n from '../../../../i18n';
 import type { User } from '../../../../interface/user';
 import { checkUserPassword } from '../../../../utils/common';
diff --git a/packages/velaux-ui/src/pages/Users/index.tsx b/packages/velaux-ui/src/pages/Users/index.tsx
index f520e8f09..fe0e32788 100644
--- a/packages/velaux-ui/src/pages/Users/index.tsx
+++ b/packages/velaux-ui/src/pages/Users/index.tsx
@@ -4,14 +4,14 @@ import React, { Component, Fragment } from 'react';
 import { getRoleList } from '../../api/roles';
 import { getUserList, deleteUser, changeUserDisable, changeUserEnable } from '../../api/users';
 import { If } from '../../components/If';
-import Title from '../../components/ListTitle';
+import { ListTitle } from '../../components/ListTitle';
 import Permission from '../../components/Permission';
-import Translation from '../../components/Translation';
+import { Translation } from '../../components/Translation';
 import type { NameAlias } from '../../interface/env';
 import type { RolesBase } from '../../interface/roles';
 import type { User } from '../../interface/user';
 import { momentDate } from '../../utils/common';
-import locale from '../../utils/locale';
+import { locale } from '../../utils/locale';
 
 import CreateUser from './components/CreateUser';
 import ResetPassword from './components/ResetPassword';
@@ -403,7 +403,7 @@ class Users extends Component<Props, State> {
       <Fragment>
         <div className="user-wrapper">
           <section>
-            <Title
+            <ListTitle
               title="Users"
               subTitle="Basic authorization management is provided for local users by default, but SSO authentication is strongly recommended"
               extButtons={[
diff --git a/packages/velaux-ui/src/services/MenuService.tsx b/packages/velaux-ui/src/services/MenuService.tsx
index 0afa0dbbc..7bc08dc97 100644
--- a/packages/velaux-ui/src/services/MenuService.tsx
+++ b/packages/velaux-ui/src/services/MenuService.tsx
@@ -206,7 +206,7 @@ export class MenuWrapper implements MenuService {
       .then((plugins) => {
         plugins.map((plugin) => {
           plugin.includes?.map((include) => {
-            if (!this.workspaces.find((w) => w.name)) {
+            if (!this.workspaces.find((w) => w.name === include.workspace.name)) {
               include.workspace.rootRoute = include.to;
               this.workspaces.push(include.workspace);
             }
diff --git a/packages/velaux-ui/src/services/PluginService.ts b/packages/velaux-ui/src/services/PluginService.ts
index 9f8683d43..e06415135 100644
--- a/packages/velaux-ui/src/services/PluginService.ts
+++ b/packages/velaux-ui/src/services/PluginService.ts
@@ -7,7 +7,7 @@ import _ from 'lodash'; // eslint-disable-line lodash/import-scope
 import moment from 'moment'; // eslint-disable-line no-restricted-imports
 import react from 'react';
 import * as velauxData from '@velaux/data'; // eslint-disable-line no-restricted-imports
-import * as velauxUI from '@velaux/ui'; // eslint-disable-line no-restricted-imports
+import * as velauxUI from '../types'; // eslint-disable-line no-restricted-imports
 import * as ReactDom from 'react-dom';
 import * as DvaRouter from 'dva/router';
 import * as Redux from 'redux';
diff --git a/packages/velaux-ui/src/services/index.ts b/packages/velaux-ui/src/services/index.ts
new file mode 100644
index 000000000..6408b7217
--- /dev/null
+++ b/packages/velaux-ui/src/services/index.ts
@@ -0,0 +1,3 @@
+export * from './BackendService';
+export * from './LocationService';
+export * from './MenuService';
diff --git a/packages/velaux-ui/src/types.ts b/packages/velaux-ui/src/types.ts
new file mode 100644
index 000000000..f4c1aebd6
--- /dev/null
+++ b/packages/velaux-ui/src/types.ts
@@ -0,0 +1,6 @@
+export * from '@alifd/next';
+export * from './services';
+export * from './components';
+export * from './utils/common';
+export * from './utils/permission';
+export * from './utils/locale';
diff --git a/packages/velaux-ui/src/utils/locale.tsx b/packages/velaux-ui/src/utils/locale.tsx
index b994a0ed9..1b42e9615 100644
--- a/packages/velaux-ui/src/utils/locale.tsx
+++ b/packages/velaux-ui/src/utils/locale.tsx
@@ -187,4 +187,4 @@ class SingletonLocal {
   }
 }
 SingletonLocal.getInstance().setLocal(localeData);
-export default SingletonLocal.getInstance().getLocal();
+export const locale = SingletonLocal.getInstance().getLocal();
diff --git a/packages/velaux-ui/src/utils/resetLogin.ts b/packages/velaux-ui/src/utils/resetLogin.ts
index b15ba2b25..3db26f59a 100644
--- a/packages/velaux-ui/src/utils/resetLogin.ts
+++ b/packages/velaux-ui/src/utils/resetLogin.ts
@@ -2,7 +2,7 @@ import { Dialog } from '@alifd/next';
 
 import i18n from '../i18n';
 
-import locale from './locale';
+import { locale } from './locale';
 
 class ResetLogin {
   private static singleton: ResetLogin;
diff --git a/packages/velaux-ui/tsconfig.json b/packages/velaux-ui/tsconfig.json
index 58dfaf727..a23801010 100644
--- a/packages/velaux-ui/tsconfig.json
+++ b/packages/velaux-ui/tsconfig.json
@@ -27,7 +27,7 @@
   "include": [
     "src/**/*.ts*",
     "images.d.ts",
-    "types.ts"
+    "src/types.ts"
   ],
   // override for storybook which uses ts-node to compile main.ts / preview.ts files.
   "ts-node": {
diff --git a/packages/velaux-ui/types.d.ts b/packages/velaux-ui/types.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/packages/velaux-ui/types.ts b/packages/velaux-ui/types.ts
deleted file mode 100644
index 27000b840..000000000
--- a/packages/velaux-ui/types.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from '@alifd/next';
diff --git a/pkg/plugin/loader/loader.go b/pkg/plugin/loader/loader.go
index 7e9b759a3..04ea64b7e 100644
--- a/pkg/plugin/loader/loader.go
+++ b/pkg/plugin/loader/loader.go
@@ -51,6 +51,12 @@ var (
 
 	// ErrInvalidBackendTypeNoServiceDiscover -
 	ErrInvalidBackendTypeNoServiceDiscover = errors.New("the backend type is invalid in plugin.json, the serviceDiscover field is required if the type is kube-service")
+
+	// ErrInvalidBackendAuth -
+	ErrInvalidBackendAuth = errors.New("backend auth only support the basic")
+
+	// ErrInvalidBackendAuthEmptySecret -
+	ErrInvalidBackendAuthEmptySecret = errors.New("the authSecret field is required when the auth type is defined")
 )
 
 var (
@@ -251,6 +257,14 @@ func validatePluginJSON(data types.JSONData) error {
 		return ErrInvalidBackendTypeNoServiceDiscover
 	}
 
+	if data.AuthType != "" && data.AuthType == types.Basic {
+		return ErrInvalidBackendAuth
+	}
+
+	if data.AuthType == types.Basic && (data.AuthSecret == nil || data.AuthSecret.Name == "") {
+		return ErrInvalidBackendAuth
+	}
+
 	return nil
 }
 
diff --git a/pkg/plugin/proxy/kube_service_proxy.go b/pkg/plugin/proxy/kube_service_proxy.go
index 785bd8b6c..9237cabc1 100644
--- a/pkg/plugin/proxy/kube_service_proxy.go
+++ b/pkg/plugin/proxy/kube_service_proxy.go
@@ -17,6 +17,7 @@ limitations under the License.
 package proxy
 
 import (
+	"context"
 	"fmt"
 	"log"
 	"net/http"
@@ -40,6 +41,7 @@ type kubeServiceProxy struct {
 	plugin     *types.Plugin
 	// cache the service config for 5m.
 	availableEndpoint *url.URL
+	availableSecret   *corev1.Secret
 	cacheTime         time.Time
 }
 
@@ -90,11 +92,53 @@ func (k *kubeServiceProxy) Handler(req *http.Request, res http.ResponseWriter) {
 		k.availableEndpoint = availableEndpoint
 		k.cacheTime = time.Now().Add(time.Minute * 10)
 	}
+	route, _ := req.Context().Value(&RouteCtxKey).(*types.Route)
+
 	director := func(req *http.Request) {
 		var base = *k.availableEndpoint
 		base.Path = req.URL.Path
 		req.URL = &base
+		if route != nil {
+			// Setting the custom proxy headers
+			for _, h := range route.ProxyHeaders {
+				req.Header.Set(h.Name, h.Value)
+			}
+		}
+		// Setting the authentication
+		if types.Basic == k.plugin.AuthType && k.plugin.AuthSecret != nil {
+			if err := k.setBasicAuth(req, res); err != nil {
+				klog.Errorf("can't set the basic auth, err:%s", err.Error())
+				return
+			}
+		}
 	}
 	rp := &httputil.ReverseProxy{Director: director, ErrorLog: log.Default()}
 	rp.ServeHTTP(res, req)
 }
+
+func (k *kubeServiceProxy) setBasicAuth(req *http.Request, res http.ResponseWriter) error {
+	if err := k.loadAuthSecret(req.Context()); err != nil {
+		return err
+	}
+	req.SetBasicAuth(string(k.availableSecret.Data["username"]), string(k.availableSecret.Data["password"]))
+	return nil
+}
+
+func (k *kubeServiceProxy) loadAuthSecret(ctx context.Context) error {
+	if k.plugin.AuthSecret == nil || k.plugin.AuthSecret.Name == "" {
+		return fmt.Errorf("auth secret is invalid")
+	}
+	namespace := k.plugin.AuthSecret.Namespace
+	name := k.plugin.AuthSecret.Name
+	if namespace == "" {
+		namespace = kubevelatypes.DefaultKubeVelaNS
+	}
+	if k.availableSecret == nil || time.Now().After(k.cacheTime) {
+		var secret corev1.Secret
+		if err := k.kubeClient.Get(ctx, apitypes.NamespacedName{Namespace: namespace, Name: name}, &secret); err != nil {
+			return err
+		}
+		k.availableSecret = &secret
+	}
+	return nil
+}
diff --git a/pkg/plugin/proxy/proxy.go b/pkg/plugin/proxy/proxy.go
index 2d4fdd8b2..2ae2422a0 100644
--- a/pkg/plugin/proxy/proxy.go
+++ b/pkg/plugin/proxy/proxy.go
@@ -29,6 +29,9 @@ import (
 // ErrAvailablePlugin -
 var ErrAvailablePlugin = fmt.Errorf("there is no available proxy for the plugin")
 
+// RouteCtxKey the context key to save the route
+var RouteCtxKey = "route"
+
 // BackendProxy -
 type BackendProxy interface {
 	Handler(*http.Request, http.ResponseWriter)
@@ -50,7 +53,7 @@ func NewBackendPluginProxy(plugin *types.Plugin, kubeClient client.Client, kubeC
 			return nil, err
 		}
 	case types.KubeService:
-		p = &kubeServiceProxy{kubeClient: kubeClient, plugin: plugin}
+		p = NewKubeServiceProxy(kubeClient, plugin)
 	case types.StaticServer:
 		p = &staticServerProxy{plugin: plugin}
 	default:
diff --git a/pkg/plugin/proxy/proxy_suite_test.go b/pkg/plugin/proxy/proxy_suite_test.go
index 5cc507382..937e46221 100644
--- a/pkg/plugin/proxy/proxy_suite_test.go
+++ b/pkg/plugin/proxy/proxy_suite_test.go
@@ -17,18 +17,23 @@ limitations under the License.
 package proxy
 
 import (
+	"context"
 	"math/rand"
 	"testing"
 	"time"
 
 	. "github.com/onsi/ginkgo"
 	. "github.com/onsi/gomega"
+	corev1 "k8s.io/api/core/v1"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
 	"k8s.io/apimachinery/pkg/runtime"
 	"k8s.io/client-go/kubernetes/scheme"
 	"k8s.io/client-go/rest"
 	"k8s.io/utils/pointer"
 	"sigs.k8s.io/controller-runtime/pkg/client"
 	"sigs.k8s.io/controller-runtime/pkg/envtest"
+
+	kubevelatypes "github.com/oam-dev/kubevela/apis/types"
 )
 
 func TestKubeapi(t *testing.T) {
@@ -67,6 +72,8 @@ var _ = BeforeSuite(func(done Done) {
 	Expect(k8sClient).ToNot(BeNil())
 	By("new kube client success")
 
+	Expect(k8sClient.Create(context.TODO(), &corev1.Namespace{ObjectMeta: metav1.ObjectMeta{Name: kubevelatypes.DefaultKubeVelaNS}})).Should(BeNil())
+
 	close(done)
 }, 240)
 
diff --git a/pkg/plugin/proxy/proxy_test.go b/pkg/plugin/proxy/proxy_test.go
index e5dc77a88..9b9a5d625 100644
--- a/pkg/plugin/proxy/proxy_test.go
+++ b/pkg/plugin/proxy/proxy_test.go
@@ -22,9 +22,13 @@ import (
 	"net/http/httptest"
 	"net/url"
 
+	kubevelatypes "github.com/oam-dev/kubevela/apis/types"
 	. "github.com/onsi/ginkgo"
 	. "github.com/onsi/gomega"
+	corev1 "k8s.io/api/core/v1"
 	v1 "k8s.io/api/rbac/v1"
+	metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
+	"k8s.io/apimachinery/pkg/util/intstr"
 
 	"github.com/kubevela/velaux/pkg/plugin/types"
 	"github.com/kubevela/velaux/pkg/server/config"
@@ -59,4 +63,47 @@ var _ = Describe("Test proxy", func() {
 		proxy.Handler(req, res)
 		Expect(res.Code).To(Equal(200))
 	})
+
+	It("Test kube-service proxy", func() {
+		plugin := &types.Plugin{
+			JSONData: types.JSONData{
+				ID:          "node-manage",
+				BackendType: types.KubeService,
+				ServiceDiscover: &types.KubernetesService{
+					Name: "test",
+				},
+				AuthType: types.Basic,
+				AuthSecret: &types.KubernetesSecret{
+					Name: "test",
+				},
+			},
+		}
+		testService := &corev1.Service{ObjectMeta: metav1.ObjectMeta{
+			Name:      "test",
+			Namespace: kubevelatypes.DefaultKubeVelaNS,
+		}, Spec: corev1.ServiceSpec{
+			Ports: []corev1.ServicePort{
+				{
+					Name:       "t",
+					Port:       80,
+					TargetPort: intstr.FromInt(80),
+				},
+			},
+		}}
+		Expect(k8sClient.Create(context.TODO(), testService)).Should(BeNil())
+		testSecret := &corev1.Secret{ObjectMeta: metav1.ObjectMeta{
+			Name:      "test",
+			Namespace: kubevelatypes.DefaultKubeVelaNS,
+		}, StringData: map[string]string{
+			"username": "n1",
+			"password": "p1",
+		}}
+		Expect(k8sClient.Create(context.TODO(), testSecret)).Should(BeNil())
+		proxy, err := NewBackendPluginProxy(plugin, k8sClient, cfg)
+		Expect(err).To(BeNil())
+		var res = &httptest.ResponseRecorder{}
+		var req = &http.Request{Method: "GET", URL: &url.URL{Scheme: "http", Path: "/test", Host: "127.0.0.1"}}
+		proxy.Handler(req, res)
+		Expect(res.Code).To(Equal(502))
+	})
 })
diff --git a/pkg/plugin/router/router.go b/pkg/plugin/router/router.go
index ba76f7b61..cd5be83d3 100644
--- a/pkg/plugin/router/router.go
+++ b/pkg/plugin/router/router.go
@@ -27,6 +27,9 @@ import (
 	"github.com/kubevela/velaux/pkg/plugin/types"
 )
 
+// DefaultPluginResourceKey the path parameter key for the plugin resource
+var DefaultPluginResourceKey = "pluginName"
+
 // Handle the plugin route
 type Handle func(http.ResponseWriter, *http.Request, httprouter.Params, *types.Plugin, *types.Route)
 
@@ -38,7 +41,7 @@ type defaultRouter struct {
 }
 
 func (d *defaultRouter) ServeHTTP(res http.ResponseWriter, req *http.Request) {
-	d.h(res, req, nil, d.plugin, &types.Route{})
+	d.h(res, req, httprouter.Params{{Key: DefaultPluginResourceKey, Value: d.plugin.PluginID()}}, d.plugin, &types.Route{})
 }
 
 func newDefaultRouter(h Handle, plugin *types.Plugin) *defaultRouter {
@@ -57,12 +60,12 @@ func GenerateHTTPRouter(plugin *types.Plugin, pathPrefix string, h Handle) http.
 	} else {
 		r := httprouter.New()
 		for _, route := range plugin.Routes {
-			routePath := path.Join(pathPrefix+"/:pluginName", route.Path)
+			routePath := path.Join(pathPrefix+"/:"+DefaultPluginResourceKey, route.Path)
 			method := route.Method
 			if method == "" {
 				method = "GET"
 			}
-			r.Handle(strings.ToUpper(method), path.Join(pathPrefix+"/:pluginName", route.Path), func(w http.ResponseWriter, r *http.Request, p httprouter.Params) {
+			r.Handle(strings.ToUpper(method), routePath, func(w http.ResponseWriter, r *http.Request, p httprouter.Params) {
 				h(w, r, p, plugin, route)
 			})
 			klog.Infof("Register the plugin proxy route for the plugin %s, method:%s path:%s", plugin.PluginID(), method, routePath)
diff --git a/pkg/plugin/types/plugin.go b/pkg/plugin/types/plugin.go
index c5baa3bd2..40862cebc 100644
--- a/pkg/plugin/types/plugin.go
+++ b/pkg/plugin/types/plugin.go
@@ -87,10 +87,11 @@ type JSONData struct {
 	Includes []*Includes `json:"includes"`
 	Category string      `json:"category"`
 	// Backend If the plugin has a backend component.
-	Backend     bool        `json:"backend"`
-	Proxy       bool        `json:"proxy"`
-	BackendType BackendType `json:"backendType"`
-	AuthType    AuthType    `json:"authType,omitempty"`
+	Backend     bool              `json:"backend"`
+	Proxy       bool              `json:"proxy"`
+	BackendType BackendType       `json:"backendType"`
+	AuthType    AuthType          `json:"authType,omitempty"`
+	AuthSecret  *KubernetesSecret `json:"authSecret,omitempty"`
 	// For the kube auth type, define the max scope permission for this plugin.
 	KubePermissions []rbacv1.PolicyRule `json:"kubePermissions,omitempty"`
 	// For the KubeService backend type
@@ -149,6 +150,13 @@ type KubernetesService struct {
 	Port int32
 }
 
+// KubernetesSecret define one kubernetes secret
+type KubernetesSecret struct {
+	Name string `json:"name"`
+	// If namespace is not specified, find the service from the vela system namespace
+	Namespace string `json:"namespace"`
+}
+
 // AuthType The authentication type of the backend server
 type AuthType string
 
diff --git a/pkg/server/domain/service/plugin_test.go b/pkg/server/domain/service/plugin_test.go
new file mode 100644
index 000000000..f4d35ba0c
--- /dev/null
+++ b/pkg/server/domain/service/plugin_test.go
@@ -0,0 +1,44 @@
+/*
+Copyright 2023 The KubeVela Authors.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+	http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+package service
+
+import (
+	"context"
+
+	. "github.com/onsi/ginkgo"
+	. "github.com/onsi/gomega"
+
+	"github.com/kubevela/velaux/pkg/plugin/types"
+	"github.com/kubevela/velaux/pkg/server/config"
+)
+
+var _ = Describe("Test plugin service", func() {
+	var pluginService PluginService
+	It("Test loading the plugin", func() {
+		pluginService = NewTestPluginService(config.PluginConfig{
+			CustomPluginPath: []string{"./testdata/plugins"},
+		}, k8sClient)
+		Expect(pluginService.Init(context.TODO())).Should(BeNil())
+		Expect(len(pluginService.ListInstalledPlugins(context.TODO())), 4)
+	})
+
+	It("Test detail the plugin", func() {
+		plugin, err := pluginService.DetailInstalledPlugin(context.TODO(), "backend-kube-service")
+		Expect(err).Should(BeNil())
+		Expect(plugin.BackendType).Should(Equal(types.KubeService))
+	})
+})
diff --git a/pkg/server/domain/service/rbac.go b/pkg/server/domain/service/rbac.go
index 0449a2fc5..4ea2bdf90 100644
--- a/pkg/server/domain/service/rbac.go
+++ b/pkg/server/domain/service/rbac.go
@@ -22,6 +22,7 @@ import (
 	"errors"
 	"fmt"
 	"net/http"
+	"path"
 	"regexp"
 	"strings"
 	"sync"
@@ -35,6 +36,7 @@ import (
 	"github.com/oam-dev/kubevela/pkg/auth"
 	"github.com/oam-dev/kubevela/pkg/utils"
 
+	"github.com/kubevela/velaux/pkg/plugin/router"
 	plugintypes "github.com/kubevela/velaux/pkg/plugin/types"
 	"github.com/kubevela/velaux/pkg/server/domain/model"
 	"github.com/kubevela/velaux/pkg/server/domain/repository"
@@ -49,6 +51,7 @@ import (
 var resourceActions map[string][]string
 var lock sync.Mutex
 var reg = regexp.MustCompile(`(?U)\{.*\}`)
+var defaultPluginResource = "plugin"
 
 var defaultProjectPermissionTemplate = []*model.PermissionTemplate{
 	{
@@ -373,9 +376,13 @@ func buildMap(resources []string, resourceNameMap map[string]string) map[string]
 	if len(resources) == 0 {
 		return nil
 	}
+	resourceName, exist := resourceNameMap[resources[0]]
+	if !exist {
+		resourceName = resources[0] + "Name"
+	}
 	return map[string]resourceMetadata{
 		resources[0]: {
-			pathName:     resourceNameMap[resources[0]],
+			pathName:     resourceName,
 			subResources: buildMap(resources[1:], resourceNameMap),
 		},
 	}
@@ -396,12 +403,16 @@ func mergeMap(source, target map[string]resourceMetadata) {
 // resource map like: plugin: {pathName: "pluginID", subResources:{cluster: {pathName: "clusterName",subResources:{node:{pathName:"nodeName"}}}}}
 func RegisterPluginResource(resource string, resourceNameMap map[string]string) {
 	m := buildMap(strings.Split(resource, "/"), resourceNameMap)
-	mergeMap(map[string]resourceMetadata{
+	sourceMap := map[string]resourceMetadata{
 		"plugin": {
-			pathName:     "pluginID",
+			pathName:     router.DefaultPluginResourceKey,
 			subResources: m,
 		},
-	}, ResourceMaps)
+	}
+	if strings.HasPrefix(resource, defaultPluginResource) {
+		sourceMap = m
+	}
+	mergeMap(sourceMap, ResourceMaps)
 	existResourcePaths = convertSources(ResourceMaps)
 }
 
@@ -692,17 +703,31 @@ func (p *rbacServiceImpl) CheckPerm(resource string, actions ...string) func(req
 // CheckPluginRequestPerm handle RBAC checking for the the http request to plugin backend
 // pathFormat: eg. nodes/{node}/status
 func (p *rbacServiceImpl) CheckPluginRequestPerm(httpParams httprouter.Params, r2 *plugintypes.Route) func(req *http.Request, res http.ResponseWriter) bool {
-	if r2.Permission != nil {
-		RegisterPluginResource("plugin/"+r2.Permission.Resource, r2.ResourceMap)
-		registerResourceAction("plugin/"+r2.Permission.Resource, r2.Permission.Action)
+	var resource = path.Join(defaultPluginResource, func() string {
+		if r2 == nil || r2.Permission == nil {
+			return ""
+		}
+		return r2.Permission.Resource
+	}())
+	var action = func() string {
+		if r2 == nil || r2.Permission == nil {
+			return "*"
+		}
+		return r2.Permission.Action
+	}()
+	// Set the plugin resource key
+	r2.ResourceMap[defaultPluginResource] = router.DefaultPluginResourceKey
+
+	RegisterPluginResource(resource, r2.ResourceMap)
+	if action != "*" {
+		registerResourceAction(resource, action)
 	}
+
 	f := func(req *http.Request, res http.ResponseWriter) bool {
-		if r2.Permission == nil {
-			return true
+		if httpParams == nil {
+			return false
 		}
-		resource := r2.Permission.Resource
-		actions := []string{r2.Permission.Action}
-
+		actions := []string{action}
 		pathParameter := func(name string) string {
 			return httpParams.ByName(name)
 		}
@@ -749,6 +774,7 @@ func (p *rbacServiceImpl) CheckPluginRequestPerm(httpParams httprouter.Params, r
 			bcode.ReturnHTTPError(req, res, bcode.ErrForbidden)
 			return false
 		}
+
 		if !ra.Match(permissions) {
 			bcode.ReturnHTTPError(req, res, bcode.ErrForbidden)
 			return false
diff --git a/pkg/server/domain/service/rbac_test.go b/pkg/server/domain/service/rbac_test.go
index 87bc89e55..12e0fa6e4 100644
--- a/pkg/server/domain/service/rbac_test.go
+++ b/pkg/server/domain/service/rbac_test.go
@@ -24,10 +24,13 @@ import (
 	"testing"
 
 	"github.com/emicklei/go-restful/v3"
+	"github.com/julienschmidt/httprouter"
 	. "github.com/onsi/ginkgo"
 	. "github.com/onsi/gomega"
 	"github.com/stretchr/testify/assert"
 
+	"github.com/kubevela/velaux/pkg/plugin/router"
+	"github.com/kubevela/velaux/pkg/plugin/types"
 	"github.com/kubevela/velaux/pkg/server/domain/model"
 	"github.com/kubevela/velaux/pkg/server/infrastructure/datastore"
 	apisv1 "github.com/kubevela/velaux/pkg/server/interfaces/api/dto/v1"
@@ -167,19 +170,6 @@ var _ = Describe("Test rbac service", func() {
 
 		rbac.CheckPerm("component", "list")(restful.NewRequest(req), res, filter)
 		Expect(res.StatusCode()).Should(Equal(int(bcode.ErrForbidden.HTTPCode)))
-
-		// add list application permission to role
-		// err = Store.Add(context.TODO(), &model.Permission{Project: projectName, Name: "application-list", Resources: []string{"project:*/application:*"}, Actions: []string{"list"}})
-		// Expect(err).Should(BeNil())
-		// _, err = rbac.UpdateRole(context.TODO(), projectName, "application-admin", apisv1.UpdateRoleRequest{
-		// 	Permissions: []string{"application-list", "application-manage"},
-		// })
-		// Expect(err).Should(BeNil())
-
-		// req.Form.Del("project")
-		// pass = false
-		// rbac.CheckPerm("application", "list")(restful.NewRequest(req), res, filter)
-		// Expect(pass).Should(BeTrue())
 	})
 
 	It("Test initDefaultRoleAndUsersForProject", func() {
@@ -211,6 +201,92 @@ var _ = Describe("Test rbac service", func() {
 		Expect(err).Should(BeNil())
 		Expect(base.Alias).Should(BeEquivalentTo("App Management Update"))
 	})
+	It("TestCheckPluginRequestPerm", func() {
+		defer GinkgoRecover()
+
+		// Add the test user
+		err := ds.Add(context.TODO(), &model.Permission{Name: "test", Resources: []string{"plugin:p1/cluster:local/node"}, Actions: []string{"*"}})
+		Expect(err).Should(BeNil())
+		err = ds.Add(context.TODO(), &model.Role{Name: "test", Permissions: []string{"test"}})
+		Expect(err).Should(BeNil())
+		err = ds.Add(context.TODO(), &model.User{Name: "test", UserRoles: []string{"test"}})
+		Expect(err).Should(BeNil())
+
+		// Add the test2 user that not have the permission
+		err = ds.Add(context.TODO(), &model.Permission{Name: "test2", Resources: []string{"plugin:p2/*"}, Actions: []string{"*"}})
+		Expect(err).Should(BeNil())
+		err = ds.Add(context.TODO(), &model.Role{Name: "test2", Permissions: []string{"test2"}})
+		Expect(err).Should(BeNil())
+		err = ds.Add(context.TODO(), &model.User{Name: "test2", UserRoles: []string{"test2"}})
+		Expect(err).Should(BeNil())
+
+		rbacService := rbacServiceImpl{Store: ds}
+		checker := rbacService.CheckPluginRequestPerm(httprouter.Params{
+			{
+				Key:   "clusterName",
+				Value: "local",
+			},
+			{
+				Key:   "nodeName",
+				Value: "n1",
+			},
+			{
+				Key:   router.DefaultPluginResourceKey,
+				Value: "p1",
+			},
+		}, &types.Route{
+			Path: "/api/v1/clusters/:clusterName/nodes/:node",
+			ResourceMap: map[string]string{
+				"cluster": "clusterName",
+				"node":    "nodeName",
+			},
+			Permission: &types.Permission{
+				Resource: "cluster/node",
+				Action:   "detail",
+			},
+		})
+		Expect(ResourceMaps["plugin"].subResources["cluster"].subResources["node"].pathName).Should(Equal("nodeName"))
+		var res = &httptest.ResponseRecorder{}
+		var req = &http.Request{Method: "GET", URL: &url.URL{Scheme: "http", Path: "/proxy/plugins/p1/api/v1/clusters/local/nodes/n1", Host: "127.0.0.1"}}
+		req = req.WithContext(context.WithValue(context.TODO(), &apisv1.CtxKeyUser, "admin"))
+		Expect(checker(req, res)).Should(Equal(true))
+
+		req = req.WithContext(context.WithValue(context.TODO(), &apisv1.CtxKeyUser, "test"))
+		Expect(checker(req, res)).Should(Equal(true))
+
+		req = req.WithContext(context.WithValue(context.TODO(), &apisv1.CtxKeyUser, "test2"))
+		Expect(checker(req, res)).Should(Equal(false))
+
+		checker = rbacService.CheckPluginRequestPerm(httprouter.Params{
+			{
+				Key:   "clusterName",
+				Value: "local",
+			},
+			{
+				Key:   "pvName",
+				Value: "p1",
+			},
+			{
+				Key:   router.DefaultPluginResourceKey,
+				Value: "p2",
+			},
+		}, &types.Route{
+			Path: "/api/v1/clusters/:clusterName/pv/:pvName",
+			ResourceMap: map[string]string{
+				"cluster": "clusterName",
+				"pv":      "pvName",
+			},
+			Permission: &types.Permission{
+				Resource: "cluster/pv",
+				Action:   "detail",
+			},
+		})
+		res = &httptest.ResponseRecorder{}
+		req = &http.Request{Method: "GET", URL: &url.URL{Scheme: "http", Path: "/proxy/plugins/p1/api/v1/clusters/local/pv/p1", Host: "127.0.0.1"}}
+		req = req.WithContext(context.WithValue(context.TODO(), &apisv1.CtxKeyUser, "test2"))
+		Expect(checker(req, res)).Should(Equal(true))
+	})
+
 })
 
 func testPathParameter(name string) string {
diff --git a/pkg/server/domain/service/testdata/plugins/backend-kube-api-allow-route/module.js b/pkg/server/domain/service/testdata/plugins/backend-kube-api-allow-route/module.js
new file mode 100644
index 000000000..d4f60c243
--- /dev/null
+++ b/pkg/server/domain/service/testdata/plugins/backend-kube-api-allow-route/module.js
@@ -0,0 +1 @@
+console.log('backend kube api');
diff --git a/pkg/server/domain/service/testdata/plugins/backend-kube-api-allow-route/plugin.json b/pkg/server/domain/service/testdata/plugins/backend-kube-api-allow-route/plugin.json
new file mode 100644
index 000000000..b2b0b3d99
--- /dev/null
+++ b/pkg/server/domain/service/testdata/plugins/backend-kube-api-allow-route/plugin.json
@@ -0,0 +1,52 @@
+{
+  "type": "page-app",
+  "name": "Backend Kube API Allow Route",
+  "id": "backend-kube-api-allow-route",
+  "info": {
+    "keywords": [
+      "app"
+    ],
+    "description": "The app demo plugin",
+    "author": {
+      "name": "KubeVela"
+    },
+    "logos": {
+      "small": "img/logo.svg",
+      "large": "img/logo.svg"
+    },
+    "screenshots": [],
+    "version": "0.0.1",
+    "updated": "2023-03-30"
+  },
+  "backend": true,
+  "proxy": true,
+  "backendType": "kube-api",
+  "kubePermissions": [
+    {
+      "apiGroups": [
+        ""
+      ],
+      "resources": [
+        "nodes",
+        "nodes/status"
+      ],
+      "verbs": [
+        "get",
+        "list"
+      ]
+    }
+  ],
+  "routes": [
+    {
+      "path": "/api/v1/nodes",
+      "permission": {
+        "resource": "node",
+        "action": "detail"
+      }
+    }
+  ],
+  "dependencies": {
+    "velauxDependency": ">=1.8.0",
+    "plugins": []
+  }
+}
\ No newline at end of file
diff --git a/pkg/server/domain/service/testdata/plugins/backend-kube-api/module.js b/pkg/server/domain/service/testdata/plugins/backend-kube-api/module.js
new file mode 100644
index 000000000..d4f60c243
--- /dev/null
+++ b/pkg/server/domain/service/testdata/plugins/backend-kube-api/module.js
@@ -0,0 +1 @@
+console.log('backend kube api');
diff --git a/pkg/server/domain/service/testdata/plugins/backend-kube-api/plugin.json b/pkg/server/domain/service/testdata/plugins/backend-kube-api/plugin.json
new file mode 100644
index 000000000..107e314af
--- /dev/null
+++ b/pkg/server/domain/service/testdata/plugins/backend-kube-api/plugin.json
@@ -0,0 +1,43 @@
+{
+  "type": "page-app",
+  "name": "Backend Kube API",
+  "id": "backend-kube-api",
+  "info": {
+    "keywords": [
+      "app"
+    ],
+    "description": "The app demo plugin",
+    "author": {
+      "name": "KubeVela"
+    },
+    "logos": {
+      "small": "img/logo.svg",
+      "large": "img/logo.svg"
+    },
+    "screenshots": [],
+    "version": "0.0.1",
+    "updated": "2023-03-30"
+  },
+  "backend": true,
+  "proxy": true,
+  "backendType": "kube-api",
+  "kubePermissions": [
+    {
+      "apiGroups": [
+        ""
+      ],
+      "resources": [
+        "nodes",
+        "nodes/status"
+      ],
+      "verbs": [
+        "get",
+        "list"
+      ]
+    }
+  ],
+  "dependencies": {
+    "velauxDependency": ">=1.8.0",
+    "plugins": []
+  }
+}
\ No newline at end of file
diff --git a/pkg/server/domain/service/testdata/plugins/backend-kube-service/module.js b/pkg/server/domain/service/testdata/plugins/backend-kube-service/module.js
new file mode 100644
index 000000000..0c9b06168
--- /dev/null
+++ b/pkg/server/domain/service/testdata/plugins/backend-kube-service/module.js
@@ -0,0 +1 @@
+console.log('backend kube service');
diff --git a/pkg/server/domain/service/testdata/plugins/backend-kube-service/plugin.json b/pkg/server/domain/service/testdata/plugins/backend-kube-service/plugin.json
new file mode 100644
index 000000000..9467200c5
--- /dev/null
+++ b/pkg/server/domain/service/testdata/plugins/backend-kube-service/plugin.json
@@ -0,0 +1,31 @@
+{
+  "type": "page-app",
+  "name": "Backend Kube Service",
+  "id": "backend-kube-service",
+  "info": {
+    "keywords": [
+      "app"
+    ],
+    "description": "The app demo plugin",
+    "author": {
+      "name": "KubeVela"
+    },
+    "logos": {
+      "small": "img/logo.svg",
+      "large": "img/logo.svg"
+    },
+    "screenshots": [],
+    "version": "0.0.1",
+    "updated": "2023-03-30"
+  },
+  "backend": true,
+  "proxy": true,
+  "backendType": "kube-service",
+  "serviceDiscover": {
+    "name": "test"
+  },
+  "dependencies": {
+    "velauxDependency": ">=1.8.0",
+    "plugins": []
+  }
+}
\ No newline at end of file
diff --git a/pkg/server/domain/service/testdata/plugins/frontend/module.js b/pkg/server/domain/service/testdata/plugins/frontend/module.js
new file mode 100644
index 000000000..11df05977
--- /dev/null
+++ b/pkg/server/domain/service/testdata/plugins/frontend/module.js
@@ -0,0 +1 @@
+console.log('front end');
diff --git a/pkg/server/domain/service/testdata/plugins/frontend/plugin.json b/pkg/server/domain/service/testdata/plugins/frontend/plugin.json
new file mode 100644
index 000000000..f017d71f4
--- /dev/null
+++ b/pkg/server/domain/service/testdata/plugins/frontend/plugin.json
@@ -0,0 +1,41 @@
+{
+  "type": "page-app",
+  "name": "Frontend",
+  "id": "frontend",
+  "info": {
+    "keywords": [
+      "app"
+    ],
+    "description": "The app demo plugin",
+    "author": {
+      "name": "KubeVela"
+    },
+    "logos": {
+      "small": "img/logo.svg",
+      "large": "img/logo.svg"
+    },
+    "screenshots": [],
+    "version": "0.0.1",
+    "updated": "2023-03-30"
+  },
+  "includes": [
+    {
+      "workspace": {
+        "name": "continuous-delivery"
+      },
+      "type": "Workspace",
+      "label": "Custom App",
+      "name": "custom-app",
+      "to": "/plugins/frontend",
+      "relatedRoute": [
+        "/plugins/frontend"
+      ],
+      "icon": "",
+      "catalog": "Continuous Delivery"
+    }
+  ],
+  "dependencies": {
+    "velauxDependency": ">=1.8.0",
+    "plugins": []
+  }
+}
\ No newline at end of file
diff --git a/pkg/server/server.go b/pkg/server/server.go
index d5a9150e5..7fcc40e98 100644
--- a/pkg/server/server.go
+++ b/pkg/server/server.go
@@ -356,7 +356,7 @@ func (s *restServer) ServeHTTP(res http.ResponseWriter, req *http.Request) {
 		s.staticFiles(res, req, "./")
 		return
 	case strings.HasPrefix(req.URL.Path, PluginPublicRoutePath):
-		utils.NewFilterChain(s.getPluginAssets, api.AuthTokenCheck).ProcessFilter(req, res)
+		utils.NewFilterChain(s.getPluginAssets).ProcessFilter(req, res)
 		return
 	case strings.HasPrefix(req.URL.Path, PluginProxyRoutePath):
 		utils.NewFilterChain(s.proxyPluginBackend, api.AuthTokenCheck, api.AuthUserCheck(s.UserService)).ProcessFilter(req, res)
@@ -442,6 +442,7 @@ func (s *restServer) pluginBackendProxyHandler(w http.ResponseWriter, r *http.Re
 		return
 	}
 	r.URL.Path = strings.Replace(r.URL.Path, "/proxy/plugins/"+plugin.PluginID(), "", 1)
+	r = r.WithContext(context.WithValue(r.Context(), &proxy.RouteCtxKey, route))
 	pro.Handler(r, w)
 }
 
diff --git a/plugins/node-dashboard/.prettierrc.js b/plugins/node-dashboard/.prettierrc.js
new file mode 100644
index 000000000..a4df7366a
--- /dev/null
+++ b/plugins/node-dashboard/.prettierrc.js
@@ -0,0 +1,5 @@
+module.exports = {
+  trailingComma: 'es5',
+  singleQuote: true,
+  printWidth: 120,
+};
diff --git a/plugins/node-dashboard/package.json b/plugins/node-dashboard/package.json
index 24f189dd5..32c5dedb8 100644
--- a/plugins/node-dashboard/package.json
+++ b/plugins/node-dashboard/package.json
@@ -19,6 +19,7 @@
         "dev": "webpack -w -c ./.config/webpack/webpack.config.ts --env development"
     },
     "dependencies": {
+        "@kubernetes/client-node": "0.18.0",
         "@velaux/data": "0.0.1",
         "@velaux/ui": "1.8.0",
         "react": "17.0.2",
diff --git a/plugins/node-dashboard/src/components/App/index.tsx b/plugins/node-dashboard/src/components/App/index.tsx
index 7645293c5..88542bbe7 100644
--- a/plugins/node-dashboard/src/components/App/index.tsx
+++ b/plugins/node-dashboard/src/components/App/index.tsx
@@ -1,8 +1,70 @@
 import * as React from 'react';
-import { AppRootProps } from '@velaux/data';
+import { AppRootProps, Cluster } from '@velaux/data';
+import {getBackendSrv,showAlias, locale, Table, Select, Translation} from '@velaux/ui'
+import {NodeApi, V1NodeAddress, V1NodeCondition} from '@kubernetes/client-node'
+interface State {
+  clusters?: Array<Cluster>
+  selectCluster?: string
+  nodes?: Array<NodeApi>
+}
+export class App extends React.PureComponent<AppRootProps, State> {
+  
+  constructor(props: AppRootProps){
+    super(props);
+    this.state={}
+  }
+
+  componentDidMount(){
+    this.loadClusters()
+  }
 
-export class App extends React.PureComponent<AppRootProps> {
+  loadClusters = ()=> {
+    getBackendSrv().get("/api/v1/clusters").then((res: any)=>{
+      if (res) {
+        this.setState({clusters: res.clusters}, ()=>{
+          this.loadNodes()
+        })
+      }  
+    })
+  }
+  loadNodes = ()=> {
+    const {selectCluster} = this.state
+    const clusterName = selectCluster||"local"
+    getBackendSrv().get("/proxy/plugins/node-dashboard/api/v1/nodes?cluster="+clusterName).then((res: any)=>{
+      if (res) {
+        this.setState({nodes: res.items})
+      }  
+    })
+  }
   render() {
-    return <div className="page-container">Hello KubeVela Plugin Words!</div>;
+    const {clusters, nodes} = this.state
+    const clusterOptions = clusters?.map(c=>{
+      return {
+        label: showAlias(c),
+        value: c.name,
+      }
+    })
+    return <div className="page-container">
+      <div>
+        <span><Translation>Cluster</Translation></span>
+        <Select dataSource={clusterOptions} onChange={(v)=>{
+        this.setState({selectCluster: v})
+      }}>
+        </Select>
+        </div>
+      <div>
+        <Table dataSource={nodes} locale={locale().Table}>
+          <Table.Column key={"name"} title="Name" dataIndex={"metadata.name"}/>
+          <Table.Column key={"ip"} title="Address" dataIndex={"status.addresses"} cell={(address: V1NodeAddress[])=>{
+            return address.find(a=>a.type=="InternalIP")?.address
+          }}/>
+           <Table.Column key={"status"} title="Ready" dataIndex={"status.conditions"} cell={(address: V1NodeCondition[])=>{
+            return address.find(a=>a.type=="Ready")?.status
+          }}/>
+          <Table.Column key={"status"} title="Memory" dataIndex={"status.capacity.memory"} />
+          <Table.Column key={"status"} title="CPU" dataIndex={"status.capacity.cpu"} />
+        </Table>
+      </div>
+    </div>;
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 6a6917ce1..32c1d014e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2880,6 +2880,64 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@kubernetes/client-node@npm:0.18.0":
+  version: 0.18.0
+  resolution: "@kubernetes/client-node@npm:0.18.0"
+  dependencies:
+    "@types/js-yaml": ^4.0.1
+    "@types/node": ^10.12.0
+    "@types/request": ^2.47.1
+    "@types/ws": ^6.0.1
+    byline: ^5.0.0
+    execa: 5.0.0
+    isomorphic-ws: ^4.0.1
+    js-yaml: ^4.1.0
+    jsonpath-plus: ^0.19.0
+    openid-client: ^5.3.0
+    request: ^2.88.0
+    rfc4648: ^1.3.0
+    shelljs: ^0.8.5
+    stream-buffers: ^3.0.2
+    tar: ^6.1.11
+    tmp-promise: ^3.0.2
+    tslib: ^2.4.1
+    underscore: ^1.13.6
+    ws: ^7.3.1
+  dependenciesMeta:
+    openid-client:
+      optional: true
+  checksum: ea973ddf793b7351da5e1beaac461b8f2ae581cb6d65b62669f248f8cb345f0d54d4b888820fb49f471bc60bace37e706120f46d10d3726a63ccaed8b6cb401b
+  languageName: node
+  linkType: hard
+
+"@kubernetes/client-node@npm:0.18.1":
+  version: 0.18.1
+  resolution: "@kubernetes/client-node@npm:0.18.1"
+  dependencies:
+    "@types/js-yaml": ^4.0.1
+    "@types/node": ^18.11.17
+    "@types/request": ^2.47.1
+    "@types/ws": ^8.5.3
+    byline: ^5.0.0
+    isomorphic-ws: ^5.0.0
+    js-yaml: ^4.1.0
+    jsonpath-plus: ^7.2.0
+    openid-client: ^5.3.0
+    request: ^2.88.0
+    rfc4648: ^1.3.0
+    stream-buffers: ^3.0.2
+    tar: ^6.1.11
+    tmp-promise: ^3.0.2
+    tslib: ^2.4.1
+    underscore: ^1.13.6
+    ws: ^8.11.0
+  dependenciesMeta:
+    openid-client:
+      optional: true
+  checksum: 7205f10256f182a0292d483195fab7f4d9b500b3a47e6861dcf2fa8851c0bfd554e4f9a9f832ff76500efefb0422df2ecf2e378c5c3a4290e86abd8bc69ef11d
+  languageName: node
+  linkType: hard
+
 "@leichtgewicht/ip-codec@npm:^2.0.1":
   version: 2.0.4
   resolution: "@leichtgewicht/ip-codec@npm:2.0.4"
@@ -3651,6 +3709,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/caseless@npm:*":
+  version: 0.12.2
+  resolution: "@types/caseless@npm:0.12.2"
+  checksum: 430d15911184ad11e0a8aa21d1ec15fcc93b90b63570c37bf16ebd34457482bfc8de3f5eb6771e0ef986ce183270d4297823b0f492c346255967e78f7292388b
+  languageName: node
+  linkType: hard
+
 "@types/chai@npm:^4.2.11":
   version: 4.3.4
   resolution: "@types/chai@npm:4.3.4"
@@ -4009,6 +4074,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/node@npm:^10.12.0":
+  version: 10.17.60
+  resolution: "@types/node@npm:10.17.60"
+  checksum: 2cdb3a77d071ba8513e5e8306fa64bf50e3c3302390feeaeff1fd325dd25c8441369715dfc8e3701011a72fed5958c7dfa94eb9239a81b3c286caa4d97db6eef
+  languageName: node
+  linkType: hard
+
 "@types/node@npm:^14.14.31":
   version: 14.18.38
   resolution: "@types/node@npm:14.18.38"
@@ -4023,6 +4095,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/node@npm:^18.11.17":
+  version: 18.15.11
+  resolution: "@types/node@npm:18.15.11"
+  checksum: 977b4ad04708897ff0eb049ecf82246d210939c82461922d20f7d2dcfd81bbc661582ba3af28869210f7e8b1934529dcd46bff7d448551400f9d48b9d3bddec3
+  languageName: node
+  linkType: hard
+
 "@types/papaparse@npm:5.3.5":
   version: 5.3.5
   resolution: "@types/papaparse@npm:5.3.5"
@@ -4157,6 +4236,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/request@npm:^2.47.1":
+  version: 2.48.8
+  resolution: "@types/request@npm:2.48.8"
+  dependencies:
+    "@types/caseless": "*"
+    "@types/node": "*"
+    "@types/tough-cookie": "*"
+    form-data: ^2.5.0
+  checksum: 0b7754941e08205dce51635d894ec524df276d2b83ca13b9aab723f9281acecf1108841e9554494cb1cb60f6d6ddbb47ebea97392bcf2bf607f035b3a9b4af45
+  languageName: node
+  linkType: hard
+
 "@types/resolve@npm:1.20.2":
   version: 1.20.2
   resolution: "@types/resolve@npm:1.20.2"
@@ -4273,6 +4364,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/tough-cookie@npm:*":
+  version: 4.0.2
+  resolution: "@types/tough-cookie@npm:4.0.2"
+  checksum: e055556ffdaa39ad85ede0af192c93f93f986f4bd9e9426efdc2948e3e2632db3a4a584d4937dbf6d7620527419bc99e6182d3daf2b08685e710f2eda5291905
+  languageName: node
+  linkType: hard
+
 "@types/unist@npm:*, @types/unist@npm:^2.0.0":
   version: 2.0.6
   resolution: "@types/unist@npm:2.0.6"
@@ -4294,7 +4392,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/ws@npm:^8.5.1":
+"@types/ws@npm:^6.0.1":
+  version: 6.0.4
+  resolution: "@types/ws@npm:6.0.4"
+  dependencies:
+    "@types/node": "*"
+  checksum: b2656a76bfad0c17bb1e3fc237ba7122431c1373669977ed8edef45934c82f71c75d8c71f0a576dc6d98b0954fd94cae0166c6b4ccb40f7e0ee29cc92673519c
+  languageName: node
+  linkType: hard
+
+"@types/ws@npm:^8.5.1, @types/ws@npm:^8.5.3":
   version: 8.5.4
   resolution: "@types/ws@npm:8.5.4"
   dependencies:
@@ -4759,6 +4866,7 @@ __metadata:
   dependencies:
     "@babel/core": ^7.16.7
     "@grafana/tsconfig": ^1.2.0-rc1
+    "@kubernetes/client-node": 0.18.0
     "@swc/core": ^1.2.144
     "@swc/helpers": ^0.3.6
     "@swc/jest": ^0.2.20
@@ -4880,7 +4988,11 @@ __metadata:
     "@alifd/next": 1.26.14
     "@alifd/theme-2": 0.4.4
     "@grafana/tsconfig": ^1.2.0-rc1
+    "@kubernetes/client-node": 0.18.1
     "@pmmmwh/react-refresh-webpack-plugin": 0.5.1
+    "@rollup/plugin-commonjs": 23.0.2
+    "@rollup/plugin-json": 5.0.1
+    "@rollup/plugin-node-resolve": 15.0.1
     "@sentry/browser": 7.45.0
     "@testing-library/react": ^12.1.2
     "@types/base-64": ^1.0.0
@@ -4935,6 +5047,10 @@ __metadata:
     react-refresh: ^0.10.0
     redux: 4.1.2
     remark-gfm: 3.0.1
+    rollup: 2.79.1
+    rollup-plugin-dts: ^5.0.0
+    rollup-plugin-esbuild: 5.0.0
+    rollup-plugin-node-externals: ^5.0.0
     systemjs: 0.20.19
     ts-mocha: 10.0.0
     tslib: 2.4.1
@@ -7194,6 +7310,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"byline@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "byline@npm:5.0.0"
+  checksum: 737ca83e8eda2976728dae62e68bc733aea095fab08db4c6f12d3cee3cf45b6f97dce45d1f6b6ff9c2c947736d10074985b4425b31ce04afa1985a4ef3d334a7
+  languageName: node
+  linkType: hard
+
 "bytes@npm:1":
   version: 1.0.0
   resolution: "bytes@npm:1.0.0"
@@ -11348,6 +11471,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"execa@npm:5.0.0":
+  version: 5.0.0
+  resolution: "execa@npm:5.0.0"
+  dependencies:
+    cross-spawn: ^7.0.3
+    get-stream: ^6.0.0
+    human-signals: ^2.1.0
+    is-stream: ^2.0.0
+    merge-stream: ^2.0.0
+    npm-run-path: ^4.0.1
+    onetime: ^5.1.2
+    signal-exit: ^3.0.3
+    strip-final-newline: ^2.0.0
+  checksum: a044367ebdcc68ca019810cb134510fc77bbc55c799122258ee0e00e289c132941ab48c2a331a036699c42bc8d479d451ae67c105fce5ce5cc813e7dd92d642b
+  languageName: node
+  linkType: hard
+
 "execa@npm:^1.0.0":
   version: 1.0.0
   resolution: "execa@npm:1.0.0"
@@ -12089,6 +12229,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"form-data@npm:^2.5.0":
+  version: 2.5.1
+  resolution: "form-data@npm:2.5.1"
+  dependencies:
+    asynckit: ^0.4.0
+    combined-stream: ^1.0.6
+    mime-types: ^2.1.12
+  checksum: 5134ada56cc246b293a1ac7678dba6830000603a3979cf83ff7b2f21f2e3725202237cfb89e32bcb38a1d35727efbd3c3a22e65b42321e8ade8eec01ce755d08
+  languageName: node
+  linkType: hard
+
 "form-data@npm:^3.0.0":
   version: 3.0.1
   resolution: "form-data@npm:3.0.1"
@@ -12523,7 +12674,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob@npm:^7.0.3, glob@npm:^7.1.1, glob@npm:^7.1.2, glob@npm:^7.1.3, glob@npm:^7.1.4, glob@npm:^7.1.6":
+"glob@npm:^7.0.0, glob@npm:^7.0.3, glob@npm:^7.1.1, glob@npm:^7.1.2, glob@npm:^7.1.3, glob@npm:^7.1.4, glob@npm:^7.1.6":
   version: 7.2.3
   resolution: "glob@npm:7.2.3"
   dependencies:
@@ -13709,6 +13860,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"interpret@npm:^1.0.0":
+  version: 1.4.0
+  resolution: "interpret@npm:1.4.0"
+  checksum: 2e5f51268b5941e4a17e4ef0575bc91ed0ab5f8515e3cf77486f7c14d13f3010df9c0959f37063dcc96e78d12dc6b0bb1b9e111cdfe69771f4656d2993d36155
+  languageName: node
+  linkType: hard
+
 "interpret@npm:^2.2.0":
   version: 2.2.0
   resolution: "interpret@npm:2.2.0"
@@ -14469,6 +14627,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"isomorphic-ws@npm:^4.0.1":
+  version: 4.0.1
+  resolution: "isomorphic-ws@npm:4.0.1"
+  peerDependencies:
+    ws: "*"
+  checksum: d7190eadefdc28bdb93d67b5f0c603385aaf87724fa2974abb382ac1ec9756ed2cfb27065cbe76122879c2d452e2982bc4314317f3d6c737ddda6c047328771a
+  languageName: node
+  linkType: hard
+
+"isomorphic-ws@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "isomorphic-ws@npm:5.0.0"
+  peerDependencies:
+    ws: "*"
+  checksum: e20eb2aee09ba96247465fda40c6d22c1153394c0144fa34fe6609f341af4c8c564f60ea3ba762335a7a9c306809349f9b863c8beedf2beea09b299834ad5398
+  languageName: node
+  linkType: hard
+
 "isstream@npm:~0.1.2":
   version: 0.1.2
   resolution: "isstream@npm:0.1.2"
@@ -15618,6 +15794,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jose@npm:^4.10.0":
+  version: 4.13.1
+  resolution: "jose@npm:4.13.1"
+  checksum: 89be959573beee69bd443493887d78799fd42340b45afa2c6681beda30314bcdfa5575f6977203c199e4c3e0ec2fc18d3c94745e7f0d59db51dedfae0efee63d
+  languageName: node
+  linkType: hard
+
 "joycon@npm:^3.0.1, joycon@npm:^3.1.1":
   version: 3.1.1
   resolution: "joycon@npm:3.1.1"
@@ -15978,6 +16161,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jsonpath-plus@npm:^0.19.0":
+  version: 0.19.0
+  resolution: "jsonpath-plus@npm:0.19.0"
+  checksum: defd19990df6e45cb45c4c1c5185139995a5ead40967acc373b32375ace83d329bb96c0b69c0ae9a8c581b6c4bdb82f8b56766053c9251d4d9158161f1ba8d70
+  languageName: node
+  linkType: hard
+
+"jsonpath-plus@npm:^7.2.0":
+  version: 7.2.0
+  resolution: "jsonpath-plus@npm:7.2.0"
+  checksum: 05f447339d29be861e307d6e812aec1b9b88a3ba6bba286966a4e8bed3e752bee3d715eabfc21dce968be85ccb48bf79d2c1af78da7b9b74cd1b446d4d5d02f5
+  languageName: node
+  linkType: hard
+
 "jsprim@npm:^1.2.2":
   version: 1.4.2
   resolution: "jsprim@npm:1.4.2"
@@ -18374,6 +18571,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"oidc-token-hash@npm:^5.0.1":
+  version: 5.0.1
+  resolution: "oidc-token-hash@npm:5.0.1"
+  checksum: d62aa8c665f1a0133a3694785e4cd75f471364e6a2f4fbf7997e193a49ccf8f8de15596f475c7fdf8510d021c3b72f7ff6ab8bc5b07bff4cf21d490177f164a5
+  languageName: node
+  linkType: hard
+
 "on-finished@npm:2.4.1":
   version: 2.4.1
   resolution: "on-finished@npm:2.4.1"
@@ -18438,6 +18642,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"openid-client@npm:^5.3.0":
+  version: 5.4.0
+  resolution: "openid-client@npm:5.4.0"
+  dependencies:
+    jose: ^4.10.0
+    lru-cache: ^6.0.0
+    object-hash: ^2.0.1
+    oidc-token-hash: ^5.0.1
+  checksum: d198dbcaf0aa1d8b9f0f1d99ae30e90ec594eaf9ae668b5d61f2ee9af94a4460968d8dea7e53bd18903a1fb9c445e05aefca965bb88be3688a4bac273d1634d9
+  languageName: node
+  linkType: hard
+
 "opn@npm:^5.5.0":
   version: 5.5.0
   resolution: "opn@npm:5.5.0"
@@ -21645,6 +21861,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rechoir@npm:^0.6.2":
+  version: 0.6.2
+  resolution: "rechoir@npm:0.6.2"
+  dependencies:
+    resolve: ^1.1.6
+  checksum: fe76bf9c21875ac16e235defedd7cbd34f333c02a92546142b7911a0f7c7059d2e16f441fe6fb9ae203f459c05a31b2bcf26202896d89e390eda7514d5d2702b
+  languageName: node
+  linkType: hard
+
 "rechoir@npm:^0.7.0":
   version: 0.7.1
   resolution: "rechoir@npm:0.7.1"
@@ -22129,7 +22354,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@npm:^1.10.0, resolve@npm:^1.12.0, resolve@npm:^1.14.2, resolve@npm:^1.15.1, resolve@npm:^1.20.0, resolve@npm:^1.22.1, resolve@npm:^1.3.2, resolve@npm:^1.8.1, resolve@npm:^1.9.0":
+"resolve@npm:^1.1.6, resolve@npm:^1.10.0, resolve@npm:^1.12.0, resolve@npm:^1.14.2, resolve@npm:^1.15.1, resolve@npm:^1.20.0, resolve@npm:^1.22.1, resolve@npm:^1.3.2, resolve@npm:^1.8.1, resolve@npm:^1.9.0":
   version: 1.22.1
   resolution: "resolve@npm:1.22.1"
   dependencies:
@@ -22171,7 +22396,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@patch:resolve@^1.10.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.12.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.14.2#~builtin<compat/resolve>, resolve@patch:resolve@^1.15.1#~builtin<compat/resolve>, resolve@patch:resolve@^1.20.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.22.1#~builtin<compat/resolve>, resolve@patch:resolve@^1.3.2#~builtin<compat/resolve>, resolve@patch:resolve@^1.8.1#~builtin<compat/resolve>, resolve@patch:resolve@^1.9.0#~builtin<compat/resolve>":
+"resolve@patch:resolve@^1.1.6#~builtin<compat/resolve>, resolve@patch:resolve@^1.10.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.12.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.14.2#~builtin<compat/resolve>, resolve@patch:resolve@^1.15.1#~builtin<compat/resolve>, resolve@patch:resolve@^1.20.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.22.1#~builtin<compat/resolve>, resolve@patch:resolve@^1.3.2#~builtin<compat/resolve>, resolve@patch:resolve@^1.8.1#~builtin<compat/resolve>, resolve@patch:resolve@^1.9.0#~builtin<compat/resolve>":
   version: 1.22.1
   resolution: "resolve@patch:resolve@npm%3A1.22.1#~builtin<compat/resolve>::version=1.22.1&hash=c3c19d"
   dependencies:
@@ -22252,6 +22477,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rfc4648@npm:^1.3.0":
+  version: 1.5.2
+  resolution: "rfc4648@npm:1.5.2"
+  checksum: bc3d9c4fbfdbbb363c640f9cb56fc01d2e1ca64305b2b6409aaf59cb85c1adecb2545c03deee8889cce2685e15fb7dd47581665c288e4f45068ffece2642f2e8
+  languageName: node
+  linkType: hard
+
 "rfdc@npm:^1.3.0":
   version: 1.3.0
   resolution: "rfdc@npm:1.3.0"
@@ -22943,6 +23175,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"shelljs@npm:^0.8.5":
+  version: 0.8.5
+  resolution: "shelljs@npm:0.8.5"
+  dependencies:
+    glob: ^7.0.0
+    interpret: ^1.0.0
+    rechoir: ^0.6.2
+  bin:
+    shjs: bin/shjs
+  checksum: 7babc46f732a98f4c054ec1f048b55b9149b98aa2da32f6cf9844c434b43c6251efebd6eec120937bd0999e13811ebd45efe17410edb3ca938f82f9381302748
+  languageName: node
+  linkType: hard
+
 "shellwords@npm:^0.1.1":
   version: 0.1.1
   resolution: "shellwords@npm:0.1.1"
@@ -23491,6 +23736,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stream-buffers@npm:^3.0.2":
+  version: 3.0.2
+  resolution: "stream-buffers@npm:3.0.2"
+  checksum: b09fdeea606e3113ebd0e07010ed0cf038608fa396130add9e45deaff5cc3ba845dc25c31ad24f8341f85907846344cb7c85f75ea52c6572e2ac646e9b6072d0
+  languageName: node
+  linkType: hard
+
 "stream-each@npm:^1.1.0":
   version: 1.2.3
   resolution: "stream-each@npm:1.2.3"
@@ -24338,6 +24590,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tmp-promise@npm:^3.0.2":
+  version: 3.0.3
+  resolution: "tmp-promise@npm:3.0.3"
+  dependencies:
+    tmp: ^0.2.0
+  checksum: f854f5307dcee6455927ec3da9398f139897faf715c5c6dcee6d9471ae85136983ea06662eba2edf2533bdcb0fca66d16648e79e14381e30c7fb20be9c1aa62c
+  languageName: node
+  linkType: hard
+
 "tmp@npm:^0.0.33":
   version: 0.0.33
   resolution: "tmp@npm:0.0.33"
@@ -24347,7 +24608,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tmp@npm:~0.2.1":
+"tmp@npm:^0.2.0, tmp@npm:~0.2.1":
   version: 0.2.1
   resolution: "tmp@npm:0.2.1"
   dependencies:
@@ -24622,7 +24883,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:2.5.0, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.3.0, tslib@npm:^2.4.0":
+"tslib@npm:2.5.0, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.3.0, tslib@npm:^2.4.0, tslib@npm:^2.4.1":
   version: 2.5.0
   resolution: "tslib@npm:2.5.0"
   checksum: ae3ed5f9ce29932d049908ebfdf21b3a003a85653a9a140d614da6b767a93ef94f460e52c3d787f0e4f383546981713f165037dc2274df212ea9f8a4541004e1
@@ -24869,6 +25130,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"underscore@npm:^1.13.6":
+  version: 1.13.6
+  resolution: "underscore@npm:1.13.6"
+  checksum: d5cedd14a9d0d91dd38c1ce6169e4455bb931f0aaf354108e47bd46d3f2da7464d49b2171a5cf786d61963204a42d01ea1332a903b7342ad428deaafaf70ec36
+  languageName: node
+  linkType: hard
+
 "unicode-canonical-property-names-ecmascript@npm:^2.0.0":
   version: 2.0.0
   resolution: "unicode-canonical-property-names-ecmascript@npm:2.0.0"
@@ -26469,7 +26737,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ws@npm:^8.4.2":
+"ws@npm:^8.11.0, ws@npm:^8.4.2":
   version: 8.13.0
   resolution: "ws@npm:8.13.0"
   peerDependencies: