Tcode平台改造升级-设置相关配置完成

2025-12-10 16:11:05 +08:00
parent a630f40b76
commit 7924714d0e
3 changed files with 344 additions and 13 deletions
--- a/src/views/Jyh/Dashboard/index.vue
+++ b/src/views/Jyh/Dashboard/index.vue
@@ -105,7 +105,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue';
 import OverView from './overview/index.vue';
-import Setting from './setting.vue';
+import Setting from './setting/index.vue';
 import Integration from './Integration.vue';
 import Proxy from './proxy.vue';
 import Usage from './usage.vue';
--- a/src/views/Jyh/Dashboard/setting/PrivacySettingsModal.vue
+++ b/src/views/Jyh/Dashboard/setting/PrivacySettingsModal.vue
@@ -0,0 +1,241 @@
+<template>
+  <d-modal
+    :modelValue="visible"
+    title="隐私设置"
+    :close-on-click-overlay="true"
+    :show-close="true"
+    @close="$emit('update:visible', false)"
+    class="TeamSetupModal"
+  >
+    <p class="modal-subtitle">
+      选择 Cursor 如何存储和使用数据。您可以随时修改此设置。<a href="#" class="learn-more-link">了解更多</a>
+    </p>
+    <div class="modal-body">
+
+      <div class="setting-option" :class="{ 'is-selected': selectedMode === 'private' }" @click="selectedMode = 'private'">
+        <div class="option-content">
+          <div class="option-header">
+            <span class="mode-title">隐私模式</span>
+          </div>
+          <p class="mode-description">无需训练。代码可能存储用于云代理、团队规则和其他功能。</p>
+        </div>
+        <div class="radio-indicator">
+          <div class="custom-radio" :class="{ 'is-checked': selectedMode === 'private' }">
+            <svg v-if="selectedMode === 'private'" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+              <polyline points="20 6 9 17 4 12"></polyline>
+            </svg>
+          </div>
+        </div>
+      </div>
+
+      <div class="setting-option" :class="{ 'is-selected': selectedMode === 'shared' }" @click="selectedMode = 'shared'">
+        <div class="option-content">
+          <div class="option-tag">1小时后激活</div>
+          <p class="mode-description">代码数据共享旨在帮助所有人改进 Cursor。</p>
+        </div>
+        <div class="radio-indicator">
+          <div class="custom-radio" :class="{ 'is-checked': selectedMode === 'shared' }">
+            <svg v-if="selectedMode === 'shared'" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+              <polyline points="20 6 9 17 4 12"></polyline>
+            </svg>
+          </div>
+        </div>
+      </div>
+
+      <div class="toggle-more" @click="showMore = !showMore">
+        <span>{{ showMore ? '收起选项' : '更多选项' }}</span>
+        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="{ transform: showMore ? 'rotate(180deg)' : 'rotate(0deg)' }">
+          <polyline points="6 9 12 15 18 9"></polyline>
+        </svg>
+      </div>
+
+      <div v-if="showMore" class="setting-option more-option" :class="{ 'is-selected': selectedMode === 'legacy' }" @click="selectedMode = 'legacy'">
+        <div class="option-content">
+          <div class="option-header">
+            <span class="mode-title">隐私模式 (传统版)</span>
+          </div>
+          <p class="mode-description">不提供训练或存储。禁用云代理和其他需要代码存储的功能。</p>
+        </div>
+        <div class="radio-indicator">
+          <div class="custom-radio" :class="{ 'is-checked': selectedMode === 'legacy' }">
+            <svg v-if="selectedMode === 'legacy'" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+              <polyline points="20 6 9 17 4 12"></polyline>
+            </svg>
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+    <template #footer>
+      <div class="modal-footer-actions">
+        <d-button class="finish-btn" @click="handleFinish">完成</d-button>
+      </div>
+    </template>
+  </d-modal>
+</template>
+
+<script setup lang="ts">
+import { ref,defineProps,defineEmits } from 'vue';
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['update:visible', 'mode-selected']);
+
+const selectedMode = ref('shared');
+const showMore = ref(false);
+
+const handleFinish = () => {
+  emit('mode-selected', selectedMode.value);
+  emit('update:visible', false);
+};
+</script>
+
+<style lang="scss" scoped>
+.modal-custom-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 10px;
+  margin-left: 16px;
+}
+.modal-title {
+  font-size: 24px;
+  font-weight: 700;
+  color: #fff;
+}
+.modal-subtitle {
+  font-size: 14px;
+  color: #aaa;
+  line-height: 1.5;
+  margin-bottom: 20px;
+}
+.learn-more-link {
+  color: #58a6ff; /* 蓝色链接 */
+  text-decoration: none;
+}
+
+/* ------------------- 选项卡样式 ------------------- */
+.setting-option {
+  background-color: #1a1a1a; /* 保持背景一致 */
+  border: 1px solid #333;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 12px;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  transition: border-color 0.2s, background-color 0.2s;
+}
+
+.setting-option.is-selected {
+  border-color: #58a6ff; /* 选中时边框变蓝 */
+  background-color: #252525; /* 选中时背景略深 */
+}
+.setting-option.more-option {
+  margin-top: 12px;
+}
+
+.option-content {
+  flex-grow: 1;
+  padding-right: 15px;
+}
+
+.option-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 4px;
+}
+
+.mode-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #fff;
+}
+
+.mode-description {
+  font-size: 13px;
+  color: #aaa;
+  line-height: 1.4;
+}
+
+.option-tag {
+  display: inline-block;
+  background-color: #333;
+  color: #fff;
+  font-size: 11px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  margin-bottom: 8px; /* 标签在描述之上 */
+}
+
+.radio-indicator {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.custom-radio {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 2px solid #555;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: border-color 0.2s;
+}
+
+.custom-radio.is-checked {
+  border-color: #58a6ff; /* 选中时外圈变蓝 */
+  background-color: #58a6ff; /* 填充蓝色 */
+}
+
+.custom-radio.is-checked svg {
+  color: #fff; /* 勾选图标为白色 */
+}
+
+.toggle-more {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  font-size: 14px;
+  color: #58a6ff;
+  cursor: pointer;
+  margin-top: 20px;
+  margin-bottom: 12px;
+  padding: 5px 0;
+}
+.toggle-more span {
+  margin-right: 5px;
+}
+.toggle-more svg {
+  transition: transform 0.3s;
+}
+
+.modal-footer-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-right: 24px;
+  margin-bottom: 24px;
+}
+
+.finish-btn {
+  background-color: #fff !important;
+  color: #000 !important;
+  border: none !important;
+  padding: 8px 20px;
+  font-size: 14px;
+  font-weight: 600;
+  border-radius: 6px;
+}
+</style>
--- a/src/views/Jyh/Dashboard/setting/index.vue
+++ b/src/views/Jyh/Dashboard/setting/index.vue
@@ -15,9 +15,11 @@
            </div>
            <p class="item-description">您的代码库、提示、编辑和其他使用数据将被 金银湖大模型 存储和训练，以改进产品。</p>
          </div>
-          <d-button class="action-btn edit-btn">编辑</d-button>
+          <d-button class="action-btn edit-btn" @click="showPrivacyModal = true">编辑</d-button>
        </div>

+        <PrivacySettingsModal v-model:visible="showPrivacyModal" @mode-selected="handleModeChange"/>
+
        <div class="info-note">
          <span class="highlight-text">首次使用时，数据共享功能将暂停，</span>共享功能将在1小时后激活。<a href="#" class="learn-more">了解更多</a>
        </div>
@@ -50,7 +52,19 @@
              <p class="item-description">创建于 6 天前</p>
            </div>
          </div>
-          <d-button class="action-btn revoke-btn">撤销</d-button>
+
+          <d-popover :visible="revokePopoverVisible" trigger="click" @visible-change="toggleRevokePopover">
+            <d-button class="action-btn revoke-btn">撤销</d-button>
+            <template #content>
+              <div class="popover-content">
+                <p>确定撤销当前会话吗？</p>
+                <footer>
+                  <d-button @click="toggleRevokePopover(false)" size="sm">取消</d-button>
+                  <d-button @click="confirmRevoke" size="sm" variant="solid">确认</d-button>
+                </footer>
+              </div>
+            </template>
+          </d-popover>
        </div>

        <div class="session-note">
@@ -67,7 +81,21 @@
              <span class="item-title">删除账户</span>
            </div>
          </div>
-          <d-button class="action-btn delete-btn">删除</d-button>
+
+          <d-popover :visible="deletePopoverVisible" trigger="click" @visible-change="toggleDeletePopover">
+            <d-button class="action-btn delete-btn">删除</d-button>
+            <template #content>
+              <div class="popover-content delete-popover">
+                <p>
+                  <strong>警告：</strong>删除账户将不可逆转，您确定要继续吗？
+                </p>
+                <footer>
+                  <d-button @click="toggleDeletePopover(false)" size="sm">取消</d-button>
+                  <d-button @click="confirmDelete" size="sm" color="danger" variant="solid">确认删除</d-button>
+                </footer>
+              </div>
+            </template>
+          </d-popover>
        </div>
      </div>

@@ -76,7 +104,42 @@
 </template>

 <script setup lang="ts">
-// 静态页面，无需特殊逻辑
+import {ref} from 'vue';
+import PrivacySettingsModal from './PrivacySettingsModal.vue';
+
+const showPrivacyModal = ref(false);
+
+// Popover 状态
+const revokePopoverVisible = ref(false);
+const deletePopoverVisible = ref(false);
+
+const handleModeChange = (newMode: string) => {
+  console.log("新的隐私模式已选择:", newMode);
+  // 在这里执行更新后端或前端状态的逻辑
+};
+
+// --- 撤销会话逻辑 ---
+const toggleRevokePopover = (visible: boolean) => {
+  revokePopoverVisible.value = visible;
+};
+
+const confirmRevoke = () => {
+  console.log("会话已确认撤销！");
+  // 实际的撤销 API 调用逻辑
+  revokePopoverVisible.value = false;
+};
+
+// --- 删除账户逻辑 ---
+const toggleDeletePopover = (visible: boolean) => {
+  deletePopoverVisible.value = visible;
+};
+
+const confirmDelete = () => {
+  console.log("账户已确认删除！");
+  // 实际的删除账户 API 调用逻辑
+  deletePopoverVisible.value = false;
+};
+
 </script>

 <style lang="scss" scoped>
@@ -92,7 +155,6 @@ $delete-red: #a93b4d;
 .content-area {
  background-color: rgb(20, 18, 11);
  padding: 40px 60px;
-  //overflow-y: auto;
 }


@@ -104,7 +166,6 @@ $delete-red: #a93b4d;
 }

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

@@ -128,7 +189,7 @@ $delete-red: #a93b4d;
  background-color: $bg-primary;
  border-radius: 8px;
  border: 1px solid $border-color;
-  overflow: hidden; /* 确保子元素的圆角生效 */
+  overflow: hidden;
 }

 /* --- 列表项样式 --- */
@@ -185,17 +246,18 @@ $delete-red: #a93b4d;
 }

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

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

  .learn-more {
-    color: #4a90e2; /* 链接蓝色 */
+    color: #4a90e2;
    text-decoration: none;
    margin-left: 4px;
+
    &:hover {
      text-decoration: underline;
    }
@@ -219,6 +281,7 @@ $delete-red: #a93b4d;
    background-color: #333333 !important;
    color: $text-primary !important;
    border: none;
+
    &:hover {
      background-color: #444444 !important;
    }
@@ -229,6 +292,7 @@ $delete-red: #a93b4d;
    background-color: $delete-red !important;
    color: $text-primary !important;
    border: none;
+
    &:hover {
      background-color: darken($delete-red, 5%) !important;
    }
@@ -241,9 +305,8 @@ $delete-red: #a93b4d;
    border: 1px solid #444444 !important;
    cursor: not-allowed;

-    /* 增加原图中的图标，这里使用文本代替 */
    &::before {
-      content: '🗋 '; /* 模拟图标 */
+      content: '🗋 ';
      margin-right: 4px;
      font-size: 16px;
    }
@@ -265,4 +328,31 @@ $delete-red: #a93b4d;
  background-color: #222;
  cursor: pointer;
 }
+
+/* 🚀 Popover 内容样式 */
+.popover-content {
+  padding: 8px 12px;
+  //color: #333; /* Popover 默认是白色背景 */
+  max-width: 200px;
+
+  p {
+    margin: 0 0 10px 0;
+    font-size: 13px;
+    line-height: 1.4;
+  }
+
+  footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    margin-top: 8px;
+  }
+
+  // 适配删除 Popover 的警告文字
+  &.delete-popover {
+    p {
+      color: #CC0000; /* 警告文字红色 */
+    }
+  }
+}
 </style>