Upload 67 files

app/static/style.css

@@ -857,6 +857,175 @@ textarea {
   gap: 14px;
 }
 
+.activity-catalog-panel {
+  overflow: hidden;
+}
+
+.activity-catalog-head {
+  margin-bottom: 20px;
+}
+
+.published-activity-list {
+  display: grid;
+  gap: 20px;
+}
+
+.published-activity-card {
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(0, 1.55fr) minmax(290px, 0.9fr);
+  gap: 22px;
+  padding: 22px;
+  border-radius: 30px;
+  background:
+    radial-gradient(circle at 100% 0%, rgba(241, 193, 107, 0.18), transparent 28%),
+    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(236, 248, 239, 0.9));
+  border: 1px solid rgba(78, 148, 97, 0.16);
+  box-shadow: 0 20px 38px rgba(86, 127, 93, 0.12);
+}
+
+.published-activity-card::before {
+  content: "";
+  position: absolute;
+  inset: 0 auto auto 24px;
+  width: 110px;
+  height: 5px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, rgba(96, 175, 114, 0.9), rgba(241, 193, 107, 0.82));
+}
+
+.published-activity-main,
+.published-activity-side,
+.published-activity-form {
+  display: grid;
+  gap: 16px;
+}
+
+.published-activity-main {
+  min-width: 0;
+  align-content: start;
+}
+
+.published-activity-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.published-activity-title {
+  margin: 4px 0 0;
+  font-size: 1.8rem;
+  line-height: 1.12;
+}
+
+.published-activity-badges {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.published-activity-metrics,
+.published-activity-notes {
+  display: grid;
+  gap: 14px;
+}
+
+.published-activity-metrics {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.published-activity-notes {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.activity-metric-card,
+.activity-note-card {
+  padding: 16px 18px;
+  border-radius: 22px;
+  border: 1px solid rgba(78, 148, 97, 0.12);
+}
+
+.activity-metric-card {
+  background: rgba(255, 255, 255, 0.78);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
+}
+
+.activity-note-card {
+  background: rgba(244, 250, 245, 0.88);
+}
+
+.activity-metric-card span,
+.activity-note-card span {
+  display: block;
+  font-size: 0.8rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.activity-metric-card strong,
+.activity-note-card strong {
+  display: block;
+  margin-top: 8px;
+  line-height: 1.45;
+  color: var(--primary-deep);
+}
+
+.activity-metric-card strong {
+  font-size: 1.02rem;
+}
+
+.published-activity-side {
+  align-content: start;
+  padding: 18px;
+  border-radius: 26px;
+  background: linear-gradient(180deg, rgba(247, 252, 248, 0.94), rgba(229, 244, 233, 0.88));
+  border: 1px solid rgba(78, 148, 97, 0.14);
+}
+
+.published-activity-side .btn,
+.published-delete-form .btn {
+  width: 100%;
+  justify-content: center;
+}
+
+.published-toggle-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  padding: 14px 16px;
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.78);
+  border: 1px solid rgba(78, 148, 97, 0.12);
+}
+
+.published-toggle-row > div {
+  display: grid;
+  gap: 4px;
+}
+
+.published-toggle-row strong {
+  font-size: 1rem;
+  color: var(--primary-deep);
+}
+
+.published-toggle-row span {
+  font-size: 0.88rem;
+  line-height: 1.45;
+  color: var(--muted);
+}
+
+.published-toggle-row input {
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  margin: 0;
+  flex: 0 0 auto;
+}
+
 .task-editor-card {
   gap: 16px;
 }
@@ -1069,7 +1238,8 @@ textarea {
   .task-page-grid,
   .users-admin-grid,
   .presence-admin-grid,
-  .review-live-grid {
+  .review-live-grid,
+  .published-activity-card {
     grid-template-columns: 1fr;
   }
 
@@ -1083,12 +1253,23 @@ textarea {
   .task-carousel-head,
   .carousel-controls,
   .presence-item,
-  .activity-actions {
+  .activity-actions,
+  .published-activity-head,
+  .published-toggle-row {
     grid-template-columns: 1fr;
     flex-direction: column;
     align-items: stretch;
   }
 
+  .published-activity-metrics,
+  .published-activity-notes {
+    grid-template-columns: 1fr;
+  }
+
+  .published-activity-badges {
+    justify-content: flex-start;
+  }
+
   .task-flip-book {
     min-height: 900px;
   }
@@ -1135,3 +1316,6 @@ textarea {
 .compact-stack-item {
   padding: 10px 12px;
 }
+
+
+

app/templates/admin_activities.html

@@ -80,46 +80,91 @@
       </form>
     </article>
 
-    <article class="glass-card table-panel">
-      <div class="section-head">
+    <article class="glass-card table-panel activity-catalog-panel">
+      <div class="section-head activity-catalog-head">
         <div>
           <p class="eyebrow">Published Activities</p>
           <h3>已发布活动</h3>
+          <p class="mini-note">把活动信息、可见性开关和危险操作拆分展示，管理起来会更清晰。</p>
         </div>
       </div>
-      <div class="stack-list">
+      <div class="published-activity-list">
         {% for activity in activities %}
-          <article class="stack-item stack-item-block">
-            <div>
-              <strong>{{ activity.title }}</strong>
-              <p class="muted">{{ activity.start_at|datetime_local }} 至 {{ activity.deadline_at|datetime_local }}</p>
-              <p class="muted">{{ activity.tasks|length }} 个任务 · 创建人 {{ activity.created_by.display_name }}</p>
-              <p class="muted">线索间隔：{{ activity.clue_interval_minutes if activity.clue_interval_minutes is not none else '与活动开始同步' }}</p>
-              <div class="chip-row">
-                <span class="chip">{{ '用户端可见' if activity.is_visible else '用户端隐藏' }}</span>
-                <span class="chip">{{ '排行榜可见' if activity.leaderboard_visible else '排行榜隐藏' }}</span>
+          <article class="published-activity-card">
+            <div class="published-activity-main">
+              <div class="published-activity-head">
+                <div>
+                  <p class="eyebrow">Activity {{ loop.index }}</p>
+                  <h3 class="published-activity-title">{{ activity.title }}</h3>
+                </div>
+                <div class="published-activity-badges">
+                  <span class="status-badge {% if activity.is_visible %}status-approved{% else %}status-rejected{% endif %}">
+                    {{ '活动可见' if activity.is_visible else '活动隐藏' }}
+                  </span>
+                  <span class="status-badge {% if activity.leaderboard_visible %}status-approved{% else %}status-rejected{% endif %}">
+                    {{ '排行可见' if activity.leaderboard_visible else '排行隐藏' }}
+                  </span>
+                </div>
+              </div>
+
+              <div class="published-activity-metrics">
+                <div class="activity-metric-card">
+                  <span>开始时间</span>
+                  <strong>{{ activity.start_at|datetime_local }}</strong>
+                </div>
+                <div class="activity-metric-card">
+                  <span>截止时间</span>
+                  <strong>{{ activity.deadline_at|datetime_local }}</strong>
+                </div>
+                <div class="activity-metric-card">
+                  <span>任务数量</span>
+                  <strong>{{ activity.tasks|length }} 个任务</strong>
+                </div>
+              </div>
+
+              <div class="published-activity-notes">
+                <div class="activity-note-card">
+                  <span>创建人</span>
+                  <strong>{{ activity.created_by.display_name }}</strong>
+                </div>
+                <div class="activity-note-card">
+                  <span>线索间隔</span>
+                  <strong>{{ activity.clue_interval_minutes if activity.clue_interval_minutes is not none else '与活动开始同步' }}</strong>
+                </div>
               </div>
             </div>
-            <div class="activity-actions">
-              <a class="btn btn-primary small-btn" href="/admin/activities/{{ activity.id }}/edit">编辑活动</a>
-              <form method="post" action="/admin/activities/{{ activity.id }}/visibility" class="inline-form visibility-form">
-                <label class="checkbox-row compact-checkbox">
+
+            <aside class="published-activity-side">
+              <a class="btn btn-primary" href="/admin/activities/{{ activity.id }}/edit">编辑活动</a>
+
+              <form method="post" action="/admin/activities/{{ activity.id }}/visibility" class="published-activity-form">
+                <label class="published-toggle-row">
+                  <div>
+                    <strong>活动对用户可见</strong>
+                    <span>关闭后，用户端不会显示，也不能直接进入此活动。</span>
+                  </div>
                   <input type="checkbox" name="is_visible" {% if activity.is_visible %}checked{% endif %} />
-                  <span>用户可见活动</span>
                 </label>
-                <label class="checkbox-row compact-checkbox">
+                <label class="published-toggle-row">
+                  <div>
+                    <strong>排行榜对用户可见</strong>
+                    <span>管理员始终可见，这里只控制普通用户是否能看到排行榜。</span>
+                  </div>
                   <input type="checkbox" name="leaderboard_visible" {% if activity.leaderboard_visible %}checked{% endif %} />
-                  <span>用户可见排行榜</span>
                 </label>
-                <button class="btn btn-secondary small-btn" type="submit">保存</button>
+                <button class="btn btn-secondary" type="submit">保存显示设置</button>
               </form>
-              <form method="post" action="/admin/activities/{{ activity.id }}/delete" class="inline-form">
-                <button class="btn btn-danger small-btn" type="submit" onclick="return confirm('确定删除这个活动吗？相关任务、审核记录和本地提交图片都会一并删除。');">删除活动</button>
+
+              <form method="post" action="/admin/activities/{{ activity.id }}/delete" class="published-delete-form">
+                <button class="btn btn-danger" type="submit" onclick="return confirm('确定删除这个活动吗？相关任务、审核记录和本地提交图片都会一并删除。');">删除活动</button>
               </form>
-            </div>
+            </aside>
           </article>
         {% else %}
-          <p class="muted">还没有活动，先发布一个吧。</p>
+          <article class="empty-state">
+            <h3>还没有活动</h3>
+            <p>先在左侧发布一个活动，这里会自动整理成更清晰的管理卡片。</p>
+          </article>
         {% endfor %}
       </div>
     </article>