feat(web/user): username color (#24)

Co-authored-by: Wenkuo Yu <82705676+youwike@users.noreply.github.com>
Co-authored-by: Baoshuo Ren <47095648+renbaoshuo@users.noreply.github.com>

web/app/controllers/super_manage.php

@@ -1336,7 +1336,7 @@ EOD);
 								EOD,
 								function ($row) {
 									echo '<tr>';
-									echo '<td>', '<span class="uoj-username" data-realname="', HTML::escape($row['realname']), '">', $row['username'], '</span>', '</td>';
+									echo '<td>', UOJUser::getLink($row), '</td>';
 									echo '<td>', HTML::escape($row['school']), '</td>';
 									echo '<td>';
 									switch ($row['usergroup']) {

web/app/controllers/user_info_edit.php

@@ -233,6 +233,36 @@ EOD);
 		},
 		null
 	);
+	if ($user['usergroup'] == 'B') {
+		$update_profile_form->appendHTML(<<<EOD
+			<div class="mb-3">
+				<label for="input-username_color" class="form-label">用户名颜色</label>
+				<input type="text" class="form-control" id="input-username_color" aria-describedby="help-username_color" value="棕色 - #996600" disabled>
+				<div id="help-username_color" class="form-text">被封禁的用户无法修改用户名颜色。</div>
+			</div>
+		EOD);
+	} else if ($user['usergroup'] == 'T') {
+		$update_profile_form->appendHTML(<<<EOD
+			<div class="mb-3">
+				<label for="input-username_color" class="form-label">用户名颜色</label>
+				<input type="text" class="form-control" id="input-username_color" aria-describedby="help-username_color" value="灰色 - #707070" disabled>
+				<div id="help-username_color" class="form-text">临时用户无法修改用户名颜色。</div>
+			</div>
+		EOD);
+	} else {
+		$additional_colors = [];
+
+		if (isSuperUser($user)) {
+			$additional_colors['#9d3dcf'] = '紫色 - #9d3dcf';
+			$additional_colors['#fe4c61'] = '红色 - #fe4c61';
+		}
+
+		$update_profile_form->addVSelect('username_color', $additional_colors + [
+			'#0d6efd' => '蓝色 - #0d6efd',
+			'#2da44e' => '绿色 - #2da44e',
+			'#f48fb1' => '粉色 - #f48fb1',
+		], '用户名颜色', '#0d6efd');
+	}
 	$update_profile_form->handle = function (&$vdata) use ($user) {
 		$data = [
 			'email' => $vdata['email'],
@@ -268,7 +298,9 @@ EOD);
 					'$.social.codeforces',
 					$vdata['codeforces'],
 					'$.social.website',
-					$vdata['website']
+					$vdata['website'],
+					'$.username_color',
+					$_POST['username_color']
 				),
 			],
 			"where", ["username" => $user['username']]

web/app/models/UOJUser.php

@@ -221,14 +221,37 @@ class UOJUser {
 			}
 		}
 
-		if ($user['usergroup'] == 'B') {
-			return HTML::tag('a', ['class' => 'text-danger fw-bold', 'href' => "/user/{$user['username']}"], $user['username']);
+		$extra = UOJUser::getExtra($user);
+		$realname = $user['realname'];
+		$color = '#0d6efd';
+
+		if ($user['usergroup'] === 'B') {
+			$color = '#996600';
+		} else if (isTmpUser($user)) {
+			$color = '#707070';
+		} else {
+			if (isSuperUser($user)) {
+				$color = '#9d3dcf';
+			}
+
+			$color = $extra['username_color'];
+
+			// 前管理员设置颜色为紫色、红色的，颜色改为蓝色
+			if (($color === '#9d3dcf' || $color === '#fe4c61') && !isSuperUser($user)) {
+				$color = '#0d6efd';
+			}
 		}
 
-		// 未登录不可查看真实姓名
-		$realname =  Auth::check() ? $user['realname'] : '';
+		if ($user['usertype'] == 'teacher') {
+			$realname .= '老师';
+		}
 
-		return HTML::tag('span', ['class' => 'uoj-username', 'data-realname' => trim(HTML::escape($realname))], $user['username']);
+		return HTML::tag('span', [
+			'class' => 'uoj-username',
+			// 未登录不可查看真实姓名
+			'data-realname' => Auth::check() ? trim(HTML::escape($realname)) : '',
+			'data-color' => $color,
+		], $user['username']);
 	}
 
 	public static function getUpdatedExtraVisitHistory($history, $cur) {
@@ -290,6 +313,7 @@ class UOJUser {
 			'show_email' => 'all',
 			'show_qq' => 'all',
 			'avatar_source' => 'gravatar',
+			'username_color' => isSuperUser($user) ? '#9d3dcf' : '#0d6efd',
 		]);
 		return $extra;
 	}

web/css/uoj-bs5.css

@@ -25,6 +25,11 @@ a {
 		'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 }
 
+.uoj-realname {
+	font-size: 90%;
+	font-weight: normal;
+}
+
 h1,
 .h1 {
 	/* font-size: 2.5rem; */
@@ -164,7 +169,7 @@ h6,
 
 .card-uoj-tle > .card-header:hover,
 .card-uoj-tle > div.card-header > div > .uoj-status-text {
-	color: sandybrown;
+	color: #f4a460;
 }
 
 .card-uoj-wrong > .card-header:hover,

web/js/uoj.js

@@ -148,11 +148,16 @@ function getUserSpan(username, realname) {
 function replaceWithHighlightUsername() {
 	var username = $(this).text();
 	var realname = $(this).data("realname");
+	var color = $(this).data("color");
+	var new_elem_inner = '';
+
 	if ($(this).data("link") != 0) {
-		$(this).replaceWith(getUserLink(username, realname));
+		new_elem_inner = getUserLink(username, realname);
 	} else {
-		$(this).replaceWith(getUserSpan(username, realname));
+		new_elem_inner = getUserSpan(username, realname);
 	}
+
+	$(this).replaceWith($(new_elem_inner).css('color', color));
 }
 
 $.fn.uoj_honor = function() {