云脑镜像增加国际化

web_src/js/components/i18n/lang/en.js

@@ -42,6 +42,32 @@ const en = {
         create_version_model:'Create a new version of the model',
         canceled_operation:'You have canceled the operation',
         successfully_deleted:'Successfully deleted'
+  },
+  cloudeBrainMirror:{
+      cloud_brain_mirror: 'Cloud Brain Mirror',
+      public_mirror: 'Public Mirror',
+      platform_recommendations:'Show platform recommendations only',
+      placeholder: 'Search Mirror tag / description / tag ... ',
+      search:'Search',
+      mirror_tag:'Mirror Tag',
+      mirror_description:'mirror_description ',
+      available_clusters: 'Available clusters',
+      creator: 'Creator',
+      creation_time: 'Creation time',
+      operation: 'Operation',
+      copy_address: 'Copy address',
+      my_mirror: 'My Mirror',
+      state: 'State',
+      private: 'Private',
+      public: 'Public',
+      mirror_committed: 'Mirror Committed...',
+      check_exceeds_20g:'Check whether the size of the submitted image exceeds 20g!',
+      mirror_submitted:'Image submitted successfully',
+      edit: 'Edit',
+      delete: 'Delete',
+      my_favorite_mirror: 'My Favorite Mirror',
+      more:'More',
+
   }
 }
 

web_src/js/components/i18n/lang/zh.js

@@ -42,6 +42,40 @@ const zh = {
       create_version_model:'创建模型新版本',
       canceled_operation:'您已取消操作',
       successfully_deleted:'删除成功'
+    },
+    cloudeBrainMirror:{
+      cloud_brain_mirror: '云脑镜像',
+      public_mirror: '公开镜像',
+      platform_recommendations:'仅显示平台推荐',
+      placeholder: '搜镜像Tag/描述/标签...',
+      search:'搜索',
+      mirror_tag:'镜像Tag',
+      mirror_description:'镜像描述',
+      available_clusters: '可用集群',
+      creator: '创建者',
+      creation_time: '创建时间',
+      operation: '操作',
+      copy_address: '复制地址',
+      my_mirror: '我的镜像',
+      state: '状态',
+      private: '私有',
+      public: '公开',
+      mirror_committed: '镜像提交中...',
+      check_exceeds_20g:'检测提交镜像是否大小超过20G!',
+      mirror_submitted:'镜像提交成功',
+      edit: '编辑',
+      delete: '删除',
+      my_favorite_mirror: '我收藏的镜像',
+      more:'更多',
+
+
+
+
+
+
+
+
+
     }
 }
 

web_src/js/components/images/Images.vue

@@ -3,25 +3,25 @@
     <div class="header-wrapper">
         <div class="ui container">
             <el-row class="image_text">
-                <h1>云脑镜像</h1>
+                <h1>{{$t('cloudeBrainMirror.cloud_brain_mirror')}}</h1>
             </el-row>    
         </div>
     </div>
     <div class="ui container" id="header">
         <el-tabs v-model="activeName" @tab-click="handleClick">
-            <el-tab-pane label="公开镜像" name="first" v-loading="loadingPublic">
+            <el-tab-pane :label="$t('cloudeBrainMirror.cloud_brain_mirror')"  name="first" v-loading="loadingPublic">
             <template v-if="tableDataPublic.length!==0">
                 <el-row style="align-items: center;display: flex;">
                         <el-col :span="12">
                             <div>
-                                <el-checkbox v-model="checked">仅显示平台推荐</el-checkbox>
+                                <el-checkbox v-model="checked">{{$t('cloudeBrainMirror.platform_recommendations')}}</el-checkbox>
                             </div>
                         </el-col>
                         <el-col :span="4"><div style="visibility: hidden;">TODO</div></el-col>
                         <el-col :span="8">
                             <div>
-                                <el-input placeholder="搜镜像Tag/描述/标签..." v-model="search" class="input-with-select" @keyup.enter.native="searchName()">
-                                    <el-button id="success" slot="append" icon="el-icon-search" @click="searchName()">搜索</el-button>
+                                <el-input :placeholder="$t('cloudeBrainMirror.placeholder')" v-model="search" class="input-with-select" @keyup.enter.native="searchName()">
+                                    <el-button id="success" slot="append" icon="el-icon-search" @click="searchName()">{{$t('cloudeBrainMirror.search')}}</el-button>
                                 </el-input>
                             </div>
                         </el-col>
@@ -34,7 +34,7 @@
                         :header-cell-style="tableHeaderStyle"
                         >
                         <el-table-column
-                            label="镜像Tag"
+                            :label="$t('cloudeBrainMirror.mirror_tag')"
                             min-width="19%"
                             align="left"
                             prop="tag"
@@ -47,7 +47,7 @@
                             </template>
                         </el-table-column>
                         <el-table-column
-                            label="镜像描述"
+                            :label="$t('cloudeBrainMirror.mirror_description')"
                             min-width="28%"
                             align="left"
                             prop="description"
@@ -62,7 +62,7 @@
                         </el-table-column>
                         <el-table-column
                             prop="cloudbrainType"
-                            label="可用集群"
+                            :label="$t('cloudeBrainMirror.available_clusters')"
                             min-width="10%"
                             align="center"
                             >
@@ -72,7 +72,7 @@
                         </el-table-column>
                         <el-table-column
                             prop="creator"
-                            label="创建者"
+                            :label="$t('cloudeBrainMirror.creator')"
                             min-width="8%"
                             align="center"
                             >
@@ -84,7 +84,7 @@
                         </el-table-column>
                         <el-table-column
                             prop="createdUnix"
-                            label="创建时间"
+                            :label="$t('cloudeBrainMirror.creation_time')"
                             align="center"
                             min-width="14%"
                             >
@@ -95,7 +95,7 @@
                         <el-table-column
                             align="center"
                             min-width="21%"
-                            label="操作"
+                            :label="$t('cloudeBrainMirror.operation')"
                             >
                             <template slot-scope="scope">
                                     <div style="display: flex;justify-content: flex-end;align-items: center;">
@@ -103,7 +103,7 @@
                                             <svg width="1.4em" height="1.4em" viewBox="0 0 32 32" class="heart-stroke" :class='{stars_active:scope.row.isStar}'><path d="M4.4 6.54c-1.761 1.643-2.6 3.793-2.36 6.056.24 2.263 1.507 4.521 3.663 6.534a29110.9 29110.9 0 0010.296 9.633l10.297-9.633c2.157-2.013 3.424-4.273 3.664-6.536.24-2.264-.599-4.412-2.36-6.056-1.73-1.613-3.84-2.29-6.097-1.955-1.689.25-3.454 1.078-5.105 2.394l-.4.319-.398-.319c-1.649-1.316-3.414-2.143-5.105-2.394a7.612 7.612 0 00-1.113-.081c-1.838 0-3.541.694-4.983 2.038z"></path></svg>    
                                             <span style="line-height: 2;margin-left:0.3rem;">{{scope.row.numStars}}</span>
                                         </div>
-                                        <span style="padding: 0 1rem;color:#0366d6;cursor:pointer;" @click="copyUrl(scope.row.place)">复制地址</span>
+                                        <span style="padding: 0 1rem;color:#0366d6;cursor:pointer;" @click="copyUrl(scope.row.place)">{{$t('cloudeBrainMirror.copy_address')}}</span>
                                     </div>
                             </template>
                         </el-table-column>
@@ -126,14 +126,14 @@
                     <el-row style="align-items: center;display: flex;">
                             <el-col :span="12">
                                 <div>
-                                    <el-checkbox v-model="checked">仅显示平台推荐</el-checkbox>
+                                    <el-checkbox v-model="checked">{{$t('cloudeBrainMirror.platform_recommendations')}}</el-checkbox>
                                 </div>
                             </el-col>
                             <el-col :span="4"><div style="visibility: hidden;">TODO</div></el-col>
                             <el-col :span="8">
                                 <div>
-                                    <el-input placeholder="搜镜像Tag/描述/标签..." v-model="search" class="input-with-select" @keyup.enter.native="searchName()">
-                                        <el-button id="success" slot="append" icon="el-icon-search" @click="searchName()">搜索</el-button>
+                                    <el-input :placeholder="$t('cloudeBrainMirror.placeholder')" v-model="search" class="input-with-select" @keyup.enter.native="searchName()">
+                                        <el-button id="success" slot="append" icon="el-icon-search" @click="searchName()">{{$t('cloudeBrainMirror.search')}}</el-button>
                                     </el-input>
                                 </div>
                             </el-col>
@@ -142,7 +142,7 @@
             </template>
             
             </el-tab-pane>
-            <el-tab-pane label="我的镜像" name="second" v-loading="loadingCustom">
+            <el-tab-pane :label="$t('cloudeBrainMirror.my_mirror')" name="second" v-loading="loadingCustom">
             <template v-if="tableDataCustom.length!==0">
                 <el-row style="align-items: center;display: flex;">
                     <el-col :span="12">
@@ -153,8 +153,8 @@
                     <el-col :span="4"><div style="visibility: hidden;">TODO</div></el-col>
                     <el-col :span="8">
                         <div>
-                            <el-input placeholder="搜镜像Tag/描述/标签..." v-model="search" class="input-with-select" @keyup.enter.native="searchName()">
-                                <el-button id="success" slot="append" icon="el-icon-search" @click="searchName()">搜索</el-button>
+                            <el-input :placeholder="$t('cloudeBrainMirror.placeholder')" v-model="search" class="input-with-select" @keyup.enter.native="searchName()">
+                                <el-button id="success" slot="append" icon="el-icon-search" @click="searchName()">{{$t('cloudeBrainMirror.search')}}</el-button>
                             </el-input>
                         </div>
                     </el-col>
@@ -166,7 +166,7 @@
                         :header-cell-style="tableHeaderStyle"
                         >
                         <el-table-column
-                            label="镜像Tag"
+                            :label="$t('cloudeBrainMirror.mirror_tag')"
                             min-width="19%"
                             align="left"
                             prop="tag"
@@ -180,7 +180,7 @@
                             </template>
                         </el-table-column>
                         <el-table-column
-                            label="镜像描述"
+                            :label="$t('cloudeBrainMirror.mirror_description')"
                             min-width="27%"
                             align="left"
                             prop="description"
@@ -195,7 +195,7 @@
                         </el-table-column>
                         <el-table-column
                             prop="cloudbrainType"
-                            label="可用集群"
+                            :label="$t('cloudeBrainMirror.available_clusters')"
                             min-width="9%"
                             align="center"
                             >
@@ -205,23 +205,23 @@
                         </el-table-column>
                         <el-table-column
                             prop="isPrivate"
-                            label="状态"
+                            :label="$t('cloudeBrainMirror.state')"
                             min-width="10%"
                             align="center"
                             >
                             <template slot-scope="scope">
                                 <div style="display:flex;align-items: center;justify-content: center;">
-                                    <span v-if="scope.row.isPrivate" style="color: rgb(250, 140, 22);">私有</span>
-                                    <span v-else style="color: rgb(19, 194, 141);">公开</span>
-                                    <el-tooltip class="item" effect="dark" content="镜像提交中..." placement="top">
+                                    <span v-if="scope.row.isPrivate" style="color: rgb(250, 140, 22);">{{$t('cloudeBrainMirror.private')}}</span>
+                                    <span v-else style="color: rgb(19, 194, 141);">{{$t('cloudeBrainMirror.public')}}</span>
+                                    <el-tooltip class="item" effect="dark" :content= "$t('cloudeBrainMirror.mirror_committed')" placement="top">
                                         <i v-if="scope.row.status===0" class="CREATING" style="margin-left:0.3rem"></i>
                                     </el-tooltip>
                                     
-                                    <el-tooltip class="item" effect="dark" content="检测提交镜像是否大小超过20G!" placement="top">
+                                    <el-tooltip class="item" effect="dark" :content="$t('cloudeBrainMirror.check_exceeds_20g')" placement="top">
                                         <i v-if="scope.row.status===2" class="FAILED" style="margin-left:0.3rem"></i>
                                     </el-tooltip>
                                     
-                                    <el-tooltip class="item" effect="dark" content="镜像提交成功" placement="top">
+                                    <el-tooltip class="item" effect="dark" :content="$t('cloudeBrainMirror.mirror_submitted')" placement="top">
                                         <i v-if="scope.row.status===1" class="SUCCEEDED" style="margin-left:0.3rem"></i>
                                     </el-tooltip>
                                     
@@ -231,7 +231,7 @@
                         </el-table-column>
                         <el-table-column
                             prop="createdUnix"
-                            label="创建时间"
+                            :label="$t('cloudeBrainMirror.creation_time')"
                             align="center"
                             min-width="14%"
                             >
@@ -242,7 +242,7 @@
                         <el-table-column
                             align="center"
                             min-width="21%"
-                            label="操作"
+                            :label="$t('cloudeBrainMirror.operation')"
                             >
                             <template slot-scope="scope">
                                     <div style="display: flex;justify-content: flex-end;align-items: center;">
@@ -250,15 +250,15 @@
                                             <svg width="1.4em" height="1.4em" viewBox="0 0 32 32" class="heart-stroke"><path d="M4.4 6.54c-1.761 1.643-2.6 3.793-2.36 6.056.24 2.263 1.507 4.521 3.663 6.534a29110.9 29110.9 0 0010.296 9.633l10.297-9.633c2.157-2.013 3.424-4.273 3.664-6.536.24-2.264-.599-4.412-2.36-6.056-1.73-1.613-3.84-2.29-6.097-1.955-1.689.25-3.454 1.078-5.105 2.394l-.4.319-.398-.319c-1.649-1.316-3.414-2.143-5.105-2.394a7.612 7.612 0 00-1.113-.081c-1.838 0-3.541.694-4.983 2.038z"></path></svg>    
                                             <span style="line-height: 2;margin-left:0.3rem;">{{scope.row.numStars}}</span>
                                         </div>
-                                        <span style="padding: 0 1rem;color:#0366d6;cursor:pointer;" @click="copyUrl(scope.row.place)">复制地址</span>
+                                        <span style="padding: 0 1rem;color:#0366d6;cursor:pointer;" @click="copyUrl(scope.row.place)">{{$t('cloudeBrainMirror.copy_address')}}</span>
                                         <div style="padding-left:1rem;cursor:pointer;">
                                             <el-dropdown size="medium">
                                             <span class="el-dropdown-link">
-                                                更多<i class="el-icon-arrow-down el-icon--right"></i>
+                                                {{$t('cloudeBrainMirror.more')}} <i class="el-icon-arrow-down el-icon--right"></i>
                                             </span>
                                             <el-dropdown-menu slot="dropdown">
-                                                <el-dropdown-item @click.native="eidtImage(scope.row.id)">编辑</el-dropdown-item>
-                                                <el-dropdown-item style="color: red;" @click.native="deleteImage(scope.row.id)">删除</el-dropdown-item>
+                                                <el-dropdown-item @click.native="eidtImage(scope.row.id)">{{$t('cloudeBrainMirror.edit')}}</el-dropdown-item>
+                                                <el-dropdown-item style="color: red;" @click.native="deleteImage(scope.row.id)"> {{$t('cloudeBrainMirror.delete')}} </el-dropdown-item>
                                             </el-dropdown-menu>
                                             </el-dropdown>
                                         </div>
@@ -290,8 +290,8 @@
                     <el-col :span="4"><div style="visibility: hidden;">TODO</div></el-col>
                     <el-col :span="8">
                         <div>
-                            <el-input placeholder="搜镜像Tag/描述/标签..." v-model="search" class="input-with-select" @keyup.enter.native="searchName()">
-                                <el-button id="success" slot="append" icon="el-icon-search" @click="searchName()">搜索</el-button>
+                            <el-input :placeholder="$t('cloudeBrainMirror.placeholder')" v-model="search" class="input-with-select" @keyup.enter.native="searchName()">
+                                <el-button id="success" slot="append" icon="el-icon-search" @click="searchName()">{{$t('cloudeBrainMirror.search')}}</el-button>
                             </el-input>
                         </div>
                     </el-col>
@@ -300,7 +300,7 @@
             </template>
             
             </el-tab-pane>
-            <el-tab-pane label="我收藏的镜像" name="third">
+            <el-tab-pane :label="$t('cloudeBrainMirror.my_favorite_mirror')" name="third">
                 <template v-if="tableDataStar.length!==0">
                     <el-row style="align-items: center;display: flex;">
                         <el-col :span="12">
@@ -311,8 +311,8 @@
                         <el-col :span="4"><div style="visibility: hidden;">TODO</div></el-col>
                         <el-col :span="8">
                             <div>
-                                <el-input placeholder="搜镜像Tag/描述/标签..." v-model="search" class="input-with-select" @keyup.enter.native="searchName()">
-                                    <el-button id="success" slot="append" icon="el-icon-search" @click="searchName()">搜索</el-button>
+                                <el-input :placeholder="$t('cloudeBrainMirror.placeholder')" v-model="search" class="input-with-select" @keyup.enter.native="searchName()">
+                                    <el-button id="success" slot="append" icon="el-icon-search" @click="searchName()">{{$t('cloudeBrainMirror.search')}}</el-button>
                                 </el-input>
                             </div>
                         </el-col>
@@ -325,7 +325,7 @@
                             :header-cell-style="tableHeaderStyle"
                             >
                             <el-table-column
-                                label="镜像Tag"
+                                :label="$t('cloudeBrainMirror.mirror_tag')"
                                 min-width="19%"
                                 align="left"
                                 prop="tag"
@@ -338,7 +338,7 @@
                                 </template>
                             </el-table-column>
                             <el-table-column
-                                label="镜像描述"
+                                :label="$t('cloudeBrainMirror.mirror_description')"
                                 min-width="28%"
                                 align="left"
                                 prop="description"
@@ -353,7 +353,7 @@
                             </el-table-column>
                             <el-table-column
                                 prop="cloudbrainType"
-                                label="可用集群"
+                                :label="$t('cloudeBrainMirror.available_clusters')"
                                 min-width="10%"
                                 align="center"
                                 >
@@ -363,7 +363,7 @@
                             </el-table-column>
                             <el-table-column
                                 prop="creator"
-                                label="创建者"
+                                :label="$t('cloudeBrainMirror.creator')"
                                 min-width="8%"
                                 align="center"
                                 >
@@ -375,7 +375,7 @@
                             </el-table-column>
                             <el-table-column
                                 prop="createdUnix"
-                                label="创建时间"
+                                :label="$t('cloudeBrainMirror.creation_time')"
                                 align="center"
                                 min-width="14%"
                                 >
@@ -386,7 +386,7 @@
                             <el-table-column
                                 align="center"
                                 min-width="21%"
-                                label="操作"
+                                :label="$t('cloudeBrainMirror.operation')"
                                 >
                                 <template slot-scope="scope">
                                         <div style="display: flex;justify-content: flex-end;align-items: center;">
@@ -394,7 +394,7 @@
                                                 <svg width="1.4em" height="1.4em" viewBox="0 0 32 32" class="heart-stroke stars_active"><path d="M4.4 6.54c-1.761 1.643-2.6 3.793-2.36 6.056.24 2.263 1.507 4.521 3.663 6.534a29110.9 29110.9 0 0010.296 9.633l10.297-9.633c2.157-2.013 3.424-4.273 3.664-6.536.24-2.264-.599-4.412-2.36-6.056-1.73-1.613-3.84-2.29-6.097-1.955-1.689.25-3.454 1.078-5.105 2.394l-.4.319-.398-.319c-1.649-1.316-3.414-2.143-5.105-2.394a7.612 7.612 0 00-1.113-.081c-1.838 0-3.541.694-4.983 2.038z"></path></svg>    
                                                 <span style="line-height: 2;margin-left:0.3rem;">{{scope.row.numStars}}</span>
                                             </div>
-                                            <span style="padding: 0 1rem;color:#0366d6;cursor:pointer;" @click="copyUrl(scope.row.place)">复制地址</span>
+                                            <span style="padding: 0 1rem;color:#0366d6;cursor:pointer;" @click="copyUrl(scope.row.place)">{{$t('cloudeBrainMirror.copy_address')}}</span>
                                         </div>
                                 </template>
                             </el-table-column>
@@ -424,8 +424,8 @@
                         <el-col :span="4"><div style="visibility: hidden;">TODO</div></el-col>
                         <el-col :span="8">
                             <div>
-                                <el-input placeholder="搜镜像Tag/描述/标签..." v-model="search" class="input-with-select" @keyup.enter.native="searchName()">
-                                    <el-button id="success" slot="append" icon="el-icon-search" @click="searchName()">搜索</el-button>
+                                <el-input :placeholder="$t('cloudeBrainMirror.placeholder')" v-model="search" class="input-with-select" @keyup.enter.native="searchName()">
+                                    <el-button id="success" slot="append" icon="el-icon-search" @click="searchName()">{{$t('cloudeBrainMirror.search')}}</el-button>
                                 </el-input>
                             </div>
                         </el-col>
@@ -587,9 +587,9 @@ export default {
             },
             onHidden: function() {
                 if (flag == false) {
-                    $('.alert').html('您已取消操作').removeClass('alert-success').addClass('alert-danger').show().delay(1500).fadeOut();
+                    $('.alert').html(this.$t('modle.canceled_operation')).removeClass('alert-success').addClass('alert-danger').show().delay(1500).fadeOut();
                 }else{
-                    $('.alert').html('删除成功').removeClass('alert-danger').addClass('alert-success').show().delay(1500).fadeOut();
+                    $('.alert').html(this.$t('modle.successfully_deleted')).removeClass('alert-danger').addClass('alert-success').show().delay(1500).fadeOut();
                 }
             }
         })
@@ -657,6 +657,17 @@ export default {
         }
         
     },
+    getLang(){
+            this.text_langName = document.getElementById("menutext_1").innerText
+            if (this.text_langName == '简体中文'){
+                this.$i18n.locale = 'zh'
+                // locale.use(zhLocale) 
+            }
+            else if (this.text_langName == 'English'){
+                this.$i18n.locale  = 'en'
+                // locale.use(enLocale)
+            }
+    },
   },
   filters:{
       transformType(val){
@@ -666,9 +677,9 @@ export default {
       },
       transformPravite(val){
         if(val){
-            return "私有"
+            return this.$t('cloudeBrainMirror.private')
         }else{
-            return "公开"
+            return this.$t('cloudeBrainMirror.public')
         }
       },
       transformTimestamp(timestamp){
@@ -690,20 +701,24 @@ export default {
         this.getImageListPublic()
     }
   },
+
   mounted() {
-      
-      
+    this.getLang()
   },
+
   created() {
     const params = new URLSearchParams(location.search)
-      if(params.has('type')&&params.get('type')=='myimage'){
-          this.activeName = 'second'
-          this.getImageListCustom()
-      }
-      else{
-        this.getImageListPublic()
-      }
-  }
+    if(params.has('type')&&params.get('type')=='myimage'){
+        this.activeName = 'second'
+        this.getImageListCustom()
+    }
+    else{
+    this.getImageListPublic()
+    }
+
+    this.getLang() 
+  },
+ 
 
 };
 </script>

web_src/js/features/images.js

@@ -2,6 +2,31 @@ import Images from '../components/images/Images.vue';
 import  adminImages from '../components/images/adminImages.vue';
 import  selectImages from '../components/images/selectImages.vue';
 import Vue from 'vue';
+
+// import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css'; 
+import VueI18n from 'vue-i18n';
+import enLocale from 'element-ui/lib/locale/lang/en';
+import zhLocale from 'element-ui/lib/locale/lang/zh-CN';
+// import locale from 'element-ui/lib/locale';
+import Element from 'element-ui'
+import  cn from '../components/i18n/lang/zh.js'; 
+import en from '../components/i18n/lang/en.js';
+
+Vue.use(VueI18n)
+const messages = {
+    'en':{...en,...enLocale} ,
+    'zh': {...cn,...zhLocale},
+}
+// Create VueI18n instance with options
+const i18n = new VueI18n({
+    locale: 'zh', // set locale
+    messages, // set locale messages
+})
+Vue.use(Element, {
+    i18n: (key, value) => i18n.t(key, value)
+})
+
 export default async function initImage(){
     function validate() {
         $("#form_image")
@@ -183,7 +208,8 @@ export default async function initImage(){
         }
         
         new Vue({
-            el:el,            
+            el:el, 
+            i18n,           
             render: h => h(Images)
         });
     }
@@ -194,7 +220,8 @@ export default async function initImage(){
         }
         
         new Vue({
-            el:el,            
+            el:el,  
+            i18n,          
             render: h => h(adminImages)
         });
     }
@@ -205,7 +232,8 @@ export default async function initImage(){
         }
         
         new Vue({
-            el:el,            
+            el:el,   
+            i18n,         
             render: h => h(selectImages)
         });
     }