shalu-agent-workflow/apps/web/src/views/UserCenter.vue

<template>
	<div class="user-center-container">
		<div class="header">
			<h1>用户中心</h1>
		</div>

		<div class="content">
			<div class="profile-card">
				<div class="avatar-section">
					<div class="avatar">
						<SvgIcon name="user-round" size="60"/>
					</div>
					<el-button type="primary" size="small">更换头像</el-button>
				</div>
				<div class="info-section">
					<h2>个人信息</h2>
					<el-form label-width="100px">
						<el-form-item label="用户名">
							<el-input v-model="userInfo.username" placeholder="请输入用户名" />
						</el-form-item>
						<el-form-item label="邮箱">
							<el-input v-model="userInfo.email" placeholder="请输入邮箱" />
						</el-form-item>
						<el-form-item label="手机号">
							<el-input v-model="userInfo.phone" placeholder="请输入手机号" />
						</el-form-item>
						<el-form-item label="公司">
							<el-input v-model="userInfo.company" placeholder="请输入公司名称" />
						</el-form-item>
						<el-form-item>
							<el-button type="primary">保存修改</el-button>
							<el-button>取消</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>

			<div class="stats-grid">
				<div class="stat-card">
					<div class="stat-icon">
						<SvgIcon name="workflow" size="30" />
					</div>
					<div class="stat-info">
						<div class="stat-value">12</div>
						<div class="stat-label">工作流数量</div>
					</div>
				</div>
				<div class="stat-card">
					<div class="stat-icon">
						<SvgIcon name="play" size="30" />
					</div>
					<div class="stat-info">
						<div class="stat-value">1,234</div>
						<div class="stat-label">执行次数</div>
					</div>
				</div>
				<div class="stat-card">
					<div class="stat-icon">
						<SvgIcon name="clock" size="30" />
					</div>
					<div class="stat-info">
						<div class="stat-value">45</div>
						<div class="stat-label">节省小时</div>
					</div>
				</div>
			</div>

			<div class="security-card">
				<h2>账号安全</h2>
				<div class="security-items">
					<div class="security-item">
						<div class="security-left">
							<SvgIcon name="lock" />
							<div class="security-text">
								<div class="security-title">登录密码</div>
								<div class="security-desc">定期更换密码可以提高账号安全性</div>
							</div>
						</div>
						<el-button size="small">修改</el-button>
					</div>
					<div class="security-item">
						<div class="security-left">
							<SvgIcon name="shield" />
							<div class="security-text">
								<div class="security-title">双因素认证</div>
								<div class="security-desc">未开启</div>
							</div>
						</div>
						<el-button size="small">开启</el-button>
					</div>
					<div class="security-item">
						<div class="security-left">
							<SvgIcon name="smartphone" />
							<div class="security-text">
								<div class="security-title">绑定手机</div>
								<div class="security-desc">131****1111</div>
							</div>
						</div>
						<el-button size="small">更换</el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const userInfo = ref({
	username: 'admin',
	email: 'admin@qq.com',
	phone: '13333333333333',
	company: 'AI Agent'
})
</script>

<style lang="less" scoped>
.user-center-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;

	.header {
		margin-bottom: 32px;

		h1 {
			font-size: 28px;
			font-weight: 600;
			color: #333;
		}
	}

	.content {
		.profile-card {
			background: #fff;
			border-radius: 12px;
			padding: 32px;
			margin-bottom: 24px;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
			display: flex;
			gap: 48px;

			.avatar-section {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 16px;

				.avatar {
					width: 120px;
					height: 120px;
					border-radius: 50%;
					background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					font-size: 60px;
				}
			}

			.info-section {
				flex: 1;

				h2 {
					font-size: 20px;
					font-weight: 600;
					color: #333;
					margin-bottom: 24px;
				}
			}
		}

		.stats-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
			gap: 20px;
			margin-bottom: 24px;

			.stat-card {
				background: #fff;
				border-radius: 12px;
				padding: 24px;
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
				display: flex;
				align-items: center;
				gap: 20px;

				.stat-icon {
					width: 60px;
					height: 60px;
					border-radius: 12px;
					background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					font-size: 28px;
				}

				.stat-info {
					.stat-value {
						font-size: 32px;
						font-weight: 700;
						color: #333;
						line-height: 1;
						margin-bottom: 8px;
					}

					.stat-label {
						font-size: 14px;
						color: #666;
					}
				}
			}
		}

		.security-card {
			background: #fff;
			border-radius: 12px;
			padding: 32px;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

			h2 {
				font-size: 20px;
				font-weight: 600;
				color: #333;
				margin-bottom: 24px;
			}

			.security-items {
				display: flex;
				flex-direction: column;
				gap: 20px;

				.security-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20px;
					background: #f8f9fa;
					border-radius: 8px;

					.security-left {
						display: flex;
						align-items: center;
						gap: 16px;

						svg {
							font-size: 32px;
							color: #667eea;
						}

						.security-text {
							.security-title {
								font-size: 15px;
								font-weight: 500;
								color: #333;
								margin-bottom: 4px;
							}

							.security-desc {
								font-size: 13px;
								color: #666;
							}
						}
					}
				}
			}
		}
	}
}
</style>