Doni/ZhangQiPro
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

"更新UI组件和样式：优化雷达图、按钮、对话框等组件，改进仪表板和评估页面"

Browse Source
This commit is contained in:
sladro 2025-09-15 16:38:15 +08:00
parent ce76c1a37a
commit aa8f3184ca
11 changed files with 91 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/assets/styles/variables.css
View File

@ -102,6 +102,37 @@
--glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
--glass-blur: blur(10px);
/* 透明度级别 */
--opacity-lighter: 0.02;
--opacity-light: 0.05;
--opacity-medium: 0.1;
--opacity-heavy: 0.2;
--opacity-strong: 0.3;
/* 主题色透明度变体 */
--primary-alpha-lighter: rgba(30, 58, 138, var(--opacity-lighter));
--primary-alpha-light: rgba(30, 58, 138, var(--opacity-light));
--primary-alpha-medium: rgba(30, 58, 138, var(--opacity-medium));
--primary-alpha-heavy: rgba(30, 58, 138, var(--opacity-heavy));
--primary-alpha-strong: rgba(30, 58, 138, var(--opacity-strong));
--success-alpha-light: rgba(16, 185, 129, var(--opacity-light));
--success-alpha-medium: rgba(16, 185, 129, var(--opacity-medium));
--success-alpha-heavy: rgba(16, 185, 129, var(--opacity-heavy));
--danger-alpha-light: rgba(239, 68, 68, var(--opacity-light));
--danger-alpha-heavy: rgba(239, 68, 68, var(--opacity-heavy));
--secondary-alpha-heavy: rgba(6, 182, 212, var(--opacity-heavy));
--white-alpha-high: rgba(255, 255, 255, 0.98);
--white-alpha-medium: rgba(255, 255, 255, 0.9);
--white-alpha-light: rgba(255, 255, 255, 0.6);
--white-alpha-lighter: rgba(255, 255, 255, 0.1);
--black-alpha-light: rgba(0, 0, 0, 0.08);
--black-alpha-medium: rgba(0, 0, 0, 0.15);
/* 动画 */
--transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

12
src/components/AbilityRadarChart.vue
View File

@ -107,11 +107,11 @@ export default {
splitArea: {
areaStyle: {
color: [
'rgba(59, 130, 246, 0.02)',
'rgba(59, 130, 246, 0.04)',
'rgba(59, 130, 246, 0.06)',
'rgba(59, 130, 246, 0.08)',
'rgba(59, 130, 246, 0.1)'
getCSSVariable('--primary-alpha-lighter'),
getCSSVariable('--primary-alpha-lighter'),
getCSSVariable('--primary-alpha-light'),
getCSSVariable('--primary-alpha-light'),
getCSSVariable('--primary-alpha-medium')
]
}
},
@ -135,7 +135,7 @@ export default {
symbol: 'circle',
symbolSize: CHART_CONFIG.symbolSize,
areaStyle: {
color: 'rgba(59, 130, 246, 0.1)'
color: getCSSVariable('--primary-alpha-medium')
},
lineStyle: {
color: getCSSVariable('--primary'),

4
src/components/BaseButton.vue
View File

@ -62,7 +62,7 @@ export default {
.btn-gradient {
background: var(--gradient-primary);
border: none;
color: white;
color: var(--text-inverse);
}
.btn-gradient:hover {
@ -78,6 +78,6 @@ export default {
.btn-outline:hover {
background: var(--primary-color);
color: white;
color: var(--text-inverse);
}
</style>

7
src/components/EvaluationDialog.vue
View File

@ -225,6 +225,11 @@ import { ref, reactive, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import FileUpload from './FileUpload.vue'
// 常量配置
const ANIMATION_DELAY = {
MEDIUM: 1000
}
export default {
name: 'EvaluationDialog',
components: {
@ -356,7 +361,7 @@ export default {
submitting.value = true
// 模拟提交延迟
await new Promise(resolve => setTimeout(resolve, 1000))
await new Promise(resolve => setTimeout(resolve, ANIMATION_DELAY.MEDIUM))
// 构造提交数据
const submitData = {

2
src/components/FileUpload.vue
View File

@ -471,7 +471,7 @@ export default {
&.file-error {
border-color: var(--danger);
background: rgba(239, 68, 68, 0.05);
background: var(--danger-alpha-light);
}
}

10
src/components/GradeDistributionChart.vue
View File

@ -353,7 +353,7 @@ export default {
}
.summary-item:hover {
background: rgba(59, 130, 246, 0.05);
background: var(--primary-alpha-light);
transform: translateY(-2px);
}
@ -390,17 +390,17 @@ export default {
}
.grade-a-minus {
background: rgba(16, 185, 129, 0.2);
background: var(--success-alpha-heavy);
color: var(--success);
}
.grade-b-plus {
background: rgba(59, 130, 246, 0.2);
background: var(--primary-alpha-heavy);
color: var(--primary);
}
.grade-b {
background: rgba(6, 182, 212, 0.2);
background: var(--secondary-alpha-heavy);
color: var(--secondary);
}
@ -411,7 +411,7 @@ export default {
.grade-c-plus,
.grade-c {
background: rgba(239, 68, 68, 0.2);
background: var(--danger-alpha-heavy);
color: var(--danger);
}

28
src/components/SubmissionDialog.vue
View File

@ -101,7 +101,7 @@
<div class="upload-section">
<div class="upload-tips">
<el-icon><InfoFilled /></el-icon>
<span>支持上传项目相关文档、截图、代码文件等，单个文件不超过10MB</span>
<span>支持上传项目相关文档、截图、代码文件等，单个文件不超过${FILE_SIZE_LIMIT}</span>
</div>
<FileUpload
@upload="handleFileUpload"
@ -190,6 +190,20 @@ import { ElMessage } from 'element-plus'
import { InfoFilled, Link } from '@element-plus/icons-vue'
import FileUpload from './FileUpload.vue'
// 常量配置
const FILE_SIZE_LIMIT = '10MB'
const FORM_VALIDATION = {
PROJECT_NAME: { min: 2, max: 100 },
PROJECT_DESC: { min: 10, max: 800 },
CONTRIBUTION: { min: 10, max: 600 },
REFLECTION: { min: 10, max: 600 },
IMPROVEMENTS: { min: 10, max: 600 }
}
const ANIMATION_DELAY = {
SHORT: 500,
LONG: 1500
}
export default {
name: 'SubmissionDialog',
components: {
@ -245,19 +259,19 @@ export default {
const rules = reactive({
projectName: [
{ required: true, message: '请输入项目名称', trigger: 'blur' },
{ min: 2, max: 100, message: '项目名称长度在2-100个字符', trigger: 'blur' }
{ min: FORM_VALIDATION.PROJECT_NAME.min, max: FORM_VALIDATION.PROJECT_NAME.max, message: `项目名称长度在${FORM_VALIDATION.PROJECT_NAME.min}-${FORM_VALIDATION.PROJECT_NAME.max}个字符`, trigger: 'blur' }
],
projectDescription: [
{ required: true, message: '请输入项目描述', trigger: 'blur' },
{ min: 10, max: 800, message: '项目描述长度在10-800个字符', trigger: 'blur' }
{ min: FORM_VALIDATION.PROJECT_DESC.min, max: FORM_VALIDATION.PROJECT_DESC.max, message: `项目描述长度在${FORM_VALIDATION.PROJECT_DESC.min}-${FORM_VALIDATION.PROJECT_DESC.max}个字符`, trigger: 'blur' }
],
contributions: [
{ required: true, message: '请描述主要贡献', trigger: 'blur' },
{ min: 10, max: 600, message: '贡献描述长度在10-600个字符', trigger: 'blur' }
{ min: FORM_VALIDATION.CONTRIBUTION.min, max: FORM_VALIDATION.CONTRIBUTION.max, message: `贡献描述长度在${FORM_VALIDATION.CONTRIBUTION.min}-${FORM_VALIDATION.CONTRIBUTION.max}个字符`, trigger: 'blur' }
],
learnings: [
{ required: true, message: '请分享收获与感悟', trigger: 'blur' },
{ min: 10, max: 600, message: '收获感悟长度在10-600个字符', trigger: 'blur' }
{ min: FORM_VALIDATION.REFLECTION.min, max: FORM_VALIDATION.REFLECTION.max, message: `收获感悟长度在${FORM_VALIDATION.REFLECTION.min}-${FORM_VALIDATION.REFLECTION.max}个字符`, trigger: 'blur' }
],
'selfRating.completion': [
{ required: true, message: '请为完成度评分', trigger: 'change' }
@ -338,7 +352,7 @@ export default {
localStorage.setItem(draftKey, JSON.stringify(draftData))
// 模拟保存延迟
await new Promise(resolve => setTimeout(resolve, 500))
await new Promise(resolve => setTimeout(resolve, ANIMATION_DELAY.SHORT))
ElMessage.success('草稿保存成功')
} catch (error) {
@ -380,7 +394,7 @@ export default {
}
// 模拟提交延迟
await new Promise(resolve => setTimeout(resolve, 1500))
await new Promise(resolve => setTimeout(resolve, ANIMATION_DELAY.LONG))
emit('submit', submitData)

24
src/views/Dashboard.vue
View File

@ -279,7 +279,7 @@ export default {
}
.top-bar {
background: rgba(255, 255, 255, 0.98);
background: var(--white-alpha-high);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border);
padding: var(--spacing-lg) calc(var(--spacing-xxl) * 1.2);
@ -410,17 +410,17 @@ export default {
font-weight: 600;
padding: 2px 6px;
border-radius: var(--radius-sm);
background: rgba(16, 185, 129, 0.1);
background: var(--success-alpha-medium);
color: var(--success);
}
.stat-trend.up {
background: rgba(16, 185, 129, 0.1);
background: var(--success-alpha-medium);
color: var(--success);
}
.stat-trend.down {
background: rgba(239, 68, 68, 0.1);
background: var(--danger-alpha-medium);
color: var(--danger);
}
@ -438,7 +438,7 @@ export default {
.stat-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
box-shadow: 0 20px 60px var(--black-alpha-medium);
}
.stat-icon {
@ -448,7 +448,7 @@ export default {
display: flex;
align-items: center;
justify-content: center;
color: white;
color: var(--text-inverse);
}
.stat-icon.primary {
@ -582,7 +582,7 @@ export default {
.action-btn.primary {
background: var(--gradient-primary);
color: white;
color: var(--text-inverse);
border: none;
}
@ -647,13 +647,13 @@ export default {
.module-card.coming-soon {
opacity: 0.5;
cursor: not-allowed;
background: linear-gradient(135deg, rgba(243, 244, 246, 0.9) 0%, rgba(229, 231, 235, 0.9) 100%);
background: linear-gradient(135deg, var(--white-alpha-medium) 0%, var(--white-alpha-medium) 100%);
}
.module-card.coming-soon:hover {
transform: none;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
border-color: rgba(226, 232, 240, 0.6);
box-shadow: 0 10px 40px var(--black-alpha-light);
border-color: var(--white-alpha-light);
}
.module-header {
@ -681,7 +681,7 @@ export default {
display: flex;
align-items: center;
justify-content: center;
color: white;
color: var(--text-inverse);
transition: var(--transition-spring);
font-size: 18px;
}
@ -717,7 +717,7 @@ export default {
.module-badge.special {
background: linear-gradient(135deg, var(--secondary-light) 0%, var(--secondary) 100%);
color: white;
color: var(--text-inverse);
}
.module-badge.coming {

2
src/views/Evaluate.vue
View File

@ -506,7 +506,7 @@ export default {
}
.page-header {
background: rgba(255, 255, 255, 0.98);
background: var(--white-alpha-high);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border);
padding: var(--spacing-lg) calc(var(--spacing-xxl) * 1.2);

8
src/views/Login.vue
View File

@ -243,7 +243,7 @@ export default {
.logo {
width: 48px;
height: 48px;
background: rgba(255, 255, 255, 0.1);
background: var(--white-alpha-lighter);
border-radius: var(--radius-xl);
display: flex;
align-items: center;
@ -275,16 +275,16 @@ export default {
}
.stat-item {
background: rgba(255, 255, 255, 0.1);
background: var(--white-alpha-lighter);
padding: var(--spacing-lg);
border-radius: var(--radius-lg);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border: 1px solid var(--white-alpha-lighter);
transition: var(--transition);
}
.stat-item:hover {
background: rgba(255, 255, 255, 0.15);
background: var(--white-alpha-lighter);
transform: translateY(-2px);
}

4
src/views/ReportMonitor.vue
View File

@ -255,8 +255,8 @@ export default {
itemStyle: { color: getCSSVariable('--primary') },
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(30, 58, 138, 0.3)' },
{ offset: 1, color: 'rgba(30, 58, 138, 0.05)' }
{ offset: 0, color: getCSSVariable('--primary-alpha-strong') },
{ offset: 1, color: getCSSVariable('--primary-alpha-light') }
])
}
},