实现个人设置页面(1/3)

views/user/info.php

@@ -0,0 +1,81 @@
+<?php
+/*
+ * 这个页面仿照Windows 11设置中的账户页面设计
+ */
+
+/* @var $this yii\web\View */
+/* @var $model app\models\User */
+
+use app\assets\FontAwesomeAsset;
+use app\utils\IPLocation;
+use yii\bootstrap5\ActiveForm;
+use yii\bootstrap5\Html;
+
+$this->title = '个人设置';
+FontAwesomeAsset::register($this);
+$this->registerCssFile('@web/css/user-info.css');
+$details = IPLocation::getDetails($model->last_login_ip);
+if (is_null($details)) {
+    echo '<script>console.log("IP位置信息获取失败")</script>';
+}
+?>
+
+<div class="user-info">
+
+    <h1><?= Html::encode($this->title) ?></h1>
+
+    <div class="user-profile">
+        <?= $model->getGravatar(email: $model->email, s: 100, img: true, atts: ['alt' => 'User Avatar', 'style' => 'border-radius: 50%']) ?>
+        <div class="user-details">
+            <div class="user-info">
+                <p id="p-username"><?= Html::encode($model->username) ?></p>
+                <p><?= Html::encode($model->email) ?></p>
+                <p>
+                    <?php
+                    if ($model->role == 'user') {
+                        echo '普通用户';
+                    } elseif ($model->role == 'admin') {
+                        echo '管理员';
+                    } else {
+                        echo Html::encode($model->role);
+                    }
+                    ?>
+                </p>
+            </div>
+            <div class="user-login-info">
+                <div class="user-last-login">
+                    <i class="fa-solid fa-clipboard-user"></i>
+                    <div class="login-info-dv">
+                        <p class="user-login-info-title">上次登录时间</p>
+                        <p class="user-login-info-content"><?= Html::encode($model->last_login) ?></p>
+                    </div>
+                </div>
+                <div class="user-last-login-ip">
+                    <i class="fa-solid fa-location-dot"></i>
+                    <div class="login-info-dv">
+                        <p class="user-login-info-title">上次登录IP</p>
+                        <p class="user-login-info-content">
+                            <?= Html::encode($model->last_login_ip) ?>
+                            (<?= Html::encode(($details === null) ? '' : ($details->bogon ? ('Bogon IP') : ($details->city . ', ' . $details->country))) ?>)
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <?php $form = ActiveForm::begin(); ?>
+
+    <!--    --><?php //= $form->field($model, 'username')->textInput(['maxlength' => true]) ?>
+
+    <!--    --><?php //= $form->field($model, 'password')->passwordInput(['maxlength' => true]) ?>
+
+    <?= $form->field($model, 'bio')->textarea(['rows' => 6]) ?>
+
+    <div class="form-group">
+        <?= Html::submitButton('Save', ['class' => 'btn btn-success']) ?>
+    </div>
+
+    <?php ActiveForm::end(); ?>
+
+</div>

web/css/user-info.css

@@ -0,0 +1,59 @@
+.user-profile {
+    display: flex;
+    flex-direction: row;
+    align-items: center; /* Add this line */
+    margin-top: 42px;
+    margin-bottom: 30px;
+}
+
+.user-details {
+    display: flex;
+    justify-content: space-between;
+    align-items: center; /* Add this line */
+    width: 100%; /* Take up the remaining width */
+    margin-left: 10px;
+}
+
+.user-details p {
+    margin-bottom: 0;
+}
+
+#p-username {
+    font-size: 1.25rem;
+}
+
+.user-details .user-info p {
+    font-size: 0.95rem;
+    line-height: 1.25;
+}
+
+.user-login-info {
+    display: flex;
+    justify-content: space-between;
+    width: 40%;
+}
+
+.user-last-login i, .user-last-login-ip i {
+    font-size: 1.5em;
+    margin-right: 10px;
+}
+
+.user-last-login, .user-last-login-ip {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+}
+
+.user-last-login p, .user-last-login-ip p {
+    margin: 0;
+}
+.login-info-dv{
+    margin-left: 5px;
+}
+.login-info-dv .user-login-info-title{
+    font-weight: bold;
+}
+.login-info-dv .user-login-info-content{
+    color: rgb(100,96,100);
+    font-size: 0.95rem;
+}