From 3bec5f176303b2c4b988b19cc5c1fcc3a8925f40 Mon Sep 17 00:00:00 2001
From: zhoupzh <zhoupzh@pcl.ac.cn>
Date: Sat, 2 Apr 2022 16:16:07 +0800
Subject: [PATCH] fix issue

---
 templates/repo/cloudbrain/image/edit.tmpl | 112 +++++
 web_src/js/components/Images.vue          | 483 +++++++++++++---------
 2 files changed, 405 insertions(+), 190 deletions(-)
 create mode 100644 templates/repo/cloudbrain/image/edit.tmpl

diff --git a/templates/repo/cloudbrain/image/edit.tmpl b/templates/repo/cloudbrain/image/edit.tmpl
new file mode 100644
index 000000000..345627061
--- /dev/null
+++ b/templates/repo/cloudbrain/image/edit.tmpl
@@ -0,0 +1,112 @@
+<style>
+        .label_color{
+            color:#505559 !important;
+            width: 6% !important;
+            text-align: center;
+        }
+        </style>
+        {{template "base/head" .}}
+        <div id="mask">
+                <div id="loadingPage">
+                    <div class="rect1"></div>
+                    <div class="rect2"></div>
+                    <div class="rect3"></div>
+                    <div class="rect4"></div>
+                    <div class="rect5"></div>
+                </div>
+        </div>
+        <div class="repository">
+            {{template "repo/header" .}}
+            <div class="alert"></div>
+            <div class="ui container">
+                <div>
+                    <h4 class="ui top attached header">
+                        {{.i18n.Tr "repo.submit_image"}}
+                    </h4>
+                    <div class="submit-image-tmplvalue" style="display: none;" data-link="{{$.Link}}"></div>
+                    <div class="ui attached segment" style="padding: 2em 3em;padding-bottom: 7rem;">
+                        <form class="ui form" id="form_image">
+                            {{.CsrfTokenHtml}}
+                            <div class="inline field">
+                                <label class="label_color" for="">{{$.i18n.Tr "dataset.dataset_available_clusters"}}</label>
+                                <div class="ui basic label" style="border: none !important;color:#3291f8;">
+                                    <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14"><path fill="none" d="M0 0h24v24H0z"></path><path d="M4 3h16a1 1 0 0 1 1 1v7H3V4a1 1 0 0 1 1-1zM3 13h18v7a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-7zm4 3v2h3v-2H7zM7 6v2h3V6H7z"></path></svg>
+                                    CPU/GPU
+                                </div>
+                                <input type="hidden" value="{{.Type}}" name="type">
+                            </div>
+                            <div class="inline required field">
+                                <label class="label_color" for="">{{$.i18n.Tr "repo.images.name"}}</label>
+                                <input type="text" name="tag" required placeholder="{{$.i18n.Tr "repo.images.name_placerholder"}}" style="width: 80%;">
+                                <span class="tooltips" style="display: block;padding-left: 0.5rem;">{{.i18n.Tr "cloudbrain.job_name_rule"}}</span>
+                            </div>
+                            <div class="inline required field">
+                                <label class="label_color" for="">{{$.i18n.Tr "dataset.description"}}</label>
+                                <textarea style="width: 80%;" required id="description" name="description" rows="3" maxlength="255" 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)"></textarea>
+                            </div>
+                            <div class="inline field" style="display: flex;align-items: center;">
+                                <label class="label_color" for="">{{$.i18n.Tr "repo.model.manage.label"}}</label>&nbsp;
+                                <div class="ui multiple search selection dropdown" id="dropdown_image" style="width: 80%;">
+                                    <input type="hidden" name="topics" value="" required>
+                                    <div class="default text" id="default_text">{{.i18n.Tr "repo.repo_label_helpe"}}</div>
+                                    <div class="menu" id="course_label_item"></div>
+                                </div>
+                            </div>
+                            <span class="tooltips" style="display: block;padding-left: 0.5rem;margin-top: 0.5rem;margin-bottom: 1rem;">{{.i18n.Tr "repo.image.label_tooltips"}}</span>
+                            <div class="inline fields">
+                                <label class="label_color" for="" style="visibility: hidden;"></label>
+                                <div class="field">
+                                    <div class="ui radio checkbox">
+                                        <input type="radio" name="isPrivate" checked="checked" value="false">
+                                        <label>{{.i18n.Tr "org.settings.visibility.public"}}</label>
+                                    </div>
+                                </div>
+                                <div class="field" style="flex: 0.15;">
+                                    <div class="ui radio checkbox" >
+                                        <input type="radio" name="isPrivate" value="true">
+                                        <label>{{.i18n.Tr "home.show_private"}}</label>
+                                    </div>
+                                </div>
+                                <div class="field">
+                                    <span class="label_color">{{.i18n.Tr "repo.images.public_tooltips"}}</span>
+                                </div>
+                            </div>
+                            <div class="inline required field" style="padding-top: 2rem;">
+                                <label class="label_color" for="" style="visibility: hidden;"></label>
+                                <button class="ui create_image green button" type="button">
+                                {{.i18n.Tr "repo.cloudbrain.commit_image"}}
+                                </button>
+                                <a class="ui button" id="cancel_submit_image">{{.i18n.Tr "repo.cloudbrain.cancel"}}</a>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+        {{template "base/footer" .}}
+        <script>
+        console.log({{$.Link}})
+        let url_href = {{$.Link}}
+        function submitImage(){
+            console.log($('#form_image').serialize())
+            $.ajax({
+                    url:url_href,
+                    type:'POST',
+                    data:$('#form_image').serialize(),
+                    success:function(res){
+                        console.log("res",res)
+                    },
+                    error: function(xhr){
+                    // 隐藏 loading
+                    // 只有请求不正常（状态码不为200）才会执行
+                        // $('.ui.error.message').text(xhr.responseText)
+                        // $('.ui.error.message').css('display','block')
+                    },
+                    complete:function(xhr){
+                        // $("#mask").css({"display":"none","z-index":"1"})
+                    }
+                })
+        }
+        
+        
+        </script>
\ No newline at end of file
diff --git a/web_src/js/components/Images.vue b/web_src/js/components/Images.vue
index d0e9febbc..d27a12c1f 100644
--- a/web_src/js/components/Images.vue
+++ b/web_src/js/components/Images.vue
@@ -9,7 +9,8 @@
     </div>
     <div class="ui container" id="header">
         <el-tabs v-model="activeName" @tab-click="handleClick">
-            <el-tab-pane label="公共镜像(云脑1)" name="first" v-loading="loading">
+            <el-tab-pane label="公开镜像" name="first" v-loading="loadingPublic">
+            <template v-if="tableDataPublic.length!==0">
                 <div class="ui sixteen wide column">
                     <div class="ui two column stackable grid">
                         <div class="column">
@@ -17,27 +18,12 @@
                                 <el-button id="success" slot="append" icon="el-icon-search" @click="searchName()">搜索</el-button>
                             </el-input>
                         </div>
-
-                        <!-- <div class="column right aligned">
-                            <el-dropdown>
-                                <span class="el-dropdown-link">
-                                    排序<i class="el-icon-caret-bottom"></i>
-                                </span>
-                                <el-dropdown-menu slot="dropdown">
-                                    <el-dropdown-item>最早创建</el-dropdown-item>
-                                    <el-dropdown-item>最新创建</el-dropdown-item>
-                                    <el-dropdown-item divided>按镜像字母顺序排序</el-dropdown-item>
-                                    <el-dropdown-item>按镜像字母逆序排序</el-dropdown-item>
-                                </el-dropdown-menu>
-                            </el-dropdown>
-                        </div> -->
                     </div>
                 </div>
-
                 <el-row style="margin-top:15px;">
 
                     <el-table
-                        :data="tableData"
+                        :data="tableDataPublic"
                         style="width: 100%"
                         :header-cell-style="tableHeaderStyle"
                         :default-sort="{prop:'createtime',order:'descending'}">
@@ -86,91 +72,117 @@
                 <div class="ui container" style="margin-top:50px;text-align:center">
                         <el-pagination
                             background
-                            @size-change="handleSizeChange"
-                            @current-change="handleCurrentChange"
-                            :current-page="currentPage"
-                            :page-size="pageSize"
-                            :page-sizes="[5,10,20]"
+                            @size-change="handleSizeChangePublic"
+                            @current-change="handleCurrentChangePublic"
+                            :current-page="currentPagePublic"
+                            :page-size="pageSizePublic"
+                            :page-sizes="[10,15,20]"
                             layout="total, sizes, prev, pager, next, jumper"
-                            :total="totalNum">
+                            :total="totalNumPublic">
                         </el-pagination>
                 </div>
-                    
-                
+            </template>
+            <el-empty v-else :image-size="200"></el-empty>
             </el-tab-pane>
-            <el-tab-pane label="自定义镜像(云脑1)" name="second" v-loading="loading1">
+            <el-tab-pane label="我的镜像" name="second" v-loading="loadingCustom">
+            <template v-if="tableDataCustom.length!==0">
                 <div class="ui sixteen wide column">
                     <div class="ui two column stackable grid">
                         <div class="column">
                             <el-input placeholder="请输入镜像名称关健词" v-model="search" class="input-with-select" @keyup.enter.native="searchName()">
                                 <el-button slot="append" id="success" icon="el-icon-search" @click="searchName()">搜索</el-button>
                             </el-input>
-                        </div>
-
-                        <!-- <div class="column right aligned">
-                            <el-dropdown>
-                                <span class="el-dropdown-link">
-                                    排序<i class="el-icon-caret-bottom"></i>
-                                </span>
-                                <el-dropdown-menu slot="dropdown">
-                                    <el-dropdown-item>最早创建</el-dropdown-item>
-                                    <el-dropdown-item>最新创建</el-dropdown-item>
-                                    <el-dropdown-item divided>按镜像字母顺序排序</el-dropdown-item>
-                                    <el-dropdown-item>按镜像字母逆序排序</el-dropdown-item>
-                                </el-dropdown-menu>
-                            </el-dropdown>
-                        </div> -->
-                        
+                        </div>   
                     </div>
                     
                 </div>
-
                 <el-row style="margin-top:15px;">
-
                     <el-table
-                        :data="tableData1"
+                        :data="tableDataCustom"
                         style="width: 100%"
                         :header-cell-style="tableHeaderStyle"
-                        :default-sort="{prop:'createtime',order:'descending'}">
+                        >
                         <el-table-column
                             label="镜像名称"
-                            width="350"
+                            min-width="19%"
                             align="left"
-                            prop="name"
-                            sortable
+                            prop="tag"
                             >
                             <template slot-scope="scope">
-                                <a class="text-over" :title="scope.row.name" style="cursor:default;color:#426290">{{ scope.row.name }}</a>
+                                <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;" v-if="scope.row.isPrivate"></i>
+                                </div>
                             </template>
                         </el-table-column>
                         <el-table-column
-                            label="文件路径/镜像描述"
-                            width="450"
+                            label="镜像描述"
+                            min-width="28%"
                             align="left"
-                            
+                            prop="description"
                             >
                             <template slot-scope="scope">
-                                <el-tooltip class="item" effect="dark" content="点击复制文件路径" placement="top">
-                                    <a class="text-over" style="display:block;" @click="copyUrl(scope.row.place)">{{ scope.row.place }}</a>
-                                </el-tooltip>
+                                <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">{{topic}}</span>
+                                </div>
                                 
-                                <span class="text-over" :title="scope.row.description | clearP">{{ scope.row.description | clearP }}</span>
                             </template>
                         </el-table-column>
                         <el-table-column
-                            prop="provider"
-                            label="提供者"
-                            width="120"
-                            align="left"
-                            sortable>
+                            prop="type"
+                            label="可用集群"
+                            min-width="10%"
+                            align="center"
+                            >
+                            <template slot-scope="scope">
+                                {{scope.row.type | transformType}}
+                            </template>
                         </el-table-column>
                         <el-table-column
-                            prop="createtime"
+                            prop="isPrivate"
+                            label="状态"
+                            min-width="8%"
+                            align="center"
+                            >
+                            <template slot-scope="scope">
+                                {{scope.row.isPrivate | transformPravite}}
+                            </template>
+                        </el-table-column>
+                        <el-table-column
+                            prop="createdUnix"
                             label="创建时间"
                             align="center"
-                            sortable>
+                            min-width="14%"
+                            >
                             <template slot-scope="scope">
-                                {{scope.row.createtime | transformTimestamp}}
+                                {{scope.row.createdUnix | transformTimestamp}}
+                            </template>
+                        </el-table-column>
+                        <el-table-column
+                            align="center"
+                            min-width="21%"
+                            label="操作"
+                            >
+                            <template slot-scope="scope">
+                                    <div style="display: flex;justify-content: flex-end;align-items: center;">
+                                        <div style="display: flex;align-items: center;cursor:pointer;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;">3</span>
+                                        </div>
+                                        <span style="padding: 0 1rem;color:#0366d6;cursor:pointer;" @click="copyUrl('test')">复制地址</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>
@@ -178,76 +190,93 @@
                 <div class="ui container" style="margin-top:50px;text-align:center">
                         <el-pagination
                             background
-                            @size-change="handleSizeChange1"
-                            @current-change="handleCurrentChange1"
-                            :current-page="currentPage1"
-                            :page-size="pageSize1"
-                            :page-sizes="[5,10,20]"
+                            @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="totalNum1">
+                            :total="totalNumCustom">
                         </el-pagination>
                 </div>
-                
-
+            </template>
+            <el-empty v-else :image-size="200"></el-empty>
             </el-tab-pane>
-            <el-tab-pane label="公共镜像(云脑2)" name="third">
-                
-                <div class="ui sixteen wide column">
-                    <div class="ui two column stackable grid">
-                        <div class="column">
-                            <el-input placeholder="请输入镜像名称关健词" v-model="search" class="input-with-select">
-                                <el-button slot="append" id="success" icon="el-icon-search">搜索</el-button>
-                            </el-input>
+            <el-tab-pane label="我收藏的镜像" name="third">
+                <template v-if="tableDataStar.length!==0">
+                    <div class="ui sixteen wide column">
+                        <div class="ui two column stackable grid">
+                            <div class="column">
+                                <el-input placeholder="请输入镜像名称关健词" v-model="search" class="input-with-select">
+                                    <el-button slot="append" id="success" icon="el-icon-search">搜索</el-button>
+                                </el-input>
+                            </div>
                         </div>
-
-                        <!-- <div class="column right aligned">
-                            <el-dropdown>
-                                <span class="el-dropdown-link">
-                                    排序<i class="el-icon-caret-bottom"></i>
-                                </span>
-                                <el-dropdown-menu slot="dropdown">
-                                    <el-dropdown-item>最早创建</el-dropdown-item>
-                                    <el-dropdown-item>最新创建</el-dropdown-item>
-                                    <el-dropdown-item divided>按镜像字母顺序排序</el-dropdown-item>
-                                    <el-dropdown-item>按镜像字母逆序排序</el-dropdown-item>
-                                </el-dropdown-menu>
-                            </el-dropdown>
-                        </div> -->
-                        
                     </div>
-                    
-                </div>
-
-                <el-empty :image-size="200"></el-empty>
-            </el-tab-pane>
-            <el-tab-pane label="自定义镜像(云脑2)" name="fourth">
-                
-                <div class="ui sixteen wide column">
-                    <div class="ui two column stackable grid">
-                        <div class="column">
-                            <el-input placeholder="请输入镜像名称关健词" v-model="search" class="input-with-select">
-                                <el-button slot="append" id="success" icon="el-icon-search">搜索</el-button>
-                            </el-input>
-                        </div>
-
-                        <!-- <div class="column right aligned">
-                            <el-dropdown>
-                                <span class="el-dropdown-link">
-                                    排序<i class="el-icon-caret-bottom"></i>
-                                </span>
-                                <el-dropdown-menu slot="dropdown">
-                                    <el-dropdown-item>最早创建</el-dropdown-item>
-                                    <el-dropdown-item>最新创建</el-dropdown-item>
-                                    <el-dropdown-item divided>按镜像字母顺序排序</el-dropdown-item>
-                                    <el-dropdown-item>按镜像字母逆序排序</el-dropdown-item>
-                                </el-dropdown-menu>
-                            </el-dropdown>
-                        </div>  -->
+                    <el-row style="margin-top:15px;">
+                        <el-table
+                            :data="tableDataStar"
+                            style="width: 100%"
+                            :header-cell-style="tableHeaderStyle"
+                            :default-sort="{prop:'createtime',order:'descending'}">
+                            <el-table-column
+                                label="镜像名称"
+                                width="350"
+                                align="left"
+                                prop="name"
+                                sortable
+                                >
+                                <template slot-scope="scope">
+                                    <a class="text-over" :title="scope.row.name" style="cursor:default;color:#426290">{{ scope.row.name }}</a>
+                                </template>
+                            </el-table-column>
+                            <el-table-column
+                                label="文件路径/镜像描述"
+                                width="450"
+                                align="left"
+                                
+                                >
+                                <template slot-scope="scope">
+                                    <el-tooltip class="item" effect="dark" content="点击复制文件路径" placement="top">
+                                        <a class="text-over" style="display:block;" @click="copyUrl(scope.row.place)">{{ scope.row.place }}</a>
+                                    </el-tooltip>
+                                    
+                                    <span class="text-over" :title="scope.row.description | clearP">{{ scope.row.description | clearP }}</span>
+                                </template>
+                            </el-table-column>
+                            <el-table-column
+                                prop="provider"
+                                label="提供者"
+                                width="120"
+                                align="left"
+                                sortable>
+                            </el-table-column>
+                            <el-table-column
+                                prop="createtime"
+                                label="创建时间"
+                                align="center"
+                                sortable>
+                                <template slot-scope="scope">
+                                    {{scope.row.createtime | transformTimestamp}}
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </el-row>
+                    <div class="ui container" style="margin-top:50px;text-align:center">
+                            <el-pagination
+                                background
+                                @size-change="handleSizeChangeStar"
+                                @current-change="handleCurrentChangeStar"
+                                :current-page="currentPageStar"
+                                :page-size="pageSizeStar"
+                                :page-sizes="[5,15,20]"
+                                layout="total, sizes, prev, pager, next, jumper"
+                                :total="totalNumStar">
+                            </el-pagination>
                     </div>
-                </div>
-
-                <el-empty :image-size="200"></el-empty>
-
+                </template>
+                
+                <el-empty v-else :image-size="200"></el-empty>
             </el-tab-pane>
         </el-tabs>
   </div>
@@ -271,28 +300,38 @@ export default {
     return {
       activeName: 'first',
       search:'',
-      currentPage:1,
-      pageSize:10,
-      totalNum:0,
-      params:{page:1,size:10,name:''},
-      tableData: [],
-      loading:false,
-
-      currentPage1:1,
-      pageSize1:10,
-      totalNum1:0,
-      params1:{page:1,size:10,name:''},
-      tableData1: [],
-      loading1:false
+      currentPagePublic:1,
+      pageSizePublic:15,
+      totalNumPublic:0,
+      paramsPublic:{page:1,pageSize:15,q:'',recommend:false},
+      tableDataPublic: [],
+      loadingPublic:false,
+
+      currentPageCustom:1,
+      pageSizeCustom:15,
+      totalNumCustom:0,
+      paramsCustom:{page:1,pageSize:15,q:''},
+      tableDataCustom: [],
+      loadingCustom:false,
+
+      currentPageStar:1,
+      pageSizeStar:15,
+      totalNumStar:0,
+      paramsStar:{page:1,pageSize:15,q:''},
+      tableDataStar: [],
+      loadingStar:false
     };
   },
   methods: {
     handleClick(tab, event) {
         if(tab.name=="first"){
-            this.getImageList()
+            this.getImageListPublic()
         }
         if(tab.name=="second"){
-            this.getImageList1()
+            this.getImageListCustom()
+        }
+        if(tab.name=="third"){
+            this.getImageListStar()
         }
         
       },
@@ -303,51 +342,84 @@ export default {
         }
         
     },
-    handleSizeChange(val){
-        this.params.size = val
-        this.getImageList()
+    handleSizeChangePublic(val){
+        this.paramsPublic.pageSize = val
+        this.getImageListPublic()
+
+
+    },
+    handleCurrentChangePublic(val){
+        this.paramsPublic.page = val
+        this.getImageListPublic()
+
+    },
+    handleSizeChangeCustom(val){
+        this.paramsCustom.pageSize = val
+        this.getImageListCustom()
 
 
     },
-    handleCurrentChange(val){
-        this.params.page = val
-        this.getImageList()
+    handleCurrentChangeCustom(val){
+        this.paramsCustom.page = val
+        this.getImageListCustom()
 
     },
-    handleSizeChange1(val){
-        this.params1.size = val
-        this.getImageList1()
+    handleSizeChangeStar(val){
+        this.paramsStar.pageSize = val
+        this.getImageListStar()
 
 
     },
-    handleCurrentChange1(val){
-        this.params1.page = val
-        this.getImageList1()
+    handleCurrentChangeStar(val){
+        this.paramsStar.page = val
+        this.getImageListStar()
 
     },
-    getImageList(){
-        this.loading = true
-        this.$axios.get('/images/public',{
-            params:this.params
+    getImageListPublic(){
+        this.loadingPublic = true
+        this.$axios.get('/explore/images/public',{
+            params:this.paramsPublic
+        }).then((res)=>{
+            console.log("res",res.data)
+            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)=>{
             console.log("res",res)
-            this.totalNum = res.data.count
-            this.tableData = res.data.rows
-            this.loading = false 
+            this.totalNumCustom = res.data.count
+            this.tableDataCustom = res.data.images
+            this.loadingCustom = false
         })
     },
 
-    getImageList1(){
-        this.loading1 = true
-        this.$axios.get('/images/custom',{
-            params:this.params1
+    getImageListStar(){
+        this.loadingStar = true
+        this.$axios.get('/explore/images/star',{
+            params:this.paramsStar
         }).then((res)=>{
             console.log("res",res)
-            this.totalNum1 = res.data.count
-            this.tableData1 = res.data.rows
-            this.loading1 = false
+            this.totalNumStar = res.data.count
+            this.tableDataStar = res.data.images
+            this.loadingStar = false
+        })
+    },
+
+    deleteImage(id){
+        this.$axios.delete('/image/'+id).then((res)=>{
+            console.log(res)
+            this.getImageListCustom()
         })
     },
+    eidtImage(id){
+        location.href = `/image/${id}/imageSquare`
+    },
     copyUrl(url){
         const cInput = document.createElement('input')
         cInput.value = url
@@ -355,38 +427,49 @@ export default {
         cInput.select()
         document.execCommand('Copy')
         cInput.remove()
-
     },
     searchName(){
         if(this.activeName=='first'){
-            this.params.name = this.search
-            this.params.page = 1
-            this.getImageList()
+            this.paramsPublic.q = this.search
+            this.paramsPublic.page = 1
+            this.getImageListPublic()
         }
         if(this.activeName=='second'){
-            this.params1.name = this.search
-            this.params1.page = 1
-            this.getImageList1()
+            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()
         }
         
     }
 
   },
   filters:{
-    
-
-
-
       clearP(value){
           if(!value) return ''
           const reg = /\<\/?p\>/g;
           value = value.replace(reg,'')
           return value
-
+      },
+      transformType(val){
+        if(val==0){
+            return "GPU"
+        }
+      },
+      transformPravite(val){
+        if(val){
+            return "私有"
+        }else{
+            return "公开"
+        }
       },
       transformTimestamp(timestamp){
-                let a = new Date(timestamp).getTime();
-                const date = new Date(a);
+                // let a = new Date(timestamp).getTime();
+                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()) + '  ';
@@ -397,24 +480,26 @@ export default {
                 // console.log('dateString', dateString); // > dateString 2021-07-06 14:23
                 return dateString;
             },
-    
-       
   },
   watch:{
       search(val){
           if(!val && this.activeName=='first'){
-              this.params.name = val
-              this.getImageList()
+              this.paramsPublic.q = val
+              this.getImageListPublic()
           }
           if(!val && this.activeName=='second'){
-              this.params1.name = val
-              this.getImageList1()
+              this.paramsCustom.q = val
+              this.getImageListCustom()
+          }
+          if(!val && this.activeName=='third'){
+              this.paramsStar.q = val
+              this.getImageListStar()
           }
       }
 
   },
   mounted() {
-      this.getImageList()
+      this.getImageListPublic()
   },
   created() {
     
@@ -500,4 +585,22 @@ export default {
     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
+}
 </style>