|
|
@@ -0,0 +1,619 @@
|
|
|
+<template>
|
|
|
+ <div class="page-container">
|
|
|
+ <div class="page-header">
|
|
|
+ <span class="title">Cloudflare Stream 播放</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 配置区域 -->
|
|
|
+ <div class="config-section">
|
|
|
+ <el-form label-width="120px">
|
|
|
+ <el-form-item label="Video ID">
|
|
|
+ <el-input v-model="cfConfig.videoId" placeholder="Cloudflare Stream Video ID" style="width: 400px" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="自定义域名">
|
|
|
+ <el-input
|
|
|
+ v-model="cfConfig.customerDomain"
|
|
|
+ placeholder="customer-xxx.cloudflarestream.com"
|
|
|
+ style="width: 400px"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="playCloudflare">播放</el-button>
|
|
|
+ <el-button @click="generateCfUrl">生成地址</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="cfGeneratedUrl" label="生成的地址">
|
|
|
+ <el-input :value="cfGeneratedUrl" readonly style="width: 600px">
|
|
|
+ <template #append>
|
|
|
+ <el-button @click="copyUrl(cfGeneratedUrl)">复制</el-button>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 播放器和PTZ控制区域 -->
|
|
|
+ <div class="player-ptz-container">
|
|
|
+ <!-- 播放器区域 -->
|
|
|
+ <div class="player-section">
|
|
|
+ <div v-if="!currentSrc && !currentVideoId" class="player-placeholder">
|
|
|
+ <el-icon :size="60" color="#ddd"><VideoPlay /></el-icon>
|
|
|
+ <p>请输入 Video ID 并点击播放</p>
|
|
|
+ </div>
|
|
|
+ <VideoPlayer
|
|
|
+ v-else
|
|
|
+ ref="playerRef"
|
|
|
+ :player-type="currentPlayerType"
|
|
|
+ :video-id="currentVideoId"
|
|
|
+ :customer-domain="cfConfig.customerDomain"
|
|
|
+ :src="currentSrc"
|
|
|
+ :use-iframe="useIframe"
|
|
|
+ :autoplay="playConfig.autoplay"
|
|
|
+ :muted="playConfig.muted"
|
|
|
+ :controls="true"
|
|
|
+ @play="onPlay"
|
|
|
+ @pause="onPause"
|
|
|
+ @error="onError"
|
|
|
+ @loadedmetadata="onLoaded"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- PTZ 云台控制 -->
|
|
|
+ <div class="ptz-panel">
|
|
|
+ <div class="ptz-header">
|
|
|
+ <span>PTZ 云台控制</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- PTZ 方向控制 九宫格 -->
|
|
|
+ <div class="ptz-controls">
|
|
|
+ <div class="ptz-btn" @mousedown="handlePTZ('UP_LEFT')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
|
|
|
+ <el-icon><TopLeft /></el-icon>
|
|
|
+ </div>
|
|
|
+ <div class="ptz-btn" @mousedown="handlePTZ('UP')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
|
|
|
+ <el-icon><Top /></el-icon>
|
|
|
+ </div>
|
|
|
+ <div class="ptz-btn" @mousedown="handlePTZ('UP_RIGHT')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
|
|
|
+ <el-icon><TopRight /></el-icon>
|
|
|
+ </div>
|
|
|
+ <div class="ptz-btn" @mousedown="handlePTZ('LEFT')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
|
|
|
+ <el-icon><Back /></el-icon>
|
|
|
+ </div>
|
|
|
+ <div class="ptz-btn ptz-center" @click="handlePTZStop">
|
|
|
+ <el-icon><Refresh /></el-icon>
|
|
|
+ </div>
|
|
|
+ <div class="ptz-btn" @mousedown="handlePTZ('RIGHT')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
|
|
|
+ <el-icon><Right /></el-icon>
|
|
|
+ </div>
|
|
|
+ <div class="ptz-btn" @mousedown="handlePTZ('DOWN_LEFT')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
|
|
|
+ <el-icon><BottomLeft /></el-icon>
|
|
|
+ </div>
|
|
|
+ <div class="ptz-btn" @mousedown="handlePTZ('DOWN')" @mouseup="handlePTZStop" @mouseleave="handlePTZStop">
|
|
|
+ <el-icon><Bottom /></el-icon>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="ptz-btn"
|
|
|
+ @mousedown="handlePTZ('DOWN_RIGHT')"
|
|
|
+ @mouseup="handlePTZStop"
|
|
|
+ @mouseleave="handlePTZStop"
|
|
|
+ >
|
|
|
+ <el-icon><BottomRight /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 速度控制 -->
|
|
|
+ <div class="speed-control">
|
|
|
+ <div class="control-label">
|
|
|
+ <span>速度: {{ ptzSpeed }}</span>
|
|
|
+ </div>
|
|
|
+ <el-slider v-model="ptzSpeed" :min="10" :max="100" :step="10" :show-tooltip="true" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 缩放控制 -->
|
|
|
+ <div class="zoom-controls">
|
|
|
+ <div class="zoom-header">
|
|
|
+ <el-icon><ZoomOut /></el-icon>
|
|
|
+ <span>缩放</span>
|
|
|
+ <el-icon><ZoomIn /></el-icon>
|
|
|
+ </div>
|
|
|
+ <el-slider
|
|
|
+ v-model="zoomValue"
|
|
|
+ :min="-100"
|
|
|
+ :max="100"
|
|
|
+ :step="10"
|
|
|
+ :show-tooltip="true"
|
|
|
+ :format-tooltip="formatZoomTooltip"
|
|
|
+ @input="handleZoomChange"
|
|
|
+ @change="handleZoomRelease"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 播放控制 -->
|
|
|
+ <div class="control-section">
|
|
|
+ <el-space wrap>
|
|
|
+ <el-button type="primary" @click="handlePlay">播放</el-button>
|
|
|
+ <el-button @click="handlePause">暂停</el-button>
|
|
|
+ <el-button type="danger" @click="handleStop">停止</el-button>
|
|
|
+ <el-button @click="handleScreenshot">截图</el-button>
|
|
|
+ <el-button @click="handleFullscreen">全屏</el-button>
|
|
|
+
|
|
|
+ <el-divider direction="vertical" />
|
|
|
+
|
|
|
+ <el-switch v-model="playConfig.muted" active-text="静音" inactive-text="有声" />
|
|
|
+ <el-switch v-model="playConfig.autoplay" active-text="自动播放" inactive-text="手动" />
|
|
|
+ </el-space>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 当前状态 -->
|
|
|
+ <!-- <div class="status-section">
|
|
|
+ <el-descriptions title="当前状态" :column="3" border>
|
|
|
+ <el-descriptions-item label="播放器类型">{{ currentPlayerType }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="iframe 模式">{{ useIframe ? '是' : '否' }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="Video ID">{{ currentVideoId || '-' }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="视频地址" :span="3">
|
|
|
+ <el-text truncated style="max-width: 800px">{{ currentSrc || '-' }}</el-text>
|
|
|
+ </el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+ <!-- 日志区域 -->
|
|
|
+ <div class="log-section">
|
|
|
+ <div class="log-header">
|
|
|
+ <h4>事件日志</h4>
|
|
|
+ <el-button size="small" @click="logs = []">清空</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="log-content">
|
|
|
+ <div v-for="(log, index) in logs" :key="index" class="log-item" :class="log.type">
|
|
|
+ <span class="time">{{ log.time }}</span>
|
|
|
+ <span class="message">{{ log.message }}</span>
|
|
|
+ </div>
|
|
|
+ <div v-if="logs.length === 0" class="log-empty">暂无日志</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref, reactive } from 'vue'
|
|
|
+import { ElMessage } from 'element-plus'
|
|
|
+import {
|
|
|
+ VideoPlay,
|
|
|
+ Top,
|
|
|
+ Bottom,
|
|
|
+ Back,
|
|
|
+ Right,
|
|
|
+ TopLeft,
|
|
|
+ TopRight,
|
|
|
+ BottomLeft,
|
|
|
+ BottomRight,
|
|
|
+ Refresh,
|
|
|
+ ZoomIn,
|
|
|
+ ZoomOut
|
|
|
+} from '@element-plus/icons-vue'
|
|
|
+import VideoPlayer from '@/components/VideoPlayer.vue'
|
|
|
+import { startPTZ, stopPTZ, PTZ_DIRECTIONS, startZoom, stopZoom, PTZ_ZOOM_DIRECTIONS } from '@/api/ptz'
|
|
|
+
|
|
|
+const playerRef = ref<InstanceType<typeof VideoPlayer>>()
|
|
|
+
|
|
|
+// Cloudflare Stream 配置
|
|
|
+const cfConfig = reactive({
|
|
|
+ videoId: '3c1ae1949e76f200feef94b8f7d093ca',
|
|
|
+ customerDomain: 'customer-pj89kn2ke2tcuh19.cloudflarestream.com'
|
|
|
+})
|
|
|
+const cfGeneratedUrl = ref('')
|
|
|
+
|
|
|
+// 播放配置
|
|
|
+const playConfig = reactive({
|
|
|
+ autoplay: false,
|
|
|
+ muted: true
|
|
|
+})
|
|
|
+
|
|
|
+// PTZ 配置
|
|
|
+const ptzConfig = reactive({
|
|
|
+ host: '192.168.0.64',
|
|
|
+ username: 'admin',
|
|
|
+ password: 'Wxc767718929'
|
|
|
+})
|
|
|
+
|
|
|
+// PTZ 速度和缩放
|
|
|
+const ptzSpeed = ref(50)
|
|
|
+const zoomValue = ref(0)
|
|
|
+
|
|
|
+// 当前播放状态
|
|
|
+const currentSrc = ref('')
|
|
|
+const currentVideoId = ref('')
|
|
|
+const currentPlayerType = ref<'hls' | 'native' | 'cloudflare'>('hls')
|
|
|
+const useIframe = ref(false)
|
|
|
+
|
|
|
+// 日志
|
|
|
+interface LogItem {
|
|
|
+ time: string
|
|
|
+ type: 'info' | 'success' | 'error'
|
|
|
+ message: string
|
|
|
+}
|
|
|
+const logs = ref<LogItem[]>([])
|
|
|
+
|
|
|
+function addLog(message: string, type: LogItem['type'] = 'info') {
|
|
|
+ const time = new Date().toLocaleTimeString()
|
|
|
+ logs.value.unshift({ time, type, message })
|
|
|
+ if (logs.value.length > 100) {
|
|
|
+ logs.value.pop()
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 播放 Cloudflare Stream
|
|
|
+function playCloudflare() {
|
|
|
+ if (!cfConfig.videoId) {
|
|
|
+ ElMessage.warning('请输入 Video ID')
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ currentVideoId.value = cfConfig.videoId
|
|
|
+ useIframe.value = true
|
|
|
+ currentSrc.value = ''
|
|
|
+ currentPlayerType.value = 'cloudflare'
|
|
|
+
|
|
|
+ addLog(`播放 Cloudflare Stream: ${cfConfig.videoId} (iframe)`, 'success')
|
|
|
+}
|
|
|
+
|
|
|
+// 生成 Cloudflare URL
|
|
|
+function generateCfUrl() {
|
|
|
+ if (!cfConfig.videoId) {
|
|
|
+ ElMessage.warning('请输入 Video ID')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const domain = cfConfig.customerDomain || 'customer-xxx.cloudflarestream.com'
|
|
|
+ cfGeneratedUrl.value = `https://${domain}/${cfConfig.videoId}/iframe`
|
|
|
+}
|
|
|
+
|
|
|
+// 复制 URL
|
|
|
+function copyUrl(url: string) {
|
|
|
+ navigator.clipboard.writeText(url)
|
|
|
+ ElMessage.success('已复制到剪贴板')
|
|
|
+}
|
|
|
+
|
|
|
+// 播放控制
|
|
|
+function handlePlay() {
|
|
|
+ playerRef.value?.play()
|
|
|
+ addLog('播放', 'info')
|
|
|
+}
|
|
|
+
|
|
|
+function handlePause() {
|
|
|
+ playerRef.value?.pause()
|
|
|
+ addLog('暂停', 'info')
|
|
|
+}
|
|
|
+
|
|
|
+function handleStop() {
|
|
|
+ playerRef.value?.stop()
|
|
|
+ addLog('停止', 'info')
|
|
|
+}
|
|
|
+
|
|
|
+function handleScreenshot() {
|
|
|
+ playerRef.value?.screenshot()
|
|
|
+ addLog('截图', 'info')
|
|
|
+}
|
|
|
+
|
|
|
+function handleFullscreen() {
|
|
|
+ playerRef.value?.fullscreen()
|
|
|
+ addLog('全屏', 'info')
|
|
|
+}
|
|
|
+
|
|
|
+// 事件处理
|
|
|
+function onPlay() {
|
|
|
+ addLog('视频开始播放', 'success')
|
|
|
+}
|
|
|
+
|
|
|
+function onPause() {
|
|
|
+ addLog('视频已暂停', 'info')
|
|
|
+}
|
|
|
+
|
|
|
+function onLoaded() {
|
|
|
+ addLog('视频加载完成', 'success')
|
|
|
+}
|
|
|
+
|
|
|
+function onError(error: any) {
|
|
|
+ addLog(`播放错误: ${JSON.stringify(error)}`, 'error')
|
|
|
+}
|
|
|
+
|
|
|
+// PTZ 控制
|
|
|
+async function handlePTZ(direction: keyof typeof PTZ_DIRECTIONS) {
|
|
|
+ if (!ptzConfig.host || !ptzConfig.username || !ptzConfig.password) {
|
|
|
+ ElMessage.warning('请先配置摄像头信息')
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ const result = await startPTZ(
|
|
|
+ {
|
|
|
+ host: ptzConfig.host,
|
|
|
+ username: ptzConfig.username,
|
|
|
+ password: ptzConfig.password
|
|
|
+ },
|
|
|
+ direction,
|
|
|
+ ptzSpeed.value
|
|
|
+ )
|
|
|
+
|
|
|
+ if (result.success) {
|
|
|
+ addLog(`PTZ 移动: ${direction} (速度: ${ptzSpeed.value})`, 'info')
|
|
|
+ } else {
|
|
|
+ addLog(`PTZ 控制失败: ${result.error}`, 'error')
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+async function handlePTZStop() {
|
|
|
+ if (!ptzConfig.host) return
|
|
|
+
|
|
|
+ const result = await stopPTZ({
|
|
|
+ host: ptzConfig.host,
|
|
|
+ username: ptzConfig.username,
|
|
|
+ password: ptzConfig.password
|
|
|
+ })
|
|
|
+
|
|
|
+ if (!result.success) {
|
|
|
+ addLog(`PTZ 停止失败: ${result.error}`, 'error')
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 缩放滑块控制
|
|
|
+function formatZoomTooltip(val: number) {
|
|
|
+ if (val === 0) return '停止'
|
|
|
+ return val > 0 ? `放大 ${val}` : `缩小 ${Math.abs(val)}`
|
|
|
+}
|
|
|
+
|
|
|
+async function handleZoomChange(val: number) {
|
|
|
+ if (!ptzConfig.host || !ptzConfig.username || !ptzConfig.password) return
|
|
|
+
|
|
|
+ if (val === 0) {
|
|
|
+ await stopZoom({
|
|
|
+ host: ptzConfig.host,
|
|
|
+ username: ptzConfig.username,
|
|
|
+ password: ptzConfig.password
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ const direction = val > 0 ? 'IN' : 'OUT'
|
|
|
+ const speed = Math.abs(val)
|
|
|
+
|
|
|
+ await startZoom(
|
|
|
+ {
|
|
|
+ host: ptzConfig.host,
|
|
|
+ username: ptzConfig.username,
|
|
|
+ password: ptzConfig.password
|
|
|
+ },
|
|
|
+ direction,
|
|
|
+ speed
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+async function handleZoomRelease() {
|
|
|
+ // 松开滑块时回到中间并停止
|
|
|
+ zoomValue.value = 0
|
|
|
+ if (!ptzConfig.host) return
|
|
|
+
|
|
|
+ await stopZoom({
|
|
|
+ host: ptzConfig.host,
|
|
|
+ username: ptzConfig.username,
|
|
|
+ password: ptzConfig.password
|
|
|
+ })
|
|
|
+ addLog('缩放停止', 'info')
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.page-container {
|
|
|
+ min-height: 100vh;
|
|
|
+ background-color: var(--bg-page);
|
|
|
+}
|
|
|
+
|
|
|
+.page-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ padding: 15px 20px;
|
|
|
+ background-color: var(--bg-container);
|
|
|
+ border-radius: var(--radius-base);
|
|
|
+ color: var(--text-primary);
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.config-section {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ padding: 20px;
|
|
|
+ background-color: var(--bg-container);
|
|
|
+ border-radius: var(--radius-base);
|
|
|
+}
|
|
|
+
|
|
|
+.player-ptz-container {
|
|
|
+ display: flex;
|
|
|
+ gap: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.player-section {
|
|
|
+ flex: 1;
|
|
|
+ height: 500px;
|
|
|
+ border-radius: var(--radius-base);
|
|
|
+ overflow: hidden;
|
|
|
+ background-color: #000;
|
|
|
+
|
|
|
+ .player-placeholder {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: var(--text-secondary);
|
|
|
+
|
|
|
+ p {
|
|
|
+ margin-top: 15px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.ptz-panel {
|
|
|
+ width: 200px;
|
|
|
+ background-color: var(--bg-container);
|
|
|
+ border-radius: var(--radius-base);
|
|
|
+ padding: 15px;
|
|
|
+
|
|
|
+ .ptz-header {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: var(--text-primary);
|
|
|
+ margin-bottom: 15px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ border-bottom: 1px solid var(--border-color);
|
|
|
+ }
|
|
|
+
|
|
|
+ .ptz-controls {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(3, 1fr);
|
|
|
+ gap: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ptz-btn {
|
|
|
+ aspect-ratio: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background-color: var(--bg-hover);
|
|
|
+ border: 1px solid var(--border-color);
|
|
|
+ border-radius: var(--radius-sm);
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s;
|
|
|
+ color: var(--text-regular);
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background-color: var(--color-primary-light-9);
|
|
|
+ border-color: var(--color-primary);
|
|
|
+ color: var(--color-primary);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ background-color: var(--color-primary);
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-icon {
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .ptz-center {
|
|
|
+ background-color: var(--bg-page);
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background-color: var(--color-primary-light-9);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .speed-control {
|
|
|
+ margin-top: 15px;
|
|
|
+ padding-top: 15px;
|
|
|
+ border-top: 1px solid var(--border-color);
|
|
|
+
|
|
|
+ .control-label {
|
|
|
+ font-size: 12px;
|
|
|
+ color: var(--text-secondary);
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .zoom-controls {
|
|
|
+ margin-top: 15px;
|
|
|
+ padding-top: 15px;
|
|
|
+ border-top: 1px solid var(--border-color);
|
|
|
+
|
|
|
+ .zoom-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 12px;
|
|
|
+ color: var(--text-secondary);
|
|
|
+ margin-bottom: 8px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.control-section {
|
|
|
+ padding: 15px 20px;
|
|
|
+ background-color: var(--bg-container);
|
|
|
+ border-radius: var(--radius-base);
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.status-section {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ padding: 15px 20px;
|
|
|
+ background-color: var(--bg-container);
|
|
|
+ border-radius: var(--radius-base);
|
|
|
+}
|
|
|
+
|
|
|
+.log-section {
|
|
|
+ padding: 15px 20px;
|
|
|
+ background-color: var(--bg-container);
|
|
|
+ border-radius: var(--radius-base);
|
|
|
+
|
|
|
+ .log-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+
|
|
|
+ h4 {
|
|
|
+ font-size: 14px;
|
|
|
+ margin: 0;
|
|
|
+ color: var(--text-primary);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .log-content {
|
|
|
+ max-height: 200px;
|
|
|
+ overflow-y: auto;
|
|
|
+ background-color: var(--bg-hover);
|
|
|
+ border-radius: var(--radius-sm);
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .log-item {
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 4px 0;
|
|
|
+ border-bottom: 1px solid var(--border-color-light);
|
|
|
+ color: var(--text-regular);
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .time {
|
|
|
+ color: var(--text-secondary);
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.success .message {
|
|
|
+ color: var(--color-success);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.error .message {
|
|
|
+ color: var(--color-danger);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .log-empty {
|
|
|
+ text-align: center;
|
|
|
+ color: var(--text-secondary);
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 20px 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
yb
