Situation-Awareness-Platform-Frontend/src/views/Jyh/Dashboard/setting.vue

<template>
  <d-content class="content-area">
    <div class="settings-container">

      <div class="header">设置</div>

      <div class="section-title">隐私</div>
      <div class="setting-block">

        <div class="setting-item">
          <div class="item-content">
            <div class="item-header">
              <span class="item-title">共享数据</span>
              <span class="status-tag">1小时后激活</span>
            </div>
            <p class="item-description">您的代码库、提示、编辑和其他使用数据将被 金银湖大模型 存储和训练，以改进产品。</p>
          </div>
          <d-button class="action-btn edit-btn">编辑</d-button>
        </div>

        <div class="info-note">
          <span class="highlight-text">首次使用时，数据共享功能将暂停，</span>共享功能将在1小时后激活。<a href="#" class="learn-more">了解更多</a>
        </div>
      </div>

      <div class="section-title">学生验证</div>
      <div class="setting-block">

        <div class="setting-item">
          <div class="item-content">
            <div class="item-header">
              <span class="item-title">学生身份</span>
            </div>
            <p class="item-description">只有 .edu 邮箱和特定教育领域人才可进行学生身份验证。</p>
          </div>
          <d-button class="action-btn disabled-btn" disabled>不符合条件</d-button>
        </div>
      </div>

      <div class="section-title">活跃会话</div>
      <div class="setting-block">

        <div class="setting-item">
          <div class="item-content session-content">
            <div class="custom-checkbox"></div>
            <div>
              <div class="item-header">
                <span class="item-title">网站</span>
              </div>
              <p class="item-description">创建于 6 天前</p>
            </div>
          </div>
          <d-button class="action-btn revoke-btn">撤销</d-button>
        </div>

        <div class="session-note">
          撤销会话可能需要最多 10 分钟才能完成。
        </div>
      </div>

      <div class="section-title">更多的</div>
      <div class="setting-block">

        <div class="setting-item">
          <div class="item-content">
            <div class="item-header">
              <span class="item-title">删除账户</span>
            </div>
          </div>
          <d-button class="action-btn delete-btn">删除</d-button>
        </div>
      </div>

    </div>
  </d-content>
</template>

<script setup lang="ts">
// 静态页面，无需特殊逻辑
</script>

<style lang="scss" scoped>
/* 定义核心暗色变量 */
$bg-primary: #1e1e1e;
$bg-secondary: #141414;
$text-primary: #ffffff;
$text-secondary: #aaaaaa;
$border-color: #333333;
$highlight-orange: #f5a623;
$delete-red: #a93b4d;

.content-area {
  background-color: rgb(20, 18, 11);
  padding: 40px 60px;
  //overflow-y: auto;
}


.settings-page {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: $bg-secondary;
  min-height: 100vh;
  padding: 40px;
}

.settings-container {
  //max-width: 800px;
  margin: 0 auto;
}

/* --- 基础结构样式 --- */
.header {
  font-size: 28px;
  font-weight: 500;
  color: $text-primary;
  margin-bottom: 30px;
}

.section-title {
  font-size: 14px;
  font-weight: 600;
  color: $text-secondary;
  margin-top: 24px;
  margin-bottom: 8px;
}

.setting-block {
  background-color: $bg-primary;
  border-radius: 8px;
  border: 1px solid $border-color;
  overflow: hidden; /* 确保子元素的圆角生效 */
}

/* --- 列表项样式 --- */
.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid $border-color;

  &:last-child {
    border-bottom: none;
  }
}

.item-content {
  flex-grow: 1;
}

.item-header {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.item-title {
  font-size: 16px;
  font-weight: 500;
  color: $text-primary;
  margin-right: 12px;
}

.status-tag {
  background-color: #333333;
  color: $text-secondary;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
}

.item-description {
  font-size: 13px;
  color: $text-secondary;
  margin: 0;
  line-height: 1.5;
}

/* --- 信息和提示样式 --- */
.info-note, .session-note {
  font-size: 13px;
  color: $text-secondary;
  padding: 12px 24px;
  border-top: 1px solid $border-color;
}

.info-note {
  border-top: none; /* 共享数据区域是连续的，原图没有上边框 */
  background-color: darken($bg-primary, 2%); /* 略深的背景 */

  .highlight-text {
    color: $highlight-orange;
  }

  .learn-more {
    color: #4a90e2; /* 链接蓝色 */
    text-decoration: none;
    margin-left: 4px;
    &:hover {
      text-decoration: underline;
    }
  }
}

.session-note {
  border-top: 1px solid $border-color;
}

/* --- 按钮样式 --- */
.action-btn {
  height: 32px;
  padding: 0 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;

  /* 默认按钮 (编辑/撤销) - 灰色背景 */
  &.edit-btn, &.revoke-btn {
    background-color: #333333 !important;
    color: $text-primary !important;
    border: none;
    &:hover {
      background-color: #444444 !important;
    }
  }

  /* 删除按钮 - 红色背景 */
  &.delete-btn {
    background-color: $delete-red !important;
    color: $text-primary !important;
    border: none;
    &:hover {
      background-color: darken($delete-red, 5%) !important;
    }
  }

  /* 不符合条件 (Disabled) */
  &.disabled-btn {
    background-color: #333333 !important;
    color: #666666 !important;
    border: 1px solid #444444 !important;
    cursor: not-allowed;

    /* 增加原图中的图标，这里使用文本代替 */
    &::before {
      content: '🗋 '; /* 模拟图标 */
      margin-right: 4px;
      font-size: 16px;
    }
  }
}

/* --- 活跃会话区域定制 --- */
.session-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.custom-checkbox {
  width: 18px;
  height: 18px;
  border: 1px solid $border-color;
  border-radius: 4px;
  background-color: #222;
  cursor: pointer;
}
</style>