aiforge/templates/repo/datasets/index.tmpl

{{template "base/head" .}}
<style>
  .selectcloudbrain .active.item {
    color: #0087f5 !important;
    border: 1px solid #0087f5;
    margin: -1px;
    background: #FFF !important;
  }



  .dataset_title {
    font-size: 14px;
    /* max-width: 80%; */
    display: inline-block !important;
    margin-left: 6px !important;
    padding-right: 0 !important;
  }

  .wrapper {
    display: flex;
    overflow: hidden;
  }

  .exp {
    display: none;
  }

  .exp:checked+.text {
    max-height: none;
  }

  .exp:checked+.text::after {
    visibility: hidden;
  }

  .exp:checked+.text .btn::before {
    visibility: hidden;
  }

  .exp:checked+.text .btn::after {
    content:'{{$.i18n.Tr "org.fold"}}';
    color: #3291f8;
  }

  .wrapper>.text {
    font-family: SourceHanSansSC-regular;
    font-size: 14px;
    color: #101010;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: justify;
    position: relative;
    line-height: 1.5;
    max-height: 3em;
    transition: .3s max-height;
    word-wrap: break-word;
    word-break: break-all;
  }

  .wrapper>.text::before {
    content: '';
    height: calc(100% - 20px);
    float: right;
  }

  .wrapper>.text::after {
    content: '';
    width: 999vw;
    height: 999vw;
    position: absolute;
    box-shadow: inset calc(100px - 999vw) calc(30px - 999vw) 0 0 #fff;
    margin-left: -100px;
  }

  .btn {
    position: relative;
    float: right;
    clear: both;
    margin-left: 20px;
    font-size: 14px;
    padding: 0 8px;
    background-color: transparent;
    line-height: 20px;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    /* margin-top: -30px; */
  }

  .btn::after {
    content:'{{$.i18n.Tr "org.unfold"}}';
    color: #3291f8;
  }

  .btn::before {
    content: '...';
    position: absolute;
    left: -5px;
    color: #333;
    transform: translateX(-100%)
  }

  .el-button--text {
    color: #0366d6;
  }

  .heart-stroke {
    stroke: #FA8C16;
    stroke-width: 2;
    fill: #fff
  }

  .stars_active {
    fill: #FA8C16 !important;
    stroke: #FA8C16 !important
  }

  .diy-popper {
    max-width: 400px;
  }

  .ascending {
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-bottom-color: #c0c4cc;
  }

  .descending {
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-top-color: #c0c4cc;
  }
  .dataset-flavor-button{
    display: flex;
    align-items: center;
    padding: 0.5rem;
    border: 1px solid rgba(34,36,38,0.15);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: none
  }
</style>
<div class="repository">
  {{template "repo/header" .}}
  {{if .dataset}}
  <div id="dataset-range-value" data-num-stars="{{.dataset.NumStars}}" data-star-active="{{$.IsStaringDataset}}"
    style="display: none;">
    {{range .Attachments}}
    <div class="item" data-private="{{.IsPrivate}}" data-decompress-state="{{.DecompressState}}"></div>
    {{end}}
  </div>
  <div id="dataset-base">
    <div class="ui container">
      <div class="ui mobile reversed stackable grid">
        <div class="row">
          <div class="ui blue small menu compact selectcloudbrain">
            <a class="active item" href="{{.RepoLink}}/datasets">{{$.i18n.Tr "dataset.current_dataset"}}</a>
            <a class="item" href="{{.RepoLink}}/datasets/reference_datasets">{{$.i18n.Tr "dataset.linked_dataset"}}</a>
          </div>
        </div>
        <div class="row" style="align-items: center;">
          <h2 class="nowrap" style="margin: 0;">{{.dataset.Title}}</h2>
          <!-- border-top-right-radius: 0;
          border-bottom-right-radius: 0; -->
          <div style="margin-left: 1.5rem;">
            {{if $.IsSigned}}
            <button v-if="star_active" class="ui mini basic button" style="display: flex;align-items: center;padding: 0.5rem;border: #888888;border-top-right-radius: 0;border-bottom-right-radius: 0;margin-right: -1px;" @click="postStar({{.dataset.ID}},'{{.Link}}')">
              <i class="ri-heart-fill" style="color: #FA8C16;"></i>
              <span style="margin-left: 0.3rem;font-size: 0.7rem;">{{$.i18n.Tr "dataset.unfavorite"}}</span>
            </button>
            <button v-else class="ui mini basic button" style="display: flex;align-items: center;padding:0.5rem;border: #888888;border-top-right-radius: 0;border-bottom-right-radius: 0;margin-right: -1px;" @click="postStar({{.dataset.ID}},'{{.Link}}')">
              <i class="ri-heart-line" ></i>
              <span style="margin-left: 0.3rem;font-size: 0.7rem;">{{$.i18n.Tr "dataset.favorite"}}</span>
            </button>
            {{else}}
            <button v-if="star_active" class="ui mini basic button" style="display: flex;align-items: center;padding: 0.5rem;border: #888888;border-top-right-radius: 0;border-bottom-right-radius: 0;margin-right: -1px;">
              <i class="ri-heart-fill" ></i>
              <span style="margin-left: 0.3rem;font-size: 0.7rem;">{{$.i18n.Tr "dataset.unfavorite"}}</span>
            </button>
            <button v-else class="ui mini basic button" style="display: flex;align-items: center;padding:0.5rem;border: #888888;border-top-right-radius: 0;border-bottom-right-radius: 0;margin-right: -1px;">
              <i class="ri-heart-line" style="color: #FA8C16;"></i>
              <span style="margin-left: 0.3rem;font-size: 0.7rem;">{{$.i18n.Tr "dataset.favorite"}}</span>
            </button>
            {{end}}
          </div>
          <a  class="ui mini basic button" style="display: flex;align-items: center;padding: 0.5rem;border: #888888;border-top-left-radius: 0;border-bottom-left-radius: 0;">
            ${num_stars}
          </a>
          <a style="margin-left:15px;padding: 0.5rem 1.5rem;" href="{{.RepoLink}}/datasets/edit/{{.dataset.ID}}" class="ui primary basic mini {{if not $.CanWrite}} disabled {{end}} button">{{.i18n.Tr "repo.modelarts.modify"}}</a>
        </div>
        {{if .dataset.Description}}
        <div class="row" style="padding: 0;">
          <div class="wrapper">
            <input id="exp1" class="exp" type="checkbox">
            <div class="text">
              <label class="btn" for="exp1"></label>
              {{.dataset.Description}}
            </div>
          </div>
        </div>
        {{end}}
        <div class="row" style="align-items: center;">
          {{if or (.dataset.Category) (.dataset.Task) (.dataset.License)}}
          <div class="column ten wide" style="padding:0">
            {{if .dataset.Category}}
            {{$category := .dataset.Category}}
            <a class="ui repo-topic label topic"
              href="{{AppSubUrl}}/explore/datasets?sort={{$.SortType}}&q={{$.Keyword}}&tab={{$.TabName}}&category={{.dataset.Category}}&task={{$.Task}}&license={{$.License}}">{{$.i18n.Tr (printf "dataset.category.%s" $category)}}</a>
            {{end}}
            {{if .dataset.Task}}
            {{$task := .dataset.Task}}
            <a class="ui repo-topic label topic"
              href="{{AppSubUrl}}/explore/datasets?sort={{$.SortType}}&q={{$.Keyword}}&tab={{$.TabName}}&category={{$.Category}}&task={{.dataset.Task}}&license={{$.License}}">{{$.i18n.Tr (printf "dataset.task.%s" $task)}}</a>
            {{end}}
            {{if .dataset.License}}
            <a class="ui repo-topic label topic"
              href="{{AppSubUrl}}/explore/datasets?sort={{$.SortType}}&q={{$.Keyword}}&tab={{$.TabName}}&category={{$.Category}}&task={{$.Task}}&license={{.dataset.License}}">{{.dataset.License}}</a>
            {{end}}
          </div>
          {{end}}
          <div class="column six wide right aligned" style="padding:0">
            <el-select v-model="datasetType" style="width: 40%;" size="small" @change="changeDatasetType">
              <i slot="prefix" style="display: inline-block;color: #101010;"
                class="el-input__icon ri-archive-drawer-line"></i>
              <el-option label="{{$.i18n.Tr "repo.gpu_type_all"}}" value="-1"></el-option>
              <el-option label="CPU/GPU" value="0"></el-option>
              <el-option label="NPU" value="1"></el-option>
            </el-select>
            <el-button icon="el-icon-upload" {{if not $.CanWrite}} disabled {{end}} type="primary" size="small"
              @click="gotoUpload('{{.RepoLink}}',{{.dataset.ID}})">{{$.i18n.Tr "dataset.dataset_upload"}}</el-button>
          </div>
        </div>
        <div class="row" style="padding-top: 0;">
          <div class="ui sixteen wide column dataset">
            <div class="ui grid stackable" style="background: #f0f0f0;;">
              <div class="row">
                <!-- 数据集名称 -->
                <div class="four wide column name_sort" @click="sortAble('name')"
                  style="width: 24% !important;cursor: pointer;">
                  {{$.i18n.Tr "dataset.dataset_file_name"}}
                  <span class="caret-wrapper">
                    <i class='ascending sort-caret-up {{if eq .SortType "nameAsc"}} active-up-sort {{end}}'
                      @click.stop="sortIcon('name','up')"></i>
                    <i class='descending sort-caret-down {{if eq .SortType "nameDesc"}} active-down-sort {{end}}'
                      @click.stop="sortIcon('name','down')"></i>
                  </span>
                </div>
                <div class="one wide column text center size_sort" @click="sortAble('size')"
                  style="width: 7.25% !important;cursor: pointer;">
                  {{$.i18n.Tr "repo.model.manage.size"}}
                  <span class="caret-wrapper">
                    <i class='ascending sort-caret-up {{if eq .SortType "sizeAsc"}} active-up-sort {{end}}'
                      @click.stop="sortIcon('size','up')"></i>
                    <i class='descending sort-caret-down {{if eq .SortType "sizeDesc"}} active-down-sort {{end}}'
                      @click.stop="sortIcon('size','down')"></i>
                  </span>
                </div>
                <div class="two wide column text center">
                  {{$.i18n.Tr "dataset.dataset_available_clusters"}}
                </div>
                <div class="one wide column text center">
                  {{$.i18n.Tr "repo.modelarts.status"}}
                </div>
                <div class="one wide column text center">
                  {{$.i18n.Tr "repo.cloudbrain_creator"}}
                </div>
                <div class="three wide column text center" @click="sortAble('time')" style="cursor: pointer;">
                  {{$.i18n.Tr "dataset.dataset_upload_time"}}
                  <span class="caret-wrapper">
                    <i class='ascending sort-caret-up {{if eq .SortType "timeAsc"}} active-up-sort {{end}}'
                      @click.stop="sortIcon('time','up')"></i>
                    <i class='descending sort-caret-down {{if eq .SortType "timeDesc"}} active-down-sort {{end}}'
                      @click.stop="sortIcon('time','down')"></i>
                  </span>
                </div>
                <div class="four wide column text center">
                  {{$.i18n.Tr "repo.cloudbrain_operate"}}
                </div>
              </div>
            </div>
            {{range $k, $v :=.Attachments}}
            <div class="ui grid stackable item" id="{{.UUID}}">
              <div class="row">
                <!-- 数据集名称 -->

                <div class="four wide column" style="width: 24% !important;display: flex;align-items: center;">
                  <el-tooltip class="item" effect="dark" placement="top" popper-class="diy-popper">
                    <div slot="content"><span class="wrap">

                        {{if ne .DecompressState -1}}{{$.i18n.Tr "dataset.unzip_status"}}：{{if eq .DecompressState 1}}{{$.i18n.Tr "dataset.unzip_successed"}}{{else if eq .DecompressState 0 2}}{{$.i18n.Tr "dataset.unzip_stared"}}{{else}}{{$.i18n.Tr "dataset.unzip_failed"}}{{end}}
                        &nbsp;&nbsp;{{end}}<i
                          class="ri-download-line"></i>{{$.i18n.Tr "dataset.download"}}：{{.DownloadCount}}
                        {{if .Description}}&nbsp;&nbsp;{{$.i18n.Tr "dataset.description"}}：{{.Description}}{{end}}</span>
                    </div>
                    <div style="border: none;display: flex;align-items: center;max-width: 100%;">
                      {{if eq .DecompressState 1}}
                      <i class="ri-folder-open-line" style="color: #5bb973;"
                        title='{{$.i18n.Tr "dataset.unzip_successed"}}'></i>
                      {{else if eq .DecompressState 0 2}}
                      <i class="ri-folder-chart-2-line" style="color: #888888;"
                        title='{{$.i18n.Tr "dataset.unzip_stared"}}'></i>
                      {{else if eq .DecompressState 3}}
                      <i class="ri-folder-forbid-line" style="color: #101010;"
                        title='{{$.i18n.Tr "dataset.unzip_failed"}}'></i>
                      {{else}}
                      <i class="ri-folder-forbid-line" style="visibility: hidden;"
                        title='{{$.i18n.Tr "dataset.unzip_failed"}}'></i>
                      {{end}}
                      <a class="dataset_title title" href="{{.DownloadURL}}" title="{{.Name}}">
                        {{.Name}}
                      </a>
                      <i class="ri-lock-2-line" style="color: #fa8c16;" v-if="privates[{{$k}}]"></i>
                    </div>
                  </el-tooltip>
                </div>
                <div class="one wide column text center" style="width: 7.25% !important;">
                  {{.Size | FileSize}}
                </div>
                <div class="two wide column text center">
                  {{.Type | AttachmentResourceType}}
                </div>
                <div class="one wide column text center">
                  {{$x:=.IsPrivate | AttachmentStatus}}
                  <span style="color: #fa8c16;" v-if="privates[{{$k}}]">{{$.i18n.Tr "home.show_private"}}</span>
                  <span style="color: #13c28d;"
                    v-else="privates[{{$k}}]">{{$.i18n.Tr "org.settings.visibility.public"}}</span>
                </div>
                <div class="one wide column text center">
                  {{if .Uploader.Name}}
                  <a href="{{AppSubUrl}}/{{.Uploader.Name}}" title="{{.Uploader.Name}}"><img class="ui avatar image"
                      src="{{AppSubUrl}}/user/avatar/{{.Uploader.Name}}/-1"></a>
                  {{else}}
                  <a title="Ghost"><img class="ui avatar image" src="{{AppSubUrl}}/user/avatar/Ghost/-1"></a>
                  {{end}}
                </div>
                <div class="three wide column text center">
                  {{.CreatedUnix | TimeSinceUnix1}}
                </div>
                <div class="four wide column text right">
                  <div class="ui compact buttons">

                    <a class="ui basic blue button" href="{{.DownloadURL}}">{{$.i18n.Tr "dataset.download"}}</a>

                    {{if eq .DecompressState 1}}
                    <a class="ui basic blue button" href="datasets/dirs/{{.UUID}}?type={{$.Type}}"
                      data-tooltip='{{$.i18n.Tr "dataset.directory"}}'>{{$.i18n.Tr "preview"}}</a>
                    {{end}}
                    {{if and (.CanDel) (not $.Repository.IsPrivate)}}
                    <span class="ui basic blue button" style="color: #13c28d !important;"
                      @click="setPrivate('{{.UUID}}',false,{{$k}})"
                      v-if="privates[{{$k}}]">{{$.i18n.Tr "dataset.set_public"}}</span>
                    <span class="ui basic blue button" style="color: #fa8c16 !important;"
                      @click="setPrivate('{{.UUID}}',true,{{$k}})"
                      v-else="privates[{{$k}}]">{{$.i18n.Tr "dataset.set_private"}}</span>
                    {{end}}
                    <a class="ui basic blue button">
                      <el-dropdown size="medium">
                        <span class="el-dropdown-link">
                          {{$.i18n.Tr "repo.more"}}<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item @click.native="copyUrl('{{.DownloadURL}}')">{{$.i18n.Tr "dataset.copy_url"}}
                          </el-dropdown-item>
                          {{if and ($.CanWrite) (eq .DecompressState 1) }}
                          <el-dropdown-item @click.native="gotoAnnotate('{{$.RepoLink}}','{{.UUID}}',{{.Type}})">
                            {{$.i18n.Tr "dataset.annotation"}}</el-dropdown-item>
                          {{end}}
                          {{if .CanDel}}
                          <el-dropdown-item @click.native="gotoDatasetEidt('{{$.RepoLink}}',{{.ID}})">
                            {{$.i18n.Tr "dataset.modify_description"}}</el-dropdown-item>
                          <el-dropdown-item style="color: red;" @click.native="delDataset('{{.UUID}}')">
                            {{$.i18n.Tr "dataset.delete"}}</el-dropdown-item>
                          {{end}}
                        </el-dropdown-menu>
                      </el-dropdown>
                    </a>
                  </div>
                </div>
              </div>
            </div>
            {{end}}

          </div>

        </div>

      </div>
    </div>
  </div>
  <div id="app" style="margin-top: 2rem;">
    <div class="center">
      <el-pagination background @current-change="handleCurrentChange" :current-page="page" :page-sizes="[10]"
        :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="{{.Page.Paginater.Total}}">
      </el-pagination>
    </div>
  </div>
  {{else}}
  <div class="ui container">
    <div class="ui stackable grid">
      <div class="row" style="justify-content: space-between">
        <div class="ui blue small menu compact selectcloudbrain">
          <a class="active item" href="{{.RepoLink}}/datasets">{{$.i18n.Tr "dataset.current_dataset"}}</a>
          <a class="item" href="{{.RepoLink}}/datasets/reference_datasets">{{$.i18n.Tr "dataset.linked_dataset"}}</a>
        </div>
        {{if $.CanWrite}}
        <a class="ui green button" href="{{.RepoLink}}/datasets/create">{{$.i18n.Tr "new_dataset"}}</a>
        {{end}}
      </div>
    </div>
    
    <div class="ui placeholder segment bgtask-none">
        <div class="ui icon header bgtask-header-pic"></div>
        <div class="bgtask-content-header">{{.i18n.Tr "dataset.dataset_no_create"}}</div>
        <div class="bgtask-content">
          <div class="bgtask-content-txt">{{.i18n.Tr "dataset.dataset_explain"}}</div>
          <div class="bgtask-content-txt">{{.i18n.Tr "dataset.dataset_instructions_for_use"}}<a
              href="https://git.openi.org.cn/zeizei/OpenI_Learning">&nbsp;{{.i18n.Tr "dataset.dataset_camp_course"}}</a></div>
        </div>
    </div>
  </div>
  {{end}}
</div>

<div class="ui small basic delete modal" id="data-dataset-delete-modal">
  <div class="ui icon header">
    <i class="trash icon"></i>
    {{.i18n.Tr "dataset.attachment.delete"}}
  </div>
  <div class="content">
    <p>{{.i18n.Tr "dataset.attachment.delete_desc" | Str2html}}</p>
  </div>
  {{template "base/delete_modal_actions" .}}
</div>
{{template "base/footer" .}}