实现根据后端数据加载模板

This commit is contained in:
2025-09-14 06:40:17 +00:00
parent 6df94872b3
commit e851832d58

View File

@@ -2,53 +2,46 @@
<div role="main" aria-label="{{.Title}}" class="page-content repository new migrate"> <div role="main" aria-label="{{.Title}}" class="page-content repository new migrate">
<div class="ui middle very relaxed page grid"> <div class="ui middle very relaxed page grid">
<div class="column"> <div class="column">
<div class="ui cards migrate-entries"> <div class="ui cards migrate-entries" id="template-cards">
<a class="ui card migrate-entry tw-flex tw-items-center" href="{{AppSubUrl}}/repo/create"> <div class="ui active inverted dimmer">
{{svg "devstar-favicon" 184 "tw-p-4"}} <div class="ui text loader">加载模板中...</div>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const cardsContainer = document.getElementById('template-cards');
fetch('https://devstar.cn/api/v1/repos/search?template=true')
.then(response => response.json())
.then(data => {
cardsContainer.innerHTML = '';
if (data.data && data.data.length > 0) {
data.data.forEach(repo => {
const card = `
<a class="ui card migrate-entry tw-flex tw-items-center"
href="{{.AppSubUrl}}/repo/create?template_owner=${repo.owner.login}&template_name=${repo.name}">
<img src="/assets/img/favicon.svg" width="184" height="184" class="tw-p-4" alt="${repo.name}" />
<div class="content"> <div class="content">
<div class="header tw-text-center"> <div class="header tw-text-center">${repo.name}</div>
{{ctx.Locale.Tr "repo.create_from_template_name_one"}} <div class="description tw-text-center tw-text-balance">${repo.description}</div>
</div>
<div class="description tw-text-center tw-text-balance">
{{ctx.Locale.Tr "repo.create_from_template_description_one"}}
</div>
</div> </div>
</a> </a>
<a class="ui card migrate-entry tw-flex tw-items-center" href="{{AppSubUrl}}/repo/create"> `;
{{svg "devstar-favicon" 184 "tw-p-4"}} cardsContainer.insertAdjacentHTML('beforeend', card);
<div class="content"> });
<div class="header tw-text-center"> } else {
{{ctx.Locale.Tr "repo.create_from_template_name_two"}} cardsContainer.innerHTML = '<div class="ui warning message">未找到任何模板</div>';
</div> }
<div class="description tw-text-center tw-text-balance"> })
{{ctx.Locale.Tr "repo.create_from_template_description_two"}} .catch(error => {
</div> console.error('获取模板数据失败:', error);
</div> cardsContainer.innerHTML = '<div class="ui error message">加载模板失败</div>';
</a> });
<a class="ui card migrate-entry tw-flex tw-items-center" href="{{AppSubUrl}}/repo/create"> });
{{svg "devstar-favicon" 184 "tw-p-4"}} </script>
<div class="content">
<div class="header tw-text-center">
{{ctx.Locale.Tr "repo.create_from_template_name_three"}}
</div>
<div class="description tw-text-center tw-text-balance">
{{ctx.Locale.Tr "repo.create_from_template_description_three"}}
</div>
</div>
</a>
<a class="ui card migrate-entry tw-flex tw-items-center" href="{{AppSubUrl}}/repo/create">
{{svg "devstar-favicon" 184 "tw-p-4"}}
<div class="content">
<div class="header tw-text-center">
{{ctx.Locale.Tr "repo.create_from_template_name_four"}}
</div>
<div class="description tw-text-center tw-text-balance">
{{ctx.Locale.Tr "repo.create_from_template_description_four"}}
</div>
</div>
</a>
</div>
</div>
</div>
</div>
{{template "base/footer" .}} {{template "base/footer" .}}