- Model/Repo/Service/Controller 全栈实现 - CRUD + ListActive(生效时间范围过滤) - 管理后台独立页面 /admin/announcements(列表+弹窗CRUD) - 前台首页 Hero 下方公告栏(info/success/warning/error 四色) - Moderator+ 权限可管理公告
90 lines
4.3 KiB
HTML
90 lines
4.3 KiB
HTML
{{template "admin/layout/base.html" .}}
|
|
<div class="page-header">
|
|
<h1>公告管理</h1>
|
|
<p class="page-desc">管理前台首页公告栏展示内容</p>
|
|
</div>
|
|
|
|
<div class="toolbar">
|
|
<button class="btn btn-primary" id="btnNewAnnouncement">+ 新建公告</button>
|
|
</div>
|
|
|
|
<table class="data-table" id="announcementTable">
|
|
<thead>
|
|
<tr>
|
|
<th style="width:60px">ID</th>
|
|
<th>标题</th>
|
|
<th style="width:80px">类型</th>
|
|
<th style="width:80px">状态</th>
|
|
<th style="width:140px">生效时间</th>
|
|
<th style="width:60px">排序</th>
|
|
<th style="width:160px">创建时间</th>
|
|
<th style="width:120px">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="announcementList">
|
|
<tr><td colspan="8" class="table-empty">加载中...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="pagination" id="pagination" style="display:none"></div>
|
|
|
|
<!-- 编辑/新建弹窗 -->
|
|
<div class="modal-overlay" id="modalOverlay">
|
|
<div class="modal">
|
|
<div class="modal-header">
|
|
<h3 id="modalTitle">新建公告</h3>
|
|
<button class="modal-close" id="modalClose">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="announcementForm">
|
|
<input type="hidden" id="announcementId">
|
|
<div class="form-group">
|
|
<label for="announcementTitle">标题</label>
|
|
<input type="text" id="announcementTitle" class="form-input" maxlength="200" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="announcementContent">内容</label>
|
|
<textarea id="announcementContent" class="form-textarea" rows="3" required></textarea>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="announcementType">类型</label>
|
|
<select id="announcementType" class="form-select">
|
|
{{range $k, $v := .Types}}
|
|
<option value="{{$k}}">{{$v.Label}}</option>
|
|
{{end}}
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="announcementSort">排序(越小越前)</label>
|
|
<input type="number" id="announcementSort" class="form-input" value="0" min="0" style="width:100px">
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="announcementStartAt">生效开始(可选)</label>
|
|
<input type="datetime-local" id="announcementStartAt" class="form-input">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="announcementEndAt">生效结束(可选)</label>
|
|
<input type="datetime-local" id="announcementEndAt" class="form-input">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="announcementIsActive" checked>
|
|
启用
|
|
</label>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-secondary" id="modalCancel">取消</button>
|
|
<button class="btn btn-primary" id="modalSave">保存</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="toast" id="toast"></div>
|
|
{{template "admin/layout/footer.html" .}}
|