refactor(project): Reorganize frontend and backend directories

2026-03-18 10:45:15 +08:00
parent cc9eaf4cdf
commit 92a139e470
513 changed files with 28251 additions and 287 deletions
@@ -0,0 +1,120 @@
+<template>
+  <div class="danmaku-list">
+    <van-tabs v-model:active="activeTab">
+      <van-tab title="弹幕列表" name="list">
+        <van-list
+          v-model:loading="loading"
+          :finished="finished"
+          finished-text="没有更多弹幕了"
+          @load="loadMore"
+        >
+          <div v-for="item in danmakuList" :key="item.id" class="danmaku-item">
+            <div class="danmaku-time">{{ formatDanmakuTime(item.time) }}</div>
+            <div class="danmaku-content" :style="{ color: item.color }">
+              {{ item.content }}
+            </div>
+            <div class="danmaku-user">{{ item.userId }}</div>
+          </div>
+        </van-list>
+      </van-tab>
+      <van-tab title="弹幕设置" name="settings">
+        <van-cell-group inset>
+          <van-cell title="弹幕显示">
+            <van-switch v-model="settings.showDanmaku" />
+          </van-cell>
+          <van-cell title="弹幕透明度">
+            <van-slider v-model="settings.opacity" :min="0" :max="100" />
+          </van-cell>
+          <van-cell title="弹幕大小">
+            <van-slider v-model="settings.fontSize" :min="12" :max="36" />
+          </van-cell>
+          <van-cell title="弹幕速度">
+            <van-slider v-model="settings.speed" :min="1" :max="10" />
+          </van-cell>
+        </van-cell-group>
+      </van-tab>
+    </van-tabs>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { danmakuApi, type Danmaku } from '@/api/danmaku.ts'
+
+const props = defineProps<{
+  videoId: number
+}>()
+
+const activeTab = ref('list')
+const danmakuList = ref<Danmaku[]>([])
+const loading = ref(false)
+const finished = ref(false)
+
+const settings = reactive({
+  showDanmaku: true,
+  opacity: 80,
+  fontSize: 24,
+  speed: 5
+})
+
+const formatDanmakuTime = (seconds: number) => {
+  const mins = Math.floor(seconds / 60)
+  const secs = Math.floor(seconds % 60)
+  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
+}
+
+const loadMore = async () => {
+  if (finished.value) return
+
+  loading.value = true
+  try {
+    const data = await danmakuApi.getAll(props.videoId)
+    danmakuList.value = data
+    finished.value = true
+  } catch (error) {
+    finished.value = true
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  loadMore()
+})
+</script>
+
+<style scoped lang="scss">
+.danmaku-list {
+  background: #fff;
+  padding: 12px;
+
+  .danmaku-item {
+    display: flex;
+    align-items: center;
+    padding: 8px 0;
+    border-bottom: 1px solid #f5f5f5;
+    font-size: 14px;
+
+    .danmaku-time {
+      width: 50px;
+      color: #999;
+      font-size: 12px;
+    }
+
+    .danmaku-content {
+      flex: 1;
+      padding: 0 8px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .danmaku-user {
+      width: 60px;
+      text-align: right;
+      color: #999;
+      font-size: 12px;
+    }
+  }
+}
+</style>