From 7334f3a36847a4258e62b15829e33e827bd2f4df Mon Sep 17 00:00:00 2001
From: klarkxy <278370456@qq.com>
Date: Sun, 12 Apr 2026 12:55:45 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=E4=BC=98=E5=8C=96=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=E9=A1=B5=E9=9D=A2=E5=B7=A5=E5=85=B7=E6=A0=8F=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E5=92=8C=E6=A0=87=E7=AD=BE=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/template/syzoj/header.php     |  76 ++++++++
 web/template/syzoj/problemset.php | 310 ++++++++++++++++++++----------
 2 files changed, 284 insertions(+), 102 deletions(-)

diff --git a/web/template/syzoj/header.php b/web/template/syzoj/header.php
index d206807..3d7c49e 100644
--- a/web/template/syzoj/header.php
+++ b/web/template/syzoj/header.php
@@ -107,6 +107,82 @@
   /*filter: brightness(1.1);*/
 }
 
+.label {
+    display: inline-block;
+    line-height: 1;
+    vertical-align: baseline;
+    padding: 0.45em 0.7em;
+    border-radius: .28571429rem;
+    font-size: .85714286rem;
+    font-weight: 700;
+    white-space: nowrap;
+    background-color: #e8e8e8;
+    color: rgba(0, 0, 0, .6);
+}
+
+a.label {
+    color: inherit;
+}
+
+a.label:hover {
+    color: inherit;
+    text-decoration: none;
+    filter: brightness(.96);
+}
+
+.label.label-default,
+.ui.label.label-default,
+.label-default,
+.label.label-gray,
+.label.label-grey,
+.label.gray,
+.label.grey,
+.label.lable-gray,
+.label-gray,
+.label-grey,
+.lable-gray {
+    background-color: #767676 !important;
+    color: #fff !important;
+}
+
+.label.label-primary,
+.ui.label.label-primary,
+.label-primary {
+    background-color: #2185d0 !important;
+    color: #fff !important;
+}
+
+.label.label-info,
+.ui.label.label-info,
+.label-info {
+    background-color: #00b5ad !important;
+    color: #fff !important;
+}
+
+.label.label-success,
+.ui.label.label-success,
+.label-success {
+    background-color: #21ba45 !important;
+    color: #fff !important;
+}
+
+.label.label-warning,
+.ui.label.label-warning,
+.label-warning {
+    background-color: #f2711c !important;
+    color: #fff !important;
+}
+
+.label.label-danger,
+.ui.label.label-danger,
+.label-danger,
+.label.label-important,
+.ui.label.label-important,
+.label-important {
+    background-color: #db2828 !important;
+    color: #fff !important;
+}
+
 </style>
     <script src="<?php echo "$OJ_CDN_URL/include/"?>jquery-latest.js"></script>
 
diff --git a/web/template/syzoj/problemset.php b/web/template/syzoj/problemset.php
index d60ddca..97ec5c3 100644
--- a/web/template/syzoj/problemset.php
+++ b/web/template/syzoj/problemset.php
@@ -2,12 +2,121 @@
 <?php include("template/$OJ_TEMPLATE/header.php"); ?>
 <div class="padding">
 
-  <div class="ui grid" style="margin-bottom: 10px; ">
-    <div class="row" style="white-space: nowrap; ">
-      <div class="seven wide column">
-        <form action="" method="get">
-          <div class="ui search"
-            style="width: 160px; height: 28px; margin-top: -5.3px; float:left; margin-right: 10px;">
+  <style>
+    .problemset-toolbar {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px 16px;
+      margin-bottom: 10px;
+    }
+
+    .problemset-toolbar-left,
+    .problemset-toolbar-right {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 10px;
+      min-width: 0;
+      margin: 0;
+    }
+
+    .problemset-toolbar-left {
+      flex: 1 1 320px;
+    }
+
+    .problemset-toolbar-right {
+      flex: 1 1 420px;
+      justify-content: flex-end;
+    }
+
+    .problemset-toolbar .ui.search {
+      margin-top: -5.3px;
+    }
+
+    .problemset-title-search {
+      width: 160px;
+      height: 28px;
+    }
+
+    .problemset-user-search {
+      width: 120px;
+      height: 28px;
+    }
+
+    .problemset-toolbar #hardness_select {
+      width: 120px;
+      min-height: 32px;
+      line-height: 32px;
+      margin-left: 0;
+      vertical-align: middle;
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    .problemset-title-cell {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      min-width: 0;
+    }
+
+    .problemset-title-link {
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+
+    .problemset-tags {
+      flex: 0 1 auto;
+      max-width: 55%;
+      text-align: right;
+    }
+
+    .problemset-tags .label,
+    .problemset-tags .ui.label {
+      margin-bottom: 4px;
+    }
+
+    @media (max-width: 991px) {
+      .problemset-toolbar-right {
+        justify-content: flex-start;
+      }
+    }
+
+    @media (max-width: 767px) {
+      .problemset-toolbar-left,
+      .problemset-toolbar-right {
+        flex-basis: 100%;
+      }
+
+      .problemset-title-search,
+      .problemset-user-search,
+      .problemset-toolbar #hardness_select {
+        width: 100% !important;
+      }
+
+      .problemset-toolbar .ui.search {
+        width: 100% !important;
+      }
+
+      .problemset-title-cell {
+        flex-direction: column;
+        align-items: flex-start;
+      }
+
+      .problemset-tags {
+        width: 100%;
+        max-width: 100%;
+        text-align: left;
+      }
+    }
+  </style>
+
+  <div class="problemset-toolbar">
+    <form action="" method="get" class="problemset-toolbar-left">
+      <div class="ui search problemset-title-search">
             <div class="ui left icon input" style="width: 100%; ">
               <input class="prompt" style="width: 100%; " type="text" placeholder="<?php echo $MSG_TITLE; ?> …"
                 name="search" value="<?php if (isset($_GET['search']))
@@ -15,107 +124,102 @@
                 <i class="search icon"></i>
               </div>
               <div class="results" style="width: 100%; "></div>
-            </div>
+      </div>
 
-          <?php if (isset($_SESSION[$OJ_NAME . '_' . 'administrator'])): ?>
-            <div class="ui search" style="width: 120px; height: 28px; margin-top: -5.3px; display: inline-block;">
-              <div class="ui icon input" style="width: 100%; ">
-                <input class="prompt" style="width: 100%; " type="text" placeholder="用户ID" name="query_user_id" value="<?php if (isset($_GET['query_user_id']))
-                  echo htmlentities($_GET['query_user_id'], ENT_QUOTES, 'UTF-8') ?>">
-                  <i class="search icon"></i>
-                </div>
-                <div class="results" style="width: 100%; "></div>
+      <?php if (isset($_SESSION[$OJ_NAME . '_' . 'administrator'])): ?>
+        <div class="ui search problemset-user-search">
+          <div class="ui icon input" style="width: 100%; ">
+            <input class="prompt" style="width: 100%; " type="text" placeholder="用户ID" name="query_user_id" value="<?php if (isset($_GET['query_user_id']))
+              echo htmlentities($_GET['query_user_id'], ENT_QUOTES, 'UTF-8') ?>">
+              <i class="search icon"></i>
               </div>
-          <?php endif; ?>
+              <div class="results" style="width: 100%; "></div>
+        </div>
+      <?php endif; ?>
+
+      <button type="submit" class="ui mini button" style="display: none;">搜索</button>
+    </form>
+
+    <div class="problemset-toolbar-right">
+
+      <div class="ui toggle checkbox" id="show_tag">
+        <style id="show_tag_style"></style>
+        <script>
+          if (localStorage.getItem('show_tag') != '0') {
+            document.write('<input type="checkbox" checked>');
+            document.getElementById('show_tag_style').innerHTML = '.show_tag_controled { white-space: nowrap; overflow: hidden; }';
+          } else {
+            document.write('<input type="checkbox">');
+            document.getElementById('show_tag_style').innerHTML = '.show_tag_controled { width: 0; white-space: nowrap; overflow: hidden; }';
+          }
+        </script>
+
+        <script>
+          $(function () {
+            $('#show_tag').checkbox('setting', 'onChange', function () {
+              let checked = $('#show_tag').checkbox('is checked');
+              localStorage.setItem('show_tag', checked ? '1' : '0');
+              if (checked) {
+                document.getElementById('show_tag_style').innerHTML = '.show_tag_controled { white-space: nowrap; overflow: hidden; }';
+              } else {
+                document.getElementById('show_tag_style').innerHTML = '.show_tag_controled { width: 0; white-space: nowrap; overflow: hidden; }';
+              }
+            });
+          });
+        </script>
+        <label><?php echo $MSG_SHOW_TAGS; ?></label>
 
-          <button type="submit" class="ui mini button" style="display: none;">搜索</button>
-        </form>
       </div>
 
+      <div class="ui toggle checkbox" id="show_solved">
+        <style id="show_solved_style"></style>
+        <script>
+          if (localStorage.getItem('show_solved') != '0') {
+            document.write('<input type="checkbox" checked>');
+            document.getElementById('show_solved_style').innerHTML = '';
+          } else {
+            document.write('<input type="checkbox">');
+            document.getElementById('show_solved_style').innerHTML = '.solved-problem { display: none; }';
+          }
+        </script>
 
-      <div class="nine wide right aligned column">
-
-        <div class="ui toggle checkbox" id="show_tag">
-          <style id="show_tag_style"></style>
-          <script>
-            if (localStorage.getItem('show_tag') != '0') {
-              document.write('<input type="checkbox" checked>');
-              document.getElementById('show_tag_style').innerHTML = '.show_tag_controled { white-space: nowrap; overflow: hidden; }';
-            } else {
-              document.write('<input type="checkbox">');
-              document.getElementById('show_tag_style').innerHTML = '.show_tag_controled { width: 0; white-space: nowrap; overflow: hidden; }';
-            }
-          </script>
-
-          <script>
-            $(function () {
-              $('#show_tag').checkbox('setting', 'onChange', function () {
-                let checked = $('#show_tag').checkbox('is checked');
-                localStorage.setItem('show_tag', checked ? '1' : '0');
-                if (checked) {
-                  document.getElementById('show_tag_style').innerHTML = '.show_tag_controled { white-space: nowrap; overflow: hidden; }';
-                } else {
-                  document.getElementById('show_tag_style').innerHTML = '.show_tag_controled { width: 0; white-space: nowrap; overflow: hidden; }';
-                }
-              });
+        <script>
+          $(function () {
+            $('#show_solved').checkbox('setting', 'onChange', function () {
+              let checked = $('#show_solved').checkbox('is checked');
+              localStorage.setItem('show_solved', checked ? '1' : '0');
+              if (checked) {
+                document.getElementById('show_solved_style').innerHTML = '';
+                document.querySelectorAll('.solved-problem').forEach(function (row) {
+                  row.style.display = '';
+                });
+              } else {
+                document.getElementById('show_solved_style').innerHTML = '.solved-problem { display: none; }';
+                document.querySelectorAll('.solved-problem').forEach(function (row) {
+                  row.style.display = 'none';
+                });
+              }
             });
-          </script>
-          <label><?php echo $MSG_SHOW_TAGS; ?></label>
-
-        </div>
-
-        <div class="ui toggle checkbox" id="show_solved" style="margin-left: 10px;">
-          <style id="show_solved_style"></style>
-          <script>
-            if (localStorage.getItem('show_solved') != '0') {
-              document.write('<input type="checkbox" checked>');
-              document.getElementById('show_solved_style').innerHTML = '';
-            } else {
-              document.write('<input type="checkbox">');
-              document.getElementById('show_solved_style').innerHTML = '.solved-problem { display: none; }';
-            }
-          </script>
-
-          <script>
-            $(function () {
-              $('#show_solved').checkbox('setting', 'onChange', function () {
-                let checked = $('#show_solved').checkbox('is checked');
-                localStorage.setItem('show_solved', checked ? '1' : '0');
-                if (checked) {
-                  document.getElementById('show_solved_style').innerHTML = '';
-                  // 显示所有题目
-                  document.querySelectorAll('.solved-problem').forEach(function (row) {
-                    row.style.display = '';
-                  });
-                } else {
-                  document.getElementById('show_solved_style').innerHTML = '.solved-problem { display: none; }';
-                  // 隐藏已解决的题目
-                  document.querySelectorAll('.solved-problem').forEach(function (row) {
-                    row.style.display = 'none';
-                  });
-                }
-              });
-            });
-          </script>
-          <label>显示已正确题目</label>
-        </div>
-
-        <?php
-        $selected_hardness = 0;
-        if (isset($_GET['hardness'])) {
-          $selected_hardness = intval($_GET['hardness']);
-          if ($selected_hardness < 1 || $selected_hardness > 8)
-            $selected_hardness = 0;
-        }
-        ?>
-        <select id="hardness_select" class="ui dropdown" style="width: 120px; min-height: 32px; line-height: 32px; margin-left: 10px; vertical-align: middle; padding-top: 0; padding-bottom: 0;">
-          <option value="0" <?php if ($selected_hardness == 0)
-            echo 'selected'; ?>>全部难度</option>
-          <?php for ($h = 1; $h <= 8; $h++) {
-            echo '<option value="' . $h . '"' . ($selected_hardness == $h ? ' selected' : '') . '>难度 ' . $h . '</option>';
-          } ?>
-        </select>
+          });
+        </script>
+        <label>显示已正确题目</label>
       </div>
+
+      <?php
+      $selected_hardness = 0;
+      if (isset($_GET['hardness'])) {
+        $selected_hardness = intval($_GET['hardness']);
+        if ($selected_hardness < 1 || $selected_hardness > 8)
+          $selected_hardness = 0;
+      }
+      ?>
+      <select id="hardness_select" class="ui dropdown">
+        <option value="0" <?php if ($selected_hardness == 0)
+          echo 'selected'; ?>>全部难度</option>
+        <?php for ($h = 1; $h <= 8; $h++) {
+          echo '<option value="' . $h . '"' . ($selected_hardness == $h ? ' selected' : '') . '>难度 ' . $h . '</option>';
+        } ?>
+      </select>
     </div>
   </div>
 
@@ -233,17 +337,19 @@
 
         echo "<td><b>" . $row['problem_id'] . "</b></td>";
         echo "<td class=\"left aligned\">";
+        echo "<div class=\"problemset-title-cell\">";
+        echo "<div class=\"problemset-title-link\">";
         echo "<a style=\"vertical-align: middle; \" href=\"problem.php?id=" . $row['problem_id'] . "\">";
         echo $row['title'];
         echo "</a>";
         if ($row['defunct'] == 'Y') {
           echo "<a href=admin/problem_df_change.php?id=" . $row['problem_id'] . "&getkey=" . $_SESSION[$OJ_NAME . '_' . 'getkey'] . ">" . ("<span class=\"ui tiny red label\">未公开</span>") . "</a>";
         }
+        echo "</div>";
 
-        echo "<div class=\"show_tag_controled\" style=\"float: right; \">";
-        //echo "<span class=\"ui header\">";
+        echo "<div class=\"show_tag_controled problemset-tags\">";
         echo $view_problemset[$i][3];
-        //echo "</span></div>";
+        echo "</div>";
         echo "</div>";
         echo "</td>";
         echo "<td><a href=\"status.php?problem_id=" . $row['problem_id'] . "&jresult=4\">" . $row['accepted'] . "/" . $row['submit'] . "</a></td>";