aiforge/templates/explore/datasets.tmpl

{{template "base/head" .}}
<style>
.mg-b-1{
	margin-bottom: 1rem;
}
.mg-b-2{
	margin-bottom: 2rem;
}
.mg-l-1{
	margin-left: 1rem;
}
.text-gray-400 {
    --tw-text-opacity: 1;
    color: rgba(156,163,175,var(--tw-text-opacity));
}
.text-sm {
    font-size: .875rem;
    line-height: 1.25rem;
}
.underline {
    text-decoration: underline;
}
.flex{
	display: flex;
}
.font-medium{
	font-weight: 500;
}
.flex-wrap{
	flex-wrap: wrap;
}
.tag {
    background-image: linear-gradient(to bottom,var(--tw-gradient-stops));
    border-color: transparent;
    border-radius: 0.5rem;
    border-width: 1px;
    font-size: .875rem;
    line-height: 1.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tag-red {
    --tw-gradient-from: #fef2f2;
    --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to,hsla(0,86%,97%,0));
    --tw-gradient-to: #fef2f2;
    --tw-text-opacity: 1;
    color: rgba(153,27,27,var(--tw-text-opacity));
}
.tag-purple {
    --tw-gradient-from: #f5f3ff;
    --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to,rgba(245,243,255,0));
    --tw-gradient-to: #f5f3ff;
    --tw-text-opacity: 1;
    color: rgba(91,33,182,var(--tw-text-opacity));
}
.tag-blue {
    --tw-gradient-from: #eff6ff;
    --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to,rgba(239,246,255,0));
    --tw-gradient-to: #eff6ff;
    --tw-text-opacity: 1;
    color: rgba(30,64,175,var(--tw-text-opacity));
}
.tag.inactive {
    filter: grayscale(100%);
    opacity: .5;
}
.tag {
    align-items: center;
    display: inline-flex;
    flex: none;
    height: 2rem;
    margin-bottom: 0.35rem;
    margin-right: 0.35rem;
    max-width: 100%;
}
.tag>span {
    padding: 0.75rem;
	font-size: 14px;
}
.repo_dataset_header{
	font-size: 12px;
	color: #3291F8;
}
.heart-stroke{
      stroke: #666;
      stroke-width: 2;
      fill: #fff
    }
.stars_active{
      fill: #FA8C16 !important;
      stroke:#FA8C16 !important
    }
</style>
<div class="explore repositories">
	{{template "explore/dataset_search" .}}
	<div>
		<div class="ui container">
			<div class="ui grid">
				
				{{template "explore/dataset_left" .}}
				
				<div class="ui sixteen wide mobile sixteen wide tablet twelve wide computer column">
					<div class="ui row">
						<h2 class="ui left floated medium header">
						{{.i18n.Tr "datasets"}}
						</h2>
						<div class="ui right floated secondary filter menu">
							<!-- Sort -->
							<div class="ui right dropdown type jump item">
								<span class="text">
								{{.i18n.Tr "repo.issues.filter_sort"}}
								<i class="dropdown icon"></i>
								</span>
								<div class="menu">
									<a class="{{if eq .SortType "newest"}}active{{end}} item" href="{{$.Link}}?sort=newest&q={{$.Keyword}}&tab={{$.TabName}}">{{.i18n.Tr "repo.issues.filter_sort.latest"}}</a>
									<a class="{{if eq .SortType "oldest"}}active{{end}} item" href="{{$.Link}}?sort=oldest&q={{$.Keyword}}&tab={{$.TabName}}">{{.i18n.Tr "repo.issues.filter_sort.oldest"}}</a>
									<a class="{{if eq .SortType "recentupdate"}}active{{end}} item" href="{{$.Link}}?sort=recentupdate&q={{$.Keyword}}&tab={{$.TabName}}">{{.i18n.Tr "repo.issues.filter_sort.recentupdate"}}</a>
									<a class="{{if eq .SortType "leastupdate"}}active{{end}} item" href="{{$.Link}}?sort=leastupdate&q={{$.Keyword}}&tab={{$.TabName}}">{{.i18n.Tr "repo.issues.filter_sort.leastupdate"}}</a>
									<!-- <a class="{{if eq .SortType "downloadtimes"}}active{{end}} item" href="{{$.Link}}?sort=downloadtimes&q={{$.Keyword}}&tab={{$.TabName}}">{{.i18n.Tr "repo.issues.filter_sort.downloadtimes"}}</a> -->
								</div>
							</div>
						</div>
					</div>
					{{if .Datasets}}
					<div id="datasets-square-range-value" style="display: none;">
						{{range .Datasets}}
						<div class="item" data-num-stars="{{.NumStars}}" data-star-active="{{.IsStaring}}"></div>
						{{end}}
					</div>
					{{end}}

					<div class="ui row" style="clear: both;" id="dataset-base">
						<div class="ui two cards">
							{{range $k, $v :=.Datasets}}
							<div class="ui card" @click="gotoDataset('{{.Repo.Link}}/datasets')" style="cursor: pointer;">
								<div class="content">
									<div class="repo_dataset_header" style="display: flex;align-items: center;justify-content: space-between;">
										<a href="{{.Repo.Link}}/datasets" style="font-size: 12px;color: #3291F8;height: 24px;">{{.Repo.OwnerName}} / {{.Repo.Alias}}</a>
										{{if $.IsSigned}}
										<span style="display: flex;align-items: center;justify-content: flex-end;cursor: pointer;" @click.stop="postSquareStar({{.ID}},'{{.Repo.Link}}/datasets',{{$k}})">
											<div style="line-height: 1;margin-right: 4px;margin-bottom: -2px;">
												<svg width="1.4em" height="1.4em" viewBox="0 0 32 32" class="heart-stroke" :class='{stars_active:starActives[{{$k}}]}'><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>
											</div>
											<span style="line-height: 1;color: #101010;">${starItems[{{$k}}]}</span>
										</span>
										{{else}}
										<span style="display: flex;align-items: center;justify-content: flex-end;cursor: pointer;">
											<div style="line-height: 1;margin-right: 4px;margin-bottom: -2px;">
												<svg width="1.4em" height="1.4em" viewBox="0 0 32 32" class="heart-stroke" :class='{stars_active:starActives[{{$k}}]}'><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>
											</div>
											<span style="line-height: 1;color: #101010;">${starItems[{{$k}}]}</span>
										</span>
										{{end}}
									</div>
									<div style="font-size: 16px;color:#0366D6;font-family: SourceHanSansSC-medium;height: 27px;">{{.Title}}</div>
									<div style="font-size: 12px;margin-top: 5px;height: 24px;">
										{{if .Category}}
										{{$category := .Category}}
										<a class="ui repo-topic label topic" href="{{$.Link}}?sort={{$.SortType}}&q={{$.Keyword}}&tab={{$.TabName}}&category={{.Category}}&task={{$.Task}}&license={{$.License}}">{{$.i18n.Tr (printf "dataset.category.%s" $category)}}</a>
										{{end}}
										{{if .Task}}
										{{$task := .Task}}
										<a class="ui repo-topic label topic" href="{{$.Link}}?sort={{$.SortType}}&q={{$.Keyword}}&tab={{$.TabName}}&category={{$.Category}}&task={{.Task}}&license={{$.License}}">{{$.i18n.Tr (printf "dataset.task.%s" $task)}}</a>
										{{end}}
										{{if .License}}
										<a class="ui repo-topic label topic" href="{{$.Link}}?sort={{$.SortType}}&q={{$.Keyword}}&tab={{$.TabName}}&category={{$.Category}}&task={{$.Task}}&license={{.License}}">{{.License}}</a>
										{{end}}
									</div>
									
									<div class="description" style="-webkit-box-orient: vertical;-webkit-line-clamp: 2;display: -webkit-box;overflow: hidden;color:#999999;font-size: 14px;margin-top: 10px;">
										<p>{{.Description}}</p>
									</div>
									
								</div>
								<div class="extra content">
									<div style="display: flex;align-items: center;">
										<a href="{{AppSubUrl}}/{{.Repo.OwnerName}}" title="{{.Repo.OwnerName}}">
											<img class="ui avatar image" style="width: 22px;height:22px;"  src="/user/avatar/{{.Repo.OwnerName}}/-1">
										</a>
										<span style="color: #999999;font-size: 14px;;">创建于：{{TimeSinceUnix1 .CreatedUnix}}</span>
									</div>
								</div>
							</div>
							{{end}}
							

						</div>
					</div>

					<div id="app" style="margin-top: 2rem;">
						<div class="center">
							<el-pagination
							background
							@current-change="handleCurrentChange"
							:current-page="page"
							:page-sizes="[30]"
							:page-size="30"
							layout="total, sizes, prev, pager, next, jumper"
							:total="{{.Page.Paginater.Total}}">
							</el-pagination>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
{{template "base/footer" .}}
<script>
	console.log({{.Total}})
</script>