cw_web/src/views/standardProtocol/components/rtsp/index.vue

<template>
  <div class="rtsp-container">
    <div class="settings-section">
      <!-- Title -->
      <div class="section-header">
        <h3>RTSP Stream Media Access Configuration</h3>
      </div>

      <!-- Status and IP Information -->
      <div class="info-section">
        <div class="info-item">
          <div class="label-with-tooltip">
            <label>Password Verification Status</label>
            <span class="info-icon" title="This feature can be configured in System Settings > Password Management">
              ?
            </span>
          </div>
          <span class="status-badge" :class="{ enabled: passwordVerificationEnabled }">
            {{ passwordVerificationEnabled ? 'Enabled' : 'Disabled' }}
          </span>
        </div>
        <div class="info-item">
          <label>Camera IP Address</label>
          <span class="ip-address">{{ cameraIp }}</span>
        </div>
      </div>

      <!-- Access Examples -->
      <div class="examples-section">
        <h4>Access URL Examples</h4>

        <!-- No Password Example -->
        <div v-if="!passwordVerificationEnabled" class="example-box">
          <div class="example-title">Without Password Authentication</div>
          <div class="code-block">
            <code>rtsp://{{ cameraIp }}:554/video1</code>
            <el-button type="primary" @click="copyToClipboard(`rtsp://${cameraIp}:554/video1`)">
              Copy
            </el-button>
          </div>
          <div class="tip-text">
            Replace the IP address with your actual camera address. Ensure access from the same local network.
          </div>
        </div>

        <!-- Password Example -->
        <div v-else class="example-box password-example">
          <div class="example-title">With Password Authentication (Web Admin Credentials Required)</div>
          <div class="code-block">
            <code>rtsp://username:password@{{ cameraIp }}:554/video1</code>
            <el-button type="primary" @click="copyExample()">
              Copy
            </el-button>
          </div>
          <div class="tip-text warning">
            ⚠️ Replace <strong>username</strong> and <strong>password</strong> with your Web admin interface credentials.<br>
            Example: <code>rtsp://admin:password123@192.168.0.105:554/video1</code>
          </div>
        </div>
      </div>
    </div>

    <!-- Copy Success Toast -->
    <Transition name="toast">
      <div v-if="showCopyToast" class="toast">
        ✓ Copied to clipboard
      </div>
    </Transition>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import {getUserSettingApi} from '@/api/setting'
import {getRtspPasswordApi} from '@/api/userManagement'

const passwordVerificationEnabled = ref(false)
const cameraIp = ref('localhost')
const showCopyToast = ref(false)
const NIC = 1

// 获取本机的IP地址
async function getIpAddress() {
  const response = await getUserSettingApi(NIC)
  if (response.data) {
    cameraIp.value = response.data.ipAddress
  }
}
// 获取rtsp password校验的状态
async function getRtspPasswordStatus() {
  const response = await getRtspPasswordApi()
  if (response.data) {
    passwordVerificationEnabled.value = !!response.data.RtspPwdEn
  }
}

onMounted(async () => {
  await getIpAddress()
  await getRtspPasswordStatus()
})

// Copy to clipboard
const copyToClipboard = async (text: string) => {
  try {
    await navigator.clipboard.writeText(text)
    showToast()
  } catch (error) {
    console.error('Failed to copy:', error)
  }
}

const copyExample = () => {
  const exampleText = `rtsp://username:password@${cameraIp.value}:554/video1`
  copyToClipboard(exampleText)
}

// Show toast notification
const showToast = () => {
  showCopyToast.value = true
  setTimeout(() => {
    showCopyToast.value = false
  }, 2000)
}
</script>

<style lang="scss" scoped>
.rtsp-container {
  max-width: 800px;

  .settings-section {
    background: #ffffff;
    border-radius: 8px;
    padding: 24px;
    border: 1px solid #e0e0e0;

    .section-header {
      margin-bottom: 24px;
      padding-bottom: 12px;
      border-bottom: 1px solid #f0f0f0;

      h3 {
        font-size: 18px;
        font-weight: 600;
        color: #1f2937;
        margin: 0;
        letter-spacing: -0.3px;
      }
    }
  }
}

// Info Section
.info-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 28px;

  @media (max-width: 600px) {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .info-item {
    display: flex;
    flex-direction: column;
    gap: 8px;

    .label-with-tooltip {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    label {
      font-size: 12px;
      color: #6b7280;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      font-weight: 600;
    }

    .info-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #dbeafe;
      color: #1e40af;
      font-size: 12px;
      font-weight: 700;
      cursor: help;
      transition: all 0.3s ease;
      position: relative;

      &:hover {
        background: #bfdbfe;
        transform: scale(1.1);

        &::after {
          content: attr(title);
          position: absolute;
          bottom: 130%;
          left: 50%;
          transform: translateX(-50%);
          background: #1f2937;
          color: white;
          padding: 8px 12px;
          border-radius: 6px;
          font-size: 12px;
          font-weight: 400;
          white-space: nowrap;
          z-index: 1000;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
          text-transform: none;
          letter-spacing: normal;
        }

        &::before {
          content: '';
          position: absolute;
          bottom: 120%;
          left: 50%;
          transform: translateX(-50%);
          border: 6px solid transparent;
          border-top-color: #1f2937;
          z-index: 1000;
        }
      }
    }

    .status-badge {
      padding: 8px 12px;
      border-radius: 4px;
      background: #f3f4f6;
      color: #6b7280;
      font-size: 13px;
      font-weight: 500;
      width: fit-content;
      transition: all 0.3s ease;

      &.enabled {
        background: #dbeafe;
        color: #1e40af;
      }
    }

    .ip-address {
      font-size: 14px;
      color: #1f2937;
      font-family: 'Monaco', 'Courier New', 'Menlo', monospace;
      font-weight: 500;
      letter-spacing: 0.3px;
    }
  }
}

// Examples Section
.examples-section {
  h4 {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 14px 0;
    letter-spacing: -0.2px;
  }

  .example-box {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 18px;
    margin-bottom: 14px;
    transition: all 0.3s ease;

    &:hover {
      background: #ffffff;
      border-color: #d1d5db;
    }

    &.password-example {
      background: #fffbf0;
      border-color: #fed7aa;

      &:hover {
        background: #fffbf0;
        border-color: #fdba74;
      }
    }

    .example-title {
      font-size: 13px;
      font-weight: 600;
      color: #1f2937;
      margin-bottom: 14px;
      letter-spacing: -0.2px;
    }

    .code-block {
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 6px;
      padding: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;

      code {
        font-size: 12px;
        color: #0ea5e9;
        font-family: 'Monaco', 'Courier New', 'Menlo', monospace;
        flex: 1;
        word-break: break-all;
        letter-spacing: 0.2px;
      }

      //.copy-btn {
      //  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
      //  color: white;
      //  border: none;
      //  border-radius: 6px;
      //  padding: 7px 14px;
      //  font-size: 12px;
      //  font-weight: 600;
      //  cursor: pointer;
      //  white-space: nowrap;
      //  flex-shrink: 0;
      //  transition: all 0.3s ease;
      //  box-shadow: 0 2px 4px rgba(6, 182, 212, 0.2);
      //
      //  &:hover {
      //    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
      //    box-shadow: 0 4px 8px rgba(6, 182, 212, 0.3);
      //    transform: translateY(-1px);
      //  }
      //
      //  &:active {
      //    transform: scale(0.98);
      //  }
      //}
    }

    .tip-text {
      font-size: 12px;
      color: #4b5563;
      line-height: 1.7;
      letter-spacing: 0.2px;

      &.warning {
        color: #b45309;
        background: rgba(180, 83, 9, 0.05);
        padding: 12px;
        border-radius: 4px;
        border-left: 3px solid #b45309;

        strong {
          color: #92400e;
          font-weight: 600;
        }

        code {
          background: rgba(180, 83, 9, 0.1);
          padding: 3px 7px;
          border-radius: 3px;
          font-family: 'Monaco', 'Courier New', 'Menlo', monospace;
          font-size: 11px;
          color: #b45309;
        }
      }

      code {
        background: #f0f1f3;
        padding: 3px 7px;
        border-radius: 3px;
        font-family: 'Monaco', 'Courier New', 'Menlo', monospace;
        font-size: 11px;
        color: #0284c7;
      }
    }
  }
}

// Toast Notification
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background-color: rgba(38, 38, 38, 0.95);
  //background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  padding: 12px 20px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  animation: slideInUp 0.3s ease;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.toast-enter-active,
.toast-leave-active {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast-enter-from,
.toast-leave-to {
  opacity: 0;
  transform: translateY(20px);
}
</style>