ui: 导航圆润与用户信息展示；详情页作者与关注；主页粉丝/关注与卡片网格

app/templates/users/profile.html

@@ -1,19 +1,37 @@
 {% extends 'base.html' %}
 {% block title %}主页{% endblock %}
 {% block content %}
-<div class="d-flex justify-content-between align-items-center">
-  <h3>{{ user.username }}</h3>
-  {% if current_user.is_authenticated and current_user.id != user.id %}
-  <a class="btn btn-outline-primary" href="{{ url_for('follows.follow', user_id=user.id) }}">关注</a>
-  {% endif %}
+<div class="card p-3 mb-3">
+  <div class="d-flex justify-content-between align-items-center">
+    <div class="d-flex align-items-center gap-3">
+      <span class="avatar">{{ user.username[:1]|upper }}</span>
+      <h3 class="m-0">{{ user.username }}</h3>
+    </div>
+    {% if current_user.is_authenticated and current_user.id != user.id %}
+    {% if is_following %}
+    <a class="btn btn-secondary" href="{{ url_for('follows.unfollow', user_id=user.id) }}">已关注</a>
+    {% else %}
+    <a class="btn btn-brand" href="{{ url_for('follows.follow', user_id=user.id) }}">关注</a>
+    {% endif %}
+    {% endif %}
+  </div>
+  <div class="text-secondary mt-2">粉丝 {{ followers_count }} · 关注 {{ following_count }}</div>
+  <p class="mt-2">{{ user.profile.bio }}</p>
 </div>
-<p>{{ user.profile.bio }}</p>
 <hr>
-<h5>作品</h5>
-<div class="row">
+<h5 class="mb-2">作品</h5>
+<div class="card-grid">
   {% for p in user.posts %}
-  <div class="col-md-4">
-    <a href="{{ url_for('posts.detail', post_id=p.id) }}">{{ p.title }}</a>
+  <div class="card">
+    {% set first = p.images[0] if p.images %}
+    {% if first %}
+    <a href="{{ url_for('posts.detail', post_id=p.id) }}">
+      <img class="photo-thumb" src="{{ url_for('main.uploads', filename=first.web_path) }}" alt="{{ p.title }}" />
+    </a>
+    {% endif %}
+    <div class="p-3">
+      <a class="text-decoration-none" href="{{ url_for('posts.detail', post_id=p.id) }}">{{ p.title }}</a>
+    </div>
   </div>
   {% endfor %}
 </div>