Initial commit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

app/template/base/playComments.html

@@ -0,0 +1,115 @@
+{{define "playComments"}}
+<link rel="stylesheet" href="/static/css/playComments.css">
+{{/* 播放页评论区：首屏 4 条，超出显示「查看更多评论」客户端翻页 */}}
+{{$c := .chapter}}
+{{$pageSize := .commentSize}}
+{{$total := .commentTotal}}
+{{$shown := len .comments}}
+<div
+  class="play-comments"
+  data-play-comments
+  data-comment-page="{{if .commentPage}}{{.commentPage}}{{else}}1{{end}}"
+  data-comment-size="{{if gt $pageSize 0}}{{$pageSize}}{{else}}4{{end}}"
+  data-comment-total="{{$total}}"
+  data-comment-loaded="{{$shown}}"
+>
+  <div class="play-comments__head">
+    <h2 class="play-comments__title">评论</h2>
+    <span class="play-comments__count" data-comment-total-label>{{if gt $total 0}}{{$total}} 条{{else if and $c (gt $c.CountComment 0)}}{{$c.CountComment}} 条{{else if and .video (gt .video.CountComment 0)}}{{.video.CountComment}} 条{{else}}暂无评论{{end}}</span>
+  </div>
+
+  <div
+    class="play-composer"
+    data-play-composer
+    data-object-id="{{.commentObjectID}}"
+    data-object-type="{{.commentObjectType}}"
+    data-logged-in="{{if .isLoggedIn}}1{{else}}0{{end}}"
+  >
+    <div class="play-composer__avatar" aria-hidden="true">
+      {{if .avatar}}
+      <img decoding="async" loading="lazy" class="play-composer__avatar-img lazy" src="/static/images/placeholder.png?v=2" data-src="{{.avatar}}" alt="当前用户头像">
+      {{else}}
+      <img decoding="async" loading="lazy" class="play-composer__avatar-img" src="/static/images/placeholder.png?v=2" data-src="/static/images/profile/avatar.png" alt="默认用户头像">
+      {{end}}
+    </div>
+    <div class="play-composer__field">
+      <input
+        class="play-composer__input"
+        type="text"
+        maxlength="200"
+        placeholder="{{if .isLoggedIn}}说点什么…{{else}}登录后发表评论{{end}}"
+        aria-label="发表评论"
+        data-comment-input
+        {{if not .isLoggedIn}}readonly{{end}}
+      >
+      <span class="play-composer__count" data-comment-count>0 / 200</span>
+    </div>
+    {{if .isLoggedIn}}
+    <button class="btn btn--primary play-composer__send" type="button" data-comment-send>发布</button>
+    {{else}}
+    <button class="btn btn--primary play-composer__login" type="button" data-login-open>登录</button>
+    {{end}}
+  </div>
+
+  <ul class="play-comment-list" data-comment-list>
+    {{range .comments}}
+    <li class="play-comment" data-comment-id="{{.ID}}">
+      {{$avatar := commentAvatar .UserAvatar}}
+      {{if .UserAvatar}}
+          <img decoding="async" loading="lazy" class="play-comment__avatar lazy" src="/static/images/placeholder.png?v=2" data-src="{{$avatar}}" alt="评论用户头像">
+      {{else}}
+          <img decoding="async" loading="lazy" class="play-comment__avatar" src="/static/images/placeholder.png?v=2" data-src="{{$avatar}}" alt="评论用户头像">
+      {{end}}
+      <div class="play-comment__body">
+        <div class="play-comment__meta">
+          <span class="play-comment__name">{{if .UserName}}{{.UserName}}{{else}}匿名用户{{end}}</span>
+          <span class="play-comment__time">{{formatCommentTime .CreatedAt}}</span>
+        </div>
+        <p class="play-comment__text">{{.Text}}</p>
+        {{range .Children}}
+        <div class="play-comment__reply">
+          {{if .UserName}}{{.UserName}}{{else}}用户{{end}}{{if .ReplyUserName}} 回复 {{.ReplyUserName}}{{end}}：{{.Text}}
+        </div>
+        {{end}}
+        <div class="play-comment__actions">
+          <button
+            class="play-comment__action{{if eq .IsLike 1}} is-active{{end}}"
+            type="button"
+            aria-label="点赞"
+            data-comment-like="{{.ID}}"
+            data-liked="{{if eq .IsLike 1}}1{{else}}2{{end}}"
+            data-like-raw="{{.CountLike}}"
+          >
+            <img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/heart.svg" alt="点赞">
+            <span data-like-count>{{.CountLike}}</span>
+          </button>
+          <button
+            class="play-comment__action"
+            type="button"
+            data-comment-reply
+            data-comment-id="{{.ID}}"
+            data-parents-id="{{.ID}}"
+            data-reply-name="{{if .UserName}}{{.UserName}}{{else}}匿名用户{{end}}"
+          >回复</button>
+        </div>
+      </div>
+    </li>
+    {{else}}
+    <li class="play-comment play-comment--empty">
+      <p class="play-comment__text">暂无评论</p>
+    </li>
+    {{end}}
+  </ul>
+
+  <button
+    class="play-comments__more"
+    type="button"
+    data-comment-more
+    {{if le $total $shown}}hidden{{end}}
+  >
+    查看更多评论
+    <img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/chevron-right.svg" alt="前往下一项">
+  </button>
+</div>
+<script defer src="/static/js/pages/playComments.js?v=4"></script>
+{{end}}