diff --git a/src/frontend/fill-lang.js b/src/frontend/fill-lang.js
new file mode 100644
index 000000000..4ba24ea97
--- /dev/null
+++ b/src/frontend/fill-lang.js
@@ -0,0 +1,35 @@
+const fs = require('fs');
+const path = require('path');
+
+const defaultValue = require('./src/assets/i18n/zh-Hans.json');
+// 添加语言后请在下边数组添加文件名
+const files = ['en'];
+function fill(target, source) {
+  if (target === undefined) target = {};
+  for(let key in source) {
+    if (typeof source[key] === 'object') {
+      target[key] = fill(target[key], source[key]);
+    } else {
+      if (!target[key]) {
+        target[key] = source[key];
+      }
+    }
+  }
+  return target;
+}
+for(let file of files) {
+  const filePath = path.resolve(__dirname, 'src/assets/i18n', file +'.json');
+  if (fs.existsSync(filePath)) {
+    let value = require(filePath);
+    if (typeof value !== 'object') {
+      value = {};
+    }
+    value = JSON.stringify(fill(value, defaultValue), null, 4);
+    fs.writeFile(filePath, value, 'utf8', err => {
+      if (err) throw error(err);
+      console.log('done');
+    })
+  } else {
+    throw error(`${file}.json不存在`)
+  }
+}
\ No newline at end of file
diff --git a/src/frontend/lib b/src/frontend/lib
index 6ff8cf3bf..7a9ca86f6 160000
--- a/src/frontend/lib
+++ b/src/frontend/lib
@@ -1 +1 @@
-Subproject commit 6ff8cf3bf2cca7f14fc72d3946b3a659d38299e8
+Subproject commit 7a9ca86f691a0b7760b61cd318906ac9519459a7
diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index 6dde5540d..4f112aa67 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -324,7 +324,6 @@
           "requires": {
             "anymatch": "1.3.2",
             "async-each": "1.0.1",
-            "fsevents": "1.2.4",
             "glob-parent": "2.0.0",
             "inherits": "2.0.3",
             "is-binary-path": "1.0.1",
@@ -496,6 +495,22 @@
         "webpack-sources": "1.1.0"
       }
     },
+    "@ngx-translate/core": {
+      "version": "11.0.1",
+      "resolved": "http://registry.npm.taobao.org/@ngx-translate/core/download/@ngx-translate/core-11.0.1.tgz",
+      "integrity": "sha1-zs761B8GNo9YWdrEj+yPzESFYV8=",
+      "requires": {
+        "tslib": "1.9.3"
+      }
+    },
+    "@ngx-translate/http-loader": {
+      "version": "4.0.0",
+      "resolved": "http://registry.npm.taobao.org/@ngx-translate/http-loader/download/@ngx-translate/http-loader-4.0.0.tgz",
+      "integrity": "sha1-ilVSSK1LfVE0YPzsnaJbBEeWLx0=",
+      "requires": {
+        "tslib": "1.9.3"
+      }
+    },
     "@schematics/angular": {
       "version": "0.7.5",
       "resolved": "http://registry.npm.taobao.org/@schematics/angular/download/@schematics/angular-0.7.5.tgz",
@@ -2165,7 +2180,6 @@
         "anymatch": "2.0.0",
         "async-each": "1.0.1",
         "braces": "2.3.2",
-        "fsevents": "1.2.4",
         "glob-parent": "3.1.0",
         "inherits": "2.0.3",
         "is-binary-path": "1.0.1",
@@ -4313,535 +4327,6 @@
       "resolved": "http://r.cnpmjs.org/fs.realpath/download/fs.realpath-1.0.0.tgz",
       "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
     },
-    "fsevents": {
-      "version": "1.2.4",
-      "resolved": "http://r.cnpmjs.org/fsevents/download/fsevents-1.2.4.tgz",
-      "integrity": "sha1-9B3LGvJYKvNpLaNvxVy9jhBBxCY=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "nan": "2.10.0",
-        "node-pre-gyp": "0.10.0"
-      },
-      "dependencies": {
-        "abbrev": {
-          "version": "1.1.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "ansi-regex": {
-          "version": "2.1.1",
-          "bundled": true,
-          "dev": true
-        },
-        "aproba": {
-          "version": "1.2.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "are-we-there-yet": {
-          "version": "1.1.4",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "delegates": "1.0.0",
-            "readable-stream": "2.3.6"
-          }
-        },
-        "balanced-match": {
-          "version": "1.0.0",
-          "bundled": true,
-          "dev": true
-        },
-        "brace-expansion": {
-          "version": "1.1.11",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "balanced-match": "1.0.0",
-            "concat-map": "0.0.1"
-          }
-        },
-        "chownr": {
-          "version": "1.0.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "code-point-at": {
-          "version": "1.1.0",
-          "bundled": true,
-          "dev": true
-        },
-        "concat-map": {
-          "version": "0.0.1",
-          "bundled": true,
-          "dev": true
-        },
-        "console-control-strings": {
-          "version": "1.1.0",
-          "bundled": true,
-          "dev": true
-        },
-        "core-util-is": {
-          "version": "1.0.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "debug": {
-          "version": "2.6.9",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "deep-extend": {
-          "version": "0.5.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "delegates": {
-          "version": "1.0.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "detect-libc": {
-          "version": "1.0.3",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "fs-minipass": {
-          "version": "1.2.5",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "minipass": "2.2.4"
-          }
-        },
-        "fs.realpath": {
-          "version": "1.0.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "gauge": {
-          "version": "2.7.4",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "aproba": "1.2.0",
-            "console-control-strings": "1.1.0",
-            "has-unicode": "2.0.1",
-            "object-assign": "4.1.1",
-            "signal-exit": "3.0.2",
-            "string-width": "1.0.2",
-            "strip-ansi": "3.0.1",
-            "wide-align": "1.1.2"
-          }
-        },
-        "glob": {
-          "version": "7.1.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "fs.realpath": "1.0.0",
-            "inflight": "1.0.6",
-            "inherits": "2.0.3",
-            "minimatch": "3.0.4",
-            "once": "1.4.0",
-            "path-is-absolute": "1.0.1"
-          }
-        },
-        "has-unicode": {
-          "version": "2.0.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "iconv-lite": {
-          "version": "0.4.21",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "safer-buffer": "2.1.2"
-          }
-        },
-        "ignore-walk": {
-          "version": "3.0.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "minimatch": "3.0.4"
-          }
-        },
-        "inflight": {
-          "version": "1.0.6",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "once": "1.4.0",
-            "wrappy": "1.0.2"
-          }
-        },
-        "inherits": {
-          "version": "2.0.3",
-          "bundled": true,
-          "dev": true
-        },
-        "ini": {
-          "version": "1.3.5",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "is-fullwidth-code-point": {
-          "version": "1.0.0",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "number-is-nan": "1.0.1"
-          }
-        },
-        "isarray": {
-          "version": "1.0.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "minimatch": {
-          "version": "3.0.4",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "brace-expansion": "1.1.11"
-          }
-        },
-        "minimist": {
-          "version": "0.0.8",
-          "bundled": true,
-          "dev": true
-        },
-        "minipass": {
-          "version": "2.2.4",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "safe-buffer": "5.1.1",
-            "yallist": "3.0.2"
-          }
-        },
-        "minizlib": {
-          "version": "1.1.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "minipass": "2.2.4"
-          }
-        },
-        "mkdirp": {
-          "version": "0.5.1",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "minimist": "0.0.8"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "needle": {
-          "version": "2.2.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "debug": "2.6.9",
-            "iconv-lite": "0.4.21",
-            "sax": "1.2.4"
-          }
-        },
-        "node-pre-gyp": {
-          "version": "0.10.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "detect-libc": "1.0.3",
-            "mkdirp": "0.5.1",
-            "needle": "2.2.0",
-            "nopt": "4.0.1",
-            "npm-packlist": "1.1.10",
-            "npmlog": "4.1.2",
-            "rc": "1.2.7",
-            "rimraf": "2.6.2",
-            "semver": "5.5.0",
-            "tar": "4.4.1"
-          }
-        },
-        "nopt": {
-          "version": "4.0.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "abbrev": "1.1.1",
-            "osenv": "0.1.5"
-          }
-        },
-        "npm-bundled": {
-          "version": "1.0.3",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "npm-packlist": {
-          "version": "1.1.10",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ignore-walk": "3.0.1",
-            "npm-bundled": "1.0.3"
-          }
-        },
-        "npmlog": {
-          "version": "4.1.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "are-we-there-yet": "1.1.4",
-            "console-control-strings": "1.1.0",
-            "gauge": "2.7.4",
-            "set-blocking": "2.0.0"
-          }
-        },
-        "number-is-nan": {
-          "version": "1.0.1",
-          "bundled": true,
-          "dev": true
-        },
-        "object-assign": {
-          "version": "4.1.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "once": {
-          "version": "1.4.0",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "wrappy": "1.0.2"
-          }
-        },
-        "os-homedir": {
-          "version": "1.0.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "os-tmpdir": {
-          "version": "1.0.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "osenv": {
-          "version": "0.1.5",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "os-homedir": "1.0.2",
-            "os-tmpdir": "1.0.2"
-          }
-        },
-        "path-is-absolute": {
-          "version": "1.0.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "process-nextick-args": {
-          "version": "2.0.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "rc": {
-          "version": "1.2.7",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "deep-extend": "0.5.1",
-            "ini": "1.3.5",
-            "minimist": "1.2.0",
-            "strip-json-comments": "2.0.1"
-          },
-          "dependencies": {
-            "minimist": {
-              "version": "1.2.0",
-              "bundled": true,
-              "dev": true,
-              "optional": true
-            }
-          }
-        },
-        "readable-stream": {
-          "version": "2.3.6",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "core-util-is": "1.0.2",
-            "inherits": "2.0.3",
-            "isarray": "1.0.0",
-            "process-nextick-args": "2.0.0",
-            "safe-buffer": "5.1.1",
-            "string_decoder": "1.1.1",
-            "util-deprecate": "1.0.2"
-          }
-        },
-        "rimraf": {
-          "version": "2.6.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "glob": "7.1.2"
-          }
-        },
-        "safe-buffer": {
-          "version": "5.1.1",
-          "bundled": true,
-          "dev": true
-        },
-        "safer-buffer": {
-          "version": "2.1.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "sax": {
-          "version": "1.2.4",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "semver": {
-          "version": "5.5.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "set-blocking": {
-          "version": "2.0.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "signal-exit": {
-          "version": "3.0.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "string-width": {
-          "version": "1.0.2",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "code-point-at": "1.1.0",
-            "is-fullwidth-code-point": "1.0.0",
-            "strip-ansi": "3.0.1"
-          }
-        },
-        "string_decoder": {
-          "version": "1.1.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "safe-buffer": "5.1.1"
-          }
-        },
-        "strip-ansi": {
-          "version": "3.0.1",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "ansi-regex": "2.1.1"
-          }
-        },
-        "strip-json-comments": {
-          "version": "2.0.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "tar": {
-          "version": "4.4.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chownr": "1.0.1",
-            "fs-minipass": "1.2.5",
-            "minipass": "2.2.4",
-            "minizlib": "1.1.0",
-            "mkdirp": "0.5.1",
-            "safe-buffer": "5.1.1",
-            "yallist": "3.0.2"
-          }
-        },
-        "util-deprecate": {
-          "version": "1.0.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "wide-align": {
-          "version": "1.1.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "string-width": "1.0.2"
-          }
-        },
-        "wrappy": {
-          "version": "1.0.2",
-          "bundled": true,
-          "dev": true
-        },
-        "yallist": {
-          "version": "3.0.2",
-          "bundled": true,
-          "dev": true
-        }
-      }
-    },
     "fstream": {
       "version": "1.0.11",
       "resolved": "http://r.cnpmjs.org/fstream/download/fstream-1.0.11.tgz",
@@ -6464,7 +5949,6 @@
           "requires": {
             "anymatch": "1.3.2",
             "async-each": "1.0.1",
-            "fsevents": "1.2.4",
             "glob-parent": "2.0.0",
             "inherits": "2.0.3",
             "is-binary-path": "1.0.1",
diff --git a/src/frontend/package.json b/src/frontend/package.json
index f4295b578..3a1efa6ce 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -24,6 +24,8 @@
     "@clr/angular": "^0.12.14",
     "@clr/icons": "^0.12.14",
     "@clr/ui": "^0.12.14",
+    "@ngx-translate/core": "^11.0.1",
+    "@ngx-translate/http-loader": "^4.0.0",
     "@webcomponents/custom-elements": "^1.1.2",
     "ace": "^1.3.0",
     "bootstrap": "^4.0.0-alpha.5",
diff --git a/src/frontend/src/app/admin/apikey/create-edit-apikey/create-edit-apikey.component.html b/src/frontend/src/app/admin/apikey/create-edit-apikey/create-edit-apikey.component.html
index a0b8493b3..3155d5aa4 100644
--- a/src/frontend/src/app/admin/apikey/create-edit-apikey/create-edit-apikey.component.html
+++ b/src/frontend/src/app/admin/apikey/create-edit-apikey/create-edit-apikey.component.html
@@ -6,7 +6,7 @@ <h3 class="modal-title">{{title}}</h3>
       <section class="form-block">
         <div class="form-group row">
           <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
-            <label for="name" class="required">名称</label>
+            <label for="name" class="required">{{'TITLE.NAME' | translate}}</label>
           </div>
           <div class="col-lg-8 col-md-4 col-sm-12 col-xs-12">
             <input class="form-control"
@@ -78,7 +78,7 @@ <h3 class="modal-title">{{title}}</h3>
         </div>
         <div class="form-group row">
           <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
-            <label for="description">描述</label>
+            <label for="description">{{'TITLE.DESCRIPTION' | translate}}</label>
           </div>
           <div class="col-lg-8 col-md-4 col-sm-12 col-xs-12">
               <textarea class="form-control"
@@ -91,8 +91,8 @@ <h3 class="modal-title">{{title}}</h3>
         </div>
         <div class="modal-footer">
 
-          <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-          <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+          <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+          <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
         </div>
       </section>
     </form>
diff --git a/src/frontend/src/app/admin/apikey/list-apikey/list-apikey.component.html b/src/frontend/src/app/admin/apikey/list-apikey/list-apikey.component.html
index 9138dd97c..258c40128 100644
--- a/src/frontend/src/app/admin/apikey/list-apikey/list-apikey.component.html
+++ b/src/frontend/src/app/admin/apikey/list-apikey/list-apikey.component.html
@@ -3,7 +3,7 @@
     <ng-container *clrDgHideableColumn="{hidden: false}">ID</ng-container>
   </clr-dg-column>
   <clr-dg-column [clrDgField]="'name'">
-    <ng-container *clrDgHideableColumn="{hidden: false}">名称</ng-container>
+    <ng-container *clrDgHideableColumn="{hidden: false}">{{'TITLE.NAME' | translate}}</ng-container>
   </clr-dg-column>
   <clr-dg-column class="col-type">
     <ng-container *clrDgHideableColumn="{hidden: false}">类型</ng-container>
@@ -18,16 +18,16 @@
     <ng-container *clrDgHideableColumn="{hidden: false}">资源ID</ng-container>
   </clr-dg-column>
   <clr-dg-column class="col-time">
-    <ng-container *clrDgHideableColumn="{hidden: false}">创建时间</ng-container>
+    <ng-container *clrDgHideableColumn="{hidden: false}">{{'TITLE.CREATE_TIME' | translate}}</ng-container>
   </clr-dg-column>
   <clr-dg-column>
     <ng-container *clrDgHideableColumn="{hidden: false}">过期时间(s)</ng-container>
   </clr-dg-column>
   <clr-dg-column class="col-user">
-    <ng-container *clrDgHideableColumn="{hidden: false}">创建者</ng-container>
+    <ng-container *clrDgHideableColumn="{hidden: false}">{{'TITLE.CREATE_USER' | translate}}</ng-container>
   </clr-dg-column>
   <clr-dg-column>
-    <ng-container *clrDgHideableColumn="{hidden: false}">描述</ng-container>
+    <ng-container *clrDgHideableColumn="{hidden: false}">{{'TITLE.DESCRIPTION' | translate}}</ng-container>
   </clr-dg-column>
 
   <clr-dg-row *ngFor="let apiKey of apiKeys" [clrDgItem]="apiKey">
diff --git a/src/frontend/src/app/admin/app/create-edit-app/create-edit-app.component.html b/src/frontend/src/app/admin/app/create-edit-app/create-edit-app.component.html
index e1d81a3f0..05a6d71a1 100644
--- a/src/frontend/src/app/admin/app/create-edit-app/create-edit-app.component.html
+++ b/src/frontend/src/app/admin/app/create-edit-app/create-edit-app.component.html
@@ -14,7 +14,7 @@ <h3 class="modal-title">{{appTitle}}</h3>
           </div>
         </div>
         <div class="form-group" style="padding-left: 135px;">
-          <label for="app_name" class="col-md-3 form-group-label-override required">名称</label>
+          <label for="app_name" class="col-md-3 form-group-label-override required">{{'TITLE.NAME' | translate}}</label>
           <label for="app_name" aria-haspopup="true" role="tooltip" [class.invalid]="!isNameValid" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left form-control">
             <input class="form-control" type="text" id="app_name"  [(ngModel)]="app.name"
                    name="app_name" size="32"
@@ -34,7 +34,7 @@ <h3 class="modal-title">{{appTitle}}</h3>
           <wayne-ace-editor-box></wayne-ace-editor-box>
         </div>
         <div class="form-group" style="padding-left: 135px;">
-          <label for="app_description" class="col-md-3 form-group-label-override">描述</label>
+          <label for="app_description" class="col-md-3 form-group-label-override">{{'TITLE.DESCRIPTION' | translate}}</label>
           <textarea id="app_description" [(ngModel)]="app.description"
                     name="app_description"
                     rows="3">
@@ -43,8 +43,8 @@ <h3 class="modal-title">{{appTitle}}</h3>
         </div>
         <div class="modal-footer">
 
-          <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-          <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+          <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+          <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
         </div>
       </section>
     </form>
diff --git a/src/frontend/src/app/admin/app/list-app/list-app.component.html b/src/frontend/src/app/admin/app/list-app/list-app.component.html
index d777d8552..2e825faaf 100644
--- a/src/frontend/src/app/admin/app/list-app/list-app.component.html
+++ b/src/frontend/src/app/admin/app/list-app/list-app.component.html
@@ -26,18 +26,18 @@
   </clr-dg-column>
   <clr-dg-column [clrDgField]="'user'" class="col-user">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建者
+      {{'TITLE.CREATE_USER' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column [clrDgSortBy]="'createTime'" class="col-time">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建时间
+      {{'TITLE.CREATE_TIME' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-row *ngFor="let app of apps" [clrDgItem]="app">
     <clr-dg-action-overflow >
       <button class="action-item" (click)="editApp(app)" >编辑</button>
-      <button class="action-item" (click)="deleteApp(app)">删除</button>
+      <button class="action-item" (click)="deleteApp(app)">{{'BUTTON.DELETE' | translate}}</button>
     </clr-dg-action-overflow>
       <clr-dg-cell class="col-id">{{app.id}}</clr-dg-cell>
       <clr-dg-cell class="col-app-name copy"><a href="javascript:void(0)" (click)="goToLink(app, 'deploy')">{{app.name}}</a></clr-dg-cell>
diff --git a/src/frontend/src/app/admin/app/trash-app/trash-app.component.html b/src/frontend/src/app/admin/app/trash-app/trash-app.component.html
index 2e870324d..4726fcc37 100644
--- a/src/frontend/src/app/admin/app/trash-app/trash-app.component.html
+++ b/src/frontend/src/app/admin/app/trash-app/trash-app.component.html
@@ -26,12 +26,12 @@ <h2 class="header-title">已删除项目列表</h2>
       </clr-dg-column>
       <clr-dg-column [clrDgField]="'user'">
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          创建者
+          {{'TITLE.CREATE_USER' | translate}}
         </ng-container>
       </clr-dg-column>
       <clr-dg-column [clrDgSortBy]="'createTime'" class="col-time">
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          创建时间
+          {{'TITLE.CREATE_TIME' | translate}}
         </ng-container>
       </clr-dg-column>
       <clr-dg-row *ngFor="let app of apps" [clrDgItem]="app">
diff --git a/src/frontend/src/app/admin/auditlog/auditlog.component.html b/src/frontend/src/app/admin/auditlog/auditlog.component.html
index 4a9788479..2682396d7 100644
--- a/src/frontend/src/app/admin/auditlog/auditlog.component.html
+++ b/src/frontend/src/app/admin/auditlog/auditlog.component.html
@@ -30,7 +30,7 @@ <h2 class="header-title">审计日志列表</h2>
     <ng-container *clrDgHideableColumn="{hidden: false}">日期</ng-container>
   </clr-dg-column>
   <clr-dg-column>
-    <ng-container *clrDgHideableColumn="{hidden: false}">操作详情</ng-container>
+    <ng-container *clrDgHideableColumn="{hidden: false}">{{'BUTTON.DETAIL' | translate}}</ng-container>
   </clr-dg-column>
 
   <clr-dg-row *ngFor="let al of auditLogs" [clrDgItem]="al">
diff --git a/src/frontend/src/app/admin/cluster/create-edit-cluster/create-edit-cluster.component.html b/src/frontend/src/app/admin/cluster/create-edit-cluster/create-edit-cluster.component.html
index 7bd9ca84c..40e385108 100644
--- a/src/frontend/src/app/admin/cluster/create-edit-cluster/create-edit-cluster.component.html
+++ b/src/frontend/src/app/admin/cluster/create-edit-cluster/create-edit-cluster.component.html
@@ -6,7 +6,7 @@ <h3 class="modal-title">{{title}}
     <form #ngForm="ngForm">
       <section class="form-block">
         <div class="form-group" style="padding-left: 135px;">
-          <label for="name" class="col-md-3 form-group-label-override required">名称</label>
+          <label for="name" class="col-md-3 form-group-label-override required">{{'TITLE.NAME' | translate}}</label>
           <label for="name" aria-haspopup="true" role="tooltip" [class.invalid]="!isNameValid" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left form-control">
             <input class="form-control" type="text" id="name"  [(ngModel)]="cluster.name"
                    name="name" size="24"
@@ -59,7 +59,7 @@ <h3 style="margin-top: 0">配置说明</h3>
           <wayne-ace-editor-box #metaData></wayne-ace-editor-box>
         </div>
         <div class="form-group" style="padding-left: 135px;">
-          <label for="description" class="col-md-3 form-group-label-override">描述</label>
+          <label for="description" class="col-md-3 form-group-label-override">{{'TITLE.DESCRIPTION' | translate}}</label>
           <textarea id="description" [(ngModel)]="cluster.description"
                     name="description"
                     rows="3">
@@ -69,8 +69,8 @@ <h3 style="margin-top: 0">配置说明</h3>
       </section>
     </form>
     <div class="modal-footer">
-      <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-      <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+      <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+      <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
     </div>
   </div>
 
diff --git a/src/frontend/src/app/admin/cluster/list-cluster/list-cluster.component.html b/src/frontend/src/app/admin/cluster/list-cluster/list-cluster.component.html
index e67e41eb3..a7dd4ecc2 100644
--- a/src/frontend/src/app/admin/cluster/list-cluster/list-cluster.component.html
+++ b/src/frontend/src/app/admin/cluster/list-cluster/list-cluster.component.html
@@ -36,18 +36,18 @@
   </clr-dg-column>
   <clr-dg-column class="col-user">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建者
+      {{'TITLE.CREATE_USER' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column class="col-time">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建时间
+      {{'TITLE.CREATE_TIME' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-row *ngFor="let cluster of clusters" [clrDgItem]="cluster">
     <clr-dg-action-overflow >
       <button class="action-item" (click)="editCluster(cluster)" >编辑</button>
-      <button class="action-item" (click)="deleteCluster(cluster)">删除</button>
+      <button class="action-item" (click)="deleteCluster(cluster)">{{'BUTTON.DELETE' | translate}}</button>
     </clr-dg-action-overflow>
       <clr-dg-cell class="col-id">{{cluster.id}}</clr-dg-cell>
       <clr-dg-cell class="col-cluster-name copy">{{cluster.name}}</clr-dg-cell>
diff --git a/src/frontend/src/app/admin/cluster/trash-cluster/trash-cluster.component.html b/src/frontend/src/app/admin/cluster/trash-cluster/trash-cluster.component.html
index 2fd90bb89..86db9b5b0 100644
--- a/src/frontend/src/app/admin/cluster/trash-cluster/trash-cluster.component.html
+++ b/src/frontend/src/app/admin/cluster/trash-cluster/trash-cluster.component.html
@@ -26,12 +26,12 @@ <h2 class="header-title">已删除集群列表</h2>
       </clr-dg-column>
       <clr-dg-column>
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          创建者
+          {{'TITLE.CREATE_USER' | translate}}
         </ng-container>
       </clr-dg-column>
       <clr-dg-column>
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          创建时间
+          {{'TITLE.CREATE_TIME' | translate}}
         </ng-container>
       </clr-dg-column>
       <clr-dg-row *ngFor="let cluster of clusters" [clrDgItem]="cluster">
diff --git a/src/frontend/src/app/admin/config/create-edit-config/create-edit-config.component.html b/src/frontend/src/app/admin/config/create-edit-config/create-edit-config.component.html
index bc4150f59..5c60af488 100644
--- a/src/frontend/src/app/admin/config/create-edit-config/create-edit-config.component.html
+++ b/src/frontend/src/app/admin/config/create-edit-config/create-edit-config.component.html
@@ -20,8 +20,8 @@ <h3 class="modal-title">{{title}}</h3>
       </section>
     </form>
     <div class="modal-footer">
-      <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-      <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+      <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+      <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
     </div>
   </div>
 
diff --git a/src/frontend/src/app/admin/config/list-config/list-config.component.html b/src/frontend/src/app/admin/config/list-config/list-config.component.html
index 9e658e158..d932e9b20 100644
--- a/src/frontend/src/app/admin/config/list-config/list-config.component.html
+++ b/src/frontend/src/app/admin/config/list-config/list-config.component.html
@@ -17,7 +17,7 @@
   <clr-dg-row *ngFor="let config of configs" [clrDgItem]="config">
     <clr-dg-action-overflow>
       <button class="action-item" (click)="editConfig(config)">编辑</button>
-      <button class="action-item" (click)="deleteConfig(config)">删除</button>
+      <button class="action-item" (click)="deleteConfig(config)">{{'BUTTON.DELETE' | translate}}</button>
     </clr-dg-action-overflow>
     <clr-dg-cell class="col-id">{{config.id}}</clr-dg-cell>
     <clr-dg-cell class="col-key">{{config.name}}</clr-dg-cell>
diff --git a/src/frontend/src/app/admin/configmap/configmap.component.html b/src/frontend/src/app/admin/configmap/configmap.component.html
index 412ee11b0..ff49f47c4 100644
--- a/src/frontend/src/app/admin/configmap/configmap.component.html
+++ b/src/frontend/src/app/admin/configmap/configmap.component.html
@@ -5,7 +5,7 @@ <h2 class="header-title">配置集列表</h2>
     </div>
     <div class="row flex-items-xs-between" style="height:32px;">
       <div class="option-left">
-        <button class="btn btn-link" (click)="openModal()"><clr-icon shape="add"></clr-icon>创建配置集</button>
+        <button class="btn btn-link" (click)="openModal()"><clr-icon shape="add"></clr-icon>{{'CONFIGMAP.CREATE' | translate}}</button>
         <create-edit-configmap (create)="createConfigMap($event)"></create-edit-configmap>
       </div>
     </div>
diff --git a/src/frontend/src/app/admin/configmap/create-edit-configmap/create-edit-configmap.component.html b/src/frontend/src/app/admin/configmap/create-edit-configmap/create-edit-configmap.component.html
index 307904829..559b0d7ca 100644
--- a/src/frontend/src/app/admin/configmap/create-edit-configmap/create-edit-configmap.component.html
+++ b/src/frontend/src/app/admin/configmap/create-edit-configmap/create-edit-configmap.component.html
@@ -4,7 +4,7 @@ <h3 class="modal-title">{{title}}</h3>
     <form #ngForm="ngForm">
       <section class="form-block">
         <div class="form-group" style="padding-left: 135px;">
-          <label for="app_id" class="col-md-3 form-group-label-override required">项目</label>
+          <label for="app_id" class="col-md-3 form-group-label-override required">应用</label>
           <div class="select form-control">
             <select id="app_id" [(ngModel)]="configMap.appId" [disabled]="actionType==1" name="app_id">
               <!--这是一个坑，如果使用value获取到的是string，使用ngValue获取到的是model本身类型-->
@@ -14,7 +14,7 @@ <h3 class="modal-title">{{title}}</h3>
           </div>
         </div>
         <div class="form-group" style="padding-left: 135px;">
-          <label for="name" class="col-md-3 form-group-label-override required">名称</label>
+          <label for="name" class="col-md-3 form-group-label-override required">{{'TITLE.NAME' | translate}}</label>
           <label for="name" aria-haspopup="true" role="tooltip" [class.invalid]="!isNameValid" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left form-control">
             <input class="form-control" type="text" id="name"  [(ngModel)]="configMap.name"
                    name="name" size="32"
@@ -24,7 +24,7 @@ <h3 class="modal-title">{{title}}</h3>
                    pattern="[a-z]([-a-z0-9]*[a-z0-9])?"
                    (keyup)='handleValidation()'>
             <span class="tooltip-content">
-              配置集名称不符合规范，验证规则[a-z]([-a-z0-9]*[a-z0-9])?
+              {{'RULE.REGEXT' | translate}}[a-z]([-a-z0-9]*[a-z0-9])?
             </span>
           </label>
           <span class="spinner spinner-inline" [hidden]="!checkOnGoing"></span>
@@ -34,7 +34,7 @@ <h3 class="modal-title">{{title}}</h3>
           <wayne-ace-editor-box></wayne-ace-editor-box>
         </div>
         <div class="form-group" style="padding-left: 135px;">
-          <label for="description" class="col-md-3 form-group-label-override">描述</label>
+          <label for="description" class="col-md-3 form-group-label-override">{{'TITLE.DESCRIPTION' | translate}}</label>
           <textarea id="description" [(ngModel)]="configMap.description"
                     name="description"
                     rows="3">
@@ -42,8 +42,8 @@ <h3 class="modal-title">{{title}}</h3>
         </div>
         <div class="modal-footer">
 
-          <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-          <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+          <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+          <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
         </div>
       </section>
     </form>
diff --git a/src/frontend/src/app/admin/configmap/list-configmap/list-configmap.component.html b/src/frontend/src/app/admin/configmap/list-configmap/list-configmap.component.html
index 63062be4c..300d21005 100644
--- a/src/frontend/src/app/admin/configmap/list-configmap/list-configmap.component.html
+++ b/src/frontend/src/app/admin/configmap/list-configmap/list-configmap.component.html
@@ -26,18 +26,18 @@
   </clr-dg-column>
   <clr-dg-column [clrDgField]="'user'">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建者
+      {{'TITLE.CREATE_USER' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column [clrDgSortBy]="'createTime'" class="col-time">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建时间
+      {{'TITLE.CREATE_TIME' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-row *ngFor="let configMap of configMaps" [clrDgItem]="configMap">
     <clr-dg-action-overflow >
       <button class="action-item" (click)="editConfigMap(configMap)" >编辑</button>
-      <button class="action-item" (click)="deleteConfigMap(configMap)">删除</button>
+      <button class="action-item" (click)="deleteConfigMap(configMap)">{{'BUTTON.DELETE' | translate}}</button>
     </clr-dg-action-overflow>
       <clr-dg-cell class="col-query-id">{{configMap.id}}</clr-dg-cell>
       <clr-dg-cell class="col-app-name copy"><a href="javascript:void(0)" (click)="goToLink(configMap, 'tpl')">{{configMap.name}}</a></clr-dg-cell>
diff --git a/src/frontend/src/app/admin/configmap/trash-configmap/trash-configmap.component.html b/src/frontend/src/app/admin/configmap/trash-configmap/trash-configmap.component.html
index 82ba27400..e86816bef 100644
--- a/src/frontend/src/app/admin/configmap/trash-configmap/trash-configmap.component.html
+++ b/src/frontend/src/app/admin/configmap/trash-configmap/trash-configmap.component.html
@@ -26,12 +26,12 @@ <h2 class="header-title">已删除配置集列表</h2>
       </clr-dg-column>
       <clr-dg-column [clrDgField]="'user'">
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          创建者
+          {{'TITLE.CREATE_USER' | translate}}
         </ng-container>
       </clr-dg-column>
       <clr-dg-column [clrDgSortBy]="'createTime'" class="col-time">
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          创建时间
+          {{'TITLE.CREATE_TIME' | translate}}
         </ng-container>
       </clr-dg-column>
       <clr-dg-row *ngFor="let configMap of configMaps" [clrDgItem]="configMap">
diff --git a/src/frontend/src/app/admin/configmaptpl/configmaptpl.component.html b/src/frontend/src/app/admin/configmaptpl/configmaptpl.component.html
index 230a31914..ebcbe0526 100644
--- a/src/frontend/src/app/admin/configmaptpl/configmaptpl.component.html
+++ b/src/frontend/src/app/admin/configmaptpl/configmaptpl.component.html
@@ -5,7 +5,7 @@ <h2 class="header-title">配置集模版列表</h2>
     </div>
     <div class="row flex-items-xs-between" style="height:32px;">
       <div class="option-left">
-        <button class="btn btn-link" (click)="openModal()"><clr-icon shape="add"></clr-icon>创建配置集模版</button>
+        <button class="btn btn-link" (click)="openModal()"><clr-icon shape="add"></clr-icon>{{'CONFIGMAP.CREATE_TMP' | translate}}</button>
         <create-edit-configmaptpl (create)="createConfigMapTpl($event)"></create-edit-configmaptpl>
       </div>
     </div>
diff --git a/src/frontend/src/app/admin/configmaptpl/create-edit-configmaptpl/create-edit-configmaptpl.component.html b/src/frontend/src/app/admin/configmaptpl/create-edit-configmaptpl/create-edit-configmaptpl.component.html
index 75fc6ef2b..b1a22d871 100644
--- a/src/frontend/src/app/admin/configmaptpl/create-edit-configmaptpl/create-edit-configmaptpl.component.html
+++ b/src/frontend/src/app/admin/configmaptpl/create-edit-configmaptpl/create-edit-configmaptpl.component.html
@@ -16,7 +16,7 @@ <h3 class="modal-title">{{title}}
           </div>
         </div>
         <div class="form-group" style="padding-left: 135px;">
-          <label for="description" class="col-md-3 form-group-label-override">描述</label>
+          <label for="description" class="col-md-3 form-group-label-override">{{'TITLE.DESCRIPTION' | translate}}</label>
           <textarea id="description" [(ngModel)]="configMapTpl.description"
                     name="description"
                     rows="3">
@@ -31,7 +31,7 @@ <h3 class="modal-title">{{title}}
     </form>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+    <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
   </div>
 </clr-modal>
diff --git a/src/frontend/src/app/admin/configmaptpl/list-configmaptpl/list-configmaptpl.component.html b/src/frontend/src/app/admin/configmaptpl/list-configmaptpl/list-configmaptpl.component.html
index cc56a3edd..35fa5046b 100644
--- a/src/frontend/src/app/admin/configmaptpl/list-configmaptpl/list-configmaptpl.component.html
+++ b/src/frontend/src/app/admin/configmaptpl/list-configmaptpl/list-configmaptpl.component.html
@@ -16,18 +16,18 @@
   </clr-dg-column>
   <clr-dg-column [clrDgField]="'user'">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建者
+      {{'TITLE.CREATE_USER' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column [clrDgSortBy]="'createTime'">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建时间
+      {{'TITLE.CREATE_TIME' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-row *ngFor="let configMapTpl of configMapTpls" [clrDgItem]="configMapTpl">
     <clr-dg-action-overflow>
       <button class="action-item" (click)="editConfigMapTpl(configMapTpl)" >编辑</button>
-      <button class="action-item" (click)="deleteConfigMapTpl(configMapTpl)">删除</button>
+      <button class="action-item" (click)="deleteConfigMapTpl(configMapTpl)">{{'BUTTON.DELETE' | translate}}</button>
     </clr-dg-action-overflow>
     <clr-dg-cell>{{configMapTpl.id}}</clr-dg-cell>
     <clr-dg-cell class="copy">{{configMapTpl.name}}</clr-dg-cell>
diff --git a/src/frontend/src/app/admin/configmaptpl/trash-configmaptpl/trash-configmaptpl.component.html b/src/frontend/src/app/admin/configmaptpl/trash-configmaptpl/trash-configmaptpl.component.html
index 5a4289a24..1348f5243 100644
--- a/src/frontend/src/app/admin/configmaptpl/trash-configmaptpl/trash-configmaptpl.component.html
+++ b/src/frontend/src/app/admin/configmaptpl/trash-configmaptpl/trash-configmaptpl.component.html
@@ -21,12 +21,12 @@ <h2 class="header-title">已删除配置集模版列表</h2>
       </clr-dg-column>
       <clr-dg-column [clrDgField]="'user'">
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          创建者
+          {{'TITLE.CREATE_USER' | translate}}
         </ng-container>
       </clr-dg-column>
       <clr-dg-column [clrDgSortBy]="'createTime'">
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          创建时间
+          {{'TITLE.CREATE_TIME' | translate}}
         </ng-container>
       </clr-dg-column>
       <clr-dg-row *ngFor="let configMapTpl of configMapTpls" [clrDgItem]="configMapTpl">
diff --git a/src/frontend/src/app/admin/cronjob/create-edit-cronjob/create-edit-cronjob.component.html b/src/frontend/src/app/admin/cronjob/create-edit-cronjob/create-edit-cronjob.component.html
index 830dc6471..d3e524a81 100644
--- a/src/frontend/src/app/admin/cronjob/create-edit-cronjob/create-edit-cronjob.component.html
+++ b/src/frontend/src/app/admin/cronjob/create-edit-cronjob/create-edit-cronjob.component.html
@@ -4,7 +4,7 @@ <h3 class="modal-title">{{title}}</h3>
     <form #ngForm="ngForm">
       <section class="form-block">
         <div class="form-group" style="padding-left: 135px;">
-          <label for="app_id" class="col-md-3 form-group-label-override required">项目</label>
+          <label for="app_id" class="col-md-3 form-group-label-override required">应用</label>
           <div class="select form-control">
             <select id="app_id" [(ngModel)]="cronjob.appId" [disabled]="actionType==1" name="app_id">
               <!--这是一个坑，如果使用value获取到的是string，使用ngValue获取到的是model本身类型-->
@@ -14,7 +14,7 @@ <h3 class="modal-title">{{title}}</h3>
           </div>
         </div>
         <div class="form-group" style="padding-left: 135px;">
-          <label for="name" class="col-md-3 form-group-label-override required">名称</label>
+          <label for="name" class="col-md-3 form-group-label-override required">{{'TITLE.NAME' | translate}}</label>
           <label for="name" aria-haspopup="true" role="tooltip" [class.invalid]="!isNameValid" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left form-control">
             <input class="form-control" type="text" id="name"  [(ngModel)]="cronjob.name"
                    name="name" size="32"
@@ -24,7 +24,7 @@ <h3 class="modal-title">{{title}}</h3>
                    pattern="[a-z]([-a-z0-9]*[a-z0-9])?"
                    (keyup)='handleValidation()'>
             <span class="tooltip-content">
-              配置集名称不符合规范，验证规则[a-z]([-a-z0-9]*[a-z0-9])?
+              {{'RULE.REGEXT' | translate}}[a-z]([-a-z0-9]*[a-z0-9])?
             </span>
           </label>
           <span class="spinner spinner-inline" [hidden]="!checkOnGoing"></span>
@@ -34,7 +34,7 @@ <h3 class="modal-title">{{title}}</h3>
           <wayne-ace-editor-box></wayne-ace-editor-box>
         </div>
         <div class="form-group" style="padding-left: 135px;">
-          <label for="description" class="col-md-3 form-group-label-override">描述</label>
+          <label for="description" class="col-md-3 form-group-label-override">{{'TITLE.DESCRIPTION' | translate}}</label>
           <textarea id="description" [(ngModel)]="cronjob.description"
                     name="description"
                     rows="3">
@@ -42,8 +42,8 @@ <h3 class="modal-title">{{title}}</h3>
         </div>
         <div class="modal-footer">
 
-          <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-          <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+          <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+          <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
         </div>
       </section>
     </form>
diff --git a/src/frontend/src/app/admin/cronjob/cronjob.component.html b/src/frontend/src/app/admin/cronjob/cronjob.component.html
index b0ec907de..78027c077 100644
--- a/src/frontend/src/app/admin/cronjob/cronjob.component.html
+++ b/src/frontend/src/app/admin/cronjob/cronjob.component.html
@@ -1,7 +1,7 @@
 <div class="row">
   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
     <div class="row flex-items-xs-between flex-items-xs-top" style="padding-left: 15px; padding-right: 15px;">
-      <h2 class="header-title">计划任务列表</h2>
+      <h2 class="header-title">{{'CRONJOB.LIST' | translate}}</h2>
     </div>
     <div class="row flex-items-xs-between" style="height:32px;">
       <div class="option-left">
diff --git a/src/frontend/src/app/admin/cronjob/cronjob.component.ts b/src/frontend/src/app/admin/cronjob/cronjob.component.ts
index db3634262..cfe838acc 100644
--- a/src/frontend/src/app/admin/cronjob/cronjob.component.ts
+++ b/src/frontend/src/app/admin/cronjob/cronjob.component.ts
@@ -12,7 +12,7 @@ import {ListCronjobComponent} from './list-cronjob/list-cronjob.component';
 import {Cronjob} from '../../shared/model/v1/cronjob';
 import {CronjobService} from '../../shared/client/v1/cronjob.service';
 import {PageState} from '../../shared/page/page-state';
-
+import {TranslateService} from '@ngx-translate/core';
 @Component({
   selector: 'wayne-cronjob',
   templateUrl: './cronjob.component.html',
@@ -36,6 +36,7 @@ export class CronjobComponent implements OnInit {
     private breadcrumbService: BreadcrumbService,
     private route: ActivatedRoute,
     private messageHandlerService: MessageHandlerService,
+    public translate: TranslateService,
     private deletionDialogService: ConfirmationDialogService) {
     breadcrumbService.addFriendlyNameForRoute('/admin/cronjob', this.componentName + '列表');
     breadcrumbService.addFriendlyNameForRoute('/admin/cronjob/trash', '已删除' + this.componentName + '列表');
diff --git a/src/frontend/src/app/admin/cronjob/list-cronjob/list-cronjob.component.html b/src/frontend/src/app/admin/cronjob/list-cronjob/list-cronjob.component.html
index 336ea2158..4da61c374 100644
--- a/src/frontend/src/app/admin/cronjob/list-cronjob/list-cronjob.component.html
+++ b/src/frontend/src/app/admin/cronjob/list-cronjob/list-cronjob.component.html
@@ -26,18 +26,18 @@
   </clr-dg-column>
   <clr-dg-column [clrDgField]="'user'">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建者
+      {{'TITLE.CREATE_USER' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column [clrDgSortBy]="'createTime'" class="col-time">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建时间
+      {{'TITLE.CREATE_TIME' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-row *ngFor="let cronjob of cronjobs" [clrDgItem]="cronjob">
     <clr-dg-action-overflow >
       <button class="action-item" (click)="editCronjob(cronjob)" >编辑</button>
-      <button class="action-item" (click)="deleteCronjob(cronjob)">删除</button>
+      <button class="action-item" (click)="deleteCronjob(cronjob)">{{'BUTTON.DELETE' | translate}}</button>
     </clr-dg-action-overflow>
       <clr-dg-cell class="col-query-id">{{cronjob.id}}</clr-dg-cell>
       <clr-dg-cell><a href="javascript:void(0)" (click)="goToLink(cronjob, 'tpl')">{{cronjob.name}}</a></clr-dg-cell>
diff --git a/src/frontend/src/app/admin/cronjob/trash-cronjob/trash-cronjob.component.html b/src/frontend/src/app/admin/cronjob/trash-cronjob/trash-cronjob.component.html
index dadcff9a5..d0ae8d472 100644
--- a/src/frontend/src/app/admin/cronjob/trash-cronjob/trash-cronjob.component.html
+++ b/src/frontend/src/app/admin/cronjob/trash-cronjob/trash-cronjob.component.html
@@ -1,7 +1,7 @@
 <div class="row">
   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
     <div class="row flex-items-xs-between flex-items-xs-top" style="padding-left: 15px; padding-right: 15px;">
-      <h2 class="header-title">已删除计划任务列表</h2>
+      <h2 class="header-title">{{'CRONJOB.DELETE_LIST' | translate}}</h2>
     </div>
     <clr-datagrid (clrDgRefresh)="refresh($event)">
       <clr-dg-column [clrDgField]="'id'" class="col-query-id">
@@ -26,12 +26,12 @@ <h2 class="header-title">已删除计划任务列表</h2>
       </clr-dg-column>
       <clr-dg-column [clrDgField]="'user'">
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          创建者
+          {{'TITLE.CREATE_USER' | translate}}
         </ng-container>
       </clr-dg-column>
       <clr-dg-column [clrDgSortBy]="'createTime'" class="col-time">
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          创建时间
+          {{'TITLE.CREATE_TIME' | translate}}
         </ng-container>
       </clr-dg-column>
       <clr-dg-row *ngFor="let cronjob of cronjobs" [clrDgItem]="cronjob">
diff --git a/src/frontend/src/app/admin/cronjobtpl/create-edit-cronjobtpl/create-edit-cronjobtpl.component.html b/src/frontend/src/app/admin/cronjobtpl/create-edit-cronjobtpl/create-edit-cronjobtpl.component.html
index d1cec98a0..b82849f49 100644
--- a/src/frontend/src/app/admin/cronjobtpl/create-edit-cronjobtpl/create-edit-cronjobtpl.component.html
+++ b/src/frontend/src/app/admin/cronjobtpl/create-edit-cronjobtpl/create-edit-cronjobtpl.component.html
@@ -16,7 +16,7 @@ <h3 class="modal-title">{{title}}
           </div>
         </div>
         <div class="form-group" style="padding-left: 135px;">
-          <label for="description" class="col-md-3 form-group-label-override">描述</label>
+          <label for="description" class="col-md-3 form-group-label-override">{{'TITLE.DESCRIPTION' | translate}}</label>
           <textarea id="description" [(ngModel)]="cronjobTpl.description"
                     name="description"
                     rows="3">
@@ -31,7 +31,7 @@ <h3 class="modal-title">{{title}}
     </form>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+    <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
   </div>
 </clr-modal>
diff --git a/src/frontend/src/app/admin/cronjobtpl/cronjobtpl.component.html b/src/frontend/src/app/admin/cronjobtpl/cronjobtpl.component.html
index 5b41ce133..a30a3b9a2 100644
--- a/src/frontend/src/app/admin/cronjobtpl/cronjobtpl.component.html
+++ b/src/frontend/src/app/admin/cronjobtpl/cronjobtpl.component.html
@@ -1,11 +1,11 @@
 <div class="row">
   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
     <div class="row flex-items-xs-between flex-items-xs-top" style="padding-left: 15px; padding-right: 15px;">
-      <h2 class="header-title">计划任务列表</h2>
+      <h2 class="header-title">{{'CRONJOB.LIST' | translate}}</h2>
     </div>
     <div class="row flex-items-xs-between" style="height:32px;">
       <div class="option-left">
-        <button class="btn btn-link" (click)="openModal()"><clr-icon shape="add"></clr-icon>创建配置集模版</button>
+        <button class="btn btn-link" (click)="openModal()"><clr-icon shape="add"></clr-icon>{{'CONFIGMAP.CREATE_TMP' | translate}}</button>
         <create-edit-cronjobtpl (create)="createCronjobTpl($event)"></create-edit-cronjobtpl>
       </div>
     </div>
diff --git a/src/frontend/src/app/admin/cronjobtpl/list-cronjobtpl/list-cronjobtpl.component.html b/src/frontend/src/app/admin/cronjobtpl/list-cronjobtpl/list-cronjobtpl.component.html
index d547bc5ae..c0c43cf0c 100644
--- a/src/frontend/src/app/admin/cronjobtpl/list-cronjobtpl/list-cronjobtpl.component.html
+++ b/src/frontend/src/app/admin/cronjobtpl/list-cronjobtpl/list-cronjobtpl.component.html
@@ -21,18 +21,18 @@
   </clr-dg-column>
   <clr-dg-column [clrDgField]="'user'">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建者
+      {{'TITLE.CREATE_USER' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column [clrDgSortBy]="'createTime'">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建时间
+      {{'TITLE.CREATE_TIME' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-row *ngFor="let cronjobTpl of cronjobTpls" [clrDgItem]="cronjobTpl">
     <clr-dg-action-overflow>
       <button class="action-item" (click)="editCronjobTpl(cronjobTpl)" >编辑</button>
-      <button class="action-item" (click)="deleteCronjobTpl(cronjobTpl)">删除</button>
+      <button class="action-item" (click)="deleteCronjobTpl(cronjobTpl)">{{'BUTTON.DELETE' | translate}}</button>
     </clr-dg-action-overflow>
     <clr-dg-cell class="col-query-id">{{cronjobTpl.id}}</clr-dg-cell>
     <clr-dg-cell class="col-app-name copy">{{cronjobTpl.name}}</clr-dg-cell>
diff --git a/src/frontend/src/app/admin/cronjobtpl/trash-cronjobtpl/trash-cronjobtpl.component.html b/src/frontend/src/app/admin/cronjobtpl/trash-cronjobtpl/trash-cronjobtpl.component.html
index 6bebb04b5..f50b1d3ec 100644
--- a/src/frontend/src/app/admin/cronjobtpl/trash-cronjobtpl/trash-cronjobtpl.component.html
+++ b/src/frontend/src/app/admin/cronjobtpl/trash-cronjobtpl/trash-cronjobtpl.component.html
@@ -1,7 +1,7 @@
 <div class="row">
   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
     <div class="row flex-items-xs-between flex-items-xs-top" style="padding-left: 15px; padding-right: 15px;">
-      <h2 class="header-title">已删除计划任务列表</h2>
+      <h2 class="header-title">{{'CRONJOB.DELETE_LIST' | translate}}</h2>
     </div>
     <clr-datagrid (clrDgRefresh)="refresh($event)">
       <clr-dg-column [clrDgField]="'id'" style="width: 160px;">
@@ -21,12 +21,12 @@ <h2 class="header-title">已删除计划任务列表</h2>
       </clr-dg-column>
       <clr-dg-column [clrDgField]="'user'">
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          创建者
+          {{'TITLE.CREATE_USER' | translate}}
         </ng-container>
       </clr-dg-column>
       <clr-dg-column [clrDgSortBy]="'createTime'">
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          创建时间
+          {{'TITLE.CREATE_TIME' | translate}}
         </ng-container>
       </clr-dg-column>
       <clr-dg-row *ngFor="let cronjobTpl of cronjobTpls" [clrDgItem]="cronjobTpl">
diff --git a/src/frontend/src/app/admin/daemonset/create-edit-daemonset/create-edit-daemonset.component.html b/src/frontend/src/app/admin/daemonset/create-edit-daemonset/create-edit-daemonset.component.html
index 23b871190..a9283034f 100644
--- a/src/frontend/src/app/admin/daemonset/create-edit-daemonset/create-edit-daemonset.component.html
+++ b/src/frontend/src/app/admin/daemonset/create-edit-daemonset/create-edit-daemonset.component.html
@@ -5,7 +5,7 @@ <h3 class="modal-title">{{title}}</h3>
 
       <section class="form-block">
         <div class="form-group" style="padding-left: 135px;">
-          <label for="app_id" class="col-md-3 form-group-label-override required">项目</label>
+          <label for="app_id" class="col-md-3 form-group-label-override required">应用</label>
           <div class="select form-control">
             <select id="app_id" [(ngModel)]="daemonset.appId" [disabled]="actionType==1" name="app_id">
               <option *ngFor="let app of apps" [ngValue]="app.id" [selected]="app.id == daemonset.appId">{{app.name}}
@@ -14,7 +14,7 @@ <h3 class="modal-title">{{title}}</h3>
           </div>
         </div>
         <div class="form-group" style="padding-left: 135px;">
-          <label for="daemonset_name" class="col-md-3 form-group-label-override required">名称</label>
+          <label for="daemonset_name" class="col-md-3 form-group-label-override required">{{'TITLE.NAME' | translate}}</label>
           <label for="daemonset_name" aria-haspopup="true" role="tooltip" [class.invalid]="!isNameValid" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left form-control">
             <input class="form-control" type="text" id="daemonset_name" [(ngModel)]="daemonset.name"
                    name="daemonset_name" size="64"
@@ -35,7 +35,7 @@ <h3 class="modal-title">{{title}}</h3>
 
         </div>
         <div class="form-group" style="padding-left: 135px;">
-          <label for="daemonset_description" class="col-md-3 form-group-label-override">描述</label>
+          <label for="daemonset_description" class="col-md-3 form-group-label-override">{{'TITLE.DESCRIPTION' | translate}}</label>
           <textarea id="daemonset_description" [(ngModel)]="daemonset.description" name="daemonset_description" rows="3">
           </textarea>
 
@@ -44,7 +44,7 @@ <h3 class="modal-title">{{title}}</h3>
     </form>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+    <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
   </div>
 </clr-modal>
diff --git a/src/frontend/src/app/admin/daemonset/list-daemonset/list-daemonset.component.html b/src/frontend/src/app/admin/daemonset/list-daemonset/list-daemonset.component.html
index bb164acb0..d7fe3211f 100644
--- a/src/frontend/src/app/admin/daemonset/list-daemonset/list-daemonset.component.html
+++ b/src/frontend/src/app/admin/daemonset/list-daemonset/list-daemonset.component.html
@@ -26,18 +26,18 @@
   </clr-dg-column>
   <clr-dg-column [clrDgField]="'user'">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建者
+      {{'TITLE.CREATE_USER' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column [clrDgSortBy]="'createTime'" class="col-time">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建时间
+      {{'TITLE.CREATE_TIME' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-row *ngFor="let daemonset of daemonsets" [clrDgItem]="daemonset">
     <clr-dg-action-overflow>
       <button class="action-item" (click)="editDaemonset(daemonset)">编辑</button>
-      <button class="action-item" (click)="deleteDaemonset(daemonset)">删除</button>
+      <button class="action-item" (click)="deleteDaemonset(daemonset)">{{'BUTTON.DELETE' | translate}}</button>
     </clr-dg-action-overflow>
     <clr-dg-cell class="col-query-id">{{daemonset.id}}</clr-dg-cell>
     <clr-dg-cell class="col-app-name copy">{{daemonset.name}}</clr-dg-cell>
diff --git a/src/frontend/src/app/admin/daemonset/trash-daemonset/trash-daemonset.component.html b/src/frontend/src/app/admin/daemonset/trash-daemonset/trash-daemonset.component.html
index 649a5bcd1..4de73884f 100644
--- a/src/frontend/src/app/admin/daemonset/trash-daemonset/trash-daemonset.component.html
+++ b/src/frontend/src/app/admin/daemonset/trash-daemonset/trash-daemonset.component.html
@@ -26,12 +26,12 @@ <h2 class="header-title">已删除守护进程集列表</h2>
   </clr-dg-column>
   <clr-dg-column [clrDgField]="'user'">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建者
+      {{'TITLE.CREATE_USER' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column  [clrDgSortBy]="'createTime'">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建时间
+      {{'TITLE.CREATE_TIME' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-row *ngFor="let daemonset of daemonsets" [clrDgItem]="daemonset">
diff --git a/src/frontend/src/app/admin/daemonsettpl/create-edit-daemonsettpl/create-edit-daemonsettpl.component.html b/src/frontend/src/app/admin/daemonsettpl/create-edit-daemonsettpl/create-edit-daemonsettpl.component.html
index e08074880..ccedb2019 100644
--- a/src/frontend/src/app/admin/daemonsettpl/create-edit-daemonsettpl/create-edit-daemonsettpl.component.html
+++ b/src/frontend/src/app/admin/daemonsettpl/create-edit-daemonsettpl/create-edit-daemonsettpl.component.html
@@ -19,7 +19,7 @@ <h3 class="modal-title">{{title}}
           </div>
         </div>
         <div class="form-group" style="padding-left: 135px;">
-          <label for="daemonset_description" class="col-md-3 form-group-label-override">描述</label>
+          <label for="daemonset_description" class="col-md-3 form-group-label-override">{{'TITLE.DESCRIPTION' | translate}}</label>
           <textarea id="daemonset_description" [(ngModel)]="daemonsetTpl.description"
                     name="daemonset_description"
                     rows="3">
@@ -34,7 +34,7 @@ <h3 class="modal-title">{{title}}
     </form>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+    <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
   </div>
 </clr-modal>
diff --git a/src/frontend/src/app/admin/daemonsettpl/list-daemonsettpl/list-daemonsettpl.component.html b/src/frontend/src/app/admin/daemonsettpl/list-daemonsettpl/list-daemonsettpl.component.html
index b991a5f6c..652c261e9 100644
--- a/src/frontend/src/app/admin/daemonsettpl/list-daemonsettpl/list-daemonsettpl.component.html
+++ b/src/frontend/src/app/admin/daemonsettpl/list-daemonsettpl/list-daemonsettpl.component.html
@@ -17,18 +17,18 @@
 
   <clr-dg-column [clrDgField]="'user'">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建者
+      {{'TITLE.CREATE_USER' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column [clrDgSortBy]="'createTime'">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建时间
+      {{'TITLE.CREATE_TIME' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-row *ngFor="let daemonsetTpl of daemonsetTpls" [clrDgItem]="daemonsetTpl">
     <clr-dg-action-overflow>
       <button class="action-item" (click)="editDaemonsetTpl(daemonsetTpl)">编辑</button>
-      <button class="action-item" (click)="deleteDaemonsetTpl(daemonsetTpl)">删除</button>
+      <button class="action-item" (click)="deleteDaemonsetTpl(daemonsetTpl)">{{'BUTTON.DELETE' | translate}}</button>
     </clr-dg-action-overflow>
     <clr-dg-cell class="col-query-id">{{daemonsetTpl.id}}</clr-dg-cell>
     <clr-dg-cell class="copy">{{daemonsetTpl.name}}</clr-dg-cell>
diff --git a/src/frontend/src/app/admin/daemonsettpl/trash-daemonsettpl/trash-daemonsettpl.component.html b/src/frontend/src/app/admin/daemonsettpl/trash-daemonsettpl/trash-daemonsettpl.component.html
index 883b0fed2..ff7fb1680 100644
--- a/src/frontend/src/app/admin/daemonsettpl/trash-daemonsettpl/trash-daemonsettpl.component.html
+++ b/src/frontend/src/app/admin/daemonsettpl/trash-daemonsettpl/trash-daemonsettpl.component.html
@@ -27,12 +27,12 @@ <h2 class="header-title">已删除守护进程集模版列表</h2>
 
       <clr-dg-column [clrDgField]="'user'">
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          创建者
+          {{'TITLE.CREATE_USER' | translate}}
         </ng-container>
       </clr-dg-column>
       <clr-dg-column [clrDgSortBy]="'createTime'">
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          创建时间
+          {{'TITLE.CREATE_TIME' | translate}}
         </ng-container>
       </clr-dg-column>
       <clr-dg-row *ngFor="let daemonsetTpl of daemonsetTpls" [clrDgItem]="daemonsetTpl">
diff --git a/src/frontend/src/app/admin/deployment/create-edit-deployment/create-edit-deployment.component.html b/src/frontend/src/app/admin/deployment/create-edit-deployment/create-edit-deployment.component.html
index a4c9b1c61..91c22835d 100644
--- a/src/frontend/src/app/admin/deployment/create-edit-deployment/create-edit-deployment.component.html
+++ b/src/frontend/src/app/admin/deployment/create-edit-deployment/create-edit-deployment.component.html
@@ -5,7 +5,7 @@ <h3 class="modal-title">{{deploymentTitle}}</h3>
 
       <section class="form-block">
         <div class="form-group" style="padding-left: 135px;">
-          <label for="deployment_app_id" class="col-md-3 form-group-label-override required">项目</label>
+          <label for="deployment_app_id" class="col-md-3 form-group-label-override required">应用</label>
           <div class="select form-control">
             <select id="deployment_app_id" [(ngModel)]="deployment.appId" [disabled]="actionType==1" name="deployment_app_id">
               <!--这是一个坑，如果使用value获取到的是string，使用ngValue获取到的是model本身类型-->
@@ -15,7 +15,7 @@ <h3 class="modal-title">{{deploymentTitle}}</h3>
           </div>
         </div>
         <div class="form-group" style="padding-left: 135px;">
-          <label for="deployment_name" class="col-md-3 form-group-label-override required">名称</label>
+          <label for="deployment_name" class="col-md-3 form-group-label-override required">{{'TITLE.NAME' | translate}}</label>
           <label for="deployment_name" aria-haspopup="true" role="tooltip" [class.invalid]="!isNameValid"
                  class="tooltip tooltip-validation tooltip-md tooltip-bottom-left form-control">
             <input class="form-control" type="text" id="deployment_name" [(ngModel)]="deployment.name"
@@ -37,7 +37,7 @@ <h3 class="modal-title">{{deploymentTitle}}</h3>
 
         </div>
         <div class="form-group" style="padding-left: 135px;">
-          <label for="deployment_description" class="col-md-3 form-group-label-override">描述</label>
+          <label for="deployment_description" class="col-md-3 form-group-label-override">{{'TITLE.DESCRIPTION' | translate}}</label>
           <textarea id="deployment_description" [(ngModel)]="deployment.description"
                     name="deployment_description"
                     rows="3">
@@ -46,8 +46,8 @@ <h3 class="modal-title">{{deploymentTitle}}</h3>
         </div>
         <div class="modal-footer">
 
-          <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-          <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+          <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+          <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
         </div>
       </section>
     </form>
diff --git a/src/frontend/src/app/admin/deployment/list-deployment/list-deployment.component.html b/src/frontend/src/app/admin/deployment/list-deployment/list-deployment.component.html
index 5a8891652..b7162f7f1 100644
--- a/src/frontend/src/app/admin/deployment/list-deployment/list-deployment.component.html
+++ b/src/frontend/src/app/admin/deployment/list-deployment/list-deployment.component.html
@@ -26,18 +26,18 @@
   </clr-dg-column>
   <clr-dg-column [clrDgField]="'user'">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建者
+      {{'TITLE.CREATE_USER' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column [clrDgSortBy]="'createTime'" class="col-user">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建时间
+      {{'TITLE.CREATE_TIME' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-row *ngFor="let deployment of deployments" [clrDgItem]="deployment">
     <clr-dg-action-overflow >
       <button class="action-item" (click)="editDeployment(deployment)" >编辑</button>
-      <button class="action-item" (click)="deleteDeployment(deployment)">删除</button>
+      <button class="action-item" (click)="deleteDeployment(deployment)">{{'BUTTON.DELETE' | translate}}</button>
     </clr-dg-action-overflow>
       <clr-dg-cell class="col-query-id">{{deployment.id}}</clr-dg-cell>
       <clr-dg-cell class="col-app-name"><a href="javascript:void(0)" (click)="goToLink(deployment, 'tpl')">{{deployment.name}}</a></clr-dg-cell>
diff --git a/src/frontend/src/app/admin/deployment/trash-deployment/trash-deployment.component.html b/src/frontend/src/app/admin/deployment/trash-deployment/trash-deployment.component.html
index f2f3ff41c..f1a548adc 100644
--- a/src/frontend/src/app/admin/deployment/trash-deployment/trash-deployment.component.html
+++ b/src/frontend/src/app/admin/deployment/trash-deployment/trash-deployment.component.html
@@ -26,12 +26,12 @@ <h2 class="header-title">已删除部署列表</h2>
   </clr-dg-column>
   <clr-dg-column [clrDgField]="'user'">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建者
+      {{'TITLE.CREATE_USER' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column  [clrDgSortBy]="'createTime'">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建时间
+      {{'TITLE.CREATE_TIME' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-row *ngFor="let deployment of deployments" [clrDgItem]="deployment">
diff --git a/src/frontend/src/app/admin/deploymenttpl/create-edit-deploymenttpl/create-edit-deploymenttpl.component.html b/src/frontend/src/app/admin/deploymenttpl/create-edit-deploymenttpl/create-edit-deploymenttpl.component.html
index a750d82f8..129520482 100644
--- a/src/frontend/src/app/admin/deploymenttpl/create-edit-deploymenttpl/create-edit-deploymenttpl.component.html
+++ b/src/frontend/src/app/admin/deploymenttpl/create-edit-deploymenttpl/create-edit-deploymenttpl.component.html
@@ -19,7 +19,7 @@ <h3 class="modal-title">{{deploymentTplTitle}}
           </div>
         </div>
         <div class="form-group" style="padding-left: 135px;">
-          <label for="deployment_description" class="col-md-3 form-group-label-override">描述</label>
+          <label for="deployment_description" class="col-md-3 form-group-label-override">{{'TITLE.DESCRIPTION' | translate}}</label>
           <textarea id="deployment_description" [(ngModel)]="deploymentTpl.description"
                     name="deployment_description"
                     rows="3">
@@ -39,7 +39,7 @@ <h3 class="modal-title">{{deploymentTplTitle}}
     </form>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+    <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
   </div>
 </clr-modal>
diff --git a/src/frontend/src/app/admin/deploymenttpl/list-deploymenttpl/list-deploymenttpl.component.html b/src/frontend/src/app/admin/deploymenttpl/list-deploymenttpl/list-deploymenttpl.component.html
index b0c9a4af1..8bfc8620b 100644
--- a/src/frontend/src/app/admin/deploymenttpl/list-deploymenttpl/list-deploymenttpl.component.html
+++ b/src/frontend/src/app/admin/deploymenttpl/list-deploymenttpl/list-deploymenttpl.component.html
@@ -17,18 +17,18 @@
 
   <clr-dg-column [clrDgField]="'user'">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建者
+      {{'TITLE.CREATE_USER' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column [clrDgSortBy]="'createTime'">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建时间
+      {{'TITLE.CREATE_TIME' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-row *ngFor="let deploymentTpl of deploymentTpls" [clrDgItem]="deploymentTpl">
     <clr-dg-action-overflow >
       <button class="action-item" (click)="editDeploymentTpl(deploymentTpl)" >编辑</button>
-      <button class="action-item" (click)="deleteDeploymentTpl(deploymentTpl)">删除</button>
+      <button class="action-item" (click)="deleteDeploymentTpl(deploymentTpl)">{{'BUTTON.DELETE' | translate}}</button>
     </clr-dg-action-overflow>
     <clr-dg-cell class="col-query-id">{{deploymentTpl.id}}</clr-dg-cell>
     <clr-dg-cell class="col-app-name copy">{{deploymentTpl.name}}</clr-dg-cell>
diff --git a/src/frontend/src/app/admin/deploymenttpl/trash-deploymenttpl/trash-deploymenttpl.component.html b/src/frontend/src/app/admin/deploymenttpl/trash-deploymenttpl/trash-deploymenttpl.component.html
index 43bfbaec6..5358a05aa 100644
--- a/src/frontend/src/app/admin/deploymenttpl/trash-deploymenttpl/trash-deploymenttpl.component.html
+++ b/src/frontend/src/app/admin/deploymenttpl/trash-deploymenttpl/trash-deploymenttpl.component.html
@@ -22,12 +22,12 @@ <h2 class="header-title">已删除部署模版列表</h2>
 
       <clr-dg-column [clrDgField]="'user'">
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          创建者
+          {{'TITLE.CREATE_USER' | translate}}
         </ng-container>
       </clr-dg-column>
       <clr-dg-column [clrDgSortBy]="'createTime'">
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          创建时间
+          {{'TITLE.CREATE_TIME' | translate}}
         </ng-container>
       </clr-dg-column>
       <clr-dg-row *ngFor="let deploymentTpl of deploymentTpls" [clrDgItem]="deploymentTpl">
diff --git a/src/frontend/src/app/admin/group/create-edit-group/create-edit-group.component.html b/src/frontend/src/app/admin/group/create-edit-group/create-edit-group.component.html
index a67127837..35e6d45fe 100644
--- a/src/frontend/src/app/admin/group/create-edit-group/create-edit-group.component.html
+++ b/src/frontend/src/app/admin/group/create-edit-group/create-edit-group.component.html
@@ -14,7 +14,7 @@ <h3 class="modal-title">{{groupTitle}}</h3>
           </div>
         </div>
         <div class="form-group" style="padding-left: 135px;">
-          <label for="group_name" class="col-md-3 form-group-label-override required">名称</label>
+          <label for="group_name" class="col-md-3 form-group-label-override required">{{'TITLE.NAME' | translate}}</label>
           <label for="group_name" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left">
             <input type="text" id="group_name"  [(ngModel)]="group.name"
                    name="group_name" size="36"
@@ -25,7 +25,7 @@ <h3 class="modal-title">{{groupTitle}}</h3>
           <span class="spinner spinner-inline" [hidden]="!checkOnGoing"></span>
         </div>
         <div class="form-group" style="padding-left: 135px;">
-          <label for="group_comment" class="col-md-3 form-group-label-override required">描述</label>
+          <label for="group_comment" class="col-md-3 form-group-label-override required">{{'TITLE.DESCRIPTION' | translate}}</label>
           <label for="group_comment" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left">
             <input type="text" id="group_comment"  [(ngModel)]="group.comment"
                    name="group_comment" size="36"
@@ -53,8 +53,8 @@ <h3 class="modal-title">{{groupTitle}}</h3>
           </label>
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-          <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+          <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+          <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
         </div>
       </section>
     </form>
diff --git a/src/frontend/src/app/admin/group/list-group/list-group.component.html b/src/frontend/src/app/admin/group/list-group/list-group.component.html
index 8e2ffc025..681a8b8c9 100644
--- a/src/frontend/src/app/admin/group/list-group/list-group.component.html
+++ b/src/frontend/src/app/admin/group/list-group/list-group.component.html
@@ -22,7 +22,7 @@
   <clr-dg-row *ngFor="let group of groups" [clrDgItem]="group">
     <clr-dg-action-overflow >
       <button class="action-item" (click)="editGroup(group)" >编辑</button>
-      <button class="action-item" (click)="deleteGroup(group)">删除</button>
+      <button class="action-item" (click)="deleteGroup(group)">{{'BUTTON.DELETE' | translate}}</button>
     </clr-dg-action-overflow>
       <clr-dg-cell class="col-id">{{group.id}}</clr-dg-cell>
       <clr-dg-cell class="copy">{{group.name}}</clr-dg-cell>
diff --git a/src/frontend/src/app/admin/namespace/create-edit-namespace/create-edit-namespace.component.html b/src/frontend/src/app/admin/namespace/create-edit-namespace/create-edit-namespace.component.html
index f846ccff7..7cd6ab57a 100644
--- a/src/frontend/src/app/admin/namespace/create-edit-namespace/create-edit-namespace.component.html
+++ b/src/frontend/src/app/admin/namespace/create-edit-namespace/create-edit-namespace.component.html
@@ -6,7 +6,7 @@ <h3 class="modal-title">{{nsTitle}}
     <form #namespaceForm="ngForm">
       <section class="form-block">
         <div class="form-group" style="padding-left: 135px;">
-          <label for="ns_name" class="col-md-3 form-group-label-override required">名称</label>
+          <label for="ns_name" class="col-md-3 form-group-label-override required">{{'TITLE.NAME' | translate}}</label>
           <label for="ns_name" aria-haspopup="true" role="tooltip" [class.invalid]="!isNameValid"
                  class="tooltip tooltip-validation tooltip-md tooltip-bottom-left">
             <input type="text" id="ns_name" [(ngModel)]="ns.name"
@@ -93,7 +93,7 @@ <h3 class="modal-title">{{nsTitle}}
     </form>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+    <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
   </div>
 </clr-modal>
diff --git a/src/frontend/src/app/admin/namespace/list-namespace/list-namespace.component.html b/src/frontend/src/app/admin/namespace/list-namespace/list-namespace.component.html
index e7ee5ed76..f500196fb 100644
--- a/src/frontend/src/app/admin/namespace/list-namespace/list-namespace.component.html
+++ b/src/frontend/src/app/admin/namespace/list-namespace/list-namespace.component.html
@@ -21,12 +21,12 @@
   </clr-dg-column>
   <clr-dg-column>
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建者
+      {{'TITLE.CREATE_USER' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column class="col-time">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建时间
+      {{'TITLE.CREATE_TIME' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column class="col-time">
@@ -37,7 +37,7 @@
   <clr-dg-row *ngFor="let ns of namespaces" [clrDgItem]="ns">
     <clr-dg-action-overflow>
       <button class="action-item" (click)="editNamespace(ns)" >编辑</button>
-      <button class="action-item" (click)="deleteNamespace(ns)">删除</button>
+      <button class="action-item" (click)="deleteNamespace(ns)">{{'BUTTON.DELETE' | translate}}</button>
     </clr-dg-action-overflow>
       <clr-dg-cell class="col-id">{{ns.id}}</clr-dg-cell>
       <clr-dg-cell class="col-app-name copy"><a href="javascript:void(0)" (click)="goToLink(ns, 'app')">{{ns.name}}</a></clr-dg-cell>
diff --git a/src/frontend/src/app/admin/namespace/trash-namespace/trash-namespace.component.html b/src/frontend/src/app/admin/namespace/trash-namespace/trash-namespace.component.html
index 0a39cf2e9..dc4d73142 100644
--- a/src/frontend/src/app/admin/namespace/trash-namespace/trash-namespace.component.html
+++ b/src/frontend/src/app/admin/namespace/trash-namespace/trash-namespace.component.html
@@ -16,12 +16,12 @@ <h2 class="header-title">已删除命名空间列表</h2>
   </clr-dg-column>
   <clr-dg-column>
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建者
+      {{'TITLE.CREATE_USER' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column class="col-time">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建时间
+      {{'TITLE.CREATE_TIME' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column class="col-time">
diff --git a/src/frontend/src/app/admin/node/list-nodes/list-nodes.component.html b/src/frontend/src/app/admin/node/list-nodes/list-nodes.component.html
index abcaabcb0..c66cb4619 100644
--- a/src/frontend/src/app/admin/node/list-nodes/list-nodes.component.html
+++ b/src/frontend/src/app/admin/node/list-nodes/list-nodes.component.html
@@ -1,5 +1,5 @@
 <clr-datagrid class="wayne-clr-datagrid">
-  <clr-dg-placeholder>暂无数据！</clr-dg-placeholder>
+  <clr-dg-placeholder>{{'MESSAGE.NO_MESSAGE' | translate}}</clr-dg-placeholder>
   <clr-dg-column [clrDgSortBy]="nameComparator">
     <ng-container *clrDgHideableColumn="showState['名称']">
       名称
@@ -72,7 +72,7 @@
   <clr-dg-row *clrDgItems="let node of nodes">
     <clr-dg-action-overflow>
       <button class="action-item" (click)="editNode(node)">编辑</button>
-      <button class="action-item" (click)="deleteNode(node)">删除</button>
+      <button class="action-item" (click)="deleteNode(node)">{{'BUTTON.DELETE' | translate}}</button>
     </clr-dg-action-overflow>
     <clr-dg-cell class="copy">{{node.name}}</clr-dg-cell>
     <clr-dg-cell>
diff --git a/src/frontend/src/app/admin/node/nodes.component.html b/src/frontend/src/app/admin/node/nodes.component.html
index 88cd818b9..504c0d118 100644
--- a/src/frontend/src/app/admin/node/nodes.component.html
+++ b/src/frontend/src/app/admin/node/nodes.component.html
@@ -4,7 +4,7 @@
       <div class="table-search-left">
         <wayne-filter-box (confirm)="confirmEvent()" (cancel)="cancelEvent()">
           <wayne-checkbox-group [(ngModel)]="showList">
-            <wayne-checkbox>名称</wayne-checkbox>
+            <wayne-checkbox>{{'TITLE.NAME' | translate}}</wayne-checkbox>
             <wayne-checkbox>标签</wayne-checkbox>
             <wayne-checkbox>Taints</wayne-checkbox>
             <wayne-checkbox>Ready</wayne-checkbox>
diff --git a/src/frontend/src/app/admin/notification/create-notification/create-notification.component.html b/src/frontend/src/app/admin/notification/create-notification/create-notification.component.html
index f6afcb01f..a769bb197 100644
--- a/src/frontend/src/app/admin/notification/create-notification/create-notification.component.html
+++ b/src/frontend/src/app/admin/notification/create-notification/create-notification.component.html
@@ -26,7 +26,7 @@ <h3 class="modal-title">创建通知</h3>
     <markdown [data]="notify.message"></markdown>
   </div>
   <div class="modal-footer">
-    <button class="btn btn-outline" type="button" (click)="cancelCreateNotification()">取消</button>
+    <button class="btn btn-outline" type="button" (click)="cancelCreateNotification()">{{'BUTTON.CANCEL' | translate}}</button>
     <button type="button" class="btn btn-primary" [disabled]="!isValid()" (click)="doCreateNotifycation()">
       创建
     </button>
diff --git a/src/frontend/src/app/admin/notification/list-notification/list-notification.component.html b/src/frontend/src/app/admin/notification/list-notification/list-notification.component.html
index 4162de632..d8fbfa82f 100644
--- a/src/frontend/src/app/admin/notification/list-notification/list-notification.component.html
+++ b/src/frontend/src/app/admin/notification/list-notification/list-notification.component.html
@@ -26,7 +26,7 @@
   </clr-dg-column>
   <clr-dg-column  style="min-width: 206px;">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建时间
+      {{'TITLE.CREATE_TIME' | translate}}
     </ng-container>
   </clr-dg-column>
 
@@ -60,7 +60,7 @@ <h3 class="modal-title">是否广播如下内容:</h3>
     <markdown ngPreserveWhitespaces [data]="notification.message"></markdown>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-outline" (click)="cancelPushNotify()">取消</button>
+    <button type="button" class="btn btn-outline" (click)="cancelPushNotify()">{{'BUTTON.CANCEL' | translate}}</button>
     <button type="button" class="btn btn-primary" (click)="pushNotify()">广播</button>
   </div>
 </clr-modal>
diff --git a/src/frontend/src/app/admin/permission/create-edit-permission/create-edit-permission.component.html b/src/frontend/src/app/admin/permission/create-edit-permission/create-edit-permission.component.html
index 4b21f9b60..acce32524 100644
--- a/src/frontend/src/app/admin/permission/create-edit-permission/create-edit-permission.component.html
+++ b/src/frontend/src/app/admin/permission/create-edit-permission/create-edit-permission.component.html
@@ -4,7 +4,7 @@ <h3 class="modal-title">{{permissionTitle}}</h3>
     <form #permissionForm="ngForm">
       <section class="form-block">
         <div class="form-group" style="padding-left: 135px;">
-          <label for="permission_name" class="col-md-3 form-group-label-override required">名称</label>
+          <label for="permission_name" class="col-md-3 form-group-label-override required">{{'TITLE.NAME' | translate}}</label>
           <label for="permission_name" aria-haspopup="true" role="tooltip" [class.invalid]="!isNameValid"
                  class="tooltip tooltip-validation tooltip-md tooltip-bottom-left">
             <input type="text" id="permission_name" [(ngModel)]="permission.name"
@@ -14,7 +14,7 @@ <h3 class="modal-title">{{permissionTitle}}</h3>
                    maxlength="200"
                    (keyup)='handleValidation()'>
             <span class="tooltip-content">
-              名称不符合规范，验证规则[a-z]([_a-z0-9]*[a-z0-9])?
+              {{'RULE.REGEXT' | translate}}[a-z]([_a-z0-9]*[a-z0-9])?
             </span>
           </label>
           <span class="spinner spinner-inline" [hidden]="!checkOnGoing"></span>
@@ -34,13 +34,13 @@ <h3 class="modal-title">{{permissionTitle}}</h3>
         <!--   <span class="spinner spinner-inline" [hidden]="!checkOnGoing"></span> -->
         <!-- </div> -->
         <div class="form-group" style="padding-left: 135px;">
-          <label for="permission_comment" class="col-md-3 form-group-label-override">描述</label>
+          <label for="permission_comment" class="col-md-3 form-group-label-override">{{'TITLE.DESCRIPTION' | translate}}</label>
           <textarea type="text" id="permission_comment" [(ngModel)]="permission.comment"
                     name="permission_comment"></textarea>
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-          <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+          <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+          <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
         </div>
       </section>
     </form>
diff --git a/src/frontend/src/app/admin/permission/list-permission/list-permission.component.html b/src/frontend/src/app/admin/permission/list-permission/list-permission.component.html
index 927ef31ba..adb6b5db9 100644
--- a/src/frontend/src/app/admin/permission/list-permission/list-permission.component.html
+++ b/src/frontend/src/app/admin/permission/list-permission/list-permission.component.html
@@ -17,7 +17,7 @@
   <clr-dg-row *ngFor="let permission of permissions" [clrDgItem]="permission">
     <clr-dg-action-overflow >
       <button class="action-item" (click)="editPermission(permission)" >编辑</button>
-      <button class="action-item" (click)="deletePermission(permission)">删除</button>
+      <button class="action-item" (click)="deletePermission(permission)">{{'BUTTON.DELETE' | translate}}</button>
     </clr-dg-action-overflow>
       <clr-dg-cell class="col-query-id">{{permission.id}}</clr-dg-cell>
       <clr-dg-cell class="copy">{{permission.name}}</clr-dg-cell>
diff --git a/src/frontend/src/app/admin/persistentvolume/create-edit-persistentvolume/create-edit-persistentvolume.component.html b/src/frontend/src/app/admin/persistentvolume/create-edit-persistentvolume/create-edit-persistentvolume.component.html
index 99a1cec8a..51cf632e9 100644
--- a/src/frontend/src/app/admin/persistentvolume/create-edit-persistentvolume/create-edit-persistentvolume.component.html
+++ b/src/frontend/src/app/admin/persistentvolume/create-edit-persistentvolume/create-edit-persistentvolume.component.html
@@ -35,7 +35,7 @@ <h2 class="header-title">{{title}}[{{cluster?.name}}]</h2>
         </div>
         <div class="form-group row" *ngIf="currentForm.get('type').value =='rbd'">
           <div class="col-lg-2 col-md-12 col-sm-12 col-xs-12">
-            <label for="rbd_name" class="required">RBD镜像名称</label>
+            <label for="rbd_name" class="required">RBD镜像{{'TITLE.NAME' | translate}}</label>
           </div>
           <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
             <input class="form-control"
@@ -77,20 +77,20 @@ <h2 class="header-title">{{title}}[{{cluster?.name}}]</h2>
             </div>
             <a href="javascript:void(0)">
               <clr-icon (click)="onDeleteLabel(i)"
-                        shape="trash" title="删除标签" class="is-solid clr-icon"></clr-icon>
+                        shape="trash" [title]="'PVC.DELETE_LABEL' | translate" class="is-solid clr-icon"></clr-icon>
             </a>
             <a href="javascript:void(0)">
               <clr-icon (click)="onAddLabel(i)"
-                        shape="plus-circle" title="添加标签" class="is-solid clr-icon"></clr-icon>
+                        shape="plus-circle" [title]="'PVC.ADD_LABEL' | translate" class="is-solid clr-icon"></clr-icon>
             </a>
           </div>
         </div>
         <div class="form-group row">
           <div class="col-lg-2 col-md-12 col-sm-12 col-xs-12">
-            <label for="pv_storage" class="required">容量大小</label>
+            <label for="pv_storage" class="required">{{'PVC.CONTAINER_NUM' | translate}</label>
           </div>
           <div class="col-lg-4 col-md-5 col-sm-12 col-xs-12">
-            <input formControlName="storage" class="form-control" type="number" id="pv_storage" placeholder="容量大小"
+            <input formControlName="storage" class="form-control" type="number" id="pv_storage" [placeholder]="'PVC.CONTAINER_NUM' | translate"
                    size="45">
           </div>
           <div class="col-lg-3 col-md-5 col-sm-12 col-xs-12">
@@ -99,7 +99,7 @@ <h2 class="header-title">{{title}}[{{cluster?.name}}]</h2>
         </div>
         <div class="form-group row" formGroupName="accessModes">
           <div class="col-lg-2 col-md-12 col-sm-12 col-xs-12">
-            <label class="required">访问模式</label>
+            <label class="required">{{'PVC.ACCESS_PATTERN' | translate}}</label>
           </div>
           <div class="col-lg-8 col-md-4 col-sm-12 col-xs-12">
             <clr-checkbox formControlName="ReadWriteOnce" [clrInline]="true" class="col-md-8">
@@ -116,9 +116,9 @@ <h2 class="header-title">{{title}}[{{cluster?.name}}]</h2>
           </div>
         </div>
         <div class="clr-wizard-footer-buttons" style="padding-top: 30px">
-          <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-          <button type="button" class="btn btn-primary" (click)="openModal()">高级配置</button>
-          <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+          <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+          <button type="button" class="btn btn-primary" (click)="openModal()">{{'BUTTON.ADVANCED_CONFIG' | translate}}</button>
+          <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
         </div>
       </section>
     </form>
diff --git a/src/frontend/src/app/admin/persistentvolume/list-persistentvolume/list-persistentvolume.component.html b/src/frontend/src/app/admin/persistentvolume/list-persistentvolume/list-persistentvolume.component.html
index 609d5608e..f95d9eef1 100644
--- a/src/frontend/src/app/admin/persistentvolume/list-persistentvolume/list-persistentvolume.component.html
+++ b/src/frontend/src/app/admin/persistentvolume/list-persistentvolume/list-persistentvolume.component.html
@@ -1,5 +1,5 @@
 <clr-datagrid class="wayne-clr-datagrid">
-  <clr-dg-placeholder>暂无数据！</clr-dg-placeholder>
+  <clr-dg-placeholder>{{'MESSAGE.NO_MESSAGE' | translate}}</clr-dg-placeholder>
   <clr-dg-column [clrDgSortBy]="nameComparator">
     <ng-container *clrDgHideableColumn="showState['名称']">
       名称
@@ -12,8 +12,8 @@
     </ng-container>
   </clr-dg-column>
   <clr-dg-column>
-    <ng-container *clrDgHideableColumn="showState['访问模式']">
-      访问模式
+    <ng-container *clrDgHideableColumn="showState['access_pattern']">
+      {{'PVC.ACCESS_PATTERN' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column>
@@ -50,7 +50,7 @@
       <button *ngIf="pv.spec.rbd && !pv.spec.rbd.created && isEnableRobin" class="action-item" (click)="createRbdImage(pv)">创建Rbd镜像
       </button>
       <button class="action-item" (click)="editPv(pv)">编辑</button>
-      <button class="action-item" (click)="deletePv(pv)">删除</button>
+      <button class="action-item" (click)="deletePv(pv)">{{'BUTTON.DELETE' | translate}}</button>
     </clr-dg-action-overflow>
     <clr-dg-cell class="copy">{{pv.metadata.name}}</clr-dg-cell>
     <clr-dg-cell>{{pv.spec.capacity.storage}}</clr-dg-cell>
diff --git a/src/frontend/src/app/admin/persistentvolume/persistentvolume.component.html b/src/frontend/src/app/admin/persistentvolume/persistentvolume.component.html
index 0d31c2c4a..8d45dc3e6 100644
--- a/src/frontend/src/app/admin/persistentvolume/persistentvolume.component.html
+++ b/src/frontend/src/app/admin/persistentvolume/persistentvolume.component.html
@@ -9,7 +9,7 @@
 
         <wayne-filter-box (confirm)="confirmEvent()" (cancel)="cancelEvent()">
           <wayne-checkbox-group [(ngModel)]="showList">
-            <wayne-checkbox>名称</wayne-checkbox>
+            <wayne-checkbox>{{'TITLE.NAME' | translate}}</wayne-checkbox>
             <wayne-checkbox>总量</wayne-checkbox>
             <wayne-checkbox>访问模式</wayne-checkbox>
             <wayne-checkbox>回收策略</wayne-checkbox>
diff --git a/src/frontend/src/app/admin/persistentvolume/persistentvolume.component.ts b/src/frontend/src/app/admin/persistentvolume/persistentvolume.component.ts
index 175bb4c37..b22806721 100644
--- a/src/frontend/src/app/admin/persistentvolume/persistentvolume.component.ts
+++ b/src/frontend/src/app/admin/persistentvolume/persistentvolume.component.ts
@@ -22,7 +22,7 @@ const showState = {
   '名称': {hidden: false},
   '总量': {hidden: false},
   '回收策略': {hidden: true},
-  '访问模式': {hidden: false},
+  'access_pattern': {hidden: false},
   '状态': {hidden: false},
   '已绑定PVC': {hidden: false},
   '原因': {hidden: true},
diff --git a/src/frontend/src/app/admin/persistentvolumeclaim/create-edit-persistentvolumeclaim/create-edit-persistentvolumeclaim.component.html b/src/frontend/src/app/admin/persistentvolumeclaim/create-edit-persistentvolumeclaim/create-edit-persistentvolumeclaim.component.html
index 6583f9caa..931709eea 100644
--- a/src/frontend/src/app/admin/persistentvolumeclaim/create-edit-persistentvolumeclaim/create-edit-persistentvolumeclaim.component.html
+++ b/src/frontend/src/app/admin/persistentvolumeclaim/create-edit-persistentvolumeclaim/create-edit-persistentvolumeclaim.component.html
@@ -4,7 +4,7 @@ <h3 class="modal-title">{{title}}</h3>
     <form #ngForm="ngForm">
       <section class="form-block">
         <div class="form-group" style="padding-left: 135px;">
-          <label for="app_id" class="col-md-3 form-group-label-override required">项目</label>
+          <label for="app_id" class="col-md-3 form-group-label-override required">应用</label>
           <div class="select form-control">
             <select id="app_id" [(ngModel)]="pvc.appId" [disabled]="actionType==1" name="app_id">
               <!--这是一个坑，如果使用value获取到的是string，使用ngValue获取到的是model本身类型-->
@@ -14,7 +14,7 @@ <h3 class="modal-title">{{title}}</h3>
           </div>
         </div>
         <div class="form-group" style="padding-left: 135px;">
-          <label for="name" class="col-md-3 form-group-label-override required">名称</label>
+          <label for="name" class="col-md-3 form-group-label-override required">{{'TITLE.NAME' | translate}}</label>
           <label for="name" aria-haspopup="true" role="tooltip" [class.invalid]="!isNameValid" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left form-control">
             <input class="form-control" type="text" id="name"  [(ngModel)]="pvc.name"
                    name="name" size="32"
@@ -24,7 +24,7 @@ <h3 class="modal-title">{{title}}</h3>
                    pattern="[a-z]([-a-z0-9]*[a-z0-9])?"
                    (keyup)='handleValidation()'>
             <span class="tooltip-content">
-             名称不符合规范，验证规则[a-z]([-a-z0-9]*[a-z0-9])?
+             {{'RULE.REGEXT' | translate}}[a-z]([-a-z0-9]*[a-z0-9])?
             </span>
           </label>
           <span class="spinner spinner-inline" [hidden]="!checkOnGoing"></span>
@@ -34,7 +34,7 @@ <h3 class="modal-title">{{title}}</h3>
           <wayne-ace-editor-box></wayne-ace-editor-box>
         </div>
         <div class="form-group" style="padding-left: 135px;">
-          <label for="description" class="col-md-3 form-group-label-override">描述</label>
+          <label for="description" class="col-md-3 form-group-label-override">{{'TITLE.DESCRIPTION' | translate}}</label>
           <textarea id="description" [(ngModel)]="pvc.description"
                     name="description"
                     rows="3">
@@ -45,7 +45,7 @@ <h3 class="modal-title">{{title}}</h3>
     </form>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+    <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
   </div>
 </clr-modal>
diff --git a/src/frontend/src/app/admin/persistentvolumeclaim/list-persistentvolumeclaim/list-persistentvolumeclaim.component.html b/src/frontend/src/app/admin/persistentvolumeclaim/list-persistentvolumeclaim/list-persistentvolumeclaim.component.html
index a407ea08e..6c8b766c0 100644
--- a/src/frontend/src/app/admin/persistentvolumeclaim/list-persistentvolumeclaim/list-persistentvolumeclaim.component.html
+++ b/src/frontend/src/app/admin/persistentvolumeclaim/list-persistentvolumeclaim/list-persistentvolumeclaim.component.html
@@ -26,18 +26,18 @@
   </clr-dg-column>
   <clr-dg-column>
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建者
+      {{'TITLE.CREATE_USER' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column class="col-time">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建时间
+      {{'TITLE.CREATE_TIME' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-row *ngFor="let pvc of pvcs" [clrDgItem]="pvc">
     <clr-dg-action-overflow >
       <button class="action-item" (click)="editPvc(pvc)" >编辑</button>
-      <button class="action-item" (click)="deletePvc(pvc)">删除</button>
+      <button class="action-item" (click)="deletePvc(pvc)">{{'BUTTON.DELETE' | translate}}</button>
     </clr-dg-action-overflow>
     <clr-dg-cell class="col-query-id">{{pvc.id}}</clr-dg-cell>
     <clr-dg-cell class="col-app-name copy">{{pvc.name}}</clr-dg-cell>
diff --git a/src/frontend/src/app/admin/persistentvolumeclaim/persistentvolumeclaim.component.html b/src/frontend/src/app/admin/persistentvolumeclaim/persistentvolumeclaim.component.html
index 11b64cf7d..92b19ffb7 100644
--- a/src/frontend/src/app/admin/persistentvolumeclaim/persistentvolumeclaim.component.html
+++ b/src/frontend/src/app/admin/persistentvolumeclaim/persistentvolumeclaim.component.html
@@ -7,7 +7,7 @@ <h2 class="header-title">PVC列表</h2>
       <div class="option-left">
         <button class="btn btn-link" (click)="openModal()">
           <clr-icon shape="add"></clr-icon>
-          创建PVC
+          {{'PVC.CREATE' | translate}}
         </button>
         <create-edit-persistentvolumeclaim (create)="createPvc($event)"></create-edit-persistentvolumeclaim>
       </div>
diff --git a/src/frontend/src/app/admin/persistentvolumeclaim/trash-persistentvolumeclaim/trash-persistentvolumeclaim.component.html b/src/frontend/src/app/admin/persistentvolumeclaim/trash-persistentvolumeclaim/trash-persistentvolumeclaim.component.html
index 900a0b544..51340c8d0 100644
--- a/src/frontend/src/app/admin/persistentvolumeclaim/trash-persistentvolumeclaim/trash-persistentvolumeclaim.component.html
+++ b/src/frontend/src/app/admin/persistentvolumeclaim/trash-persistentvolumeclaim/trash-persistentvolumeclaim.component.html
@@ -26,12 +26,12 @@ <h2 class="header-title">已删除PVC列表</h2>
       </clr-dg-column>
       <clr-dg-column>
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          创建者
+          {{'TITLE.CREATE_USER' | translate}}
         </ng-container>
       </clr-dg-column>
       <clr-dg-column class="col-time">
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          创建时间
+          {{'TITLE.CREATE_TIME' | translate}}
         </ng-container>
       </clr-dg-column>
       <clr-dg-row *ngFor="let pvc of pvcs" [clrDgItem]="pvc">
diff --git a/src/frontend/src/app/admin/persistentvolumeclaimtpl/create-edit-persistentvolumeclaimtpl/create-edit-persistentvolumeclaimtpl.component.html b/src/frontend/src/app/admin/persistentvolumeclaimtpl/create-edit-persistentvolumeclaimtpl/create-edit-persistentvolumeclaimtpl.component.html
index 3c7fc7950..f386754b3 100644
--- a/src/frontend/src/app/admin/persistentvolumeclaimtpl/create-edit-persistentvolumeclaimtpl/create-edit-persistentvolumeclaimtpl.component.html
+++ b/src/frontend/src/app/admin/persistentvolumeclaimtpl/create-edit-persistentvolumeclaimtpl/create-edit-persistentvolumeclaimtpl.component.html
@@ -20,7 +20,7 @@ <h3 class="modal-title">{{title}}
           </div>
         </div>
         <div class="form-group" style="padding-left: 135px;">
-          <label for="description" class="col-md-3 form-group-label-override">描述</label>
+          <label for="description" class="col-md-3 form-group-label-override">{{'TITLE.DESCRIPTION' | translate}}</label>
           <textarea id="description" [(ngModel)]="pvcTpl.description"
                     name="description"
                     rows="3">
@@ -35,7 +35,7 @@ <h3 class="modal-title">{{title}}
     </form>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+    <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
   </div>
 </clr-modal>
diff --git a/src/frontend/src/app/admin/persistentvolumeclaimtpl/list-persistentvolumeclaimtpl/list-persistentvolumeclaimtpl.component.html b/src/frontend/src/app/admin/persistentvolumeclaimtpl/list-persistentvolumeclaimtpl/list-persistentvolumeclaimtpl.component.html
index 7434e2d05..0187675e6 100644
--- a/src/frontend/src/app/admin/persistentvolumeclaimtpl/list-persistentvolumeclaimtpl/list-persistentvolumeclaimtpl.component.html
+++ b/src/frontend/src/app/admin/persistentvolumeclaimtpl/list-persistentvolumeclaimtpl/list-persistentvolumeclaimtpl.component.html
@@ -16,18 +16,18 @@
   </clr-dg-column>
   <clr-dg-column>
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建者
+      {{'TITLE.CREATE_USER' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column>
       <ng-container *clrDgHideableColumn="{hidden: false}">
-          创建时间
+          {{'TITLE.CREATE_TIME' | translate}}
       </ng-container>
   </clr-dg-column>
   <clr-dg-row *ngFor="let tpl of pvcTpls" [clrDgItem]="tpl">
     <clr-dg-action-overflow>
       <button class="action-item" (click)="editPvcTpl(tpl)" >编辑</button>
-      <button class="action-item" (click)="deletePvcTpl(tpl)">删除</button>
+      <button class="action-item" (click)="deletePvcTpl(tpl)">{{'BUTTON.DELETE' | translate}}</button>
     </clr-dg-action-overflow>
     <clr-dg-cell class="col-query-id">{{tpl.id}}</clr-dg-cell>
     <clr-dg-cell class="copy">{{tpl.name}}</clr-dg-cell>
diff --git a/src/frontend/src/app/admin/persistentvolumeclaimtpl/persistentvolumeclaimtpl.component.html b/src/frontend/src/app/admin/persistentvolumeclaimtpl/persistentvolumeclaimtpl.component.html
index 84cd85f2b..065f43660 100644
--- a/src/frontend/src/app/admin/persistentvolumeclaimtpl/persistentvolumeclaimtpl.component.html
+++ b/src/frontend/src/app/admin/persistentvolumeclaimtpl/persistentvolumeclaimtpl.component.html
@@ -7,7 +7,7 @@ <h2 class="header-title">PVC模版列表</h2>
       <div class="option-left">
         <button class="btn btn-link" (click)="openModal()">
           <clr-icon shape="add"></clr-icon>
-          创建PVC模版
+          {{'PVC.CREATE_TMP' | translate}}
         </button>
         <create-edit-persistentvolumeclaimtpl
           (create)="createPvcTpl($event)"></create-edit-persistentvolumeclaimtpl>
diff --git a/src/frontend/src/app/admin/persistentvolumeclaimtpl/trash-persistentvolumeclaimtpl/trash-persistentvolumeclaimtpl.component.html b/src/frontend/src/app/admin/persistentvolumeclaimtpl/trash-persistentvolumeclaimtpl/trash-persistentvolumeclaimtpl.component.html
index da73baac4..773f83070 100644
--- a/src/frontend/src/app/admin/persistentvolumeclaimtpl/trash-persistentvolumeclaimtpl/trash-persistentvolumeclaimtpl.component.html
+++ b/src/frontend/src/app/admin/persistentvolumeclaimtpl/trash-persistentvolumeclaimtpl/trash-persistentvolumeclaimtpl.component.html
@@ -21,12 +21,12 @@ <h2 class="header-title">已删除PVC模版列表</h2>
       </clr-dg-column>
       <clr-dg-column>
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          创建者
+          {{'TITLE.CREATE_USER' | translate}}
         </ng-container>
       </clr-dg-column>
       <clr-dg-column>
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          创建时间
+          {{'TITLE.CREATE_TIME' | translate}}
         </ng-container>
       </clr-dg-column>
       <clr-dg-row *ngFor="let tpl of pvcTpls" [clrDgItem]="tpl">
diff --git a/src/frontend/src/app/admin/secret/create-edit-secret/create-edit-secret.component.html b/src/frontend/src/app/admin/secret/create-edit-secret/create-edit-secret.component.html
index d603c4b94..2f0f0ee48 100644
--- a/src/frontend/src/app/admin/secret/create-edit-secret/create-edit-secret.component.html
+++ b/src/frontend/src/app/admin/secret/create-edit-secret/create-edit-secret.component.html
@@ -4,7 +4,7 @@ <h3 class="modal-title">{{secretTitle}}</h3>
     <form #secretForm="ngForm">
       <section class="form-block">
         <div class="form-group" style="padding-left: 135px;">
-          <label for="app_id" class="col-md-3 form-group-label-override required">项目</label>
+          <label for="app_id" class="col-md-3 form-group-label-override required">应用</label>
           <div class="select form-control">
             <select id="app_id" [(ngModel)]="secret.appId" [disabled]="actionType==1" name="app_id">
               <option *ngFor="let app of apps" [ngValue]="app.id" [selected]="app.id == secret.appId">{{app.name}}
@@ -13,7 +13,7 @@ <h3 class="modal-title">{{secretTitle}}</h3>
           </div>
         </div>
         <div class="form-group" style="padding-left: 135px;">
-          <label for="name" class="col-md-3 form-group-label-override required">名称</label>
+          <label for="name" class="col-md-3 form-group-label-override required">{{'TITLE.NAME' | translate}}</label>
           <label for="name" aria-haspopup="true" role="tooltip" [class.invalid]="!isNameValid" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left form-control">
             <input class="form-control" type="text" id="name"  [(ngModel)]="secret.name"
                    name="name" size="32"
@@ -33,15 +33,15 @@ <h3 class="modal-title">{{secretTitle}}</h3>
           <wayne-ace-editor-box></wayne-ace-editor-box>
         </div>
         <div class="form-group" style="padding-left: 135px;">
-          <label for="description" class="col-md-3 form-group-label-override">描述</label>
+          <label for="description" class="col-md-3 form-group-label-override">{{'TITLE.DESCRIPTION' | translate}}</label>
           <textarea id="description" [(ngModel)]="secret.description"
                     name="description"
                     rows="3">
           </textarea>
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-          <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+          <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+          <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
         </div>
       </section>
     </form>
diff --git a/src/frontend/src/app/admin/secret/list-secret/list-secret.component.html b/src/frontend/src/app/admin/secret/list-secret/list-secret.component.html
index e460e17fa..57e98ecdb 100644
--- a/src/frontend/src/app/admin/secret/list-secret/list-secret.component.html
+++ b/src/frontend/src/app/admin/secret/list-secret/list-secret.component.html
@@ -26,18 +26,18 @@
   </clr-dg-column>
   <clr-dg-column [clrDgField]="'user'">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建者
+      {{'TITLE.CREATE_USER' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column [clrDgSortBy]="'createTime'" class="col-time">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建时间
+      {{'TITLE.CREATE_TIME' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-row *ngFor="let secret of secrets" [clrDgItem]="secret">
     <clr-dg-action-overflow >
       <button class="action-item" (click)="editSecret(secret)" >编辑</button>
-      <button class="action-item" (click)="deleteSecret(secret)">删除</button>
+      <button class="action-item" (click)="deleteSecret(secret)">{{'BUTTON.DELETE' | translate}}</button>
     </clr-dg-action-overflow>
       <clr-dg-cell class="col-query-id">{{secret.id}}</clr-dg-cell>
       <clr-dg-cell class="col-app-name"><a href="javascript:void(0)" (click)="goToLink(secret, 'tpl')">{{secret.name}}</a></clr-dg-cell>
diff --git a/src/frontend/src/app/admin/secret/trash-secret/trash-secret.component.html b/src/frontend/src/app/admin/secret/trash-secret/trash-secret.component.html
index 8ca9f0623..d5dfb1034 100644
--- a/src/frontend/src/app/admin/secret/trash-secret/trash-secret.component.html
+++ b/src/frontend/src/app/admin/secret/trash-secret/trash-secret.component.html
@@ -26,12 +26,12 @@ <h2 class="header-title">已删除加密文件列表</h2>
       </clr-dg-column>
       <clr-dg-column [clrDgField]="'user'">
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          创建者
+          {{'TITLE.CREATE_USER' | translate}}
         </ng-container>
       </clr-dg-column>
       <clr-dg-column [clrDgSortBy]="'createTime'" class="col-time">
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          创建时间
+          {{'TITLE.CREATE_TIME' | translate}}
         </ng-container>
       </clr-dg-column>
       <clr-dg-row *ngFor="let secret of secrets" [clrDgItem]="secret">
diff --git a/src/frontend/src/app/admin/secrettpl/create-edit-secrettpl/create-edit-secrettpl.component.html b/src/frontend/src/app/admin/secrettpl/create-edit-secrettpl/create-edit-secrettpl.component.html
index fbba69954..4597d910f 100644
--- a/src/frontend/src/app/admin/secrettpl/create-edit-secrettpl/create-edit-secrettpl.component.html
+++ b/src/frontend/src/app/admin/secrettpl/create-edit-secrettpl/create-edit-secrettpl.component.html
@@ -15,7 +15,7 @@ <h3 class="modal-title">{{secrettplTitle}}
           </div>
         </div>
         <div class="form-group" style="padding-left: 135px;">
-          <label for="description" class="col-md-3 form-group-label-override">描述</label>
+          <label for="description" class="col-md-3 form-group-label-override">{{'TITLE.DESCRIPTION' | translate}}</label>
           <textarea id="description" [(ngModel)]="secrettpl.description"
                     name="description"
                     rows="3">
@@ -29,7 +29,7 @@ <h3 class="modal-title">{{secrettplTitle}}
     </form>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+    <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
   </div>
 </clr-modal>
diff --git a/src/frontend/src/app/admin/secrettpl/list-secrettpl/list-secrettpl.component.html b/src/frontend/src/app/admin/secrettpl/list-secrettpl/list-secrettpl.component.html
index 146db3e6b..e75e3aed1 100644
--- a/src/frontend/src/app/admin/secrettpl/list-secrettpl/list-secrettpl.component.html
+++ b/src/frontend/src/app/admin/secrettpl/list-secrettpl/list-secrettpl.component.html
@@ -16,18 +16,18 @@
   </clr-dg-column>
   <clr-dg-column [clrDgField]="'user'">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建者
+      {{'TITLE.CREATE_USER' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column [clrDgSortBy]="'createTime'">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建时间
+      {{'TITLE.CREATE_TIME' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-row *ngFor="let secrettpl of secrettpls" [clrDgItem]="secrettpl">
     <clr-dg-action-overflow >
       <button class="action-item" (click)="editSecrettpl(secrettpl)" >编辑</button>
-      <button class="action-item" (click)="deleteSecrettpl(secrettpl)">删除</button>
+      <button class="action-item" (click)="deleteSecrettpl(secrettpl)">{{'BUTTON.DELETE' | translate}}</button>
     </clr-dg-action-overflow>
     <clr-dg-cell class="col-query-id">{{secrettpl.id}}</clr-dg-cell>
     <clr-dg-cell class="col-app-name copy">{{secrettpl.name}}</clr-dg-cell>
diff --git a/src/frontend/src/app/admin/secrettpl/trash-secrettpl/trash-secrettpl.component.html b/src/frontend/src/app/admin/secrettpl/trash-secrettpl/trash-secrettpl.component.html
index a24baf6c1..e16cb7f83 100644
--- a/src/frontend/src/app/admin/secrettpl/trash-secrettpl/trash-secrettpl.component.html
+++ b/src/frontend/src/app/admin/secrettpl/trash-secrettpl/trash-secrettpl.component.html
@@ -21,12 +21,12 @@ <h2 class="header-title">已删除加密字典模板列表</h2>
       </clr-dg-column>
       <clr-dg-column [clrDgField]="'user'">
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          创建者
+          {{'TITLE.CREATE_USER' | translate}}
         </ng-container>
       </clr-dg-column>
       <clr-dg-column [clrDgSortBy]="'createTime'">
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          创建时间
+          {{'TITLE.CREATE_TIME' | translate}}
         </ng-container>
       </clr-dg-column>
       <clr-dg-row *ngFor="let secrettpl of secrettpls" [clrDgItem]="secrettpl">
diff --git a/src/frontend/src/app/admin/statefulset/create-edit-statefulset/create-edit-statefulset.component.html b/src/frontend/src/app/admin/statefulset/create-edit-statefulset/create-edit-statefulset.component.html
index 9aef953ad..f4f973848 100644
--- a/src/frontend/src/app/admin/statefulset/create-edit-statefulset/create-edit-statefulset.component.html
+++ b/src/frontend/src/app/admin/statefulset/create-edit-statefulset/create-edit-statefulset.component.html
@@ -5,7 +5,7 @@ <h3 class="modal-title">{{title}}</h3>
 
       <section class="form-block">
         <div class="form-group" style="padding-left: 135px;">
-          <label for="app_id" class="col-md-3 form-group-label-override required">项目</label>
+          <label for="app_id" class="col-md-3 form-group-label-override required">应用</label>
           <div class="select form-control">
             <select id="app_id" [(ngModel)]="statefulset.appId" [disabled]="actionType==1" name="app_id">
               <!--这是一个坑，如果使用value获取到的是string，使用ngValue获取到的是model本身类型-->
@@ -15,7 +15,7 @@ <h3 class="modal-title">{{title}}</h3>
           </div>
         </div>
         <div class="form-group" style="padding-left: 135px;">
-          <label for="statefulset_name" class="col-md-3 form-group-label-override required">名称</label>
+          <label for="statefulset_name" class="col-md-3 form-group-label-override required">{{'TITLE.NAME' | translate}}</label>
           <label for="statefulset_name" aria-haspopup="true" role="tooltip" [class.invalid]="!isNameValid"
                  class="tooltip tooltip-validation tooltip-md tooltip-bottom-left form-control">
             <input class="form-control" type="text" id="statefulset_name" [(ngModel)]="statefulset.name"
@@ -37,7 +37,7 @@ <h3 class="modal-title">{{title}}</h3>
 
         </div>
         <div class="form-group" style="padding-left: 135px;">
-          <label for="statefulset_description" class="col-md-3 form-group-label-override">描述</label>
+          <label for="statefulset_description" class="col-md-3 form-group-label-override">{{'TITLE.DESCRIPTION' | translate}}</label>
           <textarea id="statefulset_description" [(ngModel)]="statefulset.description"
                     name="statefulset_description"
                     rows="3">
@@ -48,7 +48,7 @@ <h3 class="modal-title">{{title}}</h3>
     </form>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+    <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
   </div>
 </clr-modal>
diff --git a/src/frontend/src/app/admin/statefulset/list-statefulset/list-statefulset.component.html b/src/frontend/src/app/admin/statefulset/list-statefulset/list-statefulset.component.html
index d89e2e5f6..00f6f9ffd 100644
--- a/src/frontend/src/app/admin/statefulset/list-statefulset/list-statefulset.component.html
+++ b/src/frontend/src/app/admin/statefulset/list-statefulset/list-statefulset.component.html
@@ -26,18 +26,18 @@
   </clr-dg-column>
   <clr-dg-column [clrDgField]="'user'">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建者
+      {{'TITLE.CREATE_USER' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column [clrDgSortBy]="'createTime'" class="col-time">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建时间
+      {{'TITLE.CREATE_TIME' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-row *ngFor="let statefulset of statefulsets" [clrDgItem]="statefulset">
     <clr-dg-action-overflow >
       <button class="action-item" (click)="editStatefulset(statefulset)" >编辑</button>
-      <button class="action-item" (click)="deleteStatefulset(statefulset)">删除</button>
+      <button class="action-item" (click)="deleteStatefulset(statefulset)">{{'BUTTON.DELETE' | translate}}</button>
     </clr-dg-action-overflow>
       <clr-dg-cell class="col-query-id">{{statefulset.id}}</clr-dg-cell>
       <clr-dg-cell class="col-app-name copy">{{statefulset.name}}</clr-dg-cell>
diff --git a/src/frontend/src/app/admin/statefulset/trash-statefulset/trash-statefulset.component.html b/src/frontend/src/app/admin/statefulset/trash-statefulset/trash-statefulset.component.html
index 7c09be159..8b079bf77 100644
--- a/src/frontend/src/app/admin/statefulset/trash-statefulset/trash-statefulset.component.html
+++ b/src/frontend/src/app/admin/statefulset/trash-statefulset/trash-statefulset.component.html
@@ -26,12 +26,12 @@ <h2 class="header-title">已删除状态副本集列表</h2>
   </clr-dg-column>
   <clr-dg-column [clrDgField]="'user'">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建者
+      {{'TITLE.CREATE_USER' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column  [clrDgSortBy]="'createTime'" class="col-time">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建时间
+      {{'TITLE.CREATE_TIME' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-row *ngFor="let statefulset of statefulsets" [clrDgItem]="statefulset">
diff --git a/src/frontend/src/app/admin/statefulsettpl/create-edit-statefulsettpl/create-edit-statefulsettpl.component.html b/src/frontend/src/app/admin/statefulsettpl/create-edit-statefulsettpl/create-edit-statefulsettpl.component.html
index 3dab722c9..10523620c 100644
--- a/src/frontend/src/app/admin/statefulsettpl/create-edit-statefulsettpl/create-edit-statefulsettpl.component.html
+++ b/src/frontend/src/app/admin/statefulsettpl/create-edit-statefulsettpl/create-edit-statefulsettpl.component.html
@@ -19,7 +19,7 @@ <h3 class="modal-title">{{title}}
           </div>
         </div>
         <div class="form-group" style="padding-left: 135px;">
-          <label for="statefulset_description" class="col-md-3 form-group-label-override">描述</label>
+          <label for="statefulset_description" class="col-md-3 form-group-label-override">{{'TITLE.DESCRIPTION' | translate}}</label>
           <textarea id="statefulset_description" [(ngModel)]="statefulsetTpl.description"
                     name="statefulset_description"
                     rows="3">
@@ -34,7 +34,7 @@ <h3 class="modal-title">{{title}}
     </form>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+    <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
   </div>
 </clr-modal>
diff --git a/src/frontend/src/app/admin/statefulsettpl/list-statefulsettpl/list-statefulsettpl.component.html b/src/frontend/src/app/admin/statefulsettpl/list-statefulsettpl/list-statefulsettpl.component.html
index 468f6e611..55fd27e68 100644
--- a/src/frontend/src/app/admin/statefulsettpl/list-statefulsettpl/list-statefulsettpl.component.html
+++ b/src/frontend/src/app/admin/statefulsettpl/list-statefulsettpl/list-statefulsettpl.component.html
@@ -17,18 +17,18 @@
 
   <clr-dg-column [clrDgField]="'user'">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建者
+      {{'TITLE.CREATE_USER' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column [clrDgSortBy]="'createTime'">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建时间
+      {{'TITLE.CREATE_TIME' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-row *ngFor="let statefulsetTpl of statefulsetTpls" [clrDgItem]="statefulsetTpl">
     <clr-dg-action-overflow >
       <button class="action-item" (click)="editStatefulsetTpl(statefulsetTpl)" >编辑</button>
-      <button class="action-item" (click)="deleteStatefulsetTpl(statefulsetTpl)">删除</button>
+      <button class="action-item" (click)="deleteStatefulsetTpl(statefulsetTpl)">{{'BUTTON.DELETE' | translate}}</button>
     </clr-dg-action-overflow>
     <clr-dg-cell>{{statefulsetTpl.id}}</clr-dg-cell>
     <clr-dg-cell class="copy">{{statefulsetTpl.name}}</clr-dg-cell>
diff --git a/src/frontend/src/app/admin/statefulsettpl/trash-statefulsettpl/trash-statefulsettpl.component.html b/src/frontend/src/app/admin/statefulsettpl/trash-statefulsettpl/trash-statefulsettpl.component.html
index fa19f7ea4..709dbe60c 100644
--- a/src/frontend/src/app/admin/statefulsettpl/trash-statefulsettpl/trash-statefulsettpl.component.html
+++ b/src/frontend/src/app/admin/statefulsettpl/trash-statefulsettpl/trash-statefulsettpl.component.html
@@ -22,12 +22,12 @@ <h2 class="header-title">已删除状态副本集模版列表</h2>
 
       <clr-dg-column [clrDgField]="'user'">
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          创建者
+          {{'TITLE.CREATE_USER' | translate}}
         </ng-container>
       </clr-dg-column>
       <clr-dg-column [clrDgSortBy]="'createTime'">
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          创建时间
+          {{'TITLE.CREATE_TIME' | translate}}
         </ng-container>
       </clr-dg-column>
       <clr-dg-row *ngFor="let statefulsetTpl of statefulsetTpls" [clrDgItem]="statefulsetTpl">
diff --git a/src/frontend/src/app/admin/user/create-edit-user/create-edit-user.component.html b/src/frontend/src/app/admin/user/create-edit-user/create-edit-user.component.html
index 4a5392cae..59c22604a 100644
--- a/src/frontend/src/app/admin/user/create-edit-user/create-edit-user.component.html
+++ b/src/frontend/src/app/admin/user/create-edit-user/create-edit-user.component.html
@@ -4,7 +4,7 @@ <h3 class="modal-title">{{userTitle}}</h3>
     <form #userForm="ngForm">
       <section class="form-block">
         <div class="form-group" style="padding-left: 135px;">
-          <label for="user_name" class="col-md-3 form-group-label-override required">名称</label>
+          <label for="user_name" class="col-md-3 form-group-label-override required">{{'TITLE.NAME' | translate}}</label>
           <label for="user_name" aria-haspopup="true" role="tooltip" [class.invalid]="!isNameValid" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left">
             <input type="text" id="user_name"  [(ngModel)]="user.name"
                    name="user_name" size="36"
@@ -48,8 +48,8 @@ <h3 class="modal-title">{{userTitle}}</h3>
           <span class="spinner spinner-inline" [hidden]="!checkOnGoing"></span>
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-          <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+          <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+          <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
         </div>
       </section>
     </form>
diff --git a/src/frontend/src/app/admin/user/list-user/list-user.component.html b/src/frontend/src/app/admin/user/list-user/list-user.component.html
index 97697510c..147737cd4 100644
--- a/src/frontend/src/app/admin/user/list-user/list-user.component.html
+++ b/src/frontend/src/app/admin/user/list-user/list-user.component.html
@@ -44,7 +44,7 @@
       <button class="action-item" (click)="resetPassword(user)" >重置密码</button>
       <button class="action-item" (click)="changeAdminRole(user)" >{{adminActions(user)}}</button>
       <button class="action-item" (click)="editUser(user)" >编辑</button>
-      <button class="action-item" (click)="deleteUser(user)">删除</button>
+      <button class="action-item" (click)="deleteUser(user)">{{'BUTTON.DELETE' | translate}}</button>
     </clr-dg-action-overflow>
       <clr-dg-cell class="col-id">{{user.id}}</clr-dg-cell>
       <!-- <clr-dg-cell><a href="javascript:void(0)" (click)="goToLink(user, 'app')">{{user.name}}</a></clr-dg-cell> -->
diff --git a/src/frontend/src/app/admin/user/reset-password/reset-password.component.html b/src/frontend/src/app/admin/user/reset-password/reset-password.component.html
index fde015503..9db09565a 100644
--- a/src/frontend/src/app/admin/user/reset-password/reset-password.component.html
+++ b/src/frontend/src/app/admin/user/reset-password/reset-password.component.html
@@ -29,8 +29,8 @@ <h3 class="modal-title">重置密码</h3>
       </section>
     </form>
     <div class="modal-footer">
-      <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-      <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+      <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+      <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
     </div>
   </div>
 
diff --git a/src/frontend/src/app/app.component.ts b/src/frontend/src/app/app.component.ts
index 0ee2eca0d..4c2fc9278 100644
--- a/src/frontend/src/app/app.component.ts
+++ b/src/frontend/src/app/app.component.ts
@@ -1,6 +1,8 @@
 import { Component, AfterViewInit } from '@angular/core';
 import {ScrollBarService} from './shared/client/v1/scrollBar.service';
 import {SelectCopyService} from './shared/client/v1/select-copy.service';
+import {TranslateService} from '@ngx-translate/core';
+import {StorageService} from './shared/client/v1/storage.service';
 
 @Component({
   selector: 'wayne-root',
@@ -11,9 +13,18 @@ export class AppComponent implements AfterViewInit {
 
   constructor(
     private scrollBar: ScrollBarService,
-    private selectCopyService: SelectCopyService
+    private selectCopyService: SelectCopyService,
+    public translate: TranslateService,
+    private storage: StorageService
   ) {
-    
+    translate.addLangs(['en', 'zh-Hans']);
+    const langStorage = storage.get('lang');
+    translate.setDefaultLang('zh-Hans');
+    if (langStorage) {
+      translate.use(translate.getLangs().indexOf(langStorage) > -1 ? langStorage : 'en');
+    } else {
+      translate.use('en');
+    }
   }
 
   ngAfterViewInit() {
diff --git a/src/frontend/src/app/app.module.ts b/src/frontend/src/app/app.module.ts
index c6696e15f..fb7b2b6ae 100644
--- a/src/frontend/src/app/app.module.ts
+++ b/src/frontend/src/app/app.module.ts
@@ -10,9 +10,14 @@ import {Router} from '@angular/router';
 import * as Raven from 'raven-js';
 import {PodTerminalModule} from './portal/pod-terminal/pod-terminal.module';
 import {environment} from '../environments/environment';
-import {HTTP_INTERCEPTORS} from '@angular/common/http';
+import {HttpClientModule, HTTP_INTERCEPTORS, HttpClient} from '@angular/common/http';
 import {AuthInterceptor} from './shared/interceptor/auth-interceptor';
-
+// translate
+import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
+import {TranslateHttpLoader} from '@ngx-translate/http-loader';
+export function HttpLoaderFactory(httpClient: HttpClient) {
+  return new TranslateHttpLoader(httpClient);
+}
 
 export function initUser(authService: AuthService, injector: Injector) {
   return () => authService.retrieveUser().then(() => {
@@ -60,6 +65,14 @@ export class WayneErrorHandler implements ErrorHandler {
     PortalModule,
     AdminModule,
     RoutingModule,
+    HttpClientModule,
+    TranslateModule.forRoot({
+      loader: {
+          provide: TranslateLoader,
+          useFactory: HttpLoaderFactory,
+          deps: [HttpClient]
+      }
+    })
   ],
   providers: [
     {
diff --git a/src/frontend/src/app/portal/app-apikey/apikey.component.html b/src/frontend/src/app/portal/app-apikey/apikey.component.html
index 819612e24..5f7f8c6cc 100644
--- a/src/frontend/src/app/portal/app-apikey/apikey.component.html
+++ b/src/frontend/src/app/portal/app-apikey/apikey.component.html
@@ -1,23 +1,23 @@
 <div class="row">
   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
     <div class="row flex-items-xs-between flex-items-xs-top" style="padding-left: 15px; padding-right: 15px;">
-      <h2 class="header-title">APIKey列表</h2>
+      <h2 class="header-title">APIKey {{'TITLE.LIST' | translate}}</h2>
     </div>
     <div class="table-search">
       <div class="table-search-left">
         <button *ngIf="authService.currentAppPermission.apiKey.create || authService.currentUser.admin" class="wayne-button normal"
           (click)="openModal()">
-          创建APIKey
+          {{'ACTION.CREATE' | translate}} APIKey
         </button>
         <wayne-filter-box (confirm)="confirmEvent()" (cancel)="cancelEvent()">
           <wayne-checkbox-group [(ngModel)]="showList">
-            <wayne-checkbox>名称</wayne-checkbox>
+            <wayne-checkbox>{{'TITLE.NAME' | translate}}</wayne-checkbox>
             <wayne-checkbox>角色</wayne-checkbox>
-            <wayne-checkbox>创建时间</wayne-checkbox>
+            <wayne-checkbox value="create_time">{{'TITLE.CREATE_TIME' | translate}}</wayne-checkbox>
             <wayne-checkbox>过期时间</wayne-checkbox>
-            <wayne-checkbox>创建者</wayne-checkbox>
-            <wayne-checkbox>描述</wayne-checkbox>
-            <wayne-checkbox>操作</wayne-checkbox>
+            <wayne-checkbox value="create_user">{{'TITLE.CREATE_USER' | translate}}</wayne-checkbox>
+            <wayne-checkbox>{{'TITLE.DESCRIPTION' | translate}}</wayne-checkbox>
+            <wayne-checkbox value="action">{{'TITLE.ACTION' | translate}}</wayne-checkbox>
           </wayne-checkbox-group>
         </wayne-filter-box>
       </div>
diff --git a/src/frontend/src/app/portal/app-apikey/apikey.component.ts b/src/frontend/src/app/portal/app-apikey/apikey.component.ts
index 94d1d2a24..153a1aed1 100644
--- a/src/frontend/src/app/portal/app-apikey/apikey.component.ts
+++ b/src/frontend/src/app/portal/app-apikey/apikey.component.ts
@@ -12,15 +12,16 @@ import {CreateEditApiKeyComponent} from './create-edit-apikey/create-edit-apikey
 import {ApiKey} from '../../shared/model/v1/apikey';
 import {ApiKeyService} from '../../shared/client/v1/apikey.service';
 import {ActivatedRoute} from '@angular/router';
+import {TranslateService} from '@ngx-translate/core';
 
 const showState = {
   '名称': {hidden: false},
   '角色': {hidden: false},
-  '创建时间': {hidden: false},
+  'create_time': {hidden: false},
   '过期时间': {hidden: false},
-  '创建者': {hidden: false},
+  'create_user': {hidden: false},
   '描述': {hidden: false},
-  '操作': {hidden: false}
+  'action': {hidden: false}
 };
 
 @Component({
@@ -46,6 +47,7 @@ export class AppApiKeyComponent implements OnInit, OnDestroy {
               private route: ActivatedRoute,
               public authService: AuthService,
               private messageHandlerService: MessageHandlerService,
+              public translate: TranslateService,
               private deletionDialogService: ConfirmationDialogService) {
     this.subscription = deletionDialogService.confirmationConfirm$.subscribe(message => {
       if (message &&
diff --git a/src/frontend/src/app/portal/app-apikey/create-edit-apikey/create-edit-apikey.component.html b/src/frontend/src/app/portal/app-apikey/create-edit-apikey/create-edit-apikey.component.html
index 4a2ed9925..cd9963691 100644
--- a/src/frontend/src/app/portal/app-apikey/create-edit-apikey/create-edit-apikey.component.html
+++ b/src/frontend/src/app/portal/app-apikey/create-edit-apikey/create-edit-apikey.component.html
@@ -1,12 +1,12 @@
 <clr-modal [(clrModalOpen)]="modalOpened">
-  <h3 class="modal-title">{{title}}</h3>
+  <h3 class="modal-title">{{title | translate}}APIKey</h3>
 
   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" class="modal-body">
     <form #apiKeyForm="ngForm">
       <section class="form-block">
         <div class="form-group row">
           <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
-            <label for="name" class="required">名称</label>
+            <label for="name" class="required">{{'TITLE.NAME' | translate}}</label>
           </div>
           <div class="col-lg-8 col-md-4 col-sm-12 col-xs-12">
             <input class="form-control"
@@ -15,13 +15,13 @@ <h3 class="modal-title">{{title}}</h3>
                    name="name"
                    required
                    id="name"
-                   placeholder="名称"
+                   [placeholder]="'TITEl.NAME' | translate"
                    size="45">
           </div>
         </div>
         <div class="form-group row">
           <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
-            <label for="role" class="required">角色</label>
+            <label for="role" class="required">{{'TITLE.ROLE' | translate}}</label>
           </div>
           <div class="col-lg-8 col-md-4 col-sm-12 col-xs-12">
             <div class="select">
@@ -35,7 +35,7 @@ <h3 class="modal-title">{{title}}</h3>
         </div>
         <div class="form-group row">
           <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
-            <label for="expire_in" class="required">过期时间</label>
+            <label for="expire_in" class="required">{{'TITLE.EXPIRE_TIME' | translate}}</label>
           </div>
           <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
             <input class="form-control"
@@ -44,13 +44,13 @@ <h3 class="modal-title">{{title}}</h3>
                    required
                    name="expire_in"
                    id="expire_in"
-                   placeholder="单位秒，0代表永久有效"
+                   [placeholder]="'PLACEHOLDER.EXPIRE_TIME' | translate"
                    size="45">
           </div>
         </div>
         <div class="form-group row">
           <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
-            <label for="description">描述</label>
+            <label for="description">{{'TITLE.DESCRIPTION' | translate}}</label>
           </div>
           <div class="col-lg-8 col-md-4 col-sm-12 col-xs-12">
               <textarea class="form-control"
@@ -63,8 +63,8 @@ <h3 class="modal-title">{{title}}</h3>
         </div>
         <div class="modal-footer">
 
-          <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-          <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+          <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+          <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.CONFIRM' | translate}}</button>
         </div>
       </section>
     </form>
diff --git a/src/frontend/src/app/portal/app-apikey/create-edit-apikey/create-edit-apikey.component.ts b/src/frontend/src/app/portal/app-apikey/create-edit-apikey/create-edit-apikey.component.ts
index f8a4fa4ea..4bcac8aab 100644
--- a/src/frontend/src/app/portal/app-apikey/create-edit-apikey/create-edit-apikey.component.ts
+++ b/src/frontend/src/app/portal/app-apikey/create-edit-apikey/create-edit-apikey.component.ts
@@ -10,6 +10,7 @@ import {GroupService} from '../../../shared/client/v1/group.service';
 import {Group} from '../../../shared/model/v1/group';
 import {ActivatedRoute} from '@angular/router';
 import {PageState} from '../../../shared/page/page-state';
+import {TranslateService} from '@ngx-translate/core';
 
 @Component({
   selector: 'create-edit-apikey',
@@ -36,6 +37,7 @@ export class CreateEditApiKeyComponent implements OnInit {
   constructor(private messageHandlerService: MessageHandlerService,
               private route: ActivatedRoute,
               private apiKeyService: ApiKeyService,
+              public translate: TranslateService,
               private groupService: GroupService) {
   }
 
@@ -57,7 +59,7 @@ export class CreateEditApiKeyComponent implements OnInit {
     this.modalOpened = true;
     if (id) {
       this.actionType = ActionType.EDIT;
-      this.title = '编辑APIKey';
+      this.title = 'ACTION.EDIT';
       this.apiKeyService.getById(id, null, this.appId).subscribe(
         status => {
           this.apiKey = status.data
@@ -68,7 +70,7 @@ export class CreateEditApiKeyComponent implements OnInit {
         });
     } else {
       this.actionType = ActionType.ADD_NEW;
-      this.title = '创建APIKey';
+      this.title = 'ACTION.CREATE';
       this.apiKey = new ApiKey();
     }
   }
diff --git a/src/frontend/src/app/portal/app-apikey/list-apikey/list-apikey.component.html b/src/frontend/src/app/portal/app-apikey/list-apikey/list-apikey.component.html
index b3b016249..40433a843 100644
--- a/src/frontend/src/app/portal/app-apikey/list-apikey/list-apikey.component.html
+++ b/src/frontend/src/app/portal/app-apikey/list-apikey/list-apikey.component.html
@@ -3,25 +3,25 @@
     <ng-container>ID</ng-container>
   </clr-dg-column>
   <clr-dg-column [clrDgField]="'name'">
-    <ng-container *clrDgHideableColumn="showState['名称']">名称</ng-container>
+    <ng-container *clrDgHideableColumn="showState['名称']">{{'TITLE.NAME' | translate}}</ng-container>
   </clr-dg-column>
   <clr-dg-column>
     <ng-container *clrDgHideableColumn="showState['角色']">角色</ng-container>
   </clr-dg-column>
   <clr-dg-column class="col-time">
-    <ng-container *clrDgHideableColumn="showState['创建时间']">创建时间</ng-container>
+    <ng-container *clrDgHideableColumn="showState['create_time']">{{'TITLE.CREATE_TIME' | translate}}</ng-container>
   </clr-dg-column>
   <clr-dg-column>
     <ng-container *clrDgHideableColumn="showState['过期时间']">过期时间(s)</ng-container>
   </clr-dg-column>
   <clr-dg-column class="col-user">
-    <ng-container *clrDgHideableColumn="showState['创建者']">创建者</ng-container>
+    <ng-container *clrDgHideableColumn="showState['create_user']">{{'TITLE.CREATE_USER' | translate}}</ng-container>
   </clr-dg-column>
   <clr-dg-column>
-    <ng-container *clrDgHideableColumn="showState['描述']">描述</ng-container>
+    <ng-container *clrDgHideableColumn="showState['描述']">{{'TITLE.DESCRIPTION' | translate}}</ng-container>
   </clr-dg-column>
   <clr-dg-column class="col-operate">
-    <ng-container *clrDgHideableColumn="showState['操作']">操作</ng-container>
+    <ng-container *clrDgHideableColumn="showState['action']">操作</ng-container>
   </clr-dg-column>
 
   <clr-dg-row *ngFor="let apiKey of apiKeys" [clrDgItem]="apiKey">
@@ -33,8 +33,8 @@
     <clr-dg-cell class="col-user">{{apiKey.user}}</clr-dg-cell>
     <clr-dg-cell>{{apiKey.description}}</clr-dg-cell>
     <clr-dg-cell class="col-operate">
-      <button class="wayne-button text" *ngIf="authService.currentAppPermission.apiKey.read || authService.currentUser.admin" href="javascript:void(0)" (click)="tokenDetail(apiKey)">详情</button>
-      <button class="wayne-button text" *ngIf="authService.currentAppPermission.apiKey.delete || authService.currentUser.admin" href="javascript:void(0)" (click)="deleteApiKey(apiKey)">删除</button>
+      <button class="wayne-button text" *ngIf="authService.currentAppPermission.apiKey.read || authService.currentUser.admin" href="javascript:void(0)" (click)="tokenDetail(apiKey)">{{'BUTTON.DETAIL' | translate}}</button>
+      <button class="wayne-button text" *ngIf="authService.currentAppPermission.apiKey.delete || authService.currentUser.admin" href="javascript:void(0)" (click)="deleteApiKey(apiKey)">{{'BUTTON.DELETE' | translate}}</button>
     </clr-dg-cell>
   </clr-dg-row>
 
diff --git a/src/frontend/src/app/portal/app-apikey/token-detail/token-detail.component.html b/src/frontend/src/app/portal/app-apikey/token-detail/token-detail.component.html
index 4e82b77af..3d6bdd555 100644
--- a/src/frontend/src/app/portal/app-apikey/token-detail/token-detail.component.html
+++ b/src/frontend/src/app/portal/app-apikey/token-detail/token-detail.component.html
@@ -1,5 +1,5 @@
 <clr-modal [(clrModalOpen)]="modalOpened">
-  <h3 class="modal-title">查看token</h3>
+  <h3 class="modal-title">{{'ACTION.LOOK_UP' | translate}}token</h3>
   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" class="modal-body">
     <hr>
     <p style="word-break:break-all;">{{token}}</p>
diff --git a/src/frontend/src/app/portal/app-apikey/token-detail/token-detail.ts b/src/frontend/src/app/portal/app-apikey/token-detail/token-detail.ts
index 85623f24f..6486d18a5 100644
--- a/src/frontend/src/app/portal/app-apikey/token-detail/token-detail.ts
+++ b/src/frontend/src/app/portal/app-apikey/token-detail/token-detail.ts
@@ -1,4 +1,5 @@
 import {Component} from '@angular/core';
+import {TranslateService} from '@ngx-translate/core';
 
 @Component({
   selector: 'token-detail',
@@ -8,7 +9,9 @@ export class TokenDetailComponent {
   token: string;
   modalOpened: boolean;
 
-  constructor() {
+  constructor(
+    public translate: TranslateService
+  ) {
   }
 
   viewToken(token: string) {
diff --git a/src/frontend/src/app/portal/app-user/app-user.component.html b/src/frontend/src/app/portal/app-user/app-user.component.html
index bba1bb257..5af37741c 100644
--- a/src/frontend/src/app/portal/app-user/app-user.component.html
+++ b/src/frontend/src/app/portal/app-user/app-user.component.html
@@ -13,10 +13,10 @@ <h2 class="header-title">项目用户列表</h2>
         <wayne-filter-box (confirm)="confirmEvent()" (cancel)="cancelEvent()">
           <wayne-checkbox-group [(ngModel)]="showList">
             <wayne-checkbox>用户名称</wayne-checkbox>
-            <wayne-checkbox>项目名称</wayne-checkbox>
+            <wayne-checkbox>项目{{'TITLE.NAME' | translate}}</wayne-checkbox>
             <wayne-checkbox>所属群组</wayne-checkbox>
-            <wayne-checkbox>创建时间</wayne-checkbox>
-            <wayne-checkbox>操作</wayne-checkbox>
+            <wayne-checkbox value="create_time">{{'TITLE.CREATE_TIME' | translate}}</wayne-checkbox>
+            <wayne-checkbox value="action">{{'TITLE.ACTION' | translate}}</wayne-checkbox>
           </wayne-checkbox-group>
         </wayne-filter-box>
       </div>
diff --git a/src/frontend/src/app/portal/app-user/app-user.component.ts b/src/frontend/src/app/portal/app-user/app-user.component.ts
index aa0fd050a..c58499ace 100644
--- a/src/frontend/src/app/portal/app-user/app-user.component.ts
+++ b/src/frontend/src/app/portal/app-user/app-user.component.ts
@@ -18,8 +18,8 @@ const showState = {
   '用户名称': {hidden: false},
   '项目名称': {hidden: false},
   '所属群组': {hidden: false},
-  '创建时间': {hidden: false},
-  '操作': {hidden: false}
+  'create_time': {hidden: false},
+  'action': {hidden: false}
 };
 
 @Component({
diff --git a/src/frontend/src/app/portal/app-user/create-edit-app-user/create-edit-app-user.component.html b/src/frontend/src/app/portal/app-user/create-edit-app-user/create-edit-app-user.component.html
index 898372f61..c9a25628a 100644
--- a/src/frontend/src/app/portal/app-user/create-edit-app-user/create-edit-app-user.component.html
+++ b/src/frontend/src/app/portal/app-user/create-edit-app-user/create-edit-app-user.component.html
@@ -14,7 +14,7 @@ <h3 class="modal-title">{{appUserTitle}}</h3>
         <!--   </div> -->
         <!-- </div> -->
         <div class="form-group" style="padding-left: 135px;">
-          <label for="name" class="col-md-3 form-group-label-override required">名称</label>
+          <label for="name" class="col-md-3 form-group-label-override required">{{'TITLE.NAME' | translate}}</label>
           <label for="name" aria-haspopup="true" role="tooltip" [class.invalid]="!isNameValid" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left form-control">
             <input class="form-control" type="text" id="app_user_name"  [(ngModel)]="appUser.user.name"
                    name="name" size="32"
@@ -47,7 +47,7 @@ <h3 class="modal-title">{{appUserTitle}}</h3>
     </form>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+    <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
   </div>
 </clr-modal>
diff --git a/src/frontend/src/app/portal/app-user/list-app-user/list-app-user.component.html b/src/frontend/src/app/portal/app-user/list-app-user/list-app-user.component.html
index 2d0fb4ea7..d28ef5a51 100644
--- a/src/frontend/src/app/portal/app-user/list-app-user/list-app-user.component.html
+++ b/src/frontend/src/app/portal/app-user/list-app-user/list-app-user.component.html
@@ -20,8 +20,8 @@
     </ng-container>
   </clr-dg-column>
   <clr-dg-column>
-    <ng-container *clrDgHideableColumn="showState['创建时间']">
-      创建时间
+    <ng-container *clrDgHideableColumn="showState['create_time']">
+      {{'TITLE.CREATE_TIME' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column
@@ -32,8 +32,8 @@
       authService.currentAppPermission.appUser.delete ||
       authService.currentUser.admin"
   >
-    <ng-container *clrDgHideableColumn="showState['操作']">
-      操作
+    <ng-container *clrDgHideableColumn="showState['action']">
+      {{'TITLE.ACTION' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-row *ngFor="let appUser of appUsers" [clrDgItem]="appUser">
@@ -63,7 +63,7 @@
         authService.currentAppPermission.appUser.delete ||
         authService.currentUser.admin"
         (click)="deleteAppUser(appUser)">
-        删除</button>
+        {{'BUTTON.DELETE' | translate}}</button>
     </clr-dg-cell>
   </clr-dg-row>
 
diff --git a/src/frontend/src/app/portal/app-webhook/app-webhook.component.html b/src/frontend/src/app/portal/app-webhook/app-webhook.component.html
index 21a620f6a..63a342ab9 100644
--- a/src/frontend/src/app/portal/app-webhook/app-webhook.component.html
+++ b/src/frontend/src/app/portal/app-webhook/app-webhook.component.html
@@ -12,12 +12,12 @@ <h2 class="header-title">{{ resourceLabel }}列表</h2>
         </button>
         <wayne-filter-box (confirm)="confirmEvent()" (cancel)="cancelEvent()">
           <wayne-checkbox-group [(ngModel)]="showList">
-            <wayne-checkbox>名称</wayne-checkbox>
+            <wayne-checkbox>{{'TITLE.NAME' | translate}}</wayne-checkbox>
             <wayne-checkbox>URL</wayne-checkbox>
             <wayne-checkbox>启用状态</wayne-checkbox>
             <wayne-checkbox>创建用户</wayne-checkbox>
-            <wayne-checkbox>创建时间</wayne-checkbox>
-            <wayne-checkbox>操作</wayne-checkbox>
+            <wayne-checkbox value="create_time">{{'TITLE.CREATE_TIME' | translate}}</wayne-checkbox>
+            <wayne-checkbox value="action">{{'TITLE.ACTION' | translate}}</wayne-checkbox>
           </wayne-checkbox-group>
         </wayne-filter-box>
       </div>
diff --git a/src/frontend/src/app/portal/app-webhook/app-webhook.component.ts b/src/frontend/src/app/portal/app-webhook/app-webhook.component.ts
index 79e38296d..15bf06a00 100644
--- a/src/frontend/src/app/portal/app-webhook/app-webhook.component.ts
+++ b/src/frontend/src/app/portal/app-webhook/app-webhook.component.ts
@@ -20,8 +20,8 @@ const showState = {
   'URL': {hidden: false},
   '启用状态': {hidden: false},
   '创建用户': {hidden: false},
-  '创建时间': {hidden: false},
-  '操作': {hidden: false}
+  'create_time': {hidden: false},
+  'action': {hidden: false}
 };
 
 @Component({
diff --git a/src/frontend/src/app/portal/app-webhook/create-edit-app-webhook/create-edit-app-webhook.component.html b/src/frontend/src/app/portal/app-webhook/create-edit-app-webhook/create-edit-app-webhook.component.html
index 036ebf9aa..aea11c285 100644
--- a/src/frontend/src/app/portal/app-webhook/create-edit-app-webhook/create-edit-app-webhook.component.html
+++ b/src/frontend/src/app/portal/app-webhook/create-edit-app-webhook/create-edit-app-webhook.component.html
@@ -4,7 +4,7 @@ <h3 class="modal-title">{{webHookTitle}}</h3>
     <form #webHookForm="ngForm">
       <section class="form-block">
         <div class="form-group" style="padding-left: 135px;">
-          <label for="webhook-name" class="col-md-3 form-group-label-override required">名称</label>
+          <label for="webhook-name" class="col-md-3 form-group-label-override required">{{'TITLE.NAME' | translate}}</label>
           <label for="webhook-name" aria-haspopup="true" role="tooltip" [class.invalid]="!validateName()" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left form-control">
             <input class="form-control" type="text" id="webhook-name"  [(ngModel)]="webHook.name"
                    name="webhook-name"
@@ -60,7 +60,7 @@ <h3 class="modal-title">{{webHookTitle}}</h3>
     </form>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+    <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
   </div>
 </clr-modal>
diff --git a/src/frontend/src/app/portal/app-webhook/list-app-webhook/list-app-webhook.component.html b/src/frontend/src/app/portal/app-webhook/list-app-webhook/list-app-webhook.component.html
index 3e6badad7..90ec0d906 100644
--- a/src/frontend/src/app/portal/app-webhook/list-app-webhook/list-app-webhook.component.html
+++ b/src/frontend/src/app/portal/app-webhook/list-app-webhook/list-app-webhook.component.html
@@ -25,8 +25,8 @@
     </ng-container>
   </clr-dg-column>
   <clr-dg-column>
-    <ng-container *clrDgHideableColumn="showState['创建时间']">
-      创建时间
+    <ng-container *clrDgHideableColumn="showState['create_time']">
+      {{'TITLE.CREATE_TIME' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column
@@ -37,8 +37,8 @@
       authService.currentAppPermission.webHook.delete ||
       authService.currentUser.admin"
   >
-    <ng-container *clrDgHideableColumn="showState['操作']">
-      操作
+    <ng-container *clrDgHideableColumn="showState['action']">
+      {{'TITLE.ACTION' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-row *ngFor="let webHook of webHooks; let i = index" [clrDgItem]="webHook">
@@ -77,7 +77,7 @@
           authService.currentAppPermission.webHook.delete ||
           authService.currentUser.admin"
         (click)="deleteWebhook(webHook)">
-        删除</button>
+        {{'BUTTON.DELETE' | translate}}</button>
     </clr-dg-cell>
   </clr-dg-row>
 
diff --git a/src/frontend/src/app/portal/app/app.component.html b/src/frontend/src/app/portal/app/app.component.html
index 2676c7c9d..164406bf6 100644
--- a/src/frontend/src/app/portal/app/app.component.html
+++ b/src/frontend/src/app/portal/app/app.component.html
@@ -8,18 +8,18 @@
                 <svg style="width: 16px; height: 16px;fill: #377aec; margin-right: 5px;" viewBox="0, 0, 40 , 40" xmlns="http://www.w3.org/2000/svg">
                   <rect x="0" y="18.5" width="40" height="3" rx="1.5" ry="1.5"></rect>
                   <rect x="18.5" y="0" width="3" height="40" rx="1.5" ry="1.5"></rect>
-                </svg> 创建项目
+                </svg> {{'TITLE.CREATE_APP' | translate}}
             </div>
           </wayne-card>
           <ng-container *ngFor="let cluster of clusters; let i = index">
             <wayne-card @cardState *ngIf="cluster.state" [header]="cluster.name">
               <div style="flex: 1; margin-top: 12px; display: flex; flex-direction: column; justify-content: space-around;">
                 <div style="display: flex;">
-                  <div>cpu使用(核)</div>
+                  <div style="font-family: monospace;">{{'TITLE.CPU_USAGE_SHORT' | translate}}</div>
                   <wayne-progress [count]="resources[cluster.name].usage.cpu" [total]="dealLimitLogic(resources[cluster.name].limit.cpu)"></wayne-progress>
                 </div>
                 <div style="display: flex;">
-                  <div>内存使用(G)</div>
+                  <div style="font-family: monospace;">{{'TITLE.MEMORY_USAGE_SHORT' | translate}}</div>
                   <wayne-progress [count]="resources[cluster.name].usage.memory" [total]="dealLimitLogic(resources[cluster.name].limit.memory)"></wayne-progress>
                 </div>
               </div>
@@ -28,8 +28,8 @@
         </div>
         <p class="card-show-p">
           <span *ngIf="clusters.length >= allowNumber" (click)="changeCard()">
-            <span *ngIf="!allowShowAll">展开</span>
-            <span *ngIf="allowShowAll">收起</span>
+            <span *ngIf="!allowShowAll">{{'ACTION.FOLD' | translate}}</span>
+            <span *ngIf="allowShowAll">{{'ACTION.UNFOLD' | translate}}</span>
             <svg class="card-change-svg" width="12" height="12" xmlns="http://www.w3.org/2000/svg" viewBox="0, 0, 20, 10" style="margin-left: 3px;transition: transform 250ms ease-in-out;">
               <polyline points="3,2 10,10 17,2" style="fill: white;stroke: #377aec;stroke-width: 2;"></polyline>
               <circle cx="3" cy="2" r="1" style="fill: #377aec;"></circle>
@@ -40,20 +40,20 @@
         <wayne-box>
           <div class="table-search" style="padding: 0 15px;">
             <div class="table-search-left">
-              <button class="wayne-button active" [class.active]="!starredFilter" (click)="starredChange(false)">所有内容</button>
-              <button class="wayne-button" [class.active]="starredFilter" (click)="starredChange(true)">已收藏</button>
+              <button class="wayne-button active" [class.active]="!starredFilter" (click)="starredChange(false)">{{'TITLE.ALL_CONTENT' | translate}}</button>
+              <button class="wayne-button" [class.active]="starredFilter" (click)="starredChange(true)">{{'TITLE.COLLECTED' | translate}}</button>
               <wayne-filter-box (confirm)="confirmEvent()" (cancel)="cancelEvent()">
                 <wayne-checkbox-group class=".filter-body-content" [(ngModel)]="showList">
-                  <wayne-checkbox>名称</wayne-checkbox>
-                  <wayne-checkbox>描述</wayne-checkbox>
-                  <wayne-checkbox>创建时间</wayne-checkbox>
-                  <wayne-checkbox>创建者</wayne-checkbox>
-                  <wayne-checkbox>操作</wayne-checkbox>
+                  <wayne-checkbox value="name">{{'TITLE.NAME' | translate}}</wayne-checkbox>
+                  <wayne-checkbox value="description">{{'TITLE.DESCRIPTION' | translate}}</wayne-checkbox>
+                  <wayne-checkbox value="create_time">{{'TITLE.CREATE_TIME' | translate}}</wayne-checkbox>
+                  <wayne-checkbox value="create_user">{{'TITLE.CREATE_USER' | translate}}</wayne-checkbox>
+                  <wayne-checkbox value="action">{{'TITLE.ACTION' | translate}}</wayne-checkbox>
                 </wayne-checkbox-group>
               </wayne-filter-box>
             </div>
             <div class="table-search-right">
-              <wayne-input [(ngModel)]="appName" search placeholder="点此输入筛选过滤项目" (input)="searchApp()"></wayne-input>
+              <wayne-input [(ngModel)]="appName" search [placeholder]="'PLACEHOLDER.PRODUCT' | translate" (input)="searchApp()"></wayne-input>
             </div>
           </div>
           <list-app style="width: 100%;" [apps]="changedApps" [starredFilter]="starredInherit" (namespaces)="namespaces" (delete)="deleteApp($event)" [showState]="showState"
diff --git a/src/frontend/src/app/portal/app/app.component.ts b/src/frontend/src/app/portal/app/app.component.ts
index 0a10b3f8d..f6016a566 100644
--- a/src/frontend/src/app/portal/app/app.component.ts
+++ b/src/frontend/src/app/portal/app/app.component.ts
@@ -26,6 +26,7 @@ import {
   animate,
   transition
 } from '@angular/animations';
+import {TranslateService} from '@ngx-translate/core';
 
 class ClusterCard{
   name: string;
@@ -33,11 +34,11 @@ class ClusterCard{
 }
 
 const showState = {
-  '名称': {hidden: false},
-  '描述': {hidden: false},
-  '创建时间': {hidden: false},
-  '创建者': {hidden: false},
-  '操作': {hidden: false}
+  'name': {hidden: false},
+  'description': {hidden: false},
+  'create_time': {hidden: false},
+  'create_user': {hidden: false},
+  'action': {hidden: false}
 };
 
 @Component({
@@ -89,6 +90,7 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
               private messageHandlerService: MessageHandlerService,
               private deletionDialogService: ConfirmationDialogService,
               private element: ElementRef,
+              public translate: TranslateService,
               private storage: StorageService,
               private eventManager: EventManager,
               @Inject(DOCUMENT) private document: any) {
diff --git a/src/frontend/src/app/portal/app/create-edit-app/create-edit-app.component.html b/src/frontend/src/app/portal/app/create-edit-app/create-edit-app.component.html
index f17cb5eb8..05f2e56b0 100644
--- a/src/frontend/src/app/portal/app/create-edit-app/create-edit-app.component.html
+++ b/src/frontend/src/app/portal/app/create-edit-app/create-edit-app.component.html
@@ -4,24 +4,24 @@ <h3 class="modal-title">{{appTitle}}</h3>
     <form #appForm="ngForm">
       <section class="form-block">
         <div class="form-group" style="padding-left: 135px;">
-          <label for="app_name" class="col-md-3 form-group-label-override required">名称</label>
+          <label for="app_name" class="col-md-3 form-group-label-override required">{{'TITLE.NAME' | translate}}</label>
           <label for="app_name" aria-haspopup="true" role="tooltip" [class.invalid]="!isNameValid" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left form-control">
             <input class="form-control" type="text" id="app_name"  [(ngModel)]="app.name"
                    name="app_name" size="32"
                    required
-                   placeholder="英文小写，中划线分隔"
+                   [placeholder]="'PLACEHOLDER.APP_NAME' | translate"
                    [readonly]="actionType==1"
                    pattern="[a-z]([-a-z0-9]*[a-z0-9])?"
                    maxlength="32"
                    (keyup)='handleValidation()'>
             <span class="tooltip-content">
-              项目名称不符合规范，验证规则[a-z]([-a-z0-9]*[a-z0-9])?
+              {{'RULE.REGEXT' | translate}}[a-z]([-a-z0-9]*[a-z0-9])?
             </span>
           </label>
           <span class="spinner spinner-inline" [hidden]="!checkOnGoing"></span>
         </div>
         <div hidden class="form-group" style="padding-left: 135px;">
-          <label for="app_metadata" class="col-md-3 form-group-label-override">元数据</label>
+          <label for="app_metadata" class="col-md-3 form-group-label-override">{{'TITLE.METADATA' | translate}}</label>
           <textarea id="app_metadata" [(ngModel)]="app.metaData"
                     name="app_metadata"
                     rows="3">
@@ -29,7 +29,7 @@ <h3 class="modal-title">{{appTitle}}</h3>
 
         </div>
         <div class="form-group" style="padding-left: 135px;">
-          <label for="app_description" class="col-md-3 form-group-label-override">描述</label>
+          <label for="app_description" class="col-md-3 form-group-label-override">{{'TITLE.DESCRIPTION' | translate}}</label>
           <textarea id="app_description" [(ngModel)]="app.description"
                     name="app_description"
                     rows="3">
@@ -38,8 +38,8 @@ <h3 class="modal-title">{{appTitle}}</h3>
         </div>
         <div class="modal-footer">
 
-          <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-          <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+          <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+          <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.CONFIRM' | translate}}</button>
         </div>
       </section>
     </form>
diff --git a/src/frontend/src/app/portal/app/create-edit-app/create-edit-app.component.ts b/src/frontend/src/app/portal/app/create-edit-app/create-edit-app.component.ts
index 51d1e9923..c2a816243 100644
--- a/src/frontend/src/app/portal/app/create-edit-app/create-edit-app.component.ts
+++ b/src/frontend/src/app/portal/app/create-edit-app/create-edit-app.component.ts
@@ -8,6 +8,7 @@ import {ActionType} from '../../../shared/shared.const';
 import {App} from '../../../shared/model/v1/app';
 import {AppService} from '../../../shared/client/v1/app.service';
 import {CacheService} from '../../../shared/auth/cache.service';
+import {TranslateService} from '@ngx-translate/core';
 
 @Component({
   selector: 'create-edit-app',
@@ -32,6 +33,7 @@ export class CreateEditAppComponent {
 
   constructor(private appService: AppService,
               public cacheService: CacheService,
+              public translate: TranslateService,
               private messageHandlerService: MessageHandlerService) {
   }
 
diff --git a/src/frontend/src/app/portal/app/detail-app/detail-app.component.html b/src/frontend/src/app/portal/app/detail-app/detail-app.component.html
index cbf6d98b6..c6df65ea9 100644
--- a/src/frontend/src/app/portal/app/detail-app/detail-app.component.html
+++ b/src/frontend/src/app/portal/app/detail-app/detail-app.component.html
@@ -2,13 +2,13 @@
 <div class="row" style="padding-left: 5%">
   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
     <div class="row flex flex-items-xs-between flex-items-xs-top" style="flex-wrap: nowrap;justify-content: flex-start;padding-left: 15px; padding-right: 15px;">
-      <h2 class="header-title" style="margin-top: 12px;white-space: nowrap;">项目概览</h2>
+      <h2 class="header-title" style="margin-top: 12px;white-space: nowrap;">{{'MENU.APP' | translate}}{{'MENU.OVERVIEW' | translate}}</h2>
     </div>
     <form>
       <section class="form-block form-box">
         <div class="row group">
           <div class="col-sm-2">
-            项目名
+            {{'TITLE.NAME' | translate}}
           </div>
           <div class="col-sm-10">
             {{app.name}}
@@ -16,7 +16,7 @@ <h2 class="header-title" style="margin-top: 12px;white-space: nowrap;">项目概
         </div>
         <div class="row group">
           <div class="col-sm-2">
-            创建人
+            {{'TITLE.CREATE_USER' | translate}}
           </div>
           <div class="col-sm-10">
             {{app.user}}
@@ -24,7 +24,7 @@ <h2 class="header-title" style="margin-top: 12px;white-space: nowrap;">项目概
         </div>
         <div class="row group">
           <div class="col-sm-2">
-            创建时间
+            {{'TITLE.CREATE_TIME' | translate}}
           </div>
           <div class="col-sm-10">
             {{app.createTime | date:'yyyy-MM-dd HH:mm:ss'}}
@@ -32,7 +32,7 @@ <h2 class="header-title" style="margin-top: 12px;white-space: nowrap;">项目概
         </div>
         <div class="row group">
           <div class="col-sm-2">
-            说明
+            {{'TITLE.EXPLAIN' | translate}}
           </div>
           <div class="col-sm-10">
             {{app.description}}
@@ -41,8 +41,8 @@ <h2 class="header-title" style="margin-top: 12px;white-space: nowrap;">项目概
         <div class="row group">
           <div class="col-sm-2">
             <div class="flex" style="height:70px;flex-direction: column; justify-content:space-around;">
-              <span>CPU使用</span>
-              <span>内存使用</span>
+              <span>{{'TITLE.CPU_USAGE' | translate}}</span>
+              <span>{{'TITLE.MEMORY_USAGE' | translate}}</span>
             </div>
           </div>
           <div class="col-sm-10">
@@ -51,7 +51,7 @@ <h2 class="header-title" style="margin-top: 12px;white-space: nowrap;">项目概
                 <div>
                   <div class="statistic-wrapper">
                     <span class="statistic-data" style="font-size: 14px">{{cluster}} <label class="resource-label">{{resources[cluster].usage.cpu}}</label>
-                      核</span>
+                      {{'UNIT.CORE' | translate}}</span>
                   </div>
                 </div>
                 <div>
@@ -67,25 +67,25 @@ <h2 class="header-title" style="margin-top: 12px;white-space: nowrap;">项目概
         </div>
         <div class="row group">
           <wayne-card class="wayne-card">
-            <div class="card-title">部署</div>
+            <div class="card-title">{{'MENU.DEPLOYMENT' | translate}}</div>
             <p class="card-text">
               <a href="javascript:void(0)" (click)="goToLink('deployment')" class="nav-link">{{resourceCount(deployment)}}</a>
             </p>
           </wayne-card>
           <wayne-card class="wayne-card">
-            <div class="card-title">状态副本集</div>
+            <div class="card-title">{{'MENU.STATEFULSET' | translate}}</div>
             <p class="card-text">
               <a href="javascript:void(0)" (click)="goToLink('statefulset')" class="nav-link">{{resourceCount(statefulSet)}}</a>
             </p>
           </wayne-card>
           <wayne-card class="wayne-card">
-            <div class="card-title">守护进程集</div>
+            <div class="card-title">{{'MENU.DAEMONSET' | translate}}</div>
             <p class="card-text">
               <a href="javascript:void(0)" (click)="goToLink('daemonset')" class="nav-link">{{resourceCount(daemonSet)}}</a>
             </p>
           </wayne-card>
           <wayne-card class="wayne-card">
-            <div class="card-title">计划任务</div>
+            <div class="card-title">{{'MENU.CRONJOB' | translate}}</div>
             <p class="card-text">
               <a href="javascript:void(0)" (click)="goToLink('cronjob')" class="nav-link">{{resourceCount(cronJob)}}</a>
             </p>
@@ -93,19 +93,19 @@ <h2 class="header-title" style="margin-top: 12px;white-space: nowrap;">项目概
         </div>
         <div class="row group">
           <wayne-card class="wayne-card">
-            <div class="card-title">负载均衡</div>
+            <div class="card-title">{{'MENU.SERVICE' | translate}}</div>
             <p class="card-text">
               <a href="javascript:void(0)" (click)="goToLink('service')" class="nav-link">{{resourceCount(service)}}</a>
             </p>
           </wayne-card>
           <wayne-card class="wayne-card">
-            <div class="card-title">配置集</div>
+            <div class="card-title">{{'MENU.CONFIGMAP' | translate}}</div>
             <p class="card-text">
               <a href="javascript:void(0)" (click)="goToLink('configmap')" class="nav-link">{{resourceCount(configMap)}}</a>
             </p>
           </wayne-card>
           <wayne-card class="wayne-card">
-            <div class="card-title">加密字典</div>
+            <div class="card-title">{{'MENU.SECRET' | translate}}</div>
             <p class="card-text">
               <a href="javascript:void(0)" (click)="goToLink('secret')" class="nav-link">{{resourceCount(secret)}}</a>
             </p>
diff --git a/src/frontend/src/app/portal/app/detail-app/detail-app.component.ts b/src/frontend/src/app/portal/app/detail-app/detail-app.component.ts
index b7e80caaf..8084ab352 100644
--- a/src/frontend/src/app/portal/app/detail-app/detail-app.component.ts
+++ b/src/frontend/src/app/portal/app/detail-app/detail-app.component.ts
@@ -23,6 +23,7 @@ import {
   KubeApiTypeStatefulSet
 } from '../../../shared/shared.const';
 import {EventManager} from '@angular/platform-browser';
+import {TranslateService} from '@ngx-translate/core';
 
 @Component({
   selector: 'detail-app',
@@ -58,7 +59,8 @@ export class DetailAppComponent implements OnInit, OnDestroy {
               private messageHandlerService: MessageHandlerService,
               private element: ElementRef,
               private storage: StorageService,
-              private eventManager: EventManager
+              private eventManager: EventManager,
+              public translate: TranslateService
   ) {
   }
 
diff --git a/src/frontend/src/app/portal/app/list-app/list-app.component.html b/src/frontend/src/app/portal/app/list-app/list-app.component.html
index 16206a5c3..351a9c97c 100644
--- a/src/frontend/src/app/portal/app/list-app/list-app.component.html
+++ b/src/frontend/src/app/portal/app/list-app/list-app.component.html
@@ -1,18 +1,18 @@
 <clr-datagrid (clrDgRefresh)="refresh($event)" class="wayne-clr-datagrid">
   <clr-dg-column>
-    <ng-container *clrDgHideableColumn="showState['名称']">名称</ng-container>
+    <ng-container *clrDgHideableColumn="showState['name']">{{'TITLE.NAME' | translate}}</ng-container>
   </clr-dg-column>
   <clr-dg-column>
-    <ng-container *clrDgHideableColumn="showState['描述']">描述</ng-container>
+    <ng-container *clrDgHideableColumn="showState['description']">{{'TITLE.DESCRIPTION' | translate}}</ng-container>
   </clr-dg-column>
   <clr-dg-column class="col-time">
-    <ng-container *clrDgHideableColumn="showState['创建时间']">创建时间</ng-container>
+    <ng-container *clrDgHideableColumn="showState['create_time']">{{'TITLE.CREATE_TIME' | translate}}</ng-container>
   </clr-dg-column>
   <clr-dg-column>
-    <ng-container *clrDgHideableColumn="showState['创建者']">创建者</ng-container>
+    <ng-container *clrDgHideableColumn="showState['create_user']">{{'TITLE.CREATE_USER' | translate}}</ng-container>
   </clr-dg-column>
   <clr-dg-column class="col-operate">
-    <ng-container *clrDgHideableColumn="showState['操作']">操作</ng-container>
+    <ng-container *clrDgHideableColumn="showState['action']">{{'TITLE.ACTION' | translate}}</ng-container>
   </clr-dg-column>
 
   <clr-dg-row *ngFor="let app of apps" [clrDgItem]="app">
@@ -21,12 +21,12 @@
     <clr-dg-cell class="col-time" style="font-family: monospace;">{{app.createTime | date:'yyyy-MM-dd HH:mm:ss'}}</clr-dg-cell>
     <clr-dg-cell>{{app.user}}</clr-dg-cell>
     <clr-dg-cell class="col-operate">
-      <button *ngIf="!app.starred" class="wayne-button text" (click)="starredApp(app)">收藏</button>
-      <button *ngIf="app.starred" class="wayne-button text" (click)="unstarredApp(app)">取消收藏</button>
-      <button class="wayne-button text" (click)="enterApp(app)">详情</button>
-      <button *ngIf="getMonitorUri()"  class="wayne-button text"  (click)="goToMonitor(app)">监控</button>
-      <button *ngIf="authService.currentNamespacePermission.app.update || authService.currentUser.admin" class="wayne-button text" (click)="editApp(app)">编辑</button>
-      <button *ngIf="authService.currentUser.admin" class="wayne-button text" (click)="deleteApp(app)">删除</button>
+      <button *ngIf="!app.starred" class="wayne-button text" (click)="starredApp(app)">{{'ACTION.COLLECT' | translate}}</button>
+      <button *ngIf="app.starred" class="wayne-button text" (click)="unstarredApp(app)">{{'ACTION.CANCEL_COLLECTED' | translate}}</button>
+      <button class="wayne-button text" (click)="enterApp(app)">{{'ACTION.DETAIL' | translate}}</button>
+      <button *ngIf="getMonitorUri()"  class="wayne-button text"  (click)="goToMonitor(app)">{{'ACTION.MONITOR' | translate}}</button>
+      <button *ngIf="authService.currentNamespacePermission.app.update || authService.currentUser.admin" class="wayne-button text" (click)="editApp(app)">{{'ACTION.EDIT' | translate}}</button>
+      <button *ngIf="authService.currentUser.admin" class="wayne-button text" (click)="deleteApp(app)">{{'ACTION.DELETE' | translate}}</button>
     </clr-dg-cell>
   </clr-dg-row>
 
diff --git a/src/frontend/src/app/portal/app/list-app/list-app.component.ts b/src/frontend/src/app/portal/app/list-app/list-app.component.ts
index f212fad79..b15c173ca 100644
--- a/src/frontend/src/app/portal/app/list-app/list-app.component.ts
+++ b/src/frontend/src/app/portal/app/list-app/list-app.component.ts
@@ -8,6 +8,7 @@ import {AppStarredService} from '../../../shared/client/v1/appstarred.service';
 import {AppStarred} from '../../../shared/model/v1/app-starred';
 import {MessageHandlerService} from '../../../shared/message-handler/message-handler.service';
 import {CacheService} from '../../../shared/auth/cache.service';
+import {TranslateService} from '@ngx-translate/core';
 
 @Component({
   selector: 'list-app',
@@ -30,7 +31,8 @@ export class ListAppComponent implements OnInit {
               public cacheService: CacheService,
               private appStarredService: AppStarredService,
               private messageHandlerService: MessageHandlerService,
-              public authService: AuthService) {
+              public authService: AuthService,
+              public translate: TranslateService) {
   }
 
   ngOnInit(): void {
diff --git a/src/frontend/src/app/portal/app/list-cluster/list-cluster.component.html b/src/frontend/src/app/portal/app/list-cluster/list-cluster.component.html
index 7a380ecba..fe01a603b 100644
--- a/src/frontend/src/app/portal/app/list-cluster/list-cluster.component.html
+++ b/src/frontend/src/app/portal/app/list-cluster/list-cluster.component.html
@@ -2,7 +2,7 @@
   <h3 class="modal-title">机房资源列表</h3>
   <div class="modal-body">
     <clr-datagrid>
-      <clr-dg-column>机房</clr-dg-column>
+      <clr-dg-column>{{'TITLE.CLUSTER' | translate}}</clr-dg-column>
       <clr-dg-column>Cpu使用 / Cpu总量（核）</clr-dg-column>
       <clr-dg-column>内存使用 / 内存总量（G）</clr-dg-column>
   
diff --git a/src/frontend/src/app/portal/common/publish-history/publish-history.component.html b/src/frontend/src/app/portal/common/publish-history/publish-history.component.html
index 380d8c33d..8223b3a78 100644
--- a/src/frontend/src/app/portal/common/publish-history/publish-history.component.html
+++ b/src/frontend/src/app/portal/common/publish-history/publish-history.component.html
@@ -1,9 +1,9 @@
 <clr-modal [(clrModalOpen)]="modalOpened" [clrModalSize]="'xl'">
-  <h3 class="modal-title">发布历史 - {{ resourceName }}</h3>
+  <h3 class="modal-title">{{'BUTTON.HISTORY' | translate}} - {{ resourceName }}</h3>
   <div class="modal-body">
     <hr>
     <clr-datagrid (clrDgRefresh)="refresh($event)">
-      <clr-dg-placeholder>暂无数据！</clr-dg-placeholder>
+      <clr-dg-placeholder>{{'MESSAGE.NO_MESSAGE' | translate}}</clr-dg-placeholder>
       <clr-dg-column>
         <ng-container *clrDgHideableColumn="{hidden: false}">
           发布时间
diff --git a/src/frontend/src/app/portal/common/tpl-detail/tpl-detail.component.ts b/src/frontend/src/app/portal/common/tpl-detail/tpl-detail.component.ts
index 9dbf55069..8e62f777f 100644
--- a/src/frontend/src/app/portal/common/tpl-detail/tpl-detail.component.ts
+++ b/src/frontend/src/app/portal/common/tpl-detail/tpl-detail.component.ts
@@ -11,7 +11,7 @@ import {Subscription} from 'rxjs/Subscription';
 export class TplDetailComponent implements OnInit, OnDestroy {
   modalOpened: boolean;
   text: string;
-  title: string = '发布说明';
+  title: string = 'release_explain';
   textSub: Subscription;
 
   constructor(private tplDetailService: TplDetailService) {
diff --git a/src/frontend/src/app/portal/configmap/configmap.component.html b/src/frontend/src/app/portal/configmap/configmap.component.html
index f6e069b97..5c5fbf8ee 100644
--- a/src/frontend/src/app/portal/configmap/configmap.component.html
+++ b/src/frontend/src/app/portal/configmap/configmap.component.html
@@ -1,5 +1,5 @@
 <button (click)="openModal()" class="wayne-button primary" *ngIf="authService.currentAppPermission.configmap.create || authService.currentUser.admin">
-  创建配置集
+  {{'CONFIGMAP.CREATE' | translate}}
 </button>
 <create-edit-configmap (create)="createConfigMap($event)"></create-edit-configmap>
 <div *ngIf="configMapId && configMaps?.length>0">
@@ -16,32 +16,32 @@
   <div class="table-search">
     <div class="table-search-left">
       <button (click)="createConfigMapTpl()" class="wayne-button normal" *ngIf="authService.currentAppPermission.configmap.create || authService.currentUser.admin">
-        创建配置集模版
+        {{'CONFIGMAP.CREATE_TMP' | translate}}
       </button>
       <button (click)="editConfigMap()" class="wayne-button normal" *ngIf="authService.currentAppPermission.configmap.update || authService.currentUser.admin">
-        编辑配置集
+        {{'CONFIGMAP.EDIT' | translate}}
       </button>
       <button (click)="publishHistory()" class="wayne-button normal" *ngIf="authService.currentAppPermission.configmap.read || authService.currentUser.admin">
-        发布历史
+        {{'BUTTON.HISTORY' | translate}}
       </button>
       <button (click)="deleteConfigMap()" class="wayne-button normal" *ngIf="authService.currentAppPermission.configmap.offline || authService.currentUser.admin">
-        删除配置集
+        {{'CONFIGMAP.DELETE' | translate}}
       </button>
       <wayne-filter-box (confirm)="confirmEvent()" (cancel)="cancelEvent()">
         <wayne-checkbox-group [(ngModel)]="showList">
-          <wayne-checkbox>创建时间</wayne-checkbox>
-          <wayne-checkbox>配置机房</wayne-checkbox>
-          <wayne-checkbox>已上线机房</wayne-checkbox>
-          <wayne-checkbox>发布说明</wayne-checkbox>
-          <wayne-checkbox>创建者</wayne-checkbox>
-          <wayne-checkbox>操作</wayne-checkbox>
+          <wayne-checkbox value="create_time">{{'TITLE.CREATE_TIME' | translate}}</wayne-checkbox>
+          <wayne-checkbox value="config_cluster">{{'TITLE.CONFIG_CLUSTER' | translate}}</wayne-checkbox>
+          <wayne-checkbox value="online_cluster">{{'TITLE.ONLINE_CLUSTER' | translate}}</wayne-checkbox>
+          <wayne-checkbox value="release_explain">{{'TITLE.RELEASE_EXPLAIN' | translate}}</wayne-checkbox>
+          <wayne-checkbox value="create_user">{{'TITLE.CREATE_USER' | translate}}</wayne-checkbox>
+          <wayne-checkbox value="action">{{'TITLE.ACTION' | translate}}</wayne-checkbox>
         </wayne-checkbox-group>
       </wayne-filter-box>
     </div>
     <div class="table-search-right">
       <div class="toggle-switch">
         <input type="checkbox" id="toggle_1" [(ngModel)]="isOnline" (change)="onlineChange()">
-        <label for="toggle_1">只显示上线模板</label>
+        <label for="toggle_1">{{'MESSAGE.ONLY_ONLINE_TEMPLATE' | translate}}</label>
       </div>
     </div>
   </div>
diff --git a/src/frontend/src/app/portal/configmap/configmap.component.ts b/src/frontend/src/app/portal/configmap/configmap.component.ts
index 6b0f122ad..631778a34 100644
--- a/src/frontend/src/app/portal/configmap/configmap.component.ts
+++ b/src/frontend/src/app/portal/configmap/configmap.component.ts
@@ -32,14 +32,15 @@ import {Subscription} from 'rxjs/Subscription';
 import {PageState} from '../../shared/page/page-state';
 import {TabDragService} from '../../shared/client/v1/tab-drag.service';
 import {OrderItem} from '../../shared/model/v1/order';
+import {TranslateService} from '@ngx-translate/core';
 
 const showState = {
-  '创建时间': {hidden: false},
-  '配置机房': {hidden: false},
-  '已上线机房': {hidden: false},
-  '发布说明': {hidden: false},
-  '创建者': {hidden: false},
-  '操作': {hidden: false}
+  'create_time': {hidden: false},
+  'config_cluster': {hidden: false},
+  'online_cluster': {hidden: false},
+  'release_explain': {hidden: false},
+  'create_user': {hidden: false},
+  'action': {hidden: false}
 };
 
 @Component({
@@ -80,6 +81,7 @@ export class ConfigMapComponent implements AfterContentInit, OnDestroy, OnInit {
               private deletionDialogService: ConfirmationDialogService,
               public authService: AuthService,
               private configMapTplService: ConfigMapTplService,
+              public translate: TranslateService,
               private messageHandlerService: MessageHandlerService) {
                 this.tabScription = this.tabDragService.tabDragOverObservable.subscribe(over => {
                   if (over) this.tabChange();
diff --git a/src/frontend/src/app/portal/configmap/create-edit-configmap/create-edit-configmap.component.html b/src/frontend/src/app/portal/configmap/create-edit-configmap/create-edit-configmap.component.html
index f2c3ecb87..9a63fc20c 100644
--- a/src/frontend/src/app/portal/configmap/create-edit-configmap/create-edit-configmap.component.html
+++ b/src/frontend/src/app/portal/configmap/create-edit-configmap/create-edit-configmap.component.html
@@ -4,25 +4,25 @@ <h3 class="modal-title">{{title}}</h3>
     <form #ngForm="ngForm">
       <section class="form-block">
         <div class="form-group" style="padding-left: 135px;">
-          <label for="name" class="col-md-3 form-group-label-override required">名称</label>
+          <label for="name" class="col-md-3 form-group-label-override required">{{'TITLE.NAME' | translate}}</label>
           <label for="name" aria-haspopup="true" role="tooltip" [class.invalid]="!isNameValid" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left form-control">
             <label *ngIf="app && actionType==0 && nameGenerateRuleConfig=='join'">{{app.name}}-</label>
             <input type="text" id="name"  [(ngModel)]="configMap.name"
                    name="name"
                    required
-                   placeholder="英文小写"
+                   [placeholder]="'PLACEHOLDER.ENGLISH_NAME' | translate"
                    [readonly]="actionType==1"
                    maxlength="64"
                    pattern="[a-z]([-a-z0-9]*[a-z0-9])?"
                    (keyup)='handleValidation()'>
             <span class="tooltip-content">
-              配置集名称不符合规范，验证规则[a-z]([-a-z0-9]*[a-z0-9])?
+              {{'RULE.REGEXT' | translate}}[a-z]([-a-z0-9]*[a-z0-9])?
             </span>
           </label>
           <span class="spinner spinner-inline" [hidden]="!checkOnGoing"></span>
         </div>
         <div class="form-group" style="padding-left: 135px;">
-          <label for="description" class="col-md-3 form-group-label-override">描述</label>
+          <label for="description" class="col-md-3 form-group-label-override">{{'TITLE.DESCRIPTION' | translate}}</label>
           <textarea id="description" [(ngModel)]="configMap.description"
                     name="description"
                     rows="3">
@@ -32,7 +32,7 @@ <h3 class="modal-title">{{title}}</h3>
     </form>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+    <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
   </div>
 </clr-modal>
diff --git a/src/frontend/src/app/portal/configmap/create-edit-configmaptpl/create-edit-configmaptpl.component.html b/src/frontend/src/app/portal/configmap/create-edit-configmaptpl/create-edit-configmaptpl.component.html
index 522208439..3d9f9845b 100644
--- a/src/frontend/src/app/portal/configmap/create-edit-configmaptpl/create-edit-configmaptpl.component.html
+++ b/src/frontend/src/app/portal/configmap/create-edit-configmaptpl/create-edit-configmaptpl.component.html
@@ -1,11 +1,11 @@
 <div class="row" style="padding-left: 5%;">
   <div class="row flex-items-xs-between flex-items-xs-top" style="padding-left: 15px; padding-right: 15px;">
-    <h3 class="header-title">创建配置集模版</h3>
+    <h3 class="header-title">{{'CONFIGMAP.CREATE_TMP' | translate}}</h3>
   </div>
   <form [formGroup]="currentForm" style="padding-right: 30px;width: 100%">
     <section class="form-block wrap">
       <div *ngIf="clusters" formArrayName="clusters" class="form-group form-group-padding">
-        <label class="col-md-3 form-group-label-override required">机房</label>
+        <label class="col-md-3 form-group-label-override required">{{'TITLE.CLUSTER' | translate}}</label>
         <div *ngFor="let cluster of clusters;let i=index"
              style="padding-right: 15px" class="checkbox-inline"
              [formGroupName]="i">
@@ -16,7 +16,7 @@ <h3 class="header-title">创建配置集模版</h3>
         </div>
       </div>
       <div class="form-group form-group-padding">
-        <label class="col-md-3 form-group-label-override required">发布说明</label>
+        <label class="col-md-3 form-group-label-override required">{{'TMP.RELEASE_EXPLAIN' | translate}}</label>
         <textarea formControlName="description"
                   rows="3"
                   style="width: 65%"
@@ -27,24 +27,24 @@ <h3 class="header-title">创建配置集模版</h3>
         <div *ngFor="let data of datas.controls; let i = index"
              [formGroupName]="i">
           <div class="form-group form-group-padding">
-            <label class="col-md-3 form-group-label-override required">数据内容</label>
+            <label class="col-md-3 form-group-label-override required">{{'MESSAGE.DATA_CONTENT' | translate}}</label>
             <input type="text"
                    size="45"
                    formControlName="dataName"
                    required
-                   placeholder="配置key">
+                   [placeholder]="'PLACEHOLDER.CONFIG_KEY' | translate">
             <a href="javascript:void(0)">
-              <clr-icon (click)="onDeleteData(i)" shape="trash" title="删除数据" class="is-solid clr-icon"></clr-icon>
+              <clr-icon (click)="onDeleteData(i)" shape="trash" [title]="'ACTION.DELETE_DATA' | translate" class="is-solid clr-icon"></clr-icon>
             </a>
             <a href="javascript:void(0)">
-              <clr-icon (click)="onAddData(i)" shape="plus-circle" title="添加数据" class="is-solid clr-icon"></clr-icon>
+              <clr-icon (click)="onAddData(i)" shape="plus-circle" [title]="'ACTION.ADD_DATA' | translate" class="is-solid clr-icon"></clr-icon>
             </a>
           </div>
           <div class="form-group" style="padding-left: 170px;">
            <textarea class="textarea-font" style="width: 65%"
                      formControlName="dataValue"
                      required
-                     placeholder="配置value">
+                     [placeholder]="'PLACEHOLDER.CONFIG_VALUE' | translate">
           </textarea>
           </div>
         </div>
@@ -53,8 +53,8 @@ <h3 class="header-title">创建配置集模版</h3>
   </form>
 </div>
 <div class="clr-wizard-footer-buttons tpl-bottom" [style.top.px]="top">
-  <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-  <button type="button" class="btn btn-primary" (click)="openModal()">高级配置</button>
-  <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+  <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+  <button type="button" class="btn btn-primary" (click)="openModal()">{{'BUTTON.ADVANCED_CONFIG' | translate}}</button>
+  <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
 </div>
 <wayne-ace-editor (outputObj)="saveConfigMapTpl($event)"></wayne-ace-editor>
diff --git a/src/frontend/src/app/portal/configmap/list-configmap/list-configmap.component.html b/src/frontend/src/app/portal/configmap/list-configmap/list-configmap.component.html
index e0183e82e..0259b9095 100644
--- a/src/frontend/src/app/portal/configmap/list-configmap/list-configmap.component.html
+++ b/src/frontend/src/app/portal/configmap/list-configmap/list-configmap.component.html
@@ -1,38 +1,38 @@
 <clr-datagrid (clrDgRefresh)="refresh($event)" class="wayne-clr-datagrid">
-  <clr-dg-placeholder>暂无数据！</clr-dg-placeholder>
+  <clr-dg-placeholder>{{'MESSAGE.NO_MESSAGE' | translate}}</clr-dg-placeholder>
   <clr-dg-column class="col-id">
     <ng-container>
       #
     </ng-container>
   </clr-dg-column>
   <clr-dg-column class="col-time">
-    <ng-container *clrDgHideableColumn="showState['创建时间']">
-      创建时间
+    <ng-container *clrDgHideableColumn="showState['create_time']">
+      {{'TITLE.CREATE_TIME' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column class="col-cluster">
-    <ng-container *clrDgHideableColumn="showState['配置机房']">
-      配置机房
+    <ng-container *clrDgHideableColumn="showState['config_cluster']">
+      {{'TITLE.CONFIG_CLUSTER' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column class="col-cluster">
-    <ng-container *clrDgHideableColumn="showState['已上线机房']">
-      已上线机房
+    <ng-container *clrDgHideableColumn="showState['online_cluster']">
+      {{'TITLE.ONLINE_CLUSTER' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column class="col-description">
-    <ng-container *clrDgHideableColumn="showState['发布说明']">
-      发布说明
+    <ng-container *clrDgHideableColumn="showState['release_explain']">
+      {{'TITLE.RELEASE_EXPLAIN' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column>
-    <ng-container *clrDgHideableColumn="showState['创建者']">
-      创建者
+    <ng-container *clrDgHideableColumn="showState['create_user']">
+      {{'TITLE.CREATE_USER' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column class="col-operate">
-    <ng-container *clrDgHideableColumn="showState['操作']">
-      操作
+    <ng-container *clrDgHideableColumn="showState['action']">
+      {{'TITLE.ACTION' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-row *ngFor="let configMapTpl of configMapTpls" [clrDgItem]="configMapTpl">
@@ -60,23 +60,23 @@
       <button class="wayne-button text"
         (click)="publishConfigMapTpl(configMapTpl)"
         *ngIf="authService.currentAppPermission.configmap.deploy || authService.currentUser.admin">
-        发布</button>
+        {{'BUTTON.RELEASE' | translate}}</button>
       <button class="wayne-button text"
         (click)="detailConfigMapTpl(configMapTpl)"
         *ngIf="authService.currentAppPermission.configmap.read || authService.currentUser.admin">
-        详情</button>
+        {{'BUTTON.DETAIL' | translate}}</button>
       <button class="wayne-button text"
         (click)="cloneConfigMapTpl(configMapTpl)"
         *ngIf="authService.currentAppPermission.configmap.create || authService.currentUser.admin">
-        克隆</button>
+        {{'BUTTON.CLONE' | translate}}</button>
       <button class="wayne-button text"
         *ngIf="!configMapTpl.status && (authService.currentAppPermission.configmap.delete || authService.currentUser.admin)"
         (click)="deleteConfigMapTpl(configMapTpl)">
-        删除</button>
+        {{'BUTTON.DELETE' | translate}}</button>
       <button class="wayne-button text"
          (click)="offlineConfigMapTpl(configMapTpl)"
          *ngIf="configMapTpl.status && (authService.currentAppPermission.configmap.offline || authService.currentUser.admin)">
-         下线</button>
+         {{'BUTTON.DROP' | translate}}</button>
     </clr-dg-cell>
   </clr-dg-row>
 
diff --git a/src/frontend/src/app/portal/configmap/publish-tpl/publish-tpl.component.html b/src/frontend/src/app/portal/configmap/publish-tpl/publish-tpl.component.html
index a5216bd49..d64695b99 100644
--- a/src/frontend/src/app/portal/configmap/publish-tpl/publish-tpl.component.html
+++ b/src/frontend/src/app/portal/configmap/publish-tpl/publish-tpl.component.html
@@ -4,7 +4,7 @@ <h3 class="modal-title">{{title}}</h3>
     <form #publishForm="ngForm">
       <section class="form-block">
         <div class="form-group" style="padding-left: 135px;">
-          <label class="col-md-3 form-group-label-override required">机房</label>
+          <label class="col-md-3 form-group-label-override required">{{'TITLE.CLUSTER' | translate}}</label>
           <div *ngFor="let cluster of clusters;let i=index" style="padding-right: 20px" class="checkbox-inline">
             <input [(ngModel)]="cluster['checked']"
                    type="checkbox"
@@ -14,10 +14,10 @@ <h3 class="modal-title">{{title}}</h3>
           </div>
         </div>
         <div *ngIf="actionType==3" class="form-group" style="padding-left: 135px;">
-          <label class="col-md-3 form-group-label-override">强制下线
+          <label class="col-md-3 form-group-label-override">{{'ACTION.FORCE_DROP' | translate}} 
             <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg">
               <clr-icon shape="info-circle" size="24"></clr-icon>
-              <span class="tooltip-content">确认资源已经不存在于Kubernetes，可以打开此开关强制下线</span>
+              <span class="tooltip-content">{{'MESSAGE.FORCE_DROP' | translate}} </span>
             </a>
           </label>
           <div class="toggle-switch" style="top: .25rem">
@@ -29,7 +29,7 @@ <h3 class="modal-title">{{title}}</h3>
     </form>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">确定</button>
+    <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.CONFIRM' | translate}}</button>
   </div>
 </clr-modal>
diff --git a/src/frontend/src/app/portal/cronjob/create-edit-cronjob/create-edit-cronjob.component.html b/src/frontend/src/app/portal/cronjob/create-edit-cronjob/create-edit-cronjob.component.html
index 37fed785d..fce76c0fe 100644
--- a/src/frontend/src/app/portal/cronjob/create-edit-cronjob/create-edit-cronjob.component.html
+++ b/src/frontend/src/app/portal/cronjob/create-edit-cronjob/create-edit-cronjob.component.html
@@ -4,7 +4,7 @@ <h3 class="modal-title">{{title}}</h3>
     <form #cronjobForm="ngForm" style="padding-right: 30px;width: 100%">
       <section class="form-block">
         <div class="form-group" style="padding-left: 135px;">
-          <label for="cronjob_name" class="col-md-3 form-group-label-override required">名称</label>
+          <label for="cronjob_name" class="col-md-3 form-group-label-override required">{{'TITLE.NAME' | translate}}</label>
           <label for="cronjob_name" aria-haspopup="true" role="tooltip" [class.invalid]="!isNameValid"
                  class="tooltip tooltip-validation tooltip-md tooltip-bottom-left">
             <label *ngIf="app && actionType==0 && nameGenerateRuleConfig=='join'">{{app.name}}-</label>
@@ -12,18 +12,18 @@ <h3 class="modal-title">{{title}}</h3>
                    name="cronjob_name" size="40"
                    required
                    [readonly]="actionType==1"
-                   placeholder="英文小写，中划线分隔"
+                   [placeholder]="'PLACEHOLDER.APP_NAME' | translate"
                    pattern="[a-z]([-a-z0-9]*[a-z0-9])?"
                    maxlength="64"
                    (keyup)='handleValidation()'>
             <span class="tooltip-content">
-              名称不符合规范，验证规则[a-z]([-a-z0-9]*[a-z0-9])?
+              {{'RULE.REGEXT' | translate}}[a-z]([-a-z0-9]*[a-z0-9])?
         </span>
           </label>
           <span class="spinner spinner-inline" [hidden]="!checkOnGoing"></span>
         </div>
         <div class="form-group" style="padding-left: 135px;">
-          <label class="col-md-3 form-group-label-override required">机房</label>
+          <label class="col-md-3 form-group-label-override required">{{'TITLE.CLUSTER' | translate}}</label>
           <div *ngFor="let cluster of clusters" class="checkbox-inline">
             <div class="checkbox">
               <input [(ngModel)]="clusterMetas[cluster.name].checked"
@@ -35,7 +35,7 @@ <h3 class="modal-title">{{title}}</h3>
           </div>
         </div>
         <div class="form-group" style="padding-left: 135px;">
-          <label for="cronjob_description" class="col-md-3 form-group-label-override">描述</label>
+          <label for="cronjob_description" class="col-md-3 form-group-label-override">{{'TITLE.DESCRIPTION' | translate}}</label>
           <textarea id="cronjob_description" [(ngModel)]="cronjob.description"
                     name="cronjob_description"
                     rows="3">
@@ -46,8 +46,8 @@ <h3 class="modal-title">{{title}}</h3>
     </form>
   </div>
   <div class="modal-footer" style="padding-right: 5%">
-    <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+    <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
   </div>
 </clr-modal>
 
diff --git a/src/frontend/src/app/portal/cronjob/create-edit-cronjobtpl/create-edit-cronjobtpl.component.html b/src/frontend/src/app/portal/cronjob/create-edit-cronjobtpl/create-edit-cronjobtpl.component.html
index f53429391..a5948d89a 100644
--- a/src/frontend/src/app/portal/cronjob/create-edit-cronjobtpl/create-edit-cronjobtpl.component.html
+++ b/src/frontend/src/app/portal/cronjob/create-edit-cronjobtpl/create-edit-cronjobtpl.component.html
@@ -8,9 +8,9 @@ <h3 class="header-title" id="创建计划任务模版">创建计划任务模版<
   <form #ngForm="ngForm" style="padding-right: 30px;width: 100%">
     <section class="form-block wrap">
       <div>
-        <label class="label-level1" id="发布信息">发布信息</label>
+        <label class="label-level1" id="发布信息">{{'TMP.RELEASE_MESSAGE' | translate}}</label>
         <div class="form-group form-group-padding">
-          <label class="col-md-3 form-group-label-override required">发布说明</label>
+          <label class="col-md-3 form-group-label-override required">{{'TMP.RELEASE_EXPLAIN' | translate}}</label>
           <textarea name="description" [(ngModel)]="cronjobTpl.description" rows="3" style="width: 65%" required>
           </textarea>
         </div>
@@ -105,132 +105,130 @@ <h3 class="header-title" id="创建计划任务模版">创建计划任务模版<
     </section>
     <section *ngFor="let container of kubeCronjob.spec.jobTemplate.spec.template.spec.containers; let i = index" class="form-block wrap">
       <div>
-        <label class="label-level1" [id]="i ? '容器配置' + i : '容器配置'">容器配置
+        <label class="label-level1" [id]="i ? '容器配置' + i : '容器配置'">{{'TMP.CONTAINER_CONFIG' | translate}}
           <clr-icon (click)="onDeleteContainer(i)" shape="trash" title="删除容器" class="is-solid"></clr-icon>
         </label>
         <div class="container-box">
-          <label class="label-level2" [id]="i ? '镜像配置' + i : '镜像配置'">镜像配置</label>
+          <label class="label-level2" [id]="i ? '镜像配置' + i : '镜像配置'">{{'TMP.IMAGE_CONFIG' | translate}}</label>
           <div class="form-group form-group-padding">
-            <label class="col-md-3 form-group-label-override required">容器名称</label>
+            <label class="col-md-3 form-group-label-override required">{{'TMP.CONTAINER_NAME' | translate}}</label>
             <label aria-haspopup="true" role="tooltip" [class.invalid]="containerIsInvalid(i,'container.name_')" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left">
               <input type="text" size="90" class="col-sm-12" required name="container.name_{{i}}" pattern="[a-z]([-a-z0-9]*[a-z0-9])?" [(ngModel)]="container.name"
-                placeholder="英文，dns域名规则">
+                [placeholder]="'RULE.CONTAINER' | translate">
               <span class="tooltip-content">
-                容器名称不符合规范，验证规则[a-z]([-a-z0-9]*[a-z0-9])?
+                {{'RULE.REGEXT' | translate}}[a-z]([-a-z0-9]*[a-z0-9])?
               </span>
             </label>
           </div>
           <div class="form-group form-group-padding">
-            <label class="col-md-3 form-group-label-override required">镜像地址</label>
+            <label class="col-md-3 form-group-label-override required">{{'TMP.IMAGE_ADDRESS' | translate}}</label>
             <label aria-haspopup="true" role="tooltip" [class.invalid]="containerIsInvalid(i,'container.image_')" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left">
               <input type="text" size="90" class="col-sm-12" name="container.image_{{i}}" required pattern="{{getImagePrefixReg()}}" [(ngModel)]="container.image"
-                placeholder="镜像地址">
+                [placeholder]="'TMP.IMAGE_ADDRESS' | translate">
               <span class="tooltip-content">
-                镜像不符合校验规则 {{getImagePrefixReg()}}
+                {{'RULE.REGEXT' | translate}} {{getImagePrefixReg()}}
               </span>
             </label>
           </div>
           <div class="form-group form-group-padding">
-            <label class="col-md-3 form-group-label-override required">内存容量</label>
+            <label class="col-md-3 form-group-label-override required">{{'TMP.MEMORY_NUM' | translate}}</label>
             <label aria-haspopup="true" [class.invalid]="!checkMemory(container.resources.limits.memory)" style="padding-right: 0;margin-right: 0;padding-left: 0"
               role="tooltip" class="col-md-6 tooltip tooltip-validation tooltip-md tooltip-bottom-left">
               <input type="number" style="width:inherit" name="container.resources.limits.memory_{{i}}" required [(ngModel)]="container.resources.limits.memory"
-                placeholder="单位G">
-              <span class="tooltip-content">
-                内存大小应该在0~{{memoryLimit}}G之间
+                [placeholder]="'UNIT.MEMORY' | translate">
+              <span translate="'RULE.MEMORY'" [translateParams]="{value: memoryLimit}" class="tooltip-content">
               </span>
             </label>
             <label class="col-md-3">G&nbsp;&nbsp;&nbsp;
             </label>
           </div>
           <div class="form-group form-group-padding">
-            <label class="col-md-3 form-group-label-override required">CPU核数</label>
+            <label class="col-md-3 form-group-label-override required">{{'TMP.CORE_NUM' | translate}}</label>
             <label aria-haspopup="true" [class.invalid]="!checkCpu(container.resources.limits.cpu)" style="padding-right: 0;margin-right: 0;padding-left: 0"
               role="tooltip" class="col-md-6 tooltip tooltip-validation tooltip-md tooltip-bottom-left">
               <input type="number" name="container.resources.limits.cpu_{{i}}" [(ngModel)]="container.resources.limits.cpu" style="width:inherit"
-                required placeholder="单位个">
-              <span class="tooltip-content">
-                CPU大小应该在0~{{cpuLimit}}核之间
+                required [placeholder]="'UNIT.CPU' | translate">
+              <span translate="'RULE.CPU' | translate" [translateParams]="{value: cpuLimit}" class="tooltip-content">
               </span>
             </label>
-            <label class="col-md-3">核&nbsp;&nbsp;&nbsp;
+            <label class="col-md-3">{{'UNIT.CORE' | translate}}&nbsp;&nbsp;&nbsp;
             </label>
           </div>
 
         </div>
 
         <div class="container-box">
-          <label class="label-level2" [id]="i ? '环境变量配置' + i : '环境变量配置'">环境变量配置
-            <button (click)="onAddEnvFrom(i)" style="margin-left: 10px;" class="wayne-button primary"><clr-icon shape="add-text"></clr-icon>批量加载</button>
-            <button (click)="onAddEnv(i)" style="margin-left: 10px;" class="wayne-button primary"><clr-icon shape="add"></clr-icon>逐个加载</button>
+          <label class="label-level2" [id]="i ? '环境变量配置' + i : '环境变量配置'">{{'TMP.ENVIRONMENT_VAR' | translate}}
+            <button (click)="onAddEnvFrom(i)" style="margin-left: 10px;" class="wayne-button primary"><clr-icon shape="add-text"></clr-icon>{{'TMP.ADD_GROUP' | translate}}</button>
+            <button (click)="onAddEnv(i)" style="margin-left: 10px;" class="wayne-button primary"><clr-icon shape="add"></clr-icon>{{'TMP.ADD_ONE' | translate}}</button>
           </label>
           <div *ngFor="let envFrom of container.envFrom; let j = index">
             <div class="form-group form-group-padding">
-              <label for="envFromType-{{i}}-{{j}}" class="col-md-3 form-group-label-override required">批量加载
+              <label for="envFromType-{{i}}-{{j}}" class="col-md-3 form-group-label-override required">{{'TMP.ADD_GROUP' | translate}}
                 <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-md">
                   <clr-icon shape="info-circle" size="24"></clr-icon>
-                  <span class="tooltip-content">批量从配置集或加密字典加载环境变量</span>
+                  <span class="tooltip-content">{{'TMP.LOAD_GROUP_MESSAGE' | translate}}</span>
                 </a>
               </label>
               <div class="select">
                 <select id="envFromType-{{i}}-{{j}}" name="envFrom.type_{{i}}_{{j}}" (change)="envFromChange($event.target.value,i,j)">
-                  <option value="1" [selected]="envFrom.configMapRef">从配置集加载</option>
-                  <option value="2" [selected]="envFrom.secretRef">从加密字典加载</option>
+                  <option value="1" [selected]="envFrom.configMapRef">{{'TMP.LOAD_CONFIGMAP' | translate}}</option>
+                  <option value="2" [selected]="envFrom.secretRef">{{'TMP.LOAD_SECRET' | translate}}</option>
                 </select>
               </div>
 
-              <clr-icon style="margin-top: 10px;margin-right: 8px" (click)="onAddEnvFrom(i)" shape="plus-circle" title="添加环境变量" class="is-solid"></clr-icon>
-              <clr-icon style="margin-top: 10px" (click)="onDeleteEnvFrom(i,j)" shape="trash" title="删除环境变量" class="is-solid"></clr-icon>
+              <clr-icon style="margin-top: 10px;margin-right: 8px" (click)="onAddEnvFrom(i)" shape="plus-circle" [title]="'TMP.ADD_ENVIRONMENT' | translate" class="is-solid"></clr-icon>
+              <clr-icon style="margin-top: 10px" (click)="onDeleteEnvFrom(i,j)" shape="trash" [title]="'TMP.DELETE_ENVIRONMENT' | translate" class="is-solid"></clr-icon>
             </div>
             <div *ngIf="envFrom" class="form-group form-group-padding">
-              <input type="text" size="40" name="envFrom.prefix_{{i}}_{{j}}" [(ngModel)]="envFrom.prefix" placeholder="为所有环境变量添加相同的前缀，可为空">
+              <input type="text" size="40" name="envFrom.prefix_{{i}}_{{j}}" [(ngModel)]="envFrom.prefix" [placeholder]="'PLACEHOLDER.ENVIRONMENT' | translate">
             </div>
             <div *ngIf="envFrom && envFrom.configMapRef" class="form-group form-group-padding">
               <input type="text" size="40" required name="envFrom.configMapRef.name_{{i}}_{{j}}" [(ngModel)]="envFrom.configMapRef.name"
-                placeholder="配置集名称">
+                [placeholder]="'TMP.CONFIGMAP_NAME' | translate">
             </div>
             <div *ngIf="envFrom && envFrom.secretRef" class="form-group form-group-padding">
-              <input type="text" size="40" required name="envFrom.secretRef.name_{{i}}_{{j}}" [(ngModel)]="envFrom.secretRef.name" placeholder="加密字典名称">
+              <input type="text" size="40" required name="envFrom.secretRef.name_{{i}}_{{j}}" [(ngModel)]="envFrom.secretRef.name" [placeholder]="'TMP.SECRET_NAME' | translate">
             </div>
 
           </div>
 
           <div *ngFor="let env of container.env; let j = index">
             <div class="form-group form-group-padding">
-              <label for="envType-{{i}}-{{j}}" class="col-md-3 form-group-label-override required">逐个加载
+              <label for="envType-{{i}}-{{j}}" class="col-md-3 form-group-label-override required">{{'TMP.ADD_ONE' | translate}}
                 <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-md">
                   <clr-icon shape="info-circle" size="24"></clr-icon>
-                  <span class="tooltip-content">其它类型的环境变量只支持高级模式编辑</span>
+                  <span class="tooltip-content">{{'TMP.SUPPORT_ENVIRONMENT_MESSAGE' | translate}}</span>
                 </a>
               </label>
               <div class="select">
                 <select id="envType-{{i}}-{{j}}" name="env.type_{{i}}_{{j}}" (change)="envChange($event.target.value,i,j)">
-                  <option value="0" [selected]="env.value!=null">自定义环境变量</option>
-                  <option value="1" [selected]="env.valueFrom?.configMapKeyRef">从配置集加载</option>
-                  <option value="2" [selected]="env.valueFrom?.secretKeyRef">从加密字典加载</option>
-                  <option value="3" selected>其它</option>
+                  <option value="0" [selected]="env.value!=null">{{'TMP.LOAD_ENVIRONMENT' | translate}}</option>
+                  <option value="1" [selected]="env.valueFrom?.configMapKeyRef">{{'TMP.LOAD_CONFIGMAP' | translate}}</option>
+                  <option value="2" [selected]="env.valueFrom?.secretKeyRef">{{'TMP.LOAD_SECRET' | translate}}</option>
+                  <option value="3" selected>{{'OTHER' | translate}}</option>
                 </select>
               </div>
-              <clr-icon style="margin-top: 10px;margin-right: 8px" (click)="onAddEnv(i)" shape="plus-circle" title="添加环境变量" class="is-solid"></clr-icon>
-              <clr-icon style="margin-top: 10px" (click)="onDeleteEnv(i,j)" shape="trash" title="删除环境变量" class="is-solid"></clr-icon>
+              <clr-icon style="margin-top: 10px;margin-right: 8px" (click)="onAddEnv(i)" shape="plus-circle" [title]="'TMP.ADD_ENVIRONMENT' | translate" class="is-solid"></clr-icon>
+              <clr-icon style="margin-top: 10px" (click)="onDeleteEnv(i,j)" shape="trash" [title]="'TMP.DELETE_ENVIRONMENT' | translate" class="is-solid"></clr-icon>
             </div>
             <div class="form-group form-group-padding">
-              <input [(ngModel)]="env.name" required name="env.name_{{i}}_{{j}}" type="text" size="45" placeholder="环境变量名称">
+              <input [(ngModel)]="env.name" required name="env.name_{{i}}_{{j}}" type="text" size="45" [placeholder]="'TMP.ENVIRONMENT_NAME' | translate">
             </div>
             <div *ngIf="env.value != null" class="form-group form-group-padding">
-              <input [(ngModel)]="env.value" required name="env.value_{{i}}_{{j}}" type="text" size="45" placeholder="环境变量值">
+              <input [(ngModel)]="env.value" required name="env.value_{{i}}_{{j}}" type="text" size="45" [placeholder]="'TMP.ENVIRONMENT_VAR' | translate">
             </div>
             <div *ngIf="env.valueFrom && env.valueFrom.configMapKeyRef" class="form-group form-group-padding">
               <input type="text" size="40" required name="env.valueFrom.configMapKeyRef.name_{{i}}_{{j}}" [(ngModel)]="env.valueFrom.configMapKeyRef.name"
-                placeholder="配置集名称">
+                [placeholder]="'TMP.CONFIGMAP_NAME' | translate">
               <input type="text" size="40" required name="env.valueFrom.configMapKeyRef.key_{{i}}_{{j}}" [(ngModel)]="env.valueFrom.configMapKeyRef.key"
-                placeholder="配置集key">
+                [placeholder]="'TMP.CONFIGMAP_KEY' | translate">
             </div>
             <div *ngIf="env.valueFrom && env.valueFrom.secretKeyRef" class="form-group form-group-padding">
               <input type="text" size="40" required name="env.valueFrom.secretKeyRef.name_{{i}}_{{j}}" [(ngModel)]="env.valueFrom.secretKeyRef.name"
-                placeholder="加密字典名称">
+                [placeholder]="'TMP.SECRET_NAME' | translate">
               <input type="text" size="40" required name="env.valueFrom.secretKeyRef.key_{{i}}_{{j}}" [(ngModel)]="env.valueFrom.secretKeyRef.key"
-                placeholder="加密字典key">
+                [placeholder]="'TMP.SECRET_KEY' | translate">
             </div>
 
           </div>
@@ -242,10 +240,10 @@ <h3 class="header-title" id="创建计划任务模版">创建计划任务模版<
   </form>
 </div>
 <div class="clr-wizard-footer-buttons tpl-bottom" [style.top.px]="top">
-  <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-  <button type="button" class="btn btn-primary" (click)="onAddContainer()">添加容器</button>
-  <button type="button" class="btn btn-primary" (click)="openModal()">高级配置</button>
-  <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+  <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+  <button type="button" class="btn btn-primary" (click)="onAddContainer()">{{'BUTTON.ADD_CONTAINER' | translate}}</button>
+  <button type="button" class="btn btn-primary" (click)="openModal()">{{'BUTTON.ADVANCED_CONFIG' | translate}}</button>
+  <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
 </div>
 
 <wayne-ace-editor (outputObj)="saveCronjob($event)"></wayne-ace-editor>
diff --git a/src/frontend/src/app/portal/cronjob/cronjob.component.html b/src/frontend/src/app/portal/cronjob/cronjob.component.html
index de7ad0333..a120a21a7 100644
--- a/src/frontend/src/app/portal/cronjob/cronjob.component.html
+++ b/src/frontend/src/app/portal/cronjob/cronjob.component.html
@@ -1,5 +1,5 @@
 <button (click)="createCronjob()" class="wayne-button primary" *ngIf="authService.currentAppPermission.cronjob.create || authService.currentUser.admin">
-  创建计划任务
+  {{'CRONJOB.CREATE' | translate}}
 </button>
 <create-edit-cronjob (create)="create($event)"></create-edit-cronjob>
 <div *ngIf="cronjobId && cronjobs?.length>0">
@@ -16,33 +16,33 @@
   <div class="table-search">
     <div class="table-search-left">
       <button (click)="createCronjobTpl()" class="wayne-button normal" *ngIf="authService.currentAppPermission.cronjob.create || authService.currentUser.admin">
-        创建计划任务模版
+        {{'CRONJOB.CREATE_TMP' | translate}}
       </button>
       <button (click)="editCronjob()" class="wayne-button normal" *ngIf="authService.currentAppPermission.cronjob.update || authService.currentUser.admin">
-        编辑计划任务
+        {{'CRONJOB.EDIT' | translate}}
       </button>
       <button (click)="publishHistory()" class="wayne-button normal" *ngIf="authService.currentAppPermission.cronjob.read || authService.currentUser.admin">
-        发布历史
+        {{'BUTTON.HISTORY' | translate}}
       </button>
       <button (click)="deleteCronjob()" class="wayne-button normal" *ngIf="authService.currentAppPermission.cronjob.offline || authService.currentUser.admin">
-        删除计划任务
+        {{'CRONJOB.DELETE' | translate}}
       </button>
       <wayne-filter-box (confirm)="confirmEvent()" (cancel)="cancelEvent()">
         <wayne-checkbox-group [(ngModel)]="showList">
-          <wayne-checkbox>创建时间</wayne-checkbox>
-          <wayne-checkbox>版本</wayne-checkbox>
-          <wayne-checkbox>已上线时间</wayne-checkbox>
-          <wayne-checkbox>调度间隔</wayne-checkbox>
-          <wayne-checkbox>发布说明</wayne-checkbox>
-          <wayne-checkbox>创建者</wayne-checkbox>
-          <wayne-checkbox>操作</wayne-checkbox>
+          <wayne-checkbox value="create_time">{{'TITLE.CREATE_TIME' | translate}}</wayne-checkbox>
+          <wayne-checkbox value="version">{{'TITLE.VERSION' | translate}}</wayne-checkbox>
+          <wayne-checkbox value="online_cluster">{{'TITLE.ONLINE_CLUSTER' | translate}}</wayne-checkbox>
+          <wayne-checkbox value="scheduling_interval">{{'TITLE.SCHEDULING_INTERVAL' | translate}}</wayne-checkbox>
+          <wayne-checkbox value="release_explain">{{'TITLE.RELEASE_EXPLAIN' | translate}}</wayne-checkbox>
+          <wayne-checkbox value="create_user">{{'TITLE.CREATE_USER' | translate}}</wayne-checkbox>
+          <wayne-checkbox value="action">{{'TITLE.ACTION' | translate}}</wayne-checkbox>
         </wayne-checkbox-group>
       </wayne-filter-box>
     </div>
     <div class="table-search-right">
       <div class="toggle-switch">
         <input type="checkbox" id="toggle_1" [(ngModel)]="isOnline" (change)="onlineChange()">
-        <label for="toggle_1">只显示上线模板</label>
+        <label for="toggle_1">{{'MESSAGE.ONLY_ONLINE_TEMPLATE' | translate}}</label>
       </div>
     </div>
   </div>
@@ -57,7 +57,7 @@
 </div>
 <div *ngIf="cronjobName && cronjobs?.length" >
   <div class="row flex-items-xs-between flex-items-xs-top" style="padding-left: 15px; padding-right: 15px;">
-    <h2 class="header-title">任务列表</h2>
+    <h2 class="header-title">{{'CRONJOB.LIST' | translate}}</h2>
   </div>
   <list-job  [jobs]="changedJobs"
              [currentCronjobName]="cronjobName"
diff --git a/src/frontend/src/app/portal/cronjob/cronjob.component.ts b/src/frontend/src/app/portal/cronjob/cronjob.component.ts
index 900eb379e..a57a0f627 100644
--- a/src/frontend/src/app/portal/cronjob/cronjob.component.ts
+++ b/src/frontend/src/app/portal/cronjob/cronjob.component.ts
@@ -37,15 +37,16 @@ import {ConfirmationMessage} from '../../shared/confirmation-dialog/confirmation
 import {ConfirmationDialogService} from '../../shared/confirmation-dialog/confirmation-dialog.service';
 import {Subscription} from 'rxjs/Subscription';
 import {PageState} from '../../shared/page/page-state';
+import {TranslateService} from '@ngx-translate/core';
 
 const showState = {
-  '创建时间': {hidden: false},
-  '版本': {hidden: false},
-  '已上线时间': {hidden: false},
-  '调度间隔': {hidden: false},
-  '发布说明': {hidden: false},
-  '创建者': {hidden: false},
-  '操作': {hidden: false}
+  'create_time': {hidden: false},
+  'version': {hidden: false},
+  'online_cluster': {hidden: false},
+  'scheduling_interval': {hidden: false},
+  'release_explain': {hidden: false},
+  'create_user': {hidden: false},
+  'action': {hidden: false}
 };
 
 @Component({
@@ -101,6 +102,7 @@ export class CronjobComponent implements AfterContentInit, OnDestroy, OnInit {
               private appService: AppService,
               private deletionDialogService: ConfirmationDialogService,
               private clusterService: ClusterService,
+              public translate: TranslateService,
               private messageHandlerService: MessageHandlerService) {
                 this.tabScription = this.tabDragService.tabDragOverObservable.subscribe(over => {
                   if (over) this.tabChange();
diff --git a/src/frontend/src/app/portal/cronjob/list-cronjob/list-cronjob.component.html b/src/frontend/src/app/portal/cronjob/list-cronjob/list-cronjob.component.html
index 9916a48d6..f73573c2c 100644
--- a/src/frontend/src/app/portal/cronjob/list-cronjob/list-cronjob.component.html
+++ b/src/frontend/src/app/portal/cronjob/list-cronjob/list-cronjob.component.html
@@ -1,43 +1,43 @@
 <clr-datagrid (clrDgRefresh)="refresh($event)" class="wayne-clr-datagrid">
-  <clr-dg-placeholder>暂无数据！</clr-dg-placeholder>
+  <clr-dg-placeholder>{{'MESSAGE.NO_MESSAGE' | translate}}</clr-dg-placeholder>
   <clr-dg-column class="col-id">
     <ng-container>
       #
     </ng-container>
   </clr-dg-column>
   <clr-dg-column class="col-time">
-    <ng-container *clrDgHideableColumn="showState['创建时间']">
-      创建时间
+    <ng-container *clrDgHideableColumn="showState['create_time']">
+      {{'TITLE.CREATE_TIME' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column class="col-version">
-    <ng-container *clrDgHideableColumn="showState['版本']">
-      版本
+    <ng-container *clrDgHideableColumn="showState['version']">
+      {{'TITLE.VERSION' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column class="col-cluster">
-    <ng-container *clrDgHideableColumn="showState['已上线机房']">
-      已上线机房
+    <ng-container *clrDgHideableColumn="showState['online_cluster']">
+      <!-- {{'TITLE.ONLINE_CLUSTER' | translate}} -->
     </ng-container>
   </clr-dg-column>
   <clr-dg-column>
-    <ng-container *clrDgHideableColumn="showState['调度间隔']">
-      调度间隔
+    <ng-container *clrDgHideableColumn="showState['scheduling_interval']">
+      {{'TITLE.SCHEDULING_INTERVAL' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column class="col-description">
-    <ng-container *clrDgHideableColumn="showState['发布说明']">
-      发布说明
+    <ng-container *clrDgHideableColumn="showState['release_explain']">
+      {{'TITLE.RELEASE_EXPLAIN' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column>
-    <ng-container *clrDgHideableColumn="showState['创建者']">
-      创建者
+    <ng-container *clrDgHideableColumn="showState['create_user']">
+      {{'TITLE.CREATE_USER' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column class="col-operate">
-    <ng-container *clrDgHideableColumn="showState['操作']">
-      操作
+    <ng-container *clrDgHideableColumn="showState['action']">
+      {{'TITLE.ACTION' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-row *ngFor="let cronjobTpl of cronjobTpls" [clrDgItem]="cronjobTpl">
@@ -69,27 +69,27 @@
       <button class="wayne-button text" 
         (click)="publishTpl(cronjobTpl)"
         *ngIf="authService.currentAppPermission.cronjob.deploy || authService.currentUser.admin">
-        发布</button>
+        {{'BUTTON.RELEASE' | translate}}</button>
       <button class="wayne-button text"
         (click)="cronjobTplDetail(cronjobTpl)"
         *ngIf="authService.currentAppPermission.cronjob.read || authService.currentUser.admin">
-        详情</button>
+        {{'BUTTON.DETAIL' | translate}}</button>
       <button class="wayne-button text"
         (click)="cloneCronjobTpl(cronjobTpl)"
         *ngIf="authService.currentAppPermission.cronjob.create || authService.currentUser.admin">
-        克隆</button>
+        {{'BUTTON.CLONE' | translate}}</button>
       <button class="wayne-button text"
         *ngIf="!cronjobTpl.status && (authService.currentAppPermission.cronjob.delete || authService.currentUser.admin)"
         (click)="deleteCronjobTpl(cronjobTpl)">
-        删除</button>
+        {{'BUTTON.DELETE' | translate}}</button>
       <button class="wayne-button text"
          (click)="offlineCronjobTpl(cronjobTpl)"
          *ngIf="cronjobTpl.status && (authService.currentAppPermission.cronjob.offline || authService.currentUser.admin)">
-         下线</button>
+         {{'BUTTON.DROP' | translate}}</button>
       <button class="wayne-button text"
          (click)="suspend(cronjobTpl)"
          *ngIf="cronjobTpl.status && (authService.currentAppPermission.cronjob.deploy || authService.currentUser.admin)">
-         挂起</button>
+         {{'BUTTON.LANG_UP' | translate}}</button>
     </clr-dg-cell>
   </clr-dg-row>
 
diff --git a/src/frontend/src/app/portal/cronjob/list-cronjob/list-cronjob.component.ts b/src/frontend/src/app/portal/cronjob/list-cronjob/list-cronjob.component.ts
index 426dff5af..eb01af594 100644
--- a/src/frontend/src/app/portal/cronjob/list-cronjob/list-cronjob.component.ts
+++ b/src/frontend/src/app/portal/cronjob/list-cronjob/list-cronjob.component.ts
@@ -20,6 +20,7 @@ import {ActivatedRoute, Router} from '@angular/router';
 import {Page} from '../../../shared/page/page-state';
 import {AceEditorMsg} from '../../../shared/ace-editor/ace-editor';
 import {AceEditorService} from '../../../shared/ace-editor/ace-editor.service';
+import {TranslateService} from '@ngx-translate/core';
 
 @Component({
   selector: 'list-cronjob',
@@ -53,6 +54,7 @@ export class ListCronjobComponent implements OnInit, OnDestroy {
               private aceEditorService: AceEditorService,
               private router: Router,
               private tplDetailService: TplDetailService,
+              public translate: TranslateService,
               private messageHandlerService: MessageHandlerService) {
     this.subscription = deletionDialogService.confirmationConfirm$.subscribe(message => {
       if (message &&
diff --git a/src/frontend/src/app/portal/cronjob/list-event/list-event.component.html b/src/frontend/src/app/portal/cronjob/list-event/list-event.component.html
index 36a54b5cc..8a8955a7e 100644
--- a/src/frontend/src/app/portal/cronjob/list-event/list-event.component.html
+++ b/src/frontend/src/app/portal/cronjob/list-event/list-event.component.html
@@ -3,7 +3,7 @@ <h3 class="modal-title">错误事件</h3>
   <div class="modal-body">
     <hr>
     <clr-datagrid>
-      <clr-dg-placeholder>暂无数据！</clr-dg-placeholder>
+      <clr-dg-placeholder>{{'MESSAGE.NO_MESSAGE' | translate}}</clr-dg-placeholder>
       <clr-dg-column>
         <ng-container *clrDgHideableColumn="{hidden: false}">
           名称
diff --git a/src/frontend/src/app/portal/cronjob/list-job/list-job.component.html b/src/frontend/src/app/portal/cronjob/list-job/list-job.component.html
index d20f0fa14..d52bc7da9 100644
--- a/src/frontend/src/app/portal/cronjob/list-job/list-job.component.html
+++ b/src/frontend/src/app/portal/cronjob/list-job/list-job.component.html
@@ -1,5 +1,5 @@
 <clr-datagrid (clrDgRefresh)="refresh($event)" class="wayne-clr-datagrid">
-  <clr-dg-placeholder>暂无数据！</clr-dg-placeholder>
+  <clr-dg-placeholder>{{'MESSAGE.NO_MESSAGE' | translate}}</clr-dg-placeholder>
   <clr-dg-column>
     <ng-container *clrDgHideableColumn="{hidden: false}">
       名称
diff --git a/src/frontend/src/app/portal/cronjob/list-pod/list-pod.component.html b/src/frontend/src/app/portal/cronjob/list-pod/list-pod.component.html
index 499bb621d..5720b8603 100644
--- a/src/frontend/src/app/portal/cronjob/list-pod/list-pod.component.html
+++ b/src/frontend/src/app/portal/cronjob/list-pod/list-pod.component.html
@@ -3,7 +3,7 @@ <h3 class="modal-title">Pod列表</h3>
   <div class="modal-body">
     <hr>
     <clr-datagrid>
-      <clr-dg-placeholder>暂无数据！</clr-dg-placeholder>
+      <clr-dg-placeholder>{{'MESSAGE.NO_MESSAGE' | translate}}</clr-dg-placeholder>
       <clr-dg-column>
         <ng-container *clrDgHideableColumn="{hidden: false}">
           名称
@@ -31,7 +31,7 @@ <h3 class="modal-title">Pod列表</h3>
       </clr-dg-column>
       <clr-dg-column>
         <ng-container *clrDgHideableColumn="{hidden: false}">
-         操作
+         {{'TITLE.ACTION' | translate}}
         </ng-container>
       </clr-dg-column>
       <clr-dg-row *clrDgItems="let pod of pods">
@@ -49,7 +49,7 @@ <h3 class="modal-title">Pod列表</h3>
         <clr-dg-cell>
           <button class="wayne-button text" (click)="enterContainer(pod)">进入容器</button>
           <button class="wayne-button text" (click)="podLog(pod)">日志</button>
-          <button class="wayne-button text" (click)="deletePod(pod)">删除</button>
+          <button class="wayne-button text" (click)="deletePod(pod)">{{'BUTTON.DELETE' | translate}}</button>
         </clr-dg-cell>
       </clr-dg-row>
       <clr-dg-footer>
diff --git a/src/frontend/src/app/portal/cronjob/publish-tpl/publish-tpl.component.html b/src/frontend/src/app/portal/cronjob/publish-tpl/publish-tpl.component.html
index c514bbadd..fc27a1d60 100644
--- a/src/frontend/src/app/portal/cronjob/publish-tpl/publish-tpl.component.html
+++ b/src/frontend/src/app/portal/cronjob/publish-tpl/publish-tpl.component.html
@@ -4,7 +4,7 @@ <h3 class="modal-title">{{title}}</h3>
     <form #publishForm="ngForm">
       <section class="form-block">
         <div class="form-group" style="padding-left: 100px;">
-          <label class="col-md-3 form-group-label-override required">机房</label>
+          <label class="col-md-3 form-group-label-override required">{{'TITLE.CLUSTER' | translate}}</label>
           <div *ngFor="let cluster of clusters;let i=index" class="checkbox-inline" style="margin-top: 0px">
             <div class="checkbox">
               <input [(ngModel)]="clusterMetas[cluster].checked"
@@ -16,10 +16,10 @@ <h3 class="modal-title">{{title}}</h3>
           </div>
         </div>
         <div *ngIf="actionType==3" class="form-group" style="padding-left: 135px;">
-          <label class="col-md-3 form-group-label-override">强制下线
+          <label class="col-md-3 form-group-label-override">{{'ACTION.FORCE_DROP' | translate}} 
             <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg">
               <clr-icon shape="info-circle" size="24"></clr-icon>
-              <span class="tooltip-content">确认资源已经不存在于Kubernetes，可以打开此开关强制下线</span>
+              <span class="tooltip-content">{{'MESSAGE.FORCE_DROP' | translate}} </span>
             </a>
           </label>
           <div class="toggle-switch" style="top: .25rem">
@@ -30,8 +30,8 @@ <h3 class="modal-title">{{title}}</h3>
       </section>
     </form>
     <div class="modal-footer">
-      <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-      <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">确定</button>
+      <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+      <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.CONFIRM' | translate}}</button>
     </div>
   </div>
 </clr-modal>
diff --git a/src/frontend/src/app/portal/daemonset/create-edit-daemonset/create-edit-daemonset.component.html b/src/frontend/src/app/portal/daemonset/create-edit-daemonset/create-edit-daemonset.component.html
index 99e02f2a5..0e6da6f15 100644
--- a/src/frontend/src/app/portal/daemonset/create-edit-daemonset/create-edit-daemonset.component.html
+++ b/src/frontend/src/app/portal/daemonset/create-edit-daemonset/create-edit-daemonset.component.html
@@ -1,28 +1,28 @@
 <clr-modal [(clrModalOpen)]="modalOpened">
-    <h3 class="modal-title">{{title}}</h3>
+    <h3 class="modal-title">{{title | translate}}</h3>
   <div class="modal-body">
     <form #ngForm="ngForm">
       <section class="form-block">
         <div class="form-group" style="padding-left: 135px;">
-          <label for="name" class="col-md-3 form-group-label-override required">名称</label>
+          <label for="name" class="col-md-3 form-group-label-override required">{{'TITLE.NAME' | translate}}</label>
           <label for="name" aria-haspopup="true" role="tooltip" [class.invalid]="!isNameValid" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left form-control">
             <label *ngIf="app && actionType==0 && nameGenerateRuleConfig=='join'">{{app.name}}-</label>
             <input type="text" [(ngModel)]="daemonSet.name"
                    name="name"
                    required
-                   placeholder="英文小写"
+                   [placeholder]="'PLACEHOLDER.APP_NAME' | translate"
                    [readonly]="actionType==1"
                    maxlength="64"
                    pattern="[a-z]([-a-z0-9]*[a-z0-9])?"
                    (keyup)='handleValidation()'>
             <span class="tooltip-content">
-              名称不符合规范，验证规则[a-z]([-a-z0-9]*[a-z0-9])?
+              {{'RULE.REGEXT' | translate}}[a-z]([-a-z0-9]*[a-z0-9])?
             </span>
           </label>
           <span class="spinner spinner-inline" [hidden]="!checkOnGoing"></span>
         </div>
         <div class="form-group" style="padding-left: 135px;">
-          <label class="col-md-3 form-group-label-override required">机房</label>
+          <label class="col-md-3 form-group-label-override required">{{'TITLE.CLUSTER' | translate}}</label>
           <div *ngFor="let cluster of clusters" style="padding-right: 15px" class="checkbox-inline">
             <input [(ngModel)]="cluster['checked']"
                    type="checkbox"
@@ -32,7 +32,7 @@ <h3 class="modal-title">{{title}}</h3>
           </div>
         </div>
         <div class="form-group" style="padding-left: 135px;">
-          <label for="description" class="col-md-3 form-group-label-override">描述</label>
+          <label for="description" class="col-md-3 form-group-label-override">{{'TITLE.DESCRIPTION' | translate}}</label>
           <textarea id="description" [(ngModel)]="daemonSet.description"
                     name="description"
                     rows="3">
@@ -42,7 +42,7 @@ <h3 class="modal-title">{{title}}</h3>
     </form>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+    <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
   </div>
 </clr-modal>
diff --git a/src/frontend/src/app/portal/daemonset/create-edit-daemonset/create-edit-daemonset.component.ts b/src/frontend/src/app/portal/daemonset/create-edit-daemonset/create-edit-daemonset.component.ts
index 5ae6f820e..b465852c8 100644
--- a/src/frontend/src/app/portal/daemonset/create-edit-daemonset/create-edit-daemonset.component.ts
+++ b/src/frontend/src/app/portal/daemonset/create-edit-daemonset/create-edit-daemonset.component.ts
@@ -11,6 +11,7 @@ import {DaemonSetService} from '../../../shared/client/v1/daemonset.service';
 import {MessageHandlerService} from '../../../shared/message-handler/message-handler.service';
 import {AuthService} from '../../../shared/auth/auth.service';
 import {ApiNameGenerateRule} from '../../../shared/utils';
+import {TranslateService} from '@ngx-translate/core';
 
 @Component({
   selector: 'create-edit-daemonset',
@@ -36,6 +37,7 @@ export class CreateEditDaemonSetComponent implements OnInit {
 
   constructor(private daemonSetService: DaemonSetService,
               private authService: AuthService,
+              public translate: TranslateService,
               private messageHandlerService: MessageHandlerService) {
   }
 
@@ -55,7 +57,7 @@ export class CreateEditDaemonSetComponent implements OnInit {
     }
     if (id) {
       this.actionType = ActionType.EDIT;
-      this.title = '编辑守护进程集';
+      this.title = 'DAEMONSET.EDIT';
       this.daemonSetService.getById(id, this.app.id).subscribe(
         status => {
           let data = status.data;
@@ -80,7 +82,7 @@ export class CreateEditDaemonSetComponent implements OnInit {
         });
     } else {
       this.actionType = ActionType.ADD_NEW;
-      this.title = '创建守护进程集';
+      this.title = 'DAEMONSET.CREATE';
       this.daemonSet = new DaemonSet();
     }
   }
diff --git a/src/frontend/src/app/portal/daemonset/create-edit-daemonsettpl/create-edit-daemonsettpl.component.html b/src/frontend/src/app/portal/daemonset/create-edit-daemonsettpl/create-edit-daemonsettpl.component.html
index 2cda5dfde..c12d599a7 100644
--- a/src/frontend/src/app/portal/daemonset/create-edit-daemonsettpl/create-edit-daemonsettpl.component.html
+++ b/src/frontend/src/app/portal/daemonset/create-edit-daemonsettpl/create-edit-daemonsettpl.component.html
@@ -1,6 +1,6 @@
 <div class="row" style="padding-left: 50px; padding-right: 150px;">
   <div class="row flex-items-xs-between flex-items-xs-top" style="padding-left: 15px; padding-right: 15px;">
-    <h3 class="header-title" id="创建守护进程集模版">创建守护进程集模版</h3>
+    <h3 class="header-title" id="创建守护进程集模版">{{'DAEMONSET.CREATE_TMP' | translate}}</h3>
   </div>
   <div style="position: fixed;right: 0;top: 100px; width: 200px; max-height: calc(100% - 160px); overflow-y: auto;">
     <wayne-navigation container=".content-area" [node]="naviList"></wayne-navigation>
@@ -8,9 +8,9 @@ <h3 class="header-title" id="创建守护进程集模版">创建守护进程集
   <form #ngForm="ngForm" style="padding-right: 30px;width: 100%">
     <section class="form-block wrap">
       <div>
-        <label class="label-level1" id="发布信息">发布信息</label>
+        <label class="label-level1" id="发布信息">{{'TMP.RELEASE_MESSAGE' | translate}}</label>
         <div class="form-group form-group-padding">
-          <label class="col-md-3 form-group-label-override required">发布说明</label>
+          <label class="col-md-3 form-group-label-override required">{{'TMP.RELEASE_EXPLAIN' | translate}}</label>
           <textarea name="daemonset_description" [(ngModel)]="daemonSetTpl.description" rows="3" style="width: 65%" required>
           </textarea>
         </div>
@@ -18,16 +18,16 @@ <h3 class="header-title" id="创建守护进程集模版">创建守护进程集
     </section>
     <section class="form-block wrap">
       <div>
-        <label class="label-level1" id="更新策略">更新策略</label>
+        <label class="label-level1" id="更新策略">{{'TMP.UPDATE_STRATEGY' | translate}}</label>
         <div class="form-group form-group-padding">
-          <label class="col-md-3 form-group-label-override required">更新方式</label>
+          <label class="col-md-3 form-group-label-override required">{{'TMP.UPDATE_WAY' | translate}}</label>
           <div class="radio-inline">
               <input type="radio" name="daemonSetStrategyType" id="daemonSetStrategyType1" value="OnDelete" [(ngModel)]="kubeDaemonSet.spec.updateStrategy.type" checked>
-              <label for="daemonSetStrategyType1">仅删除时更新</label>
+              <label for="daemonSetStrategyType1">{{'TMP.DELETE_UPDATE' | translate}}</label>
           </div>
           <div class="radio-inline">
               <input type="radio" name="daemonSetStrategyType" id="daemonSetStrategyType2" value="RollingUpdate"  [(ngModel)]="kubeDaemonSet.spec.updateStrategy.type">
-              <label for="daemonSetStrategyType2">滚动更新</label>
+              <label for="daemonSetStrategyType2">{{'TMP.SCROLL_UPDATE' | translate}}</label>
           </div>
         </div>
       </div>
@@ -35,134 +35,130 @@ <h3 class="header-title" id="创建守护进程集模版">创建守护进程集
 
     <section *ngFor="let container of kubeDaemonSet.spec.template.spec.containers; let i = index" class="form-block wrap">
       <div>
-        <label class="label-level1" [id]="i ? '容器配置' + i : '容器配置'">容器配置
+        <label class="label-level1" [id]="i ? '容器配置' + i : '容器配置'">{{'TMP.CONTAINER_CONFIG' | translate}}
           <clr-icon (click)="onDeleteContainer(i)" shape="trash" title="删除容器" class="is-solid"></clr-icon>
         </label>
         <div class="container-box">
-          <label class="label-level2" [id]="i ? '镜像配置' + i : '镜像配置'">镜像配置</label>
+          <label class="label-level2" [id]="i ? '镜像配置' + i : '镜像配置'">{{'TMP.IMAGE_CONFIG' | translate}}</label>
           <div class="form-group form-group-padding">
-            <label class="col-md-3 form-group-label-override required">容器名称</label>
+            <label class="col-md-3 form-group-label-override required">{{'TMP.CONTAINER_NAME' | translate}}</label>
             <label aria-haspopup="true" role="tooltip" [class.invalid]="checkIfInvalid(i,'container.name_')" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left">
               <input type="text" class="col-sm-12" size="90" required name="container.name_{{i}}" pattern="[a-z]([-a-z0-9]*[a-z0-9])?" [(ngModel)]="container.name"
-                placeholder="英文，dns域名规则">
+                [placeholder]="'RULE.CONTAINER' | translate">
               <span class="tooltip-content">
-                容器名称不符合规范，验证规则[a-z]([-a-z0-9]*[a-z0-9])?
+                {{'RULE.REGEXT' | translate}}[a-z]([-a-z0-9]*[a-z0-9])?
               </span>
             </label>
           </div>
           <div class="form-group form-group-padding">
-            <label class="col-md-3 form-group-label-override required">镜像地址</label>
+            <label class="col-md-3 form-group-label-override required">{{'TMP.IMAGE_ADDRESS' | translate}}</label>
             <label aria-haspopup="true" role="tooltip" [class.invalid]="checkIfInvalid(i,'container.image_')" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left">
               <input type="text" class="col-sm-12" size="90" name="container.image_{{i}}" required pattern="{{getImagePrefixReg()}}" [(ngModel)]="container.image"
-                placeholder="镜像地址">
+                [placeholder]="'TMP.IMAGE_ADDRESS' | translate">
               <span class="tooltip-content">
-                镜像不符合校验规则 {{getImagePrefixReg()}}
+                {{'RULE.REGEXT' | translate}}{{getImagePrefixReg()}}
               </span>
             </label>
           </div>
           <div class="form-group form-group-padding">
-            <label class="col-md-3 form-group-label-override required">内存容量</label>
+            <label class="col-md-3 form-group-label-override required">{{'TMP.MEMORY_NUM' | translate}}</label>
             <label aria-haspopup="true" [class.invalid]="!checkMemory(container.resources.limits.memory)" style="padding-right: 0;margin-right: 0;padding-left: 0"
               role="tooltip" class="col-md-6 tooltip tooltip-validation tooltip-md tooltip-bottom-left">
               <input type="number" style="width:inherit" name="container.resources.limits.memory_{{i}}" required [(ngModel)]="container.resources.limits.memory"
-                placeholder="单位G">
-              <span class="tooltip-content">
-                内存大小应该在0~{{memoryLimit}}G之间
+                [placeholder]="'UNIT.MEMORY' | translate">
+              <span translate="'RULE.MEMORY'" [translateParams]="{value: memoryLimit}" class="tooltip-content">
               </span>
             </label>
             <label class="col-md-4">G&nbsp;&nbsp;&nbsp;
-              <label style="color: red">金额: {{container.resources.limits.memory * memoryUnitPrice | number:'1.2-2'}}元/月</label>
+              <label style="color: red">price: {{container.resources.limits.memory * memoryUnitPrice | number:'1.2-2'}}{{'UNIT.PRICE' | translate}}</label>
             </label>
           </div>
           <div class="form-group form-group-padding">
-            <label class="col-md-3 form-group-label-override required">CPU核数</label>
+            <label class="col-md-3 form-group-label-override required">{{'TMP.CORE_NUM' | translate}}</label>
             <label aria-haspopup="true" [class.invalid]="!checkCpu(container.resources.limits.cpu)" style="padding-right: 0;margin-right: 0;padding-left: 0"
               role="tooltip" class="col-md-6 tooltip tooltip-validation tooltip-md tooltip-bottom-left">
               <input type="number" name="container.resources.limits.cpu_{{i}}" [(ngModel)]="container.resources.limits.cpu" style="width:inherit"
-                required placeholder="单位个">
-              <span class="tooltip-content">
-                CPU大小应该在0~{{cpuLimit}}核之间
+                required [placeholder]="'UNIT.CPU' | translate">
+              <span translate="'RULE.CPU' | translate" [translateParams]="{value: cpuLimit}" class="tooltip-content">
               </span>
             </label>
-            <label class="col-md-4">核&nbsp;&nbsp;&nbsp;
-              <label style="color: red">金额: {{container.resources.limits.cpu * cpuUnitPrice | number:'1.2-2'}}元/月</label>
+            <label class="col-md-4">{{'UNIT.CORE' | translate}}&nbsp;&nbsp;&nbsp;
+              <label style="color: red">price: {{container.resources.limits.cpu * cpuUnitPrice | number:'1.2-2'}}{{'UNIT.PRICE' | translate}}</label>
             </label>
           </div>
 
         </div>
 
         <div class="container-box">
-          <label class="label-level2" [id]="i ? '环境变量配置' + i : '环境变量配置'">环境变量配置
-            <button (click)="onAddEnvFrom(i)" style="margin-left: 10px;" class="wayne-button primary"><clr-icon shape="add-text"></clr-icon>批量加载</button>
-            <button (click)="onAddEnv(i)" style="margin-left: 10px;" class="wayne-button primary"><clr-icon shape="add"></clr-icon>逐个加载</button>
+          <label class="label-level2" [id]="i ? '环境变量配置' + i : '环境变量配置'">{{'TMP.ENVIRONMENT_VAR' | translate}}
+            <button (click)="onAddEnvFrom(i)" style="margin-left: 10px;" class="wayne-button primary"><clr-icon shape="add-text"></clr-icon>{{'TMP.ADD_GROUP' | translate}}</button>
+            <button (click)="onAddEnv(i)" style="margin-left: 10px;" class="wayne-button primary"><clr-icon shape="add"></clr-icon>{{'TMP.ADD_ONE' | translate}}</button>
           </label>
           <div *ngFor="let envFrom of container.envFrom; let j = index">
             <div class="form-group form-group-padding">
-              <label for="envFromType-{{i}}-{{j}}" class="col-md-3 form-group-label-override required">批量加载
+              <label for="envFromType-{{i}}-{{j}}" class="col-md-3 form-group-label-override required">{{'TMP.ADD_GROUP' | translate}}
                 <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-md">
                   <clr-icon shape="info-circle" size="24"></clr-icon>
-                  <span class="tooltip-content">批量从配置集或加密字典加载环境变量</span>
+                  <span class="tooltip-content">{{'TMP.LOAD_GROUP_MESSAGE' | translate}}</span>
                 </a>
               </label>
               <div class="select">
                 <select id="envFromType-{{i}}-{{j}}" name="envFrom.type_{{i}}_{{j}}" (change)="envFromChange($event.target.value,i,j)">
-                  <option value="1" [selected]="envFrom.configMapRef">从配置集加载</option>
-                  <option value="2" [selected]="envFrom.secretRef">从加密字典加载</option>
+                  <option value="1" [selected]="envFrom.configMapRef">{{'TMP.LOAD_CONFIGMAP' | translate}}</option>
+                  <option value="2" [selected]="envFrom.secretRef">{{'TMP.LOAD_SECRET' | translate}}</option>
                 </select>
               </div>
 
-              <clr-icon style="margin-top: 10px;margin-right: 8px" (click)="onAddEnvFrom(i)" shape="plus-circle" title="添加环境变量" class="is-solid"></clr-icon>
-              <clr-icon style="margin-top: 10px" (click)="onDeleteEnvFrom(i,j)" shape="trash" title="删除环境变量" class="is-solid"></clr-icon>
+              <clr-icon style="margin-top: 10px;margin-right: 8px" (click)="onAddEnvFrom(i)" shape="plus-circle" [title]="'TMP.ADD_ENVIRONMENT' | translate" class="is-solid"></clr-icon>
+              <clr-icon style="margin-top: 10px" (click)="onDeleteEnvFrom(i,j)" shape="trash" [title]="'TMP.DELETE_ENVIRONMENT' | translate" class="is-solid"></clr-icon>
             </div>
             <div *ngIf="envFrom" class="form-group form-group-padding">
-              <input type="text" size="40" name="envFrom.prefix_{{i}}_{{j}}" [(ngModel)]="envFrom.prefix" placeholder="为所有环境变量添加相同的前缀，可为空">
+              <input type="text" size="40" name="envFrom.prefix_{{i}}_{{j}}" [(ngModel)]="envFrom.prefix" [placeholder]="'PLACEHOLDER.ENVIRONMENT' | translate">
             </div>
             <div *ngIf="envFrom && envFrom.configMapRef" class="form-group form-group-padding">
               <input type="text" size="40" required name="envFrom.configMapRef.name_{{i}}_{{j}}" [(ngModel)]="envFrom.configMapRef.name"
-                placeholder="配置集名称">
+                [placeholder]="'TMP.CONFIGMAP_NAME' | translate">
             </div>
             <div *ngIf="envFrom && envFrom.secretRef" class="form-group form-group-padding">
-              <input type="text" size="40" required name="envFrom.secretRef.name_{{i}}_{{j}}" [(ngModel)]="envFrom.secretRef.name" placeholder="加密字典名称">
+              <input type="text" size="40" required name="envFrom.secretRef.name_{{i}}_{{j}}" [(ngModel)]="envFrom.secretRef.name" [placeholder]="'TMP.SECRET_NAME' | translate">
             </div>
-
           </div>
-
           <div *ngFor="let env of container.env; let j = index">
             <div class="form-group form-group-padding">
-              <label for="envType-{{i}}-{{j}}" class="col-md-3 form-group-label-override required">逐个加载
+              <label for="envType-{{i}}-{{j}}" class="col-md-3 form-group-label-override required">{{'TMP.ADD_ONE' | translate}}
                 <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-md">
                   <clr-icon shape="info-circle" size="24"></clr-icon>
-                  <span class="tooltip-content">其它类型的环境变量只支持高级模式编辑</span>
+                  <span class="tooltip-content">{{'TMP.SUPPORT_ENVIRONMENT_MESSAGE' | translate}}</span>
                 </a>
               </label>
               <div class="select">
                 <select id="envType-{{i}}-{{j}}" name="env.type_{{i}}_{{j}}" (change)="envChange($event.target.value,i,j)">
-                  <option value="0" [selected]="env.value!=null">自定义环境变量</option>
-                  <option value="1" [selected]="env.valueFrom?.configMapKeyRef">从配置集加载</option>
-                  <option value="2" [selected]="env.valueFrom?.secretKeyRef">从加密字典加载</option>
-                  <option value="3" selected>其它</option>
+                  <option value="0" [selected]="env.value!=null">{{'TMP.LOAD_ENVIRONMENT' | translate}}</option>
+                  <option value="1" [selected]="env.valueFrom?.configMapKeyRef">{{'TMP.LOAD_CONFIGMAP' | translate}}</option>
+                  <option value="2" [selected]="env.valueFrom?.secretKeyRef">{{'TMP.LOAD_SECRET' | translate}}</option>
+                  <option value="3" selected>{{'OTHER' | translate}}</option>
                 </select>
               </div>
-              <clr-icon style="margin-top: 10px;margin-right: 8px" (click)="onAddEnv(i)" shape="plus-circle" title="添加环境变量" class="is-solid"></clr-icon>
-              <clr-icon style="margin-top: 10px" (click)="onDeleteEnv(i,j)" shape="trash" title="删除环境变量" class="is-solid"></clr-icon>
+              <clr-icon style="margin-top: 10px;margin-right: 8px" (click)="onAddEnv(i)" shape="plus-circle" [title]="'TMP.ADD_ENVIRONMENT' | translate" class="is-solid"></clr-icon>
+              <clr-icon style="margin-top: 10px" (click)="onDeleteEnv(i,j)" shape="trash" [title]="'TMP.DELETE_ENVIRONMENT' | translate" class="is-solid"></clr-icon>
             </div>
             <div class="form-group form-group-padding">
-              <input [(ngModel)]="env.name" required name="env.name_{{i}}_{{j}}" type="text" size="45" placeholder="环境变量名称">
+              <input [(ngModel)]="env.name" required name="env.name_{{i}}_{{j}}" type="text" size="45" [placeholder]="'TMP.ENVIRONMENT_NAME' | translate">
             </div>
             <div *ngIf="env.value != null" class="form-group form-group-padding">
-              <input [(ngModel)]="env.value" required name="env.value_{{i}}_{{j}}" type="text" size="45" placeholder="环境变量值">
+              <input [(ngModel)]="env.value" required name="env.value_{{i}}_{{j}}" type="text" size="45" [placeholder]="'TMP.ENVIRONMENT_VAR' | translate">
             </div>
             <div *ngIf="env.valueFrom && env.valueFrom.configMapKeyRef" class="form-group form-group-padding">
               <input type="text" size="40" required name="env.valueFrom.configMapKeyRef.name_{{i}}_{{j}}" [(ngModel)]="env.valueFrom.configMapKeyRef.name"
-                placeholder="配置集名称">
+                [placeholder]="'TMP.CONFIGMAP_NAME' | translate">
               <input type="text" size="40" required name="env.valueFrom.configMapKeyRef.key_{{i}}_{{j}}" [(ngModel)]="env.valueFrom.configMapKeyRef.key"
-                placeholder="配置集key">
+                [placeholder]="'TMP.CONFIGMAP_KEY' | translate">
             </div>
             <div *ngIf="env.valueFrom && env.valueFrom.secretKeyRef" class="form-group form-group-padding">
               <input type="text" size="40" required name="env.valueFrom.secretKeyRef.name_{{i}}_{{j}}" [(ngModel)]="env.valueFrom.secretKeyRef.name"
-                placeholder="加密字典名称">
+                [placeholder]="'TMP.SECRET_NAME' | translate">
               <input type="text" size="40" required name="env.valueFrom.secretKeyRef.key_{{i}}_{{j}}" [(ngModel)]="env.valueFrom.secretKeyRef.key"
-                placeholder="加密字典key">
+                [placeholder]="'TMP.SECRET_KEY' | translate">
             </div>
 
           </div>
@@ -173,66 +169,61 @@ <h3 class="header-title" id="创建守护进程集模版">创建守护进程集
         <div class="container-box">
           <div class="toggle-switch">
             <input type="checkbox" [checked]="container.readinessProbe" (change)="readinessProbeChange(i)" id="readinessProbe{{i}}">
-            <label class="label-level2" [id]="i ? '可用性检查' + i : '可用性检查'" for="readinessProbe{{i}}">可用性检查（建议开启）
+            <label class="label-level2" [id]="i ? '可用性检查' + i : '可用性检查'" for="readinessProbe{{i}}">{{'TMP.USABLE_CHECK' | translate}}
               <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg">
                 <clr-icon shape="info-circle" size="24"></clr-icon>
-                <span class="tooltip-content">定期检查服务状态，只有检查通过才会提供服务，检查失败将会从可用服务列表移除</span>
+                <span class="tooltip-content">{{'TMP.USABLE_MESSAGE' | translate}}</span>
               </a>
             </label>
           </div>
 
           <div *ngIf="container.readinessProbe" style="color:#000">
             <div class="form-group form-group-padding">
-              <label class="col-md-3 form-group-label-override">超时时间
+              <label class="col-md-3 form-group-label-override">{{'TMP.EXTEND_TIME' | translate}}
                 <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-sm">
                   <clr-icon shape="info-circle" size="24"></clr-icon>
-                  <span class="tooltip-content">单位秒，请求超时时间</span>
+                  <span class="tooltip-content">{{'TMP.EXTEND_TIME_MESSAGE' | translate}}</span>
                 </a>
               </label>
               <input type="number" required name="container.readinessProbe.timeoutSeconds_{{i}}" [(ngModel)]="container.readinessProbe.timeoutSeconds"
-                placeholder="单位秒">
-              <label class="col-md-3 form-group-label-override">检查周期
+                [placeholder]="'PLACEHOLDER.SECOND' | translate">
+              <label class="col-md-3 form-group-label-override">{{'TMP.CHECK_CYCLE' | translate}}
                 <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-sm">
                   <clr-icon shape="info-circle" size="24"></clr-icon>
-                  <span class="tooltip-content">单位秒，执行检查间隔</span>
+                  <span class="tooltip-content">{{'TMP.CHECK_CYCLE_MESSAGE' | translate}}</span>
                 </a>
               </label>
               <input type="number" required name="container.readinessProbe.periodSeconds{{i}}" [(ngModel)]="container.readinessProbe.periodSeconds"
-                placeholder="单位秒">
+                [placeholder]="'PLACEHOLDER.SECOND' | translate">
             </div>
             <div class="form-group form-group-padding">
-              <label class="col-md-3 form-group-label-override">失败重试次数</label>
+              <label class="col-md-3 form-group-label-override">{{'TMP.FAIL_NUM' | translate}}</label>
               <input type="number" required name="container.readinessProbe.failureThreshold{{i}}" [(ngModel)]="container.readinessProbe.failureThreshold">
             </div>
 
             <div class="form-group form-group-padding">
-              <label for="readinessProbeType_{{i}}" class="col-md-3 form-group-label-override required">可用性检查方式</label>
+              <label for="readinessProbeType_{{i}}" class="col-md-3 form-group-label-override required">{{'TMP.USABLE_CHECK_WAY' | translate}}</label>
               <div class="select">
                 <select name="readinessProbeType_{{i}}" (change)="readinessProbeTypeChange($event.target.value,i)">
-                  <option value="0" [selected]="container.readinessProbe.httpGet">HTTP请求</option>
-                  <option value="1" [selected]="container.readinessProbe.tcpSocket">TCP端口</option>
-                  <option value="2" [selected]="container.readinessProbe.exec">执行命令</option>
+                  <option value="0" [selected]="container.readinessProbe.httpGet">{{'TMP.HTTP_REQUEST' | translate}}</option>
+                  <option value="1" [selected]="container.readinessProbe.tcpSocket">{{'TMP.TCP_PORT' | translate}}</option>
+                  <option value="2" [selected]="container.readinessProbe.exec">{{'TMP.EXECUTE_COMMAND' | translate}}</option>
                 </select>
               </div>
             </div>
             <div *ngIf="container.readinessProbe.httpGet" class="form-group form-group-padding">
               <input type="number" size="30" required name="container.readinessProbe.httpGet.port_{{i}}" [(ngModel)]="container.readinessProbe.httpGet.port"
-                placeholder="请求HTTP端口">
+                [placeholder]="'TMP.REQUEST_HTTP_PORT' | translate">
               <input type="text" size="70" required name="container.readinessProbe.httpGet.path_{{i}}" [(ngModel)]="container.readinessProbe.httpGet.path"
-                placeholder="请求URL">
+                [placeholder]="'TMP.REQUEST_URL' | translate">
             </div>
             <div *ngIf="container.readinessProbe.tcpSocket" class="form-group form-group-padding">
               <input type="number" size="30" required name="container.readinessProbe.tcpSocket.port_{{i}}" [(ngModel)]="container.readinessProbe.tcpSocket.port"
-                placeholder="请求TCP端口">
+                [placeholder]="'TMP.REQUEST_TCP_PORT' | translate">
             </div>
             <div *ngIf="container.readinessProbe.exec">
               <div class="form-group form-group-padding">
-                <textarea name="container.readinessProbe.exec.command_{{i}}" [(ngModel)]="container.readinessProbe.exec.command[0]" placeholder="多个命令换行输入，例如：
-                  /bin/healthz.sh
-                  --arg1
-                  foo
-                  --arg2
-                  bar"></textarea>
+                <textarea name="container.readinessProbe.exec.command_{{i}}" [(ngModel)]="container.readinessProbe.exec.command[0]" [placeholder]="'PLACEHOLDER.COMMAND' | translate"></textarea>
               </div>
 
 
@@ -253,25 +244,25 @@ <h3 class="header-title" id="创建守护进程集模版">创建守护进程集
 
           <div *ngIf="container.livenessProbe" style="color:#000">
             <div class="form-group form-group-padding">
-              <label class="col-md-3 form-group-label-override">超时时间
+              <label class="col-md-3 form-group-label-override">{{'TMP.EXTEND_TIME' | translate}}
                 <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-sm">
                   <clr-icon shape="info-circle" size="24"></clr-icon>
-                  <span class="tooltip-content">单位秒，请求超时时间</span>
+                  <span class="tooltip-content">{{'TMP.EXTEND_TIME_MESSAGE' | translate}}</span>
                 </a>
               </label>
               <input type="number" required name="container.livenessProbe.timeoutSeconds_{{i}}" [(ngModel)]="container.livenessProbe.timeoutSeconds"
-                placeholder="单位秒">
-              <label class="col-md-3 form-group-label-override">检查周期
+                [placeholder]="'PLACEHOLDER.SECOND' | translate">
+              <label class="col-md-3 form-group-label-override">{{'TMP.CHECK_CYCLE' | translate}}
                 <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-sm">
                   <clr-icon shape="info-circle" size="24"></clr-icon>
-                  <span class="tooltip-content">单位秒，执行检查间隔</span>
+                  <span class="tooltip-content">{{'TMP.CHECK_CYCLE_MESSAGE' | translate}}</span>
                 </a>
               </label>
               <input type="number" required name="container.livenessProbe.periodSeconds{{i}}" [(ngModel)]="container.livenessProbe.periodSeconds"
-                placeholder="单位秒">
+                [placeholder]="'PLACEHOLDER.SECOND' | translate">
             </div>
             <div class="form-group form-group-padding">
-              <label class="col-md-3 form-group-label-override">失败重试次数</label>
+              <label class="col-md-3 form-group-label-override">{{'TMP.FAIL_NUM' | translate}}</label>
               <input type="number" required name="container.livenessProbe.failureThreshold{{i}}" [(ngModel)]="container.livenessProbe.failureThreshold">
               <label class="col-md-3 form-group-label-override">检查延迟
                 <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-md">
@@ -280,37 +271,32 @@ <h3 class="header-title" id="创建守护进程集模版">创建守护进程集
                 </a>
               </label>
               <input type="number" required name="container.livenessProbe.initialDelaySeconds{{i}}" [(ngModel)]="container.livenessProbe.initialDelaySeconds"
-                placeholder="单位秒">
+                [placeholder]="'PLACEHOLDER.SECOND' | translate">
             </div>
 
             <div class="form-group form-group-padding">
-              <label for="livenessProbeType_{{i}}" class="col-md-3 form-group-label-override required">可用性检查方式</label>
+              <label for="livenessProbeType_{{i}}" class="col-md-3 form-group-label-override required">{{'TMP.USABLE_CHECK_WAY' | translate}}</label>
               <div class="select">
                 <select name="livenessProbeType_{{i}}" (change)="livenessProbeTypeChange($event.target.value,i)">
-                  <option value="0" [selected]="container.livenessProbe.httpGet">HTTP请求</option>
-                  <option value="1" [selected]="container.livenessProbe.tcpSocket">TCP端口</option>
-                  <option value="2" [selected]="container.livenessProbe.exec">执行命令</option>
+                  <option value="0" [selected]="container.livenessProbe.httpGet">{{'TMP.HTTP_REQUEST' | translate}}</option>
+                  <option value="1" [selected]="container.livenessProbe.tcpSocket">{{'TMP.TCP_PORT' | translate}}</option>
+                  <option value="2" [selected]="container.livenessProbe.exec">{{'TMP.EXECUTE_COMMAND' | translate}}</option>
                 </select>
               </div>
             </div>
             <div *ngIf="container.livenessProbe.httpGet" class="form-group form-group-padding">
               <input type="number" size="30" required name="container.livenessProbe.httpGet.port_{{i}}" [(ngModel)]="container.livenessProbe.httpGet.port"
-                placeholder="请求HTTP端口">
+                [placeholder]="'TMP.REQUEST_HTTP_PORT' | translate">
               <input type="text" size="70" required name="container.livenessProbe.httpGet.path_{{i}}" [(ngModel)]="container.livenessProbe.httpGet.path"
-                placeholder="请求URL">
+                [placeholder]="'TMP.REQUEST_URL' | translate">
             </div>
             <div *ngIf="container.livenessProbe.tcpSocket" class="form-group form-group-padding">
               <input type="number" size="30" required name="container.livenessProbe.tcpSocket.port_{{i}}" [(ngModel)]="container.livenessProbe.tcpSocket.port"
-                placeholder="请求TCP端口">
+                [placeholder]="'TMP.REQUEST_TCP_PORT' | translate">
             </div>
             <div *ngIf="container.livenessProbe.exec">
               <div class="form-group form-group-padding">
-                <textarea name="container.livenessProbe.exec.command_{{i}}" [(ngModel)]="container.livenessProbe.exec.command[0]" placeholder="多个命令换行输入，例如：
-                  /bin/healthz.sh
-                  --arg1
-                  foo
-                  --arg2
-                  bar"></textarea>
+                <textarea name="container.livenessProbe.exec.command_{{i}}" [(ngModel)]="container.livenessProbe.exec.command[0]" [placeholder]="'PLACEHOLDER.COMMAND' | translate"></textarea>
               </div>
             </div>
           </div>
@@ -320,10 +306,10 @@ <h3 class="header-title" id="创建守护进程集模版">创建守护进程集
   </form>
 </div>
 <div class="clr-wizard-footer-buttons tpl-bottom" [style.top.px]="top">
-  <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-  <button type="button" class="btn btn-primary" (click)="onAddContainer()">添加容器</button>
-  <button type="button" class="btn btn-primary" (click)="openModal()">高级配置</button>
-  <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
-  <span style="color: red">单实例费用总计：{{totalFee | number:'1.2-2' }}元/月</span>
+  <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+  <button type="button" class="btn btn-primary" (click)="onAddContainer()">{{'BUTTON.ADD_CONTAINER' | translate}}</button>
+  <button type="button" class="btn btn-primary" (click)="openModal()">{{'BUTTON.ADVANCED_CONFIG' | translate}}</button>
+  <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
+  <span style="color: red">{{'TMP.PRICE_TOTAL' | translate}}{{totalFee | number:'1.2-2' }}{{'UNIT.PRICE' | translate}}</span>
 </div>
 <wayne-ace-editor (outputObj)="saveDaemonSet($event)"></wayne-ace-editor>
\ No newline at end of file
diff --git a/src/frontend/src/app/portal/daemonset/create-edit-daemonsettpl/create-edit-daemonsettpl.component.ts b/src/frontend/src/app/portal/daemonset/create-edit-daemonsettpl/create-edit-daemonsettpl.component.ts
index 363eb0e57..e44a3c21d 100644
--- a/src/frontend/src/app/portal/daemonset/create-edit-daemonsettpl/create-edit-daemonsettpl.component.ts
+++ b/src/frontend/src/app/portal/daemonset/create-edit-daemonsettpl/create-edit-daemonsettpl.component.ts
@@ -35,6 +35,7 @@ import {DaemonSetTplService} from '../../../shared/client/v1/daemonsettpl.servic
 import {defaultDaemonSet} from '../../../shared/default-models/daemonset.const';
 import {ResourceUnitConvertor} from '../../../shared/utils';
 import {ConfigMapEnvSource, EnvFromSource, SecretEnvSource} from '../../../shared/model/v1/kubernetes/deployment';
+import {TranslateService} from '@ngx-translate/core';
 
 const templateDom = [
   {
@@ -104,6 +105,7 @@ export class CreateEditDaemonSetTplComponent implements OnInit, AfterViewInit, O
               private route: ActivatedRoute,
               private messageHandlerService: MessageHandlerService,
               @Inject(DOCUMENT) private document: any,
+              public translate: TranslateService,
               private eventManager: EventManager
               ) {
 
@@ -228,7 +230,7 @@ export class CreateEditDaemonSetTplComponent implements OnInit, AfterViewInit, O
         let tpl = response[2];
         if (tpl) {
           this.daemonSetTpl = tpl.data;
-          // 克隆置空发布说明
+          
           this.daemonSetTpl.description = null;
           this.saveDaemonSet(JSON.parse(this.daemonSetTpl.template));
         }
diff --git a/src/frontend/src/app/portal/daemonset/daemonset.component.html b/src/frontend/src/app/portal/daemonset/daemonset.component.html
index 94fe44dfa..3bedcecd4 100644
--- a/src/frontend/src/app/portal/daemonset/daemonset.component.html
+++ b/src/frontend/src/app/portal/daemonset/daemonset.component.html
@@ -1,5 +1,5 @@
 <button (click)="createDaemonSet()" class="wayne-button primary" *ngIf="authService.currentAppPermission.daemonSet?.create || authService.currentUser.admin">
-  创建守护进程集
+  {{'DAEMONSET.CREATE' | translate}}
 </button>
 <create-edit-daemonset (create)="create($event)"></create-edit-daemonset>
 <div *ngIf="daemonSetId && daemonSets?.length>0">
@@ -16,32 +16,32 @@
   <div class="table-search">
     <div class="table-search-left">
       <button (click)="createDaemonSetTpl()" class="wayne-button normal" *ngIf="authService.currentAppPermission.daemonSet?.create || authService.currentUser.admin">
-        创建守护进程集模版
+        {{'DAEMONSET.CREATE_TMP' | translate}}
       </button>
       <button (click)="editDaemonSet()" class="wayne-button normal" *ngIf="authService.currentAppPermission.daemonSet?.update || authService.currentUser.admin">
-        编辑守护进程集
+        {{'DAEMONSET.EDIT' | translate}}
       </button>
       <button (click)="publishHistory()" class="wayne-button normal" *ngIf="authService.currentAppPermission.daemonSet?.read || authService.currentUser.admin">
-        发布历史
+        {{'BUTTON.HISTORY' | translate}}
       </button>
       <button (click)="deleteDaemonSet()" class="wayne-button normal" *ngIf="authService.currentAppPermission.daemonSet?.offline || authService.currentUser.admin">
-        删除守护进程集
+        {{'DAEMONSET.DELETE' | translate}}
       </button>
       <wayne-filter-box (confirm)="confirmEvent()" (cancel)="cancelEvent()">
         <wayne-checkbox-group [(ngModel)]="showList">
-          <wayne-checkbox>创建时间</wayne-checkbox>
-          <wayne-checkbox>版本</wayne-checkbox>
-          <wayne-checkbox>上线机房</wayne-checkbox>
-          <wayne-checkbox>发布说明</wayne-checkbox>
-          <wayne-checkbox>创建者</wayne-checkbox>
-          <wayne-checkbox>操作</wayne-checkbox>
+          <wayne-checkbox value="create_time">{{'TITLE.CREATE_TIME' | translate}}</wayne-checkbox>
+          <wayne-checkbox value="version">{{'TITLE.VERSION' | translate}}</wayne-checkbox>
+          <wayne-checkbox value="online_cluster">{{'TITLE.ONLINE_CLUSTER' | translate}}</wayne-checkbox>
+          <wayne-checkbox value="release_explain">{{'TITLE.RELEASE_EXPLAIN' | translate}}</wayne-checkbox>
+          <wayne-checkbox value="create_user">{{'TITLE.CREATE_USER' | translate}}</wayne-checkbox>
+          <wayne-checkbox value="action">{{'TITLE.ACTION' | translate}}</wayne-checkbox>
         </wayne-checkbox-group>
       </wayne-filter-box>
     </div>
     <div class="table-search-right">
       <div class="toggle-switch">
         <input type="checkbox" id="toggle_1" [(ngModel)]="isOnline" (change)="onlineChange()">
-        <label for="toggle_1">只显示上线模板</label>
+        <label for="toggle_1">{{'MESSAGE.ONLY_ONLINE_TEMPLATE' | translate}}</label>
       </div>
     </div>
   </div>
diff --git a/src/frontend/src/app/portal/daemonset/daemonset.component.ts b/src/frontend/src/app/portal/daemonset/daemonset.component.ts
index e25b1114f..df41771d6 100644
--- a/src/frontend/src/app/portal/daemonset/daemonset.component.ts
+++ b/src/frontend/src/app/portal/daemonset/daemonset.component.ts
@@ -28,14 +28,15 @@ import { CreateEditDaemonSetComponent } from './create-edit-daemonset/create-edi
 import { ListDaemonSetComponent } from './list-daemonset/list-daemonset.component';
 import {TabDragService} from '../../shared/client/v1/tab-drag.service';
 import {OrderItem} from '../../shared/model/v1/order';
+import {TranslateService} from '@ngx-translate/core';
 
 const showState = {
-  '创建时间': {hidden: false},
-  '版本': {hidden: false},
-  '上线机房': {hidden: false},
-  '发布说明': {hidden: false},
-  '创建者': {hidden: false},
-  '操作': {hidden: false}
+  'create_time': {hidden: false},
+  'version': {hidden: false},
+  'online_cluster': {hidden: false},
+  'release_explain': {hidden: false},
+  'create_user': {hidden: false},
+  'action': {hidden: false}
 };
 
 @Component({
@@ -80,6 +81,7 @@ export class DaemonSetComponent implements AfterContentInit, OnDestroy, OnInit {
                private el: ElementRef,
               private deletionDialogService: ConfirmationDialogService,
               private clusterService: ClusterService,
+              public translate: TranslateService,
               private messageHandlerService: MessageHandlerService) {
                 this.tabScription = this.tabDragService.tabDragOverObservable.subscribe(over => {
                   if (over) this.tabChange();
diff --git a/src/frontend/src/app/portal/daemonset/list-daemonset/list-daemonset.component.html b/src/frontend/src/app/portal/daemonset/list-daemonset/list-daemonset.component.html
index e80b58c0d..dc697af6d 100644
--- a/src/frontend/src/app/portal/daemonset/list-daemonset/list-daemonset.component.html
+++ b/src/frontend/src/app/portal/daemonset/list-daemonset/list-daemonset.component.html
@@ -6,35 +6,35 @@
     </ng-container>
   </clr-dg-column>
   <clr-dg-column [clrDgSortBy]="'createTime'" class="col-time">
-    <ng-container *clrDgHideableColumn="showState['创建时间']">
-      创建时间
+    <ng-container *clrDgHideableColumn="showState['create_time']">
+      {{'TITLE.CREATE_TIME' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column class="col-version">
-    <ng-container *clrDgHideableColumn="showState['版本']">
-      版本
+    <ng-container *clrDgHideableColumn="showState['version']">
+      {{'TITLE.VERSION' | translate}}
     </ng-container>
   </clr-dg-column>
   <!-- 防止事件图标换行-->
   <clr-dg-column class="col-cluster">
-    <ng-container *clrDgHideableColumn="showState['上线机房']">
+    <ng-container *clrDgHideableColumn="showState['online_cluster']">
       上线机房
     </ng-container>
   </clr-dg-column>
   <clr-dg-column [clrDgField]="'description'">
-    <ng-container *clrDgHideableColumn="showState['发布说明']">
-      发布说明
+    <ng-container *clrDgHideableColumn="showState['release_explain']">
+      {{'TITLE.RELEASE_EXPLAIN' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column [clrDgField]="'user'" class="col-user">
-    <ng-container *clrDgHideableColumn="showState['创建者']">
-      创建者
+    <ng-container *clrDgHideableColumn="showState['create_user']">
+      {{'TITLE.CREATE_USER' | translate}}
     </ng-container>
   </clr-dg-column>
   <!-- 防止操作图标换行-->
   <clr-dg-column style="min-width: 145px">
-    <ng-container *clrDgHideableColumn="showState['操作']">
-      操作
+    <ng-container *clrDgHideableColumn="showState['action']">
+      {{'TITLE.ACTION' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-row *ngFor="let daemonSetTpl of daemonSetTpls" [clrDgItem]="daemonSetTpl">
@@ -74,23 +74,23 @@
       <button class="wayne-button text"
          (click)="publishTpl(daemonSetTpl)"
          *ngIf="authService.currentAppPermission.daemonSet?.deploy || authService.currentUser.admin">
-         发布</button>
+         {{'BUTTON.RELEASE' | translate}}</button>
       <button class="wayne-button text"
          (click)="daemonSetTplDetail(daemonSetTpl)"
          *ngIf="authService.currentAppPermission.daemonSet?.read || authService.currentUser.admin">
-         详情</button>
+         {{'BUTTON.DETAIL' | translate}}</button>
       <button class="wayne-button text"
          (click)="cloneDaemonSetTpl(daemonSetTpl)"
          *ngIf="authService.currentAppPermission.daemonSet?.create || authService.currentUser.admin">
-         克隆</button>
+         {{'BUTTON.CLONE' | translate}}</button>
       <button class="wayne-button text"
          *ngIf="!daemonSetTpl.status && (authService.currentAppPermission.daemonSet?.delete || authService.currentUser.admin)"
          (click)="deleteDaemonSetTpl(daemonSetTpl)">
-         删除</button>
+         {{'BUTTON.DELETE' | translate}}</button>
       <button class="wayne-button text"
          (click)="offlineDaemonSet(daemonSetTpl)"
          *ngIf="daemonSetTpl.status && (authService.currentAppPermission.daemonSet?.offline || authService.currentUser.admin)">
-         下线</button>
+         {{'BUTTON.DROP' | translate}}</button>
     </clr-dg-cell>
   </clr-dg-row>
 
diff --git a/src/frontend/src/app/portal/daemonset/list-event/list-event.component.html b/src/frontend/src/app/portal/daemonset/list-event/list-event.component.html
index 1d34ebd51..0fc175d6d 100644
--- a/src/frontend/src/app/portal/daemonset/list-event/list-event.component.html
+++ b/src/frontend/src/app/portal/daemonset/list-event/list-event.component.html
@@ -3,7 +3,7 @@ <h3 class="modal-title">错误事件</h3>
   <div class="modal-body">
     <hr>
     <clr-datagrid>
-      <clr-dg-placeholder>暂无数据！</clr-dg-placeholder>
+      <clr-dg-placeholder>{{'MESSAGE.NO_MESSAGE' | translate}}</clr-dg-placeholder>
       <clr-dg-column>
         <ng-container *clrDgHideableColumn="{hidden: false}">
           名称
diff --git a/src/frontend/src/app/portal/daemonset/list-pod/list-pod.component.html b/src/frontend/src/app/portal/daemonset/list-pod/list-pod.component.html
index 1c4453477..56c918c36 100644
--- a/src/frontend/src/app/portal/daemonset/list-pod/list-pod.component.html
+++ b/src/frontend/src/app/portal/daemonset/list-pod/list-pod.component.html
@@ -9,7 +9,7 @@ <h3 class="modal-title">
         <label for="toggle_4">数据实时更新: </label>
     </div>
     <clr-datagrid>
-      <clr-dg-placeholder>暂无数据！</clr-dg-placeholder>
+      <clr-dg-placeholder>{{'MESSAGE.NO_MESSAGE' | translate}}</clr-dg-placeholder>
       <clr-dg-column [clrDgField]="'name'">
         <ng-container *clrDgHideableColumn="{hidden: false}">
           名称
@@ -42,7 +42,7 @@ <h3 class="modal-title">
       </clr-dg-column>
       <clr-dg-column>
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          操作
+          {{'TITLE.ACTION' | translate}}
         </ng-container>
       </clr-dg-column>
       <clr-dg-row *clrDgItems="let pod of pods">
@@ -60,7 +60,7 @@ <h3 class="modal-title">
         <clr-dg-cell>
           <button class="wayne-button text" (click)="enterContainer(pod)">进入容器</button>
           <button class="wayne-button text" (click)="podLog(pod)">日志</button>
-          <button class="wayne-button text" (click)="deletePod(pod)">删除</button>
+          <button class="wayne-button text" (click)="deletePod(pod)">{{'BUTTON.DELETE' | translate}}</button>
         </clr-dg-cell>
       </clr-dg-row>
       <clr-dg-footer>
diff --git a/src/frontend/src/app/portal/daemonset/publish-tpl/publish-tpl.component.html b/src/frontend/src/app/portal/daemonset/publish-tpl/publish-tpl.component.html
index c2ccc655c..fd6b7277a 100644
--- a/src/frontend/src/app/portal/daemonset/publish-tpl/publish-tpl.component.html
+++ b/src/frontend/src/app/portal/daemonset/publish-tpl/publish-tpl.component.html
@@ -4,7 +4,7 @@ <h3 class="modal-title">{{title}}</h3>
     <form #publishForm="ngForm">
       <section class="form-block">
         <div class="form-group" style="padding-left: 100px;">
-          <label class="col-md-3 form-group-label-override required">机房</label>
+          <label class="col-md-3 form-group-label-override required">{{'TITLE.CLUSTER' | translate}}</label>
           <div *ngFor="let cluster of clusters" style="padding-right: 15px" class="checkbox-inline"
                style="margin-top: 0px">
             <div class="checkbox">
@@ -17,10 +17,10 @@ <h3 class="modal-title">{{title}}</h3>
           </div>
         </div>
         <div *ngIf="actionType==3" class="form-group" style="padding-left: 135px;">
-          <label class="col-md-3 form-group-label-override">强制下线
+          <label class="col-md-3 form-group-label-override">{{'ACTION.FORCE_DROP' | translate}} 
             <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg">
               <clr-icon shape="info-circle" size="24"></clr-icon>
-              <span class="tooltip-content">确认资源已经不存在于Kubernetes，可以打开此开关强制下线</span>
+              <span class="tooltip-content">{{'MESSAGE.FORCE_DROP' | translate}} </span>
             </a>
           </label>
           <div class="toggle-switch" style="top: .25rem">
@@ -31,8 +31,8 @@ <h3 class="modal-title">{{title}}</h3>
       </section>
     </form>
     <div class="modal-footer">
-      <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-      <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">确定</button>
+      <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+      <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.CONFIRM' | translate}}</button>
     </div>
   </div>
 
diff --git a/src/frontend/src/app/portal/deployment/create-edit-deployment/create-edit-deployment.component.html b/src/frontend/src/app/portal/deployment/create-edit-deployment/create-edit-deployment.component.html
index c308c9e27..2e25106c5 100644
--- a/src/frontend/src/app/portal/deployment/create-edit-deployment/create-edit-deployment.component.html
+++ b/src/frontend/src/app/portal/deployment/create-edit-deployment/create-edit-deployment.component.html
@@ -4,7 +4,7 @@ <h3 class="modal-title">{{title}}</h3>
     <form #deploymentForm="ngForm" style="padding-right: 30px;width: 100%">
       <section class="form-block">
         <div class="form-group" style="padding-left: 135px;">
-          <label for="deployment_name" class="col-md-3 form-group-label-override required">名称</label>
+          <label for="deployment_name" class="col-md-3 form-group-label-override required">{{'TITLE.NAME' | translate}}</label>
           <label for="deployment_name" aria-haspopup="true" role="tooltip" [class.invalid]="!isNameValid"
                  class="tooltip tooltip-validation tooltip-md tooltip-bottom-left">
             <span *ngIf="app && actionType==0 && nameGenerateRuleConfig=='join'">{{app.name}}-</span>
@@ -14,19 +14,19 @@ <h3 class="modal-title">{{title}}</h3>
                    required
                    *ngIf="app && actionType==0"
                    [readonly]="actionType==1"
-                   placeholder="英文小写，中划线分隔"
+                   [placeholder]="'PLACEHOLDER.APP_NAME' | translate"
                    pattern="[a-z]([-a-z0-9]*[a-z0-9])?"
                    maxlength="64"
                    (keyup)='handleValidation()'>
             <span *ngIf="app && actionType==1">{{deployment.name}}</span>
             <span class="tooltip-content">
-              部署名称不符合规范，验证规则[a-z]([-a-z0-9]*[a-z0-9])?
+              {{'RULE.REGEXT' | translate}}[a-z]([-a-z0-9]*[a-z0-9])?
         </span>
           </label>
           <span class="spinner spinner-inline" [hidden]="!checkOnGoing"></span>
         </div>
         <div class="form-group" style="padding-left: 135px;">
-          <label class="col-md-3 form-group-label-override required">机房</label>
+          <label class="col-md-3 form-group-label-override required">{{'TITLE.CLUSTER' | translate}}</label>
           <div *ngFor="let cluster of clusters" class="checkbox-inline">
             <div class="checkbox">
               <input [(ngModel)]="clusterMetas[cluster.name].checked"
@@ -43,14 +43,14 @@ <h3 class="modal-title">{{title}}</h3>
                        name="{{cluster.name}}-replica"
                        type="number">
                 <span class="tooltip-content">
-                    部署份数超过系统最大限制{{replicaLimit}}
+                    {{'LIMIT.DEPLOYMENT' | translate}}{{replicaLimit}}
               </span>
               </label>
             </div>
           </div>
         </div>
         <div class="form-group" style="padding-left: 135px;">
-          <label for="deployment_description" class="col-md-3 form-group-label-override">描述</label>
+          <label for="deployment_description" class="col-md-3 form-group-label-override">{{'TITLE.DESCRIPTION' | translate}}</label>
           <textarea id="deployment_description" [(ngModel)]="deployment.description"
                     name="deployment_description"
                     rows="3">
@@ -58,107 +58,107 @@ <h3 class="modal-title">{{title}}</h3>
         </div>
         <div class="inline-flex-box" *ngIf="authService.currentUser.admin">
           <div class="form-group self-item">
-            <label for="cpuLimit" class="col-md-4 form-group-label-override">CPU限制</label>
+            <label for="cpuLimit" class="col-md-4 form-group-label-override">{{'LIMIT.CPU' | translate}}</label>
             <label for="cpuLimit"
                    aria-haspopup="true"
                    role="tooltip"
                    class="tooltip tooltip-validation tooltip-md"
             >
-              <input type="text" id="cpuLimit" placeholder="CPU限制"
+              <input type="text" id="cpuLimit" [placeholder]="'LIMIT.CPU' | translate"
                      name="cpuLimit"
                      type="number"
                      style="width: 110px;"
                      [(ngModel)]="resourcesMetas.cpuLimit"
                      #cpuLimit="ngModel">
               <span class="tooltip-content">
-                    请填写CPU限制.
+                    {{'MESSAGE.CPU' | translate}}
                 </span>
             </label>
-            <div class="percent-label">核</div>
+            <div class="percent-label">{{'UNIT.CORE' | translate}}</div>
           </div>
           <div class="form-group self-item">
-            <label for="cpuRequestLimitPercent" class="col-md-5 form-group-label-override">CPU限制百分比</label>
+            <label for="cpuRequestLimitPercent" class="col-md-5 form-group-label-override">{{'LIMIT.CPU_PERCENT' | translate}}</label>
             <label for="cpuRequestLimitPercent"
                    aria-haspopup="true"
                    role="tooltip"
                    class="tooltip tooltip-validation tooltip-md"
                    [class.invalid]="!resourcesValidation('cpuRequestLimitPercent') && cpuRequestLimitPercent.touched">
-              <input type="text" id="cpuRequestLimitPercent" placeholder="CPU限制百分比"
+              <input type="text" id="cpuRequestLimitPercent" [placeholder]="'LIMIT.CPU_PERCENT' | translate"
                      type="number"
                      style="width: 110px;"
                      name="cpuRequestLimitPercent"
                      [(ngModel)]="resourcesMetas.cpuRequestLimitPercent"
                      #cpuRequestLimitPercent="ngModel">
               <span class="tooltip-content">
-                    请填写正确CPU限制百分比.
+                    {{'MESSAGE.CPU_PERCENT' | translate}}
                 </span>
             </label>
             <div class="percent-label">%</div>
           </div>
           <div class="form-group self-item">
-            <label for="memoryLimit" class="col-md-5 form-group-label-override">内存限制</label>
+            <label for="memoryLimit" class="col-md-5 form-group-label-override">{{'LIMIT.MEMORY' | translate}}</label>
             <label for="memoryLimit"
                    aria-haspopup="true"
                    role="tooltip"
                    class="tooltip tooltip-validation tooltip-md"
             >
-              <input type="text" id="memoryLimit" placeholder="内存限制"
+              <input type="text" id="memoryLimit" [placeholder]="'LIMIT.MEMORY' | translate"
                      type="number"
                      name="memoryLimit"
                      style="width: 110px;"
                      [(ngModel)]="resourcesMetas.memoryLimit"
                      #memoryLimit="ngModel">
               <span class="tooltip-content">
-                    请填写内存限制份数.
+                    {{'MESSAGE.MEMORY' | translate}}
                 </span>
             </label>
             <div class="percent-label">G</div>
           </div>
           <div class="form-group self-item">
-            <label for="memoryRequestLimitPercent" class="col-md-5 form-group-label-override">内存限制百分比</label>
+            <label for="memoryRequestLimitPercent" class="col-md-5 form-group-label-override">{{'LIMIT.MEMORY_PERCENT' | translate}}</label>
             <label for="memoryRequestLimitPercent"
                    aria-haspopup="true"
                    role="tooltip"
                    class="tooltip tooltip-validation tooltip-md"
                    [class.invalid]="!resourcesValidation('memoryRequestLimitPercent') && memoryRequestLimitPercent.touched">
-              <input type="text" id="memoryRequestLimitPercent" placeholder="内存限制百分比"
+              <input type="text" id="memoryRequestLimitPercent" [placeholder]="'LIMIT.MEMORY_PERCENT' | translate"
                      style="width: 110px;"
                      type="number"
                      name="memoryRequestLimitPercent"
                      [(ngModel)]="resourcesMetas.memoryRequestLimitPercent"
                      #memoryRequestLimitPercent="ngModel">
               <span class="tooltip-content">
-                    请填写正确内存限制百分比.
+                    {{'MESSAGE.MEMORY_PERCENT' | translate}}
                 </span>
             </label>
             <div class="percent-label">%</div>
           </div>
           <div class="form-group self-item">
-            <label for="replicaLimit" class="col-md-5 form-group-label-override">副本数限制</label>
+            <label for="replicaLimit" class="col-md-5 form-group-label-override">{{'LIMIT.REPLICA' | translate}}</label>
             <label for="replicaLimit"
                    aria-haspopup="true"
                    role="tooltip"
                    class="tooltip tooltip-validation tooltip-md"
             >
-              <input type="text" id="replicaLimit" placeholder="副本数限制"
+              <input type="text" id="replicaLimit" [placeholder]="'LIMIT.REPLICA' | translate"
                      type="number"
                      name="replicaLimit"
                      style="width: 110px;"
                      [(ngModel)]="resourcesMetas.replicaLimit"
                      #replicaLimit="ngModel">
               <span class="tooltip-content">
-                    请填写副本数限制.
+                    {{'MESSAGE.REPLICA' |translate}}
                 </span>
             </label>
-            <div class="percent-label">份</div>
+            <div class="percent-label">{{'UNIT.PIECE' | translate}}</div>
           </div>
         </div>
       </section>
     </form>
   </div>
   <div class="modal-footer" style="padding-right: 5%">
-    <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+    <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.CONFIRM' | translate}}</button>
   </div>
 </clr-modal>
 
diff --git a/src/frontend/src/app/portal/deployment/create-edit-deployment/create-edit-deployment.component.ts b/src/frontend/src/app/portal/deployment/create-edit-deployment/create-edit-deployment.component.ts
index b13183796..557ee4c32 100644
--- a/src/frontend/src/app/portal/deployment/create-edit-deployment/create-edit-deployment.component.ts
+++ b/src/frontend/src/app/portal/deployment/create-edit-deployment/create-edit-deployment.component.ts
@@ -12,6 +12,7 @@ import {DeploymentService} from '../../../shared/client/v1/deployment.service';
 import {App} from '../../../shared/model/v1/app';
 import {AuthService} from '../../../shared/auth/auth.service';
 import {ApiNameGenerateRule} from '../../../shared/utils';
+import {TranslateService} from '@ngx-translate/core';
 
 @Component({
   selector: 'create-edit-deployment',
@@ -40,6 +41,7 @@ export class CreateEditDeploymentComponent implements OnInit {
 
   constructor(private deploymentService: DeploymentService,
               public authService: AuthService,
+              public translate: TranslateService,
               private messageHandlerService: MessageHandlerService) {
   }
 
diff --git a/src/frontend/src/app/portal/deployment/create-edit-deploymenttpl/create-edit-deploymenttpl.component.html b/src/frontend/src/app/portal/deployment/create-edit-deploymenttpl/create-edit-deploymenttpl.component.html
index 8de4aee8e..db5dd9a27 100644
--- a/src/frontend/src/app/portal/deployment/create-edit-deploymenttpl/create-edit-deploymenttpl.component.html
+++ b/src/frontend/src/app/portal/deployment/create-edit-deploymenttpl/create-edit-deploymenttpl.component.html
@@ -1,6 +1,8 @@
 <div class="row" style="padding-left: 50px; padding-right: 150px;">
   <div class="row flex-items-xs-between flex-items-xs-top" style="padding-left: 15px; padding-right: 15px;">
-    <h3 class="header-title" id="创建部署模版">创建部署模版</h3>
+    <h3 class="header-title" id="创建部署模版">
+      {{'DEPLOYMENT.CREATE_TMP' | translate}}
+    </h3>
   </div>
   <div style="position: fixed;right: 0;top: 100px; width: 200px; max-height: calc(100% - 160px);overflow-y: auto;">
     <wayne-navigation container=".content-area" [node]="naviList"></wayne-navigation>
@@ -8,54 +10,53 @@ <h3 class="header-title" id="创建部署模版">创建部署模版</h3>
   <form #ngForm="ngForm" style="padding-right: 30px;width: 100%">
     <section class="form-block wrap">
       <div>
-        <label class="label-level1" id="发布信息">发布信息</label>
+        <label class="label-level1" id="发布信息">{{'TMP.RELEASE_MESSAGE' | translate}}</label>
         <div class="form-group form-group-padding">
-          <label class="col-md-3 form-group-label-override required">发布说明</label>
+          <label class="col-md-3 form-group-label-override required">{{'TMP.RELEASE_EXPLAIN' | translate}}</label>
           <textarea name="deployment_description" [(ngModel)]="deploymentTpl.description" rows="3" style="width: 65%" required>
           </textarea>
-
         </div>
       </div>
     </section>
     <section class="form-block wrap">
       <div>
-        <label class="label-level1" id="更新策略">更新策略</label>
+        <label class="label-level1" id="更新策略">{{'TMP.UPDATE_STRATEGY' | translate}}</label>
         <div class="form-group form-group-padding">
-          <label class="col-md-3 form-group-label-override required">更新方式</label>
+          <label class="col-md-3 form-group-label-override required">{{'TMP.UPDATE_WAY' | translate}}</label>
           <div class="radio-inline">
               <input type="radio" name="statefulSetStrategyType" id="statefulSetStrategyType1" value="RollingUpdate" [(ngModel)]="kubeDeployment.spec.strategy.type" checked>
-              <label for="statefulSetStrategyType1">滚动更新</label>
+              <label for="statefulSetStrategyType1">{{'TMP.SCROLL_UPDATE' | translate}}</label>
           </div>
           <div class="radio-inline">
               <input type="radio" name="statefulSetStrategyType" id="statefulSetStrategyType2" value="Recreate"  [(ngModel)]="kubeDeployment.spec.strategy.type">
-              <label for="statefulSetStrategyType2">删除重建</label>
+              <label for="statefulSetStrategyType2">{{'TMP.REBUILD' | translate}}</label>
           </div>
         </div>
         <div *ngIf="kubeDeployment.spec.strategy.type == 'RollingUpdate'" class="form-group form-group-padding">
-          <label class="col-md-3 form-group-label-override">滚动数量
+          <label class="col-md-3 form-group-label-override">{{'TMP.SCROLL_NUM' | translate}}
             <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg">
               <clr-icon shape="info-circle" size="24"></clr-icon>
-              <span class="tooltip-content">滚动更新中最多可超过指定实例的总数量,数字或百分比</span>
+              <span class="tooltip-content">{{'RULE.SCROLL' | translate}}</span>
             </a>
           </label>
           <label aria-haspopup="true" role="tooltip" [class.invalid]="formValid('rollingUpdate_maxSurge')" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left">
           <input type="text" required name="rollingUpdate_maxSurge" pattern="^(100|[1-9]?\d(\.\d\d?\d?)?)%$|[0-9]$" [(ngModel)]="kubeDeployment.spec.strategy.rollingUpdate.maxSurge"
-                 placeholder="数字或百分比,例如1或20%">
+                 [placeholder]="'RULE.NUMBER' | translate">
             <span class="tooltip-content">
-                数量应为数字或百分比
+                {{'RULE.NUMBER' | translate}}
               </span>
           </label>
-          <label class="col-md-3 form-group-label-override"  style="color: #000">最大不可用
+          <label class="col-md-3 form-group-label-override"  style="color: #000">{{'TMP.MAX_LIMIT' | translate}}
             <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg">
               <clr-icon shape="info-circle" size="24"></clr-icon>
-              <span class="tooltip-content">滚动更新中最大不可用的实例数量,数字或百分比</span>
+              <span class="tooltip-content">{{'RULE.SCROLL' | translate}}</span>
             </a>
           </label>
         <label aria-haspopup="true" role="tooltip" [class.invalid]="formValid('rollingUpdate_maxUnavailable')" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left">
           <input type="text" required name="rollingUpdate_maxUnavailable"  [(ngModel)]="kubeDeployment.spec.strategy.rollingUpdate.maxUnavailable"
-                 placeholder="数字或百分比,例如1或20%">
+                 [placeholder]="'RULE.NUMBER' | translate">
           <span class="tooltip-content">
-                数量应为数字或百分比
+                {{"RULE.NUMBER" | translate}}
           </span>
         </label>
         </div>
@@ -63,204 +64,194 @@ <h3 class="header-title" id="创建部署模版">创建部署模版</h3>
     </section>
     <section *ngFor="let container of kubeDeployment.spec.template.spec.containers; let i = index" class="form-block wrap">
       <div>
-        <label class="label-level1" [id]="i ? '容器配置' + i : '容器配置'">容器配置
+        <label class="label-level1" [id]="i ? '容器配置' + i : '容器配置'">{{'TMP.CONTAINER_CONFIG' | translate}}
           <clr-icon (click)="onDeleteContainer(i)" shape="trash" title="删除容器" class="is-solid"></clr-icon>
         </label>
         <div class="container-box">
-          <label class="label-level2" [id]="i ? '镜像配置' + i : '镜像配置'">镜像配置</label>
+          <label class="label-level2" [id]="i ? '镜像配置' + i : '镜像配置'">{{'TMP.IMAGE_CONFIG' | translate}}</label>
           <div class="form-group form-group-padding">
-            <label class="col-md-3 form-group-label-override required">容器名称</label>
+            <label class="col-md-3 form-group-label-override required">{{'TMP.CONTAINER_NAME' | translate}}</label>
             <label aria-haspopup="true" role="tooltip" [class.invalid]="containerIsInvalid(i,'container.name_')" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left">
-              <input type="text" class="col-sm-12" size="90" required name="container.name_{{i}}" pattern="[a-z]([-a-z0-9]*[a-z0-9])?" [(ngModel)]="container.name" placeholder="英文，dns域名规则">
+              <input type="text" class="col-sm-12" size="90" required name="container.name_{{i}}" pattern="[a-z]([-a-z0-9]*[a-z0-9])?" [(ngModel)]="container.name" [placeholder]="'RULE.CONTAINER' | translate">
               <span class="tooltip-content">
-                容器名称不符合规范，验证规则[a-z]([-a-z0-9]*[a-z0-9])?
+                {{'RULE.REGEXT' | translate}}[a-z]([-a-z0-9]*[a-z0-9])?
               </span>
             </label>
           </div>
           <div class="form-group form-group-padding">
-            <label class="col-md-3 form-group-label-override required">镜像地址</label>
+            <label class="col-md-3 form-group-label-override required">{{'TMP.IMAGE_ADDRESS' | translate}}</label>
             <label aria-haspopup="true" role="tooltip" [class.invalid]="containerIsInvalid(i,'container.image_')" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left">
               <input type="text" size="90" class="col-sm-12" name="container.image_{{i}}" required pattern="{{getImagePrefixReg()}}" [(ngModel)]="container.image"
-                placeholder="镜像地址">
+                [placeholder]="'TMP.IMAGE_ADDRESS' | translate">
               <span class="tooltip-content">
-                镜像不符合校验规则 {{getImagePrefixReg()}}
+                {{'RULE.REGEXT' | translate}}{{getImagePrefixReg()}}
               </span>
             </label>
           </div>
           <div class="form-group form-group-padding">
-            <label class="col-md-3 form-group-label-override required">内存容量</label>
+            <label class="col-md-3 form-group-label-override required">{{'TMP.MEMORY_NUM' | translate}}</label>
             <label aria-haspopup="true" [class.invalid]="!checkMemory(container.resources.limits.memory)" style="padding-right: 0;margin-right: 0;padding-left: 0"
               role="tooltip" class="col-md-6 tooltip tooltip-validation tooltip-md tooltip-bottom-left">
               <input type="number" style="width:inherit" name="container.resources.limits.memory_{{i}}" required [(ngModel)]="container.resources.limits.memory"
-                placeholder="单位G">
-              <span class="tooltip-content">
-                内存大小应该在0~{{memoryLimit}}G之间
+                [placeholder]="'UNIT.MEMORY' | translate">
+              <span translate="'RULE.MEMORY'" [translateParams]="{value: memoryLimit}"  class="tooltip-content">
               </span>
             </label>
             <label class="col-md-4">G&nbsp;&nbsp;&nbsp;
-              <label style="color: red">金额: {{container.resources.limits.memory * memoryUnitPrice | number:'1.2-2'}}元/月</label>
+              <label style="color: red">price: {{container.resources.limits.memory * memoryUnitPrice | number:'1.2-2'}}{{'UNIT.PRICE' | translate}}</label>
             </label>
           </div>
           <div class="form-group form-group-padding">
-            <label class="col-md-3 form-group-label-override required">CPU核数</label>
+            <label class="col-md-3 form-group-label-override required">{{'TMP.CORE_NUM' | translate}}</label>
             <label aria-haspopup="true" [class.invalid]="!checkCpu(container.resources.limits.cpu)" style="padding-right: 0;margin-right: 0;padding-left: 0"
               role="tooltip" class="col-md-6 tooltip tooltip-validation tooltip-md tooltip-bottom-left">
               <input type="number" name="container.resources.limits.cpu_{{i}}" [(ngModel)]="container.resources.limits.cpu" style="width:inherit"
-                required placeholder="单位个">
-              <span class="tooltip-content">
-                CPU大小应该在0~{{cpuLimit}}核之间
+                required [placeholder]="'UNIT.CPU' | translate">
+              <span translate="'RULE.CPU'" translateParams="{value: cpuLimit}" class="tooltip-content">
               </span>
             </label>
-            <label class="col-md-4">核&nbsp;&nbsp;&nbsp;
-              <label style="color: red">金额: {{container.resources.limits.cpu * cpuUnitPrice | number:'1.2-2'}}元/月</label>
+            <label class="col-md-4">{{'UNIT.CORE' | translate}}&nbsp;&nbsp;&nbsp;
+              <label style="color: red">price: {{container.resources.limits.cpu * cpuUnitPrice | number:'1.2-2'}}{{'UNIT.PRICE' | translate}}</label>
             </label>
           </div>
 
         </div>
 
         <div class="container-box">
-          <label class="label-level2" [id]="i ? '环境变量配置' + i : '环境变量配置'">环境变量配置
-            <button (click)="onAddEnvFrom(i)" style="margin-left: 10px;" class="wayne-button primary"><clr-icon shape="add-text"></clr-icon>批量加载</button>
-             <button (click)="onAddEnv(i)" style="margin-left: 10px;" class="wayne-button primary"><clr-icon shape="add"></clr-icon>逐个加载</button>
+          <label class="label-level2" [id]="i ? '环境变量配置' + i : '环境变量配置'">{{'TMP.ENVIRONMENT_VAR' | translate}}
+            <button (click)="onAddEnvFrom(i)" style="margin-left: 10px;" class="wayne-button primary"><clr-icon shape="add-text"></clr-icon>{{'TMP.ADD_GROUP' | translate}}</button>
+             <button (click)="onAddEnv(i)" style="margin-left: 10px;" class="wayne-button primary"><clr-icon shape="add"></clr-icon>{{'TMP.ADD_ONE' | translate}}</button>
           </label>
           <div *ngFor="let envFrom of container.envFrom; let j = index">
             <div class="form-group form-group-padding">
-              <label for="envFromType-{{i}}-{{j}}" class="col-md-3 form-group-label-override required">批量加载
+              <label for="envFromType-{{i}}-{{j}}" class="col-md-3 form-group-label-override required">{{'TMP.LOAD_GROUP' | translate}}
                 <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-md">
                   <clr-icon shape="info-circle" size="24"></clr-icon>
-                  <span class="tooltip-content">批量从配置集或加密字典加载环境变量</span>
+                  <span class="tooltip-content">{{'TMP.LOAD_GROUP_MESSAGE' | translate}}</span>
                 </a>
               </label>
               <div class="select">
                 <select id="envFromType-{{i}}-{{j}}" name="envFrom.type_{{i}}_{{j}}" (change)="envFromChange($event.target.value,i,j)">
-                  <option value="1" [selected]="envFrom.configMapRef">从配置集加载</option>
-                  <option value="2" [selected]="envFrom.secretRef">从加密字典加载</option>
+                  <option value="1" [selected]="envFrom.configMapRef">{{'TMP.LOAD_CONFIGMAP' | translate}}</option>
+                  <option value="2" [selected]="envFrom.secretRef">{{'TMP.LOAD_SECRET' | translate}}</option>
                 </select>
               </div>
 
-              <clr-icon style="margin-top: 10px;margin-right: 8px" (click)="onAddEnvFrom(i)" shape="plus-circle" title="添加环境变量" class="is-solid"></clr-icon>
-              <clr-icon style="margin-top: 10px" (click)="onDeleteEnvFrom(i,j)" shape="trash" title="删除环境变量" class="is-solid"></clr-icon>
+              <clr-icon style="margin-top: 10px;margin-right: 8px" (click)="onAddEnvFrom(i)" shape="plus-circle" [title]="'TMP.ADD_ENVIRONMENT' | translate" class="is-solid"></clr-icon>
+              <clr-icon style="margin-top: 10px" (click)="onDeleteEnvFrom(i,j)" shape="trash" [title]="'TMP.DELETE_ENVIRONMENT' | translate" class="is-solid"></clr-icon>
             </div>
             <div *ngIf="envFrom" class="form-group form-group-padding">
-              <input type="text" size="40" name="envFrom.prefix_{{i}}_{{j}}" [(ngModel)]="envFrom.prefix" placeholder="为所有环境变量添加相同的前缀，可为空">
+              <input type="text" size="40" name="envFrom.prefix_{{i}}_{{j}}" [(ngModel)]="envFrom.prefix" [placeholder]="'PLACEHOLDER.ENVIRONMENT' | translate">
             </div>
             <div *ngIf="envFrom && envFrom.configMapRef" class="form-group form-group-padding">
               <input type="text" size="40" required name="envFrom.configMapRef.name_{{i}}_{{j}}" [(ngModel)]="envFrom.configMapRef.name"
-                placeholder="配置集名称">
+                [placeholder]="'TMP.CONFIGMAP_NAME' | translate">
             </div>
             <div *ngIf="envFrom && envFrom.secretRef" class="form-group form-group-padding">
               <input type="text" size="40" required name="envFrom.secretRef.name_{{i}}_{{j}}" [(ngModel)]="envFrom.secretRef.name"
-                placeholder="加密字典名称">
+                [placeholder]="'TMP.SECRET_NAME' | translate">
             </div>
 
           </div>
 
           <div *ngFor="let env of container.env; let j = index">
             <div class="form-group form-group-padding">
-              <label for="envType-{{i}}-{{j}}" class="col-md-3 form-group-label-override required">逐个加载
+              <label for="envType-{{i}}-{{j}}" class="col-md-3 form-group-label-override required">{{'TMP.ADD_ONE' | translate}}
                 <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-md">
                   <clr-icon shape="info-circle" size="24"></clr-icon>
-                  <span class="tooltip-content">其它类型的环境变量只支持高级模式编辑</span>
+                  <span class="tooltip-content">{{'TMP.SUPPORT_ENVIRONMENT_MESSAGE' | translate}}</span>
                 </a>
               </label>
               <div class="select">
                 <select id="envType-{{i}}-{{j}}" name="env.type_{{i}}_{{j}}" (change)="envChange($event.target.value,i,j)">
-                  <option value="0" [selected]="env.value!=null">自定义环境变量</option>
-                  <option value="1" [selected]="env.valueFrom?.configMapKeyRef">从配置集加载</option>
-                  <option value="2" [selected]="env.valueFrom?.secretKeyRef">从加密字典加载</option>
-                  <option value="3" selected>其它</option>
+                  <option value="0" [selected]="env.value!=null">{{'TMP.LOAD_ENVIRONMENT' | translate}}</option>
+                  <option value="1" [selected]="env.valueFrom?.configMapKeyRef">{{'TMP.LOAD_CONFIGMAP' | translate}}</option>
+                  <option value="2" [selected]="env.valueFrom?.secretKeyRef">{{'TMP.LOAD_SECRET' | translate}}</option>
+                  <option value="3" selected>{{'OTHER' | translate}}</option>
                 </select>
               </div>
-              <clr-icon style="margin-top: 10px;margin-right: 8px" (click)="onAddEnv(i)" shape="plus-circle" title="添加环境变量" class="is-solid"></clr-icon>
-              <clr-icon style="margin-top: 10px" (click)="onDeleteEnv(i,j)" shape="trash" title="删除环境变量" class="is-solid"></clr-icon>
+              <clr-icon style="margin-top: 10px;margin-right: 8px" (click)="onAddEnv(i)" shape="plus-circle" [title]="'TMP.ADD_ENVIRONMENT' | translate" class="is-solid"></clr-icon>
+              <clr-icon style="margin-top: 10px" (click)="onDeleteEnv(i,j)" shape="trash" [title]="'TMP.DELETE_ENVIRONMENT' | translate" class="is-solid"></clr-icon>
             </div>
             <div class="form-group form-group-padding">
-              <input [(ngModel)]="env.name" required name="env.name_{{i}}_{{j}}" type="text" size="45" placeholder="环境变量名称">
+              <input [(ngModel)]="env.name" required name="env.name_{{i}}_{{j}}" type="text" size="45" [placeholder]="'TMP.ENVIRONMENT_NAME' | translate">
             </div>
             <div *ngIf="env.value != null" class="form-group form-group-padding">
-              <input [(ngModel)]="env.value" required name="env.value_{{i}}_{{j}}" type="text" size="45" placeholder="环境变量值">
+              <input [(ngModel)]="env.value" required name="env.value_{{i}}_{{j}}" type="text" size="45" [placeholder]="'TMP.ENVIRONMENT_NUM' | translate">
             </div>
             <div *ngIf="env.valueFrom && env.valueFrom.configMapKeyRef" class="form-group form-group-padding">
               <input type="text" size="40" required name="env.valueFrom.configMapKeyRef.name_{{i}}_{{j}}" [(ngModel)]="env.valueFrom.configMapKeyRef.name"
-                placeholder="配置集名称">
+                [placeholder]="'TMP.CONFIGMAP_NAME' | translate">
               <input type="text" size="40" required name="env.valueFrom.configMapKeyRef.key_{{i}}_{{j}}" [(ngModel)]="env.valueFrom.configMapKeyRef.key"
-                placeholder="配置集key">
+                [placeholder]="'TMP.CONFIGMAP_KEY' | translate">
             </div>
             <div *ngIf="env.valueFrom && env.valueFrom.secretKeyRef" class="form-group form-group-padding">
               <input type="text" size="40" required name="env.valueFrom.secretKeyRef.name_{{i}}_{{j}}" [(ngModel)]="env.valueFrom.secretKeyRef.name"
-                placeholder="加密字典名称">
+                [placeholder]="'TMP.SECRET_NAME' | translate">
               <input type="text" size="40" required name="env.valueFrom.secretKeyRef.key_{{i}}_{{j}}" [(ngModel)]="env.valueFrom.secretKeyRef.key"
-                placeholder="加密字典key">
+                [placeholder]="'TMP.SECRET_KEY' | translate">
             </div>
-
           </div>
-
-
         </div>
 
         <div class="container-box">
           <div class="toggle-switch">
             <input type="checkbox" [checked]="container.readinessProbe" (change)="readinessProbeChange(i)" id="readinessProbe{{i}}">
-            <label class="label-level2" [id]="i ? '可用性检查' + i : '可用性检查'" for="readinessProbe{{i}}">可用性检查（建议开启）
+            <label class="label-level2" [id]="i ? '可用性检查' + i : '可用性检查'" for="readinessProbe{{i}}">{{'TMP.USABLE_CHECK' | translate}}
               <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg">
                 <clr-icon shape="info-circle" size="24"></clr-icon>
-                <span class="tooltip-content">定期检查服务状态，只有检查通过才会提供服务，检查失败将会从可用服务列表移除</span>
+                <span class="tooltip-content">{{'TMP.USABLE_MESSAGE' | translate}}</span>
               </a>
             </label>
           </div>
 
           <div *ngIf="container.readinessProbe" style="color:#000">
             <div class="form-group form-group-padding">
-              <label class="col-md-3 form-group-label-override">超时时间
+              <label class="col-md-3 form-group-label-override">{{'TMP.EXTEND_TIME' | translate}}
                 <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-sm">
                   <clr-icon shape="info-circle" size="24"></clr-icon>
-                  <span class="tooltip-content">单位秒，请求超时时间</span>
+                  <span class="tooltip-content">{{'TMP.EXTEND_TIME_MESSAGE' | translate}}</span>
                 </a>
               </label>
               <input type="number" required name="container.readinessProbe.timeoutSeconds_{{i}}" [(ngModel)]="container.readinessProbe.timeoutSeconds"
-                placeholder="单位秒">
-              <label class="col-md-3 form-group-label-override">检查周期
+                [placeholder]="'PLACEHOLDER.SECOND' | translate">
+              <label class="col-md-3 form-group-label-override">{{'TMP.CHECK_CYCLE' | translate}}
                 <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-sm">
                   <clr-icon shape="info-circle" size="24"></clr-icon>
-                  <span class="tooltip-content">单位秒，执行检查间隔</span>
+                  <span class="tooltip-content">{{'TMP.CHECK_CYCLE_MESSAGE' | translate}}</span>
                 </a>
               </label>
               <input type="number" required name="container.readinessProbe.periodSeconds{{i}}" [(ngModel)]="container.readinessProbe.periodSeconds"
-                placeholder="单位秒">
+                [placeholder]="'PLACEHOLDER.SECOND' | translate">
             </div>
             <div class="form-group form-group-padding">
-              <label class="col-md-3 form-group-label-override">失败重试次数</label>
+              <label class="col-md-3 form-group-label-override">{{'TMP.FAIL_NUM' | translate}}</label>
               <input type="number" required name="container.readinessProbe.failureThreshold{{i}}" [(ngModel)]="container.readinessProbe.failureThreshold">
             </div>
 
             <div class="form-group form-group-padding">
-              <label for="readinessProbeType_{{i}}" class="col-md-3 form-group-label-override required">可用性检查方式</label>
+              <label for="readinessProbeType_{{i}}" class="col-md-3 form-group-label-override required">{{'TMP.USABLE_CHECK_WAY' | translate}}</label>
               <div class="select">
                 <select name="readinessProbeType_{{i}}" (change)="readinessProbeTypeChange($event.target.value,i)">
-                  <option value="0" [selected]="container.readinessProbe.httpGet">HTTP请求</option>
-                  <option value="1" [selected]="container.readinessProbe.tcpSocket">TCP端口</option>
-                  <option value="2" [selected]="container.readinessProbe.exec">执行命令</option>
+                  <option value="0" [selected]="container.readinessProbe.httpGet">{{'TMP.HTTP_REQUEST' | translate}}</option>
+                  <option value="1" [selected]="container.readinessProbe.tcpSocket">{{'TMP.TCP_PORT' | translate}}</option>
+                  <option value="2" [selected]="container.readinessProbe.exec">{{'TMP.EXECUTE_COMMAND' | translate}}</option>
                 </select>
               </div>
             </div>
             <div *ngIf="container.readinessProbe.httpGet" class="form-group form-group-padding">
               <input type="number" size="30" required name="container.readinessProbe.httpGet.port_{{i}}" [(ngModel)]="container.readinessProbe.httpGet.port"
-                placeholder="请求HTTP端口">
+                [placeholder]="'TMP.REQUEST_HTTP_PORT' | translate">
               <input type="text" size="70" required name="container.readinessProbe.httpGet.path_{{i}}" [(ngModel)]="container.readinessProbe.httpGet.path"
-                placeholder="请求URL">
+                [placeholder]="'TMP.REQUEST_URL' | translate">
             </div>
             <div *ngIf="container.readinessProbe.tcpSocket" class="form-group form-group-padding">
               <input type="number" size="30" required name="container.readinessProbe.tcpSocket.port_{{i}}" [(ngModel)]="container.readinessProbe.tcpSocket.port"
-                placeholder="请求TCP端口">
+                [placeholder]="'TMP.REQUEST_TCP_PORT' | translate">
             </div>
             <div *ngIf="container.readinessProbe.exec">
               <div class="form-group form-group-padding">
-                <textarea name="container.readinessProbe.exec.command_{{i}}" [(ngModel)]="container.readinessProbe.exec.command[0]"  placeholder="多个命令换行输入，例如：
-                  /bin/healthz.sh
-                  --arg1
-                  foo
-                  --arg2
-                  bar"></textarea>
+                <textarea name="container.readinessProbe.exec.command_{{i}}" [(ngModel)]="container.readinessProbe.exec.command[0]"  [placeholder]="'PLACEHOLDER.CMOMAND' | translate"></textarea>
               </div>
 
 
@@ -271,74 +262,69 @@ <h3 class="header-title" id="创建部署模版">创建部署模版</h3>
         <div class="container-box">
           <div class="toggle-switch">
             <input type="checkbox" [checked]="container.livenessProbe" (change)="livenessProbeChange(i)" id="livenessProbe{{i}}">
-            <label class="label-level2" [id]="i ? '存活检查' + i : '存活检查'" for="livenessProbe{{i}}">存活检查
+            <label class="label-level2" [id]="i ? '存活检查' + i : '存活检查'" for="livenessProbe{{i}}">{{'TMP.LIVE_CHECK' | translate}}
               <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg">
                 <clr-icon shape="info-circle" size="24"></clr-icon>
-                <span class="tooltip-content">定期检查容器状态，检查失败将会重启容器（适用于可能假死并需要重启的服务）</span>
+                <span class="tooltip-content">{{'TMP.LIVE_CHECK_MESSAGE' | translate}}</span>
               </a>
             </label>
           </div>
 
           <div *ngIf="container.livenessProbe" style="color:#000">
             <div class="form-group form-group-padding">
-              <label class="col-md-3 form-group-label-override">超时时间
+              <label class="col-md-3 form-group-label-override">{{'TMP.EXTEND_TIME' | translate}}
                 <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-sm">
                   <clr-icon shape="info-circle" size="24"></clr-icon>
-                  <span class="tooltip-content">单位秒，请求超时时间</span>
+                  <span class="tooltip-content">{{'MESSAGE_EXTEND_TIME' | translate}}</span>
                 </a>
               </label>
               <input type="number" required name="container.livenessProbe.timeoutSeconds_{{i}}" [(ngModel)]="container.livenessProbe.timeoutSeconds"
-                placeholder="单位秒">
-              <label class="col-md-3 form-group-label-override">检查周期
+                [placeholder]="'PLACEHOLDER.SECOND' | translate">
+              <label class="col-md-3 form-group-label-override">{{'TMP.CHECK_CYCLE' | translate}}
                 <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-sm">
                   <clr-icon shape="info-circle" size="24"></clr-icon>
-                  <span class="tooltip-content">单位秒，执行检查间隔</span>
+                  <span class="tooltip-content">{{'TMP.CHECK_CYCLE_MESSAGE' | translate}}</span>
                 </a>
               </label>
               <input type="number" required name="container.livenessProbe.periodSeconds{{i}}" [(ngModel)]="container.livenessProbe.periodSeconds"
-                placeholder="单位秒">
+                [placeholder]="'PLACEHOLDER.SECOND' | translate">
             </div>
             <div class="form-group form-group-padding">
-              <label class="col-md-3 form-group-label-override">失败重试次数</label>
+              <label class="col-md-3 form-group-label-override">{{'TMP.FAIL_NUM' | translate}}</label>
               <input type="number" required name="container.livenessProbe.failureThreshold{{i}}" [(ngModel)]="container.livenessProbe.failureThreshold">
-              <label class="col-md-3 form-group-label-override">检查延迟
+              <label class="col-md-3 form-group-label-override">{{'TMP.CHECK_DELAY' | translate}}
                 <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-md">
                   <clr-icon shape="info-circle" size="24"></clr-icon>
-                  <span class="tooltip-content">单位秒，启动多久之后开始存活检查，适用于启动时间较长的服务</span>
+                  <span class="tooltip-content">{{'TMP.CHECK_DELAY_MESSAGE' | translate}}</span>
                 </a>
               </label>
               <input type="number" required name="container.livenessProbe.initialDelaySeconds{{i}}" [(ngModel)]="container.livenessProbe.initialDelaySeconds"
-                placeholder="单位秒">
+                [placeholder]="'PLACEHOLDER.SECOND' | translate">
             </div>
 
             <div class="form-group form-group-padding">
-              <label for="livenessProbeType_{{i}}" class="col-md-3 form-group-label-override required">可用性检查方式</label>
+              <label for="livenessProbeType_{{i}}" class="col-md-3 form-group-label-override required">{{'TMP.USABLE_CHECK_WAY' | translate}}</label>
               <div class="select">
                 <select name="livenessProbeType_{{i}}" (change)="livenessProbeTypeChange($event.target.value,i)">
-                  <option value="0" [selected]="container.livenessProbe.httpGet">HTTP请求</option>
-                  <option value="1" [selected]="container.livenessProbe.tcpSocket">TCP端口</option>
-                  <option value="2" [selected]="container.livenessProbe.exec">执行命令</option>
+                  <option value="0" [selected]="container.livenessProbe.httpGet">{{'TMP.HTTP_REQUEST' | translate}}</option>
+                  <option value="1" [selected]="container.livenessProbe.tcpSocket">{{'TMP.TCP_PORT' | translate}}</option>
+                  <option value="2" [selected]="container.livenessProbe.exec">{{'TMP.EXECUTE_COMMAND' | translate}}</option>
                 </select>
               </div>
             </div>
             <div *ngIf="container.livenessProbe.httpGet" class="form-group form-group-padding">
               <input type="number" size="30" required name="container.livenessProbe.httpGet.port_{{i}}" [(ngModel)]="container.livenessProbe.httpGet.port"
-                placeholder="请求HTTP端口">
+                [placeholder]="'TMP.REQUEST_HTTP_PORT' | translate">
               <input type="text" size="70" required name="container.livenessProbe.httpGet.path_{{i}}" [(ngModel)]="container.livenessProbe.httpGet.path"
-                placeholder="请求URL">
+                [placeholder]="'TMP.REQUEST_URL' | translate">
             </div>
             <div *ngIf="container.livenessProbe.tcpSocket" class="form-group form-group-padding">
               <input type="number" size="30" required name="container.livenessProbe.tcpSocket.port_{{i}}" [(ngModel)]="container.livenessProbe.tcpSocket.port"
-                placeholder="请求TCP端口">
+                [placeholder]="'TMP.REQUEST_TCP_PORT' | translate">
             </div>
             <div *ngIf="container.livenessProbe.exec">
               <div class="form-group form-group-padding">
-                <textarea name="container.livenessProbe.exec.command_{{i}}" [(ngModel)]="container.livenessProbe.exec.command[0]"  placeholder="多个命令换行输入，例如：
-                    /bin/healthz.sh
-                    --arg1
-                    foo
-                    --arg2
-                    bar"></textarea>
+                <textarea name="container.livenessProbe.exec.command_{{i}}" [(ngModel)]="container.livenessProbe.exec.command[0]"  [placeholder]="'PLACEHOLDER.COMMAND' | translate"></textarea>
               </div>
 
 
@@ -348,10 +334,10 @@ <h3 class="header-title" id="创建部署模版">创建部署模版</h3>
         <div class="container-box">
           <div class="toggle-switch">
             <input type="checkbox" [checked]="container.lifecycle"  id="lifecycle{{i}}" (change)="lifecycleChange(i)">
-            <label class="label-level2" [id]="i ? '生命周期' + i : '生命周期'" for="lifecycle{{i}}">生命周期
+            <label class="label-level2" [id]="i ? '生命周期' + i : '生命周期'" for="lifecycle{{i}}">{{'TMP.LIFE_CYCLE' | translate}}
               <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg">
                 <clr-icon shape="info-circle" size="24"></clr-icon>
-                <span class="tooltip-content">容器生命周期钩子，可以在postStart/preStop两个阶段定义额外的操作</span>
+                <span class="tooltip-content">{{'TMP.LIFE_CYCLE_MESSAGE' | translate}}</span>
               </a>
             </label>
           </div>
@@ -361,31 +347,26 @@ <h3 class="header-title" id="创建部署模版">创建部署模版</h3>
               <label for="lifecycleType_{{i}}" class="col-md-3 form-group-label-override required">postStart</label>
               <div class="select">
                 <select name="lifecycleType_{{i}}" (change)="lifecyclePostStartProbeTypeChange($event.target.value,i)">
-                  <option value="-1" [selected]="!container.lifecycle.postStart">不启用</option>
-                  <option value="0" [selected]="container.lifecycle.postStart && container.lifecycle.postStart.httpGet">HTTP请求</option>
-                  <option value="1" [selected]="container.lifecycle.postStart && container.lifecycle.postStart.tcpSocket">TCP端口</option>
-                  <option value="2" [selected]="container.lifecycle.postStart && container.lifecycle.postStart.exec">执行命令</option>
+                  <option value="-1" [selected]="!container.lifecycle.postStart">{{'TMP.NOT_USE' | translate}}</option>
+                  <option value="0" [selected]="container.lifecycle.postStart && container.lifecycle.postStart.httpGet">{{'TMP.HTTP_REQUEST' | translate}}</option>
+                  <option value="1" [selected]="container.lifecycle.postStart && container.lifecycle.postStart.tcpSocket">{{'TMP.TCP_PORT' | translate}}</option>
+                  <option value="2" [selected]="container.lifecycle.postStart && container.lifecycle.postStart.exec">{{'TMP.EXECUTE_COMMAND' | translate}}</option>
                 </select>
               </div>
             </div>
             <div *ngIf="container.lifecycle.postStart && container.lifecycle.postStart.httpGet" class="form-group form-group-padding">
               <input type="number" size="30" required name="container.lifecycle.postStart.httpGet.port_{{i}}" [(ngModel)]="container.lifecycle.postStart.httpGet.port"
-                placeholder="请求HTTP端口">
+                [placeholder]="'TMP.REQUEST_HTTP_PORT' | translate">
               <input type="text" size="70" required name="container.lifecycle.postStart.httpGet.path_{{i}}" [(ngModel)]="container.lifecycle.postStart.httpGet.path"
-                placeholder="请求URL">
+                [placeholder]="'TMP.REQUEST_URL' | translate">
             </div>
             <div *ngIf="container.lifecycle.postStart && container.lifecycle.postStart.tcpSocket" class="form-group form-group-padding">
               <input type="number" size="30" required name="container.lifecycle.postStart.tcpSocket.port_{{i}}" [(ngModel)]="container.lifecycle.postStart.tcpSocket.port"
-                placeholder="请求TCP端口">
+                [placeholder]="'TMP.REQUEST_TCP_PORT' | translate">
             </div>
             <div *ngIf="container.lifecycle.postStart && container.lifecycle.postStart.exec">
               <div class="form-group form-group-padding">
-                <textarea name="container.lifecycle.postStart.exec.command_{{i}}" [(ngModel)]="container.lifecycle.postStart.exec.command[0]"  placeholder="多个命令换行输入，例如：
-                    /bin/healthz.sh
-                    --arg1
-                    foo
-                    --arg2
-                    bar"></textarea>
+                <textarea name="container.lifecycle.postStart.exec.command_{{i}}" [(ngModel)]="container.lifecycle.postStart.exec.command[0]"  [placeholder]="'PLACEHOLDER.COMMAND' | translate"></textarea>
               </div>
             </div>
           </div>
@@ -394,46 +375,40 @@ <h3 class="header-title" id="创建部署模版">创建部署模版</h3>
               <label for="lifecycleType_{{i}}" class="col-md-3 form-group-label-override required">preStop</label>
               <div class="select">
                 <select name="lifecycleType_{{i}}" (change)="lifecyclePreStopProbeTypeChange($event.target.value,i)">
-                  <option value="-1" [selected]="!container.lifecycle.preStop">不启用</option>
-                  <option value="0" [selected]="container.lifecycle.preStop && container.lifecycle.preStop.httpGet">HTTP请求</option>
-                  <option value="1" [selected]="container.lifecycle.preStop && container.lifecycle.preStop.tcpSocket">TCP端口</option>
-                  <option value="2" [selected]="container.lifecycle.preStop && normalPreStopExecSelected(i)">执行命令</option>
-                  <option value="3" [selected]="container.lifecycle.preStop && safeExitSelected(i)">安全退出</option>
+                  <option value="-1" [selected]="!container.lifecycle.preStop">{{'TMP.NOT_USE' | translate}}</option>
+                  <option value="0" [selected]="container.lifecycle.preStop && container.lifecycle.preStop.httpGet">{{'TMP.HTTP_REQUEST' | translate}}</option>
+                  <option value="1" [selected]="container.lifecycle.preStop && container.lifecycle.preStop.tcpSocket">{{'TMP.TCP_PORT' | translate}}</option>
+                  <option value="2" [selected]="container.lifecycle.preStop && normalPreStopExecSelected(i)">{{'TMP.EXECUTE_COMMAND' | translate}}</option>
+                  <option value="3" [selected]="container.lifecycle.preStop && safeExitSelected(i)">{{'TMP.SAFE_QUIT' | translate}}</option>
                 </select>
               </div>
             </div>
             <div *ngIf="container.lifecycle.preStop && container.lifecycle.preStop.httpGet" class="form-group form-group-padding">
               <input type="number" size="30" required name="container.lifecycle.preStop.httpGet.port_{{i}}" [(ngModel)]="container.lifecycle.preStop.httpGet.port"
-                placeholder="请求HTTP端口">
+                [placeholder]="'TMP.REQUEST_HTTP_PORT' | translate">
               <input type="text" size="70" required name="container.lifecycle.preStop.httpGet.path_{{i}}" [(ngModel)]="container.lifecycle.preStop.httpGet.path"
-                placeholder="请求URL">
+                [placeholder]="'TMP.REQUEST_URL' | translate">
             </div>
             <div *ngIf="container.lifecycle.preStop && container.lifecycle.preStop.tcpSocket" class="form-group form-group-padding">
               <input type="number" size="30" required name="container.lifecycle.preStop.tcpSocket.port_{{i}}" [(ngModel)]="container.lifecycle.preStop.tcpSocket.port"
-                placeholder="请求TCP端口">
+                [placeholder]="'TMP.REQUEST_TCP_PORT' | translate">
             </div>
             <div *ngIf="container.lifecycle.preStop && normalPreStopExecSelected(i)">
               <div class="form-group form-group-padding">
-                <textarea name="container.lifecycle.preStop.exec.command_{{i}}" [(ngModel)]="container.lifecycle.preStop.exec.command[0]"  placeholder="多个命令换行输入，例如：
-                    /bin/healthz.sh
-                    --arg1
-                    foo
-                    --arg2
-                    bar"></textarea>
+                <textarea name="container.lifecycle.preStop.exec.command_{{i}}" [(ngModel)]="container.lifecycle.preStop.exec.command[0]"  [placeholder]="'PLACEHOLDER.COMMAND' | translate"></textarea>
               </div>
             </div>
           </div>
         </div>
-
       </div>
     </section>
   </form>
 </div>
 <div class="clr-wizard-footer-buttons tpl-bottom" [style.top.px]="top">
-  <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-  <button type="button" class="btn btn-primary" (click)="onAddContainer()">添加容器</button>
-  <button type="button" class="btn btn-primary" (click)="openModal()">高级配置</button>
-  <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
-  <span style="color: red">单实例费用总计：{{totalFee | number:'1.2-2' }}元/月</span>
+  <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+  <button type="button" class="btn btn-primary" (click)="onAddContainer()">{{'BUTTON.ADD_CONTAINER' | translate}}</button>
+  <button type="button" class="btn btn-primary" (click)="openModal()">{{'BUTTON.ADVANCED_CONFIG' | translate}}</button>
+  <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
+  <span style="color: red">{{'TMP.PRICE_TOTAL' | translate}}{{totalFee | number:'1.2-2' }}{{'UNIT.PRICE' | translate}}</span>
 </div>
 <wayne-ace-editor (outputObj)="saveDeployment($event)"></wayne-ace-editor>
diff --git a/src/frontend/src/app/portal/deployment/create-edit-deploymenttpl/create-edit-deploymenttpl.component.ts b/src/frontend/src/app/portal/deployment/create-edit-deploymenttpl/create-edit-deploymenttpl.component.ts
index 045b46bac..0976f6ef8 100644
--- a/src/frontend/src/app/portal/deployment/create-edit-deploymenttpl/create-edit-deploymenttpl.component.ts
+++ b/src/frontend/src/app/portal/deployment/create-edit-deploymenttpl/create-edit-deploymenttpl.component.ts
@@ -262,7 +262,7 @@ export class CreateEditDeploymentTplComponent implements OnInit, AfterViewInit,
         let tpl = response[2];
         if (tpl) {
           this.deploymentTpl = tpl.data;
-          // 克隆置空发布说明
+          
           this.deploymentTpl.description = null;
           this.saveDeployment(JSON.parse(this.deploymentTpl.template));
         }
diff --git a/src/frontend/src/app/portal/deployment/deployment.component.html b/src/frontend/src/app/portal/deployment/deployment.component.html
index 59ef1faa9..05c242db2 100644
--- a/src/frontend/src/app/portal/deployment/deployment.component.html
+++ b/src/frontend/src/app/portal/deployment/deployment.component.html
@@ -1,5 +1,5 @@
 <button (click)="createDeployment()" class="wayne-button primary" *ngIf="authService.currentAppPermission.deployment.create || authService.currentUser.admin">
-  创建部署
+  {{'DEPLOYMENT.CREATE' | translate}}
 </button>
 <create-edit-deployment (create)="create($event)"></create-edit-deployment>
 <div *ngIf="deploymentId && deployments?.length>0">
@@ -16,32 +16,32 @@
   <div class="table-search">
     <div class="table-search-left">
       <button class="wayne-button normal" (click)="createDeploymentTpl()" *ngIf="authService.currentAppPermission.deployment.create || authService.currentUser.admin">
-        创建模版
+        {{'DEPLOYMENT.CREATE_TMP' | translate}}
       </button>
       <button class="wayne-button normal" (click)="editDeployment()" *ngIf="authService.currentAppPermission.deployment.update || authService.currentUser.admin">
-        编辑部署
+        {{'DEPLOYMENT.EDIT' | translate}}
       </button>
       <button class="wayne-button normal" (click)="publishHistory()" *ngIf="authService.currentAppPermission.deployment.read || authService.currentUser.admin">
-        发布历史
+        {{'BUTTON.HISTORY' | translate}}
       </button>
       <button class="wayne-button normal" (click)="deleteDeployment()" *ngIf="authService.currentAppPermission.deployment.offline || authService.currentUser.admin">
-        删除部署
+        {{'DEPLOYMENT.DELETE' | translate}}
       </button>
       <wayne-filter-box (confirm)="confirmEvent()" (cancel)="cancelEvent()">
         <wayne-checkbox-group [(ngModel)]="showList">
-          <wayne-checkbox>创建时间</wayne-checkbox>
-          <wayne-checkbox>版本</wayne-checkbox>
-          <wayne-checkbox>上线机房</wayne-checkbox>
-          <wayne-checkbox>发布说明</wayne-checkbox>
-          <wayne-checkbox>创建者</wayne-checkbox>
-          <wayne-checkbox>操作</wayne-checkbox>
+          <wayne-checkbox value="create_time">{{'TITLE.CREATE_TIME' | translate}}</wayne-checkbox>
+          <wayne-checkbox value="version">{{'TITLE.VERSION' | translate}}</wayne-checkbox>
+          <wayne-checkbox value="online_cluster">{{'TITLE.ONLINE_CLUSTER' | translate}}</wayne-checkbox>
+          <wayne-checkbox value="release_explain">{{'TITLE.RELEASE_EXPLAIN' | translate}}</wayne-checkbox>
+          <wayne-checkbox value="create_user">{{'TITLE.CREATE_USER' | translate}}</wayne-checkbox>
+          <wayne-checkbox value="action">{{'TITLE.ACTION' | translate}}</wayne-checkbox>
         </wayne-checkbox-group>
       </wayne-filter-box>
     </div>
     <div class="table-search-right">
       <div class="toggle-switch">
         <input type="checkbox" id="toggle_1" [(ngModel)]="isOnline" (change)="onlineChange()">
-        <label for="toggle_1">只显示上线模板</label>
+        <label for="toggle_1">{{'MESSAGE.ONLY_ONLINE_TEMPLATE' | translate}}</label>
       </div>
     </div>
   </div>
diff --git a/src/frontend/src/app/portal/deployment/deployment.component.ts b/src/frontend/src/app/portal/deployment/deployment.component.ts
index c4101616a..f112ed5ca 100644
--- a/src/frontend/src/app/portal/deployment/deployment.component.ts
+++ b/src/frontend/src/app/portal/deployment/deployment.component.ts
@@ -34,14 +34,15 @@ import {Subscription} from 'rxjs/Subscription';
 import {PageState} from '../../shared/page/page-state';
 import {TabDragService} from '../../shared/client/v1/tab-drag.service';
 import {OrderItem} from '../../shared/model/v1/order';
+import {TranslateService} from '@ngx-translate/core';
 
 const showState = {
-  '创建时间': {hidden: false},
-  '版本': {hidden: false},
-  '上线机房': {hidden: false},
-  '发布说明': {hidden: false},
-  '创建者': {hidden: false},
-  '操作': {hidden: false}
+  'create_time': {hidden: false},
+  'version': {hidden: false},
+  'online_cluster': {hidden: false},
+  'release_explain': {hidden: false},
+  'create_user': {hidden: false},
+  'action': {hidden: false}
 };
 
 @Component({
@@ -76,6 +77,7 @@ export class DeploymentComponent implements OnInit, OnDestroy {
               private deploymentTplService: DeploymentTplService,
               private deploymentClient: DeploymentClient,
               private route: ActivatedRoute,
+              public translate: TranslateService,
               private router: Router,
               private publishService: PublishService,
               public cacheService: CacheService,
diff --git a/src/frontend/src/app/portal/deployment/list-deployment/list-deployment.component.html b/src/frontend/src/app/portal/deployment/list-deployment/list-deployment.component.html
index 06473b86d..94d2d7d95 100644
--- a/src/frontend/src/app/portal/deployment/list-deployment/list-deployment.component.html
+++ b/src/frontend/src/app/portal/deployment/list-deployment/list-deployment.component.html
@@ -1,40 +1,40 @@
 <clr-datagrid (clrDgRefresh)="refresh($event)" class="wayne-clr-datagrid">
-  <clr-dg-placeholder>暂无数据</clr-dg-placeholder>
+  <clr-dg-placeholder>{{'MESSAGE.NO_MESSAGE' | translate}}</clr-dg-placeholder>
   <clr-dg-column [clrDgField]="'id'" class="col-id">
     <ng-container>
       ID
     </ng-container>
   </clr-dg-column>
   <clr-dg-column [clrDgSortBy]="'createTime'" class="col-time">
-    <ng-container *clrDgHideableColumn="showState['创建时间']">
-      创建时间
+    <ng-container *clrDgHideableColumn="showState['create_time']">
+      {{'TITLE.CREATE_TIME' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column class="col-version">
-    <ng-container *clrDgHideableColumn="showState['版本']">
-      版本
+    <ng-container *clrDgHideableColumn="showState['version']">
+      {{'TITLE.VERSION' | translate}}
     </ng-container>
   </clr-dg-column>
   <!-- 防止事件图标换行-->
   <clr-dg-column class="col-cluster">
-    <ng-container *clrDgHideableColumn="showState['上线机房']">
-      上线机房
+    <ng-container *clrDgHideableColumn="showState['online_cluster']">
+      {{'TITLE.ONLINE_CLUSTER' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column [clrDgField]="'description'" class="col-description">
-    <ng-container *clrDgHideableColumn="showState['发布说明']">
-      发布说明
+    <ng-container *clrDgHideableColumn="showState['release_explain']">
+      {{'TITLE.RELEASE' | translate}}{{'TITLE.EXPLAIN' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column [clrDgField]="'user'">
-    <ng-container *clrDgHideableColumn="showState['创建者']">
-      创建者
+    <ng-container *clrDgHideableColumn="showState['create_user']">
+      {{'TITLE.CREATE_USER' | translate}}
     </ng-container>
   </clr-dg-column>
   <!-- 防止操作图标换行-->
   <clr-dg-column class="col-operate">
-    <ng-container *clrDgHideableColumn="showState['操作']">
-      操作
+    <ng-container *clrDgHideableColumn="showState['action']">
+      {{'TITLE.ACTION' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-row *ngFor="let deploymentTpl of deploymentTpls" [clrDgItem]="deploymentTpl">
@@ -72,27 +72,27 @@
       <button class="wayne-button text"
          (click)="publishTpl(deploymentTpl)"
          *ngIf="authService.currentAppPermission.deployment.deploy || authService.currentUser.admin">
-         发布</button>
+         {{'BUTTON.RELEASE' | translate}}</button>
       <button class="wayne-button text"
          (click)="restartDeployment(deploymentTpl)"
          *ngIf="deploymentTpl.status && (authService.currentAppPermission.deployment.deploy || authService.currentUser.admin)">
-         重启</button>
+         {{'BUTTON.RESTART' | translate}}</button>
       <button class="wayne-button text"
          (click)="deploymentTplDetail(deploymentTpl)"
          *ngIf="authService.currentAppPermission.deployment.read || authService.currentUser.admin">
-         详情</button>
+         {{'BUTTON.DETAIL' | translate}}</button>
       <button class="wayne-button text"
          (click)="cloneDeploymentTpl(deploymentTpl)"
          *ngIf="authService.currentAppPermission.deployment.create || authService.currentUser.admin">
-         克隆</button>
+         {{'BUTTON.CLONE' | translate}}</button>
       <button class="wayne-button text"
          *ngIf="!deploymentTpl.status && (authService.currentAppPermission.deployment.delete || authService.currentUser.admin)"
          (click)="deleteDeploymentTpl(deploymentTpl)">
-         删除</button>
+         {{'BUTTON.DELETE' | translate}}</button>
       <button class="wayne-button text"
          (click)="offlineDeployment(deploymentTpl)"
          *ngIf="deploymentTpl.status && (authService.currentAppPermission.deployment.offline || authService.currentUser.admin)">
-         下线</button>
+         {{'BUTTON.DROP' | translate}}</button>
     </clr-dg-cell>
   </clr-dg-row>
 
diff --git a/src/frontend/src/app/portal/deployment/list-deployment/list-deployment.component.ts b/src/frontend/src/app/portal/deployment/list-deployment/list-deployment.component.ts
index e0bffa8d3..cd574b6f2 100644
--- a/src/frontend/src/app/portal/deployment/list-deployment/list-deployment.component.ts
+++ b/src/frontend/src/app/portal/deployment/list-deployment/list-deployment.component.ts
@@ -23,6 +23,7 @@ import {ActivatedRoute, Router} from '@angular/router';
 import {Page} from '../../../shared/page/page-state';
 import {AceEditorService} from '../../../shared/ace-editor/ace-editor.service';
 import {AceEditorMsg} from '../../../shared/ace-editor/ace-editor';
+import {TranslateService} from '@ngx-translate/core';
 
 @Component({
   selector: 'list-deployment',
@@ -58,6 +59,7 @@ export class ListDeploymentComponent implements OnInit, OnDestroy {
               private router: Router,
               public authService: AuthService,
               private tplDetailService: TplDetailService,
+              private translate: TranslateService,
               private messageHandlerService: MessageHandlerService) {
     this.subscription = deletionDialogService.confirmationConfirm$.subscribe(message => {
       if (message &&
diff --git a/src/frontend/src/app/portal/deployment/list-event/list-event.component.html b/src/frontend/src/app/portal/deployment/list-event/list-event.component.html
index 36a54b5cc..8a8955a7e 100644
--- a/src/frontend/src/app/portal/deployment/list-event/list-event.component.html
+++ b/src/frontend/src/app/portal/deployment/list-event/list-event.component.html
@@ -3,7 +3,7 @@ <h3 class="modal-title">错误事件</h3>
   <div class="modal-body">
     <hr>
     <clr-datagrid>
-      <clr-dg-placeholder>暂无数据！</clr-dg-placeholder>
+      <clr-dg-placeholder>{{'MESSAGE.NO_MESSAGE' | translate}}</clr-dg-placeholder>
       <clr-dg-column>
         <ng-container *clrDgHideableColumn="{hidden: false}">
           名称
diff --git a/src/frontend/src/app/portal/deployment/list-pod/list-pod.component.html b/src/frontend/src/app/portal/deployment/list-pod/list-pod.component.html
index 55b77a439..14c5d9e2c 100644
--- a/src/frontend/src/app/portal/deployment/list-pod/list-pod.component.html
+++ b/src/frontend/src/app/portal/deployment/list-pod/list-pod.component.html
@@ -9,7 +9,7 @@ <h3 class="modal-title">
         <label for="toggle_4">数据实时更新: </label>
     </div>
     <clr-datagrid>
-      <clr-dg-placeholder>暂无数据！</clr-dg-placeholder>
+      <clr-dg-placeholder>{{'MESSAGE.NO_MESSAGE' | translate}}</clr-dg-placeholder>
       <clr-dg-column [clrDgField]="'name'">
         <ng-container *clrDgHideableColumn="{hidden: false}">
           名称
@@ -42,7 +42,7 @@ <h3 class="modal-title">
       </clr-dg-column>
       <clr-dg-column>
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          操作
+          {{'TITLE.ACTION' | translate}}
         </ng-container>
       </clr-dg-column>
       <clr-dg-row *clrDgItems="let pod of pods">
@@ -61,7 +61,7 @@ <h3 class="modal-title">
           <button class="wayne-button text" (click)="enterContainer(pod)">进入容器</button>
           <button *ngIf="logSource" class="wayne-button text" (click)="copyLogCommand(pod)">日志命令</button>
           <button class="wayne-button text" (click)="podLog(pod)">日志</button>
-          <button class="wayne-button text" (click)="deletePod(pod)">删除</button>
+          <button class="wayne-button text" (click)="deletePod(pod)">{{'BUTTON.DELETE' | translate}}</button>
         </clr-dg-cell>
       </clr-dg-row>
       <clr-dg-footer>
diff --git a/src/frontend/src/app/portal/deployment/publish-tpl/publish-tpl.component.html b/src/frontend/src/app/portal/deployment/publish-tpl/publish-tpl.component.html
index cbe786e97..0a5374d89 100644
--- a/src/frontend/src/app/portal/deployment/publish-tpl/publish-tpl.component.html
+++ b/src/frontend/src/app/portal/deployment/publish-tpl/publish-tpl.component.html
@@ -4,7 +4,7 @@ <h3 class="modal-title">{{title}}</h3>
     <form #publishForm="ngForm">
       <section class="form-block">
         <div class="form-group" style="padding-left: 100px;">
-          <label class="col-md-3 form-group-label-override required">机房</label>
+          <label class="col-md-3 form-group-label-override required">{{'TITLE.CLUSTER' | translate}}</label>
           <div *ngFor="let cluster of clusters;let i=index" class="checkbox-inline" style="margin-top: 0px">
             <div class="checkbox">
               <input [(ngModel)]="clusterMetas[cluster].checked"
@@ -33,10 +33,10 @@ <h3 class="modal-title">{{title}}</h3>
           </div>
         </div>
         <div *ngIf="actionType==3" class="form-group" style="padding-left: 135px;">
-          <label class="col-md-3 form-group-label-override">强制下线
+          <label class="col-md-3 form-group-label-override">{{'ACTION.FORCE_DROP' | translate}} 
             <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg">
               <clr-icon shape="info-circle" size="24"></clr-icon>
-              <span class="tooltip-content">确认资源已经不存在于Kubernetes，可以打开此开关强制下线</span>
+              <span class="tooltip-content">{{'MESSAGE.FORCE_DROP' | translate}} </span>
             </a>
           </label>
           <div class="toggle-switch" style="top: .25rem">
@@ -47,8 +47,8 @@ <h3 class="modal-title">{{title}}</h3>
       </section>
     </form>
     <div class="modal-footer">
-      <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-      <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">确定</button>
+      <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+      <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.CONFIRM' | translate}}</button>
     </div>
   </div>
 
diff --git a/src/frontend/src/app/portal/namespace-apikey/apikey.component.html b/src/frontend/src/app/portal/namespace-apikey/apikey.component.html
index 85f2271a6..081f2df4e 100644
--- a/src/frontend/src/app/portal/namespace-apikey/apikey.component.html
+++ b/src/frontend/src/app/portal/namespace-apikey/apikey.component.html
@@ -4,23 +4,23 @@
     <div class="row">
       <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
         <div class="row flex-items-xs-between flex-items-xs-top" style="padding-left: 15px; padding-right: 15px;">
-          <h2 class="header-title">APIKey列表</h2>
+          <h2 class="header-title">APIKey {{'TITLE.LIST' | translate}}</h2>
         </div>
         <div class="table-search">
           <div class="table-search-left">
             <button class="wayne-button normal" *ngIf="authService.currentNamespacePermission.apiKey.create || authService.currentUser.admin"
               (click)="openModal()">
-              创建APIKey
+              {{'ACTION.CREATE' | translate}} APIKey
             </button>
             <wayne-filter-box (confirm)="confirmEvent()" (cancel)="cancelEvent()">
               <wayne-checkbox-group [(ngModel)]="showList">
-                <wayne-checkbox>名称</wayne-checkbox>
-                <wayne-checkbox>角色</wayne-checkbox>
-                <wayne-checkbox>创建时间</wayne-checkbox>
-                <wayne-checkbox>过期时间</wayne-checkbox>
-                <wayne-checkbox>创建者</wayne-checkbox>
-                <wayne-checkbox>描述</wayne-checkbox>
-                <wayne-checkbox>操作</wayne-checkbox>
+                <wayne-checkbox value="name">{{'TITLE.NAME' | translate}}</wayne-checkbox>
+                <wayne-checkbox value="role">{{'TITLE.ROLE' | translate}}</wayne-checkbox>
+                <wayne-checkbox value="create_time">{{'TITLE.CREATE_TIME' | translate}}</wayne-checkbox>
+                <wayne-checkbox value="expire_time">{{'TITLE.EXPIRE_TIME' | translate}}</wayne-checkbox>
+                <wayne-checkbox value="create_user">{{'TITLE.CREATE_USER' | translate}}</wayne-checkbox>
+                <wayne-checkbox value="description">{{'TITLE.DESCRIPTION' | translate}}</wayne-checkbox>
+                <wayne-checkbox value="action">{{'TITLE.ACTION' | translate}}</wayne-checkbox>
               </wayne-checkbox-group>
             </wayne-filter-box>
           </div>
diff --git a/src/frontend/src/app/portal/namespace-apikey/apikey.component.ts b/src/frontend/src/app/portal/namespace-apikey/apikey.component.ts
index 3c10ae8ee..cd03b26d0 100644
--- a/src/frontend/src/app/portal/namespace-apikey/apikey.component.ts
+++ b/src/frontend/src/app/portal/namespace-apikey/apikey.component.ts
@@ -19,13 +19,13 @@ import {ApiKey} from '../../shared/model/v1/apikey';
 import {ApiKeyService} from '../../shared/client/v1/apikey.service';
 
 const showState = {
-  '名称': {hidden: false},
-  '角色': {hidden: false},
-  '创建时间': {hidden: false},
-  '过期时间': {hidden: false},
-  '创建者': {hidden: false},
-  '描述': {hidden: false},
-  '操作': {hidden: false}
+  'name': {hidden: false},
+  'role': {hidden: false},
+  'create_time': {hidden: false},
+  'expire_time': {hidden: false},
+  'create_user': {hidden: false},
+  'description': {hidden: false},
+  'action': {hidden: false}
 };
 
 @Component({
diff --git a/src/frontend/src/app/portal/namespace-apikey/create-edit-apikey/create-edit-apikey.component.html b/src/frontend/src/app/portal/namespace-apikey/create-edit-apikey/create-edit-apikey.component.html
index 4a2ed9925..e62215f8a 100644
--- a/src/frontend/src/app/portal/namespace-apikey/create-edit-apikey/create-edit-apikey.component.html
+++ b/src/frontend/src/app/portal/namespace-apikey/create-edit-apikey/create-edit-apikey.component.html
@@ -6,7 +6,7 @@ <h3 class="modal-title">{{title}}</h3>
       <section class="form-block">
         <div class="form-group row">
           <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
-            <label for="name" class="required">名称</label>
+            <label for="name" class="required">{{'TITLE.NAME' | translate}}</label>
           </div>
           <div class="col-lg-8 col-md-4 col-sm-12 col-xs-12">
             <input class="form-control"
@@ -50,7 +50,7 @@ <h3 class="modal-title">{{title}}</h3>
         </div>
         <div class="form-group row">
           <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
-            <label for="description">描述</label>
+            <label for="description">{{'TITLE.DESCRIPTION' | translate}}</label>
           </div>
           <div class="col-lg-8 col-md-4 col-sm-12 col-xs-12">
               <textarea class="form-control"
@@ -63,8 +63,8 @@ <h3 class="modal-title">{{title}}</h3>
         </div>
         <div class="modal-footer">
 
-          <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-          <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+          <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+          <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
         </div>
       </section>
     </form>
diff --git a/src/frontend/src/app/portal/namespace-apikey/list-apikey/list-apikey.component.html b/src/frontend/src/app/portal/namespace-apikey/list-apikey/list-apikey.component.html
index d569db106..ba02d7da5 100644
--- a/src/frontend/src/app/portal/namespace-apikey/list-apikey/list-apikey.component.html
+++ b/src/frontend/src/app/portal/namespace-apikey/list-apikey/list-apikey.component.html
@@ -3,25 +3,25 @@
     <ng-container>ID</ng-container>
   </clr-dg-column>
   <clr-dg-column [clrDgField]="'name'">
-    <ng-container  *clrDgHideableColumn="showState['名称']">名称</ng-container>
+    <ng-container  *clrDgHideableColumn="showState['name']">{{'TITLE.NAME' | translate}}</ng-container>
   </clr-dg-column>
   <clr-dg-column>
-    <ng-container  *clrDgHideableColumn="showState['角色']">角色</ng-container>
+    <ng-container  *clrDgHideableColumn="showState['role']">{{'TITLE.ROLE' | translate}}</ng-container>
   </clr-dg-column>
   <clr-dg-column class="col-time">
-    <ng-container  *clrDgHideableColumn="showState['创建时间']">创建时间</ng-container>
+    <ng-container  *clrDgHideableColumn="showState['create_time']">{{'TITLE.CREATE_TIME' | translate}}</ng-container>
   </clr-dg-column>
   <clr-dg-column>
-    <ng-container  *clrDgHideableColumn="showState['过期时间']">过期时间(s)</ng-container>
+    <ng-container  *clrDgHideableColumn="showState['expire_time']">{{'TITLE.EXPIRE_TIME' | translate}}(s)</ng-container>
   </clr-dg-column>
   <clr-dg-column class="col-user">
-    <ng-container  *clrDgHideableColumn="showState['创建者']">创建者</ng-container>
+    <ng-container  *clrDgHideableColumn="showState['create_user']">{{'TITLE.CREATE_USER' | translate}}</ng-container>
   </clr-dg-column>
   <clr-dg-column>
-    <ng-container  *clrDgHideableColumn="showState['描述']">描述</ng-container>
+    <ng-container  *clrDgHideableColumn="showState['description']">{{'TITLE.DESCRIPTION' | translate}}</ng-container>
   </clr-dg-column>
   <clr-dg-column class="col-operate">
-    <ng-container  *clrDgHideableColumn="showState['操作']">操作</ng-container>
+    <ng-container  *clrDgHideableColumn="showState['action']">{{'TITLE.ACTION' | translate}}</ng-container>
   </clr-dg-column>
 
   <clr-dg-row *ngFor="let apiKey of apiKeys" [clrDgItem]="apiKey">
@@ -29,12 +29,12 @@
     <clr-dg-cell class="copy">{{apiKey.name}}</clr-dg-cell>
     <clr-dg-cell class="copy">{{apiKey.group?.name}}</clr-dg-cell>
     <clr-dg-cell class="col-time">{{apiKey.createTime | date:'yyyy-MM-dd HH:mm:ss'}}</clr-dg-cell>
-    <clr-dg-cell>{{apiKey.expireIn==0 ? "永久有效": apiKey.expireIn}}</clr-dg-cell>
+    <clr-dg-cell>{{apiKey.expireIn==0 ? "always available": apiKey.expireIn}}</clr-dg-cell>
     <clr-dg-cell class="col-user">{{apiKey.user}}</clr-dg-cell>
     <clr-dg-cell>{{apiKey.description}}</clr-dg-cell>
     <clr-dg-cell class="col-operate">
-      <button class="wayne-button text" *ngIf="authService.currentNamespacePermission.apiKey.read || authService.currentUser.admin"  (click)="tokenDetail(apiKey)">详情</button>
-      <button class="wayne-button text" *ngIf="authService.currentNamespacePermission.apiKey.delete || authService.currentUser.admin" (click)="deleteApiKey(apiKey)">删除</button>
+      <button class="wayne-button text" *ngIf="authService.currentNamespacePermission.apiKey.read || authService.currentUser.admin"  (click)="tokenDetail(apiKey)">{{'ACTION.DETAIL' | translate}}</button>
+      <button class="wayne-button text" *ngIf="authService.currentNamespacePermission.apiKey.delete || authService.currentUser.admin" (click)="deleteApiKey(apiKey)">{{'ACTION.DELETE' | translate}}</button>
     </clr-dg-cell>
   </clr-dg-row>
 
diff --git a/src/frontend/src/app/portal/namespace-apikey/list-apikey/list-apikey.component.ts b/src/frontend/src/app/portal/namespace-apikey/list-apikey/list-apikey.component.ts
index 4984788cc..6351aef8d 100644
--- a/src/frontend/src/app/portal/namespace-apikey/list-apikey/list-apikey.component.ts
+++ b/src/frontend/src/app/portal/namespace-apikey/list-apikey/list-apikey.component.ts
@@ -4,6 +4,7 @@ import {Page} from '../../../shared/page/page-state';
 import {ApiKey} from '../../../shared/model/v1/apikey';
 import {TokenDetailComponent} from '../token-detail/token-detail';
 import {AuthService} from '../../../shared/auth/auth.service';
+import {TranslateService} from '@ngx-translate/core';
 
 @Component({
   selector: 'list-apikey',
@@ -24,7 +25,10 @@ export class ListApiKeyComponent implements OnInit {
   @Output() delete = new EventEmitter<ApiKey>();
   @Output() edit = new EventEmitter<ApiKey>();
 
-  constructor(public authService: AuthService) {
+  constructor(
+    public authService: AuthService,
+    public translate: TranslateService
+    ) {
   }
 
   ngOnInit(): void {
diff --git a/src/frontend/src/app/portal/namespace-report/history/history.component.ts b/src/frontend/src/app/portal/namespace-report/history/history.component.ts
index a6a9d346e..55043fabb 100644
--- a/src/frontend/src/app/portal/namespace-report/history/history.component.ts
+++ b/src/frontend/src/app/portal/namespace-report/history/history.component.ts
@@ -17,6 +17,7 @@ import {
   KubeApiTypeService,
   KubeApiTypeStatefulSet
 } from '../../../shared/shared.const';
+import {TranslateService} from '@ngx-translate/core';
 
 @Component({
   selector: 'report-history',
@@ -28,14 +29,25 @@ export class HistoryComponent implements OnInit, AfterViewInit {
   @ViewChild('basic') elementBasicView;
   private basicOption: EChartOption;
   private basicChart: ECharts;
+  text: string;
+  subText: string;
+  dataDone: boolean;
   historys: any;
   constructor(private namespaceClient: NamespaceClient,
               private router: Router,
               private appService: AppService,
               public cacheService: CacheService,
               private messageHandlerService: MessageHandlerService,
+              public translate: TranslateService
   ) { }
   ngOnInit() {
+    this.translate.stream(['TITLE.DEPLOY_FREQ', 'TITLE.LATE_DAY'], {value: 90}).subscribe(
+      res => {
+        this.text = res['TITLE.DEPLOY_FREQ'];
+        this.subText = res['TITLE.LATE_DAY'];
+        if (this.dataDone) this.initHistoryOptions();
+      }
+    );
   }
 
   ngAfterViewInit(): void {
@@ -45,7 +57,6 @@ export class HistoryComponent implements OnInit, AfterViewInit {
       response => {
         this.historys = response.data;
         this.initHistoryOptions();
-        this.basicChart.setOption(this.basicOption);
       },
       error => this.messageHandlerService.handleError(error)
     );
@@ -53,6 +64,7 @@ export class HistoryComponent implements OnInit, AfterViewInit {
 
 
   initHistoryOptions() {
+    const _this = this;
     let data = [];
     for( let key in this.historys) {
       data.push({value: [ this.historys[key].date, this.historys[key].count]});
@@ -60,14 +72,14 @@ export class HistoryComponent implements OnInit, AfterViewInit {
     this.basicOption = <EChartOption>{
       title: {
         left: 'center',
-        text: '部署上线频数',
-        subtext: '最近 90 天'
+        text: this.text,
+        subtext: this.subText
       },
       tooltip : {
         trigger: 'axis',
         formatter: function (params) {
           params = params[0];
-          return new Date(params.value[0]).toLocaleDateString(['cn-CN'], { weekday: 'short', year: 'numeric', month: 'numeric', day: 'numeric' }) + '<br> 频数： ' + params.value[1];
+          return new Date(params.value[0]).toLocaleDateString([_this.translate.currentLang], { weekday: 'short', year: 'numeric', month: 'numeric', day: 'numeric' }) + '<br> Freq： ' + params.value[1];
         },
         axisPointer: {
           type : 'shadow',
@@ -99,5 +111,6 @@ export class HistoryComponent implements OnInit, AfterViewInit {
         barMaxWidth: 20,
       }]
     };
+    this.basicChart.setOption(this.basicOption);
   }
 }
diff --git a/src/frontend/src/app/portal/namespace-report/namespace-report.component.html b/src/frontend/src/app/portal/namespace-report/namespace-report.component.html
index 466b58951..4b8520123 100644
--- a/src/frontend/src/app/portal/namespace-report/namespace-report.component.html
+++ b/src/frontend/src/app/portal/namespace-report/namespace-report.component.html
@@ -3,25 +3,25 @@
     <div class="row">
       <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
         <div class="row flex-items-xs-between flex-items-xs-top" style="padding-left: 15px; padding-right: 15px;">
-          <h2 class="header-title">部门概览</h2>
+          <h2 class="header-title">{{'MENU.DEPARTMENT' | translate}}</h2>
         </div>
       </div>
     </div>
     <clr-tabs>
       <clr-tab>
-        <a clrTabLink>概览</a>
+        <a clrTabLink>{{'MENU.OVERVIEW' | translate}}</a>
         <clr-tab-content *clrIfActive="true">
           <overview></overview>
         </clr-tab-content>
       </clr-tab>
       <clr-tab>
-        <a clrTabLink>资源统计</a>
+        <a clrTabLink>{{'MENU.SOURCE_STAT' | translate}}</a>
         <clr-tab-content *clrIfActive>
           <report-resource></report-resource>
         </clr-tab-content>
       </clr-tab>
       <clr-tab>
-        <a clrTabLink>上线记录</a>
+        <a clrTabLink>{{'MENU.RELEASE_RECORD' | translate}}</a>
         <clr-tab-content *clrIfActive>
           <report-history></report-history>
         </clr-tab-content>
diff --git a/src/frontend/src/app/portal/namespace-report/namespace-report.component.ts b/src/frontend/src/app/portal/namespace-report/namespace-report.component.ts
index 61e13699b..53b020dad 100644
--- a/src/frontend/src/app/portal/namespace-report/namespace-report.component.ts
+++ b/src/frontend/src/app/portal/namespace-report/namespace-report.component.ts
@@ -9,7 +9,7 @@ import * as echarts from 'echarts';
 
 import {HistoryComponent} from './history/history.component';
 import {ResourceComponent} from './resource/resource.component';
-
+import {TranslateService} from '@ngx-translate/core';
 
 @Component({
   selector: 'wayne-namespace-report.content-container',
@@ -26,6 +26,7 @@ export class NamespaceReportComponent implements OnInit {
   constructor(private namespaceClient: NamespaceClient,
               public cacheService: CacheService,
               private messageHandlerService: MessageHandlerService,
+              public translate: TranslateService
   ) { }
   ngOnInit() {
     let namespaceId = this.cacheService.namespaceId;
diff --git a/src/frontend/src/app/portal/namespace-report/overview/overview.component.html b/src/frontend/src/app/portal/namespace-report/overview/overview.component.html
index 385ea223c..47b4075d2 100644
--- a/src/frontend/src/app/portal/namespace-report/overview/overview.component.html
+++ b/src/frontend/src/app/portal/namespace-report/overview/overview.component.html
@@ -4,7 +4,7 @@
       <section class="form-block form-box">
         <div class="row group">
           <div class="col-sm-2">
-            部门名称
+            {{'TITLE.DEPARTMENT_NAME' | translate}}
           </div>
           <div class="col-sm-10">
             {{cacheService?.namespace.name}}
@@ -12,7 +12,7 @@
         </div>
         <div class="row group">
           <div class="col-sm-2">
-            创建时间
+            {{'TITLE.CREATE_TIME' | translate}}
           </div>
           <div class="col-sm-10">
             {{cacheService?.namespace.createTime | date:'yyyy-MM-dd HH:mm:ss'}}
@@ -21,8 +21,8 @@
         <div class="row group">
           <div class="col-sm-2">
             <div class="flex" style="height:70px;flex-direction: column; justify-content:space-around;">
-              <span>CPU使用(核)</span>
-              <span>内存使用(G)</span>
+              <span>{{'TITLE.CPU_USAGE' | translate}}</span>
+              <span>{{'TITLE.MEMORY_USAGE' | translate}}</span>
             </div>
           </div>
           <div class="col-sm-10">
@@ -39,25 +39,25 @@
         </div>
         <div class="row group">
           <wayne-card class="wayne-card">
-            <div class="card-title">部署</div>
+            <div class="card-title">{{'MENU.DEPLOYMENT' | translate}}</div>
             <p class="card-text">
               {{resourceCount(deployment)}}
             </p>
           </wayne-card>
           <wayne-card class="wayne-card">
-            <div class="card-title">状态副本集</div>
+            <div class="card-title">{{'MENU.STATEFULSET' | translate}}</div>
             <p class="card-text">
               {{resourceCount(statefulSet)}}
             </p>
           </wayne-card>
           <wayne-card class="wayne-card">
-            <div class="card-title">守护进程集</div>
+            <div class="card-title">{{'MENU.DAEMONSET' | translate}}</div>
             <p class="card-text">
               {{resourceCount(daemonSet)}}
             </p>
           </wayne-card>
           <wayne-card class="wayne-card">
-            <div class="card-title">计划任务</div>
+            <div class="card-title">{{'MENU.CRONJOB' | translate}}</div>
             <p class="card-text">
               {{resourceCount(cronJob)}}
             </p>
@@ -65,19 +65,19 @@
         </div>
         <div class="row group">
           <wayne-card class="wayne-card">
-            <div class="card-title">负载均衡</div>
+            <div class="card-title">{{'MENU.SERVICE' | translate}}</div>
             <p class="card-text">
               {{resourceCount(service)}}
             </p>
           </wayne-card>
           <wayne-card class="wayne-card">
-            <div class="card-title">配置集</div>
+            <div class="card-title">{{'MENU.CONFIGMAP' | translate}}</div>
             <p class="card-text">
               {{resourceCount(configMap)}}
             </p>
           </wayne-card>
           <wayne-card class="wayne-card">
-            <div class="card-title">加密字典</div>
+            <div class="card-title">{{'MENU.SECRET' | translate}}</div>
             <p class="card-text">
               {{resourceCount(secret)}}
             </p>
diff --git a/src/frontend/src/app/portal/namespace-report/overview/overview.component.ts b/src/frontend/src/app/portal/namespace-report/overview/overview.component.ts
index b01c44c3c..70a59c424 100644
--- a/src/frontend/src/app/portal/namespace-report/overview/overview.component.ts
+++ b/src/frontend/src/app/portal/namespace-report/overview/overview.component.ts
@@ -14,6 +14,7 @@ import {
 } from '../../../shared/shared.const';
 import {Cluster} from '../../app/list-cluster/cluster';
 import {NamespaceClient} from '../../../shared/client/v1/kubernetes/namespace';
+import {TranslateService} from '@ngx-translate/core';
 
 @Component({
   selector: 'overview',
@@ -42,6 +43,7 @@ export class OverviewComponent implements OnInit {
               private element: ElementRef,
               private namespaceClient: NamespaceClient,
               private appService: AppService,
+              public translate: TranslateService,
               private messageHandlerService: MessageHandlerService) {
 
   }
diff --git a/src/frontend/src/app/portal/namespace-report/resource/resource.component.html b/src/frontend/src/app/portal/namespace-report/resource/resource.component.html
index 37035f714..4e77b6b8f 100644
--- a/src/frontend/src/app/portal/namespace-report/resource/resource.component.html
+++ b/src/frontend/src/app/portal/namespace-report/resource/resource.component.html
@@ -3,9 +3,9 @@
 <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12" #mem style="width: 400px;height:300px;margin-top: 2%;margin-left: 10%"></div>
 </div>
 <clr-datagrid>
-  <clr-dg-column [clrDgField]="'app'">项目</clr-dg-column>
-  <clr-dg-column [clrDgSortBy]="'cpu'">CPU（单位：核）</clr-dg-column>
-  <clr-dg-column [clrDgSortBy]="'memory'">内存（单位：G）</clr-dg-column>
+  <clr-dg-column [clrDgField]="'app'">{{'MENU.PRODUCT' | translate}}</clr-dg-column>
+  <clr-dg-column [clrDgSortBy]="'cpu'">{{'TITLE.CPU_USAGE' | translate}}</clr-dg-column>
+  <clr-dg-column [clrDgSortBy]="'memory'">{{'TITLE.MEMORY_USAGE' | translate}}</clr-dg-column>
   <clr-dg-row *clrDgItems="let rs of ResourceList">
       <clr-dg-cell>{{rs.app}}</clr-dg-cell>
       <clr-dg-cell>{{rs.cpu}}</clr-dg-cell>
diff --git a/src/frontend/src/app/portal/namespace-report/resource/resource.component.ts b/src/frontend/src/app/portal/namespace-report/resource/resource.component.ts
index 42011cd78..1fe3f0d4f 100644
--- a/src/frontend/src/app/portal/namespace-report/resource/resource.component.ts
+++ b/src/frontend/src/app/portal/namespace-report/resource/resource.component.ts
@@ -7,6 +7,7 @@ import {AppResource } from './resource';
 import ECharts = echarts.ECharts;
 import EChartOption = echarts.EChartOption;
 import * as echarts from 'echarts';
+import {TranslateService} from '@ngx-translate/core';
 
 @Component({
   selector: 'report-resource',
@@ -22,15 +23,29 @@ export class ResourceComponent implements OnInit, AfterViewInit {
   cpu_sum = 0;
   mem_sum = 0;
   ResourceList: AppResource[] = [];
+  otherName: string;
+  cpuName: string;
+  memName: string;
+  seriesName: string;
+  dataDone: boolean = false;
   private cpuOption: EChartOption;
   private memOption: EChartOption;
   private cpuChart: ECharts;
   private memChart: ECharts;
   constructor(private namespaceClient: NamespaceClient,
               public cacheService: CacheService,
+              public translate: TranslateService,
               private messageHandlerService: MessageHandlerService,
   ) { }
-  ngOnInit() { }
+  ngOnInit() {
+    this.translate.stream(['OTHER', 'TITLE.CPU_USAGE', 'TITLE.MEMORY_USAGE', 'MENU.PRODUCT']).subscribe(res => {
+      this.otherName = res['OTHER'];
+      this.cpuName = res['TITLE.CPU_USAGE'];
+      this.memName = res['TITLE.MEMORY_USAGE'];
+      this.seriesName = res['MENU.PRODUCT'];
+      if (this.dataDone) this.initOptions();
+    });
+  }
 
   ngAfterViewInit(): void {
     let namespaceId = this.cacheService.namespaceId;
@@ -38,6 +53,7 @@ export class ResourceComponent implements OnInit, AfterViewInit {
     this.memChart = echarts.init(this.elementMemView.nativeElement, 'macarons');
     this.namespaceClient.getResource(namespaceId).subscribe(
       response => {
+        this.dataDone = true;
         this.resources = response.data;
         this.ResourceList.push(...Object.keys(this.resources).map(app => {
             let rs = new AppResource();
@@ -49,8 +65,6 @@ export class ResourceComponent implements OnInit, AfterViewInit {
             return rs;
           }));
         this.initOptions();
-        this.cpuChart.setOption(this.cpuOption);
-        this.memChart.setOption(this.memOption);
       },
       error => this.messageHandlerService.handleError(error)
     );
@@ -69,17 +83,17 @@ export class ResourceComponent implements OnInit, AfterViewInit {
       cpu.push({value: this.ResourceList[i].cpu, name: this.ResourceList[i].app});
       cnt = cnt + this.ResourceList[i].cpu;
     }
-    app.push('其他');
-    cpu.push({name: '其他', value: this.cpu_sum - cnt});
+    app.push(this.otherName);
+    cpu.push({name: this.otherName, value: this.cpu_sum - cnt});
     this.cpuOption = {
       title : {
-        text: 'CPU 用量审计',
+        text: this.cpuName,
         subtext: 'top 5',
         left: 'center'
       },
       tooltip : {
         trigger: 'item',
-        formatter: '{a} <br/>{b} : {c} 核 ({d}%)'
+        formatter: '{a} <br/>{b} : {c} Core ({d}%)'
       },
       legend: {
         orient: 'vertical',
@@ -88,7 +102,7 @@ export class ResourceComponent implements OnInit, AfterViewInit {
       },
       series : [
         {
-          name: '项目',
+          name: this.seriesName,
           type: 'pie',
           radius : '55%',
           center: ['50%', '60%'],
@@ -116,12 +130,12 @@ export class ResourceComponent implements OnInit, AfterViewInit {
       mem.push({value: this.ResourceList[i].memory, name: this.ResourceList[i].app});
       cnt = cnt + this.ResourceList[i].memory;
     }
-    app.push('其他');
-    mem.push({name: '其他', value: this.mem_sum - cnt});
+    app.push(this.otherName);
+    mem.push({name: this.otherName, value: this.mem_sum - cnt});
 
     this.memOption = {
       title : {
-        text: '内存用量审计',
+        text: this.memName,
         subtext: 'top 5',
         left: 'center',
       },
@@ -136,7 +150,7 @@ export class ResourceComponent implements OnInit, AfterViewInit {
       },
       series : [
         {
-          name: '项目',
+          name: this.seriesName,
           type: 'pie',
           radius : '55%',
           center: ['50%', '60%'],
@@ -152,5 +166,7 @@ export class ResourceComponent implements OnInit, AfterViewInit {
       ],
       color: ['#4885ed', '#db3236', '#f4c20d', '#3cba54', '#4ad2ff', '#f6efa6']
     };
-  }
+    this.cpuChart.setOption(this.cpuOption);
+    this.memChart.setOption(this.memOption);
+  };
 }
diff --git a/src/frontend/src/app/portal/namespace-user/create-edit-namespace-user/create-edit-namespace-user.component.html b/src/frontend/src/app/portal/namespace-user/create-edit-namespace-user/create-edit-namespace-user.component.html
index 6931990b5..d860af39a 100644
--- a/src/frontend/src/app/portal/namespace-user/create-edit-namespace-user/create-edit-namespace-user.component.html
+++ b/src/frontend/src/app/portal/namespace-user/create-edit-namespace-user/create-edit-namespace-user.component.html
@@ -3,18 +3,8 @@ <h3 class="modal-title">{{namespaceUserTitle}}</h3>
   <div class="modal-body">
     <form #namespaceUserForm="ngForm">
       <section class="form-block">
-        <!-- <div class="form-group" style="padding-left: 135px;"> -->
-        <!--   <label for="namespace_user_id" class="col-md-3 form-group-label-override required">用户</label> -->
-        <!--   <div class="select form-control"> -->
-        <!--     <select id="namespace_user_id" [(ngModel)]="namespaceUser.user.id" [disabled]="actionType==1" name="namespace_user_id"> -->
-        <!--       <option *ngFor="let user of users" [ngValue]="user.id" [selected]="user.id == namespaceUser.user.id"> -->
-        <!--         {{user.name}} -->
-        <!--       </option> -->
-        <!--     </select> -->
-        <!--   </div> -->
-        <!-- </div> -->
         <div class="form-group" style="padding-left: 135px;">
-          <label for="name" class="col-md-3 form-group-label-override required">名称</label>
+          <label for="name" class="col-md-3 form-group-label-override required">{{'TITLE.NAME' | translate}}</label>
           <label for="name" aria-haspopup="true" role="tooltip" [class.invalid]="!isNameValid" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left form-control">
             <input class="form-control" type="text" id="namespace_user_name"  [(ngModel)]="namespaceUser.user.name"
                    name="name" size="32"
@@ -23,21 +13,21 @@ <h3 class="modal-title">{{namespaceUserTitle}}</h3>
                    maxlength="32"
                    (keyup)='handleValidation()'>
             <span class="tooltip-content">
-              用户不存在
+              {{'MESSAGE.NO_USER' | translate}}
             </span>
           </label>
           <span class="spinner spinner-inline" [hidden]="!checkOnGoing"></span>
         </div>
         <div class="form-group" style="padding-left: 135px;height:250px;">
-          <label for="namespace_user_group" class="col-md-3 form-group-label-override required">群组</label>
+          <label for="namespace_user_group" class="col-md-3 form-group-label-override required">{{'TITLE.GROUP' | translate}}</label>
           <label for="namespace_user_group" aria-haspopup="true" role="tooltip" [class.invalid]="!isNameValid"
                  class="tooltip tooltip-validation tooltip-md tooltip-bottom-left">
             <ng2-dual-list-box name="namespace_user_group"
                                [data]="allGroups"
                                valueField="id"
                                textField="name"
-                               availableText="可选项"
-                               selectedText="已选项"
+                               [availableText]="'TITLE.AVAIL_ITEM' | translate"
+                               [selectedText]="'TITLE.CHOOSED_ITEM' | translate"
                                [(ngModel)]="selectGroups"
             >
             </ng2-dual-list-box>
@@ -48,7 +38,7 @@ <h3 class="modal-title">{{namespaceUserTitle}}</h3>
     </form>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+    <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
   </div>
 </clr-modal>
diff --git a/src/frontend/src/app/portal/namespace-user/create-edit-namespace-user/create-edit-namespace-user.component.ts b/src/frontend/src/app/portal/namespace-user/create-edit-namespace-user/create-edit-namespace-user.component.ts
index 1894095fe..27c1275e9 100644
--- a/src/frontend/src/app/portal/namespace-user/create-edit-namespace-user/create-edit-namespace-user.component.ts
+++ b/src/frontend/src/app/portal/namespace-user/create-edit-namespace-user/create-edit-namespace-user.component.ts
@@ -14,6 +14,8 @@ import {NamespaceUserService} from '../../../shared/client/v1/namespace-user.ser
 import {Namespace} from '../../../shared/model/v1/namespace';
 import {groupType} from '../../../shared/shared.const';
 import {PageState} from '../../../shared/page/page-state';
+import {TranslateService} from '@ngx-translate/core';
+
 @Component({
   selector: 'create-edit-namespace-user',
   templateUrl: 'create-edit-namespace-user.component.html',
@@ -47,7 +49,8 @@ export class CreateEditNamespaceUserComponent {
       private userService: UserService,
       private groupService: GroupService,
       private namespaceUserService: NamespaceUserService,
-      private messageHandlerService: MessageHandlerService
+      private messageHandlerService: MessageHandlerService,
+      public translate: TranslateService
   ) {}
 
   ngOnInit(): void {
diff --git a/src/frontend/src/app/portal/namespace-user/list-namespace-user/list-namespace-user.component.html b/src/frontend/src/app/portal/namespace-user/list-namespace-user/list-namespace-user.component.html
index 4c9de5a3a..e5868b31b 100644
--- a/src/frontend/src/app/portal/namespace-user/list-namespace-user/list-namespace-user.component.html
+++ b/src/frontend/src/app/portal/namespace-user/list-namespace-user/list-namespace-user.component.html
@@ -5,30 +5,30 @@
     </ng-container>
   </clr-dg-column>
   <clr-dg-column [clrDgField]="'user.name'" *ngIf="listType === 'namespace'">
-    <ng-container *clrDgHideableColumn="showState['用户名称']">
-      用户名称
+    <ng-container *clrDgHideableColumn="showState['name']">
+      {{'TITLE.USER' | translate}}{{'TITLE.NAME' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column [clrDgField]="'namespace.name'" *ngIf="listType === 'user'">
-    <ng-container *clrDgHideableColumn="showState['命名空间名称']">
-      命名空间名称
+    <ng-container *clrDgHideableColumn="showState['namespace']">
+      {{'TITLE.NAMESPACE' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column>
-    <ng-container *clrDgHideableColumn="showState['所属群组']">
-      所属群组
+    <ng-container *clrDgHideableColumn="showState['group']">
+      {{'TITLE.GROUP' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column>
-    <ng-container *clrDgHideableColumn="showState['创建时间']">
-      创建时间
+    <ng-container *clrDgHideableColumn="showState['create_time']">
+      {{'TITLE.CREATE_TIME' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column
       *ngIf="authService.currentNamespacePermission.namespaceUser.update || authService.currentNamespacePermission.namespaceUser.delete ||  authService.currentUser.admin"
     >
-    <ng-container *clrDgHideableColumn="showState['操作']">
-      操作
+    <ng-container *clrDgHideableColumn="showState['action']">
+      {{'TITLE.ACTION' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-row *ngFor="let namespaceUser of namespaceUsers" [clrDgItem]="namespaceUser">
@@ -43,11 +43,11 @@
       <button class="wayne-button text"
         *ngIf="authService.currentNamespacePermission.namespaceUser.update || authService.currentUser.admin"
         (click)="editNamespaceUser(namespaceUser)">
-        编辑</button>
+        {{'BUTTON.EDIT' | translate}}</button>
       <button class="wayne-button text"
         *ngIf="authService.currentNamespacePermission.namespaceUser.delete || authService.currentUser.admin"
         (click)="deleteNamespaceUser(namespaceUser)">
-        删除</button>
+        {{'BUTTON.DELETE' | translate}}</button>
     </clr-dg-cell>
   </clr-dg-row>
 
diff --git a/src/frontend/src/app/portal/namespace-user/list-namespace-user/list-namespace-user.component.ts b/src/frontend/src/app/portal/namespace-user/list-namespace-user/list-namespace-user.component.ts
index 7df5cef33..12b57f189 100644
--- a/src/frontend/src/app/portal/namespace-user/list-namespace-user/list-namespace-user.component.ts
+++ b/src/frontend/src/app/portal/namespace-user/list-namespace-user/list-namespace-user.component.ts
@@ -4,7 +4,7 @@ import {State} from '@clr/angular';
 import {NamespaceUser} from '../../../shared/model/v1/namespace-user';
 import {AuthService} from '../../../shared/auth/auth.service';
 import {Page} from '../../../shared/page/page-state';
-
+import {TranslateService} from '@ngx-translate/core';
 @Component({
   selector: 'list-namespace-user',
   templateUrl: 'list-namespace-user.component.html',
@@ -24,7 +24,8 @@ export class ListNamespaceUserComponent implements OnInit {
 
   constructor(
     private router: Router,
-    public authService: AuthService
+    public authService: AuthService,
+    public translate: TranslateService
   ) {
   }
 
diff --git a/src/frontend/src/app/portal/namespace-user/namespace-user.component.html b/src/frontend/src/app/portal/namespace-user/namespace-user.component.html
index 7d8fecfd1..2572d29d6 100644
--- a/src/frontend/src/app/portal/namespace-user/namespace-user.component.html
+++ b/src/frontend/src/app/portal/namespace-user/namespace-user.component.html
@@ -3,21 +3,21 @@
     <div class="row">
       <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
         <div class="row flex-items-xs-between flex-items-xs-top" style="padding-left: 15px; padding-right: 15px;">
-          <h2 class="header-title">部门用户列表</h2>
+          <h2 class="header-title">{{'TITLE.MEMBER_LIST' | translate}}</h2>
         </div>
         <div class="table-search">
           <div class="table-search-left" *ngIf="authService.currentNamespacePermission.namespaceUser.create || authService.currentUser.admin">
               <button class="wayne-button normal" (click)="openModal()">
-                关联部门用户
+                {{'TITLE.MEMBER_CONTECT' | translate}}
               </button>
             <wayne-filter-box (confirm)="confirmEvent()" (cancel)="cancelEvent()">
               <wayne-checkbox-group [(ngModel)]="showList">
                 <wayne-checkbox>ID</wayne-checkbox>
-                <wayne-checkbox>用户名称</wayne-checkbox>
-                <wayne-checkbox>命名空间名称</wayne-checkbox>
-                <wayne-checkbox>所属群组</wayne-checkbox>
-                <wayne-checkbox>创建时间</wayne-checkbox>
-                <wayne-checkbox>操作</wayne-checkbox>
+                <wayne-checkbox value="name">{{'TITLE.NAME' | translate}}</wayne-checkbox>
+                <wayne-checkbox value="namespace">{{'TITLE.NAMESPACE' | translate}}{{'TITLE.NAME' | translate}}</wayne-checkbox>
+                <wayne-checkbox value="group">{{'TITLE.GROUP' | translate}}</wayne-checkbox>
+                <wayne-checkbox value="create_time">{{'TITLE.CREATE_TIME' | translate}}</wayne-checkbox>
+                <wayne-checkbox value="action">{{'TITLE.ACTION' | translate}}</wayne-checkbox>
               </wayne-checkbox-group>
             </wayne-filter-box>
           </div>
diff --git a/src/frontend/src/app/portal/namespace-user/namespace-user.component.ts b/src/frontend/src/app/portal/namespace-user/namespace-user.component.ts
index 30b92b578..fc594b66e 100644
--- a/src/frontend/src/app/portal/namespace-user/namespace-user.component.ts
+++ b/src/frontend/src/app/portal/namespace-user/namespace-user.component.ts
@@ -14,14 +14,15 @@ import {AuthService} from '../../shared/auth/auth.service';
 import {NamespaceUserService} from '../../shared/client/v1/namespace-user.service';
 import {CacheService} from '../../shared/auth/cache.service';
 import {PageState} from '../../shared/page/page-state';
+import {TranslateService} from '@ngx-translate/core';
 
 const showState = {
   'ID': {hidden: true},
-  '用户名称': {hidden: false},
-  '命名空间名称': {hidden: false},
-  '所属群组': {hidden: false},
-  '创建时间': {hidden: false},
-  '操作': {hidden: false}
+  'name': {hidden: false},
+  'namespace': {hidden: false},
+  'group': {hidden: false},
+  'create_time': {hidden: false},
+  'action': {hidden: false}
 };
 
 @Component({
@@ -52,6 +53,7 @@ export class NamespaceUserComponent implements OnInit {
               private messageHandlerService: MessageHandlerService,
               public authService: AuthService,
               private cacheService: CacheService,
+              public translate: TranslateService,
               private deletionDialogService: ConfirmationDialogService) {
     this.subscription = deletionDialogService.confirmationConfirm$.subscribe(message => {
       if (message &&
diff --git a/src/frontend/src/app/portal/namespace-webhook/create-edit-namespace-webhook/create-edit-namespace-webhook.component.html b/src/frontend/src/app/portal/namespace-webhook/create-edit-namespace-webhook/create-edit-namespace-webhook.component.html
index 117185075..41930b5ad 100644
--- a/src/frontend/src/app/portal/namespace-webhook/create-edit-namespace-webhook/create-edit-namespace-webhook.component.html
+++ b/src/frontend/src/app/portal/namespace-webhook/create-edit-namespace-webhook/create-edit-namespace-webhook.component.html
@@ -4,7 +4,7 @@ <h3 class="modal-title">{{webHookTitle}}</h3>
     <form #webHookForm="ngForm">
       <section class="form-block">
         <div class="form-group" style="padding-left: 135px;">
-          <label for="webhook-name" class="col-md-3 form-group-label-override required">名称</label>
+          <label for="webhook-name" class="col-md-3 form-group-label-override required">{{'TITLE.NAME' | translate}}</label>
           <label for="webhook-name" aria-haspopup="true" role="tooltip" [class.invalid]="!validateName()" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left form-control">
             <input class="form-control" type="text" id="webhook-name"  [(ngModel)]="webHook.name"
                    name="webhook-name"
@@ -60,7 +60,7 @@ <h3 class="modal-title">{{webHookTitle}}</h3>
     </form>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+    <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
   </div>
 </clr-modal>
diff --git a/src/frontend/src/app/portal/namespace-webhook/list-namespace-webhook/list-namespace-webhook.component.html b/src/frontend/src/app/portal/namespace-webhook/list-namespace-webhook/list-namespace-webhook.component.html
index 8912548e4..6a92132e9 100644
--- a/src/frontend/src/app/portal/namespace-webhook/list-namespace-webhook/list-namespace-webhook.component.html
+++ b/src/frontend/src/app/portal/namespace-webhook/list-namespace-webhook/list-namespace-webhook.component.html
@@ -5,8 +5,8 @@
     </ng-container>
   </clr-dg-column>
   <clr-dg-column [clrDgField]="'name'" style="min-width: 206px;">
-    <ng-container *clrDgHideableColumn="showState['名称']">
-      名称
+    <ng-container *clrDgHideableColumn="showState['name']">
+      {{'TITLE.NAME' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column>
@@ -15,18 +15,18 @@
     </ng-container>
   </clr-dg-column>
   <clr-dg-column>
-    <ng-container *clrDgHideableColumn="showState['启用状态']">
-      启用状态
+    <ng-container *clrDgHideableColumn="showState['status']">
+      {{'TITLE.STATUS' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column [clrDgField]="'user'">
-    <ng-container *clrDgHideableColumn="showState['创建用户']">
-      创建用户 
+    <ng-container *clrDgHideableColumn="showState['create_user']">
+      {{'TITLE.CREATE_USER' | translate}} 
     </ng-container>
   </clr-dg-column>
   <clr-dg-column>
-    <ng-container *clrDgHideableColumn="showState['创建时间']">
-      创建时间
+    <ng-container *clrDgHideableColumn="showState['create_time']">
+      {{'TITLE.CREATE_TIME' | translate}} 
     </ng-container>
   </clr-dg-column>
   <clr-dg-column
@@ -37,8 +37,8 @@
       authService.currentAppPermission.webHook.delete ||
       authService.currentUser.admin"
   >
-    <ng-container *clrDgHideableColumn="showState['操作']">
-      操作
+    <ng-container *clrDgHideableColumn="showState['action']">
+      {{'TITLE.ACTION' | translate}} 
     </ng-container>
   </clr-dg-column>
   <clr-dg-row *ngFor="let w of webHooks; let i = index" [clrDgItem]="webHook">
@@ -72,14 +72,14 @@
         authService.currentAppPermission.webHook.update ||
         authService.currentUser.admin"
         (click)="editWebhook(w)">
-        编辑</button>
+        {{'ACTION.EDIT' | translate}}</button>
       <button class="wayne-button text"
         *ngIf="
         authService.currentNamespacePermission.webHook.delete ||
         authService.currentAppPermission.webHook.delete ||
         authService.currentUser.admin"
         (click)="deleteWebhook(w)">
-        删除</button>
+        {{'ACTION.DELETE' | translate}}</button>
     </clr-dg-cell>
   </clr-dg-row>
 
diff --git a/src/frontend/src/app/portal/namespace-webhook/list-namespace-webhook/list-namespace-webhook.component.ts b/src/frontend/src/app/portal/namespace-webhook/list-namespace-webhook/list-namespace-webhook.component.ts
index b900ea329..74e333baf 100644
--- a/src/frontend/src/app/portal/namespace-webhook/list-namespace-webhook/list-namespace-webhook.component.ts
+++ b/src/frontend/src/app/portal/namespace-webhook/list-namespace-webhook/list-namespace-webhook.component.ts
@@ -4,6 +4,7 @@ import {ClrDatagridStateInterface} from '@clr/angular';
 import {WebHook} from '../../../shared/model/v1/webhook';
 import {AuthService} from '../../../shared/auth/auth.service';
 import {Page} from '../../../shared/page/page-state';
+import {TranslateService} from '@ngx-translate/core';
 
 @Component({
   selector: 'list-namespace-webhook',
@@ -24,7 +25,8 @@ export class ListNamespaceWebHookComponent implements OnInit {
 
   constructor(
     public authService: AuthService,
-    private router: Router
+    private router: Router,
+    public translate: TranslateService
   ) {
   }
 
diff --git a/src/frontend/src/app/portal/namespace-webhook/namespace-webhook.component.html b/src/frontend/src/app/portal/namespace-webhook/namespace-webhook.component.html
index ed2c3bac1..63208a54e 100644
--- a/src/frontend/src/app/portal/namespace-webhook/namespace-webhook.component.html
+++ b/src/frontend/src/app/portal/namespace-webhook/namespace-webhook.component.html
@@ -4,23 +4,23 @@
       <div class="row">
         <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
           <div class="row flex-items-xs-between flex-items-xs-top" style="padding-left: 15px; padding-right: 15px;">
-            <h2 class="header-title">{{ resourceLabel }}列表</h2>
+            <h2 class="header-title">{{ resourceLabel }} {{'TITLE.LIST' | translate}}</h2>
           </div>
           <div class="table-search">
             <div class="table-search-left">
               <button *ngIf="authService.currentNamespacePermission.webHook.create || authService.currentAppPermission.webHook.create || authService.currentUser.admin"
                 class="wayne-button normal" (click)="openModal()">
-                创建新的{{ resourceLabel }}
+                {{'ACTION.CREATE' | translate}} {{ resourceLabel }}
               </button>
               <wayne-filter-box (confirm)="confirmEvent()" (cancel)="cancelEvent()">
                 <wayne-checkbox-group [(ngModel)]="showList">
                   <wayne-checkbox>ID</wayne-checkbox>
-                  <wayne-checkbox>名称</wayne-checkbox>
+                  <wayne-checkbox value="name">{{'TITLE.NAME' | translate}}</wayne-checkbox>
                   <wayne-checkbox>URL</wayne-checkbox>
-                  <wayne-checkbox>启用状态</wayne-checkbox>
-                  <wayne-checkbox>创建用户</wayne-checkbox>
-                  <wayne-checkbox>创建时间</wayne-checkbox>
-                  <wayne-checkbox>操作</wayne-checkbox>
+                  <wayne-checkbox value="status">{{'TITLE.STATUS' | translate}}</wayne-checkbox>
+                  <wayne-checkbox value="create_user">{{'TITLE.CREATE_USER' | translate}}</wayne-checkbox>
+                  <wayne-checkbox value="create_time">{{'TITLE.CREATE_TIME' | translate}}</wayne-checkbox>
+                  <wayne-checkbox value="action">{{'TITLE.ACTION' | translate}}</wayne-checkbox>
                 </wayne-checkbox-group>
               </wayne-filter-box>
             </div>
diff --git a/src/frontend/src/app/portal/namespace-webhook/namespace-webhook.component.ts b/src/frontend/src/app/portal/namespace-webhook/namespace-webhook.component.ts
index 84ff8e7e5..019686095 100644
--- a/src/frontend/src/app/portal/namespace-webhook/namespace-webhook.component.ts
+++ b/src/frontend/src/app/portal/namespace-webhook/namespace-webhook.component.ts
@@ -14,15 +14,16 @@ import {WebHookService} from '../../shared/client/v1/webhook.service';
 import {AuthService} from '../../shared/auth/auth.service';
 import {CacheService} from '../../shared/auth/cache.service';
 import {PageState} from '../../shared/page/page-state';
+import {TranslateService} from '@ngx-translate/core';
 
 const showState = {
   'ID': {hidden: true},
-  '名称': {hidden: false},
+  'name': {hidden: false},
   'URL': {hidden: false},
-  '启用状态': {hidden: false},
-  '创建用户': {hidden: false},
-  '创建时间': {hidden: false},
-  '操作': {hidden: false}
+  'status': {hidden: false},
+  'create_user': {hidden: false},
+  'create_time': {hidden: false},
+  'action': {hidden: false}
 };
 
 @Component({
@@ -49,6 +50,7 @@ export class NamespaceWebHookComponent implements OnInit {
               private contextService: CacheService,
               private webHookService: WebHookService,
               private messageHandlerService: MessageHandlerService,
+              public translate: TranslateService,
               private deletionDialogService: ConfirmationDialogService) {
     this.subscription = deletionDialogService.confirmationConfirm$.subscribe(message => {
       if (message &&
diff --git a/src/frontend/src/app/portal/nav/nav.component.html b/src/frontend/src/app/portal/nav/nav.component.html
index e6b6927c4..c42bad81f 100644
--- a/src/frontend/src/app/portal/nav/nav.component.html
+++ b/src/frontend/src/app/portal/nav/nav.component.html
@@ -13,11 +13,21 @@
         <ng-container *ngIf="notificationLogs && notificationLogs.length > 0">
             <div *ngFor="let n of notificationLogs" href="javascript:void(0)"
               (click)="showNotification(n)" style="white-space: nowrap;">
-            <label class="label label-info"  [class.label-info]="n.is_readed" [class.label-warning]="!n.is_readed">{{n.is_readed? '已读':'未读'}}</label>
-            {{n.notification.from.name}} 广播了《{{n.notification.title}}》的{{n.notification.type}}
+            <label class="label label-info"  [class.label-info]="n.is_readed" [class.label-warning]="!n.is_readed">{{(n.is_readed ? 'MESSAGE.READED' : 'MESSAGE.UNREAD') | translate}}</label>
+            {{n.notification.from.name}} {{'MESSAGE.SEND' | translate}}《{{n.notification.title}}》{{'OF' | translate}}{{n.notification.type}}
           </div>
         </ng-container>
-        <span *ngIf="!notificationLogs || notificationLogs.length === 0">无通知</span>
+        <span *ngIf="!notificationLogs || notificationLogs.length === 0">{{'MESSAGE.NONE' | translate}}</span>
+      </wayne-dropdown-item>
+    </wayne-dropdown>
+    <wayne-dropdown size="small">
+      <clr-icon shape="world" style="margin-right: 5px"></clr-icon>
+      {{showLang(currentLang)}}
+      <clr-icon shape="caret down" size="12" style="margin-left: 5px;"></clr-icon>
+      <wayne-dropdown-item>
+        <ng-container *ngFor="let lang of translate.getLangs()">
+          <span (click)="changeLang(lang)">{{showLang(lang)}}</span>
+        </ng-container>
       </wayne-dropdown-item>
     </wayne-dropdown>
     <wayne-dropdown [size]="authService.currentUser?.namespaces.length > 10 ? 'middle' : 'small'">
@@ -33,8 +43,8 @@
         {{authService.currentUser?.display}}
         <clr-icon shape="caret down" size="12" style="margin-left: 5px;"></clr-icon>
         <wayne-dropdown-item>
-          <span (click)="goBack()" *ngIf="authService.currentUser.admin">进入后台</span>
-          <span (click)="logout()">注销登录</span>
+          <span (click)="goBack()" *ngIf="authService.currentUser.admin">{{'ACCOUNT.GO_BACK' | translate}}</span>
+          <span (click)="logout()">{{'ACCOUNT.LOGOUT' | translate}}</span>
         </wayne-dropdown-item>
     </wayne-dropdown>
   </div>
@@ -46,7 +56,7 @@
     <markdown [data]="notification.message"></markdown>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-primary" (click)="closeNotification()"> 确认 </button>
+    <button type="button" class="btn btn-primary" (click)="closeNotification()">{{'BUTTON.CONFIRM' | translate}}</button>
   </div>
 </clr-modal>
 
diff --git a/src/frontend/src/app/portal/nav/nav.component.ts b/src/frontend/src/app/portal/nav/nav.component.ts
index f9a22ccec..8ece9952f 100644
--- a/src/frontend/src/app/portal/nav/nav.component.ts
+++ b/src/frontend/src/app/portal/nav/nav.component.ts
@@ -9,6 +9,8 @@ import {Notification, NotificationLog} from '../../shared/model/v1/notification'
 import {PageState} from '../../shared/page/page-state';
 import {MessageHandlerService} from '../../shared/message-handler/message-handler.service';
 import {LoginTokenKey} from '../../shared/shared.const';
+import {TranslateService, LangChangeEvent} from '@ngx-translate/core';
+import {StorageService} from '../../shared/client/v1/storage.service';
 
 @Component({
   selector: 'wayne-nav',
@@ -22,6 +24,7 @@ export class NavComponent implements OnInit, OnDestroy {
   notificationModal = false;
   pageState: PageState = new PageState();
   mind = false;
+  currentLang: string;
 
 
   constructor(private router: Router,
@@ -30,17 +33,19 @@ export class NavComponent implements OnInit, OnDestroy {
               public cacheService: CacheService,
               private notificationService: NotificationService,
               private messageHandlerService: MessageHandlerService,
+              public translate: TranslateService,
+              private storage: StorageService,
               public authService: AuthService) {
-    // override the route reuse strategy
-    // this.router.routeReuseStrategy.shouldReuseRoute = function () {
-    //   return false;
-    // }
   }
 
   ngOnDestroy(): void {
   }
 
   ngOnInit() {
+    this.currentLang = this.translate.currentLang;
+    this.translate.onLangChange.subscribe((event:  LangChangeEvent) => {
+      this.currentLang = event.lang;
+    });
     this.namespace = this.cacheService.currentNamespace;
     let nid = this.route.snapshot.params['nid'];
     if (this.cacheService.currentNamespace && nid != this.cacheService.namespaceId) {
@@ -58,7 +63,6 @@ export class NavComponent implements OnInit, OnDestroy {
 
   switchNamespace(namespace: Namespace) {
     this.namespace = namespace;
-    // this.authService.setNamespacePermissionById(namespace.id);
     this.cacheService.setNamespace(namespace);
     this.hackNavigateReload(`/portal/namespace/${namespace.id}/app`);
   }
@@ -72,6 +76,19 @@ export class NavComponent implements OnInit, OnDestroy {
     if (window) window.location.href = '/admin/reportform/overview';
   }
 
+  showLang(lang: string): string {
+    switch(lang) {
+      case 'en': return 'English';
+      case 'zh-Hans': return '中文简体';
+      default: return '';
+    }
+  }
+
+  changeLang(lang: string) {
+    this.translate.use(lang);
+    this.storage.save('lang', lang);
+  }
+
   logout() {
     localStorage.removeItem(LoginTokenKey);
     this.router.navigateByUrl('/sign-in')
diff --git a/src/frontend/src/app/portal/persistentvolumeclaim/create-edit-persistentvolumeclaim/create-edit-persistentvolumeclaim.component.html b/src/frontend/src/app/portal/persistentvolumeclaim/create-edit-persistentvolumeclaim/create-edit-persistentvolumeclaim.component.html
index 6d6fef7f0..42dad839e 100644
--- a/src/frontend/src/app/portal/persistentvolumeclaim/create-edit-persistentvolumeclaim/create-edit-persistentvolumeclaim.component.html
+++ b/src/frontend/src/app/portal/persistentvolumeclaim/create-edit-persistentvolumeclaim/create-edit-persistentvolumeclaim.component.html
@@ -4,7 +4,7 @@ <h3 class="modal-title">{{title}}</h3>
     <form #ngForm="ngForm">
       <section class="form-block">
         <div class="form-group" style="padding-left: 135px;">
-          <label for="name" class="col-md-3 form-group-label-override required">名称</label>
+          <label for="name" class="col-md-3 form-group-label-override required">{{'TITLE.NAME' | translate}}</label>
           <label for="name"
                  aria-haspopup="true"
                  role="tooltip"
@@ -14,19 +14,19 @@ <h3 class="modal-title">{{title}}</h3>
             <input type="text" id="name"  [(ngModel)]="pvc.name"
                    name="name"
                    required
-                   placeholder="英文小写"
+                   [placeholder]="'PLACEHOLDER.ENGLISH_NAME' | translate"
                    [readonly]="actionType==1"
                    maxlength="64"
                    pattern="[a-z]([-a-z0-9]*[a-z0-9])?"
                    (keyup)='handleValidation()'>
             <span class="tooltip-content">
-              名称不符合规范，验证规则[a-z]([-a-z0-9]*[a-z0-9])?
+              {{'RULE.REGEXT' | translate}}[a-z]([-a-z0-9]*[a-z0-9])?
             </span>
           </label>
           <span class="spinner spinner-inline" [hidden]="!checkOnGoing"></span>
         </div>
         <div class="form-group" style="padding-left: 135px;">
-          <label for="description" class="col-md-3 form-group-label-override">描述</label>
+          <label for="description" class="col-md-3 form-group-label-override">{{'TITLE.DESCRIPTION' | translate}}</label>
           <textarea id="description" [(ngModel)]="pvc.description"
                     name="description"
                     rows="3">
@@ -36,7 +36,7 @@ <h3 class="modal-title">{{title}}</h3>
     </form>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+    <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
   </div>
 </clr-modal>
diff --git a/src/frontend/src/app/portal/persistentvolumeclaim/create-edit-persistentvolumeclaimtpl/create-edit-persistentvolumeclaimtpl.component.html b/src/frontend/src/app/portal/persistentvolumeclaim/create-edit-persistentvolumeclaimtpl/create-edit-persistentvolumeclaimtpl.component.html
index 8708421fe..da2665617 100644
--- a/src/frontend/src/app/portal/persistentvolumeclaim/create-edit-persistentvolumeclaimtpl/create-edit-persistentvolumeclaimtpl.component.html
+++ b/src/frontend/src/app/portal/persistentvolumeclaim/create-edit-persistentvolumeclaimtpl/create-edit-persistentvolumeclaimtpl.component.html
@@ -1,11 +1,11 @@
 <div class="row" style="padding-left: 5%;">
   <div class="row flex-items-xs-between flex-items-xs-top" style="padding-left: 15px; padding-right: 15px;">
-    <h3 class="header-title">创建PVC模版</h3>
+    <h3 class="header-title">{{'PVC.CREATE_TMP' | translate}}</h3>
   </div>
   <form [formGroup]="currentForm" style="padding-right: 30px;width: 100%">
     <section class="form-block wrap">
       <div *ngIf="clusters" formArrayName="clusters" class="form-group form-group-padding">
-        <label class="col-md-3 form-group-label-override required">机房</label>
+        <label class="col-md-3 form-group-label-override required">{{'TITLE.CLUSTER' | translate}}</label>
         <div *ngFor="let cluster of clusters;let i=index"
              style="padding-right: 15px" class="checkbox-inline"
              [formGroupName]="i">
@@ -16,7 +16,7 @@ <h3 class="header-title">创建PVC模版</h3>
         </div>
       </div>
       <div class="form-group form-group-padding">
-        <label class="col-md-3 form-group-label-override required">发布说明</label>
+        <label class="col-md-3 form-group-label-override required">{{'TMP.RELEASE_EXPLAIN' | translate}}</label>
         <textarea formControlName="description"
                   rows="3"
                   style="width: 65%"
@@ -24,15 +24,15 @@ <h3 class="header-title">创建PVC模版</h3>
         </textarea>
       </div>
       <div class="form-group form-group-padding">
-        <label class="col-md-3 form-group-label-override required">容量大小</label>
+        <label class="col-md-3 form-group-label-override required">{{'PVC.CONTAINER_NUM' | translate}}</label>
         <input type="number" style="width: 200px"
                required
                formControlName="storage"
-               placeholder="容量大小">
+               [placeholder]="'PVC.CONTAINER_NUM' | translate">
         <span style="padding-top: 2px">G</span>
       </div>
       <div class="form-group form-group-padding">
-        <label class="col-md-3 form-group-label-override required">访问模式</label>
+        <label class="col-md-3 form-group-label-override required">{{'PVC.ACCESS_PATTERN' | translate}}</label>
         <clr-checkbox [clrInline]="true" class="col-md-8"
                       formControlName="readWriteOnce">
           ReadWriteOnce
@@ -52,30 +52,30 @@ <h3 class="header-title">创建PVC模版</h3>
         <div *ngFor="let selector of selectors.controls; let i = index"
              [formGroupName]="i"
              class="form-group form-group-padding">
-          <label class="col-md-3 form-group-label-override required">关联标签</label>
+          <label class="col-md-3 form-group-label-override required">{{'PVC.ASSOCIATED_LABEL' | translate}}</label>
           <input type="text" style="width: 300px"
                  formControlName="key"
                  required
-                 placeholder="selector名称">
+                 [placeholder]="'PLACEHOLDER.SELECTOR_NAME' | translate">
           <input type="text" style="width: 300px"
                  formControlName="value"
                  required
-                 placeholder="selector值">
+                 [placeholder]="'PLACEHOLDER.SELECTOR_VALUE' | translate">
           <a href="javascript:void(0)">
             <clr-icon (click)="onDeleteSelector(i)"
-                      shape="trash" title="删除标签" class="is-solid clr-icon"></clr-icon>
+                      shape="trash" [title]="'PVC.DELETE_LABEL' | translate" class="is-solid clr-icon"></clr-icon>
           </a>
           <a href="javascript:void(0)">
             <clr-icon (click)="onAddSelector(i)"
-                      shape="plus-circle" title="添加标签" class="is-solid clr-icon"></clr-icon>
+                      shape="plus-circle" [title]="'PVC.ADD_LABEL' | translate" class="is-solid clr-icon"></clr-icon>
           </a>
         </div>
       </div>
     </section>
     <div class="clr-wizard-footer-buttons tpl-bottom" [style.top.px]="top">
-      <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-      <button type="button" class="btn btn-primary" (click)="openModal()">高级配置</button>
-      <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+      <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+      <button type="button" class="btn btn-primary" (click)="openModal()">{{'BUTTON.ADVANCED_CONFIG' | translate}}</button>
+      <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
     </div>
   </form>
 </div>
diff --git a/src/frontend/src/app/portal/persistentvolumeclaim/create-snapshot/create-snapshot.component.html b/src/frontend/src/app/portal/persistentvolumeclaim/create-snapshot/create-snapshot.component.html
index 8828d1dc8..e689358ec 100644
--- a/src/frontend/src/app/portal/persistentvolumeclaim/create-snapshot/create-snapshot.component.html
+++ b/src/frontend/src/app/portal/persistentvolumeclaim/create-snapshot/create-snapshot.component.html
@@ -1,5 +1,5 @@
 <clr-modal [(clrModalOpen)]="createAppOpened">
-  <h3 class="modal-title">创建存储快照</h3>
+  <h3 class="modal-title">{{'PVC.CREATE_STORAGE_SNAPSHOT' | translate}}</h3>
   <div class="modal-body">
     <form #snapForm="ngForm">
       <section class="form-block">
@@ -14,8 +14,8 @@ <h3 class="modal-title">创建存储快照</h3>
       </section>
     </form>
     <div class="modal-footer">
-      <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-      <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+      <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+      <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
     </div>
   </div>
 </clr-modal>
diff --git a/src/frontend/src/app/portal/persistentvolumeclaim/list-persistentvolumeclaim/list-persistentvolumeclaim.component.html b/src/frontend/src/app/portal/persistentvolumeclaim/list-persistentvolumeclaim/list-persistentvolumeclaim.component.html
index b499e4615..65f3c02c5 100644
--- a/src/frontend/src/app/portal/persistentvolumeclaim/list-persistentvolumeclaim/list-persistentvolumeclaim.component.html
+++ b/src/frontend/src/app/portal/persistentvolumeclaim/list-persistentvolumeclaim/list-persistentvolumeclaim.component.html
@@ -1,5 +1,5 @@
 <clr-datagrid (clrDgRefresh)="refresh($event)" class="wayne-clr-datagrid">
-  <clr-dg-placeholder>暂无数据！</clr-dg-placeholder>
+  <clr-dg-placeholder>{{'MESSAGE.NO_MESSAGE' | translate}}</clr-dg-placeholder>
   <clr-dg-column class="col-id">
     <ng-container *clrDgHideableColumn="{hidden: false}">
       #
@@ -7,32 +7,32 @@
   </clr-dg-column>
   <clr-dg-column class="col-time">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建时间
+      {{'TITLE.CREATE_TIME' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column class="col-cluster">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      配置机房
+      {{'TITLE.CONFIG_CLUSTER' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column class="col-cluster">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      已上线机房
+      {{'TITLE.ONLINE_CLUSTER' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column class="col-description">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      发布说明
+      {{'TITLE.RELEASE_EXPLAIN' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column>
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      创建者
+      {{'TITLE.CREATE_USER' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column class="col-operate">
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      操作
+      {{'TITLE.ACTION' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-row *ngFor="let tpl of pvcTpls" [clrDgItem]="tpl">
@@ -94,7 +94,7 @@ <h3>PVC部署状态</h3>
 </span>
 
 <clr-datagrid *ngIf="!loading" class="wayne-clr-datagrid">
-  <clr-dg-placeholder>暂无数据！</clr-dg-placeholder>
+  <clr-dg-placeholder>{{'MESSAGE.NO_MESSAGE' | translate}}</clr-dg-placeholder>
   <clr-dg-column style="width: 5%">
     <ng-container *clrDgHideableColumn="{hidden: false}">
       机房
@@ -112,7 +112,7 @@ <h3>PVC部署状态</h3>
   </clr-dg-column>
   <clr-dg-column>
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      访问模式
+      {{'PVC.ACCESS_PATTERN' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column>
@@ -132,7 +132,7 @@ <h3>PVC部署状态</h3>
   </clr-dg-column>
   <clr-dg-column>
     <ng-container *clrDgHideableColumn="{hidden: false}">
-      操作
+      {{'TITLE.ACTION' | translate}}
     </ng-container>
   </clr-dg-column>
   <div *ngFor="let tpl of pvcTpls">
diff --git a/src/frontend/src/app/portal/persistentvolumeclaim/persistentvolumeclaim.component.html b/src/frontend/src/app/portal/persistentvolumeclaim/persistentvolumeclaim.component.html
index d7e544508..e21dabe14 100644
--- a/src/frontend/src/app/portal/persistentvolumeclaim/persistentvolumeclaim.component.html
+++ b/src/frontend/src/app/portal/persistentvolumeclaim/persistentvolumeclaim.component.html
@@ -1,5 +1,5 @@
 <button (click)="openModal()" class="wayne-button primary" *ngIf="authService.currentAppPermission.pvc.create || authService.currentUser.admin">
-  创建PVC
+  {{'PVC.CREATE' | translate}}
 </button>
 <create-edit-persistentvolumeclaim (create)="createPvc($event)"></create-edit-persistentvolumeclaim>
 <div *ngIf="pvcId && pvcs?.length>0">
@@ -18,40 +18,29 @@
       <button (click)="createPvcTpl()"
               class="wayne-button normal"
               *ngIf="authService.currentAppPermission.pvc.create || authService.currentUser.admin">
-        创建PVC模版
+        {{'PVC.CREATE_TMP' | translate}}
       </button>
       <button (click)="editPvc()"
               class="wayne-button normal"
               *ngIf="authService.currentAppPermission.pvc.update || authService.currentUser.admin">
-        编辑PVC
+        {{'PVC.EDIT' | translate}}
       </button>
       <button (click)="publishHistory()"
               class="wayne-button normal"
               *ngIf="authService.currentAppPermission.pvc.read || authService.currentUser.admin">
-        发布历史
+        {{'BUTTON.HISTORY' | translate}}
       </button>
       <button (click)="deletePvc()" class="wayne-button normal" *ngIf="authService.currentAppPermission.pvc.offline || authService.currentUser.admin">
-        删除PVC
+        {{'PVC.DELETE' | translate}}
       </button>
     </div>
     <div class="table-search-right">
       <div class="toggle-switch">
         <input type="checkbox" id="toggle_1" [(ngModel)]="isOnline" (change)="onlineChange()">
-        <label for="toggle_1">只显示上线模板</label>
+        <label for="toggle_1">{{'MESSAGE.ONLY_ONLINE_TEMPLATE' | translate}}</label>
       </div>
     </div>
   </div>
   <router-outlet></router-outlet>
-  <!--
-  <list-persistentvolumeclaim
-    [pvcs]="pvcs"
-    (cloneTpl)="clonePvcTpl($event)"
-    [pvcTpls]="pvcTpls"
-    (edit)="editPvc($event)"
-    [publishStatus]="publishStatus"
-    (paginate)="retrieve($event)"
-    [totalPage]="totalPage"
-    [totalCount]="totalCount"
-    [pageSize]="pageSize"></list-persistentvolumeclaim>-->
 </div>
 
diff --git a/src/frontend/src/app/portal/persistentvolumeclaim/persistentvolumeclaim.component.ts b/src/frontend/src/app/portal/persistentvolumeclaim/persistentvolumeclaim.component.ts
index 137c93e08..503d3a41b 100644
--- a/src/frontend/src/app/portal/persistentvolumeclaim/persistentvolumeclaim.component.ts
+++ b/src/frontend/src/app/portal/persistentvolumeclaim/persistentvolumeclaim.component.ts
@@ -22,6 +22,7 @@ import {ConfirmationDialogService} from '../../shared/confirmation-dialog/confir
 import {PageState} from '../../shared/page/page-state';
 import {TabDragService} from '../../shared/client/v1/tab-drag.service';
 import {OrderItem} from '../../shared/model/v1/order';
+import {TranslateService} from '@ngx-translate/core';
 
 @Component({
   selector: 'wayne-persistentvolumeclaim',
@@ -55,6 +56,7 @@ export class PersistentVolumeClaimComponent implements OnInit, OnDestroy {
               private tabDragService: TabDragService,
               private el: ElementRef,
               private pvcTplService: PersistentVolumeClaimTplService,
+              public translate: TranslateService,
               private messageHandlerService: MessageHandlerService) {
                 this.tabScription = this.tabDragService.tabDragOverObservable.subscribe(over => {
                   if (over) this.tabChange();
diff --git a/src/frontend/src/app/portal/persistentvolumeclaim/publish-tpl/publish-tpl.component.html b/src/frontend/src/app/portal/persistentvolumeclaim/publish-tpl/publish-tpl.component.html
index dc8635345..b1ed2c562 100644
--- a/src/frontend/src/app/portal/persistentvolumeclaim/publish-tpl/publish-tpl.component.html
+++ b/src/frontend/src/app/portal/persistentvolumeclaim/publish-tpl/publish-tpl.component.html
@@ -16,7 +16,7 @@ <h3 class="modal-title">{{title}}</h3>
     <form #publishForm="ngForm">
       <section class="form-block">
         <div class="form-group" style="padding-left: 135px;">
-          <label class="col-md-3 form-group-label-override required">机房</label>
+          <label class="col-md-3 form-group-label-override required">{{'TITLE.CLUSTER' | translate}}</label>
           <div *ngFor="let cluster of clusters;let i=index" style="padding-right: 20px" class="checkbox-inline">
             <input [(ngModel)]="cluster['checked']"
                    type="checkbox"
@@ -26,10 +26,10 @@ <h3 class="modal-title">{{title}}</h3>
           </div>
         </div>
         <div *ngIf="actionType==3" class="form-group" style="padding-left: 135px;">
-          <label class="col-md-3 form-group-label-override">强制下线
+          <label class="col-md-3 form-group-label-override">{{'ACTION.FORCE_DROP' | translate}} 
             <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg">
               <clr-icon shape="info-circle" size="24"></clr-icon>
-              <span class="tooltip-content">确认资源已经不存在于Kubernetes，可以打开此开关强制下线</span>
+              <span class="tooltip-content">{{'MESSAGE.FORCE_DROP' | translate}} </span>
             </a>
           </label>
           <div class="toggle-switch" style="top: .25rem">
@@ -41,7 +41,7 @@ <h3 class="modal-title">{{title}}</h3>
     </form>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">确定</button>
+    <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.CONFIRM' | translate}}</button>
   </div>
 </clr-modal>
diff --git a/src/frontend/src/app/portal/persistentvolumeclaim/snapshot-persistentvolumeclaim/snapshot-persistentvolumeclaim.component.html b/src/frontend/src/app/portal/persistentvolumeclaim/snapshot-persistentvolumeclaim/snapshot-persistentvolumeclaim.component.html
index dd1e967d6..0a854019c 100644
--- a/src/frontend/src/app/portal/persistentvolumeclaim/snapshot-persistentvolumeclaim/snapshot-persistentvolumeclaim.component.html
+++ b/src/frontend/src/app/portal/persistentvolumeclaim/snapshot-persistentvolumeclaim/snapshot-persistentvolumeclaim.component.html
@@ -13,7 +13,7 @@
 </div>
 
 <clr-datagrid (clrDgRefresh)="snapshotRefresh()">
-  <clr-dg-placeholder>暂无数据！</clr-dg-placeholder>
+  <clr-dg-placeholder>{{'MESSAGE.NO_MESSAGE' | translate}}</clr-dg-placeholder>
   <clr-dg-column>
     <ng-container *clrDgHideableColumn="{hidden: false}">ID</ng-container>
   </clr-dg-column>
diff --git a/src/frontend/src/app/portal/secret/create-edit-secret/create-edit-secret.component.html b/src/frontend/src/app/portal/secret/create-edit-secret/create-edit-secret.component.html
index ff17be643..dff051283 100644
--- a/src/frontend/src/app/portal/secret/create-edit-secret/create-edit-secret.component.html
+++ b/src/frontend/src/app/portal/secret/create-edit-secret/create-edit-secret.component.html
@@ -4,25 +4,25 @@ <h3 class="modal-title">{{title}}</h3>
     <form #ngForm="ngForm">
       <section class="form-block">
         <div class="form-group" style="padding-left: 135px;">
-          <label for="name" class="col-md-3 form-group-label-override required">名称</label>
+          <label for="name" class="col-md-3 form-group-label-override required">{{'TITLE.NAME' | translate}}</label>
           <label for="name" aria-haspopup="true" role="tooltip" [class.invalid]="!isNameValid" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left form-control">
             <label *ngIf="app && actionType==0 && nameGenerateRuleConfig=='join'">{{app.name}}-</label>
             <input type="text" id="name"  [(ngModel)]="secret.name"
                    name="name"
                    required
-                   placeholder="英文小写"
+                   [placeholder]="'PLACEHOLDER.ENGLISH_NAME' | translate"
                    [readonly]="actionType==1"
                    maxlength="64"
                    pattern="[a-z]([-a-z0-9]*[a-z0-9])?"
                    (keyup)='handleValidation()'>
             <span class="tooltip-content">
-              配置集名称不符合规范，验证规则[a-z]([-a-z0-9]*[a-z0-9])?
+              {{'RULE.REGEXT' | translate}}[a-z]([-a-z0-9]*[a-z0-9])?
             </span>
           </label>
           <span class="spinner spinner-inline" [hidden]="!checkOnGoing"></span>
         </div>
         <div class="form-group" style="padding-left: 135px;">
-          <label for="description" class="col-md-3 form-group-label-override">描述</label>
+          <label for="description" class="col-md-3 form-group-label-override">{{'TITLE.DESCRIPTION' | translate}}</label>
           <textarea id="description" [(ngModel)]="secret.description"
                     name="description"
                     rows="3">
@@ -32,7 +32,7 @@ <h3 class="modal-title">{{title}}</h3>
     </form>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+    <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
   </div>
 </clr-modal>
diff --git a/src/frontend/src/app/portal/secret/create-edit-secrettpl/create-edit-secrettpl.component.html b/src/frontend/src/app/portal/secret/create-edit-secrettpl/create-edit-secrettpl.component.html
index 8f5544f61..8bec50199 100644
--- a/src/frontend/src/app/portal/secret/create-edit-secrettpl/create-edit-secrettpl.component.html
+++ b/src/frontend/src/app/portal/secret/create-edit-secrettpl/create-edit-secrettpl.component.html
@@ -1,11 +1,11 @@
 <div class="row" style="padding-left: 5%;">
   <div class="row flex-items-xs-between flex-items-xs-top" style="padding-left: 15px; padding-right: 15px;">
-    <h3 class="header-title">创建加密字典模版</h3>
+    <h3 class="header-title">{{'SECRET.CREATE_TMP' | translate}}</h3>
   </div>
   <form [formGroup]="currentForm" style="padding-right: 30px;width: 100%">
     <section class="form-block wrap">
       <div *ngIf="clusters" formArrayName="clusters" class="form-group form-group-padding">
-        <label class="col-md-3 form-group-label-override required">机房</label>
+        <label class="col-md-3 form-group-label-override required">{{'TITLE.CLUSTER' | translate}}</label>
         <div *ngFor="let cluster of clusters;let i=index"
              style="padding-right: 15px" class="checkbox-inline"
              [formGroupName]="i">
@@ -16,7 +16,7 @@ <h3 class="header-title">创建加密字典模版</h3>
         </div>
       </div>
       <div class="form-group form-group-padding">
-        <label class="col-md-3 form-group-label-override required">发布说明</label>
+        <label class="col-md-3 form-group-label-override required">{{'TMP.RELEASE_EXPLAIN' | translate}}</label>
         <textarea  formControlName="description"
                    rows="3"
                    style="width: 65%"
@@ -27,24 +27,24 @@ <h3 class="header-title">创建加密字典模版</h3>
         <div *ngFor="let data of datas.controls; let i = index"
              [formGroupName]="i">
           <div class="form-group form-group-padding">
-            <label class="col-md-3 form-group-label-override required">数据内容</label>
+            <label class="col-md-3 form-group-label-override required">{{'MESSAGE.DATA_CONTENT' | translate}}</label>
             <input type="text"
                    size="45"
                    formControlName="dataName"
                    required
-                   placeholder="字典key">
+                   [placeholder]="'PLACEHOLDER.DICT_KEY' | translate">
             <a href="javascript:void(0)">
-              <clr-icon (click)="onDeleteData(i)" shape="trash" title="删除数据" class="is-solid clr-icon"></clr-icon>
+              <clr-icon (click)="onDeleteData(i)" shape="trash" [title]="'ACTION.DELETE_DATA' | translate" class="is-solid clr-icon"></clr-icon>
             </a>
             <a href="javascript:void(0)">
-              <clr-icon (click)="onAddData(i)" shape="plus-circle" title="添加数据" class="is-solid clr-icon"></clr-icon>
+              <clr-icon (click)="onAddData(i)" shape="plus-circle" [title]="'ACTION.ADD_DATA' | translate" class="is-solid clr-icon"></clr-icon>
             </a>
           </div>
           <div class="form-group" style="padding-left: 170px;">
            <textarea class="textarea-font" style="width: 65%"
                      formControlName="dataValue"
                      required
-                     placeholder="字典value">
+                     [placeholder]="'PLACEHOLDER.DICT_VALUE' | translate">
           </textarea>
           </div>
         </div>
@@ -53,8 +53,8 @@ <h3 class="header-title">创建加密字典模版</h3>
   </form>
 </div>
 <div class="clr-wizard-footer-buttons tpl-bottom" [style.top.px]="top">
-  <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-  <button type="button" class="btn btn-primary" (click)="openModal()">高级配置</button>
-  <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+  <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+  <button type="button" class="btn btn-primary" (click)="openModal()">{{'BUTTON.ADVANCED_CONFIG' | translate}}</button>
+  <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
 </div>
 <wayne-ace-editor (outputObj)="saveSecretTpl($event)"></wayne-ace-editor>
diff --git a/src/frontend/src/app/portal/secret/list-secret/list-secret.component.html b/src/frontend/src/app/portal/secret/list-secret/list-secret.component.html
index a678f330c..b6a7b1185 100644
--- a/src/frontend/src/app/portal/secret/list-secret/list-secret.component.html
+++ b/src/frontend/src/app/portal/secret/list-secret/list-secret.component.html
@@ -1,38 +1,38 @@
 <clr-datagrid (clrDgRefresh)="refresh($event)" class="wayne-clr-datagrid">
-  <clr-dg-placeholder>暂无数据！</clr-dg-placeholder>
+  <clr-dg-placeholder>{{'MESSAGE.NO_MESSAGE' | translate}}</clr-dg-placeholder>
   <clr-dg-column class="col-id">
     <ng-container>
       #
     </ng-container>
   </clr-dg-column>
   <clr-dg-column class="col-time">
-    <ng-container *clrDgHideableColumn="showState['创建时间']">
-      创建时间
+    <ng-container *clrDgHideableColumn="showState['create_time']">
+      {{'TITLE.CREATE_TIME' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column class="col-cluster">
-    <ng-container *clrDgHideableColumn="showState['配置机房']">
-      配置机房
+    <ng-container *clrDgHideableColumn="showState['config_cluster']">
+      {{'TITLE.CONFIG_CLUSTER' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column class="col-cluster">
-    <ng-container *clrDgHideableColumn="showState['已上线机房']">
-      已上线机房
+    <ng-container *clrDgHideableColumn="showState['online_cluster']">
+      {{'TITLE.ONLINE_CLUSTER' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column class="col-description">
-    <ng-container *clrDgHideableColumn="showState['发布说明']">
-      发布说明
+    <ng-container *clrDgHideableColumn="showState['release_explain']">
+      {{'TITLE.RELEASE_EXPLAIN' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column>
-    <ng-container *clrDgHideableColumn="showState['创建者']">
-      创建者
+    <ng-container *clrDgHideableColumn="showState['create_user']">
+      {{'TITLE.CREATE_USER' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column class="col-operate">
-    <ng-container *clrDgHideableColumn="showState['操作']">
-      操作
+    <ng-container *clrDgHideableColumn="showState['action']">
+      {{'TITLE.ACTION' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-row *ngFor="let secretTpl of secretTpls" [clrDgItem]="secretTpl">
@@ -60,23 +60,23 @@
       <button class="wayne-button text"
         (click)="publishSecretTpl(secretTpl)"
         *ngIf="authService.currentAppPermission.secret.deploy || authService.currentUser.admin">
-        发布</button>
+        {{'BUTTON.RELEASE' | translate}}</button>
       <button class="wayne-button text"
         (click)="detailSecretTpl(secretTpl)"
         *ngIf="authService.currentAppPermission.secret.read || authService.currentUser.admin">
-        详情</button>
+        {{'BUTTON.DETAIL' | translate}}</button>
       <button class="wayne-button text"
         (click)="cloneSecretTpl(secretTpl)"
         *ngIf="authService.currentAppPermission.secret.create || authService.currentUser.admin">
-        克隆</button>
+        {{'BUTTON.CLONE' | translate}}</button>
       <button class="wayne-button text"
         *ngIf="!secretTpl.status && (authService.currentAppPermission.secret.delete || authService.currentUser.admin)"
         (click)="deleteSecretTpl(secretTpl)">
-        删除</button>
+        {{'BUTTON.DELETE' | translate}}</button>
       <button class="wayne-button text"
          (click)="offlineSecretTpl(secretTpl)"
          *ngIf="secretTpl.status && (authService.currentAppPermission.secret.offline || authService.currentUser.admin)">
-         下线</button>
+         {{'BUTTON.DROP' | translate}}</button>
     </clr-dg-cell>
   </clr-dg-row>
 
diff --git a/src/frontend/src/app/portal/secret/publish-tpl/publish-tpl.component.html b/src/frontend/src/app/portal/secret/publish-tpl/publish-tpl.component.html
index 27784a638..3e30c607c 100644
--- a/src/frontend/src/app/portal/secret/publish-tpl/publish-tpl.component.html
+++ b/src/frontend/src/app/portal/secret/publish-tpl/publish-tpl.component.html
@@ -4,7 +4,7 @@ <h3 class="modal-title">{{title}}</h3>
     <form #publishForm="ngForm">
       <section class="form-block">
         <div class="form-group" style="padding-left: 135px;">
-          <label class="col-md-3 form-group-label-override required">机房</label>
+          <label class="col-md-3 form-group-label-override required">{{'TITLE.CLUSTER' | translate}}</label>
           <div *ngFor="let cluster of clusters;let i=index"  class="checkbox-inline form-control">
             <input [(ngModel)]="cluster['checked']"
                    type="checkbox"
@@ -14,10 +14,10 @@ <h3 class="modal-title">{{title}}</h3>
           </div>
         </div>
         <div *ngIf="actionType==3" class="form-group" style="padding-left: 135px;">
-          <label class="col-md-3 form-group-label-override">强制下线
+          <label class="col-md-3 form-group-label-override">{{'ACTION.FORCE_DROP' | translate}} 
             <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg">
               <clr-icon shape="info-circle" size="24"></clr-icon>
-              <span class="tooltip-content">确认资源已经不存在于Kubernetes，可以打开此开关强制下线</span>
+              <span class="tooltip-content">{{'MESSAGE.FORCE_DROP' | translate}} </span>
             </a>
           </label>
           <div class="toggle-switch" style="top: .25rem">
@@ -29,7 +29,7 @@ <h3 class="modal-title">{{title}}</h3>
     </form>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">确定</button>
+    <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.CONFIRM' | translate}}</button>
   </div>
 </clr-modal>
diff --git a/src/frontend/src/app/portal/secret/secret.component.html b/src/frontend/src/app/portal/secret/secret.component.html
index 5e4c8dda6..76a2f86da 100644
--- a/src/frontend/src/app/portal/secret/secret.component.html
+++ b/src/frontend/src/app/portal/secret/secret.component.html
@@ -1,5 +1,5 @@
 <button (click)="openModal()" class="wayne-button primary" *ngIf="authService.currentAppPermission.secret.create || authService.currentUser.admin">
-  创建加密字典
+  {{'SECRET.CREATE' | translate}}
 </button>
 <create-edit-secret (create)="createSecret($event)"></create-edit-secret>
 <div *ngIf="secretId && secrets?.length>0">
@@ -16,32 +16,32 @@
   <div class="table-search">
     <div class="table-search-left">
       <button (click)="createSecretTpl()" class="wayne-button normal" *ngIf="authService.currentAppPermission.secret.create || authService.currentUser.admin">
-        创建加密字典模版
+        {{'SECRET.CREATE_TMP' | translate}}
       </button>
       <button (click)="editSecret()" class="wayne-button normal" *ngIf="authService.currentAppPermission.secret.update || authService.currentUser.admin">
-        编辑加密字典
+        {{'SECRET.EDIT' | translate}}
       </button>
       <button (click)="publishHistory()" class="wayne-button normal" *ngIf="authService.currentAppPermission.secret.read || authService.currentUser.admin">
-        发布历史
+        {{'BUTTON.HISTORY' | translate}}
       </button>
       <button (click)="deleteSecret()" class="wayne-button normal" *ngIf="authService.currentAppPermission.secret.offline || authService.currentUser.admin">
-        删除加密字典
+        {{'SECRET.DELETE' | translate}}
       </button>
       <wayne-filter-box (confirm)="confirmEvent()" (cancel)="cancelEvent()">
         <wayne-checkbox-group [(ngModel)]="showList">
-          <wayne-checkbox>创建时间</wayne-checkbox>
-          <wayne-checkbox>配置机房</wayne-checkbox>
-          <wayne-checkbox>已上线机房</wayne-checkbox>
-          <wayne-checkbox>发布说明</wayne-checkbox>
-          <wayne-checkbox>创建者</wayne-checkbox>
-          <wayne-checkbox>操作</wayne-checkbox>
+          <wayne-checkbox value="create_time">{{'TITLE.CREATE_TIME' | translate}}</wayne-checkbox>
+          <wayne-checkbox value="config_cluster">{{'TITLE.CONFIG_CLUSTER' | translate}}</wayne-checkbox>
+          <wayne-checkbox value="online_cluster">{{'TITLE.ONLINE_CLUSTER' | translate}}</wayne-checkbox>
+          <wayne-checkbox value="release_explain">{{'TITLE.RELEASE_EXPLAIN' | translate}}</wayne-checkbox>
+          <wayne-checkbox value="create_user">{{'TITLE.CREATE_USER' | translate}}</wayne-checkbox>
+          <wayne-checkbox value="action">{{'TITLE.ACTION' | translate}}</wayne-checkbox>
         </wayne-checkbox-group>
       </wayne-filter-box>
     </div>
     <div class="table-search-right">
       <div class="toggle-switch">
         <input type="checkbox" id="toggle_1" [(ngModel)]="isOnline" (change)="onlineChange()">
-        <label for="toggle_1">只显示上线模板</label>
+        <label for="toggle_1">{{'MESSAGE.ONLY_ONLINE_TEMPLATE' | translate}}</label>
       </div>
     </div>
   </div>
diff --git a/src/frontend/src/app/portal/secret/secret.component.ts b/src/frontend/src/app/portal/secret/secret.component.ts
index 314856071..f492e2229 100644
--- a/src/frontend/src/app/portal/secret/secret.component.ts
+++ b/src/frontend/src/app/portal/secret/secret.component.ts
@@ -32,14 +32,15 @@ import {Subscription} from 'rxjs/Subscription';
 import {PageState} from '../../shared/page/page-state';
 import {TabDragService} from '../../shared/client/v1/tab-drag.service';
 import {OrderItem} from '../../shared/model/v1/order';
+import {TranslateService} from '@ngx-translate/core';
 
 const showState = {
-  '创建时间': {hidden: false},
-  '配置机房': {hidden: false},
-  '已上线机房': {hidden: false},
-  '发布说明': {hidden: false},
-  '创建者': {hidden: false},
-  '操作': {hidden: false}
+  'create_time': {hidden: false},
+  'config_cluster': {hidden: false},
+  'online_cluster': {hidden: false},
+  'release_explain': {hidden: false},
+  'create_user': {hidden: false},
+  'action': {hidden: false}
 };
 
 @Component({
@@ -81,6 +82,7 @@ export class SecretComponent implements AfterContentInit, OnDestroy, OnInit {
               private el: ElementRef,
               private secretService: SecretService,
               private secretTplService: SecretTplService,
+              public translate: TranslateService,
               private messageHandlerService: MessageHandlerService) {
                 this.tabScription = this.tabDragService.tabDragOverObservable.subscribe(over => {
                   if (over) this.tabChange();
diff --git a/src/frontend/src/app/portal/sidenav-namespace/sidenav-namespace.component.html b/src/frontend/src/app/portal/sidenav-namespace/sidenav-namespace.component.html
index 40ebbc3f5..c4247e30b 100644
--- a/src/frontend/src/app/portal/sidenav-namespace/sidenav-namespace.component.html
+++ b/src/frontend/src/app/portal/sidenav-namespace/sidenav-namespace.component.html
@@ -1,19 +1,19 @@
 <clr-vertical-nav [clrVerticalNavCollapsible]="true">
   <a
   clrVerticalNavLink
-  title="部门概览"
+  [title]="'MENU.DEPARTMENT' | translate"
   routerLink="/portal/namespace/{{cacheService.currentNamespace?.id}}/overview"
   routerLinkActive="active">
   <clr-icon clrVerticalNavIcon shape="help-info"></clr-icon>
-  部门概览
+  {{'MENU.DEPARTMENT' | translate}}
 </a>
   <a
   clrVerticalNavLink
-  title="项目列表"
+  [title]="'MENU.PRODUCT' | translate"
   routerLink="/portal/namespace/{{cacheService.currentNamespace?.id}}/app"
   routerLinkActive="active">
   <clr-icon clrVerticalNavIcon shape="applications"></clr-icon>
-  项目列表
+  {{'MENU.PRODUCT' | translate}}
 </a>
   <a
   clrVerticalNavLink
@@ -35,11 +35,11 @@
 </a>
   <a
   clrVerticalNavLink
-  title="成员列表"
+  [title]="'MENU.MEMBER' | translate"
   routerLink="/portal/namespace/{{cacheService.currentNamespace?.id}}/users"
   routerLinkActive="active">
   <clr-icon clrVerticalNavIcon shape="user"></clr-icon>
-  成员列表
+  {{'MENU.MEMBER' | translate}}
 </a>
 <a href="javascript:;" style="flex: 1;"></a>
   <wayne-footer></wayne-footer>
diff --git a/src/frontend/src/app/portal/sidenav-namespace/sidenav-namespace.component.ts b/src/frontend/src/app/portal/sidenav-namespace/sidenav-namespace.component.ts
index f350dd3c8..dbd880f7c 100644
--- a/src/frontend/src/app/portal/sidenav-namespace/sidenav-namespace.component.ts
+++ b/src/frontend/src/app/portal/sidenav-namespace/sidenav-namespace.component.ts
@@ -4,6 +4,7 @@ import {ActivatedRoute, Router} from '@angular/router';
 import {AppService} from '../../shared/client/v1/app.service';
 import {CacheService} from '../../shared/auth/cache.service';
 import {MessageHandlerService} from '../../shared/message-handler/message-handler.service';
+import {TranslateService} from '@ngx-translate/core';
 
 @Component({
   selector: 'wayne-sidenav-namespace',
@@ -17,6 +18,7 @@ export class SidenavNamespaceComponent implements OnInit {
               private messageHandlerService: MessageHandlerService,
               public cacheService: CacheService,
               private appService: AppService,
+              public translate: TranslateService,
               private router: Router) {
   }
 
diff --git a/src/frontend/src/app/portal/statefulset/create-edit-statefulset/create-edit-statefulset.component.html b/src/frontend/src/app/portal/statefulset/create-edit-statefulset/create-edit-statefulset.component.html
index e37a52391..0c872e230 100644
--- a/src/frontend/src/app/portal/statefulset/create-edit-statefulset/create-edit-statefulset.component.html
+++ b/src/frontend/src/app/portal/statefulset/create-edit-statefulset/create-edit-statefulset.component.html
@@ -4,7 +4,7 @@ <h3 class="modal-title">{{title}}</h3>
     <form #ngForm="ngForm" style="padding-right: 30px;width: 100%">
       <section class="form-block">
         <div class="form-group" style="padding-left: 135px;">
-          <label for="statefulset_name" class="col-md-3 form-group-label-override required">名称</label>
+          <label for="statefulset_name" class="col-md-3 form-group-label-override required">{{'TITLE.NAME' | translate}}</label>
           <label for="statefulset_name" aria-haspopup="true" role="tooltip" [class.invalid]="!isNameValid"
                  class="tooltip tooltip-validation tooltip-md tooltip-bottom-left">
             <span *ngIf="app && actionType==0 && nameGenerateRuleConfig=='join'">{{app.name}}-</span>
@@ -14,19 +14,19 @@ <h3 class="modal-title">{{title}}</h3>
                    required
                    *ngIf="app && actionType==0"
                    [readonly]="actionType==1"
-                   placeholder="英文小写，中划线分隔"
+                   [placeholder]="'PLACEHOLDER.APP_NAME' | translate"
                    pattern="[a-z]([-a-z0-9]*[a-z0-9])?"
                    maxlength="64"
                    (keyup)='handleValidation()'>
             <span *ngIf="app && actionType==1">{{statefulset.name}}</span>
             <span class="tooltip-content">
-              名称不符合规范，验证规则[a-z]([-a-z0-9]*[a-z0-9])?
+              {{'RULE.REGEXT' | translate}}[a-z]([-a-z0-9]*[a-z0-9])?
         </span>
           </label>
           <span class="spinner spinner-inline" [hidden]="!checkOnGoing"></span>
         </div>
         <div class="form-group" style="padding-left: 135px;">
-          <label class="col-md-3 form-group-label-override required">机房</label>
+          <label class="col-md-3 form-group-label-override required">{{'TITLE.CLUSTER' | translate}}</label>
           <div *ngFor="let cluster of clusters" class="checkbox-inline">
             <div class="checkbox">
               <input [(ngModel)]="clusterMetas[cluster.name].checked"
@@ -50,7 +50,7 @@ <h3 class="modal-title">{{title}}</h3>
           </div>
         </div>
         <div class="form-group" style="padding-left: 135px;">
-          <label for="statefulset_description" class="col-md-3 form-group-label-override">描述</label>
+          <label for="statefulset_description" class="col-md-3 form-group-label-override">{{'TITLE.DESCRIPTION' | translate}}</label>
           <textarea id="statefulset_description" [(ngModel)]="statefulset.description"
                     name="statefulset_description"
                     rows="3">
@@ -61,8 +61,8 @@ <h3 class="modal-title">{{title}}</h3>
     </form>
   </div>
   <div class="modal-footer" style="padding-right: 5%">
-    <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
+    <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+    <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
   </div>
 </clr-modal>
 
diff --git a/src/frontend/src/app/portal/statefulset/create-edit-statefulsettpl/create-edit-statefulsettpl.component.html b/src/frontend/src/app/portal/statefulset/create-edit-statefulsettpl/create-edit-statefulsettpl.component.html
index c9998b8d7..877660257 100644
--- a/src/frontend/src/app/portal/statefulset/create-edit-statefulsettpl/create-edit-statefulsettpl.component.html
+++ b/src/frontend/src/app/portal/statefulset/create-edit-statefulsettpl/create-edit-statefulsettpl.component.html
@@ -1,6 +1,8 @@
 <div class="row" style="padding-left: 50px; padding-right: 150px;">
   <div class="row flex-items-xs-between flex-items-xs-top" style="padding-left: 15px; padding-right: 15px;">
-    <h3 class="header-title" id="创建状态副本集模版">创建状态副本集模版</h3>
+    <h3 class="header-title" id="创建状态副本集模版">
+      {{'STATEFULSET.CREATE_TMP' | translate}}
+    </h3>
   </div>
   <div style="position: fixed;right: 0;top: 100px; width: 200px; max-height: calc(100% - 160px); overflow-y: auto;">
     <wayne-navigation container=".content-area" [node]="naviList"></wayne-navigation>
@@ -8,9 +10,11 @@ <h3 class="header-title" id="创建状态副本集模版">创建状态副本集
   <form #ngForm="ngForm" style="padding-right: 30px;width: 100%">
     <section class="form-block wrap">
       <div>
-        <label class="label-level1" id="发布信息">发布信息</label>
+        <label class="label-level1" id="发布信息">
+          {{'TMP.RELEASE_MESSAGE' | translate}}
+        </label>
         <div class="form-group form-group-padding">
-          <label class="col-md-3 form-group-label-override required">发布说明</label>
+          <label class="col-md-3 form-group-label-override required">{{'TMP.RELEASE_EXPLAIN' | translate}}</label>
           <textarea name="statefulset_description" [(ngModel)]="statefulsetTpl.description" rows="3" style="width: 65%" required>
           </textarea>
         </div>
@@ -18,16 +22,16 @@ <h3 class="header-title" id="创建状态副本集模版">创建状态副本集
     </section>
     <section class="form-block wrap">
       <div>
-        <label class="label-level1" id="更新策略">更新策略</label>
+        <label class="label-level1" id="更新策略">{{'TMP.UPDATE_STRATEGY' | translate}}</label>
         <div class="form-group form-group-padding">
-          <label class="col-md-3 form-group-label-override required">更新方式</label>
+          <label class="col-md-3 form-group-label-override required">{{'TMP.UPDATE_WAY' | translate}}</label>
           <div class="radio-inline">
               <input type="radio" name="statefulSetStrategyType" id="statefulSetStrategyType1" value="OnDelete" [(ngModel)]="kubeStatefulSet.spec.updateStrategy.type" checked>
-              <label for="statefulSetStrategyType1">仅删除时更新</label>
+              <label for="statefulSetStrategyType1">{{'TMP.DELETE_UPDATE' | translate}}</label>
           </div>
           <div class="radio-inline">
               <input type="radio" name="statefulSetStrategyType" id="statefulSetStrategyType2" value="RollingUpdate"  [(ngModel)]="kubeStatefulSet.spec.updateStrategy.type">
-              <label for="statefulSetStrategyType2">滚动更新</label>
+              <label for="statefulSetStrategyType2">{{'TMP.SCROLL_UPDATE' | translate}}</label>
           </div>
         </div>
       </div>
@@ -35,205 +39,195 @@ <h3 class="header-title" id="创建状态副本集模版">创建状态副本集
 
     <section *ngFor="let container of kubeStatefulSet.spec.template.spec.containers; let i = index" class="form-block wrap">
       <div>
-        <label class="label-level1" [id]="i ? '容器配置' + i : '容器配置'">容器配置
-          <clr-icon (click)="onDeleteContainer(i)" shape="trash" title="删除容器" class="is-solid"></clr-icon>
+        <label class="label-level1" [id]="i ? '容器配置' + i : '容器配置'">{{'TMP.CONTAINER_CONFIG' | translate}}
+          <clr-icon (click)="onDeleteContainer(i)" shape="trash" [title]="'TMP.DELETE_CONTAINER' | translate" class="is-solid"></clr-icon>
         </label>
         <div class="container-box">
-          <label class="label-level2" [id]="i ? '镜像配置' + i : '镜像配置'">镜像配置</label>
+          <label class="label-level2" [id]="i ? '镜像配置' + i : '镜像配置'">{{'TMP.IMAGE_CONFIG' | translate}}</label>
           <div class="form-group form-group-padding">
-            <label class="col-md-3 form-group-label-override required">容器名称</label>
+            <label class="col-md-3 form-group-label-override required">{{'TMP.CONTAINER_NAME' | translate}}</label>
             <label aria-haspopup="true" role="tooltip" [class.invalid]="checkIfInvalid(i,'container.name_')" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left">
               <input type="text" size="90" class="col-sm-12" required name="container.name_{{i}}" pattern="[a-z]([-a-z0-9]*[a-z0-9])?" [(ngModel)]="container.name"
-                placeholder="英文，dns域名规则">
+                [placeholder]="'RULE.CONTAINER' | translate">
               <span class="tooltip-content">
-                容器名称不符合规范，验证规则[a-z]([-a-z0-9]*[a-z0-9])?
+                {{'RULE.REGEXT'}}[a-z]([-a-z0-9]*[a-z0-9])?
               </span>
             </label>
           </div>
           <div class="form-group form-group-padding">
-            <label class="col-md-3 form-group-label-override required">镜像地址</label>
+            <label class="col-md-3 form-group-label-override required">{{'TMP.IMAGE_ADDRESS' | translate}}</label>
             <label aria-haspopup="true" role="tooltip" [class.invalid]="checkIfInvalid(i,'container.image_')" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left">
               <input type="text" size="90" class="col-sm-12" name="container.image_{{i}}" required pattern="{{getImagePrefixReg()}}" [(ngModel)]="container.image"
-                placeholder="镜像地址">
+                [placeholder]="'TMP.IMAGE_ADDRESS' | translate">
               <span class="tooltip-content">
-                镜像不符合校验规则 {{getImagePrefixReg()}}
+                {{'RULE.REGEXT' | translate}}{{getImagePrefixReg()}}
               </span>
             </label>
           </div>
           <div class="form-group form-group-padding">
-            <label class="col-md-3 form-group-label-override required">内存容量</label>
+            <label class="col-md-3 form-group-label-override required">{{'TMP.MEMORY_NUM' | translate}}</label>
             <label aria-haspopup="true" [class.invalid]="!checkMemory(container.resources.limits.memory)" style="padding-right: 0;margin-right: 0;padding-left: 0"
               role="tooltip" class="col-md-6 tooltip tooltip-validation tooltip-md tooltip-bottom-left">
               <input type="number" style="width:inherit" name="container.resources.limits.memory_{{i}}" required [(ngModel)]="container.resources.limits.memory"
-                placeholder="单位G">
-              <span class="tooltip-content">
-                内存大小应该在0~{{memoryLimit}}G之间
+                [placeholder]="'UNIT.MEMORY' | translate">
+              <span translate="'RULE.MEMORY'" translateParams="{value: memoryLimit}" class="tooltip-content">
               </span>
             </label>
             <label class="col-md-4">G&nbsp;&nbsp;&nbsp;
-              <label style="color: red">金额: {{container.resources.limits.memory * memoryUnitPrice | number:'1.2-2'}}元/月</label>
+              <label style="color: red">price: {{container.resources.limits.memory * memoryUnitPrice | number:'1.2-2'}}{{'UNIT.PRICE' | translate}}</label>
             </label>
           </div>
           <div class="form-group form-group-padding">
-            <label class="col-md-3 form-group-label-override required">CPU核数</label>
+            <label class="col-md-3 form-group-label-override required">{{'TMP.CORE_NUM' | translate}}</label>
             <label aria-haspopup="true" [class.invalid]="!checkCpu(container.resources.limits.cpu)" style="padding-right: 0;margin-right: 0;padding-left: 0"
               role="tooltip" class="col-md-6 tooltip tooltip-validation tooltip-md tooltip-bottom-left">
               <input type="number" name="container.resources.limits.cpu_{{i}}" [(ngModel)]="container.resources.limits.cpu" style="width:inherit"
-                required placeholder="单位个">
-              <span class="tooltip-content">
-                CPU大小应该在0~{{cpuLimit}}核之间
+                required [placeholder]="'UNIT.CPU' | translate">
+              <span translate="'RULE.CPU'" translateParams="{value: cpuLimit}" class="tooltip-content">
               </span>
             </label>
-            <label class="col-md-4">核&nbsp;&nbsp;&nbsp;
-              <label style="color: red">金额: {{container.resources.limits.cpu * cpuUnitPrice | number:'1.2-2'}}元/月</label>
+            <label class="col-md-4">{{'UNIT.CORE' | translate}}&nbsp;&nbsp;&nbsp;
+              <label style="color: red">price: {{container.resources.limits.cpu * cpuUnitPrice | number:'1.2-2'}}{{'UNIT.PRICE' | translate}}</label>
             </label>
           </div>
 
         </div>
 
         <div class="container-box">
-          <label class="label-level2" [id]="i ? '环境变量配置' + i : '环境变量配置'">环境变量配置
-            <button (click)="onAddEnvFrom(i)" style="margin-left: 10px;" class="wayne-button primary"><clr-icon shape="add-text"></clr-icon>批量加载</button>
-            <button (click)="onAddEnv(i)" style="margin-left: 10px;" class="wayne-button primary"><clr-icon shape="add"></clr-icon>逐个加载</button>
+          <label class="label-level2" [id]="i ? '环境变量配置' + i : '环境变量配置'">{{'TMP.ENVIRONMENT_VAR' | translate}}
+            <button (click)="onAddEnvFrom(i)" style="margin-left: 10px;" class="wayne-button primary"><clr-icon shape="add-text"></clr-icon>{{'TMP.ADD_GROUP' | translate}}</button>
+            <button (click)="onAddEnv(i)" style="margin-left: 10px;" class="wayne-button primary"><clr-icon shape="add"></clr-icon>{{'TMP.ADD_ONE' | translate}}</button>
           </label>
 
           <div *ngFor="let envFrom of container.envFrom; let j = index">
             <div class="form-group form-group-padding">
-              <label for="envFromType-{{i}}-{{j}}" class="col-md-3 form-group-label-override required">批量加载
+              <label for="envFromType-{{i}}-{{j}}" class="col-md-3 form-group-label-override required">{{'TMP.ADD_GROUP' | translate}}
                 <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-md">
                   <clr-icon shape="info-circle" size="24"></clr-icon>
-                  <span class="tooltip-content">批量从配置集或加密字典加载环境变量</span>
+                  <span class="tooltip-content">{{'TMP.LOAD_GROUP_MESSAGE' | translate}}</span>
                 </a>
               </label>
               <div class="select">
                 <select id="envFromType-{{i}}-{{j}}" name="envFrom.type_{{i}}_{{j}}" (change)="envFromChange($event.target.value,i,j)">
-                  <option value="1" [selected]="envFrom.configMapRef">从配置集加载</option>
-                  <option value="2" [selected]="envFrom.secretRef">从加密字典加载</option>
+                  <option value="1" [selected]="envFrom.configMapRef">{{'TMP.LOAD_CONFIGMAP' | translate}}</option>
+                  <option value="2" [selected]="envFrom.secretRef">{{'TMP.LOAD_SECRET' | translate}}</option>
                 </select>
               </div>
 
-              <clr-icon style="margin-top: 10px;margin-right: 8px" (click)="onAddEnvFrom(i)" shape="plus-circle" title="添加环境变量" class="is-solid"></clr-icon>
-              <clr-icon style="margin-top: 10px" (click)="onDeleteEnvFrom(i,j)" shape="trash" title="删除环境变量" class="is-solid"></clr-icon>
+              <clr-icon style="margin-top: 10px;margin-right: 8px" (click)="onAddEnvFrom(i)" shape="plus-circle" [title]="'TMP.ADD_ENVIRONMENT' | translate" class="is-solid"></clr-icon>
+              <clr-icon style="margin-top: 10px" (click)="onDeleteEnvFrom(i,j)" shape="trash" [title]="'TMP.DELETE_ENVIRONMENT' | translate" class="is-solid"></clr-icon>
             </div>
             <div *ngIf="envFrom" class="form-group form-group-padding">
-              <input type="text" size="40" name="envFrom.prefix_{{i}}_{{j}}" [(ngModel)]="envFrom.prefix" placeholder="为所有环境变量添加相同的前缀，可为空">
+              <input type="text" size="40" name="envFrom.prefix_{{i}}_{{j}}" [(ngModel)]="envFrom.prefix" [placeholder]="'PLACEHOLDER.ENVIRONMENT' | translate">
             </div>
             <div *ngIf="envFrom && envFrom.configMapRef" class="form-group form-group-padding">
               <input type="text" size="40" required name="envFrom.configMapRef.name_{{i}}_{{j}}" [(ngModel)]="envFrom.configMapRef.name"
-                placeholder="配置集名称">
+                [placeholder]="'TMP.CONFIGMAP_NAME' | translate">
             </div>
             <div *ngIf="envFrom && envFrom.secretRef" class="form-group form-group-padding">
-              <input type="text" size="40" required name="envFrom.secretRef.name_{{i}}_{{j}}" [(ngModel)]="envFrom.secretRef.name" placeholder="加密字典名称">
+              <input type="text" size="40" required name="envFrom.secretRef.name_{{i}}_{{j}}" [(ngModel)]="envFrom.secretRef.name" [placeholder]="'TMP.SECRET_NAME' | translate">
             </div>
 
           </div>
 
           <div *ngFor="let env of container.env; let j = index">
             <div class="form-group form-group-padding">
-              <label for="envType-{{i}}-{{j}}" class="col-md-3 form-group-label-override required">逐个加载
-                <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-md">
+              <label for="envType-{{i}}-{{j}}" class="col-md-3 form-group-label-override required">{{'TMP.ADD_ONE' | translate}}
+                <a role="tooltip" aria-haspopup="true" class="tooltip tooltipd-md">
                   <clr-icon shape="info-circle" size="24"></clr-icon>
-                  <span class="tooltip-content">其它类型的环境变量只支持高级模式编辑</span>
+                  <span class="tooltip-content">{{'TMP.SUPPORT_ENVIRONMENT_MESSAGE' | translate}}</span>
                 </a>
               </label>
               <div class="select">
                 <select id="envType-{{i}}-{{j}}" name="env.type_{{i}}_{{j}}" (change)="envChange($event.target.value,i,j)">
-                  <option value="0" [selected]="env.value!=null">自定义环境变量</option>
-                  <option value="1" [selected]="env.valueFrom?.configMapKeyRef">从配置集加载</option>
-                  <option value="2" [selected]="env.valueFrom?.secretKeyRef">从加密字典加载</option>
-                  <option value="3" selected>其它</option>
+                  <option value="0" [selected]="env.value!=null">{{'TMP.LOAD_ENVIRONMENT' | translate}}</option>
+                  <option value="1" [selected]="env.valueFrom?.configMapKeyRef">{{'TMP.LOAD_CONFIGMAP' | translate}}</option>
+                  <option value="2" [selected]="env.valueFrom?.secretKeyRef">{{'TMP.LOAD_SECRET' | translate}}</option>
+                  <option value="3" selected>{{'OTHER' | translate}}</option>
                 </select>
               </div>
-              <clr-icon style="margin-top: 10px;margin-right: 8px" (click)="onAddEnv(i)" shape="plus-circle" title="添加环境变量" class="is-solid"></clr-icon>
-              <clr-icon style="margin-top: 10px" (click)="onDeleteEnv(i,j)" shape="trash" title="删除环境变量" class="is-solid"></clr-icon>
+              <clr-icon style="margin-top: 10px;margin-right: 8px" (click)="onAddEnv(i)" shape="plus-circle" [title]="'TMP.ADD_ENVIRONMENT' | translate" class="is-solid"></clr-icon>
+              <clr-icon style="margin-top: 10px" (click)="onDeleteEnv(i,j)" shape="trash" [title]="'TMP.DELETE_ENVIRONMENT' | translate" class="is-solid"></clr-icon>
             </div>
             <div class="form-group form-group-padding">
-              <input [(ngModel)]="env.name" required name="env.name_{{i}}_{{j}}" type="text" size="45" placeholder="环境变量名称">
+              <input [(ngModel)]="env.name" required name="env.name_{{i}}_{{j}}" type="text" size="45" [placeholder]="'TMP.ENVIRONMENT_NAME' | translate">
             </div>
             <div *ngIf="env.value != null" class="form-group form-group-padding">
-              <input [(ngModel)]="env.value" required name="env.value_{{i}}_{{j}}" type="text" size="45" placeholder="环境变量值">
+              <input [(ngModel)]="env.value" required name="env.value_{{i}}_{{j}}" type="text" size="45" [placeholder]="'TMP.ENVIRONMENT_NUM' | translate">
             </div>
             <div *ngIf="env.valueFrom && env.valueFrom.configMapKeyRef" class="form-group form-group-padding">
               <input type="text" size="40" required name="env.valueFrom.configMapKeyRef.name_{{i}}_{{j}}" [(ngModel)]="env.valueFrom.configMapKeyRef.name"
-                placeholder="配置集名称">
+                [placeholder]="'TMP.CONFIGMAP_NAME' | translate">
               <input type="text" size="40" required name="env.valueFrom.configMapKeyRef.key_{{i}}_{{j}}" [(ngModel)]="env.valueFrom.configMapKeyRef.key"
-                placeholder="配置集key">
+                [placeholder]="'TMP.CONFIGMAP_KEY' | translate">
             </div>
             <div *ngIf="env.valueFrom && env.valueFrom.secretKeyRef" class="form-group form-group-padding">
               <input type="text" size="40" required name="env.valueFrom.secretKeyRef.name_{{i}}_{{j}}" [(ngModel)]="env.valueFrom.secretKeyRef.name"
-                placeholder="加密字典名称">
+                [placeholder]="'TMP.SECRET_NAME' | translate">
               <input type="text" size="40" required name="env.valueFrom.secretKeyRef.key_{{i}}_{{j}}" [(ngModel)]="env.valueFrom.secretKeyRef.key"
-                placeholder="加密字典key">
+                [placeholder]="'TMP.SECRET_KEY' | translate">
             </div>
-
           </div>
-
-
         </div>
 
         <div class="container-box">
           <div class="toggle-switch">
             <input type="checkbox" [checked]="container.readinessProbe" (change)="readinessProbeChange(i)" id="readinessProbe{{i}}">
-            <label class="label-level2" [id]="i ? '可用性检查' + i : '可用性检查'" for="readinessProbe{{i}}">可用性检查（建议开启）
+            <label class="label-level2" [id]="i ? '可用性检查' + i : '可用性检查'" for="readinessProbe{{i}}">{{'TMP.USABLE_CHECK' | translate}}
               <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg">
                 <clr-icon shape="info-circle" size="24"></clr-icon>
-                <span class="tooltip-content">定期检查服务状态，只有检查通过才会提供服务，检查失败将会从可用服务列表移除</span>
+                <span class="tooltip-content">{{'TMP.USABLE_MESSAGE' | translate}}</span>
               </a>
             </label>
           </div>
 
           <div *ngIf="container.readinessProbe" style="color:#000">
             <div class="form-group form-group-padding">
-              <label class="col-md-3 form-group-label-override">超时时间
+              <label class="col-md-3 form-group-label-override">{{'TMP.EXTEND_TIME' | translate}}
                 <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-sm">
                   <clr-icon shape="info-circle" size="24"></clr-icon>
-                  <span class="tooltip-content">单位秒，请求超时时间</span>
+                  <span class="tooltip-content">{{'TMP.EXTEND_TIME_MESSAGE' | translate}}</span>
                 </a>
               </label>
               <input type="number" required name="container.readinessProbe.timeoutSeconds_{{i}}" [(ngModel)]="container.readinessProbe.timeoutSeconds"
-                placeholder="单位秒">
-              <label class="col-md-3 form-group-label-override">检查周期
+                [placeholder]="'PLACEHOLDER.SECOND' | translate">
+              <label class="col-md-3 form-group-label-override">{{'TMP.CHECK_CYCLE' | translate}}
                 <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-sm">
                   <clr-icon shape="info-circle" size="24"></clr-icon>
-                  <span class="tooltip-content">单位秒，执行检查间隔</span>
+                  <span class="tooltip-content">{{'TMP.CHECK_CYCLE_MESSAGE'}}</span>
                 </a>
               </label>
               <input type="number" required name="container.readinessProbe.periodSeconds{{i}}" [(ngModel)]="container.readinessProbe.periodSeconds"
-                placeholder="单位秒">
+                [placeholder]="'PLACEHOLDER.SECOND' | translate">
             </div>
             <div class="form-group form-group-padding">
-              <label class="col-md-3 form-group-label-override">失败重试次数</label>
+              <label class="col-md-3 form-group-label-override">{{'TMP.FAIL_NUM' | translate}}</label>
               <input type="number" required name="container.readinessProbe.failureThreshold{{i}}" [(ngModel)]="container.readinessProbe.failureThreshold">
             </div>
 
             <div class="form-group form-group-padding">
-              <label for="readinessProbeType_{{i}}" class="col-md-3 form-group-label-override required">可用性检查方式</label>
+              <label for="readinessProbeType_{{i}}" class="col-md-3 form-group-label-override required">{{'TMP.USABLE_CHECK_WAY' | translate}}</label>
               <div class="select">
                 <select name="readinessProbeType_{{i}}" (change)="readinessProbeTypeChange($event.target.value,i)">
-                  <option value="0" [selected]="container.readinessProbe.httpGet">HTTP请求</option>
-                  <option value="1" [selected]="container.readinessProbe.tcpSocket">TCP端口</option>
-                  <option value="2" [selected]="container.readinessProbe.exec">执行命令</option>
+                  <option value="0" [selected]="container.readinessProbe.httpGet">{{'TMP.HTTP_REQUEST' | translate}}</option>
+                  <option value="1" [selected]="container.readinessProbe.tcpSocket">{{'TMP.TCP_PORT' | translate}}</option>
+                  <option value="2" [selected]="container.readinessProbe.exec">{{'TMP.EXECUTE_COMMAND' | translate}}</option>
                 </select>
               </div>
             </div>
             <div *ngIf="container.readinessProbe.httpGet" class="form-group form-group-padding">
               <input type="number" size="30" required name="container.readinessProbe.httpGet.port_{{i}}" [(ngModel)]="container.readinessProbe.httpGet.port"
-                placeholder="请求HTTP端口">
+                [placeholder]="'TMP.REQUEST_HTTP_PORT' | translate">
               <input type="text" size="70" required name="container.readinessProbe.httpGet.path_{{i}}" [(ngModel)]="container.readinessProbe.httpGet.path"
-                placeholder="请求URL">
+                [placeholder]="'TMP.TCP_PORT' | translate">
             </div>
             <div *ngIf="container.readinessProbe.tcpSocket" class="form-group form-group-padding">
               <input type="number" size="30" required name="container.readinessProbe.tcpSocket.port_{{i}}" [(ngModel)]="container.readinessProbe.tcpSocket.port"
-                placeholder="请求TCP端口">
+                [placeholder]="'TMP.REQUEST_TCP_PORT' | translate">
             </div>
             <div *ngIf="container.readinessProbe.exec">
               <div class="form-group form-group-padding">
-                <textarea name="container.readinessProbe.exec.command_{{i}}" [(ngModel)]="container.readinessProbe.exec.command[0]" placeholder="多个命令换行输入，例如：
-                  /bin/healthz.sh
-                  --arg1
-                  foo
-                  --arg2
-                  bar"></textarea>
+                <textarea name="container.readinessProbe.exec.command_{{i}}" [(ngModel)]="container.readinessProbe.exec.command[0]" [placeholder]="'PLACEHOLDER.COMMAND' | translate"></textarea>
               </div>
 
 
@@ -244,92 +238,82 @@ <h3 class="header-title" id="创建状态副本集模版">创建状态副本集
         <div class="container-box">
           <div class="toggle-switch">
             <input type="checkbox" [checked]="container.livenessProbe" (change)="livenessProbeChange(i)" id="livenessProbe{{i}}">
-            <label class="label-level2" [id]="i ? '存活检查' + i : '存活检查'" for="livenessProbe{{i}}">存活检查
+            <label class="label-level2" [id]="i ? '存活检查' + i : '存活检查'" for="livenessProbe{{i}}">{{'TMP.LIVE_CHECK' | translate}}
               <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg">
                 <clr-icon shape="info-circle" size="24"></clr-icon>
-                <span class="tooltip-content">定期检查容器状态，检查失败将会重启容器（适用于可能假死并需要重启的服务）</span>
+                <span class="tooltip-content">{{'TMP.LIVE_CHECK_MESSAGE' | translate}}</span>
               </a>
             </label>
           </div>
 
           <div *ngIf="container.livenessProbe" style="color:#000">
             <div class="form-group form-group-padding">
-              <label class="col-md-3 form-group-label-override">超时时间
+              <label class="col-md-3 form-group-label-override">{{'TMP.EXTEND_TIME' | translate}}
                 <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-sm">
                   <clr-icon shape="info-circle" size="24"></clr-icon>
-                  <span class="tooltip-content">单位秒，请求超时时间</span>
+                  <span class="tooltip-content">{{'TMP.EXTEND_TIME_MESSAGE' | translate}}</span>
                 </a>
               </label>
               <input type="number" required name="container.livenessProbe.timeoutSeconds_{{i}}" [(ngModel)]="container.livenessProbe.timeoutSeconds"
-                placeholder="单位秒">
-              <label class="col-md-3 form-group-label-override">检查周期
+                [placeholder]="'PLACEHOLDER.SECOND' | translate">
+              <label class="col-md-3 form-group-label-override">{{'TMP.CHECK_CYCLE' | translate}}
                 <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-sm">
                   <clr-icon shape="info-circle" size="24"></clr-icon>
-                  <span class="tooltip-content">单位秒，执行检查间隔</span>
+                  <span class="tooltip-content">{{'TMP.CHECK_CYCLE_MESSAGE'}}</span>
                 </a>
               </label>
               <input type="number" required name="container.livenessProbe.periodSeconds{{i}}" [(ngModel)]="container.livenessProbe.periodSeconds"
-                placeholder="单位秒">
+                [placeholder]="'PLACEHOLDER.SECOND' | translate">
             </div>
             <div class="form-group form-group-padding">
-              <label class="col-md-3 form-group-label-override">失败重试次数</label>
+              <label class="col-md-3 form-group-label-override">{{'TMP.FAIL_NUM' | translate}}</label>
               <input type="number" required name="container.livenessProbe.failureThreshold{{i}}" [(ngModel)]="container.livenessProbe.failureThreshold">
-              <label class="col-md-3 form-group-label-override">检查延迟
+              <label class="col-md-3 form-group-label-override">{{'TMP.CHECK_DELAY' | translate}}
                 <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-md">
                   <clr-icon shape="info-circle" size="24"></clr-icon>
-                  <span class="tooltip-content">单位秒，启动多久之后开始存活检查，适用于启动时间较长的服务</span>
+                  <span class="tooltip-content">{{'TMP.CHECK_DELAY_MESSAGE' | translate}}</span>
                 </a>
               </label>
               <input type="number" required name="container.livenessProbe.initialDelaySeconds{{i}}" [(ngModel)]="container.livenessProbe.initialDelaySeconds"
-                placeholder="单位秒">
+                [placeholder]="'PLACEHOLDER.SECOND' | translate">
             </div>
 
             <div class="form-group form-group-padding">
-              <label for="livenessProbeType_{{i}}" class="col-md-3 form-group-label-override required">可用性检查方式</label>
+              <label for="livenessProbeType_{{i}}" class="col-md-3 form-group-label-override required">{{'TMP.USABLE_CHECK_WAY' | translate}}</label>
               <div class="select">
                 <select name="livenessProbeType_{{i}}" (change)="livenessProbeTypeChange($event.target.value,i)">
-                  <option value="0" [selected]="container.livenessProbe.httpGet">HTTP请求</option>
-                  <option value="1" [selected]="container.livenessProbe.tcpSocket">TCP端口</option>
-                  <option value="2" [selected]="container.livenessProbe.exec">执行命令</option>
+                  <option value="0" [selected]="container.livenessProbe.httpGet">{{'TMP.HTTP_REQUEST' | translate}}</option>
+                  <option value="1" [selected]="container.livenessProbe.tcpSocket">{{'TMP.TCP_PORT' | translate}}</option>
+                  <option value="2" [selected]="container.livenessProbe.exec">{{'TMP.EXECTE_COMMAND' | translate}}</option>
                 </select>
               </div>
             </div>
             <div *ngIf="container.livenessProbe.httpGet" class="form-group form-group-padding">
               <input type="number" size="30" required name="container.livenessProbe.httpGet.port_{{i}}" [(ngModel)]="container.livenessProbe.httpGet.port"
-                placeholder="请求HTTP端口">
+                [placeholder]="'TMP.REQUEST_HTTP_PORT' | translate">
               <input type="text" size="70" required name="container.livenessProbe.httpGet.path_{{i}}" [(ngModel)]="container.livenessProbe.httpGet.path"
-                placeholder="请求URL">
+                [placeholder]="'TMP.TCP_PORT' | translate">
             </div>
             <div *ngIf="container.livenessProbe.tcpSocket" class="form-group form-group-padding">
               <input type="number" size="30" required name="container.livenessProbe.tcpSocket.port_{{i}}" [(ngModel)]="container.livenessProbe.tcpSocket.port"
-                placeholder="请求TCP端口">
+                [placeholder]="'TMP.REQUEST_TCP_PORT' | translate">
             </div>
             <div *ngIf="container.livenessProbe.exec">
               <div class="form-group form-group-padding">
-                <textarea name="container.livenessProbe.exec.command_{{i}}" [(ngModel)]="container.livenessProbe.exec.command[0]" placeholder="多个命令换行输入，例如：
-                  /bin/healthz.sh
-                  --arg1
-                  foo
-                  --arg2
-                  bar"></textarea>
+                <textarea name="container.livenessProbe.exec.command_{{i}}" [(ngModel)]="container.livenessProbe.exec.command[0]" [placeholder]="'PLACEHOLDER.COMMAND' | translate"></textarea>
               </div>
-
-
             </div>
           </div>
         </div>
-
       </div>
     </section>
-
   </form>
-  
 </div>
 <div class="clr-wizard-footer-buttons tpl-bottom" [style.top.px]="top">
-  <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-  <button type="button" class="btn btn-primary" (click)="onAddContainer()">添加容器</button>
-  <button type="button" class="btn btn-primary" (click)="openModal()">高级配置</button>
-  <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
-  <span style="color: red">单实例费用总计：{{totalFee | number:'1.2-2' }}元/月</span>
+  <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+  <button type="button" class="btn btn-primary" (click)="onAddContainer()">{{'BUTTON.ADD_CONTAINER' | translate}}</button>
+  <button type="button" class="btn btn-primary" (click)="openModal()">{{'BUTTON.ADVANCED_CONFIG' | translate}}</button>
+  <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.SUBMIT' | translate}}</button>
+  <span style="color: red">{{'TMP.PRICE_TOTAL' | translate}}{{totalFee | number:'1.2-2' }}{{'UNIT.PRICE' | translate}}</span>
 </div>
 <wayne-ace-editor (outputObj)="saveStatefulset($event)"></wayne-ace-editor>
\ No newline at end of file
diff --git a/src/frontend/src/app/portal/statefulset/create-edit-statefulsettpl/create-edit-statefulsettpl.component.ts b/src/frontend/src/app/portal/statefulset/create-edit-statefulsettpl/create-edit-statefulsettpl.component.ts
index cbfaa88e9..1fdd73cf6 100644
--- a/src/frontend/src/app/portal/statefulset/create-edit-statefulsettpl/create-edit-statefulsettpl.component.ts
+++ b/src/frontend/src/app/portal/statefulset/create-edit-statefulsettpl/create-edit-statefulsettpl.component.ts
@@ -229,7 +229,7 @@ export class CreateEditStatefulsettplComponent implements OnInit, AfterViewInit,
         let tpl = response[2];
         if (tpl) {
           this.statefulsetTpl = tpl.data;
-          // 克隆置空发布说明
+          
           this.statefulsetTpl.description = null;
           this.saveStatefulset(JSON.parse(this.statefulsetTpl.template));
         }
diff --git a/src/frontend/src/app/portal/statefulset/list-event/list-event.component.html b/src/frontend/src/app/portal/statefulset/list-event/list-event.component.html
index 36a54b5cc..8a8955a7e 100644
--- a/src/frontend/src/app/portal/statefulset/list-event/list-event.component.html
+++ b/src/frontend/src/app/portal/statefulset/list-event/list-event.component.html
@@ -3,7 +3,7 @@ <h3 class="modal-title">错误事件</h3>
   <div class="modal-body">
     <hr>
     <clr-datagrid>
-      <clr-dg-placeholder>暂无数据！</clr-dg-placeholder>
+      <clr-dg-placeholder>{{'MESSAGE.NO_MESSAGE' | translate}}</clr-dg-placeholder>
       <clr-dg-column>
         <ng-container *clrDgHideableColumn="{hidden: false}">
           名称
diff --git a/src/frontend/src/app/portal/statefulset/list-pod/list-pod.component.html b/src/frontend/src/app/portal/statefulset/list-pod/list-pod.component.html
index eae404f08..7dd124cef 100644
--- a/src/frontend/src/app/portal/statefulset/list-pod/list-pod.component.html
+++ b/src/frontend/src/app/portal/statefulset/list-pod/list-pod.component.html
@@ -9,7 +9,7 @@ <h3 class="modal-title">
         <label for="toggle_4">数据实时更新: </label>
     </div>
     <clr-datagrid>
-      <clr-dg-placeholder>暂无数据！</clr-dg-placeholder>
+      <clr-dg-placeholder>{{'MESSAGE.NO_MESSAGE' | translate}}</clr-dg-placeholder>
       <clr-dg-column [clrDgField]="'name'">
         <ng-container *clrDgHideableColumn="{hidden: false}">
           名称
@@ -42,7 +42,7 @@ <h3 class="modal-title">
       </clr-dg-column>
       <clr-dg-column>
         <ng-container *clrDgHideableColumn="{hidden: false}">
-          操作
+          {{'TITLE.ACTION' | translate}}
         </ng-container>
       </clr-dg-column>
       <clr-dg-row *clrDgItems="let pod of pods">
@@ -60,7 +60,7 @@ <h3 class="modal-title">
         <clr-dg-cell>
           <button class="wayne-button text" (click)="enterContainer(pod)">进入容器</button>
           <button class="wayne-button text" (click)="podLog(pod)">日志</button>
-          <button class="wayne-button text" (click)="deletePod(pod)">删除</button>
+          <button class="wayne-button text" (click)="deletePod(pod)">{{'BUTTON.DELETE' | translate}}</button>
         </clr-dg-cell>
       </clr-dg-row>
       <clr-dg-footer>
diff --git a/src/frontend/src/app/portal/statefulset/list-statefulset/list-statefulset.component.html b/src/frontend/src/app/portal/statefulset/list-statefulset/list-statefulset.component.html
index 2e233a7a1..67befbabb 100644
--- a/src/frontend/src/app/portal/statefulset/list-statefulset/list-statefulset.component.html
+++ b/src/frontend/src/app/portal/statefulset/list-statefulset/list-statefulset.component.html
@@ -6,35 +6,35 @@
     </ng-container>
   </clr-dg-column>
   <clr-dg-column [clrDgSortBy]="'createTime'" class="col-time">
-    <ng-container *clrDgHideableColumn="showState['创建时间']">
-      创建时间
+    <ng-container *clrDgHideableColumn="showState['create_time']">
+      {{'TITLE.CREATE_TIME' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column class="col-version">
-    <ng-container *clrDgHideableColumn="showState['版本']">
-      版本
+    <ng-container *clrDgHideableColumn="showState['version']">
+      {{'TITLE.VERSION' | translate}}
     </ng-container>
   </clr-dg-column>
   <!-- 防止事件图标换行-->
   <clr-dg-column class="col-cluster">
-    <ng-container *clrDgHideableColumn="showState['上线机房']">
-      上线机房
+    <ng-container *clrDgHideableColumn="showState['online_cluster']">
+      {{'TITLE.ONLINE_CLUSTER' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column [clrDgField]="'description'" class="col-description">
-    <ng-container *clrDgHideableColumn="showState['发布说明']">
-      发布说明
+    <ng-container *clrDgHideableColumn="showState['release_explain']">
+      {{'TITLE.RELEASE_EXPLAIN' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column [clrDgField]="'user'">
-    <ng-container *clrDgHideableColumn="showState['创建者']">
-      创建者
+    <ng-container *clrDgHideableColumn="showState['create_user']">
+      {{'TITLE.CREATE_USER' | translate}}
     </ng-container>
   </clr-dg-column>
   <!-- 防止操作图标换行-->
   <clr-dg-column class="col-operate">
-    <ng-container *clrDgHideableColumn="showState['操作']">
-      操作
+    <ng-container *clrDgHideableColumn="showState['action']">
+      {{'TITLE.ACTION' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-row *ngFor="let statefulsetTpl of statefulsetTpls" [clrDgItem]="statefulsetTpl">
@@ -74,23 +74,23 @@
       <button class="wayne-button text"
          (click)="publishTpl(statefulsetTpl)"
          *ngIf="authService.currentAppPermission.statefulset?.deploy || authService.currentUser.admin">
-         发布</button>
+         {{'BUTTON.RELEASE' | translate}}</button>
       <button class="wayne-button text"
          (click)="statefulsetTplDetail(statefulsetTpl)"
          *ngIf="authService.currentAppPermission.statefulset?.read || authService.currentUser.admin">
-         详情</button>
+         {{'BUTTON.DETAIL' | translate}}</button>
       <button class="wayne-button text"
          (click)="cloneStatefulsetTpl(statefulsetTpl)"
          *ngIf="authService.currentAppPermission.statefulset?.create || authService.currentUser.admin">
-         克隆</button>
+         {{'BUTTON.CLONE' | translate}}</button>
       <button class="wayne-button text"
          *ngIf="!statefulsetTpl.status && (authService.currentAppPermission.statefulset?.delete || authService.currentUser.admin)"
          (click)="deleteStatefulsetTpl(statefulsetTpl)">
-         删除</button>
+         {{'BUTTON.DELETE' | translate}}</button>
       <button class="wayne-button text"
          (click)="offlineStatefulset(statefulsetTpl)"
          *ngIf="statefulsetTpl.status && (authService.currentAppPermission.statefulset.offline || authService.currentUser.admin)">
-         下线</button>
+         {{'BUTTON.DROP' | translate}}</button>
     </clr-dg-cell>
   </clr-dg-row>
 
diff --git a/src/frontend/src/app/portal/statefulset/list-statefulset/list-statefulset.component.ts b/src/frontend/src/app/portal/statefulset/list-statefulset/list-statefulset.component.ts
index caf34b9f6..486e0cbe9 100644
--- a/src/frontend/src/app/portal/statefulset/list-statefulset/list-statefulset.component.ts
+++ b/src/frontend/src/app/portal/statefulset/list-statefulset/list-statefulset.component.ts
@@ -25,6 +25,7 @@ import {Event} from '../../../shared/model/v1/event';
 import {TemplateStatus} from '../../../shared/model/v1/status';
 import {AceEditorService} from '../../../shared/ace-editor/ace-editor.service';
 import {AceEditorMsg} from '../../../shared/ace-editor/ace-editor';
+import {TranslateService} from '@ngx-translate/core';
 
 @Component({
   selector: 'list-statefulset',
@@ -60,6 +61,7 @@ export class ListStatefulsetComponent implements OnInit, OnDestroy {
               private router: Router,
               public authService: AuthService,
               private tplDetailService: TplDetailService,
+              public translate: TranslateService,
               private messageHandlerService: MessageHandlerService) {
     this.subscription = deletionDialogService.confirmationConfirm$.subscribe(message => {
       if (message &&
diff --git a/src/frontend/src/app/portal/statefulset/publish-tpl/publish-tpl.component.html b/src/frontend/src/app/portal/statefulset/publish-tpl/publish-tpl.component.html
index e9a4d60b3..006dbc96a 100644
--- a/src/frontend/src/app/portal/statefulset/publish-tpl/publish-tpl.component.html
+++ b/src/frontend/src/app/portal/statefulset/publish-tpl/publish-tpl.component.html
@@ -4,7 +4,7 @@ <h3 class="modal-title">{{title}}</h3>
     <form #publishForm="ngForm">
       <section class="form-block">
         <div class="form-group" style="padding-left: 100px;">
-          <label class="col-md-3 form-group-label-override required">机房</label>
+          <label class="col-md-3 form-group-label-override required">{{'TITLE.CLUSTER' | translate}}</label>
           <div *ngFor="let cluster of clusters;let i=index" class="checkbox-inline" style="margin-top: 0px">
             <div class="checkbox">
             <input [(ngModel)]="clusterMetas[cluster].checked"
@@ -30,10 +30,10 @@ <h3 class="modal-title">{{title}}</h3>
           </div>
         </div>
         <div *ngIf="actionType==3" class="form-group" style="padding-left: 135px;">
-          <label class="col-md-3 form-group-label-override">强制下线
+          <label class="col-md-3 form-group-label-override">{{'ACTION.FORCE_DROP' | translate}} 
             <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg">
               <clr-icon shape="info-circle" size="24"></clr-icon>
-              <span class="tooltip-content">确认资源已经不存在于Kubernetes，可以打开此开关强制下线</span>
+              <span class="tooltip-content">{{'MESSAGE.FORCE_DROP' | translate}} </span>
             </a>
           </label>
           <div class="toggle-switch" style="top: .25rem">
@@ -44,8 +44,8 @@ <h3 class="modal-title">{{title}}</h3>
       </section>
     </form>
     <div class="modal-footer">
-      <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
-      <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">确定</button>
+      <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
+      <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">{{'BUTTON.CONFIRM' | translate}}</button>
     </div>
   </div>
 
diff --git a/src/frontend/src/app/portal/statefulset/statefulset.component.html b/src/frontend/src/app/portal/statefulset/statefulset.component.html
index 6a53ca40a..fc98a1029 100644
--- a/src/frontend/src/app/portal/statefulset/statefulset.component.html
+++ b/src/frontend/src/app/portal/statefulset/statefulset.component.html
@@ -1,5 +1,5 @@
 <button (click)="createStatefulset()" class="wayne-button primary" *ngIf="authService.currentAppPermission.statefulset?.create || authService.currentUser.admin">
-  创建状态副本集
+  {{'STATEFULSET.CREATE' | translate}}
 </button>
 <create-edit-statefulset (create)="create($event)"></create-edit-statefulset>
 <div *ngIf="statefulsetId && statefulsets?.length>0">
@@ -16,32 +16,32 @@
   <div class="table-search">
     <div class="table-search-left">
       <button (click)="createStatefulsetTpl()" class="wayne-button normal" *ngIf="authService.currentAppPermission.statefulset?.create || authService.currentUser.admin">
-        创建状态副本集模版
+        {{'STATEFULSET.CREATE_TMP' | translate}}
       </button>
       <button (click)="editStatefulset()" class="wayne-button normal" *ngIf="authService.currentAppPermission.statefulset?.update || authService.currentUser.admin">
-        编辑状态副本集
+        {{'STATEFULSET.EDIT' | translate}}
       </button>
       <button (click)="publishHistory()" class="wayne-button normal" *ngIf="authService.currentAppPermission.statefulset?.read || authService.currentUser.admin">
-        发布历史
+        {{'BUTTON.HISTORY' | translate}}
       </button>
       <button (click)="deleteStatefulset()" class="wayne-button normal" *ngIf="authService.currentAppPermission.statefulset.offline || authService.currentUser.admin">
-        删除状态副本集
+        {{'STATEFULSET.DELETE' | translate}}
       </button>
       <wayne-filter-box (confirm)="confirmEvent()" (cancel)="cancelEvent()">
         <wayne-checkbox-group class=".filter-body-content" [(ngModel)]="showList">
-          <wayne-checkbox>创建时间</wayne-checkbox>
-          <wayne-checkbox>版本</wayne-checkbox>
-          <wayne-checkbox>上线机房</wayne-checkbox>
-          <wayne-checkbox>发布说明</wayne-checkbox>
-          <wayne-checkbox>创建者</wayne-checkbox>
-          <wayne-checkbox>操作</wayne-checkbox>
+          <wayne-checkbox value="create_time">{{'TITLE.CREATE_TIME' | translate}}</wayne-checkbox>
+          <wayne-checkbox value="version">{{'TITLE.VERSION' | translate}}</wayne-checkbox>
+          <wayne-checkbox value="online_cluster">{{'TITLE.ONLINE_CLUSTER' | translate}}</wayne-checkbox>
+          <wayne-checkbox value="release_explain">{{'TITLE.RELEASE_EXPLAIN' | translate}}</wayne-checkbox>
+          <wayne-checkbox value="create_user">{{'TITLE.CREATE_USER' | translate}}</wayne-checkbox>
+          <wayne-checkbox value="action">{{'TITLE.ACTION' | translate}}</wayne-checkbox>
         </wayne-checkbox-group>
       </wayne-filter-box>
     </div>
     <div class="table-search-right">
       <div class="toggle-switch">
         <input type="checkbox" id="toggle_1" [(ngModel)]="isOnline" (change)="onlineChange()">
-        <label for="toggle_1">只显示上线模板</label>
+        <label for="toggle_1">{{'MESSAGE.ONLY_ONLINE_TEMPLATE' | translate}}</label>
       </div>
     </div>
   </div>
diff --git a/src/frontend/src/app/portal/statefulset/statefulset.component.ts b/src/frontend/src/app/portal/statefulset/statefulset.component.ts
index df7b76352..4a168f1e5 100644
--- a/src/frontend/src/app/portal/statefulset/statefulset.component.ts
+++ b/src/frontend/src/app/portal/statefulset/statefulset.component.ts
@@ -35,14 +35,15 @@ import {KubeStatefulSet} from '../../shared/model/v1/kubernetes/statefulset';
 import {TemplateStatus} from '../../shared/model/v1/status';
 import {TabDragService} from '../../shared/client/v1/tab-drag.service';
 import {OrderItem} from '../../shared/model/v1/order';
+import {TranslateService} from '@ngx-translate/core';
 
 const showState = {
-  '创建时间': {hidden: false},
-  '版本': {hidden: false},
-  '上线机房': {hidden: false},
-  '发布说明': {hidden: false},
-  '创建者': {hidden: false},
-  '操作': {hidden: false}
+  'create_time': {hidden: false},
+  'version': {hidden: false},
+  'online_cluster': {hidden: false},
+  'release_explain': {hidden: false},
+  'create_user': {hidden: false},
+  'action': {hidden: false}
 };
 
 @Component({
@@ -84,7 +85,8 @@ export class StatefulsetComponent implements AfterContentInit, OnDestroy, OnInit
               private cdr: ChangeDetectorRef,
               private appService: AppService,
               private tabDragService: TabDragService,
-               private el: ElementRef,
+              private el: ElementRef,
+              public translate: TranslateService,
               private deletionDialogService: ConfirmationDialogService,
               private clusterService: ClusterService,
               private messageHandlerService: MessageHandlerService) {
diff --git a/src/frontend/src/app/shared/ace-editor/ace-editor.component.html b/src/frontend/src/app/shared/ace-editor/ace-editor.component.html
index 818de5738..5dccf87e3 100644
--- a/src/frontend/src/app/shared/ace-editor/ace-editor.component.html
+++ b/src/frontend/src/app/shared/ace-editor/ace-editor.component.html
@@ -7,7 +7,7 @@ <h3 class="modal-title">{{title}}
     <wayne-ace-editor-box (modalChange)="modalInfo($event)"></wayne-ace-editor-box>
   </div>
   <div [hidden]="hiddenFooter" class="modal-footer">
-    <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
+    <button type="button" class="btn btn-outline" (click)="onCancel()">{{'BUTTON.CANCEL' | translate}}</button>
     <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">保存</button>
   </div>
 </clr-modal>
diff --git a/src/frontend/src/app/shared/confirmation-dialog/confirmation-dialog.component.html b/src/frontend/src/app/shared/confirmation-dialog/confirmation-dialog.component.html
index 534a173cd..3d5afc155 100644
--- a/src/frontend/src/app/shared/confirmation-dialog/confirmation-dialog.component.html
+++ b/src/frontend/src/app/shared/confirmation-dialog/confirmation-dialog.component.html
@@ -8,19 +8,19 @@ <h3 class="modal-title" class="confirmation-title" style="margin-top: 0px;">{{di
     </div>
     <div class="modal-footer" [ngSwitch]="buttons">
        <ng-template [ngSwitchCase]="0">
-        <button type="button" class="btn btn-outline" (click)="cancel()">取消</button>
-        <button type="button" class="btn btn-primary" (click)="confirm()">确定</button>
+        <button type="button" class="btn btn-outline" (click)="cancel()">{{'BUTTON.CANCEL' | translate}}</button>
+        <button type="button" class="btn btn-primary" (click)="confirm()">{{'BUTTON.CONFIRM' | translate}}</button>
        </ng-template>
        <ng-template [ngSwitchCase]="1">
-        <button type="button" class="btn btn-outline" (click)="cancel()">取消</button>
-        <button type="button" class="btn btn-primary" (click)="confirm()">确定</button>
+        <button type="button" class="btn btn-outline" (click)="cancel()">{{'BUTTON.CANCEL' | translate}}</button>
+        <button type="button" class="btn btn-primary" (click)="confirm()">{{'BUTTON.CONFIRM' | translate}}</button>
        </ng-template>
        <ng-template [ngSwitchCase]="2">
-        <button type="button" class="btn btn-outline" (click)="cancel()">取消</button>
-        <button type="button" class="btn btn-danger" (click)="confirm()">确定</button>
+        <button type="button" class="btn btn-outline" (click)="cancel()">{{'BUTTON.CANCEL' | translate}}</button>
+        <button type="button" class="btn btn-danger" (click)="confirm()">{{'BUTTON.CONFIRM' | translate}}</button>
        </ng-template>
        <ng-template [ngSwitchCase]="3">
-        <button type="button" class="btn btn-primary" (click)="cancel()">取消</button>
+        <button type="button" class="btn btn-primary" (click)="cancel()">{{'BUTTON.CANCEL' | translate}}</button>
        </ng-template>
     </div>
 </clr-modal>
diff --git a/src/frontend/src/app/shared/dual-list-box/dual-list-box.component.ts b/src/frontend/src/app/shared/dual-list-box/dual-list-box.component.ts
index 5fa11fde6..5c6ca941c 100644
--- a/src/frontend/src/app/shared/dual-list-box/dual-list-box.component.ts
+++ b/src/frontend/src/app/shared/dual-list-box/dual-list-box.component.ts
@@ -3,6 +3,7 @@ import {ControlValueAccessor, FormBuilder, FormControl, FormGroup, NG_VALUE_ACCE
 import 'rxjs/Rx';
 import * as _ from 'lodash';
 import {IItemsMovedEvent, IListBoxItem} from './models';
+import {TranslateService} from '@ngx-translate/core';
 
 @Component({
   selector: 'ng2-dual-list-box',
@@ -81,7 +82,7 @@ export class DualListBoxComponent implements OnInit, ControlValueAccessor {
   _onTouched = () => {
   };
 
-  constructor(public fb: FormBuilder) {
+  constructor(public fb: FormBuilder, public translate: TranslateService) {
     this.listBoxForm = this.fb.group({
       availableListBox: this.availableListBoxControl,
       selectedListBox: this.selectedListBoxControl,
diff --git a/src/frontend/src/app/shared/filter-box/filter-box.component.html b/src/frontend/src/app/shared/filter-box/filter-box.component.html
index 8a8801647..89839065c 100644
--- a/src/frontend/src/app/shared/filter-box/filter-box.component.html
+++ b/src/frontend/src/app/shared/filter-box/filter-box.component.html
@@ -1,15 +1,15 @@
-<button class="wayne-button normal" (click)="open()" [class.active]="show">展示列</button>
+<button class="wayne-button normal" (click)="open()" [class.active]="show">{{'TITLE.SHOW_COLUMN' | translate}}</button>
 <ng-container *ngIf="show">
-  <wayne-box class="filter-box" style="width: 190px;">
+  <wayne-box class="filter-box">
     <div class="filter-header">
-      请勾选需要展示的列
+      {{'ACTION.CHOOSE_SHOW_COLUMN' | translate}}
     </div>
     <div class="filter-body">
       <ng-content></ng-content>
     </div>
     <div class="filter-footer">
-      <button class="wayne-button primary" (click)="_confirm()">确定</button>
-      <button class="wayne-button default" (click)="_cancel()">取消</button>
+      <button class="wayne-button primary" (click)="_confirm()">{{'BUTTON.CONFIRM' | translate}}</button>
+      <button class="wayne-button default" (click)="_cancel()">{{'BUTTON.CANCEL' | translate}}</button>
     </div>
   </wayne-box>
 </ng-container>
diff --git a/src/frontend/src/app/shared/filter-box/filter-box.component.scss b/src/frontend/src/app/shared/filter-box/filter-box.component.scss
index 6acf34da7..c0e60819c 100644
--- a/src/frontend/src/app/shared/filter-box/filter-box.component.scss
+++ b/src/frontend/src/app/shared/filter-box/filter-box.component.scss
@@ -2,9 +2,10 @@
   display: inline-block;
   position: relative;
   .filter-box{
+    width: 197px;
     padding: 15px;
     position: absolute;
-    left: 85px;
+    right: -200px;
     top: -12px;
     z-index: 10;
     &:before{
diff --git a/src/frontend/src/app/shared/filter-box/filter-box.component.ts b/src/frontend/src/app/shared/filter-box/filter-box.component.ts
index 8ee51ed93..b11103108 100644
--- a/src/frontend/src/app/shared/filter-box/filter-box.component.ts
+++ b/src/frontend/src/app/shared/filter-box/filter-box.component.ts
@@ -1,5 +1,7 @@
 import {Component, Inject, Output, EventEmitter, Input, OnInit} from '@angular/core';
 import {DOCUMENT, EventManager} from '@angular/platform-browser';
+import {TranslateService} from '@ngx-translate/core';
+
 @Component({
   selector: 'wayne-filter-box',
   templateUrl: './filter-box.component.html',
@@ -13,7 +15,10 @@ export class FilterBoxComponent implements OnInit{
   @Output() cancel = new EventEmitter<any>();
   eventTarget: any;
 
-  constructor(@Inject(DOCUMENT) private document: any, private eventManage: EventManager) {
+  constructor(
+    @Inject(DOCUMENT) private document: any, 
+    private eventManage: EventManager,
+    public translate: TranslateService) {
   }
 
   open() {
diff --git a/src/frontend/src/app/shared/paginate/paginate.component.html b/src/frontend/src/app/shared/paginate/paginate.component.html
index 158aa556a..c3eaad75c 100644
--- a/src/frontend/src/app/shared/paginate/paginate.component.html
+++ b/src/frontend/src/app/shared/paginate/paginate.component.html
@@ -4,11 +4,11 @@
       <wayne-option *ngFor="let pagesize of pageSizes" [value]="pagesize">{{pagesize}}</wayne-option>
     </wayne-select>
   </ng-container>
-  共{{total}} 条记录
+  <span style="margin-left:5px;" [translate]="'PAGE.TOTAL'" [translateParams]="{value: total}"></span>
   <ng-container *ngIf="total && total > size">
-    <wayne-select [(ngModel)]="current" placeholder="点击选择" [readonly]="true" style="width: 40px; height: 24px;margin-left: 12px;">
+    <wayne-select [(ngModel)]="current" [placeholder]="'PLACEHOLDER.CHOOSE' | translate" [readonly]="true" style="width: 40px; height: 24px;margin-left: 12px;">
       <wayne-option *ngFor="let i of pageList" [value]="i">{{i}}</wayne-option>
-    </wayne-select> / {{lastPage}} 页
+    </wayne-select> / {{lastPage}} {{'PAGE.PAGE' | translate}}
   </ng-container>
   <clr-dg-pagination #pagination [(clrDgPage)]="current" [clrDgPageSize]="size" [clrDgLastPage]="lastPage"
     [clrDgTotalItems]="total"></clr-dg-pagination>
diff --git a/src/frontend/src/app/shared/paginate/paginate.component.ts b/src/frontend/src/app/shared/paginate/paginate.component.ts
index f2b8ea5d9..dbf328016 100644
--- a/src/frontend/src/app/shared/paginate/paginate.component.ts
+++ b/src/frontend/src/app/shared/paginate/paginate.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import {StorageService} from '../client/v1/storage.service';
+import {TranslateService} from '@ngx-translate/core';
 
 @Component({
   selector: 'wayne-paginate',
@@ -54,7 +55,10 @@ export class PaginateComponent implements OnInit {
 	get showSize() {
 		return this.pageSizes !== undefined;
 	};
-  constructor(private storage: StorageService) {
+  constructor(
+		private storage: StorageService,
+		public translate: TranslateService
+		) {
 	}
 
   ngOnInit() {
diff --git a/src/frontend/src/app/shared/shared.module.ts b/src/frontend/src/app/shared/shared.module.ts
index 35e946392..b93a00e99 100644
--- a/src/frontend/src/app/shared/shared.module.ts
+++ b/src/frontend/src/app/shared/shared.module.ts
@@ -46,11 +46,13 @@ import {CheckboxGroupComponent} from './checkbox-group/checkbox-group.component'
 import {DropDownComponent} from './dropdown/dropdown.component';
 import {DropdownItemComponent} from './dropdown/item/dropdown-item.component';
 import {RelativeTimeFilterPipe} from './pipe/relative-time.filter.pipe';
+import {TranslateModule, TranslatePipe} from "@ngx-translate/core";
 
 @NgModule({
   imports: [
     BrowserAnimationsModule,
     RouterModule,
+    TranslateModule,
     BrowserModule,
     FormsModule,
     HttpClientModule,
@@ -119,7 +121,8 @@ import {RelativeTimeFilterPipe} from './pipe/relative-time.filter.pipe';
     CheckboxGroupComponent,
     DropDownComponent,
     DropdownItemComponent,
-    RelativeTimeFilterPipe
+    RelativeTimeFilterPipe,
+    TranslateModule
   ],
   providers: [
     TipService,
diff --git a/src/frontend/src/assets/i18n/en.json b/src/frontend/src/assets/i18n/en.json
new file mode 100644
index 000000000..e35b15875
--- /dev/null
+++ b/src/frontend/src/assets/i18n/en.json
@@ -0,0 +1,109 @@
+{
+    "NAV": {
+        "LANG": "Language"
+    },
+    "MESSAGE": {
+        "READED": "Readed",
+        "UNREAD": "Unread",
+        "SEND": "broadcast",
+        "ANNOUNCEMENT": "announcement",
+        "NONE": "no message"
+    },
+    "BUTTON": {
+        "CANCEL": "Cancel",
+        "OK": "OK",
+        "DELETE": "DELETE",
+        "LOG_IN": "LOG IN",
+        "SIGN_UP_LINK": "Sign up for an account",
+        "SIGN_UP": "SIGN UP",
+        "CONFIRM": "Confirm",
+        "SEND": "SEND",
+        "SAVE": "SAVE",
+        "TEST_MAIL": "TEST MAIL SERVER",
+        "CLOSE": "CLOSE",
+        "TEST_LDAP": "TEST LDAP SERVER",
+        "MORE_INFO": "More info...",
+        "YES": "YES",
+        "NO": "NO",
+        "NEGATIVE": "NEGATIVE",
+        "COPY": "COPY",
+        "EDIT": "EDIT",
+        "SWITCH": "SWITCH",
+        "REPLICATE": "REPLICATE",
+        "ACTIONS": "Actions",
+        "BROWSE": "Browse",
+        "UPLOAD": "Upload",
+        "NO_FILE": "No file selected"
+    },
+    "USER": {},
+    "ACCOUNT": {
+        "GO_BACK": "Go Back",
+        "LOGOUT": "Log Out"
+    },
+    "MENU": {
+        "TEST": 123,
+        "DEPARTMENT": "Department",
+        "PRODUCT": "App",
+        "MEMBER": "Member",
+        "OVERVIEW": "Overview",
+        "SOURCE_STAT": "Source Stat",
+        "RELEASE_RECORD": "Release Record",
+        "DEPLOYMENT": "Deployment",
+        "STATEFULSET": "Statefulset",
+        "DAEMONSET": "Daemonset",
+        "CRONJOB": "Cronjob",
+        "SERVICE": "Service",
+        "CONFIGMAP": "Configmap",
+        "SECRET": "Secret"
+    },
+    "TITLE": {
+        "CREATE_APP": "Create App",
+        "DEPARTMENT_NAME": "Department Name",
+        "CREATE_TIME": "Create Time",
+        "CPU_USAGE": "CPU Usage(Core)",
+        "CPU_USAGE_SHORT": "CPU (C)",
+        "MEMORY_USAGE": "Memory Usage(G)",
+        "MEMORY_USAGE_SHORT": "Mem (G)",
+        "DEPLOY_FREQ": "Deployment Release Frequence",
+        "LATE_DAY": "Lately {{value}} Days",
+        "ALL_CONTENT": "All Content",
+        "COLLECTED": "Collected",
+        "SHOW_COLUMN": "Show Column",
+        "NAME": "Name",
+        "DESCRIPTION": "Description",
+        "CREATE_USER": "Create User",
+        "ACTION": "Action",
+        "LIST": "List",
+        "ROLE": "Role",
+        "EXPIRE_TIME": "Expire Time",
+        "STATUS": "Status",
+        "METADATA": ""
+    },
+    "ACTION": {
+        "UNFOLD": "UnFold",
+        "FOLD": "Fold",
+        "COLLECT": "Collect",
+        "CANCEL_COLLECTED": "UnCollected",
+        "DETAIL": "Detail",
+        "MONITOR": "Monitor",
+        "EDIT": "Edit",
+        "DELETE": "Delete",
+        "CHOOSE_SHOW_COLUMN": "Choose Columns",
+        "CREATE": "Create"
+    },
+    "PLACEHOLDER": {
+        "PRODUCT": "Click Here to filter Product",
+        "CHOOSE": "Click Here to Choose",
+        "APP_NAME": "",
+        "EXPIRE_TIME": ""
+    },
+    "PAGE": {
+        "PAGE": "Pages",
+        "TOTAL": "Total {{value}}"
+    },
+    "OTHER": "Other",
+    "OF": "of",
+    "RULE": {
+        "REGEXT": ""
+    }
+}
\ No newline at end of file
diff --git a/src/frontend/src/assets/i18n/zh-Hans.json b/src/frontend/src/assets/i18n/zh-Hans.json
new file mode 100644
index 000000000..5cb58a00f
--- /dev/null
+++ b/src/frontend/src/assets/i18n/zh-Hans.json
@@ -0,0 +1,292 @@
+{
+  "NAV": {
+    "LANG": "语言"
+  },
+  "MESSAGE": {
+    "READED": "已读",
+    "UNREAD": "未读",
+    "SEND": "广播了",
+    "ANNOUNCEMENT": "公告",
+    "NONE": "无通知",
+    "NO_USER": "用户不存在",
+    "ONLY_ONLINE_TEMPLATE": "只显示上线模板",
+    "NO_MESSAGE": "暂无数据！",
+    "CPU": "请填写CPU限制",
+    "CPU_PERCENT": "请填写正确CPU限制百分比",
+    "MEMORY": "请填写内存限制份数",
+    "MEMORY_PERCENT": "请填写正确内存限制百分比",
+    "REPLICA": "请填写副本数限制",
+    "DATA_CONTENT": "数据内容",
+    "FORCE_DROP": "确认资源已经不存在于Kubernetes，可以打开此开关强制下线"
+  },
+  "LIMIT": {
+    "DELOYMENT": "部署份数超过系统最大限制",
+    "CPU": "CPU限制",
+    "CPU_PERCENT": "CPU限制百分比",
+    "MEMORY": "内存限制",
+    "MEMORY_PERCENT": "内存限制百分比",
+    "REPLICA": "副本数限制"
+  },
+  "BUTTON": {
+    "CANCEL": "取消",
+    "OK": "OK",
+    "DELETE": "删除",
+    "SUBMIT": "提交",
+    "LOG_IN": "LOG IN",
+    "SIGN_UP_LINK": "Sign up for an account",
+    "SIGN_UP": "SIGN UP",
+    "CONFIRM": "确认",
+    "SEND": "SEND",
+    "SAVE": "SAVE",
+    "TEST_MAIL": "TEST MAIL SERVER",
+    "CLOSE": "CLOSE",
+    "TEST_LDAP": "TEST LDAP SERVER",
+    "MORE_INFO": "More info...",
+    "YES": "YES",
+    "NO": "NO",
+    "NEGATIVE": "NEGATIVE",
+    "COPY": "COPY",
+    "EDIT": "编辑",
+    "SWITCH": "SWITCH",
+    "REPLICATE": "REPLICATE",
+    "ACTIONS": "Actions",
+    "BROWSE": "Browse",
+    "UPLOAD": "Upload",
+    "NO_FILE": "No file selected",
+    "HISTORY": "发布历史",
+    "RELEASE": "发布",
+    "RESTART": "重启",
+    "DETAIL": "详情",
+    "CLONE": "克隆",
+    "DROP": "下线",
+    "ADD_CONTAINER": "添加容器",
+    "ADVANCED_CONFIG": "高级配置",
+    "LANG_UP": "挂起"
+  },
+  "USER": {
+  },
+  "ACCOUNT": {
+    "GO_BACK": "进入后台",
+    "LOGOUT": "注销登录"
+  },
+  "MENU": {
+    "DEPARTMENT": "部门概览",
+    "PRODUCT": "项目列表",
+    "APP": "项目",
+    "MEMBER": "成员列表",
+    "OVERVIEW": "概览",
+    "SOURCE_STAT": "资源统计",
+    "RELEASE_RECORD": "上线记录",
+    "DEPLOYMENT": "部署",
+    "STATEFULSET": "状态副本集",
+    "DAEMONSET": "守护进程集",
+    "CRONJOB": "计划任务",
+    "SERVICE": "负载均衡",
+    "CONFIGMAP": "配置集",
+    "SECRET": "加密字典"
+  },
+  "TITLE": {
+    "CREATE_APP": "创建项目",
+    "DEPARTMENT_NAME": "部门名称",
+    "CREATE_TIME": "创建时间",
+    "CPU_USAGE": "CPU 使用(核)",
+    "CPU_USAGE_SHORT": "cpu使用(核)",
+    "MEMORY_USAGE": "内存使用(G)",
+    "MEMORY_USAGE_SHORT": "内存使用(G)",
+    "DEPLOY_FREQ": "部署上线频数",
+    "LATE_DAY": "最近 {{value}} 天",
+    "ALL_CONTENT": "所有内容",
+    "COLLECTED": "已收藏",
+    "SHOW_COLUMN": "展示列",
+    "USER": "用户",
+    "NAME": "名称",
+    "DESCRIPTION": "描述",
+    "CREATE_USER": "创建者",
+    "ACTION": "操作",
+    "LIST": "列表",
+    "ROLE": "角色",
+    "EXPIRE_TIME": "过期时间",
+    "STATUS": "启用状态",
+    "METADATA": "元数据",
+    "MEMBER_LIST": "部门用户列表",
+    "MEMBER_CONTECT": "关联部门用户",
+    "NAMESPACE": "命名空间",
+    "GROUP": "所属群组",
+    "AVAIL_ITEM": "可选项",
+    "CHOOSED_ITEM": "已选项",
+    "EXPLAIN": "说明",
+    "TEMPLATE": "模板",
+    "VERSION": "版本",
+    "CLUSTER": "机房",
+    "RELEASE": "发布",
+    "ONLINE_CLUSTER": "上线机房",
+    "MESSAGE": "信息",
+    "RELEASE_EXPLAIN": "发布说明",
+    "SCHEDULING_INTERVAL": "调度间隔",
+    "CONFIG_CLUSTER": "配置机房"
+  },
+  "TMP": {
+    "CONTAINER_NAME": "容器名称",
+    "RELEASE_MESSAGE": "发布信息",
+    "RELEASE_EXPLAIN": "发布说明",
+    "UPDATE_STRATEGY": "更新策略",
+    "UPDATE_WAY": "更新方式",
+    "DELETE_UPDATE": "仅删除时更新",
+    "SCROLL_UPDATE": "滚动更新",
+    "REBUILD": "删除重建",
+    "DELETE_CONTAINER": "删除容器",
+    "SCROLL_NUM": "滚动数量",
+    "CORE_NUM": "CPU核数",
+    "MAX_LIMIT": "最大不可用",
+    "CONTAINER_CONFIG": "容器配置",
+    "IMAGE_CONFIG": "镜像配置",
+    "CONTAINER": "容器",
+    "IMAGE_ADDRESS": "镜像地址",
+    "MEMORY_NUM": "内存容量",
+    "ENVIRONMENT_VAR": "环境变量配置",
+    "ADD_GROUP": "批量加载",
+    "ADD_ONE": "逐个加载",
+    "LOAD_GROUP": "批量加载",
+    "LOAD_CONFIGMAP": "从配置集加载",
+    "LOAD_SECRET": "从加密字典加载",
+    "ADD_ENVIRONMENT": "添加环境变量",
+    "DELETE_ENVIRONMENT": "删除环境变量",
+    "CONFIGMAP_NAME": "配置集名称",
+    "SECRET_NAME": "加密字典名称",
+    "LOAD_ENVIRONMENT": "自定义环境变量",
+    "ENVIRONMENT_NAME": "环境变量名称",
+    "ENVIRONMENT_NUM": "环境变量值",
+    "CONFIGMAP_KEY": "配置集key",
+    "SECRET_KEY": "加密字典key",
+    "USABLE_CHECK": "可用性检查（建议开启）",
+    "EXTEND_TIME": "超时时间",
+    "CHECK_CYCLE": "检查周期",
+    "FAIL_NUM": "失败重试次数",
+    "USABLE_CHECK_WAY": "可用性检查方式",
+    "HTTP_REQUEST": "HTTP请求",
+    "TCP_PORT": "TCP端口",
+    "EXECUTE_COMMAND": "执行命令",
+    "REQUEST_HTTP_PORT": "请求HTTP端口",
+    "REQUEST_URL": "请求URL",
+    "REQUEST_TCP_PORT": "请求TCP端口",
+    "LIVE_CHECK": "存活检查",
+    "CHECK_DELAY": "检查延迟",
+    "LIFE_CYCLE": "生命周期",
+    "NOT_USE": "不启用",
+    "SAFE_QUIT": "安全退出",
+    "PRICE_TOTAL": "单实例费用总计：",
+    "LOAD_GROUP_MESSAGE": "批量从配置集或加密字典加载环境变量",
+    "SUPPORT_ENVIRONMENT_MESSAGE": "其它类型的环境变量只支持高级模式编辑",
+    "USABLE_MESSAGE": "定期检查服务状态，只有检查通过才会提供服务，检查失败将会从可用服务列表移除",
+    "EXTEND_TIME_MESSAGE": "单位秒，请求超时时间",
+    "CHECK_CYCLE_MESSAGE": "单位秒，执行检查间隔",
+    "LIVE_CHECK_MESSAGE": "定期检查容器状态，检查失败将会重启容器（适用于可能假死并需要重启的服务）",
+    "CHECK_DELAY_MESSAGE": "单位秒，启动多久之后开始存活检查，适用于启动时间较长的服务",
+    "LIFE_CYCLE_MESSAGE": "容器生命周期钩子，可以在postStart/preStop两个阶段定义额外的操作"
+  },
+  "CREATE": {
+
+  },
+  "ACTION": {
+    "UNFOLD": "展开",
+    "FOLD": "收起",
+    "COLLECT": "收藏",
+    "CANCEL_COLLECTED": "取消收藏",
+    "DETAIL": "详情",
+    "MONITOR": "监控",
+    "EDIT": "编辑",
+    "DELETE": "删除",
+    "CHOOSE_SHOW_COLUMN": "请勾选需要展示的列",
+    "CREATE": "创建",
+    "LOOK_UP": "查看",
+    "DELETE_DATA": "删除数据",
+    "ADD_DATA": "添加数据",
+    "FORCE_DROP": "强制下线"
+  },
+  "UNIT": {
+    "CORE": "核",
+    "PRICE": "元/月",
+    "PIECE": "份",
+    "CPU": "单位个",
+    "MEMORY": "单位 G"
+  },
+  "PLACEHOLDER": {
+    "PRODUCT": "点击输入筛选过滤项目",
+    "CHOOSE": "点击选择",
+    "ENGLISH_NAME": "英文小写",
+    "APP_NAME": "英文小写，中划线分隔",
+    "EXPIRE_TIME": "单位秒，0代表永久有效",
+    "ENVIRONMENT": "为所有环境变量添加相同的前缀，可为空",
+    "SECOND": "单位秒",
+    "COMMAND": "多个命令换行输入，例如: \n/bin/healthz.sh\n--arg1\nfoo\n--arg2\nbar",
+    "CONFIG_KEY": "配置key",
+    "CONFIG_VALUE": "配置value",
+    "DICT_KEY": "字典key",
+    "DICT_VALUE": "字典value",
+    "SELECTOR_NAME": "selector名称",
+    "SELECTOR_VALUE": "selector值"
+  },
+  "PAGE": {
+    "PAGE": "页",
+    "TOTAL": "共{{value}}条记录"
+  },
+  "RULE": {
+    "REGEXT": "不符合规范，验证规则",
+    "SCROLL": "滚动更新中最多可超过指定实例的总数量,数字或百分比",
+    "NUMBER": "数量应为数字或百分比",
+    "CONTAINER": "英文，dns域名规则",
+    "MEMORY": "内存大小应该在0~{{value}}G之间",
+    "CPU": "CPU大小应该在0~{{value}}核之间"
+  },
+  "DEPLOYMENT": {
+    "CREATE": "创建部署",
+    "CREATE_TMP": "创建部署模板",
+    "EDIT": "编辑部署",
+    "DELETE": "删除部署"
+  },
+  "STATEFULSET": {
+    "CREATE": "创建状态副本集",
+    "CREATE_TMP": "创建状态副本集模板",
+    "EDIT": "编辑状态副本集",
+    "DELETE": "删除状态副本集"
+  },
+  "DAEMONSET": {
+    "CREATE": "创建守护进程集",
+    "CREATE_TMP": "创建守护进程集模板",
+    "EDIT": "编辑守护进程集",
+    "DELETE": "删除守护进程集"
+  },
+  "CRONJOB": {
+    "CREATE": "创建计划任务",
+    "CREATE_TMP": "创建计划任务模板",
+    "EDIT": "编辑计划任务",
+    "DELETE": "删除计划任务",
+    "LIST": "计划任务列表",
+    "DELETE_LIST": "已删除计划任务列表"
+  },
+  "CONFIGMAP": {
+    "CREATE": "创建配置集",
+    "CREATE_TMP": "创建配置集模板",
+    "EDIT": "编辑配置集",
+    "DELETE": "删除配置集"
+  },
+  "SECRET": {
+    "CREATE": "创建加密字典",
+    "CREATE_TMP": "创建加密字典模板",
+    "EDIT": "编辑加密字典",
+    "DELETE": "删除加密字典"
+  },
+  "PVC": {
+    "CREATE": "创建PVC",
+    "CREATE_TMP": "创建PVC模板",
+    "EDIT": "编辑PVC",
+    "DELETE": "删除PVC",
+    "CONTAINER_NUM": "容量大小",
+    "ACCESS_PATTERN": "访问模式",
+    "ASSOCIATED_LABEL": "关联标签",
+    "DELETE_LABEL": "删除标签",
+    "ADD_LABEL": "添加标签"
+  },
+  "OTHER": "其他",
+  "OF": "的"
+}
diff --git a/src/frontend/src/component/dropdown.scss b/src/frontend/src/component/dropdown.scss
index 3d85112b6..68f3bb49e 100644
--- a/src/frontend/src/component/dropdown.scss
+++ b/src/frontend/src/component/dropdown.scss
@@ -15,5 +15,6 @@
   }
   .nowrap .inner > * {
     display: block;
+    white-space: nowrap;
   }
 }