Feat：update web UI

vocata-server/src/main/java/com/vocata/character/mapper/CharacterMapper.java

@@ -62,6 +62,8 @@ int updateCharacterTags(@Param("characterId") Long characterId,
      * @param page 分页参数
      * @param status 角色状态
      * @param isFeatured 是否精选
+     * @param orderBy 排序字段
+     * @param orderDirection 排序方向
      * @return 角色列表（包含创建者名称）
      */
     @Select("<script>" +
@@ -77,11 +79,42 @@ int updateCharacterTags(@Param("characterId") Long characterId,
             "AND c.is_delete = 0 " +
             "<if test='status != null'> AND c.status = #{status} </if>" +
             "<if test='isFeatured != null'> AND c.is_featured = #{isFeatured} </if>" +
-            "ORDER BY c.chat_count DESC, c.created_at DESC" +
+            "ORDER BY " +
+            "<choose>" +
+            "  <when test='orderBy == \"chat_count\"'>" +
+            "    c.chat_count " +
+            "  </when>" +
+            "  <when test='orderBy == \"created_at\"'>" +
+            "    c.created_at " +
+            "  </when>" +
+            "  <when test='orderBy == \"updated_at\"'>" +
+            "    c.updated_at " +
+            "  </when>" +
+            "  <when test='orderBy == \"trending_score\"'>" +
+            "    c.trending_score " +
+            "  </when>" +
+            "  <when test='orderBy == \"sort_weight\"'>" +
+            "    c.sort_weight " +
+            "  </when>" +
+            "  <otherwise>" +
+            "    c.chat_count " +
+            "  </otherwise>" +
+            "</choose>" +
+            "<choose>" +
+            "  <when test='orderDirection == \"asc\"'>" +
+            "    ASC " +
+            "  </when>" +
+            "  <otherwise>" +
+            "    DESC " +
+            "  </otherwise>" +
+            "</choose>" +
+            ", c.created_at DESC" +
             "</script>")
     IPage<Map<String, Object>> selectPublicCharactersWithCreator(Page<?> page,
                                                                 @Param("status") Integer status,
-                                                                @Param("isFeatured") Integer isFeatured);
+                                                                @Param("isFeatured") Integer isFeatured,
+                                                                @Param("orderBy") String orderBy,
+                                                                @Param("orderDirection") String orderDirection);
 
     /**
      * 获取精选角色列表（包含创建者名称）

vocata-server/src/main/java/com/vocata/character/service/impl/CharacterServiceImpl.java

@@ -248,7 +248,15 @@ public List<Map<String, Object>> getFeaturedCharactersWithCreator(int limit) {
     public IPage<Map<String, Object>> getPublicCharactersWithCreator(Page<Character> page, Integer status,
                                                                    Integer isFeatured, List<String> tags,
                                                                    String orderBy, String orderDirection) {
-        return this.baseMapper.selectPublicCharactersWithCreator(page, status, isFeatured);
+        // 设置默认排序参数
+        if (StringUtils.isBlank(orderBy)) {
+            orderBy = "chat_count";
+        }
+        if (StringUtils.isBlank(orderDirection)) {
+            orderDirection = "desc";
+        }
+
+        return this.baseMapper.selectPublicCharactersWithCreator(page, status, isFeatured, orderBy, orderDirection);
     }
 
     @Override

vocata-web/src/assets/styles/pagination-theme.css

@@ -0,0 +1,57 @@
+/* 分页组件黑白灰主题覆盖样式 */
+:root {
+  --el-color-primary: #333333;
+  --el-color-primary-light-3: #f8f8f8;
+  --el-color-primary-light-5: #cccccc;
+  --el-color-primary-light-7: #e5e5e5;
+  --el-color-primary-light-8: #f0f0f0;
+  --el-color-primary-light-9: #f8f8f8;
+}
+
+/* 分页组件专用样式 */
+.pagination-container .el-pagination {
+  --el-color-primary: #333333;
+}
+
+.pagination-container .el-pagination .el-pager li {
+  color: #666666 !important;
+  background-color: #ffffff !important;
+  border: 1px solid #e5e5e5 !important;
+}
+
+.pagination-container .el-pagination .el-pager li:hover {
+  color: #333333 !important;
+  background-color: #f8f8f8 !important;
+  border-color: #cccccc !important;
+}
+
+.pagination-container .el-pagination .el-pager li.is-active {
+  color: #ffffff !important;
+  background-color: #333333 !important;
+  border-color: #333333 !important;
+}
+
+.pagination-container .el-pagination .btn-prev,
+.pagination-container .el-pagination .btn-next {
+  color: #666666 !important;
+  background-color: #ffffff !important;
+  border: 1px solid #e5e5e5 !important;
+}
+
+.pagination-container .el-pagination .btn-prev:hover:not(:disabled),
+.pagination-container .el-pagination .btn-next:hover:not(:disabled) {
+  color: #333333 !important;
+  background-color: #f8f8f8 !important;
+  border-color: #cccccc !important;
+}
+
+.pagination-container .el-pagination .btn-prev:disabled,
+.pagination-container .el-pagination .btn-next:disabled {
+  color: #cccccc !important;
+  background-color: #ffffff !important;
+  border-color: #f0f0f0 !important;
+}
+
+.pagination-container .el-pagination .el-pagination__total {
+  color: #666666 !important;
+}