Initial commit of akmon project

pages/mt/comments.uvue

@@ -0,0 +1,69 @@
+<template>
+  <view :class="['mt-comments', isLargeScreen ? 'large' : 'small']">
+    <text class="mt-title">{{ t('mt.comments.title') }}</text>
+    <scroll-view>
+      <view v-for="comment in comments" :key="comment.id" class="mt-comment-item">
+        <view class="mt-comment-header">
+          <image :src="comment.author_avatar" class="mt-comment-avatar" />
+          <text class="mt-comment-author">{{ comment.author_name }}</text>
+          <text class="mt-comment-date">{{ comment.created_at }}</text>
+        </view>
+        <text class="mt-comment-content">{{ comment.content }}</text>
+        <view class="mt-comment-actions">
+          <button @tap="onLike(comment)">{{ t('mt.comments.like') }}</button>
+          <button @tap="onReply(comment)">{{ t('mt.comments.reply') }}</button>
+        </view>
+      </view>
+    </scroll-view>
+    <view class="mt-comment-input">
+      <input v-model="input" :placeholder="t('mt.comments.input')" @confirm="onSend" />
+      <button @tap="onSend">{{ t('mt.comments.send') }}</button>
+    </view>
+  </view>
+</template>
+<script lang="uts">
+import { ref, onLoad } from 'uni-app'
+import { t } from '@/i18n/mt'
+import { isLargeScreen } from '@/utils/responsive'
+import { getComments, sendComment } from '@/composables/use-comments'
+
+const comments = ref([])
+const input = ref('')
+const targetId = ref('')
+
+onLoad((params) => {
+  if (params.id) {
+    targetId.value = params.id
+    getComments(params.id).then(res => { comments.value = res })
+  }
+})
+
+function onSend() {
+  if (!input.value) return
+  sendComment(targetId.value, input.value).then(res => {
+    comments.value.push(res)
+    input.value = ''
+  })
+}
+function onLike(comment) {
+  // 点赞逻辑
+}
+function onReply(comment) {
+  // 回复逻辑
+}
+</script>
+<style lang="scss">
+.mt-comments {
+  padding: 24rpx;
+  &.large { max-width: 900rpx; margin: 0 auto; }
+  .mt-title { font-size: 40rpx; font-weight: bold; margin-bottom: 24rpx; }
+  .mt-comment-item { border-bottom: 1px solid #eee; padding: 16rpx 0; }
+  .mt-comment-header { display: flex; align-items: center; gap: 12rpx; margin-bottom: 8rpx; }
+  .mt-comment-avatar { width: 48rpx; height: 48rpx; border-radius: 50%; }
+  .mt-comment-author { font-weight: 500; margin-right: 8rpx; }
+  .mt-comment-date { color: #aaa; font-size: 22rpx; }
+  .mt-comment-content { margin-bottom: 8rpx; }
+  .mt-comment-actions { display: flex; gap: 16rpx; }
+  .mt-comment-input { display: flex; gap: 12rpx; padding: 16rpx; border-top: 1px solid #eee; }
+}
+</style>