wangwei
/
aiforge
Not watched
1
0
Fork 0
Code
Releases 128 Wiki Activity
Issues 0 Pull Requests 0 Datasets Model Cloudbrain
Browse Source

fix issue

tags/v1.22.4.1^2
zhoupzh 3 years ago
parent
0a7dc29e51
commit
11d671669c
12 changed files with 525 additions and 170 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2
    -0
      options/locale/locale_en-US.ini
  2. +2
    -0
      options/locale/locale_zh-CN.ini
  3. +1
    -0
      public/img/jian.svg
  4. +1
    -1
      templates/admin/navbar.tmpl
  5. +3
    -3
      templates/repo/cloudbrain/image/edit.tmpl
  6. +1
    -1
      templates/repo/cloudbrain/image/submit.tmpl
  7. +8
    -5
      templates/repo/cloudbrain/new.tmpl
  8. +1
    -85
      templates/repo/debugjob/index.tmpl
  9. +48
    -45
      web_src/js/components/images/Images.vue
  10. +47
    -25
      web_src/js/components/images/adminImages.vue
  11. +382
    -0
      web_src/js/components/images/selectImages.vue
  12. +29
    -5
      web_src/js/features/images.js

+ 2
- 0
options/locale/locale_en-US.ini View File

@@ -912,6 +912,7 @@ more=More
gpu_type_all=All
model_download=Model Download
submit_image=Submit Image
modify_image=Modify Image
image_exist=Image name has been used, please use a new one.
image_commit_fail=Failed to submit image, please try again later.
image_not_exist=Image does not exits.
@@ -924,6 +925,7 @@ images.name = Image Name
images.name_placerholder = Please enter the image name
image.label_tooltips = Example Python 3.7, Tensorflow 2.0, cuda 10, pytorch 1.6
images.public_tooltips = After the image is set to public, it can be seen by other users.
images.name_rule = Please enter letters, numbers, _ and - up to 64 characters and cannot end with a dash (-).

cloudbrain=Cloudbrain
cloudbrain.new=New cloudbrain


+ 2
- 0
options/locale/locale_zh-CN.ini View File

@@ -917,6 +917,7 @@ more=更多
gpu_type_all=全部
model_download=结果下载
submit_image=提交镜像
modify_image=修改镜像
image_exist=镜像名称已被使用，请修改镜像名称。
image_commit_fail=提交镜像失败，请稍后再试。
image_not_exist=镜像不存在。
@@ -930,6 +931,7 @@ images.name = 镜像名称
images.name_placerholder = 请输入镜像名称
image.label_tooltips = 如Python 3.7, Tensorflow 2.0, cuda 10, pytorch 1.6
images.public_tooltips = 镜像设置为公开后，可被其他用户看到。
images.name_rule = 请输入字母、数字、_和-，最长100个字符，且不能以中划线（-）结尾。

cloudbrain=云脑
cloudbrain.new=新建任务


+ 1
- 0
public/img/jian.svg View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15.999999999999432" height="16.000000000000455"><path d="M0 14L0 2Q0 1.90175 0.00963055 1.80397Q0.0192611 1.70619 0.0384294 1.60982Q0.0575978 1.51345 0.0861193 1.41943Q0.114641 1.32541 0.152241 1.23463Q0.189841 1.14386 0.236157 1.05721Q0.282474 0.970554 0.337061 0.888859Q0.391648 0.807164 0.453979 0.731213Q0.516311 0.655262 0.585786 0.585786Q0.655262 0.516311 0.731213 0.453979Q0.807164 0.391648 0.888859 0.337061Q0.970554 0.282474 1.05721 0.236157Q1.14386 0.189841 1.23463 0.152241Q1.32541 0.114641 1.41943 0.0861193Q1.51345 0.0575978 1.60982 0.0384294Q1.70619 0.0192611 1.80397 0.00963055Q1.90175 0 2 0L14 0Q14.0983 0 14.196 0.00963055Q14.2938 0.0192611 14.3902 0.0384294Q14.4865 0.0575978 14.5806 0.0861193Q14.6746 0.114641 14.7654 0.152241Q14.8561 0.189841 14.9428 0.236157Q15.0294 0.282474 15.1111 0.337061Q15.1928 0.391648 15.2688 0.453979Q15.3447 0.516311 15.4142 0.585786Q15.4837 0.655262 15.546 0.731213Q15.6084 0.807164 15.6629 0.888859Q15.7175 0.970554 15.7638 1.05721Q15.8102 1.14386 15.8478 1.23463Q15.8854 1.32541 15.9139 1.41943Q15.9424 1.51345 15.9616 1.60982Q15.9807 1.70619 15.9904 1.80397Q16 1.90175 16 2L16 14Q16 14.0983 15.9904 14.196Q15.9807 14.2938 15.9616 14.3902Q15.9424 14.4865 15.9139 14.5806Q15.8854 14.6746 15.8478 14.7654Q15.8102 14.8561 15.7638 14.9428Q15.7175 15.0294 15.6629 15.1111Q15.6084 15.1928 15.546 15.2688Q15.4837 15.3447 15.4142 15.4142Q15.3447 15.4837 15.2688 15.546Q15.1928 15.6084 15.1111 15.6629Q15.0294 15.7175 14.9428 15.7638Q14.8561 15.8102 14.7654 15.8478Q14.6746 15.8854 14.5806 15.9139Q14.4865 15.9424 14.3902 15.9616Q14.2938 15.9807 14.196 15.9904Q14.0983 16 14 16L2 16Q1.90175 16 1.80397 15.9904Q1.70619 15.9807 1.60982 15.9616Q1.51345 15.9424 1.41943 15.9139Q1.32541 15.8854 1.23463 15.8478Q1.14386 15.8102 1.05721 15.7638Q0.970554 15.7175 0.888859 15.6629Q0.807164 15.6084 0.731213 15.546Q0.655262 15.4837 0.585786 15.4142Q0.516311 15.3447 0.453979 15.2688Q0.391648 15.1928 0.337061 15.1111Q0.282474 15.0294 0.236157 14.9428Q0.189841 14.8561 0.152241 14.7654Q0.114641 14.6746 0.0861193 14.5806Q0.0575978 14.4865 0.0384294 14.3902Q0.0192611 14.2938 0.00963055 14.196Q0 14.0983 0 14Z" style="mix-blend-mode:normal" fill="#5ab06f"></path><path d="M354.396 154.975L354.796 154.975L355.196 154.975L355.196 154.067L358.383 154.067L358.383 154.975L358.783 154.975L359.182 154.975L359.182 154.067L361.714 154.067L361.714 153.322L359.182 153.322L359.182 152.479L358.383 152.479L358.383 153.322L355.196 153.322L355.196 152.479L354.396 152.479L354.396 153.322L351.865 153.322L351.865 154.067L354.396 154.067L354.396 154.975ZM361.613 155.88L361.613 156.251L358.544 156.251L355.475 156.251C355.12 156.874 354.708 157.452 354.264 157.983L354.264 162.601L353.486 162.601L353.486 160.704L353.486 158.807C353.066 159.216 352.632 159.593 352.155 159.904C352.055 159.75 351.768 159.406 351.589 159.248C352.765 158.527 353.787 157.495 354.564 156.251L353.26 156.251L351.955 156.251L351.955 155.508L354.995 155.508C355.174 155.175 355.34 154.831 355.475 154.476L356.261 154.687C356.139 154.964 356.017 155.243 355.884 155.508L361.613 155.508L361.613 155.88ZM361.757 159.384L360.303 159.384L358.849 159.384L358.849 158.929C359.592 158.56 360.391 158.04 360.947 157.517L360.448 157.129L360.291 157.172L355.863 157.172L355.863 157.839L357.672 157.839L359.48 157.839C359.047 158.14 358.527 158.438 358.06 158.649L358.06 159.384L356.54 159.384L355.02 159.384L355.02 160.105L358.06 160.105L358.06 161.704C358.06 161.836 358.003 161.869 357.838 161.88C357.695 161.891 357.128 161.901 356.508 161.88C356.616 162.08 356.741 162.357 356.784 162.579C357.594 162.579 358.104 162.579 358.437 162.457C358.76 162.335 358.849 162.145 358.849 161.714L358.849 160.105L361.757 160.105L361.757 159.384Z" style="mix-blend-mode:normal" fill-rule="evenodd" fill="#ffffff" transform="translate(-348.8095656435228, -149.81200615956308)"></path></svg>

+ 1
- 1
templates/admin/navbar.tmpl View File

@@ -17,7 +17,7 @@
<a class="{{if .PageIsAdminCloudBrains}}active{{end}} item" href="{{AppSubUrl}}/admin/cloudbrains">
云脑任务
</a>
<a class="{{if .PageIsAdminCloudBrains}}active{{end}} item" href="{{AppSubUrl}}/admin/images">
<a class="{{if .PageIsAdminImages}}active{{end}} item" href="{{AppSubUrl}}/admin/images">
云脑镜像
</a>
<a class="{{if .PageIsAdminHooks}}active{{end}} item" href="{{AppSubUrl}}/admin/hooks">


+ 3
- 3
templates/repo/cloudbrain/image/edit.tmpl View File

@@ -21,7 +21,7 @@
<div class="ui container">
<div>
<h4 class="ui top attached header">
{{.i18n.Tr "repo.submit_image"}}
{{.i18n.Tr "repo.modify_image"}}
</h4>
<div class="submit-image-tmplvalue" style="display: none;" data-link="/image/{{$.Image.ID}}"></div>
<div class="ui attached segment" style="padding: 2em 3em;padding-bottom: 7rem;">
@@ -40,7 +40,7 @@
<label class="label_color" for="">{{$.i18n.Tr "repo.images.name"}}</label>
<input type="hidden" name="tag" value="{{.Image.Tag}}" >
<input disabled value="{{.Image.Tag}}" style="width: 80%;">
<span class="tooltips" style="display: block;padding-left: 0.5rem;">{{.i18n.Tr "cloudbrain.job_name_rule"}}</span>
<span class="tooltips" style="display: block;padding-left: 0.5rem;">{{.i18n.Tr "repo.images.name_rule"}}</span>
</div>
<div class="inline required field">
<label class="label_color" for="">{{$.i18n.Tr "dataset.description"}}</label>
@@ -81,7 +81,7 @@
<div class="inline required field" style="padding-top: 2rem;">
<label class="label_color" for="" style="visibility: hidden;"></label>
<button class="ui create_image green button" type="button">
{{.i18n.Tr "repo.cloudbrain.commit_image"}}
{{.i18n.Tr "explore.save"}}
</button>
<a class="ui button" id="cancel_submit_image">{{.i18n.Tr "repo.cloudbrain.cancel"}}</a>
</div>


+ 1
- 1
templates/repo/cloudbrain/image/submit.tmpl View File

@@ -38,7 +38,7 @@
<div class="inline required field">
<label class="label_color" for="">{{$.i18n.Tr "repo.images.name"}}</label>
<input type="text" name="tag" required placeholder="{{$.i18n.Tr "repo.images.name_placerholder"}}" style="width: 80%;">
<span class="tooltips" style="display: block;padding-left: 0.5rem;">{{.i18n.Tr "cloudbrain.job_name_rule"}}</span>
<span class="tooltips" style="display: block;padding-left: 0.5rem;">{{.i18n.Tr "repo.images.name_rule"}}</span>
</div>
<div class="inline required field">
<label class="label_color" for="">{{$.i18n.Tr "dataset.description"}}</label>


+ 8
- 5
templates/repo/cloudbrain/new.tmpl View File

@@ -189,7 +189,7 @@
</select>
</div>

<div class="inline required field" style="position: relative;">
<!-- <div class="inline required field" style="position: relative;">
<label>{{.i18n.Tr "cloudbrain.mirror"}}</label>
<input type="text" list="cloudbrain_image" placeholder="{{.i18n.Tr "cloudbrain.choose_mirror"}}" name="image" required autofocus maxlength="255">
<i class="times circle outline icon icons" style="visibility: hidden;" onclick="clearValue()"></i>
@@ -201,6 +201,9 @@
<option name="image" value="{{.Place}}">{{.PlaceView}}</option>
{{end}}
</datalist>
</div> -->
<div id="images-new-cb">

</div>
{{template "custom/select_dataset" .}}
@@ -260,10 +263,10 @@
<script>
let form = document.getElementById('form_id');

let inputs = document.querySelectorAll('input[list]');
inputs[0].addEventListener('change', function() {
$(".icon.icons").css("visibility","visible")
});
// let inputs = document.querySelectorAll('input[list]');
// inputs[0].addEventListener('change', function() {
// $(".icon.icons").css("visibility","visible")
// });

$('#messageInfo').css('display','none')
function clearValue(){


+ 1
- 85
templates/repo/debugjob/index.tmpl View File

@@ -379,8 +379,6 @@
<i class="dropdown icon"></i>
<div class="menu" style="right: auto;">
<div class="item" style="padding: 0 !important;">
<!-- 接收结果 -->
<iframe src="" frameborder="0" name="iframeContent" style="display: none;"></iframe>
{{if .CanDebug}}
<a id="model-image-{{.Cloudbrain.ID}}" class='imageBtn ui basic {{if ne .Status "RUNNING"}} {{else}}blue {{end}}button' href="{{$.RepoLink}}/cloudbrain/{{.Cloudbrain.ID}}/commit_image">{{$.i18n.Tr "repo.submit_image"}}</a>
{{else}}
@@ -407,40 +405,7 @@
</div>
</div>
<!-- 镜像列表弹窗 -->
<div id="imageModal" class="modal" style="display: none;">
<div class="modal-content">
<!-- 表格 -->
<div class="ui form">
<form id="commitImageForm" action="{{$.RepoLink}}/cloudbrain/{{.Cloudbrain.ID}}/commit_image" method="post" target="iframeContent">
{{$.CsrfTokenHtml}}
<div class="row">
<p style="display: inline;">提交任务镜像</p>
<span class="close">&times;</span>
</div>

<div class="ui divider"></div>

<div class="inline required field dis">
<label> {{$.i18n.Tr "repo.cloudbrain.mirror_tag"}}:</label>
<input name="tag" id="image_tag" tabindex="3" autofocus required maxlength="255" style="width:75%">
</div>

<div class="inline field">
<label class="label_after">{{$.i18n.Tr "repo.cloudbrain.mirror_description"}}:</label>
<textarea name="description" maxlength="255" rows="8" style="width:75%;margin-left: 0.2em;"></textarea>
</div>
<div class="ui divider"></div>
<div class="inline field">
<label></label>
<button class="ui green button" onclick="showmask()">
{{$.i18n.Tr "repo.cloudbrain.commit_image"}}
</button>
</div>
</form>
</div>

</div>
</div>
</div>
</div>
{{end}} {{template "base/paginate" .}}
@@ -516,54 +481,5 @@
.transition('fade')
})
})
// 获取弹窗
var modal = document.getElementById('imageModal');

// 打开弹窗的按钮对象
var btns = document.getElementsByClassName("imageBtn");

// 获取 <span> 元素，用于关闭弹窗
var spans = document.getElementsByClassName('close');

// 点击按钮打开弹窗
for (i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
modal.style.display = "block";
}
}

// 点击 <span> (x), 关闭弹窗
for (i = 0; i < spans.length; i++) {
spans[i].onclick = function() {
modal.style.display = "none";
}
}

// 在用户点击其他地方时，关闭弹窗
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
// 显示弹窗，弹出相应的信息
function showmask() {
var image_tag = !$('#image_tag').val()
if(image_tag){
return
}
$('#imageModal').css('display', 'none')
$('#mask').css('display', 'block')

$("iframe[name=iframeContent]").on("load", function() {　　
var responseText = $("iframe")[0].contentDocument.body.getElementsByTagName("pre")[0].innerHTML;　
var json1 = JSON.parse(responseText)
$('#mask').css('display', 'none')
if (json1.result_code === "0") {
$('.alert').html('操作成功!').removeClass('alert-danger').addClass('alert-success').show().delay(1500).fadeOut();
} else {
$('.alert').html(json1.error_msg).removeClass('alert-success').addClass('alert-danger').show().delay(5000).fadeOut();
}
})
}

</script>

web_src/js/components/Images.vue → web_src/js/components/images/Images.vue View File

@@ -11,17 +11,6 @@
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="公开镜像" name="first" v-loading="loadingPublic">
<template v-if="tableDataPublic.length!==0">
<!-- <div class="ui two column stackable grid">
<div class="column">

</div>
<div class="column">
<el-input placeholder="搜镜像名称/描述/标签..." 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>
</div> -->
<el-row style="align-items: center;display: flex;">
<el-col :span="12">
<div>
@@ -53,7 +42,7 @@
<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>
@@ -66,7 +55,7 @@
<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">{{topic}}</span>
<span v-for="(topic,index) in scope.row.topics" class="ui repo-topic label topic" style="cursor: pointer;">{{topic}}</span>
</div>
</template>
@@ -314,7 +303,7 @@
<el-row style="margin-top:15px;">

<el-table
:data="tableDataPublic"
:data="tableDataStar"
style="width: 100%"
:header-cell-style="tableHeaderStyle"
>
@@ -327,7 +316,7 @@
<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>
@@ -384,7 +373,7 @@
>
<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;">
<div style="display: flex;align-items: center;cursor:pointer;padding: 0 1rem;" @click="imageUnstar()">
<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>
@@ -581,18 +570,37 @@ export default {
if(isStar){
this.$axios.put(`/image/${id}/action/unstar`).then((res)=>{
console.log(res)
this.tableDataPublic[index].numStars = this.tableDataPublic[index].numStars - 1
this.tableDataPublic[index].isStar = false
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)=>{
console.log(res)
this.tableDataPublic[index].numStars = this.tableDataPublic[index].numStars + 1
this.tableDataPublic[index].isStar = true
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(){
this.$axios.put(`/image/${id}/action/star`).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
@@ -618,16 +626,9 @@ export default {
this.getImageListStar()
}
}

},
},
filters:{
clearP(value){
if(!value) return ''
const reg = /\<\/?p\>/g;
value = value.replace(reg,'')
return value
},
transformType(val){
if(val==0){
return "GPU"
@@ -655,21 +656,24 @@ export default {
},
},
watch:{
search(val){
if(this.activeName=='first'){
this.paramsPublic.q = val
this.getImageListPublic()
}
if(this.activeName=='second'){
this.paramsCustom.q = val
this.getImageListCustom()
}
if(this.activeName=='third'){
this.paramsStar.q = val
this.getImageListStar()
}
}

search(val){
if(this.activeName=='first'){
this.paramsPublic.q = val
this.getImageListPublic()
}
if(this.activeName=='second'){
this.paramsCustom.q = val
this.getImageListCustom()
}
if(this.activeName=='third'){
this.paramsStar.q = val
this.getImageListStar()
}
},
checked(val){
this.paramsPublic.recommend = val
this.getImageListPublic()
}
},
mounted() {
this.getImageListPublic()
@@ -760,7 +764,6 @@ export default {
}
.image_title{
display: inline-block;
width: 80%;
cursor: default;
color: rgb(66, 98, 144);
}
@@ -772,7 +775,7 @@ export default {
overflow: hidden;
}
.heart-stroke{
stroke: #666;
stroke: #FA8C16;
stroke-width: 2;
fill: #fff
}

web_src/js/components/adminImages.vue → web_src/js/components/images/adminImages.vue View File

@@ -11,10 +11,24 @@
</div>
</div>
</div>
<div class="ui ten wide column" style="padding-top: 1rem;padding-left: 1rem">
<el-checkbox v-model="checked">仅显示平台推荐</el-checkbox>
</div>
<el-row style="margin-top:15px;">
<el-row style="padding: 1rem;">
<el-col :span="2" style="margin-right: 1rem;">
<el-checkbox v-model="checked" style="padding: 0.5rem 1rem;">仅显示平台推荐</el-checkbox>
</el-col>
<el-col :span="6">
<el-dropdown @command="handleCommand" size="small" trigger="click" style="border: 1px solid rgba(34,36,38,.15);border-radius: 4px;padding: 0.5rem 1rem;">
<span class="el-dropdown-link">
{{dropdownPrivate}}<i class="el-icon-caret-bottom el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="{label:'全部',private:''}">全部</el-dropdown-item>
<el-dropdown-item :command="{label:'公开',private:false}">公开</el-dropdown-item>
<el-dropdown-item :command="{label:'公开',private:true}">私有</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
</el-row>
<el-row>
<el-table
:data="tableDataCustom"
style="width: 100%"
@@ -30,6 +44,7 @@
<div style="display: flex;align-items: center;">
<a class="text-over image_title" :title="scope.row.tag">{{ scope.row.tag }}</a>
<i class="ri-lock-2-line" style="color: #fa8c16;padding: 0 1rem;" v-if="scope.row.isPrivate"></i>
<img v-if="scope.row.type==5" src="/img/jian.svg" style="margin-left: 0.5rem;">
</div>
</template>
</el-table-column>
@@ -42,7 +57,7 @@
<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">{{topic}}</span>
<span v-for="(topic,index) in scope.row.topics" class="ui repo-topic label topic" style="cursor: pointer;">{{topic}}</span>
</div>
</template>
@@ -100,8 +115,8 @@
<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;" v-if="scope.row.type==5" @click="unSetRecommend(scope.$index,scope.row.id)">取消推荐</span>
<span style="padding: 0 1rem;color:#0366d6;cursor:pointer;" v-else @click="setRecommend(scope.$index,scope.row.id)">设为推荐</span>
<span style="padding: 0 1rem;color: rgb(250, 140, 22);cursor:pointer;" v-if="scope.row.type==5" @click="unSetRecommend(scope.$index,scope.row.id)">取消推荐</span>
<span style="padding: 0 1rem;color: rgb(19, 194, 141);cursor:pointer;" v-else @click="setRecommend(scope.$index,scope.row.id)">设为推荐</span>
<span style="padding: 0 1rem;color:#0366d6;cursor:pointer;" @click="copyUrl(scope.row.place)">复制地址</span>
<div style="padding-left:1rem;cursor:pointer;">
@@ -153,26 +168,22 @@ export default {
data() {
return {
search:'',
dropdownPrivate:'全部',
checked:false,

currentPageCustom:1,
pageSizeCustom:15,
totalNumCustom:0,
paramsCustom:{page:1,pageSize:15,q:''},
paramsCustom:{page:1,pageSize:15,q:'',recommend:false},
tableDataCustom: [],
starCustom:[],
loadingCustom:false,


};
},
methods: {
tableHeaderStyle({row,column,rowIndex,columnIndex}){
if(rowIndex===0){
return 'background:#f5f5f6;color:#606266'
}
},

handleSizeChangeCustom(val){
@@ -209,7 +220,7 @@ export default {
})
},
eidtImage(id){
location.href = `/image/${id}/imageSquare`
location.href = `/image/${id}/imageAdmin`
},
imageStar(index,id,isStar){
if(isStar){
@@ -242,27 +253,28 @@ export default {
},
setRecommend(index,id){
this.$axios.put(`/admin/images/${id}/action/recommend`).then((res)=>{
this.$axios.put(`/admin/image/${id}/action/recommend`).then((res)=>{
console.log(res)
this.tableDataCustom[index].type = 5

})
},
unSetRecommend(index,id){
this.$axios.put(`/admin/images/${id}/action/unrecommend`).then((res)=>{
this.$axios.put(`/admin/image/${id}/action/unrecommend`).then((res)=>{
console.log(res)
this.tableDataCustom[index].type = 0
})
},
handleCommand(command){
console.log(command)
this.dropdownPrivate = command.label
this.paramsCustom.private = command.private
this.getImageListCustom()

}

},
filters:{
clearP(value){
if(!value) return ''
const reg = /\<\/?p\>/g;
value = value.replace(reg,'')
return value
},
transformType(val){
if(val==0){
return "GPU"
@@ -290,10 +302,14 @@ export default {
},
},
watch:{
search(val){
search(val){
this.paramsCustom.q = val
this.getImageListCustom()
}
},
checked(val){
this.paramsCustom.recommend = val
this.getImageListCustom()
}

},
mounted() {
@@ -366,6 +382,9 @@ export default {
/deep/ .el-pagination .el-pager li:not(.disabled):hover {
color: #08C0B9;
}
/deep/ .el-icon--right{
margin-left: 1.5rem;
}
/* /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
background-color: #5bb973;
color: #000;
@@ -397,7 +416,7 @@ export default {
overflow: hidden;
}
.heart-stroke{
stroke: #666;
stroke: #FA8C16;
stroke-width: 2;
fill: #fff
}
@@ -405,4 +424,7 @@ export default {
fill: #FA8C16 !important;
stroke:#FA8C16 !important
}
.header-new-drop{
width: 100%;
}
</style>

+ 382
- 0
web_src/js/components/images/selectImages.vue View File

@@ -0,0 +1,382 @@
<template>

<div class="inline required field">
<label for="">镜像</label>
<input type="text" name="image" :value="imageAddress">
<el-button type="text" @click="dialogVisible = true" icon="el-icon-plus">选择镜像</el-button>
<el-dialog
title="选择镜像"
:visible.sync="dialogVisible"
width="50%"
>
<div class="ui icon input" style="z-index: 9999;position: absolute;right: 50px;height:30px;">
<i class="search icon" style="cursor: pointer;pointer-events:auto" @click="searchName()"></i>
<input type="text" placeholder="" v-model="search" @keyup.enter="searchName()">
</div>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="公开镜像" name="first" v-loading="loadingPublic">
<div style="display: flex;align-items: center;justify-content: space-between;padding: 1rem 0;border-bottom:1px solid #F5F5F5" v-for="(publicData,index) in tableDataPublic" :key="index">
<div style="width: 90%;">
<div style="display: flex;align-items: center;justify-content: space-between;">
<span class="panel_dataset_name" style="margin-left: 0;">{{publicData.tag}} </span>
<div v-if="!!publicData.topics">
<span v-for="(topic,index) in publicData.topics" class="ui repo-topic label topic">{{topic}}</span>
</div>
</div>
<div style="margin-top: 8px;display: flex;">
<a :title="publicData.userName" style="cursor: default;">
<img class="ui avatar mini image" style="width: 20px;height: 20px;" :src="publicData.relAvatarLink">
</a>
<span class="panel_datset_desc">{{publicData.description}}</span>
</div>
</div>
<div>
<button class="ui primary basic button mini" @click.stop.prevent="selectImages(publicData.place,publicData.tag)">使用</button>
</div>
</div>
<div class="ui container" style="margin-top:50px;text-align:center">
<el-pagination
background
@current-change="handleCurrentChangePublic"
:current-page="currentPagePublic"
:page-size="pageSizePublic"
layout="total, prev, pager, next"
:total="totalNumPublic">
</el-pagination>
</div>
</el-tab-pane>

<el-tab-pane label="我的镜像" name="second" v-loading="loadingCustom">
<div style="display: flex;align-items: center;justify-content: space-between;padding: 1rem 0;border-bottom:1px solid #F5F5F5" v-for="(customData,index) in tableDataCustom" :key="index">
<div style="width: 90%;">
<div style="display: flex;align-items: center;justify-content: space-between;">
<span class="panel_dataset_name" style="margin-left: 0;">{{customData.tag}} </span>
<div v-if="!!customData.topics">
<span v-for="(topic,index) in customData.topics" class="ui repo-topic label topic">{{topic}}</span>
</div>
</div>
<div style="margin-top: 8px;display: flex;">
<a :title="customData.userName" style="cursor: default;">
<img class="ui avatar mini image" style="width: 20px;height: 20px;" :src="customData.relAvatarLink">
</a>
<span class="panel_datset_desc">{{customData.description}}</span>
</div>
</div>
<div>
<button class="ui primary basic button mini" @click.stop.prevent="selectImages(customData.place,customData.tag)">使用</button>
</div>
</div>
<div class="ui container" style="margin-top:50px;text-align:center">
<el-pagination
background
@current-change="handleCurrentChangeCustom"
:current-page="currentPageCustom"
:page-size="pageSizeCustom"
layout="total, prev, pager, next"
:total="totalNumCustom">
</el-pagination>
</div>
</el-tab-pane>
<el-tab-pane label="我收藏的镜像" name="third">
<div style="display: flex;align-items: center;justify-content: space-between;padding: 1rem 0;border-bottom:1px solid #F5F5F5" v-for="(starData,index) in tableDataStar" :key="index">
<div style="width: 90%;">
<div style="display: flex;align-items: center;justify-content: space-between;">
<span class="panel_dataset_name" style="margin-left: 0;">{{starData.tag}} </span>
<div v-if="!!starData.topics">
<span v-for="(topic,index) in starData.topics" class="ui repo-topic label topic">{{topic}}</span>
</div>
</div>
<div style="margin-top: 8px;display: flex;">
<a :title="starData.userName" style="cursor: default;">
<img class="ui avatar mini image" style="width: 20px;height: 20px;" :src="starData.relAvatarLink">
</a>
<span class="panel_datset_desc">{{starData.description}}</span>
</div>
</div>
<div>
<button class="ui primary basic button mini" @click.stop.prevent="selectImages(starData.place,starData.tag)">使用</button>
</div>
</div>
<div class="ui container" style="margin-top:50px;text-align:center">
<el-pagination
background
@current-change="handleCurrentChangeStar"
:current-page="currentPageStar"
:page-size="pageSizeStar"
layout="total, prev, pager, next"
:total="totalNumStar">
</el-pagination>
</div>
</el-tab-pane>
</el-tabs>
</el-dialog>
</div>

</template>

<script>

const {_AppSubUrl, _StaticUrlPrefix, csrf} = window.config;




export default {
components: {
},
data() {
return {
dialogVisible:false,
imageAddress:'',
activeName: 'first',
search:'',
checked:false,
currentPagePublic:1,
pageSizePublic:5,
totalNumPublic:0,
paramsPublic:{page:1,pageSize:5,q:'',recommend:false},
tableDataPublic: [],
loadingPublic:false,

currentPageCustom:1,
pageSizeCustom:5,
totalNumCustom:0,
paramsCustom:{page:1,pageSize:5,q:''},
tableDataCustom: [],
starCustom:[],
loadingCustom:false,

currentPageStar:1,
pageSizeStar:5,
totalNumStar:0,
paramsStar:{page:1,pageSize:5,q:''},
tableDataStar: [],
loadingStar:false
};
},
methods: {
handleClick(tab, event) {
this.search = ''
if(tab.name=="first"){
this.paramsPublic.q = ''
this.getImageListPublic()
}
if(tab.name=="second"){
this.getImageListCustom()
}
if(tab.name=="third"){
this.getImageListStar()
}
},
tableHeaderStyle({row,column,rowIndex,columnIndex}){
if(rowIndex===0){
return 'background:#f5f5f6;color:#606266'
}
},

handleCurrentChangePublic(val){
this.paramsPublic.page = val
this.getImageListPublic()

},

handleCurrentChangeCustom(val){
this.paramsCustom.page = val
this.getImageListCustom()

},
handleCurrentChangeStar(val){
this.paramsStar.page = val
this.getImageListStar()

},
getImageListPublic(){
this.loadingPublic = true
this.$axios.get('/explore/images/public',{
params:this.paramsPublic
}).then((res)=>{
console.log("res",res.data)
this.totalNumPublic = res.data.count
this.tableDataPublic = res.data.images
this.loadingPublic = false
})
},

getImageListCustom(){
this.loadingCustom = true
this.$axios.get('/explore/images/custom',{
params:this.paramsCustom
}).then((res)=>{
console.log("res",res)
this.totalNumCustom = res.data.count
this.tableDataCustom = res.data.images
this.tableDataCustom.forEach(element => {
this.starCustom.push({id:element.id,})
});
this.loadingCustom = false
})
},

getImageListStar(){
this.loadingStar = true
this.$axios.get('/explore/images/star',{
params:this.paramsStar
}).then((res)=>{
console.log("res",res)
this.totalNumStar = res.data.count
this.tableDataStar = res.data.images
this.loadingStar = false
})
},
searchName(){
if(this.activeName=='first'){
this.paramsPublic.q = this.search
this.paramsPublic.page = 1
this.getImageListPublic()
}
if(this.activeName=='second'){
this.paramsCustom.q = this.search
this.paramsCustom.page = 1
this.getImageListCustom()
}
if(this.activeName=='third'){
this.paramsStar.q = this.search
this.paramsStar.page = 1
this.getImageListStar()
}
},
selectImages(place){
this.imageAddress = place
this.dialogVisible = false
},

},
watch:{
search(val){
if(this.activeName=='first'){
this.paramsPublic.q = val
this.getImageListPublic()
}
if(this.activeName=='second'){
this.paramsCustom.q = val
this.getImageListCustom()
}
if(this.activeName=='third'){
this.paramsStar.q = val
this.getImageListStar()
}
}

},
mounted() {
this.getImageListPublic()
},
created() {
}

};
</script>

<style scoped>
.header-wrapper {
background-color: #f5f5f6;
padding-top: 15px;
}
.image_text{
padding:25px 0 55px 0 ;
}
#header{
position: relative;
top:-40px;
}
.el-dropdown-menu__item--divided{
border-top: 1px solid blue;
}
.el-table thead{
background-color: #f5f5f6;
}
/deep/ .el-tabs__item:hover{
color: #000;
font-weight: 500;
}
/deep/ .el-tabs__item.is-active {
color: #000;
font-weight: 500;
}
/deep/ .el-tabs__active-bar{
background-color:#000
}

/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
background-color: #5bb973;
color: #FFF;
}
/deep/ .el-pagination.is-background .el-pager li.active {
color: #fff;
cursor: default;
}
/deep/ .el-pagination.is-background .el-pager li:hover {
color: #5bb973;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
color: #5bb973;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
background-color: #5bb973;
color: #FFF;
}

/deep/ .el-pager li.active {
color: #08C0B9;
cursor: default;
}
/deep/ .el-pagination .el-pager li:hover {
color: #08C0B9;
}
/deep/ .el-pagination .el-pager li:not(.disabled):hover {
color: #08C0B9;
}
#success{
background-color: #5bb973;
color: white;
}
.text-over{
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
}
.image_title{
display: inline-block;
width: 80%;
cursor: default;
color: rgb(66, 98, 144);
}
.image_desc{
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
text-overflow: ellipsis;
overflow: hidden;
}
.heart-stroke{
stroke: #666;
stroke-width: 2;
fill: #fff
}
.stars_active{
fill: #FA8C16 !important;
stroke:#FA8C16 !important
}
</style>

+ 29
- 5
web_src/js/features/images.js View File

@@ -1,5 +1,6 @@
import Images from '../components/Images.vue';
import adminImages from '../components/adminImages.vue';
import Images from '../components/images/Images.vue';
import adminImages from '../components/images/adminImages.vue';
import selectImages from '../components/images/selectImages.vue';
import Vue from 'vue';
export default async function initImage(){
function validate() {
@@ -67,7 +68,6 @@ export default async function initImage(){
initDropdown()
let link = $('.submit-image-tmplvalue').data('link')
$('.ui.create_image.green.button').click(()=>{
let pattenTag = new RegExp(/^[A-Za-z0-9_.-]{1,100}[A-Za-z0-9_.]$/)
if(!pattenTag.test($("input[name='tag']").val())){
$("input[name='tag']").parent().addClass('error')
@@ -83,7 +83,7 @@ export default async function initImage(){
tag:$("input[name='tag']").val(),
description:$("textarea[name='description']").val(),
type:$("input[name='type']").val(),
isPrivate:$("input[name='isPrivate']").val(),
isPrivate:$("input[name='isPrivate']:checked").val(),
topics:$("input[name='topics']").val(),
id:$("input[name='id']").val()
}
@@ -100,7 +100,17 @@ export default async function initImage(){
if(res.Code===1){
$('.alert').html(res.Message).removeClass('alert-success').addClass('alert-danger').show().delay(1500).fadeOut();
}else if(res.Code==0){
location.href = `${window.config.AppSubUrl}/explore/images`
if(link.indexOf('commit_image')===1){
$('.alert').html('保存镜像成功').removeClass('alert-danger').addClass('alert-success').show().delay(1500).fadeOut();
}else{
$('.alert').html('提交镜像成功').removeClass('alert-danger').addClass('alert-success').show().delay(1500).fadeOut();
}
if(location.href.indexOf('imageAdmin')!==-1){
location.href = `${window.config.AppSubUrl}/admin/images`
}else{
location.href = `${window.config.AppSubUrl}/explore/images`
}
}
},
error: function(xhr){
@@ -149,6 +159,20 @@ export default async function initImage(){
render: h => h(adminImages)
});
}
function initVueselectImages() {
const el = document.getElementById('images-new-cb');
console.log(el)
if (!el) {
return;
}
new Vue({
el:el,
render: h => h(selectImages)
});
}
initVueImages()
initVueAdminImages()
initVueselectImages()
}

Write Preview
Loading…
Cancel
Save