|
|
|
@@ -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 |
|
|
|
> |
|
|
|
<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> |
|
|
|
<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')&¶ms.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> |
