From 396c915191e372dc5214f095e3273b33964a6486 Mon Sep 17 00:00:00 2001
From: zhoupzh <zhoupzh@pcl.ac.cn>
Date: Thu, 8 Sep 2022 11:20:35 +0800
Subject: [PATCH] fix issue

---
 templates/explore/images.tmpl           |   39 +-
 templates/org/navber.tmpl               |    5 +-
 web_src/js/components/images/Images.vue | 1700 +++++++++++++----------
 3 files changed, 999 insertions(+), 745 deletions(-)

diff --git a/templates/explore/images.tmpl b/templates/explore/images.tmpl
index a79db4c07..90913d89c 100644
--- a/templates/explore/images.tmpl
+++ b/templates/explore/images.tmpl
@@ -1,24 +1,25 @@
 {{template "base/head" .}}
-<div id="images">
-</div>
+<div id="images"></div>
 <!-- 确认模态框 -->
 <div id="deletemodel">
-    <div class="ui basic modal images">
-        <div class="ui icon header">
-            <i class="trash icon"></i> {{.i18n.Tr "repo.images.delete_task"}}
-        </div>
+	<div class="ui basic modal images">
+		<div class="ui icon header">
+			<i class="trash icon"></i> {{.i18n.Tr "repo.images.delete_task"}}
+		</div>
 
-        <div class="content">
-            <p>{{.i18n.Tr "repo.images.task_delete_confirm"}}</p>
-        </div>
-        <div class="actions">
-            <div class="ui red basic inverted cancel button">
-                <i class="remove icon"></i> {{.i18n.Tr "cloudbrain.operate_cancel"}}
-            </div>
-            <div class="ui green basic inverted ok button">
-                <i class="checkmark icon"></i> {{.i18n.Tr "cloudbrain.operate_confirm"}}
-            </div>
-        </div>
-    </div>
+		<div class="content">
+			<p>{{.i18n.Tr "repo.images.task_delete_confirm"}}</p>
+		</div>
+		<div class="actions">
+			<div class="ui red basic inverted cancel button">
+				<i class="remove icon"></i>
+				{{.i18n.Tr "cloudbrain.operate_cancel"}}
+			</div>
+			<div class="ui green basic inverted ok button">
+				<i class="checkmark icon"></i>
+				{{.i18n.Tr "cloudbrain.operate_confirm"}}
+			</div>
+		</div>
+	</div>
 </div>
-{{template "base/footer" .}}
\ No newline at end of file
+{{template "base/footer" .}}
diff --git a/templates/org/navber.tmpl b/templates/org/navber.tmpl
index c2c3d51c0..7950d2f27 100755
--- a/templates/org/navber.tmpl
+++ b/templates/org/navber.tmpl
@@ -36,10 +36,7 @@
 </div> -->
 <!--电脑、宽屏-->
 <style>
-	.dis{
-		margin-bottom: 10px;
-	}
-	.active{
+	.mbom .active{
 		color:#0366D6 !important;
 	}
 	.mbom{
diff --git a/web_src/js/components/images/Images.vue b/web_src/js/components/images/Images.vue
index 84f39b752..7df7ee14d 100755
--- a/web_src/js/components/images/Images.vue
+++ b/web_src/js/components/images/Images.vue
@@ -1,811 +1,1067 @@
 <template>
-<div>
+  <div>
     <div class="header-wrapper">
-        <div class="ui container">
-            <el-row class="image_text">
-                <h1>云脑镜像</h1>
-            </el-row>    
-        </div>
+      <div class="ui container">
+        <el-row class="image_text">
+          <h1>云脑镜像</h1>
+        </el-row>
+      </div>
     </div>
     <div class="ui container" id="header">
-        <el-tabs v-model="activeName" @tab-click="handleClick">
-            <el-tab-pane label="公开镜像" name="first" v-loading="loadingPublic">
-            <template v-if="tableDataPublic.length!==0">
-                <el-row style="align-items: center;display: flex;">
-                        <el-col :span="12">
-                            <div>
-                                <el-checkbox v-model="checked">仅显示平台推荐</el-checkbox>
-                            </div>
-                        </el-col>
-                        <el-col :span="4"><div style="visibility: hidden;">TODO</div></el-col>
-                        <el-col :span="8">
-                            <div>
-                                <el-input placeholder="搜镜像Tag/描述/标签..." v-model="search" class="input-with-select" @keyup.enter.native="searchName()">
-                                    <el-button id="success" slot="append" icon="el-icon-search" @click="searchName()">搜索</el-button>
-                                </el-input>
-                            </div>
-                        </el-col>
-                </el-row>
-                <el-row style="margin-top:15px;">
-
-                        <el-table
-                        :data="tableDataPublic"
-                        style="width: 100%"
-                        :header-cell-style="tableHeaderStyle"
+      <el-tabs v-model="activeName" @tab-click="handleClick">
+        <el-tab-pane label="公开镜像" name="first" v-loading="loadingPublic">
+          <template v-if="tableDataPublic.length !== 0">
+            <el-row style="align-items: center; display: flex">
+              <el-col :span="12">
+                <div>
+                  <el-checkbox v-model="checked">仅显示平台推荐</el-checkbox>
+                </div>
+              </el-col>
+              <el-col :span="4"
+                ><div style="visibility: hidden">TODO</div></el-col
+              >
+              <el-col :span="8">
+                <div>
+                  <el-input
+                    placeholder="搜镜像Tag/描述/标签..."
+                    v-model="search"
+                    class="input-with-select"
+                    @keyup.enter.native="searchName()"
+                  >
+                    <el-button
+                      id="success"
+                      slot="append"
+                      icon="el-icon-search"
+                      @click="searchName()"
+                      >搜索</el-button
+                    >
+                  </el-input>
+                </div>
+              </el-col>
+            </el-row>
+            <el-row style="margin-top: 15px">
+              <el-table
+                :data="tableDataPublic"
+                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>
+                      <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>
+                  </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="creator"
+                  label="创建者"
+                  min-width="8%"
+                  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"
+                        title="Ghost"
+                        src="/user/avatar/ghost/-1"
+                    /></a>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  prop="createdUnix"
+                  label="创建时间"
+                  align="center"
+                  min-width="14%"
+                >
+                  <template slot-scope="scope">
+                    {{ 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;
+                        "
+                        @click="
+                          imageStar(
+                            scope.$index,
+                            scope.row.id,
+                            scope.row.isStar
+                          )
+                        "
+                      >
+                        <svg
+                          width="1.4em"
+                          height="1.4em"
+                          viewBox="0 0 32 32"
+                          class="heart-stroke"
+                          :class="{ stars_active: scope.row.isStar }"
                         >
-                        <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>
-                                    <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>
-                                
-                            </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="creator"
-                            label="创建者"
-                            min-width="8%"
-                            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" title="Ghost" src="/user/avatar/ghost/-1"></a>
-                            </template>
-                        </el-table-column>
-                        <el-table-column
-                            prop="createdUnix"
-                            label="创建时间"
-                            align="center"
-                            min-width="14%"
-                            >
-                            <template slot-scope="scope">
-                                {{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;" @click="imageStar(scope.$index,scope.row.id,scope.row.isStar)">
-                                            <svg width="1.4em" height="1.4em" viewBox="0 0 32 32" class="heart-stroke" :class='{stars_active:scope.row.isStar}'><path d="M4.4 6.54c-1.761 1.643-2.6 3.793-2.36 6.056.24 2.263 1.507 4.521 3.663 6.534a29110.9 29110.9 0 0010.296 9.633l10.297-9.633c2.157-2.013 3.424-4.273 3.664-6.536.24-2.264-.599-4.412-2.36-6.056-1.73-1.613-3.84-2.29-6.097-1.955-1.689.25-3.454 1.078-5.105 2.394l-.4.319-.398-.319c-1.649-1.316-3.414-2.143-5.105-2.394a7.612 7.612 0 00-1.113-.081c-1.838 0-3.541.694-4.983 2.038z"></path></svg>    
-                                            <span style="line-height: 2;margin-left:0.3rem;">{{scope.row.numStars}}</span>
-                                        </div>
-                                        <span style="padding: 0 1rem;color:#0366d6;cursor:pointer;" @click="copyUrl(scope.row.place)">复制地址</span>
-                                    </div>
-                            </template>
-                        </el-table-column>
-                    </el-table>
-                </el-row>
-                <div class="ui container" style="margin-top:50px;text-align:center">
-                        <el-pagination
-                            background
-                            @size-change="handleSizeChangePublic"
-                            @current-change="handleCurrentChangePublic"
-                            :current-page="currentPagePublic"
-                            :page-size="pageSizePublic"
-                            :page-sizes="[5,10,15]"
-                            layout="total, sizes, prev, pager, next, jumper"
-                            :total="totalNumPublic">
-                        </el-pagination>
+                          <path
+                            d="M4.4 6.54c-1.761 1.643-2.6 3.793-2.36 6.056.24 2.263 1.507 4.521 3.663 6.534a29110.9 29110.9 0 0010.296 9.633l10.297-9.633c2.157-2.013 3.424-4.273 3.664-6.536.24-2.264-.599-4.412-2.36-6.056-1.73-1.613-3.84-2.29-6.097-1.955-1.689.25-3.454 1.078-5.105 2.394l-.4.319-.398-.319c-1.649-1.316-3.414-2.143-5.105-2.394a7.612 7.612 0 00-1.113-.081c-1.838 0-3.541.694-4.983 2.038z"
+                          ></path>
+                        </svg>
+                        <span style="line-height: 2; margin-left: 0.3rem">{{
+                          scope.row.numStars
+                        }}</span>
+                      </div>
+                      <span
+                        style="padding: 0 1rem; color: #0366d6; cursor: pointer"
+                        @click="copyUrl(scope.row.place)"
+                        >复制地址</span
+                      >
+                    </div>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-row>
+            <div
+              class="ui container"
+              style="margin-top: 50px; text-align: center"
+            >
+              <el-pagination
+                background
+                @size-change="handleSizeChangePublic"
+                @current-change="handleCurrentChangePublic"
+                :current-page="currentPagePublic"
+                :page-size="pageSizePublic"
+                :page-sizes="[5, 10, 15]"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="totalNumPublic"
+              >
+              </el-pagination>
+            </div>
+          </template>
+          <template v-else>
+            <el-row style="align-items: center; display: flex">
+              <el-col :span="12">
+                <div>
+                  <el-checkbox v-model="checked">仅显示平台推荐</el-checkbox>
+                </div>
+              </el-col>
+              <el-col :span="4"
+                ><div style="visibility: hidden">TODO</div></el-col
+              >
+              <el-col :span="8">
+                <div>
+                  <el-input
+                    placeholder="搜镜像Tag/描述/标签..."
+                    v-model="search"
+                    class="input-with-select"
+                    @keyup.enter.native="searchName()"
+                  >
+                    <el-button
+                      id="success"
+                      slot="append"
+                      icon="el-icon-search"
+                      @click="searchName()"
+                      >搜索</el-button
+                    >
+                  </el-input>
+                </div>
+              </el-col>
+            </el-row>
+            <el-empty :image-size="200"></el-empty>
+          </template>
+        </el-tab-pane>
+        <el-tab-pane label="我的镜像" name="second" v-loading="loadingCustom">
+          <template v-if="tableDataCustom.length !== 0">
+            <el-row style="align-items: center; display: flex">
+              <el-col :span="12">
+                <div style="visibility: hidden">TODO</div>
+              </el-col>
+              <el-col :span="4"
+                ><div style="visibility: hidden">TODO</div></el-col
+              >
+              <el-col :span="8">
+                <div>
+                  <el-input
+                    placeholder="搜镜像Tag/描述/标签..."
+                    v-model="search"
+                    class="input-with-select"
+                    @keyup.enter.native="searchName()"
+                  >
+                    <el-button
+                      id="success"
+                      slot="append"
+                      icon="el-icon-search"
+                      @click="searchName()"
+                      >搜索</el-button
+                    >
+                  </el-input>
                 </div>
-            </template>
-            <template v-else>
-                    <el-row style="align-items: center;display: flex;">
-                            <el-col :span="12">
-                                <div>
-                                    <el-checkbox v-model="checked">仅显示平台推荐</el-checkbox>
-                                </div>
-                            </el-col>
-                            <el-col :span="4"><div style="visibility: hidden;">TODO</div></el-col>
-                            <el-col :span="8">
-                                <div>
-                                    <el-input placeholder="搜镜像Tag/描述/标签..." v-model="search" class="input-with-select" @keyup.enter.native="searchName()">
-                                        <el-button id="success" slot="append" icon="el-icon-search" @click="searchName()">搜索</el-button>
-                                    </el-input>
-                                </div>
-                            </el-col>
-                    </el-row>
-                    <el-empty  :image-size="200"></el-empty>
-            </template>
-            
-            </el-tab-pane>
-            <el-tab-pane label="我的镜像" name="second" v-loading="loadingCustom">
-            <template v-if="tableDataCustom.length!==0">
-                <el-row style="align-items: center;display: flex;">
-                    <el-col :span="12">
-                        <div style="visibility: hidden;">
-                            TODO
-                        </div>
-                    </el-col>
-                    <el-col :span="4"><div style="visibility: hidden;">TODO</div></el-col>
-                    <el-col :span="8">
-                        <div>
-                            <el-input placeholder="搜镜像Tag/描述/标签..." v-model="search" class="input-with-select" @keyup.enter.native="searchName()">
-                                <el-button id="success" slot="append" icon="el-icon-search" @click="searchName()">搜索</el-button>
-                            </el-input>
-                        </div>
-                    </el-col>
-                </el-row>
-                <el-row style="margin-top:15px;">
-                    <el-table
-                        :data="tableDataCustom"
-                        style="width: 100%"
-                        :header-cell-style="tableHeaderStyle"
+              </el-col>
+            </el-row>
+            <el-row style="margin-top: 15px">
+              <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
+                      >&nbsp;&nbsp;&nbsp;
+                      <i
+                        class="ri-lock-2-line"
+                        style="color: #fa8c16"
+                        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="27%"
+                  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>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  prop="cloudbrainType"
+                  label="可用集群"
+                  min-width="9%"
+                  align="center"
+                >
+                  <template slot-scope="scope">
+                    {{ scope.row.cloudbrainType | transformType }}
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  prop="isPrivate"
+                  label="状态"
+                  min-width="10%"
+                  align="center"
+                >
+                  <template slot-scope="scope">
+                    <div
+                      style="
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                      "
+                    >
+                      <span
+                        v-if="scope.row.isPrivate"
+                        style="color: rgb(250, 140, 22)"
+                        >私有</span
+                      >
+                      <span v-else style="color: rgb(19, 194, 141)">公开</span>
+                      <el-tooltip
+                        v-if="scope.row.status === 0"
+                        class="item"
+                        effect="dark"
+                        content="镜像提交中..."
+                        placement="top"
+                      >
+                        <i class="CREATING" style="margin-left: 0.3rem"></i>
+                      </el-tooltip>
+
+                      <el-tooltip
+                        v-if="scope.row.status === 2"
+                        class="item"
+                        effect="dark"
+                        content="检测提交镜像是否大小超过20G!"
+                        placement="top"
+                      >
+                        <i class="FAILED" style="margin-left: 0.3rem"></i>
+                      </el-tooltip>
+
+                      <el-tooltip
+                        v-if="scope.row.status === 1"
+                        class="item"
+                        effect="dark"
+                        content="镜像提交成功"
+                        placement="top"
+                      >
+                        <i class="SUCCEEDED" style="margin-left: 0.3rem"></i>
+                      </el-tooltip>
+                    </div>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  prop="createdUnix"
+                  label="创建时间"
+                  align="center"
+                  min-width="14%"
+                >
+                  <template slot-scope="scope">
+                    {{ 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: default;
+                          padding: 0 1rem;
+                        "
+                      >
+                        <svg
+                          width="1.4em"
+                          height="1.4em"
+                          viewBox="0 0 32 32"
+                          class="heart-stroke"
                         >
-                        <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>&nbsp;&nbsp;&nbsp;
-                                    <i class="ri-lock-2-line" style="color: #fa8c16;" 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="27%"
-                            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>
-                                
-                            </template>
-                        </el-table-column>
-                        <el-table-column
-                            prop="cloudbrainType"
-                            label="可用集群"
-                            min-width="9%"
-                            align="center"
+                          <path
+                            d="M4.4 6.54c-1.761 1.643-2.6 3.793-2.36 6.056.24 2.263 1.507 4.521 3.663 6.534a29110.9 29110.9 0 0010.296 9.633l10.297-9.633c2.157-2.013 3.424-4.273 3.664-6.536.24-2.264-.599-4.412-2.36-6.056-1.73-1.613-3.84-2.29-6.097-1.955-1.689.25-3.454 1.078-5.105 2.394l-.4.319-.398-.319c-1.649-1.316-3.414-2.143-5.105-2.394a7.612 7.612 0 00-1.113-.081c-1.838 0-3.541.694-4.983 2.038z"
+                          ></path>
+                        </svg>
+                        <span style="line-height: 2; margin-left: 0.3rem">{{
+                          scope.row.numStars
+                        }}</span>
+                      </div>
+                      <span
+                        style="padding: 0 1rem; color: #0366d6; cursor: pointer"
+                        @click="copyUrl(scope.row.place)"
+                        >复制地址</span
+                      >
+                      <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
                             >
-                            <template slot-scope="scope">
-                                {{scope.row.cloudbrainType | transformType}}
-                            </template>
-                        </el-table-column>
-                        <el-table-column
-                            prop="isPrivate"
-                            label="状态"
-                            min-width="10%"
-                            align="center"
+                            <el-dropdown-item
+                              style="color: red"
+                              @click.native="deleteImage(scope.row.id)"
+                              >删除</el-dropdown-item
                             >
-                            <template slot-scope="scope">
-                                <div style="display:flex;align-items: center;justify-content: center;">
-                                    <span v-if="scope.row.isPrivate" style="color: rgb(250, 140, 22);">私有</span>
-                                    <span v-else style="color: rgb(19, 194, 141);">公开</span>
-                                    <el-tooltip v-if="scope.row.status===0" class="item" effect="dark" content="镜像提交中..." placement="top">
-                                        <i class="CREATING" style="margin-left:0.3rem"></i>
-                                    </el-tooltip>
-                                    
-                                    <el-tooltip v-if="scope.row.status===2" class="item" effect="dark" content="检测提交镜像是否大小超过20G!" placement="top">
-                                        <i class="FAILED" style="margin-left:0.3rem"></i>
-                                    </el-tooltip>
-                                    
-                                    <el-tooltip v-if="scope.row.status===1" class="item" effect="dark" content="镜像提交成功" placement="top">
-                                        <i class="SUCCEEDED" style="margin-left:0.3rem"></i>
-                                    </el-tooltip>
-                                    
-                                </div>
-                                
-                            </template>
-                        </el-table-column>
-                        <el-table-column
-                            prop="createdUnix"
-                            label="创建时间"
-                            align="center"
-                            min-width="14%"
-                            >
-                            <template slot-scope="scope">
-                                {{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: 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:#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>
-                </el-row>
-                <div class="ui container" style="margin-top:50px;text-align:center">
-                        <el-pagination
-                            background
-                            @size-change="handleSizeChangeCustom"
-                            @current-change="handleCurrentChangeCustom"
-                            :current-page="currentPageCustom"
-                            :page-size="pageSizeCustom"
-                            :page-sizes="[5,10,15]"
-                            layout="total, sizes, prev, pager, next, jumper"
-                            :total="totalNumCustom">
-                        </el-pagination>
+                          </el-dropdown-menu>
+                        </el-dropdown>
+                      </div>
+                    </div>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-row>
+            <div
+              class="ui container"
+              style="margin-top: 50px; text-align: center"
+            >
+              <el-pagination
+                background
+                @size-change="handleSizeChangeCustom"
+                @current-change="handleCurrentChangeCustom"
+                :current-page="currentPageCustom"
+                :page-size="pageSizeCustom"
+                :page-sizes="[5, 10, 15]"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="totalNumCustom"
+              >
+              </el-pagination>
+            </div>
+          </template>
+          <template v-else>
+            <el-row style="align-items: center; display: flex">
+              <el-col :span="12">
+                <div style="visibility: hidden">TODO</div>
+              </el-col>
+              <el-col :span="4"
+                ><div style="visibility: hidden">TODO</div></el-col
+              >
+              <el-col :span="8">
+                <div>
+                  <el-input
+                    placeholder="搜镜像Tag/描述/标签..."
+                    v-model="search"
+                    class="input-with-select"
+                    @keyup.enter.native="searchName()"
+                  >
+                    <el-button
+                      id="success"
+                      slot="append"
+                      icon="el-icon-search"
+                      @click="searchName()"
+                      >搜索</el-button
+                    >
+                  </el-input>
                 </div>
-            </template>
-            <template v-else>
-                <el-row style="align-items: center;display: flex;">
-                    <el-col :span="12">
-                        <div style="visibility: hidden;">
-                            TODO
-                        </div>
-                    </el-col>
-                    <el-col :span="4"><div style="visibility: hidden;">TODO</div></el-col>
-                    <el-col :span="8">
-                        <div>
-                            <el-input placeholder="搜镜像Tag/描述/标签..." v-model="search" class="input-with-select" @keyup.enter.native="searchName()">
-                                <el-button id="success" slot="append" icon="el-icon-search" @click="searchName()">搜索</el-button>
-                            </el-input>
-                        </div>
-                    </el-col>
-                </el-row>
-                <el-empty  :image-size="200"></el-empty>
-            </template>
-            
-            </el-tab-pane>
-            <el-tab-pane label="我收藏的镜像" name="third">
-                <template v-if="tableDataStar.length!==0">
-                    <el-row style="align-items: center;display: flex;">
-                        <el-col :span="12">
-                            <div style="visibility: hidden;">
-                                TODO
-                            </div>
-                        </el-col>
-                        <el-col :span="4"><div style="visibility: hidden;">TODO</div></el-col>
-                        <el-col :span="8">
-                            <div>
-                                <el-input placeholder="搜镜像Tag/描述/标签..." v-model="search" class="input-with-select" @keyup.enter.native="searchName()">
-                                    <el-button id="success" slot="append" icon="el-icon-search" @click="searchName()">搜索</el-button>
-                                </el-input>
-                            </div>
-                        </el-col>
-                    </el-row>
-                    <el-row style="margin-top:15px;">
-
-                            <el-table
-                            :data="tableDataStar"
-                            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>
-                                        <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>
-                                    
-                                </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="creator"
-                                label="创建者"
-                                min-width="8%"
-                                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" title="Ghost" src="/user/avatar/ghost/-1"></a>
-                                </template>
-                            </el-table-column>
-                            <el-table-column
-                                prop="createdUnix"
-                                label="创建时间"
-                                align="center"
-                                min-width="14%"
-                                >
-                                <template slot-scope="scope">
-                                    {{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;" @click="imageUnstar(scope.row.id)">
-                                                <svg width="1.4em" height="1.4em" viewBox="0 0 32 32" class="heart-stroke stars_active"><path d="M4.4 6.54c-1.761 1.643-2.6 3.793-2.36 6.056.24 2.263 1.507 4.521 3.663 6.534a29110.9 29110.9 0 0010.296 9.633l10.297-9.633c2.157-2.013 3.424-4.273 3.664-6.536.24-2.264-.599-4.412-2.36-6.056-1.73-1.613-3.84-2.29-6.097-1.955-1.689.25-3.454 1.078-5.105 2.394l-.4.319-.398-.319c-1.649-1.316-3.414-2.143-5.105-2.394a7.612 7.612 0 00-1.113-.081c-1.838 0-3.541.694-4.983 2.038z"></path></svg>    
-                                                <span style="line-height: 2;margin-left:0.3rem;">{{scope.row.numStars}}</span>
-                                            </div>
-                                            <span style="padding: 0 1rem;color:#0366d6;cursor:pointer;" @click="copyUrl(scope.row.place)">复制地址</span>
-                                        </div>
-                                </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,10,15]"
-                                layout="total, sizes, prev, pager, next, jumper"
-                                :total="totalNumStar">
-                            </el-pagination>
+              </el-col>
+            </el-row>
+            <el-empty :image-size="200"></el-empty>
+          </template>
+        </el-tab-pane>
+        <el-tab-pane label="我收藏的镜像" name="third">
+          <template v-if="tableDataStar.length !== 0">
+            <el-row style="align-items: center; display: flex">
+              <el-col :span="12">
+                <div style="visibility: hidden">TODO</div>
+              </el-col>
+              <el-col :span="4"
+                ><div style="visibility: hidden">TODO</div></el-col
+              >
+              <el-col :span="8">
+                <div>
+                  <el-input
+                    placeholder="搜镜像Tag/描述/标签..."
+                    v-model="search"
+                    class="input-with-select"
+                    @keyup.enter.native="searchName()"
+                  >
+                    <el-button
+                      id="success"
+                      slot="append"
+                      icon="el-icon-search"
+                      @click="searchName()"
+                      >搜索</el-button
+                    >
+                  </el-input>
+                </div>
+              </el-col>
+            </el-row>
+            <el-row style="margin-top: 15px">
+              <el-table
+                :data="tableDataStar"
+                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>
+                      <img
+                        v-if="scope.row.type == 5"
+                        src="/img/jian.svg"
+                        style="margin-left: 0.5rem"
+                      />
                     </div>
-                </template>
-                
-                <template v-else>
-                    <el-row style="align-items: center;display: flex;">
-                        <el-col :span="12">
-                            <div style="visibility: hidden;">
-                                TODO
-                            </div>
-                        </el-col>
-                        <el-col :span="4"><div style="visibility: hidden;">TODO</div></el-col>
-                        <el-col :span="8">
-                            <div>
-                                <el-input placeholder="搜镜像Tag/描述/标签..." v-model="search" class="input-with-select" @keyup.enter.native="searchName()">
-                                    <el-button id="success" slot="append" icon="el-icon-search" @click="searchName()">搜索</el-button>
-                                </el-input>
-                            </div>
-                        </el-col>
-                    </el-row>
-                    <el-empty  :image-size="200"></el-empty>
-                </template>
-            </el-tab-pane>
-        </el-tabs>
-  </div>
-</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>
+                  </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="creator"
+                  label="创建者"
+                  min-width="8%"
+                  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"
+                        title="Ghost"
+                        src="/user/avatar/ghost/-1"
+                    /></a>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  prop="createdUnix"
+                  label="创建时间"
+                  align="center"
+                  min-width="14%"
+                >
+                  <template slot-scope="scope">
+                    {{ 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;
+                        "
+                        @click="imageUnstar(scope.row.id)"
+                      >
+                        <svg
+                          width="1.4em"
+                          height="1.4em"
+                          viewBox="0 0 32 32"
+                          class="heart-stroke stars_active"
+                        >
+                          <path
+                            d="M4.4 6.54c-1.761 1.643-2.6 3.793-2.36 6.056.24 2.263 1.507 4.521 3.663 6.534a29110.9 29110.9 0 0010.296 9.633l10.297-9.633c2.157-2.013 3.424-4.273 3.664-6.536.24-2.264-.599-4.412-2.36-6.056-1.73-1.613-3.84-2.29-6.097-1.955-1.689.25-3.454 1.078-5.105 2.394l-.4.319-.398-.319c-1.649-1.316-3.414-2.143-5.105-2.394a7.612 7.612 0 00-1.113-.081c-1.838 0-3.541.694-4.983 2.038z"
+                          ></path>
+                        </svg>
+                        <span style="line-height: 2; margin-left: 0.3rem">{{
+                          scope.row.numStars
+                        }}</span>
+                      </div>
+                      <span
+                        style="padding: 0 1rem; color: #0366d6; cursor: pointer"
+                        @click="copyUrl(scope.row.place)"
+                        >复制地址</span
+                      >
+                    </div>
+                  </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, 10, 15]"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="totalNumStar"
+              >
+              </el-pagination>
+            </div>
+          </template>
 
-  
+          <template v-else>
+            <el-row style="align-items: center; display: flex">
+              <el-col :span="12">
+                <div style="visibility: hidden">TODO</div>
+              </el-col>
+              <el-col :span="4"
+                ><div style="visibility: hidden">TODO</div></el-col
+              >
+              <el-col :span="8">
+                <div>
+                  <el-input
+                    placeholder="搜镜像Tag/描述/标签..."
+                    v-model="search"
+                    class="input-with-select"
+                    @keyup.enter.native="searchName()"
+                  >
+                    <el-button
+                      id="success"
+                      slot="append"
+                      icon="el-icon-search"
+                      @click="searchName()"
+                      >搜索</el-button
+                    >
+                  </el-input>
+                </div>
+              </el-col>
+            </el-row>
+            <el-empty :image-size="200"></el-empty>
+          </template>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
 </template>
 
 <script>
-
-const {_AppSubUrl, _StaticUrlPrefix, csrf} = window.config;
-
-
-
+const { _AppSubUrl, _StaticUrlPrefix, csrf } = window.config;
 
 export default {
-  components: {
-    
-  },
+  components: {},
   data() {
     return {
-      activeName: 'first',
-      search:'',
-      checked:false,
-      currentPagePublic:1,
-      pageSizePublic:10,
-      totalNumPublic:0,
-      paramsPublic:{page:1,pageSize:10,q:'',recommend:false},
+      activeName: "first",
+      search: "",
+      checked: false,
+      currentPagePublic: 1,
+      pageSizePublic: 10,
+      totalNumPublic: 0,
+      paramsPublic: { page: 1, pageSize: 10, q: "", recommend: false },
       tableDataPublic: [],
-      loadingPublic:false,
+      loadingPublic: false,
 
-      currentPageCustom:1,
-      pageSizeCustom:10,
-      totalNumCustom:0,
-      paramsCustom:{page:1,pageSize:10,q:''},
+      currentPageCustom: 1,
+      pageSizeCustom: 10,
+      totalNumCustom: 0,
+      paramsCustom: { page: 1, pageSize: 10, q: "" },
       tableDataCustom: [],
-      starCustom:[],
-      loadingCustom:false,
+      starCustom: [],
+      loadingCustom: false,
       refreshCustomTimer: null,
 
-      currentPageStar:1,
-      pageSizeStar:10,
-      totalNumStar:0,
-      paramsStar:{page:1,pageSize:10,q:''},
+      currentPageStar: 1,
+      pageSizeStar: 10,
+      totalNumStar: 0,
+      paramsStar: { page: 1, pageSize: 10, q: "" },
       tableDataStar: [],
-      loadingStar:false
+      loadingStar: false,
     };
   },
   methods: {
     handleClick(tab, event) {
-        this.search = ''
-        this.stopImageListCustomRefresh();
-        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'
-        }
-        
+      this.search = "";
+      this.stopImageListCustomRefresh();
+      if (tab.name == "first") {
+        this.paramsPublic.q = "";
+        this.getImageListPublic();
+      }
+      if (tab.name == "second") {
+        this.getImageListCustom();
+      }
+      if (tab.name == "third") {
+        this.getImageListStar();
+      }
     },
-    handleSizeChangePublic(val){
-        this.paramsPublic.pageSize = val
-        this.getImageListPublic()
-
-
+    tableHeaderStyle({ row, column, rowIndex, columnIndex }) {
+      if (rowIndex === 0) {
+        return "background:#f5f5f6;color:#606266";
+      }
     },
-    handleCurrentChangePublic(val){
-        this.paramsPublic.page = val
-        this.getImageListPublic()
-
+    handleSizeChangePublic(val) {
+      this.paramsPublic.pageSize = val;
+      this.getImageListPublic();
     },
-    handleSizeChangeCustom(val){
-        this.paramsCustom.pageSize = val
-        this.getImageListCustom()
-
-
+    handleCurrentChangePublic(val) {
+      this.currentPagePublic = val;
+      this.paramsPublic.page = val;
+      this.getImageListPublic();
     },
-    handleCurrentChangeCustom(val){
-        this.paramsCustom.page = val
-        this.getImageListCustom()
-
+    handleSizeChangeCustom(val) {
+      this.paramsCustom.pageSize = val;
+      this.getImageListCustom();
     },
-    handleSizeChangeStar(val){
-        this.paramsStar.pageSize = val
-        this.getImageListStar()
-
-
+    handleCurrentChangeCustom(val) {
+      this.paramsCustom.page = val;
+      this.getImageListCustom();
     },
-    handleCurrentChangeStar(val){
-        this.paramsStar.page = val
-        this.getImageListStar()
-
+    handleSizeChangeStar(val) {
+      this.paramsStar.pageSize = val;
+      this.getImageListStar();
+    },
+    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 
+    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
-            this.getImageListCustomRefresh()
+    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;
+          this.getImageListCustomRefresh();
+        });
     },
 
     getImageListCustomRefresh() {
-        this.stopImageListCustomRefresh();
-        this.refreshCustomTimer = setInterval(() => {
-            this.tableDataCustom.forEach(item => {
-                if (item.status === 0) {
-                    this.$axios.get(`/image/${item.id}`, {}).then((res) => {
-                        const newData = res.data;
-                        this.tableDataCustom.forEach(it => {                    
-                            if (it.id === newData.id) {
-                                it.status = newData.status;                                
-                            }                            
-                        });
-                    })
+      this.stopImageListCustomRefresh();
+      this.refreshCustomTimer = setInterval(() => {
+        this.tableDataCustom.forEach((item) => {
+          if (item.status === 0) {
+            this.$axios.get(`/image/${item.id}`, {}).then((res) => {
+              const newData = res.data;
+              this.tableDataCustom.forEach((it) => {
+                if (it.id === newData.id) {
+                  it.status = newData.status;
                 }
-            });            
-        }, 5000);
+              });
+            });
+          }
+        });
+      }, 5000);
     },
 
     stopImageListCustomRefresh() {
-        this.refreshCustomTimer && clearInterval(this.refreshCustomTimer);
+      this.refreshCustomTimer && clearInterval(this.refreshCustomTimer);
     },
-    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
+    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;
+        });
     },
 
-    deleteImage(id){
-        let flag=1
-        let _this = this
-        $('.ui.basic.modal.images')
+    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();
-                }
+          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')
+        .modal("show");
     },
-    eidtImage(id){
-        location.href = `/image/${id}/imageSquare`
+    eidtImage(id) {
+      location.href = `/image/${id}/imageSquare`;
     },
-    imageStar(index,id,isStar){
-        if(isStar){
-            this.$axios.put(`/image/${id}/action/unstar`).then((res)=>{
-                if(res.data.Code==0){
-                    this.tableDataPublic[index].numStars = this.tableDataPublic[index].numStars - 1
-                    this.tableDataPublic[index].isStar = false
-                }else{
-                    console.log(res.data.Message)
-                }
-                
-            })
-        }else{
-            this.$axios.put(`/image/${id}/action/star`).then((res)=>{
-                if(res.data.Code==0){
-                    this.tableDataPublic[index].numStars = this.tableDataPublic[index].numStars + 1
-                    this.tableDataPublic[index].isStar = true
-                }else{
-                    console.log(res.data.Message)
-                }
-                
-            })
+    imageStar(index, id, isStar) {
+      if (isStar) {
+        this.$axios.put(`/image/${id}/action/unstar`).then((res) => {
+          if (res.data.Code == 0) {
+            this.tableDataPublic[index].numStars =
+              this.tableDataPublic[index].numStars - 1;
+            this.tableDataPublic[index].isStar = false;
+          } else {
+            console.log(res.data.Message);
+          }
+        });
+      } else {
+        this.$axios.put(`/image/${id}/action/star`).then((res) => {
+          if (res.data.Code == 0) {
+            this.tableDataPublic[index].numStars =
+              this.tableDataPublic[index].numStars + 1;
+            this.tableDataPublic[index].isStar = true;
+          } else {
+            console.log(res.data.Message);
+          }
+        });
+      }
+    },
+    imageUnstar(id) {
+      this.$axios.put(`/image/${id}/action/unstar`).then((res) => {
+        if (res.data.Code == 0) {
+          this.getImageListStar();
+        } else {
+          console.log(res.data.Message);
         }
-        
+      });
     },
-    imageUnstar(id){
-        this.$axios.put(`/image/${id}/action/unstar`).then((res)=>{
-                if(res.data.Code==0){
-                    this.getImageListStar()
-                }else{
-                    console.log(res.data.Message)
-                }
-            })
+    copyUrl(url) {
+      const cInput = document.createElement("input");
+      cInput.value = url;
+      document.body.appendChild(cInput);
+      cInput.select();
+      document.execCommand("Copy");
+      cInput.remove();
+      $("body").toast({
+        message: "复制成功!",
+        showProgress: "bottom",
+        showIcon: "check circle",
+        class: "info",
+        position: "top right",
+      });
     },
-    copyUrl(url){
-        const cInput = document.createElement('input')
-        cInput.value = url
-        document.body.appendChild(cInput)
-        cInput.select()
-        document.execCommand('Copy')
-        cInput.remove()
-        $('body')
-        .toast({
-            message: '复制成功!',
-            showProgress: 'bottom',
-            showIcon:'check circle',
-            class: 'info',
-            position: 'top right',
-        })
-        ;
+    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();
+      }
     },
-    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()
-        }
-        
+  },
+  filters: {
+    transformType(val) {
+      if (val == 0 || val == 2) {
+        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 dateString = Y + M + D + h + m + s;
+      return dateString;
     },
   },
-  filters:{
-      transformType(val){
-        if(val==0 || val==2){
-            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 dateString = Y + M + D + h + m + s;
-                return dateString;
-            },
+  watch: {
+    checked(val) {
+      this.paramsPublic.page = 1;
+      this.paramsPublic.recommend = val;
+      this.currentPagePublic = 1;
+      this.getImageListPublic();
+    },
   },
-  watch:{
-    checked(val){
-        this.paramsPublic.page = 1
-        this.paramsPublic.recommend = val
-        this.getImageListPublic()
+  mounted() {},
+  created() {
+    const params = new URLSearchParams(location.search);
+    if (params.has("type") && params.get("type") == "myimage") {
+      this.activeName = "second";
+      this.getImageListCustom();
+    } else {
+      this.getImageListPublic();
     }
   },
-  mounted() {
-      
-      
-  },
-  created() {
-    const params = new URLSearchParams(location.search)
-      if(params.has('type')&&params.get('type')=='myimage'){
-          this.activeName = 'second'
-          this.getImageListCustom()
-      }
-      else{
-        this.getImageListPublic()
-      }
-  },  
   beforeDestroy() {
     this.stopImageListCustomRefresh();
-  }
+  },
 };
 </script>
 
 <style scoped>
 .header-wrapper {
-    background-color: #f5f5f6;
-    padding-top: 15px;
+  background-color: #f5f5f6;
+  padding-top: 15px;
 }
-.image_text{
-    padding:25px 0 55px 0 ;
+.image_text {
+  padding: 25px 0 55px 0;
 }
-#header{
-    position: relative;
-    top:-40px;
+#header {
+  position: relative;
+  top: -40px;
 }
-.el-dropdown-menu__item--divided{
-    border-top: 1px solid blue;
+.el-dropdown-menu__item--divided {
+  border-top: 1px solid blue;
 }
-.el-table thead{
-    background-color: #f5f5f6;
+.el-table thead {
+  background-color: #f5f5f6;
 }
-/deep/ .el-tabs__item:hover{
-    color: #000;
-    font-weight: 500;
-    
+/deep/ .el-tabs__item:hover {
+  color: #000;
+  font-weight: 500;
 }
 /deep/ .el-tabs__item.is-active {
-    color: #000;
-    font-weight: 500;
+  color: #000;
+  font-weight: 500;
 }
-/deep/ .el-tabs__active-bar{
-    background-color:#000
+/deep/ .el-tabs__active-bar {
+  background-color: #000;
 }
 
-#success{
-    background-color: #5bb973;
-    color: white;
+#success {
+  background-color: #5bb973;
+  color: white;
 }
-.text-over{
-    overflow: hidden;
-    text-overflow: ellipsis;
-    vertical-align: middle;
-    white-space: nowrap;
+.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_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;
+.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
+.heart-stroke {
+  stroke: #fa8c16;
+  stroke-width: 2;
+  fill: #fff;
 }
-.stars_active{
-    fill: #FA8C16 !important;
-    stroke:#FA8C16 !important
+.stars_active {
+  fill: #fa8c16 !important;
+  stroke: #fa8c16 !important;
 }
 </style>