Tcode平台改造升级-控制台登录组件开发及用户工作台页面开发
This commit is contained in:
fmk1023
268
src/views/Jyh/Dashboard/setting.vue
Normal file
268
src/views/Jyh/Dashboard/setting.vue
Normal file
@@ -0,0 +1,268 @@
|
||||
<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">您的代码库、提示、编辑和其他使用数据将被 Cursor 存储和训练，以改进产品。</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: #121212;
|
||||
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>
|
||||
Reference in New Issue
Block a user