LingTropy/lingtropy-client/src/renderer/components/DisclaimerComponent.vue

<template>
  <!-- 免责声明弹窗 -->
  <div v-if="showDisclaimer" class="disclaimer-modal">
    <div class="disclaimer-content">
      <h2 class="disclaimer-title">免责声明</h2>
      <div class="disclaimer-text">
        <p>您正在使用本软件，请您仔细阅读以下内容并确认：</p>
        <ol>
          <li
            >根据小红书平台的相关要求，通过反复发布重复、近似交易笔记，或发布大量发布工业化、低质量创作的交易笔记等方式获取流量的行为系违规行为。</li
          >
          <li>本软件充分尊重原创者的著作权等知识产权，仅为用户提供参考素材与灵感。</li>
          <li
            >本软件郑重提醒用户：请各用户遵守知识产权相关规定，秉持“真诚分享”精神，自行对在小红书平台及其他社交媒体平台发布的内容进行判断、负责，不要直接搬运原创作品，严禁用于辅助违规后端操作引流。</li
          >
          <li>对用户违反本声明，所产生的后果，炬梦私域与泠启科技不承担任何责任。</li>
          <li>本软件使用的ai仅供内部测试，严禁生成违背各种法律法规或公序良俗的内容。</li>
        </ol>
        <p>继续使用本工具，即表示您已阅读并同意上述声明。</p>
      </div>
      <div class="disclaimer-actions">
        <label class="disclaimer-checkbox">
          <input type="checkbox" v-model="doNotShowAgain" />
          <span>不再显示</span>
        </label>
        <button @click="acceptDisclaimer" class="disclaimer-button">我已阅读并同意</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
// 免责声明状态
const showDisclaimer = ref(false)
const doNotShowAgain = ref(false)

// 检查是否需要显示免责声明
const checkDisclaimerStatus = async () => {
  try {
    const hideDisclaimer = await window.mainApi.invoke('store-get', 'hideDisclaimer')
    showDisclaimer.value = !hideDisclaimer
    // showDisclaimer.value = true
    // console.log('显示免责声明:', showDisclaimer.value)
  } catch (err) {
    // console.error('获取免责声明状态失败:', err)
    showDisclaimer.value = true // 默认显示
  }
}

// 接受免责声明
const acceptDisclaimer = async () => {
  if (doNotShowAgain.value) {
    try {
      await window.mainApi.invoke('store-set', 'hideDisclaimer', true)
    } catch (err) {
      console.error('保存免责声明偏好失败:', err)
    }
  }
  showDisclaimer.value = false
}

onMounted(() => {
  checkDisclaimerStatus()
})
</script>
<style scoped>
.disclaimer-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 90;
  animation: fadeIn 0.3s ease;
}

.disclaimer-content {
  background-color: white;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 30px;
  position: relative;
}

.disclaimer-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 20px 0;
  color: #2ecc71;
  text-align: center;
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 15px;
}

.disclaimer-text {
  margin-bottom: 25px;
  line-height: 1.6;
  color: #333;
}

.disclaimer-text p {
  margin-bottom: 15px;
}

.disclaimer-text ol {
  padding-left: 20px;
  margin-bottom: 15px;
}

.disclaimer-text li {
  margin-bottom: 10px;
}

.disclaimer-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  border-top: 1px solid #f0f0f0;
  padding-top: 20px;
}

.disclaimer-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.disclaimer-checkbox input {
  width: 18px;
  height: 18px;
}

.disclaimer-button {
  background: linear-gradient(135deg, #2ecc71, #27ae60);
  border: none;
  border-radius: 8px;
  color: white;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 24px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
}

.disclaimer-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(46, 204, 113, 0.4);
}

@media (max-width: 1200px) {
  .disclaimer-content {
    width: 95%;
    padding: 20px;
  }
}

@media (max-width: 768px) {
  .disclaimer-actions {
    flex-direction: column;
    gap: 15px;
  }

  .disclaimer-checkbox {
    margin-bottom: 10px;
  }

  .disclaimer-button {
    width: 100%;
  }
}
@media (max-width: 480px) {
  .disclaimer-content {
    padding: 15px;
  }

  .disclaimer-title {
    font-size: 20px;
  }
}
</style>