fix issue

options/locale/locale_en-US.ini

@@ -3019,4 +3019,5 @@ SNN4IMAGENET =  BENCHMARK
 BRAINSCORE = BENCHMARK
 TRAIN = TRAIN
 INFERENCE = INFERENCE
-BENCHMARK = BENCHMARK
+BENCHMARK = BENCHMARK
+brain_area = Brain Area

options/locale/locale_zh-CN.ini

@@ -3030,4 +3030,5 @@ BRAINSCORE = 评测任务
 TRAIN = 训练任务
 INFERENCE = 推理任务
 BENCHMARK = 评测任务
+brain_area = 脑区
 

templates/repo/cloudbrain/benchmark/new.tmpl

@@ -106,11 +106,11 @@
                             placeholder={{.i18n.Tr "repo.modelarts.train_job.job_name"}} value="{{.display_job_name}}"
                             tabindex="3" autofocus required maxlength="254">
                     </div>
-                    <div class="unite min_title inline field">
+                    <div class="required unite min_title inline field">
                         <label style="font-weight: normal;"
                             for="description">{{.i18n.Tr "repo.modelarts.train_job.description"}}&nbsp;&nbsp;</label>
-                        <textarea style="width: 80%;" id="description" name="description" rows="3" maxlength="254"
-                            placeholder={{.i18n.Tr "repo.modelarts.train_job.new_place"}}
+                        <textarea style="width: 80%;" id="description" name="description" rows="3" required
+                            maxlength="254" placeholder={{.i18n.Tr "repo.modelarts.train_job.new_place"}}
                             onchange="this.value=this.value.substring(0, 255)"
                             onkeydown="this.value=this.value.substring(0, 255)"
                             onkeyup="this.value=this.value.substring(0, 255)">{{.description}}</textarea>
@@ -125,19 +125,6 @@
                             {{end}}
                         </select>
                     </div>
-
-                    <!-- <div class="required unite min_title inline field">
-                        <label style="font-weight: normal;">{{.i18n.Tr "cloudbrain.task_type"}}</label>
-                        <select id="cloudbrain_job_type" class="ui search dropdown width48 job_type" placeholder="select {{.i18n.Tr "cloudbrain.task_type"}}" name="job_type">
-                            <option name="job_type" value="SNN4IMAGENET">SNN4IMAGENET</option>
-                            <option name="job_type" value="BRAINSCORE">BRAINSCORE</option>
-                        </select>
-                        sle
-                        <span>
-                            <i class="question circle icon  link" data-content={{.i18n.Tr "repo.modelarts.train_job.boot_file_helper"}} data-position="right center" data-variation="mini"></i>
-                        </span>
-                        <a id="benchmark_model_example" href="https://git.openi.org.cn/yult/snn4imagenet">{{.i18n.Tr "cloudbrain.view_sample"}}</a>
-                    </div> -->
                     <div class="required unite min_title two inline fields ">
                         <div class="required ten wide field" style="width: 26.5% !important;">
                             <label style="font-weight: normal;">{{.i18n.Tr "cloudbrain.task_type"}}</label>
@@ -149,8 +136,8 @@
                         </div>
                         <div class="required six widde field" id="brainscore_child_type"
                             style="width: 15% !important;display: none;">
-                            <label style="font-weight: normal;">版本</label>
-                            <select class="ui search dropdown" placeholder="select {{.i18n.Tr "cloudbrain.task_type"}}"
+                            <label style="font-weight: normal;">{{.i18n.Tr "cloudbrain.brain_area"}}</label>
+                            <select class="ui search dropdown" placeholder="select {{.i18n.Tr "cloudbrain.brain_area"}}"
                                 name="benchmark_child_types_id">
                                 <option value="0">V1</option>
                                 <option value="1">V2</option>
@@ -299,11 +286,6 @@
                         <a class="ui button" href="/">{{.i18n.Tr "repo.cloudbrain.cancel"}}</a>
                     </div>
                 </div>
-
-
-
-                <!-- 模态框 -->
-
             </form>
             {{end}}
         </div>
@@ -315,15 +297,11 @@
     let repolink = {{.RepoLink }}
     let url_href = window.location.pathname.split('create')[0]
     $(".ui.button").attr('href', url_href)
-
     $('.menu .item')
         .tab();
-
     $('#benchmark_types_id').change(function () {
         setChildType();
     })
-
-
     $(document).ready(() => {
         $('.ui.search.dropdown.job_type').dropdown({
             onChange: function (value, text, $selectedItem) {
@@ -368,7 +346,6 @@
             }
         }
     }
-
     function validate() {
         $('.ui.form')
             .form({

web_src/js/components/images/Images.vue

@@ -77,9 +77,11 @@
                             align="center"
                             >
                             <template slot-scope="scope">
-                                <a :href="'/' + scope.row.userName" :title="scope.row.userName">
+                                
+                                <a v-if="scope.row.userName||scope.row.relAvatarLink" :href="'/' + scope.row.userName" :title="scope.row.userName">
                                     <img :src="scope.row.relAvatarLink" class="ui avatar image">
                                 </a>
+                                <a v-else><img class="ui avatar image" src="/user/avatar/ghost/-1"></a>
                             </template>
                         </el-table-column>
                         <el-table-column

web_src/js/components/images/adminImages.vue

@@ -1,395 +1,387 @@
 <template>
-<div >
-    <div class="ui container" style="width: 80%;">
-        <div class="ui grid">
-        <div class="row" style="border: 1px solid #d4d4d5;margin-top: 15px;padding-top: 0;">
-            
-            <div class="ui attached segment">
-                <div class="ui form ignore-dirty">
-                    <div class="ui fluid action input">
-                        <input type="text"  placeholder="搜镜像Tag/描述/标签..." v-model="search" @keyup.enter="searchName()">
-                        <button class="ui blue button" @click="searchName()">搜索</button>
-                    </div>
-                </div>
-            </div>
+    <div>
+        <div class="ui container" style="width: 80%;">
+            <div class="ui grid">
+                <div class="row" style="border: 1px solid #d4d4d5;margin-top: 15px;padding-top: 0;">
 
-            <div class="ui ten wide column" style="margin: 1rem 0;">
-                <el-checkbox v-model="checked" style="padding: 0.5rem 1rem;">仅显示平台推荐</el-checkbox>
-                <el-dropdown @command="handleCommand" trigger="click" style="border: 1px solid rgba(34,36,38,.15);border-radius: 4px;padding: 0.5rem 1rem;">
-                        <span class="el-dropdown-link">
-                            {{dropdownPrivate}}<i class="el-icon-caret-bottom el-icon--right"></i>
-                        </span>
-                        <el-dropdown-menu slot="dropdown">
-                            <el-dropdown-item :command="{label:'全部',private:''}">全部</el-dropdown-item>
-                            <el-dropdown-item :command="{label:'公开',private:false}">公开</el-dropdown-item>
-                            <el-dropdown-item :command="{label:'私有',private:true}">私有</el-dropdown-item>
-                        </el-dropdown-menu>
-                         </el-dropdown>
-            </div>
-            <div class="ui six wide column right aligned" style="margin: 1rem 0;">
-                    <a class="ui blue small button" href="/admin/images/commit_image">创建云脑镜像</a>
-            </div>
-            <div class="ui sixteen wide column" style="padding: 0;">
-                <el-table
-                    :data="tableDataCustom"
-                    style="width: 100%"
-                    :header-cell-style="tableHeaderStyle"
-                    >
-                    <el-table-column
-                        label="镜像Tag"
-                        min-width="19%"
-                        align="left"
-                        prop="tag"
-                        >
-                        <template slot-scope="scope">
-                            <div style="display: flex;align-items: center;">
-                                <a class="text-over image_title" :title="scope.row.tag">{{ scope.row.tag }}</a>
-                                <i class="ri-lock-2-line" style="color: #fa8c16;padding: 0 1rem;" v-if="scope.row.isPrivate"></i>
-                                <img v-if="scope.row.type==5"  src="/img/jian.svg" style="margin-left: 0.5rem;">
-                            </div>
-                        </template>
-                    </el-table-column>
-                    <el-table-column
-                        label="镜像描述"
-                        min-width="28%"
-                        align="left"
-                        prop="description"
-                        >
-                        <template slot-scope="scope">
-                            <div class="image_desc" :title="scope.row.description">{{ scope.row.description}}</div>
-                            <div v-if="!!scope.row.topics">
-                                <span v-for="(topic,index) in scope.row.topics" class="ui repo-topic label topic" style="cursor: default;">{{topic}}</span>
+                    <div class="ui attached segment">
+                        <div class="ui form ignore-dirty">
+                            <div class="ui fluid action input">
+                                <input type="text" placeholder="搜镜像Tag/描述/标签..." v-model="search"
+                                    @keyup.enter="searchName()">
+                                <button class="ui blue button" @click="searchName()">搜索</button>
                             </div>
-                            
-                        </template>
-                    </el-table-column>
-                    <el-table-column
-                        prop="cloudbrainType"
-                        label="可用集群"
-                        min-width="10%"
-                        align="center"
-                        >
-                        <template slot-scope="scope">
-                            {{scope.row.cloudbrainType | transformType}}
-                        </template>
-                    </el-table-column>
-                    <el-table-column
-                        prop="isPrivate"
-                        label="状态"
-                        min-width="8%"
-                        align="center"
-                        >
-                        <template slot-scope="scope">
-                            <span v-if="scope.row.isPrivate" style="color: rgb(250, 140, 22);">私有</span>
-                            <span v-else style="color: rgb(19, 194, 141);">公开</span>
-                        </template>
-                    </el-table-column>
-                    <el-table-column
-                        prop="creator"
-                        label="创建者"
-                        min-width="7%"
-                        align="center"
-                        >
-                        <template slot-scope="scope">
-                            <a :href="'/' + scope.row.userName" :title="scope.row.userName">
-                                <img :src="scope.row.relAvatarLink" class="ui avatar image">
-                            </a>
-                        </template>
-                    </el-table-column>
-                    <el-table-column
-                        prop="createdUnix"
-                        label="创建时间"
-                        align="center"
-                        min-width="13%"
-                        >
-                        <template slot-scope="scope">
-                            {{scope.row.createdUnix | transformTimestamp}}
-                        </template>
-                    </el-table-column>
-                    <el-table-column
-                        align="center"
-                        min-width="23%"
-                        label="操作"
-                        >
-                        <template slot-scope="scope">
-                                <div style="display: flex;justify-content: flex-end;align-items: center;">
-                                    <div style="display: flex;align-items: center;cursor: default;;padding: 0 1rem;">
-                                        <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>
+                    </div>
+
+                    <div class="ui ten wide column" style="margin: 1rem 0;">
+                        <el-checkbox v-model="checked" style="padding: 0.5rem 1rem;">仅显示平台推荐</el-checkbox>
+                        <el-dropdown @command="handleCommand" trigger="click"
+                            style="border: 1px solid rgba(34,36,38,.15);border-radius: 4px;padding: 0.5rem 1rem;">
+                            <span class="el-dropdown-link">
+                                {{dropdownPrivate}}<i class="el-icon-caret-bottom el-icon--right"></i>
+                            </span>
+                            <el-dropdown-menu slot="dropdown">
+                                <el-dropdown-item :command="{label:'全部',private:''}">全部</el-dropdown-item>
+                                <el-dropdown-item :command="{label:'公开',private:false}">公开</el-dropdown-item>
+                                <el-dropdown-item :command="{label:'私有',private:true}">私有</el-dropdown-item>
+                            </el-dropdown-menu>
+                        </el-dropdown>
+                    </div>
+                    <div class="ui six wide column right aligned" style="margin: 1rem 0;">
+                        <a class="ui blue small button" href="/admin/images/commit_image">创建云脑镜像</a>
+                    </div>
+                    <div class="ui sixteen wide column" style="padding: 0;">
+                        <el-table :data="tableDataCustom" style="width: 100%" :header-cell-style="tableHeaderStyle">
+                            <el-table-column label="镜像Tag" min-width="19%" align="left" prop="tag">
+                                <template slot-scope="scope">
+                                    <div style="display: flex;align-items: center;">
+                                        <a class="text-over image_title" :title="scope.row.tag">{{ scope.row.tag }}</a>
+                                        <i class="ri-lock-2-line" style="color: #fa8c16;padding: 0 1rem;"
+                                            v-if="scope.row.isPrivate"></i>
+                                        <img v-if="scope.row.type==5" src="/img/jian.svg" style="margin-left: 0.5rem;">
                                     </div>
-                                            <span style="padding: 0 1rem;color: rgb(250, 140, 22);cursor:pointer;" v-if="scope.row.type==5" @click="unSetRecommend(scope.$index,scope.row.id)">取消推荐</span>
-                                            <span style="padding: 0 1rem;color: rgb(19, 194, 141);cursor:pointer;" v-if="scope.row.type!==5 && !scope.row.isPrivate" @click="setRecommend(scope.$index,scope.row.id)">设为推荐</span>
-                                    <span style="padding: 0 1rem;color:#0366d6;cursor:pointer;" @click="copyUrl(scope.row.place)">复制地址</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>
-                                        </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-menu>
-                                        </el-dropdown>
+                                </template>
+                            </el-table-column>
+                            <el-table-column label="镜像描述" min-width="28%" align="left" prop="description">
+                                <template slot-scope="scope">
+                                    <div class="image_desc" :title="scope.row.description">{{ scope.row.description}}
                                     </div>
-                                </div>
-                        </template>
-                    </el-table-column>
-                </el-table>
-            </div>
-            <div class="ui container" style="padding:2rem 0;text-align:center">
-                    <el-pagination
-                        background
-                        @size-change="handleSizeChangeCustom"
-                        @current-change="handleCurrentChangeCustom"
-                        :current-page="currentPageCustom"
-                        :page-size="pageSizeCustom"
-                        :page-sizes="[5,15,20]"
-                        layout="total, sizes, prev, pager, next, jumper"
-                        :total="totalNumCustom">
-                    </el-pagination>
+                                    <div v-if="!!scope.row.topics">
+                                        <span v-for="(topic,index) in scope.row.topics"
+                                            class="ui repo-topic label topic" style="cursor: default;">{{topic}}</span>
+                                    </div>
+
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="cloudbrainType" label="可用集群" min-width="10%" align="center">
+                                <template slot-scope="scope">
+                                    {{scope.row.cloudbrainType | transformType}}
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="isPrivate" label="状态" min-width="8%" align="center">
+                                <template slot-scope="scope">
+                                    <span v-if="scope.row.isPrivate" style="color: rgb(250, 140, 22);">私有</span>
+                                    <span v-else style="color: rgb(19, 194, 141);">公开</span>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="creator" label="创建者" min-width="7%" align="center">
+                                <template slot-scope="scope">
+                                    <a v-if="scope.row.userName||scope.row.relAvatarLink"
+                                        :href="'/' + scope.row.userName" :title="scope.row.userName">
+                                        <img :src="scope.row.relAvatarLink" class="ui avatar image">
+                                    </a>
+                                    <a v-else>
+                                        <img class="ui avatar image" src="/user/avatar/ghost/-1">
+                                    </a>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="createdUnix" label="创建时间" align="center" min-width="13%">
+                                <template slot-scope="scope">
+                                    {{scope.row.createdUnix | transformTimestamp}}
+                                </template>
+                            </el-table-column>
+                            <el-table-column align="center" min-width="23%" label="操作">
+                                <template slot-scope="scope">
+                                    <div style="display: flex;justify-content: flex-end;align-items: center;">
+                                        <div
+                                            style="display: flex;align-items: center;cursor: default;;padding: 0 1rem;">
+                                            <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: rgb(250, 140, 22);cursor:pointer;"
+                                            v-if="scope.row.type==5"
+                                            @click="unSetRecommend(scope.$index,scope.row.id)">取消推荐</span>
+                                        <span style="padding: 0 1rem;color: rgb(19, 194, 141);cursor:pointer;"
+                                            v-if="scope.row.type!==5 && !scope.row.isPrivate"
+                                            @click="setRecommend(scope.$index,scope.row.id)">设为推荐</span>
+                                        <span style="padding: 0 1rem;color:#0366d6;cursor:pointer;"
+                                            @click="copyUrl(scope.row.place)">复制地址</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>
+                                                </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-menu>
+                                            </el-dropdown>
+                                        </div>
+                                    </div>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </div>
+                    <div class="ui container" style="padding:2rem 0;text-align:center">
+                        <el-pagination background @size-change="handleSizeChangeCustom"
+                            @current-change="handleCurrentChangeCustom" :current-page="currentPageCustom"
+                            :page-size="pageSizeCustom" :page-sizes="[5,15,20]"
+                            layout="total, sizes, prev, pager, next, jumper" :total="totalNumCustom">
+                        </el-pagination>
+                    </div>
+                </div>
             </div>
         </div>
-        </div>
-  </div>
-</div>
+    </div>
+
 
-  
 </template>
 
 <script>
 
-const {_AppSubUrl, _StaticUrlPrefix, csrf} = window.config;
+    const { _AppSubUrl, _StaticUrlPrefix, csrf } = window.config;
 
 
 
 
-export default {
-  components: {
-    
-  },
-  data() {
-    return {
-      search:'',
-      dropdownPrivate:'全部',
-      checked:false,
-      currentPageCustom:1,
-      pageSizeCustom:15,
-      totalNumCustom:0,
-      paramsCustom:{page:1,pageSize:15,q:'',recommend:false},
-      tableDataCustom: [],
-      starCustom:[],
-      loadingCustom:false,
-    };
-  },
-  methods: {
-    tableHeaderStyle({row,column,rowIndex,columnIndex}){
-        if(rowIndex===0){
-            return 'background:#f5f5f6;color:#606266'
-        }
-    },
-
-    handleSizeChangeCustom(val){
-        this.paramsCustom.pageSize = val
-        this.getImageListCustom()
-    },
-    handleCurrentChangeCustom(val){
-        this.paramsCustom.page = val
-        this.getImageListCustom()
-    },
-
-    getImageListCustom(){
-        this.loadingCustom = true
-        this.$axios.get('/admin/images/data',{
-            params:this.paramsCustom
-        }).then((res)=>{
-            this.totalNumCustom = res.data.count
-            this.tableDataCustom = res.data.images
-            this.tableDataCustom.forEach(element => {
-                this.starCustom.push({id:element.id,})
-                
-            });
-            this.loadingCustom = false
-        })
-    },
-    deleteImage(id){
-        let flag=1
-        let _this = this
-        $('.ui.basic.modal.images')
-        .modal({
-            onDeny: function() {
-                flag = false
+    export default {
+        components: {
+
+        },
+        data() {
+            return {
+                search: '',
+                dropdownPrivate: '全部',
+                checked: false,
+                currentPageCustom: 1,
+                pageSizeCustom: 15,
+                totalNumCustom: 0,
+                paramsCustom: { page: 1, pageSize: 15, q: '', recommend: false },
+                tableDataCustom: [],
+                starCustom: [],
+                loadingCustom: false,
+            };
+        },
+        methods: {
+            tableHeaderStyle({ row, column, rowIndex, columnIndex }) {
+                if (rowIndex === 0) {
+                    return 'background:#f5f5f6;color:#606266'
+                }
+            },
+
+            handleSizeChangeCustom(val) {
+                this.paramsCustom.pageSize = val
+                this.getImageListCustom()
             },
-            onApprove: function() {
-                _this.$axios.delete('/image/'+id).then((res)=>{
-                    _this.getImageListCustom()
+            handleCurrentChangeCustom(val) {
+                this.paramsCustom.page = val
+                this.getImageListCustom()
+            },
+
+            getImageListCustom() {
+                this.loadingCustom = true
+                this.$axios.get('/admin/images/data', {
+                    params: this.paramsCustom
+                }).then((res) => {
+                    this.totalNumCustom = res.data.count
+                    this.tableDataCustom = res.data.images
+                    this.tableDataCustom.forEach(element => {
+                        this.starCustom.push({ id: element.id, })
+
+                    });
+                    this.loadingCustom = false
                 })
-                flag = true
             },
-            onHidden: function() {
-                if (flag == false) {
-                    $('.alert').html('您已取消操作').removeClass('alert-success').addClass('alert-danger').show().delay(1500).fadeOut();
-                }else{
-                    $('.alert').html('删除成功').removeClass('alert-danger').addClass('alert-success').show().delay(1500).fadeOut();
+            deleteImage(id) {
+                let flag = 1
+                let _this = this
+                $('.ui.basic.modal.images')
+                    .modal({
+                        onDeny: function () {
+                            flag = false
+                        },
+                        onApprove: function () {
+                            _this.$axios.delete('/image/' + id).then((res) => {
+                                _this.getImageListCustom()
+                            })
+                            flag = true
+                        },
+                        onHidden: function () {
+                            if (flag == false) {
+                                $('.alert').html('您已取消操作').removeClass('alert-success').addClass('alert-danger').show().delay(1500).fadeOut();
+                            } else {
+                                $('.alert').html('删除成功').removeClass('alert-danger').addClass('alert-success').show().delay(1500).fadeOut();
+                            }
+                        }
+                    })
+                    .modal('show')
+            },
+            eidtImage(id) {
+                location.href = `/image/${id}/imageAdmin`
+            },
+            imageStar(index, id, isStar) {
+                if (isStar) {
+                    this.$axios.put(`/image/${id}/action/unstar`).then((res) => {
+                        this.tableDataPublic[index].numStars = this.tableDataPublic[index].numStars - 1
+                        this.tableDataPublic[index].isStar = false
+                    })
+                } else {
+                    this.$axios.put(`/image/${id}/action/star`).then((res) => {
+                        this.tableDataPublic[index].numStars = this.tableDataPublic[index].numStars + 1
+                        this.tableDataPublic[index].isStar = true
+                    })
                 }
-            }
-        })
-        .modal('show')
-    },
-    eidtImage(id){
-        location.href = `/image/${id}/imageAdmin`
-    },
-    imageStar(index,id,isStar){
-        if(isStar){
-            this.$axios.put(`/image/${id}/action/unstar`).then((res)=>{
-                this.tableDataPublic[index].numStars = this.tableDataPublic[index].numStars - 1
-                this.tableDataPublic[index].isStar = false
-            })
-        }else{
-            this.$axios.put(`/image/${id}/action/star`).then((res)=>{
-                this.tableDataPublic[index].numStars = this.tableDataPublic[index].numStars + 1
-                this.tableDataPublic[index].isStar = true
-            })
-        }
-        
-    },
-    copyUrl(url){
-        const cInput = document.createElement('input')
-        cInput.value = url
-        document.body.appendChild(cInput)
-        cInput.select()
-        document.execCommand('Copy')
-        cInput.remove()
-    },
-    searchName(){
-        this.paramsCustom.q = this.search
-        this.paramsCustom.page = 1
-        this.getImageListCustom()
-        
-    },
-    setRecommend(index,id){
-        this.$axios.put(`/admin/image/${id}/action/recommend`).then((res)=>{
-            this.tableDataCustom[index].type = 5
-        })
-    },
-    unSetRecommend(index,id){
-        this.$axios.put(`/admin/image/${id}/action/unrecommend`).then((res)=>{
-            this.tableDataCustom[index].type = 0
-        })
-    },
-    handleCommand(command){
-        this.dropdownPrivate = command.label
-        this.paramsCustom.private = command.private
-        this.getImageListCustom()
 
-    }
-  },
-  filters:{
-      transformType(val){
-        if(val==0){
-            return "GPU"
-        }
-      },
-      transformPravite(val){
-        if(val){
-            return "私有"
-        }else{
-            return "公开"
-        }
-      },
-      transformTimestamp(timestamp){
+            },
+            copyUrl(url) {
+                const cInput = document.createElement('input')
+                cInput.value = url
+                document.body.appendChild(cInput)
+                cInput.select()
+                document.execCommand('Copy')
+                cInput.remove()
+            },
+            searchName() {
+                this.paramsCustom.q = this.search
+                this.paramsCustom.page = 1
+                this.getImageListCustom()
+
+            },
+            setRecommend(index, id) {
+                this.$axios.put(`/admin/image/${id}/action/recommend`).then((res) => {
+                    this.tableDataCustom[index].type = 5
+                })
+            },
+            unSetRecommend(index, id) {
+                this.$axios.put(`/admin/image/${id}/action/unrecommend`).then((res) => {
+                    this.tableDataCustom[index].type = 0
+                })
+            },
+            handleCommand(command) {
+                this.dropdownPrivate = command.label
+                this.paramsCustom.private = command.private
+                this.getImageListCustom()
+
+            }
+        },
+        filters: {
+            transformType(val) {
+                if (val == 0) {
+                    return "GPU"
+                }
+            },
+            transformPravite(val) {
+                if (val) {
+                    return "私有"
+                } else {
+                    return "公开"
+                }
+            },
+            transformTimestamp(timestamp) {
                 const date = new Date(parseInt(timestamp) * 1000);
                 const Y = date.getFullYear() + '-';
                 const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
-                const D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + '  ';
-                const h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';
-                const m = (date.getMinutes() <10 ? '0'+date.getMinutes() : date.getMinutes()) + ':' ;
-                const s = (date.getSeconds() <10 ? '0'+date.getSeconds() : date.getSeconds()) ; // 秒 
+                const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + '  ';
+                const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
+                const m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
+                const s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()); // 秒 
                 const dateString = Y + M + D + h + m + s;
                 return dateString;
             },
-  },
-  watch:{
-    checked(val){
-        this.paramsCustom.page = 1
-        this.paramsCustom.recommend = val
-        this.getImageListCustom()
-    }
+        },
+        watch: {
+            checked(val) {
+                this.paramsCustom.page = 1
+                this.paramsCustom.recommend = val
+                this.getImageListCustom()
+            }
 
-  },
-  mounted() {
-      this.getImageListCustom()
-  },
-  created() {
-    
-  }
+        },
+        mounted() {
+            this.getImageListCustom()
+        },
+        created() {
 
-};
+        }
+
+    };
 </script>
 
 <style scoped>
-.header-wrapper {
-    background-color: #f5f5f6;
-    padding-top: 15px;
-}
-.image_text{
-    padding:25px 0 55px 0 ;
-}
-#header{
-    position: relative;
-    top:-40px;
-}
-.el-dropdown-menu__item--divided{
-    border-top: 1px solid blue;
-}
-.el-table thead{
-    background-color: #f5f5f6;
-}
-/deep/ .el-tabs__item:hover{
-    color: #000;
-    font-weight: 500;
-    
-}
-/deep/ .el-tabs__item.is-active {
-    color: #000;
-    font-weight: 500;
-}
-/deep/ .el-tabs__active-bar{
-    background-color:#000
-}
-
-#success{
-    background-color: #5bb973;
-    color: white;
-}
-.text-over{
-    overflow: hidden;
-    text-overflow: ellipsis;
-    vertical-align: middle;
-    white-space: nowrap;
-}
-.image_title{
-    display: inline-block;
-    
-    cursor: default;
-    color: rgb(66, 98, 144);
-}
-.image_desc{
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    display: -webkit-box;
-    text-overflow: ellipsis;
-    overflow: hidden;
-}
-.heart-stroke{
-    stroke: #FA8C16;
-    stroke-width: 2;
-    fill: #fff
-}
-.stars_active{
-    fill: #FA8C16 !important;
-    stroke:#FA8C16 !important
-}
-.header-new-drop{
-    width: 100%;
-}
-</style>
+    .header-wrapper {
+        background-color: #f5f5f6;
+        padding-top: 15px;
+    }
+
+    .image_text {
+        padding: 25px 0 55px 0;
+    }
+
+    #header {
+        position: relative;
+        top: -40px;
+    }
+
+    .el-dropdown-menu__item--divided {
+        border-top: 1px solid blue;
+    }
+
+    .el-table thead {
+        background-color: #f5f5f6;
+    }
+
+    /deep/ .el-tabs__item:hover {
+        color: #000;
+        font-weight: 500;
+
+    }
+
+    /deep/ .el-tabs__item.is-active {
+        color: #000;
+        font-weight: 500;
+    }
+
+    /deep/ .el-tabs__active-bar {
+        background-color: #000
+    }
+
+    #success {
+        background-color: #5bb973;
+        color: white;
+    }
+
+    .text-over {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        vertical-align: middle;
+        white-space: nowrap;
+    }
+
+    .image_title {
+        display: inline-block;
+
+        cursor: default;
+        color: rgb(66, 98, 144);
+    }
+
+    .image_desc {
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        display: -webkit-box;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+
+    .heart-stroke {
+        stroke: #FA8C16;
+        stroke-width: 2;
+        fill: #fff
+    }
+
+    .stars_active {
+        fill: #FA8C16 !important;
+        stroke: #FA8C16 !important
+    }
+
+    .header-new-drop {
+        width: 100%;
+    }
+</style>

web_src/js/components/images/selectImages.vue

@@ -1,76 +1,87 @@
 <template>
 
-<div class="inline required field" :class="{ 'unite': benchmarkNew, 'min_title': benchmarkNew}">
-    <label v-if="benchmarkNew" style="font-weight: normal;">镜像</label>
-    <label v-else>镜像</label>
-    <span v-if="benchmarkNew">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
-    <input v-if="benchmarkNew" type="text" name="image" :value="imageAddress" style="width: 48.5%;" placeholder="选择镜像或输入镜像地址">
-    <input v-else type="text" name="image" :value="imageAddress" placeholder="选择镜像或输入镜像地址">
-    <el-button type="text" @click="dialogVisible = true" icon="el-icon-plus" style="color: #0366d6;">选择镜像</el-button>
-    <el-dialog
-    title="选择镜像"
-    :visible.sync="dialogVisible"
-    width="50%"
-    >
-        <div class="ui icon input" style="z-index: 9999;position: absolute;right: 50px;height:30px;">
-            <i class="search icon" style="cursor: pointer;pointer-events:auto"></i>
-            <input type="text" placeholder="搜镜像Tag/描述/标签..." v-model="search">
-        </div>
-        <el-tabs v-model="activeName" @tab-click="handleClick">
+    <div class="inline required field" :class="{ 'unite': benchmarkNew, 'min_title': benchmarkNew}">
+        <label v-if="benchmarkNew" style="font-weight: normal;">镜像</label>
+        <label v-else>镜像</label>
+        <span v-if="benchmarkNew">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+        <input v-if="benchmarkNew" type="text" name="image" :value="imageAddress" style="width: 48.5%;"
+            placeholder="选择镜像或输入镜像地址">
+        <input v-else type="text" name="image" :value="imageAddress" placeholder="选择镜像或输入镜像地址">
+        <el-button type="text" @click="dialogVisible = true" icon="el-icon-plus" style="color: #0366d6;">选择镜像
+        </el-button>
+        <el-dialog title="选择镜像" :visible.sync="dialogVisible" width="50%">
+            <div class="ui icon input" style="z-index: 9999;position: absolute;right: 50px;height:30px;">
+                <i class="search icon" style="cursor: pointer;pointer-events:auto"></i>
+                <input type="text" placeholder="搜镜像Tag/描述/标签..." v-model="search">
+            </div>
+            <el-tabs v-model="activeName" @tab-click="handleClick">
                 <el-tab-pane label="公开镜像" name="first" v-loading="loadingPublic">
-                    <div style="display: flex;align-items: center;justify-content: space-between;padding: 1rem 0;border-bottom:1px solid #F5F5F5" v-for="(publicData,index) in tableDataPublic" :key="index">
+                    <div style="display: flex;align-items: center;justify-content: space-between;padding: 1rem 0;border-bottom:1px solid #F5F5F5"
+                        v-for="(publicData,index) in tableDataPublic" :key="index">
                         <div style="width: 90%;">
                             <div style="display: flex;align-items: center;justify-content: space-between;">
                                 <div style="display: flex;align-items: center;">
-                                    <span class="panel_dataset_name text-over" style="margin-left: 0;">{{publicData.tag}} </span>
-                                    <img v-if="publicData.type==5"  src="/img/jian.svg" style="margin-left: 0.5rem;">
+                                    <span class="panel_dataset_name text-over"
+                                        style="margin-left: 0;">{{publicData.tag}} </span>
+                                    <img v-if="publicData.type==5" src="/img/jian.svg" style="margin-left: 0.5rem;">
                                 </div>
-                                
+
                                 <div v-if="!!publicData.topics" class="text-over">
-                                    <span v-for="(topic,index) in publicData.topics" class="ui repo-topic label topic">{{topic}}</span>
+                                    <span v-for="(topic,index) in publicData.topics"
+                                        class="ui repo-topic label topic">{{topic}}</span>
                                 </div>
                             </div>
                             <div style="margin-top: 8px;display: flex;">
-                                <a :title="publicData.userName" style="cursor: default;"> 
-                                    <img class="ui avatar mini image" style="width: 20px;height: 20px;" :src="publicData.relAvatarLink">
+                                <a v-if="publicData.relAvatarLink||publicData.userName" :title="publicData.userName"
+                                    style="cursor: default;">
+                                    <img class="ui avatar mini image" style="width: 20px;height: 20px;"
+                                        :src="publicData.relAvatarLink">
                                 </a>
+                                <a v-else><img class="ui avatar mini image" src="/user/avatar/ghost/-1"
+                                        style="width: 20px;height: 20px;"></a>
                                 <span class="panel_datset_desc">{{publicData.description}}</span>
                             </div>
                         </div>
                         <div>
-                            <button  class="ui primary basic button mini" @click.stop.prevent="selectImages(publicData.place,publicData.tag)">使用</button>
+                            <button class="ui primary basic button mini"
+                                @click.stop.prevent="selectImages(publicData.place,publicData.tag)">使用</button>
                         </div>
                     </div>
                     <div class="ui container" style="margin-top:50px;text-align:center">
-                        <el-pagination
-                            background
-                            @current-change="handleCurrentChangePublic"
-                            :current-page="currentPagePublic"
-                            :page-size="pageSizePublic"
-                            layout="total, prev, pager, next"
-                            :total="totalNumPublic">
+                        <el-pagination background @current-change="handleCurrentChangePublic"
+                            :current-page="currentPagePublic" :page-size="pageSizePublic"
+                            layout="total, prev, pager, next" :total="totalNumPublic">
                         </el-pagination>
                     </div>
                 </el-tab-pane>
 
                 <el-tab-pane label="我的镜像" name="second" v-loading="loadingCustom">
-                    <div style="display: flex;align-items: center;justify-content: space-between;padding: 1rem 0;border-bottom:1px solid #F5F5F5" v-for="(customData,index) in tableDataCustom" :key="index">
+                    <div style="display: flex;align-items: center;justify-content: space-between;padding: 1rem 0;border-bottom:1px solid #F5F5F5"
+                        v-for="(customData,index) in tableDataCustom" :key="index">
                         <div style="width: 90%;">
                             <div style="display: flex;align-items: center;justify-content: space-between;">
-                                <span class="panel_dataset_name text-over" style="margin-left: 0;">{{customData.tag}} </span>
+                                <span class="panel_dataset_name text-over" style="margin-left: 0;">{{customData.tag}}
+                                </span>
                                 <div v-if="!!customData.topics" class="text-over">
-                                    <span v-for="(topic,index) in customData.topics" class="ui repo-topic label topic">{{topic}}</span>
+                                    <span v-for="(topic,index) in customData.topics"
+                                        class="ui repo-topic label topic">{{topic}}</span>
                                 </div>
                             </div>
                             <div style="margin-top: 8px;display: flex;">
-                                <a :title="customData.userName" style="cursor: default;"> 
-                                    <img class="ui avatar mini image" style="width: 20px;height: 20px;" :src="customData.relAvatarLink">
+                                <a v-if="customData.relAvatarLink||customData.userName" :title="customData.userName"
+                                    style="cursor: default;">
+                                    <img class="ui avatar mini image" style="width: 20px;height: 20px;"
+                                        :src="customData.relAvatarLink">
                                 </a>
+                                <a v-else><img class="ui avatar mini image" src="/user/avatar/ghost/-1"
+                                        style="width: 20px;height: 20px;"></a>
+
                                 <span class="panel_datset_desc">{{customData.description}}</span>
                             </div>
                         </div>
                         <div>
-                            <button  v-if="customData.status===1" class="ui primary basic button mini" @click.stop.prevent="selectImages(customData.place,customData.tag)">使用</button>
+                            <button v-if="customData.status===1" class="ui primary basic button mini"
+                                @click.stop.prevent="selectImages(customData.place,customData.tag)">使用</button>
                             <span v-if="customData.status===0" style="display: flex;align-items: center;">
                                 <i class="CREATING"></i>
                                 <span style="margin-left: 0.4em;font-size: 12px;color: #5A5A5A;">提交中</span>
@@ -80,278 +91,286 @@
                                 <el-tooltip class="item" effect="dark" content="检测提交镜像是否大小超过20G！" placement="left">
                                     <span style="margin-left: 0.4em;font-size: 12px;color:red;">提交失败</span>
                                 </el-tooltip>
-                                
+
                             </span>
                         </div>
                     </div>
                     <div class="ui container" style="margin-top:50px;text-align:center">
-                            <el-pagination
-                                background
-                                @current-change="handleCurrentChangeCustom"
-                                :current-page="currentPageCustom"
-                                :page-size="pageSizeCustom"
-                                layout="total, prev, pager, next"
-                                :total="totalNumCustom">
-                            </el-pagination>
+                        <el-pagination background @current-change="handleCurrentChangeCustom"
+                            :current-page="currentPageCustom" :page-size="pageSizeCustom"
+                            layout="total, prev, pager, next" :total="totalNumCustom">
+                        </el-pagination>
                     </div>
                 </el-tab-pane>
 
                 <el-tab-pane label="我收藏的镜像" name="third">
-                    <div style="display: flex;align-items: center;justify-content: space-between;padding: 1rem 0;border-bottom:1px solid #F5F5F5" v-for="(starData,index) in tableDataStar" :key="index">
+                    <div style="display: flex;align-items: center;justify-content: space-between;padding: 1rem 0;border-bottom:1px solid #F5F5F5"
+                        v-for="(starData,index) in tableDataStar" :key="index">
                         <div style="width: 90%;">
                             <div style="display: flex;align-items: center;justify-content: space-between;">
                                 <div style="display: flex;align-items: center;">
-                                    <span class="panel_dataset_name text-over" style="margin-left: 0;">{{starData.tag}} </span>
-                                    <img v-if="starData.type==5"  src="/img/jian.svg" style="margin-left: 0.5rem;">
+                                    <span class="panel_dataset_name text-over" style="margin-left: 0;">{{starData.tag}}
+                                    </span>
+                                    <img v-if="starData.type==5" src="/img/jian.svg" style="margin-left: 0.5rem;">
                                 </div>
-                                
+
                                 <div v-if="!!starData.topics" class="text-over">
-                                    <span v-for="(topic,index) in starData.topics" class="ui repo-topic label topic">{{topic}}</span>
+                                    <span v-for="(topic,index) in starData.topics"
+                                        class="ui repo-topic label topic">{{topic}}</span>
                                 </div>
                             </div>
                             <div style="margin-top: 8px;display: flex;">
-                                <a :title="starData.userName" style="cursor: default;"> 
-                                    <img class="ui avatar mini image" style="width: 20px;height: 20px;" :src="starData.relAvatarLink">
+                                <a v-if="starData.relAvatarLink||starData.userName" :title="starData.userName"
+                                    style="cursor: default;">
+                                    <img class="ui avatar mini image" style="width: 20px;height: 20px;"
+                                        :src="starData.relAvatarLink">
                                 </a>
+                                <a v-else><img class="ui avatar mini image" src="/user/avatar/ghost/-1"
+                                        style="width: 20px;height: 20px;"></a>
                                 <span class="panel_datset_desc">{{starData.description}}</span>
                             </div>
                         </div>
                         <div>
-                            <button  class="ui primary basic button mini" @click.stop.prevent="selectImages(starData.place,starData.tag)">使用</button>
+                            <button class="ui primary basic button mini"
+                                @click.stop.prevent="selectImages(starData.place,starData.tag)">使用</button>
                         </div>
                     </div>
                     <div class="ui container" style="margin-top:50px;text-align:center">
-                            <el-pagination
-                                background
-                                @current-change="handleCurrentChangeStar"
-                                :current-page="currentPageStar"
-                                :page-size="pageSizeStar"
-                                layout="total, prev, pager, next"
-                                :total="totalNumStar">
-                            </el-pagination>
+                        <el-pagination background @current-change="handleCurrentChangeStar"
+                            :current-page="currentPageStar" :page-size="pageSizeStar" layout="total, prev, pager, next"
+                            :total="totalNumStar">
+                        </el-pagination>
                     </div>
                 </el-tab-pane>
-        </el-tabs>
-    </el-dialog>
-</div>
-    
+            </el-tabs>
+        </el-dialog>
+    </div>
+
+
 
-  
 </template>
 
 <script>
 
-const {_AppSubUrl, _StaticUrlPrefix, csrf} = window.config;
-
-
-
-
-export default {
-  components: {
-    
-  },
-  data() {
-    return {
-      dialogVisible:false,
-      benchmarkNew:false,
-      imageAddress:'',
-      activeName: 'first',
-      search:'',
-      checked:false,
-      currentPagePublic:1,
-      pageSizePublic:5,
-      totalNumPublic:0,
-      paramsPublic:{page:1,pageSize:5,q:'',recommend:false},
-      tableDataPublic: [],
-      loadingPublic:false,
-
-      currentPageCustom:1,
-      pageSizeCustom:5,
-      totalNumCustom:0,
-      paramsCustom:{page:1,pageSize:5,q:''},
-      tableDataCustom: [],
-      starCustom:[],
-      loadingCustom:false,
-
-      currentPageStar:1,
-      pageSizeStar:5,
-      totalNumStar:0,
-      paramsStar:{page:1,pageSize:5,q:''},
-      tableDataStar: [],
-      loadingStar:false
-    };
-  },
-  methods: {
-    handleClick(tab, event) {
-        this.search = ''
-        if(tab.name=="first"){
-            this.paramsPublic.q = ''
-            this.getImageListPublic()
-        }
-        if(tab.name=="second"){
-            this.getImageListCustom()
-        }
-        if(tab.name=="third"){
-            this.getImageListStar()
-        }
-        
-      },
-    tableHeaderStyle({row,column,rowIndex,columnIndex}){
-        
-        if(rowIndex===0){
-            return 'background:#f5f5f6;color:#606266'
-        }
-        
-    },
-
-    handleCurrentChangePublic(val){
-        this.paramsPublic.page = val
-        this.getImageListPublic()
-
-    },
-
-    handleCurrentChangeCustom(val){
-        this.paramsCustom.page = val
-        this.getImageListCustom()
-
-    },
-    handleCurrentChangeStar(val){
-        this.paramsStar.page = val
-        this.getImageListStar()
-
-    },
-    getImageListPublic(){
-        this.loadingPublic = true
-        this.$axios.get('/explore/images/public',{
-            params:this.paramsPublic
-        }).then((res)=>{
-            this.totalNumPublic = res.data.count
-            this.tableDataPublic = res.data.images
-            this.loadingPublic = false 
-        })
-    },
-
-    getImageListCustom(){
-        this.loadingCustom = true
-        this.$axios.get('/explore/images/custom',{
-            params:this.paramsCustom
-        }).then((res)=>{
-            this.totalNumCustom = res.data.count
-            this.tableDataCustom = res.data.images
-            this.tableDataCustom.forEach(element => {
-                this.starCustom.push({id:element.id,})
-                
-            });
-            this.loadingCustom = false
-        })
-    },
-
-    getImageListStar(){
-        this.loadingStar = true
-        this.$axios.get('/explore/images/star',{
-            params:this.paramsStar
-        }).then((res)=>{
-            this.totalNumStar = res.data.count
-            this.tableDataStar = res.data.images
-            this.loadingStar = false
-        })
-    },
-    searchName(){
-        if(this.activeName=='first'){
-            this.paramsPublic.q = this.search
-            this.paramsPublic.page = 1
+    const { _AppSubUrl, _StaticUrlPrefix, csrf } = window.config;
+
+
+
+
+    export default {
+        components: {
+
+        },
+        data() {
+            return {
+                dialogVisible: false,
+                benchmarkNew: false,
+                imageAddress: '',
+                activeName: 'first',
+                search: '',
+                checked: false,
+                currentPagePublic: 1,
+                pageSizePublic: 5,
+                totalNumPublic: 0,
+                paramsPublic: { page: 1, pageSize: 5, q: '', recommend: false },
+                tableDataPublic: [],
+                loadingPublic: false,
+
+                currentPageCustom: 1,
+                pageSizeCustom: 5,
+                totalNumCustom: 0,
+                paramsCustom: { page: 1, pageSize: 5, q: '' },
+                tableDataCustom: [],
+                starCustom: [],
+                loadingCustom: false,
+
+                currentPageStar: 1,
+                pageSizeStar: 5,
+                totalNumStar: 0,
+                paramsStar: { page: 1, pageSize: 5, q: '' },
+                tableDataStar: [],
+                loadingStar: false
+            };
+        },
+        methods: {
+            handleClick(tab, event) {
+                this.search = ''
+                if (tab.name == "first") {
+                    this.paramsPublic.q = ''
+                    this.getImageListPublic()
+                }
+                if (tab.name == "second") {
+                    this.getImageListCustom()
+                }
+                if (tab.name == "third") {
+                    this.getImageListStar()
+                }
+
+            },
+            tableHeaderStyle({ row, column, rowIndex, columnIndex }) {
+
+                if (rowIndex === 0) {
+                    return 'background:#f5f5f6;color:#606266'
+                }
+
+            },
+
+            handleCurrentChangePublic(val) {
+                this.paramsPublic.page = val
+                this.getImageListPublic()
+
+            },
+
+            handleCurrentChangeCustom(val) {
+                this.paramsCustom.page = val
+                this.getImageListCustom()
+
+            },
+            handleCurrentChangeStar(val) {
+                this.paramsStar.page = val
+                this.getImageListStar()
+
+            },
+            getImageListPublic() {
+                this.loadingPublic = true
+                this.$axios.get('/explore/images/public', {
+                    params: this.paramsPublic
+                }).then((res) => {
+                    this.totalNumPublic = res.data.count
+                    this.tableDataPublic = res.data.images
+                    this.loadingPublic = false
+                })
+            },
+
+            getImageListCustom() {
+                this.loadingCustom = true
+                this.$axios.get('/explore/images/custom', {
+                    params: this.paramsCustom
+                }).then((res) => {
+                    this.totalNumCustom = res.data.count
+                    this.tableDataCustom = res.data.images
+                    this.tableDataCustom.forEach(element => {
+                        this.starCustom.push({ id: element.id, })
+
+                    });
+                    this.loadingCustom = false
+                })
+            },
+
+            getImageListStar() {
+                this.loadingStar = true
+                this.$axios.get('/explore/images/star', {
+                    params: this.paramsStar
+                }).then((res) => {
+                    this.totalNumStar = res.data.count
+                    this.tableDataStar = res.data.images
+                    this.loadingStar = false
+                })
+            },
+            searchName() {
+                if (this.activeName == 'first') {
+                    this.paramsPublic.q = this.search
+                    this.paramsPublic.page = 1
+                    this.getImageListPublic()
+                }
+                if (this.activeName == 'second') {
+                    this.paramsCustom.q = this.search
+                    this.paramsCustom.page = 1
+                    this.getImageListCustom()
+                }
+                if (this.activeName == 'third') {
+                    this.paramsStar.q = this.search
+                    this.paramsStar.page = 1
+                    this.getImageListStar()
+                }
+
+            },
+            selectImages(place) {
+                this.imageAddress = place
+                this.dialogVisible = false
+            },
+
+        },
+        watch: {
+            search(val) {
+                if (this.activeName == 'first') {
+                    this.paramsPublic.q = val
+                    this.getImageListPublic()
+                }
+                if (this.activeName == 'second') {
+                    this.paramsCustom.q = val
+                    this.getImageListCustom()
+                }
+                if (this.activeName == 'third') {
+                    this.paramsStar.q = val
+                    this.getImageListStar()
+                }
+            }
+
+        },
+        mounted() {
             this.getImageListPublic()
+            if (location.href.indexOf('benchmark') !== -1 || location.href.indexOf('train-job') !== -1) {
+                this.benchmarkNew = true
+            }
+        },
+        created() {
+
         }
-        if(this.activeName=='second'){
-            this.paramsCustom.q = this.search
-            this.paramsCustom.page = 1
-            this.getImageListCustom()
-        }
-        if(this.activeName=='third'){
-            this.paramsStar.q = this.search
-            this.paramsStar.page = 1
-            this.getImageListStar()
-        }
-        
-    },
-    selectImages(place){
-        this.imageAddress = place
-        this.dialogVisible = false
-    },
-
-  },
-  watch:{
-      search(val){
-          if(this.activeName=='first'){
-              this.paramsPublic.q = val
-              this.getImageListPublic()
-          }
-          if(this.activeName=='second'){
-              this.paramsCustom.q = val
-              this.getImageListCustom()
-          }
-          if(this.activeName=='third'){
-              this.paramsStar.q = val
-              this.getImageListStar()
-          }
-      }
-
-  },
-  mounted() {
-      this.getImageListPublic()
-      if(location.href.indexOf('benchmark')!==-1 || location.href.indexOf('train-job')!==-1){
-          this.benchmarkNew = true
-      }
-  },
-  created() {
-    
-  }
-
-};
+
+    };
 </script>
 
 <style scoped>
-.header-wrapper {
-    background-color: #f5f5f6;
-    padding-top: 15px;
-}
-.image_text{
-    padding:25px 0 55px 0 ;
-}
-#header{
-    position: relative;
-    top:-40px;
-}
-#success{
-    background-color: #5bb973;
-    color: white;
-}
-.text-over{
-    overflow: hidden;
-    text-overflow: ellipsis;
-    vertical-align: middle;
-    white-space: nowrap;
-}
-.image_title{
-    display: inline-block;
-    width: 80%;
-    cursor: default;
-    color: rgb(66, 98, 144);
-}
-.image_desc{
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    display: -webkit-box;
-    text-overflow: ellipsis;
-    overflow: hidden;
-}
-.heart-stroke{
-    stroke: #666;
-    stroke-width: 2;
-    fill: #fff
-}
-.stars_active{
-    fill: #FA8C16 !important;
-    stroke:#FA8C16 !important
-}
-</style>
+    .header-wrapper {
+        background-color: #f5f5f6;
+        padding-top: 15px;
+    }
+
+    .image_text {
+        padding: 25px 0 55px 0;
+    }
+
+    #header {
+        position: relative;
+        top: -40px;
+    }
+
+    #success {
+        background-color: #5bb973;
+        color: white;
+    }
+
+    .text-over {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        vertical-align: middle;
+        white-space: nowrap;
+    }
+
+    .image_title {
+        display: inline-block;
+        width: 80%;
+        cursor: default;
+        color: rgb(66, 98, 144);
+    }
+
+    .image_desc {
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        display: -webkit-box;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+
+    .heart-stroke {
+        stroke: #666;
+        stroke-width: 2;
+        fill: #fff
+    }
+
+    .stars_active {
+        fill: #FA8C16 !important;
+        stroke: #FA8C16 !important
+    }
+</style>