系统设置页面，前端改进

下一步打算加入google analysis的支持

models/SiteConfig.php

@@ -10,6 +10,7 @@ use yii\base\Model;
  * Class SiteConfig
  * 配置信息
  * 少数配置不在列表中，如数据库配置等
+ * TODO: 实现Google analysis、Microsoft Clarity统计
  */
 class SiteConfig extends Model
 {
@@ -74,7 +75,23 @@ class SiteConfig extends Model
             'ipinfoToken' => 'IPinfo Token',
         ];
     }
-
+    public function attributeHelpTexts(): array
+    {
+        return [
+            'siteTitle' => '你可以在这里设置网站的标题',
+            'registrationEnabled' => '你可以在这里设置是否允许新用户注册<br>关闭注册后，只有管理员可以添加用户',
+            'domain' => '你可以在这里设置网站使用的域名<br>开头不需要添加 http:// 或 https://<br>结尾不需要添加 /<br>本地测试时可以使用 localhost',
+            'verifyProvider' => '你可以在这里设置验证码提供商<br>目前支持<a href=\'https://developers.google.com/recaptcha\' target=\'_blank\'>reCAPTCHA</a>、<a href=\'https://www.hcaptcha.com/\' target=\'_blank\'>hCaptcha</a>、<a href=\'https://www.cloudflare.com/en-ca/products/turnstile/\' target=\'_blank\'>Turnstile</a>或关闭验证码',
+            'recaptchaSiteKey' => '请在这里填入reCAPTCHA Site Key',
+            'recaptchaSecret' => '请在这里填入reCAPTCHA Secret',
+            'hcaptchaSiteKey' => '请在这里填入hCaptcha Site Key',
+            'hcaptchaSecret' => '请在这里填入hCaptcha Secret',
+            'turnstileSiteKey' => '请在这里填入Turnstile Site Key',
+            'turnstileSecret' => '请在这里填入Turnstile Secret',
+            'enableIpinfo' => '是否使用<a href=\'https://ipinfo.io/\' target=\'_blank\'>ipinfo.io</a>查询站点上的ip信息',
+            'ipinfoToken' => '请在这里填入IPinfo Token',
+        ];
+    }
     /**
      * 读取配置信息
      * @return bool

views/admin/system.php

@@ -1,5 +1,7 @@
 <?php
 
+use app\assets\FontAwesomeAsset;
+use yii\bootstrap5\BootstrapAsset;
 use yii\helpers\Html;
 use yii\web\JqueryAsset;
 use yii\web\View;
@@ -8,6 +10,8 @@ use yii\widgets\ActiveForm;
 /* @var $this yii\web\View */
 /* @var $siteConfig app\models\SiteConfig */
 JqueryAsset::register($this);
+FontAwesomeAsset::register($this);
+$this->registerCssFile('@web/css/admin-system.css', ['depends' => [BootstrapAsset::class]]);
 $this->title = '系统设置';
 ?>
     <div class="admin-system">
@@ -22,7 +26,7 @@ $this->title = '系统设置';
             <?php
             $attributes = array_keys(get_object_vars($siteConfig));
             foreach ($attributes as $attribute) {
-                echo '<tr id="tr-'.$attribute.'">';
+                echo '<tr id="tr-' . $attribute . '">';
                 echo '<th style="width: 200px"><p>' . $siteConfig->attributeLabels()[$attribute] . '</p></th>';
                 if ($attribute == 'registrationEnabled' || $attribute == 'enableIpinfo') {
                     echo '<td>' . $form->field($siteConfig, $attribute)->checkbox(['class' => 'form-check-input'], false)->label(false) . '</td>';
@@ -31,6 +35,7 @@ $this->title = '系统设置';
                 } else {
                     echo '<td>' . $form->field($siteConfig, $attribute)->textInput(['class' => 'form-control form-control-sm', 'style' => 'width:25em'])->label(false) . '</td>';
                 }
+                echo '<td><button type="button" class="btn btn-sm btn-light" data-bs-toggle="popover" data-bs-custom-class="custom-popover" data-bs-title="help" data-bs-html="true" data-bs-content="'.$siteConfig->attributeHelpTexts()[$attribute].'" style="margin-bottom: 14px;"><i class="fa-solid fa-circle-question"></i></button></td>';
                 echo '</tr>';
             }
             ?>
@@ -45,4 +50,9 @@ $this->title = '系统设置';
     </div>
 <?php
 $this->registerJsFile('@web/js/admin-system.js', ['depends' => [JqueryAsset::class], 'position' => View::POS_END]);
+$this->registerJs('
+    $(function () {
+      $("[data-bs-toggle=\'popover\']").popover();
+    });
+');
 ?>

web/css/admin-system.css

@@ -0,0 +1,9 @@
+.custom-popover {
+    --bs-popover-max-width: 200px;
+    --bs-popover-border-color: rgb(113,44,249);
+    --bs-popover-header-bg: rgb(113,44,249);
+    --bs-popover-header-color: var(--bs-white);
+    --bs-popover-header-padding-y: .1rem;
+    --bs-popover-body-padding-x: 1rem;
+    --bs-popover-body-padding-y: .5rem;
+}