From 2f8a815c621e572c1f35a47c0fc87e9f1fdb3417 Mon Sep 17 00:00:00 2001
From: ZhangAo <hi_itao@163.com>
Date: Fri, 26 Dec 2025 17:30:43 +0800
Subject: [PATCH] u

---
 .../impl/ForumPostCommentServiceImpl.java     |    1 +
 .../company/model/vo/CompanyDetailVO.java     |    1 -
 .../controller/PostCommentController.java     |   40 +
 .../post/controller/PostController.java       |   19 +-
 .../link56/post/mapper/PostCommentMapper.java |    5 +
 .../cn/link56/post/mapper/PostMapper.java     |   14 +
 .../post/model/dto/CreatePostCommentDTO.java  |   15 +
 .../post/model/dto/QueryPublicPostDTO.java    |    3 +
 .../cn/link56/post/model/po/PostComment.java  |    8 +-
 .../post/model/vo/CreatePostCommentVO.java    |   18 +
 .../link56/post/model/vo/PostCommentVO.java   |   31 +
 .../link56/post/model/vo/PostCompanyVO.java   |   19 +
 .../cn/link56/post/model/vo/PublicPostVO.java |   24 +
 .../post/service/PostCommentService.java      |  119 ++
 .../cn/link56/post/service/PostService.java   |   74 +-
 .../link56/post/service/PostViewService.java  |   10 +
 .../link56/post/mapper/PostCommentMapper.xml  |   42 +
 .../cn/link56/post/mapper/PostMapper.xml      |   24 +-
 code/link56/link56-frontend-new/package.json  |    3 +-
 .../link56/link56-frontend-new/pnpm-lock.yaml |   25 +
 .../src/components/EmojiPopover.vue           |   91 +
 .../src/request/api/post/index.ts             |   26 +-
 .../link56-frontend-new/src/router/index.ts   |    4 +
 .../src/types/auto-import.d.ts                |    1 +
 .../src/types/post/index.ts                   |   81 +
 .../link56-frontend-new/src/utils/time.ts     |   46 +
 .../post/detail/components/comment-input.vue  |  284 +++
 .../post/detail/components/comment-list.vue   |  303 +++
 .../src/views/post/detail/index.vue           |  380 ++++
 .../src/views/post/home/index.vue             |  157 +-
 code/link56/link56-frontend-new/test.html     | 1783 +----------------
 .../modules/main/modules/comment-list.vue     |    2 +
 32 files changed, 1915 insertions(+), 1738 deletions(-)
 create mode 100644 code/link56/link56-backend/src/main/java/cn/link56/post/controller/PostCommentController.java
 create mode 100644 code/link56/link56-backend/src/main/java/cn/link56/post/model/dto/CreatePostCommentDTO.java
 create mode 100644 code/link56/link56-backend/src/main/java/cn/link56/post/model/vo/CreatePostCommentVO.java
 create mode 100644 code/link56/link56-backend/src/main/java/cn/link56/post/model/vo/PostCommentVO.java
 create mode 100644 code/link56/link56-backend/src/main/java/cn/link56/post/model/vo/PostCompanyVO.java
 create mode 100644 code/link56/link56-backend/src/main/java/cn/link56/post/model/vo/PublicPostVO.java
 create mode 100644 code/link56/link56-backend/src/main/resources/cn/link56/post/mapper/PostCommentMapper.xml
 create mode 100644 code/link56/link56-frontend-new/src/components/EmojiPopover.vue
 create mode 100644 code/link56/link56-frontend-new/src/utils/time.ts
 create mode 100644 code/link56/link56-frontend-new/src/views/post/detail/components/comment-input.vue
 create mode 100644 code/link56/link56-frontend-new/src/views/post/detail/components/comment-list.vue
 create mode 100644 code/link56/link56-frontend-new/src/views/post/detail/index.vue

diff --git a/code/link56/link56-backend-old/src/main/java/cn/link56/service/forum/impl/ForumPostCommentServiceImpl.java b/code/link56/link56-backend-old/src/main/java/cn/link56/service/forum/impl/ForumPostCommentServiceImpl.java
index c4da7662..076fc8ab 100644
--- a/code/link56/link56-backend-old/src/main/java/cn/link56/service/forum/impl/ForumPostCommentServiceImpl.java
+++ b/code/link56/link56-backend-old/src/main/java/cn/link56/service/forum/impl/ForumPostCommentServiceImpl.java
@@ -71,6 +71,7 @@ public class ForumPostCommentServiceImpl extends ServiceImpl<ForumPostCommentMap
 
         return Result.success(forumPostCommentVO,"评论成功");
     }
+
     public List<ForumPostCommentVO> getPostComments(String forumPostId) {
         // 1. 查询所有评论
         List<ForumPostCommentVO> list = forumPostCommentMapper.getPostComments(forumPostId);
diff --git a/code/link56/link56-backend/src/main/java/cn/link56/company/model/vo/CompanyDetailVO.java b/code/link56/link56-backend/src/main/java/cn/link56/company/model/vo/CompanyDetailVO.java
index 45236ef9..3a85520a 100644
--- a/code/link56/link56-backend/src/main/java/cn/link56/company/model/vo/CompanyDetailVO.java
+++ b/code/link56/link56-backend/src/main/java/cn/link56/company/model/vo/CompanyDetailVO.java
@@ -35,5 +35,4 @@ public class CompanyDetailVO {
         private String position;
         private String name;
     }
-
 }
diff --git a/code/link56/link56-backend/src/main/java/cn/link56/post/controller/PostCommentController.java b/code/link56/link56-backend/src/main/java/cn/link56/post/controller/PostCommentController.java
new file mode 100644
index 00000000..e91523db
--- /dev/null
+++ b/code/link56/link56-backend/src/main/java/cn/link56/post/controller/PostCommentController.java
@@ -0,0 +1,40 @@
+package cn.link56.post.controller;
+
+import cn.link56.common.Result;
+import cn.link56.post.model.dto.CreatePostCommentDTO;
+import cn.link56.post.model.vo.CreatePostCommentVO;
+import cn.link56.post.model.vo.PostCommentVO;
+import cn.link56.post.service.PostCommentService;
+import org.springframework.web.bind.annotation.*;
+
+import javax.annotation.Resource;
+import javax.validation.constraints.NotBlank;
+import javax.validation.constraints.NotNull;
+import java.util.List;
+
+@RestController
+@RequestMapping("/post/comment")
+public class PostCommentController {
+    @Resource
+    private PostCommentService postCommentService;
+
+    @PostMapping("/create")
+    public Result<CreatePostCommentVO> createPostComment(@RequestBody CreatePostCommentDTO dto){
+        CreatePostCommentVO commentVO = postCommentService.createPostComment(dto);
+        return Result.success(commentVO);
+    }
+
+    @GetMapping("/{id}")
+    public Result<List<PostCommentVO>> listPostComments(@PathVariable("id") @NotNull(message = "文章ID不能为空") Long id){
+        List<PostCommentVO> postComments = postCommentService.listPostComments(id);
+
+        return Result.success(postComments);
+    }
+
+    @PostMapping("/delete/{id}")
+    public Result<Void> delete(@PathVariable("id") @NotNull(message = "评论ID不能为空") Long postCommentId) {
+        postCommentService.deletePostComment(postCommentId);
+
+        return Result.success();
+    }
+}
diff --git a/code/link56/link56-backend/src/main/java/cn/link56/post/controller/PostController.java b/code/link56/link56-backend/src/main/java/cn/link56/post/controller/PostController.java
index 019a1067..810bfdc2 100644
--- a/code/link56/link56-backend/src/main/java/cn/link56/post/controller/PostController.java
+++ b/code/link56/link56-backend/src/main/java/cn/link56/post/controller/PostController.java
@@ -3,13 +3,13 @@ package cn.link56.post.controller;
 import cn.link56.common.BasePageVO;
 import cn.link56.common.Result;
 import cn.link56.post.model.dto.QueryPublicPostDTO;
-import cn.link56.post.model.vo.PostTagVO;
-import cn.link56.post.model.vo.QueryPublicPostVO;
+import cn.link56.post.model.vo.*;
 import cn.link56.post.service.PostService;
 import cn.link56.post.service.PostTagService;
 import org.springframework.web.bind.annotation.*;
 
 import javax.annotation.Resource;
+import javax.validation.constraints.NotNull;
 import java.util.List;
 
 @RestController
@@ -32,4 +32,19 @@ public class PostController {
         BasePageVO<QueryPublicPostVO> res = postService.queryPublicPosts(dto);
         return Result.success(res);
     }
+
+    @GetMapping("/{id}")
+    public Result<PublicPostVO> getPublicDetail(@PathVariable("id") @NotNull(message = "文章ID不能为空") Long id){
+        PublicPostVO publicPostVO = postService.getPublicDetail(id);
+
+        return Result.success(publicPostVO);
+    }
+
+    @GetMapping("/company/{id}")
+    public Result<PostCompanyVO> getForumCompany(@PathVariable("id") @NotNull(message = "公司ID不能为空") Long companyId){
+        PostCompanyVO postCompanyVO = postService.getPostCompanyById(companyId);
+
+        return Result.success(postCompanyVO);
+    }
+
 }
diff --git a/code/link56/link56-backend/src/main/java/cn/link56/post/mapper/PostCommentMapper.java b/code/link56/link56-backend/src/main/java/cn/link56/post/mapper/PostCommentMapper.java
index f5f3d6a2..9f52b3ec 100644
--- a/code/link56/link56-backend/src/main/java/cn/link56/post/mapper/PostCommentMapper.java
+++ b/code/link56/link56-backend/src/main/java/cn/link56/post/mapper/PostCommentMapper.java
@@ -1,9 +1,14 @@
 package cn.link56.post.mapper;
 
 import cn.link56.post.model.po.PostComment;
+import cn.link56.post.model.vo.PostCommentVO;
 import com.baomidou.mybatisplus.core.mapper.BaseMapper;
 import org.apache.ibatis.annotations.Mapper;
+import org.apache.ibatis.annotations.Param;
+
+import java.util.List;
 
 @Mapper
 public interface PostCommentMapper extends BaseMapper<PostComment> {
+    List<PostCommentVO> selectComments(@Param("postId") Long postId);
 }
diff --git a/code/link56/link56-backend/src/main/java/cn/link56/post/mapper/PostMapper.java b/code/link56/link56-backend/src/main/java/cn/link56/post/mapper/PostMapper.java
index 798b294d..5b796919 100644
--- a/code/link56/link56-backend/src/main/java/cn/link56/post/mapper/PostMapper.java
+++ b/code/link56/link56-backend/src/main/java/cn/link56/post/mapper/PostMapper.java
@@ -2,7 +2,9 @@ package cn.link56.post.mapper;
 
 import cn.link56.post.model.po.Post;
 import cn.link56.post.model.vo.EditorDashboardVO;
+import cn.link56.post.model.vo.PublicPostVO;
 import cn.link56.post.model.vo.QueryEditorPostVO;
+import cn.link56.post.model.vo.QueryPublicPostVO;
 import com.baomidou.mybatisplus.core.mapper.BaseMapper;
 import org.apache.ibatis.annotations.Mapper;
 import org.apache.ibatis.annotations.Param;
@@ -33,4 +35,16 @@ public interface PostMapper extends BaseMapper<Post> {
 
     List<EditorDashboardVO.Chart> selectDashboardViewStats(@Param("userId") Long userId);
     List<EditorDashboardVO.Chart> selectDashboardNumberStats(@Param("userId") Long userId);
+
+    List<QueryPublicPostVO> selectPublicPostPage(
+            @Param("offset") int offset,
+            @Param("limit") int limit,
+            @Param("title") String title,
+            @Param("tag") String tag
+    );
+
+    Long selectPublicPostTotal(
+            @Param("title") String title,
+            @Param("tag") String tag
+    );
 }
diff --git a/code/link56/link56-backend/src/main/java/cn/link56/post/model/dto/CreatePostCommentDTO.java b/code/link56/link56-backend/src/main/java/cn/link56/post/model/dto/CreatePostCommentDTO.java
new file mode 100644
index 00000000..c4bc5a38
--- /dev/null
+++ b/code/link56/link56-backend/src/main/java/cn/link56/post/model/dto/CreatePostCommentDTO.java
@@ -0,0 +1,15 @@
+package cn.link56.post.model.dto;
+
+import lombok.AllArgsConstructor;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+@Data
+@AllArgsConstructor
+@NoArgsConstructor
+public class CreatePostCommentDTO {
+    private Long fatherId;
+    private Long postId;
+
+    private String content;
+}
diff --git a/code/link56/link56-backend/src/main/java/cn/link56/post/model/dto/QueryPublicPostDTO.java b/code/link56/link56-backend/src/main/java/cn/link56/post/model/dto/QueryPublicPostDTO.java
index 597b9451..ad334a87 100644
--- a/code/link56/link56-backend/src/main/java/cn/link56/post/model/dto/QueryPublicPostDTO.java
+++ b/code/link56/link56-backend/src/main/java/cn/link56/post/model/dto/QueryPublicPostDTO.java
@@ -8,6 +8,9 @@ import lombok.NoArgsConstructor;
 @AllArgsConstructor
 @NoArgsConstructor
 public class QueryPublicPostDTO {
+    private Integer currentPage;
+    private Integer pageSize;
+
     private String title;
     private String tag;
 }
diff --git a/code/link56/link56-backend/src/main/java/cn/link56/post/model/po/PostComment.java b/code/link56/link56-backend/src/main/java/cn/link56/post/model/po/PostComment.java
index a8061bd2..15b4f470 100644
--- a/code/link56/link56-backend/src/main/java/cn/link56/post/model/po/PostComment.java
+++ b/code/link56/link56-backend/src/main/java/cn/link56/post/model/po/PostComment.java
@@ -8,6 +8,8 @@ import lombok.AllArgsConstructor;
 import lombok.Data;
 import lombok.NoArgsConstructor;
 
+import java.util.Date;
+
 @Data
 @AllArgsConstructor
 @NoArgsConstructor
@@ -26,14 +28,14 @@ public class PostComment {
     private String content;
 
     @TableField(
-            value = "b_create_user_id",
+            value = "b_create_by",
             fill = FieldFill.INSERT
     )
-    private Long createUserId;
+    private Long createBy;
 
     @TableField(
             value = "b_create_time",
             fill = FieldFill.INSERT
     )
-    private Long createTime;
+    private Date createTime;
 }
diff --git a/code/link56/link56-backend/src/main/java/cn/link56/post/model/vo/CreatePostCommentVO.java b/code/link56/link56-backend/src/main/java/cn/link56/post/model/vo/CreatePostCommentVO.java
new file mode 100644
index 00000000..47b74690
--- /dev/null
+++ b/code/link56/link56-backend/src/main/java/cn/link56/post/model/vo/CreatePostCommentVO.java
@@ -0,0 +1,18 @@
+package cn.link56.post.model.vo;
+
+import lombok.AllArgsConstructor;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+import java.util.Date;
+
+@Data
+@AllArgsConstructor
+@NoArgsConstructor
+public class CreatePostCommentVO {
+    private Long id;
+    private Long fatherId;
+    private String content;
+    private Long createId;
+    private Date createTime;
+}
diff --git a/code/link56/link56-backend/src/main/java/cn/link56/post/model/vo/PostCommentVO.java b/code/link56/link56-backend/src/main/java/cn/link56/post/model/vo/PostCommentVO.java
new file mode 100644
index 00000000..2e326a3f
--- /dev/null
+++ b/code/link56/link56-backend/src/main/java/cn/link56/post/model/vo/PostCommentVO.java
@@ -0,0 +1,31 @@
+package cn.link56.post.model.vo;
+
+import lombok.AllArgsConstructor;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+import java.util.Date;
+import java.util.List;
+
+@Data
+@AllArgsConstructor
+@NoArgsConstructor
+public class PostCommentVO {
+    private Long id;
+    private Long fatherId;
+    private String content;
+    private Date createTime;
+    private User publishUser;
+    private User replyUser;
+    private List<PostCommentVO> children;
+
+    @Data
+    @AllArgsConstructor
+    @NoArgsConstructor
+    public static class User{
+        private Long id;
+        private Long companyId;
+        private String name;
+        private String avatar;
+    }
+}
diff --git a/code/link56/link56-backend/src/main/java/cn/link56/post/model/vo/PostCompanyVO.java b/code/link56/link56-backend/src/main/java/cn/link56/post/model/vo/PostCompanyVO.java
new file mode 100644
index 00000000..11e27ef6
--- /dev/null
+++ b/code/link56/link56-backend/src/main/java/cn/link56/post/model/vo/PostCompanyVO.java
@@ -0,0 +1,19 @@
+package cn.link56.post.model.vo;
+
+import lombok.AllArgsConstructor;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+import java.util.List;
+
+@Data
+@AllArgsConstructor
+@NoArgsConstructor
+public class PostCompanyVO {
+    private Long id;
+    private String name;
+    private String logo;
+    private String profile;
+    private List<String> areas;
+    private List<String> industries;
+}
diff --git a/code/link56/link56-backend/src/main/java/cn/link56/post/model/vo/PublicPostVO.java b/code/link56/link56-backend/src/main/java/cn/link56/post/model/vo/PublicPostVO.java
new file mode 100644
index 00000000..20017da0
--- /dev/null
+++ b/code/link56/link56-backend/src/main/java/cn/link56/post/model/vo/PublicPostVO.java
@@ -0,0 +1,24 @@
+package cn.link56.post.model.vo;
+
+import lombok.AllArgsConstructor;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+import java.util.Date;
+import java.util.List;
+
+@Data
+@AllArgsConstructor
+@NoArgsConstructor
+public class PublicPostVO {
+    private Long id;
+    private String title;
+    private String content;
+    private List<String> tags;
+    private Date activeTime;
+
+    private Long viewCount;
+    private Long commentCount;
+
+    private Long companyId;
+}
diff --git a/code/link56/link56-backend/src/main/java/cn/link56/post/service/PostCommentService.java b/code/link56/link56-backend/src/main/java/cn/link56/post/service/PostCommentService.java
index 0e0d686f..1a103d9e 100644
--- a/code/link56/link56-backend/src/main/java/cn/link56/post/service/PostCommentService.java
+++ b/code/link56/link56-backend/src/main/java/cn/link56/post/service/PostCommentService.java
@@ -1,14 +1,133 @@
 package cn.link56.post.service;
 
+import cn.link56.common.utils.snowflake.idgen.IdGenerator;
 import cn.link56.post.mapper.PostCommentMapper;
+import cn.link56.post.model.dto.CreatePostCommentDTO;
 import cn.link56.post.model.po.PostComment;
+import cn.link56.post.model.po.PostView;
+import cn.link56.post.model.vo.CreatePostCommentVO;
+import cn.link56.post.model.vo.PostCommentVO;
+import com.baomidou.mybatisplus.core.conditions.update.LambdaUpdateWrapper;
 import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
+import org.apache.commons.lang3.ObjectUtils;
+import org.apache.commons.lang3.StringUtils;
+import org.springframework.beans.BeanUtils;
 import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
 
 import javax.annotation.Resource;
+import javax.validation.constraints.NotBlank;
+import javax.validation.constraints.NotNull;
+import java.util.*;
 
 @Service
 public class PostCommentService extends ServiceImpl<PostCommentMapper, PostComment> {
     @Resource
     private PostCommentMapper postCommentMapper;
+
+    /**
+     * 根据文章 id 获取浏览总数
+     */
+    public Long getTotalByPostId(Long postId) {
+        return lambdaQuery()
+                .eq(PostComment::getPostId, postId)
+                .count();
+    }
+
+    /**
+     * 根据文章 id 获取最新一条评论
+     */
+    public PostComment getLatestCommentByPostId(Long postId) {
+        return null;
+    }
+
+    public List<PostCommentVO> listPostComments(Long id) {
+        // 1. 查询所有评论
+        List<PostCommentVO> list = postCommentMapper.selectComments(id);
+
+        // 2. 构建扁平化树形结构（所有子评论提升到根评论层级）
+        List<PostCommentVO> rootComments = new ArrayList<>();
+        Map<Long, PostCommentVO> commentMap = new HashMap<>();
+
+        // 2.1 初始化映射并收集根评论
+        for (PostCommentVO comment : list) {
+            commentMap.put(comment.getId(), comment);
+            if (ObjectUtils.isEmpty(comment.getFatherId())) {
+                rootComments.add(comment);
+                comment.setChildren(new ArrayList<>()); // 提前初始化children
+            }
+        }
+
+        // 2.2 遍历所有评论，将子评论挂到根祖先的children中
+        for (PostCommentVO comment : list) {
+            if (ObjectUtils.isEmpty(comment.getFatherId())) {
+                continue; // 跳过根评论
+            }
+
+            // 查找当前评论的根祖先（追溯到没有fatherId的祖先）
+            PostCommentVO rootAncestor = null;
+            Long currentFatherId = comment.getFatherId();
+            while (true) {
+                PostCommentVO parent = commentMap.get(currentFatherId);
+                if (parent == null) break; // 父节点不存在，终止循环
+
+                if (ObjectUtils.isEmpty(comment.getFatherId())) {
+                    rootAncestor = parent; // 找到根祖先
+                    break;
+                } else {
+                    currentFatherId = parent.getFatherId(); // 继续向上查找
+                }
+            }
+
+            // 挂载到根祖先的children中
+            if (rootAncestor != null && rootAncestor.getChildren() != null) {
+                rootAncestor.getChildren().add(comment);
+            }
+        }
+
+        // 3. 按原始顺序排序（可选）
+        rootComments.forEach(root -> {
+            if (root.getChildren() != null) {
+                // 根据需求排序，例如按创建时间升序
+                root.getChildren().sort(Comparator.comparing(PostCommentVO::getCreateTime));
+            }
+        });
+
+        return rootComments;
+    }
+
+    @Transactional
+    public CreatePostCommentVO createPostComment(CreatePostCommentDTO dto) {
+        PostComment postComment = new PostComment();
+
+        BeanUtils.copyProperties(dto,postComment);
+
+        postComment.setId(IdGenerator.nextId());
+        postCommentMapper.insert(postComment);
+
+        CreatePostCommentVO commentVO = new CreatePostCommentVO();
+        BeanUtils.copyProperties(postComment,commentVO);
+
+        return commentVO;
+    }
+
+    @Transactional
+    public void deletePostComment(@NotBlank(message = "评论ID不能为空") Long postCommentId) {
+        PostComment postComment = postCommentMapper.selectById(postCommentId);
+        if (ObjectUtils.isEmpty(postComment)){
+            return;
+        }
+
+        Long fatherId = postComment.getFatherId();
+        if(ObjectUtils.isEmpty(fatherId)){
+            postCommentMapper.deleteById(postCommentId);
+        }else{
+            LambdaUpdateWrapper<PostComment> updateWrapper = new LambdaUpdateWrapper<>();
+            updateWrapper.eq(PostComment::getId,postCommentId)
+                    .or()
+                    .eq(PostComment::getFatherId,postCommentId);
+
+            postCommentMapper.delete(updateWrapper);
+        }
+    }
 }
diff --git a/code/link56/link56-backend/src/main/java/cn/link56/post/service/PostService.java b/code/link56/link56-backend/src/main/java/cn/link56/post/service/PostService.java
index 91a4ac8b..ca111ba2 100644
--- a/code/link56/link56-backend/src/main/java/cn/link56/post/service/PostService.java
+++ b/code/link56/link56-backend/src/main/java/cn/link56/post/service/PostService.java
@@ -2,24 +2,27 @@ package cn.link56.post.service;
 
 import cn.link56.common.BasePageVO;
 import cn.link56.common.context.UserContext;
+import cn.link56.common.exception.BusinessException;
 import cn.link56.common.utils.snowflake.idgen.IdGenerator;
+import cn.link56.company.model.po.CompanyPO;
+import cn.link56.company.service.CompanyService;
 import cn.link56.post.mapper.PostMapper;
 import cn.link56.post.model.dto.*;
 import cn.link56.post.model.enums.PostStatusEnum;
 import cn.link56.post.model.po.Post;
-import cn.link56.post.model.vo.EditorDashboardVO;
-import cn.link56.post.model.vo.EditorPostVO;
-import cn.link56.post.model.vo.QueryEditorPostVO;
-import cn.link56.post.model.vo.QueryPublicPostVO;
+import cn.link56.post.model.po.PostComment;
+import cn.link56.post.model.vo.*;
 import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
 import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
 import org.apache.commons.lang3.StringUtils;
 import org.springframework.beans.BeanUtils;
+import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
 import org.springframework.util.CollectionUtils;
 
 import javax.annotation.Resource;
+import javax.validation.constraints.NotNull;
 import java.time.LocalDate;
 import java.util.*;
 import java.util.stream.Collectors;
@@ -29,6 +32,12 @@ public class PostService extends ServiceImpl<PostMapper, Post> {
 
     @Resource
     private PostMapper postMapper;
+    @Resource
+    private PostViewService postViewService;
+    @Resource
+    private PostCommentService postCommentService;
+    @Resource
+    private CompanyService companyService;
 
     @Transactional
     public EditorPostVO createPost(CreatePostDTO dto) {
@@ -219,10 +228,63 @@ public class PostService extends ServiceImpl<PostMapper, Post> {
     public BasePageVO<QueryPublicPostVO> queryPublicPosts(QueryPublicPostDTO dto) {
         String title = dto.getTitle();
         String tag = dto.getTag();
-
+        int offset = (dto.getCurrentPage() - 1) * dto.getPageSize() + 1;
+        int limit = dto.getCurrentPage() * dto.getPageSize();
 
         BasePageVO<QueryPublicPostVO> result = new BasePageVO<>();
 
-        return result;
+        List<QueryPublicPostVO> queryEditorPostVOS = postMapper.selectPublicPostPage(offset, limit, title, tag);
+        Long total = postMapper.selectPublicPostTotal(title, tag);
+
+
+        return new BasePageVO<QueryPublicPostVO>(total, queryEditorPostVOS);
+    }
+
+    public PublicPostVO getPublicDetail(Long id) {
+        Post post = postMapper.selectById(id);
+
+        if (post == null) {
+            throw new BusinessException("帖子不存在或已被删除");
+        }
+
+        if (PostStatusEnum.DRAFT.getCode() == post.getStatus()) {
+            throw new BusinessException("该帖子尚未发布");
+        }
+
+        PublicPostVO postVO = new PublicPostVO();
+
+        BeanUtils.copyProperties(post,postVO);
+        postVO.setTags(Arrays.stream(StringUtils.split(post.getTag(),",")).collect(Collectors.toList()));
+
+        Long viewTotal = postViewService.getTotalByPostId(id);
+        Long commentTotal = postCommentService.getTotalByPostId(id);
+
+        postVO.setViewCount(viewTotal);
+        postVO.setCommentCount(commentTotal);
+
+        PostComment latestCommentByPostId = postCommentService.getLatestCommentByPostId(id);
+
+        if (latestCommentByPostId == null){
+            postVO.setActiveTime(post.getUpdateTime());
+        } else {
+            postVO.setActiveTime(latestCommentByPostId.getCreateTime());
+        }
+
+        return postVO;
+    }
+
+    public PostCompanyVO getPostCompanyById(Long id) {
+        CompanyPO companyPO = companyService.getById(id);
+        if (companyPO == null){
+            throw new BusinessException("该公司不存在或已注销");
+        }
+
+        PostCompanyVO postCompanyVO = new PostCompanyVO();
+        BeanUtils.copyProperties(companyPO,postCompanyVO);
+
+        postCompanyVO.setAreas(Arrays.stream(StringUtils.split(companyPO.getArea(),",")).collect(Collectors.toList()));
+        postCompanyVO.setIndustries(Arrays.stream(StringUtils.split(companyPO.getIndustry(),",")).collect(Collectors.toList()));
+
+        return postCompanyVO;
     }
 }
diff --git a/code/link56/link56-backend/src/main/java/cn/link56/post/service/PostViewService.java b/code/link56/link56-backend/src/main/java/cn/link56/post/service/PostViewService.java
index 67fb96b2..af032f9c 100644
--- a/code/link56/link56-backend/src/main/java/cn/link56/post/service/PostViewService.java
+++ b/code/link56/link56-backend/src/main/java/cn/link56/post/service/PostViewService.java
@@ -11,4 +11,14 @@ import javax.annotation.Resource;
 public class PostViewService extends ServiceImpl<PostViewMapper, PostView> {
     @Resource
     private PostViewMapper postViewMapper;
+
+
+    /**
+     * 根据文章 id 获取浏览总数
+     */
+    public Long getTotalByPostId(Long postId) {
+        return lambdaQuery()
+                .eq(PostView::getPostId, postId)
+                .count();
+    }
 }
diff --git a/code/link56/link56-backend/src/main/resources/cn/link56/post/mapper/PostCommentMapper.xml b/code/link56/link56-backend/src/main/resources/cn/link56/post/mapper/PostCommentMapper.xml
new file mode 100644
index 00000000..1701ef77
--- /dev/null
+++ b/code/link56/link56-backend/src/main/resources/cn/link56/post/mapper/PostCommentMapper.xml
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE mapper
+        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
+        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="cn.link56.post.mapper.PostCommentMapper">
+    <resultMap id="CommentListMap" type="cn.link56.post.model.vo.PostCommentVO">
+        <id property="id" column="b_id"/>
+        <result property="fatherId" column="b_father_id"/>
+        <result property="content" column="b_content"/>
+        <result property="createTime" column="b_create_time"/>
+
+        <!-- 映射发布公司 -->
+        <association property="publishUser" javaType="cn.link56.post.model.vo.PostCommentVO$User">
+            <result property="id" column="pub_user_id"/>
+            <result property="companyId" column="pub_company_id"/>
+            <result property="name" column="pub_user_name"/>
+            <result property="avatar" column="pub_user_avatar"/>
+        </association>
+
+        <!-- 映射回复公司 -->
+        <association property="replyUser" javaType="cn.link56.post.model.vo.PostCommentVO$User">
+            <result property="id" column="rep_user_id"/>
+            <result property="companyId" column="rep_company_id"/>
+            <result property="name" column="rep_user_name"/>
+            <result property="avatar" column="rep_user_avatar"/>
+        </association>
+    </resultMap>
+
+    <select id="selectComments" resultMap="CommentListMap">
+        SELECT c.*,
+               pc.b_id AS pub_user_id,pc.b_company_id AS pub_company_id,pc.b_name AS pub_user_name,
+               rc.b_id AS rep_user_id,rc.b_company_id AS rep_company_id,rc.b_name AS rep_company_id
+        FROM b_post_comment c
+                 LEFT JOIN b_company_user pc ON c.b_create_by = pc.b_id
+                 LEFT JOIN b_company_user rc ON (
+                                                SELECT b_create_by FROM b_post_comment WHERE b_id = c.b_father_id
+                                            ) = rc.b_id
+        WHERE c.b_post_id = #{postId}
+        ORDER BY c.b_create_time
+    </select>
+
+</mapper>
\ No newline at end of file
diff --git a/code/link56/link56-backend/src/main/resources/cn/link56/post/mapper/PostMapper.xml b/code/link56/link56-backend/src/main/resources/cn/link56/post/mapper/PostMapper.xml
index ba71386f..b791a37a 100644
--- a/code/link56/link56-backend/src/main/resources/cn/link56/post/mapper/PostMapper.xml
+++ b/code/link56/link56-backend/src/main/resources/cn/link56/post/mapper/PostMapper.xml
@@ -163,7 +163,7 @@
             p.b_id AS id,
             p.b_title AS title,
             p.b_tag AS tagsString,
-            p.company_id AS companyId,
+            p.b_company_id AS companyId,
             bc.b_name AS companyName,
 
             ISNULL(pv.viewCount, 0) AS viewCount,
@@ -173,10 +173,10 @@
             ISNULL(pc.lastCommentTime, p.b_update_time) AS activeTime,
 
             ROW_NUMBER() OVER (
-            ORDER BY ISNULL(pc.lastCommentTime, p.b_update_time) DESC
+                ORDER BY ISNULL(pc.lastCommentTime, p.b_update_time) DESC
             ) AS rn
             FROM b_post p
-            LEFT JOIN b_company bc ON bc.b_id = p.company_id
+            LEFT JOIN b_company bc ON bc.b_id = p.b_company_id
             LEFT JOIN (
             SELECT
                 b_post_id,
@@ -193,10 +193,11 @@
                 GROUP BY b_post_id
             ) pc ON pc.b_post_id = p.b_id
             <where>
+                AND p.b_status = 1
                 <if test="title != null and title != ''">
                     AND p.b_title LIKE '%' + #{title} + '%'
                 </if>
-                <if test="tag != null and tag != -1">
+                <if test="tag != null and tag != ''">
                     AND p.b_tag LIKE '%' + #{tag} + '%'
                 </if>
             </where>
@@ -204,4 +205,19 @@
         WHERE t.rn BETWEEN #{offset} AND #{limit}
     </select>
 
+    <select id="selectPublicPostTotal" resultType="java.lang.Long">
+        SELECT COUNT(1)
+        FROM b_post p
+        <where>
+            AND p.b_status = 1
+
+            <if test="title != null and title != ''">
+                AND p.b_title LIKE '%' + #{title} + '%'
+            </if>
+            <if test="tag != null and tag != ''">
+                AND p.b_tag LIKE '%' + #{tag} + '%'
+            </if>
+        </where>
+    </select>
+
 </mapper>
\ No newline at end of file
diff --git a/code/link56/link56-frontend-new/package.json b/code/link56/link56-frontend-new/package.json
index d7f3900c..feae1af2 100644
--- a/code/link56/link56-frontend-new/package.json
+++ b/code/link56/link56-frontend-new/package.json
@@ -22,7 +22,8 @@
     "pinia": "^3.0.4",
     "pinia-plugin-persistedstate": "^4.7.1",
     "vue": "^3.5.24",
-    "vue-router": "^4.6.3"
+    "vue-router": "^4.6.3",
+    "vue3-puzzle-vcode": "^1.1.7"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^6.6.1",
diff --git a/code/link56/link56-frontend-new/pnpm-lock.yaml b/code/link56/link56-frontend-new/pnpm-lock.yaml
index 0fb75e08..8af46696 100644
--- a/code/link56/link56-frontend-new/pnpm-lock.yaml
+++ b/code/link56/link56-frontend-new/pnpm-lock.yaml
@@ -44,6 +44,9 @@ importers:
       vue-router:
         specifier: ^4.6.3
         version: 4.6.3(vue@3.5.25(typescript@5.9.3))
+      vue3-puzzle-vcode:
+        specifier: ^1.1.7
+        version: 1.1.7
     devDependencies:
       '@antfu/eslint-config':
         specifier: ^6.6.1
@@ -502,36 +505,42 @@ packages:
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@parcel/watcher-linux-arm-musl@2.5.1':
     resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@parcel/watcher-linux-arm64-glibc@2.5.1':
     resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@parcel/watcher-linux-arm64-musl@2.5.1':
     resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@parcel/watcher-linux-x64-glibc@2.5.1':
     resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@parcel/watcher-linux-x64-musl@2.5.1':
     resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@parcel/watcher-win32-arm64@2.5.1':
     resolution: {integrity: sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==}
@@ -596,56 +605,67 @@ packages:
     resolution: {integrity: sha512-k9oD15soC/Ln6d2Wv/JOFPzZXIAIFLp6B+i14KhxAfnq76ajt0EhYc5YPeX6W1xJkAdItcVT+JhKl1QZh44/qw==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.53.3':
     resolution: {integrity: sha512-vTNlKq+N6CK/8UktsrFuc+/7NlEYVxgaEgRXVUVK258Z5ymho29skzW1sutgYjqNnquGwVUObAaxae8rZ6YMhg==}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.53.3':
     resolution: {integrity: sha512-RGrFLWgMhSxRs/EWJMIFM1O5Mzuz3Xy3/mnxJp/5cVhZ2XoCAxJnmNsEyeMJtpK+wu0FJFWz+QF4mjCA7AUQ3w==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.53.3':
     resolution: {integrity: sha512-kASyvfBEWYPEwe0Qv4nfu6pNkITLTb32p4yTgzFCocHnJLAHs+9LjUu9ONIhvfT/5lv4YS5muBHyuV84epBo/A==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-loong64-gnu@4.53.3':
     resolution: {integrity: sha512-JiuKcp2teLJwQ7vkJ95EwESWkNRFJD7TQgYmCnrPtlu50b4XvT5MOmurWNrCj3IFdyjBQ5p9vnrX4JM6I8OE7g==}
     cpu: [loong64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-ppc64-gnu@4.53.3':
     resolution: {integrity: sha512-EoGSa8nd6d3T7zLuqdojxC20oBfNT8nexBbB/rkxgKj5T5vhpAQKKnD+h3UkoMuTyXkP5jTjK/ccNRmQrPNDuw==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.53.3':
     resolution: {integrity: sha512-4s+Wped2IHXHPnAEbIB0YWBv7SDohqxobiiPA1FIWZpX+w9o2i4LezzH/NkFUl8LRci/8udci6cLq+jJQlh+0g==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-musl@4.53.3':
     resolution: {integrity: sha512-68k2g7+0vs2u9CxDt5ktXTngsxOQkSEV/xBbwlqYcUrAVh6P9EgMZvFsnHy4SEiUl46Xf0IObWVbMvPrr2gw8A==}
     cpu: [riscv64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-s390x-gnu@4.53.3':
     resolution: {integrity: sha512-VYsFMpULAz87ZW6BVYw3I6sWesGpsP9OPcyKe8ofdg9LHxSbRMd7zrVrr5xi/3kMZtpWL/wC+UIJWJYVX5uTKg==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.53.3':
     resolution: {integrity: sha512-3EhFi1FU6YL8HTUJZ51imGJWEX//ajQPfqWLI3BQq4TlvHy4X0MOr5q3D2Zof/ka0d5FNdPwZXm3Yyib/UEd+w==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.53.3':
     resolution: {integrity: sha512-eoROhjcc6HbZCJr+tvVT8X4fW3/5g/WkGvvmwz/88sDtSJzO7r/blvoBDgISDiCjDRZmHpwud7h+6Q9JxFwq1Q==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-openharmony-arm64@4.53.3':
     resolution: {integrity: sha512-OueLAWgrNSPGAdUdIjSWXw+u/02BRTcnfw9PN41D2vq/JSEPnJnVuBgw18VkN8wcd4fjUs+jFHVM4t9+kBSNLw==}
@@ -2445,6 +2465,9 @@ packages:
     peerDependencies:
       typescript: '>=5.0.0'
 
+  vue3-puzzle-vcode@1.1.7:
+    resolution: {integrity: sha512-mW780dz7HKjrElnE60CeYSeHGidKBKHoMjTDYfqF21330rTkFOsfDK1FQKZ22MktgMtTEoS/imfpEDlM1cxY/g==}
+
   vue@3.5.25:
     resolution: {integrity: sha512-YLVdgv2K13WJ6n+kD5owehKtEXwdwXuj2TTyJMsO7pSeKw2bfRNZGjhB7YzrpbMYj5b5QsUebHpOqR3R3ziy/g==}
     peerDependencies:
@@ -4980,6 +5003,8 @@ snapshots:
       '@vue/language-core': 3.1.8(typescript@5.9.3)
       typescript: 5.9.3
 
+  vue3-puzzle-vcode@1.1.7: {}
+
   vue@3.5.25(typescript@5.9.3):
     dependencies:
       '@vue/compiler-dom': 3.5.25
diff --git a/code/link56/link56-frontend-new/src/components/EmojiPopover.vue b/code/link56/link56-frontend-new/src/components/EmojiPopover.vue
new file mode 100644
index 00000000..33fc54cd
--- /dev/null
+++ b/code/link56/link56-frontend-new/src/components/EmojiPopover.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import SvgIcon from './SvgIcon.vue'
+
+const emits = defineEmits(['select'])
+
+// 示例 emoji
+const emojis = ref<string[]>([
+  '😊',
+  '😂',
+  '😍',
+  '😎',
+  '😜',
+  '🤔',
+  '😏',
+  '😢',
+  '🥺',
+  '😇',
+  '😈',
+  '🤩',
+  '🥳',
+  '😱',
+  '😅',
+  '😴',
+  '😷',
+  '🤐',
+  '😻',
+  '🤡',
+  '💩',
+  '👻',
+  '🤖',
+  '💀',
+  '👀',
+  '👍',
+  '👊',
+  '✌️',
+  '💪',
+  '👏',
+])
+
+function handleClickEmoji(emoji: string) {
+  emits('select', emoji)
+}
+</script>
+
+<template>
+  <el-popover trigger="click" position="tl">
+    <SvgIcon icon="majesticons:emoji-happy-line" class="chat-window-bottom-icon" />
+    <template #content>
+      <div class="emoji-container">
+        <div v-for="(emoji, index) in emojis" :key="index" class="emoji-item" @click="handleClickEmoji(emoji)">
+          {{ emoji }}
+        </div>
+      </div>
+    </template>
+  </el-popover>
+</template>
+
+<style scoped lang="scss">
+.chat-window-bottom-icon {
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+}
+
+.emoji-container {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 8px;
+  padding: 4px;
+  height: 200px;
+  overflow-y: auto;
+  width: 100%;
+  scrollbar-gutter: stable both-edges;
+}
+
+.emoji-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 24px;
+  cursor: pointer;
+  transition: transform 0.2s ease;
+  will-change: transform;
+}
+
+.emoji-item:hover {
+  transform: scale(1.2);
+  z-index: 1;
+}
+</style>
diff --git a/code/link56/link56-frontend-new/src/request/api/post/index.ts b/code/link56/link56-frontend-new/src/request/api/post/index.ts
index dbb59484..4fef53fb 100644
--- a/code/link56/link56-frontend-new/src/request/api/post/index.ts
+++ b/code/link56/link56-frontend-new/src/request/api/post/index.ts
@@ -1,7 +1,31 @@
-import type { PostTag } from '@/types/post'
+import type { CreatePostCommentParams, CreatePostCommentResult, PostComment, PostCompany, PostTag, PublicPost, PublicPostDetail, QueryPublicPostParams } from '@/types/post'
 import { httpGet, httpPostJson } from '@/request/utils'
 
 // ===== 公共接口 =====
 export function getPostTagApi() {
   return httpGet<PostTag[]>('/post/tag')
 }
+
+export function queryPublicPostApi(params: QueryPublicPostParams) {
+  return httpPostJson<BasePageResult<PublicPost>>('/post/query', params)
+}
+
+export function getPublicPostDetailApi(id: number) {
+  return httpGet<PublicPostDetail>(`/post/${id}`)
+}
+
+export function getPostCompanyById(id: number) {
+  return httpGet<PostCompany>(`/post/company/${id}`)
+}
+
+export function createPostCommentApi(params: CreatePostCommentParams) {
+  return httpPostJson<CreatePostCommentResult>(`/post/comment/create`, params)
+}
+
+export function listPostCommentApi(id: number) {
+  return httpGet<PostComment[]>(`/post/comment/${id}`)
+}
+
+export function deletePostCommentApi(id: number) {
+  return httpGet<void>(`/post/comment/delete/${id}`)
+}
diff --git a/code/link56/link56-frontend-new/src/router/index.ts b/code/link56/link56-frontend-new/src/router/index.ts
index 0afdd9e0..8cedbf06 100644
--- a/code/link56/link56-frontend-new/src/router/index.ts
+++ b/code/link56/link56-frontend-new/src/router/index.ts
@@ -25,6 +25,10 @@ const router = createRouter({
               path: '',
               component: () => import('@/views/post/home/index.vue'),
             },
+            {
+              path: '/post/detail/:id',
+              component: () => import('@/views/post/detail/index.vue'),
+            },
           ],
         },
         {
diff --git a/code/link56/link56-frontend-new/src/types/auto-import.d.ts b/code/link56/link56-frontend-new/src/types/auto-import.d.ts
index 9d117c0d..5c744037 100644
--- a/code/link56/link56-frontend-new/src/types/auto-import.d.ts
+++ b/code/link56/link56-frontend-new/src/types/auto-import.d.ts
@@ -17,6 +17,7 @@ declare module 'vue' {
     CustomLoading: typeof import('./../components/CustomLoading.vue')['default']
     Directory: typeof import('./../components/wang-editor/modules/directory.vue')['default']
     EmailCodeInput: typeof import('./../components/EmailCodeInput.vue')['default']
+    EmojiPopover: typeof import('./../components/EmojiPopover.vue')['default']
     HelloWorld: typeof import('./../components/HelloWorld.vue')['default']
     ICarbonAccessibility: typeof import('~icons/carbon/accessibility')['default']
     'IFa7Solid:userShield': typeof import('~icons/fa7-solid/user-shield')['default']
diff --git a/code/link56/link56-frontend-new/src/types/post/index.ts b/code/link56/link56-frontend-new/src/types/post/index.ts
index a4ddb404..0ada8330 100644
--- a/code/link56/link56-frontend-new/src/types/post/index.ts
+++ b/code/link56/link56-frontend-new/src/types/post/index.ts
@@ -27,3 +27,84 @@ export interface PostCategory {
   id: number
   name: string
 }
+
+export interface PublicPost {
+  id: number
+  title: string
+  tags: string[]
+
+  companyId: string
+  companyName: string
+
+  viewCount: number
+  commentCount: number
+
+  activeTime: string
+}
+
+export interface QueryPublicPostParams {
+  currentPage: number
+  pageSize: number
+
+  title: string
+  tag: string
+}
+
+export interface PublicPostDetail {
+  id: number
+  title: string
+  content: string
+  tags: string[]
+  activeTime: string
+
+  viewCount: number
+  commentCount: number
+
+  companyId: number
+}
+
+export interface PostCompany {
+  id: number
+  name: string
+  logo: string
+  profile: string
+
+  areas: string[]
+  industries: string[]
+}
+
+export interface CreatePostCommentParams {
+  fatherId: number | null
+  postId: number
+
+  content: string
+}
+export interface CreatePostCommentResult {
+  id: number
+  fatherId: number | null
+
+  content: string
+  createId: number
+  createTime: string
+}
+
+export interface PostComment {
+  id: number
+  fatherId: number | null
+  content: string
+  createTime: string
+  children: PostComment[]
+
+  publishUser: {
+    id: number
+    companyId: number
+    name: string
+    avatar: string
+  }
+  replyUser: {
+    id: number
+    companyId: number
+    name: string
+    avatar: string
+  } | null
+}
diff --git a/code/link56/link56-frontend-new/src/utils/time.ts b/code/link56/link56-frontend-new/src/utils/time.ts
new file mode 100644
index 00000000..9f45b322
--- /dev/null
+++ b/code/link56/link56-frontend-new/src/utils/time.ts
@@ -0,0 +1,46 @@
+import dayjs from 'dayjs'
+
+export function formatPostTime(input?: dayjs.ConfigType): string {
+  if (!input)
+    return ''
+
+  const time = dayjs(input)
+  if (!time.isValid())
+    return ''
+
+  const now = dayjs()
+
+  const diffSeconds = now.diff(time, 'second')
+  if (diffSeconds < 0) {
+    // 未来时间兜底
+    return time.format('YYYY年MM月DD日')
+  }
+
+  // 1 分钟内
+  if (diffSeconds < 60) {
+    return '刚刚'
+  }
+
+  const diffMinutes = now.diff(time, 'minute')
+  if (diffMinutes < 60) {
+    return `${diffMinutes}分钟前`
+  }
+
+  const diffHours = now.diff(time, 'hour')
+  if (diffHours < 24) {
+    return `${diffHours}小时前`
+  }
+
+  const diffDays = now.diff(time, 'day')
+  if (diffDays < 14) {
+    return `${diffDays}天前`
+  }
+
+  // 本年
+  if (time.year() === now.year()) {
+    return time.format('MM月DD日')
+  }
+
+  // 非本年
+  return time.format('YYYY年MM月DD日')
+}
diff --git a/code/link56/link56-frontend-new/src/views/post/detail/components/comment-input.vue b/code/link56/link56-frontend-new/src/views/post/detail/components/comment-input.vue
new file mode 100644
index 00000000..5b43732c
--- /dev/null
+++ b/code/link56/link56-frontend-new/src/views/post/detail/components/comment-input.vue
@@ -0,0 +1,284 @@
+<script lang="ts" setup>
+import { ElMessage } from 'element-plus'
+import { computed, nextTick, ref, watch } from 'vue'
+import Vcode from 'vue3-puzzle-vcode'
+import { useRouter } from 'vue-router'
+import EmojiPopover from '@/components/EmojiPopover.vue'
+import { useUserStore } from '@/store/user'
+
+const props = defineProps({
+  modelValue: { type: String, default: '' },
+  placeholder: { type: String, default: '请输入内容...' },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+})
+const emits = defineEmits(['update:modelValue', 'submit'])
+
+const router = useRouter()
+const userStore = useUserStore()
+const showVcode = ref<boolean>(false)
+
+const inputRef = ref<HTMLElement | null>(null)
+const inputValue = ref('')
+
+const isInputFocused = ref(false) // 是否获得焦点
+
+const isEmpty = computed(() => {
+  if (inputValue.value.trim() === '') {
+    return true
+  }
+  return inputRef.value?.textContent?.trim() === ''
+})
+
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    inputValue.value = newVal
+    if (inputRef.value && inputRef.value.innerHTML !== newVal) {
+      inputRef.value.innerHTML = newVal
+    }
+  },
+)
+
+// 焦点事件处理
+function handleFocus() {
+  isInputFocused.value = true
+}
+
+function handleBlur() {
+  isInputFocused.value = false
+}
+// 输入内容变化处理
+function handleInputChange(event: any) {
+  let html = event.target.innerHTML || ''
+
+  if (html.trim() === '<br>' || html.trim() === '<div><br></div>') {
+    html = ''
+    event.target.innerHTML = ''
+  }
+
+  inputValue.value = html
+  emits('update:modelValue', inputValue.value)
+}
+
+function handleInputPaste(event: any) {
+  event.preventDefault()
+
+  const text = event.clipboardData.getData('text/plain')
+
+  // 获取当前光标位置
+  const selection = window.getSelection()
+  if (selection !== null && selection.rangeCount > 0) {
+    const range = selection.getRangeAt(0)
+
+    // 创建一个新的文本节点
+    const textNode = document.createTextNode(text)
+
+    // 将文本节点插入到当前光标位置
+    range.deleteContents()
+    range.insertNode(textNode)
+
+    // 重新设置光标位置到插入的文本节点后面
+    range.setStartAfter(textNode)
+    range.setEndAfter(textNode)
+    selection.removeAllRanges()
+    selection.addRange(range)
+    if (inputRef.value !== null) {
+      inputValue.value = inputRef.value.innerHTML
+      emits('update:modelValue', inputValue.value)
+    }
+  }
+}
+
+function handleInputKeyDown(event: any) {
+  // 判断是否是回车键
+  if (event.key === 'Enter') {
+    //
+  }
+}
+
+let lastCaretPosition: { node: Node, offset: number } | null = null
+
+// 插入内容函数（兼容现代浏览器）
+function insertContent(content: string) {
+  if (!inputRef.value)
+    return
+
+  const selection = window.getSelection()
+  if (!selection || !lastCaretPosition)
+    return
+
+  const range = document.createRange()
+  range.setStart(lastCaretPosition.node, lastCaretPosition.offset)
+  range.collapse(true)
+
+  const textNode = document.createTextNode(content)
+  range.insertNode(textNode)
+
+  range.setStartAfter(textNode)
+  range.collapse(true)
+
+  selection.removeAllRanges()
+  selection.addRange(range)
+
+  inputRef.value.dispatchEvent(new Event('input', { bubbles: true }))
+}
+
+// 保存光标位置
+function saveCaretPosition() {
+  const selection = window.getSelection()
+  if (!selection?.rangeCount)
+    return
+
+  const range = selection.getRangeAt(0)
+  lastCaretPosition = {
+    node: range.startContainer,
+    offset: range.startOffset,
+  }
+}
+
+// 选择emoji
+function handleEmojiSelect(emoji: string) {
+  insertContent(emoji || '')
+}
+// 发送按钮点击
+function handleSend() {
+  // 判断是否为空内容
+  if (inputRef.value?.textContent?.trim() === '') {
+    ElMessage.warning('发送内容不能为空！')
+    return
+  }
+  showVcode.value = true
+}
+
+function handleValiteVcodeSuccess() {
+  showVcode.value = false
+
+  // 发送内容给父组件
+  emits('submit', inputValue.value)
+
+  nextTick(() => {
+    inputValue.value = ''
+    if (inputRef.value) {
+      inputRef.value.textContent = ''
+    }
+  })
+}
+function handleToLogin() {
+  router.push('/login')
+}
+</script>
+
+<template>
+  <div v-if="userStore.isLogined" class="custom-input-container" :class="{ 'is-focused': isInputFocused }" v-bind="$attrs">
+    <div
+      ref="inputRef"
+      contenteditable="true"
+      class="custom-input"
+      :data-placeholder="placeholder"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @input="handleInputChange"
+      @paste="handleInputPaste"
+      @keydown="handleInputKeyDown"
+      @click="saveCaretPosition"
+      @keyup="saveCaretPosition"
+    />
+    <div class="custom-input-footer">
+      <EmojiPopover @select="handleEmojiSelect" />
+      <div>
+        <el-button type="primary" size="small" class="send-button" :disabled="isEmpty" :loading="loading" @click.stop="handleSend">
+          发送
+        </el-button>
+      </div>
+    </div>
+  </div>
+  <div v-else class="nologin-container">
+    <div class="nologin-title">
+      尚未登陆，请先登录后发表评论！
+    </div>
+    <el-button type="primary" size="small" @click="handleToLogin">
+      登录/注册
+    </el-button>
+  </div>
+  <Vcode :show="showVcode" @success="handleValiteVcodeSuccess" />
+</template>
+
+<style lang="scss" scoped>
+.custom-input-container {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid transparent;
+  background-color: #f2f3f5;
+  min-height: 100px;
+  max-height: 160px;
+  transition: all 0.3s ease;
+  width: 100%;
+}
+
+.nologin-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #f2f3f5;
+  height: 100px;
+  width: 100%;
+
+  gap: 8px;
+  .nologin-title {
+    font-size: 16px;
+    font-weight: bold;
+  }
+}
+
+.custom-input-container.is-focused {
+  border-color: rgb(22, 93, 255);
+  background-color: #fff !important;
+}
+.custom-input-container:hover {
+  background-color: #e5e6eb;
+}
+
+.custom-input {
+  flex: 1;
+  padding: 8px;
+  font-size: 16px;
+  box-sizing: border-box;
+  overflow-y: auto;
+  border: none;
+  resize: none;
+  outline: none;
+  background-color: transparent;
+  word-wrap: break-word;
+  word-break: break-all;
+  white-space: pre-wrap;
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  user-select: text;
+  cursor: text;
+
+  &[data-placeholder]:empty:before {
+    content: attr(data-placeholder);
+    color: #999;
+    pointer-events: none;
+    display: block;
+  }
+
+  &:focus:empty:before {
+    content: none;
+  }
+}
+
+.custom-input-footer {
+  padding: 8px 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.send-button {
+  width: 60px;
+}
+</style>
diff --git a/code/link56/link56-frontend-new/src/views/post/detail/components/comment-list.vue b/code/link56/link56-frontend-new/src/views/post/detail/components/comment-list.vue
new file mode 100644
index 00000000..9a9a4909
--- /dev/null
+++ b/code/link56/link56-frontend-new/src/views/post/detail/components/comment-list.vue
@@ -0,0 +1,303 @@
+<script lang="ts" setup>
+import type { PostComment, PublicPostDetail } from '@/types/post'
+import { ElMessage } from 'element-plus'
+import { nextTick, ref, watch } from 'vue'
+import SvgIcon from '@/components/SvgIcon.vue'
+import { createPostCommentApi } from '@/request/api/post'
+import { useUserStore } from '@/store/user'
+import CommentInput from './comment-input.vue'
+
+const props = defineProps<{
+  modelValue: PostComment[]
+  postDetail: PublicPostDetail
+}>()
+
+const commentList = ref<PostComment[]>([])
+const userStore = useUserStore()
+
+const replyCommentId = ref<number | null>(0)
+const replyCommentLoading = ref<boolean>(false)
+
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    commentList.value = newVal
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+)
+
+function handleReplyComment(commentId: number) {
+  if (replyCommentId.value === commentId) {
+    replyCommentId.value = null
+  }
+  else {
+    replyCommentId.value = commentId
+  }
+
+  nextTick(() => {
+    window.scrollTo({
+      top: document.documentElement.scrollHeight,
+      behavior: 'smooth',
+    })
+  })
+}
+
+function findRootComment(commentList: PostComment[], commentId: number | null): PostComment | undefined {
+  // 使用 for 循环遍历一级评论列表
+  for (const item of commentList) {
+    // 如果找到目标评论，直接返回该评论
+    if (item.id === commentId) {
+      return item
+    }
+
+    // 如果该评论有子评论，检查子评论
+    if (item.children) {
+      const childComment = item.children.find(child => child.id === commentId)
+      if (childComment) {
+        return item
+      }
+    }
+  }
+
+  // 如果没有找到对应评论，返回 undefined
+  return undefined
+}
+
+function handleReplyCommentSubmit(content: string) {
+  if (content === '') {
+    ElMessage.error('评论内容不能为空！')
+    return
+  }
+
+  replyCommentLoading.value = true
+
+  createPostCommentApi({
+    fatherId: replyCommentId.value,
+    postId: props.postDetail.id,
+    content,
+  })
+    .then((res) => {
+      // 显示成功消息
+      ElMessage.success(res.message)
+
+      // 查找根评论
+      const rootComment = findRootComment(commentList.value, replyCommentId.value)
+
+      // 如果根评论存在，并且根评论没有子评论，初始化子评论数组
+      if (rootComment) {
+        if (!rootComment.children) {
+          rootComment.children = [] // 初始化子评论数组
+        }
+
+        // 将新回复添加到子评论中
+        rootComment.children.push({
+          id: res.data.id,
+          fatherId: res.data.fatherId,
+          content: res.data.content,
+          createTime: res.data.createTime,
+          children: [],
+          publishUser: {
+            id: userStore.userInfo.user.id,
+            companyId: userStore.userInfo.company.id,
+            name: userStore.userInfo.user.name,
+            avatar: userStore.userInfo.company.logo,
+          },
+          replyUser: {
+            id: rootComment.publishUser.id,
+            companyId: rootComment.publishUser.companyId,
+            name: rootComment.publishUser.name,
+            avatar: rootComment.publishUser.avatar,
+          },
+        })
+      }
+      else {
+        commentList.value.push({
+          id: res.data.id,
+          fatherId: res.data.fatherId,
+          content: res.data.content,
+          createTime: res.data.createTime,
+          children: [],
+          publishUser: {
+            id: userStore.userInfo.user.id,
+            companyId: userStore.userInfo.company.id,
+            name: userStore.userInfo.user.name,
+            avatar: userStore.userInfo.company.logo,
+          },
+          replyUser: null,
+        })
+      }
+    })
+
+    .finally(() => {
+      replyCommentId.value = null
+      replyCommentLoading.value = false
+    })
+}
+</script>
+
+<template>
+  <div v-for="item in commentList" :key="item.id" class="custom-comment">
+    <div class="custom-comment-left">
+      <el-avatar class="custom-comment-avatar" :src="item.publishUser.avatar || '/no-avatar.png'" :size="70" />
+    </div>
+    <div class="custom-comment-right">
+      <div class="custom-comment-meta">
+        <div class="custom-comment-title">
+          <div class="custom-comment-author">
+            {{ item.publishUser.name }}
+          </div>
+          <div v-if="item.publishUser.companyId === postDetail.companyId" class="custom-comment-author-tag">
+            作者
+          </div>
+        </div>
+        <div class="custom-comment-time">
+          {{ item.createTime }}
+        </div>
+      </div>
+      <div class="custom-comment-content" v-html="item.content" />
+      <div class="custom-comment-actions">
+        <div class="custom-comment-action" :style="{ color: replyCommentId === item.id ? '#165dff' : '#1d2129' }" @click="handleReplyComment(item.id)">
+          <SvgIcon icon="mingcute:message-3-line" />
+          <div>{{ replyCommentId === item.id ? "取消回复" : "回复" }}</div>
+        </div>
+        <div class="custom-comment-action flex ml-auto">
+          <SvgIcon icon="akar-icons:more-horizontal-fill" />
+        </div>
+      </div>
+
+      <!-- 父级评论输入框 -->
+      <CommentInput v-if="replyCommentId === item.id" :loading="replyCommentLoading" @submit="handleReplyCommentSubmit" />
+
+      <!-- 子评论 -->
+      <div v-if="item.children && item.children.length > 0" class="custom-comment-children">
+        <div v-for="child in item.children" :key="child.id" class="custom-comment">
+          <div class="custom-comment-left">
+            <el-avatar class="custom-comment-avatar" :src="item.publishUser.avatar || '/no-avatar.png'" :size="70" />
+          </div>
+          <div class="custom-comment-right">
+            <div class="custom-comment-meta">
+              <div class="custom-comment-title">
+                <div class="custom-comment-author">
+                  {{ child.publishUser.name }}
+                </div>
+                <div v-if="child.publishUser.companyId === postDetail.companyId" class="custom-comment-author-tag">
+                  作者
+                </div>
+                <template v-if="child.replyUser && child.fatherId !== item.id">
+                  <div>回复</div>
+                  <div class="custom-comment-author">
+                    {{ child.replyUser.name }}
+                  </div>
+                </template>
+              </div>
+              <div class="custom-comment-time">
+                {{ child.createTime }}
+              </div>
+            </div>
+            <div class="custom-comment-content">
+              {{ child.content }}
+            </div>
+            <div class="custom-comment-actions">
+              <div class="custom-comment-action" :style="{ color: replyCommentId === child.id ? '#165dff' : '#1d2129' }" @click="handleReplyComment(child.id)">
+                <SvgIcon icon="mingcute:message-3-line" />
+                <div>{{ replyCommentId === child.id ? "取消回复" : "回复" }}</div>
+              </div>
+              <div class="custom-comment-action flex ml-auto">
+                <SvgIcon icon="akar-icons:more-horizontal-fill" />
+              </div>
+            </div>
+            <CommentInput v-if="replyCommentId === child.id" :loading="replyCommentLoading" @submit="handleReplyCommentSubmit" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.custom-comment {
+  margin-top: 1.5rem;
+}
+.custom-comment:first-child {
+  margin-top: 0;
+}
+
+.custom-comment {
+  display: flex;
+  gap: 8px;
+  line-height: 1.5;
+}
+.custom-comment-left {
+  display: flex;
+  flex-direction: column;
+}
+.custom-comment-right {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: 8px;
+}
+.custom-comment-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+.custom-comment-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .custom-comment-title {
+    font-size: 14px;
+    color: #4e5969;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .custom-comment-author {
+    cursor: pointer;
+  }
+  .custom-comment-author-tag {
+    background-color: #165dff;
+    color: #ffffff;
+    font-size: 12px;
+    border-radius: 4px;
+    padding: 1px 8px;
+  }
+  .custom-comment-time {
+    font-size: 12px;
+    color: #86909c;
+  }
+}
+.custom-comment-content {
+  font-size: 14px;
+  color: #1d2129;
+  word-break: break-all;
+  white-space: pre-wrap;
+}
+.custom-comment-actions {
+  display: flex;
+  gap: 8px;
+  .custom-comment-action {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    cursor: pointer;
+    font-size: 14px;
+    line-height: 14px;
+    color: #1d2129;
+  }
+  .custom-comment-action:hover {
+    color: #165dff;
+  }
+}
+
+.custom-comment-children {
+  margin-left: 20px;
+  margin-top: 12px;
+}
+</style>
diff --git a/code/link56/link56-frontend-new/src/views/post/detail/index.vue b/code/link56/link56-frontend-new/src/views/post/detail/index.vue
new file mode 100644
index 00000000..6a366dc5
--- /dev/null
+++ b/code/link56/link56-frontend-new/src/views/post/detail/index.vue
@@ -0,0 +1,380 @@
+<script setup lang="ts">
+import type { AnchorMenuItem } from '@/components/anchor-menu/type'
+import type { PostComment, PostCompany, PublicPostDetail } from '@/types/post'
+import { ElMessage } from 'element-plus'
+import { onMounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import AnchorMenu from '@/components/anchor-menu/index.vue'
+import CustomEmpty from '@/components/CustomEmpty.vue'
+import WandEditor from '@/components/wang-editor/index.vue'
+import { createPostCommentApi, getPostCompanyById, getPublicPostDetailApi, listPostCommentApi } from '@/request/api/post'
+import { useUserStore } from '@/store/user'
+import { formatPostTime } from '@/utils/time'
+import CommentInput from './components/comment-input.vue'
+import CommentList from './components/comment-list.vue'
+
+const route = useRoute()
+const router = useRouter()
+const userStore = useUserStore()
+
+const id = Number(route.params.id)
+
+const loading = ref<boolean>(true)
+const postCompany = ref<PostCompany>({
+  id: 0,
+  name: '',
+  logo: '',
+  profile: '',
+  areas: [],
+  industries: [],
+})
+
+const postDetail = ref<PublicPostDetail>({
+  id: 0,
+  title: '',
+  content: '',
+  tags: [],
+  activeTime: '',
+
+  viewCount: 0,
+  commentCount: 0,
+
+  companyId: 0,
+})
+
+const postComments = ref<PostComment[]>([])
+
+const anchorMenu = ref<AnchorMenuItem[]>([])
+
+const rootComment = ref<string>('')
+const rootCommentLoading = ref<boolean>(false)
+
+onMounted(async () => {
+  if (!id) {
+    router.push('/post')
+    return
+  }
+
+  loading.value = true
+
+  try {
+    // 获取帖子详情
+    const postRes = await getPublicPostDetailApi(id)
+    if (!postRes.isSuccess) {
+      throw new Error(postRes.message || '加载帖子失败，请稍后再试')
+    }
+    postDetail.value = postRes.data
+    console.log(postDetail.value)
+
+    // 获取公司信息
+    const companyRes = await getPostCompanyById(postDetail.value.companyId)
+    if (!companyRes.isSuccess) {
+      throw new Error(companyRes.message || '加载公司信息失败，请稍后再试')
+    }
+
+    postCompany.value = companyRes.data
+    console.log(postCompany.value)
+
+    // 获取评论信息
+    const commentRes = await listPostCommentApi(postDetail.value.id)
+    if (!commentRes.isSuccess) {
+      throw new Error(commentRes.message || '加载评论信息失败，请稍后再试')
+    }
+
+    postComments.value = commentRes.data
+  }
+  catch (err: any) {
+    console.log(err)
+    ElMessage.error(err.message || '加载数据失败，请稍后再试')
+    router.push('/post')
+  }
+  finally {
+    loading.value = false
+  }
+})
+
+function handleUpdateEditorDirectory(menus: AnchorMenuItem[]) {
+  anchorMenu.value = anchorMenu.value.concat(menus)
+}
+
+function handleSubmitRootComment(content: string) {
+  rootCommentLoading.value = true
+
+  createPostCommentApi({
+    fatherId: null,
+    postId: postDetail.value.id,
+    content,
+  })
+    .then((res) => {
+      if (res.isSuccess) {
+        rootComment.value = ''
+        ElMessage.success(res.message)
+
+        postComments.value.push({
+          id: res.data.id,
+          fatherId: res.data.fatherId,
+          content: res.data.content,
+          createTime: res.data.createTime,
+          children: [],
+          publishUser: {
+            id: userStore.userInfo.user.id,
+            companyId: userStore.userInfo.company.id,
+            name: userStore.userInfo.user.name,
+            avatar: userStore.userInfo.company.logo,
+          },
+          replyUser: null,
+        })
+      }
+      else {
+        ElMessage.error(res.message || '评论失败，请稍后再试')
+      }
+    })
+    .finally(() => {
+      rootCommentLoading.value = false
+    })
+}
+</script>
+
+<template>
+  <div class="post">
+    <div class="post-left">
+      <el-affix :offset="90">
+        <el-anchor type="underline">
+          <AnchorMenu :menu="anchorMenu" />
+        </el-anchor>
+      </el-affix>
+    </div>
+
+    <div class="post-center">
+      <div class="post-main">
+        <div class="post-title">
+          {{ postDetail.title }}
+        </div>
+        <div class="post-meta">
+          <div class="post-meta-item">
+            <SvgIcon icon="mdi:alarm" :size="18" />
+            <span>{{ formatPostTime(postDetail.activeTime) }} </span>
+          </div>
+          <div class="post-meta-item">
+            <SvgIcon icon="mdi:eye-outline" :size="18" />
+            <span>{{ postDetail.viewCount }} </span>
+          </div>
+          <div class="post-meta-item">
+            <SvgIcon icon="mdi:comment-outline" :size="16" />
+            <span>{{ postDetail.commentCount }} </span>
+          </div>
+        </div>
+      </div>
+
+      <div class="post-content">
+        <WandEditor v-model="postDetail.content" mode="view" @update:directory="handleUpdateEditorDirectory" />
+      </div>
+
+      <div class="post-comment">
+        <div class="divider" />
+
+        <div class="post-comment-title">
+          评论
+        </div>
+
+        <div class="primary-comment">
+          <el-avatar class="post-comment-avatar" :src="userStore.userInfo.company.logo || '/no-avatar.png'" :size="46" />
+
+          <CommentInput v-model="rootComment" :loading="rootCommentLoading" class="post-comment-input" @submit="handleSubmitRootComment" />
+        </div>
+
+        <div class="reply-comment">
+          <div v-if="postComments.length > 0" class="reply-comment-list">
+            <CommentList v-model="postComments" :post-detail="postDetail" />
+          </div>
+          <CustomEmpty v-else title="暂时没有评论 🤔" :in-container="true" />
+        </div>
+      </div>
+    </div>
+
+    <div class="post-right">
+      <el-affix :offset="70">
+        <div class="post-company">
+          <el-avatar :src="postCompany.logo || '/no-avatar.png'" :size="70" class="company-logo" />
+          <div class="company-info">
+            <h3 class="company-name">
+              {{ postCompany.name }}
+            </h3>
+
+            <div v-if="postCompany.areas.length > 0" class="company-meta">
+              <!-- 成立于 2012 年 · 上海 -->
+              {{ postCompany.areas.join("/") }}
+            </div>
+
+            <div class="company-desc">
+              {{ postCompany.profile }}
+            </div>
+
+            <div class="company-tags">
+              <span v-for="industry in postCompany.industries" :key="industry" class="tag">{{ industry }}</span>
+            </div>
+          </div>
+        </div>
+      </el-affix>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.post {
+  padding: 24px 100px;
+  display: flex;
+  background-color: #fff;
+  .post-left {
+    width: 240px;
+    flex-shrink: 0;
+
+    .anchor-title {
+      background-color: #fff;
+      font-weight: 600;
+      font-size: 14px;
+      line-height: 30px;
+    }
+  }
+
+  .post-center {
+    flex: 1;
+    margin: 0px 32px;
+    .post-main {
+      display: flex;
+      flex-direction: column;
+      background-color: #ffffff;
+      padding: 0px 16px 12px 16px;
+      width: 100%;
+
+      .post-title {
+        font-weight: bold;
+        font-size: 28px;
+        word-break: break-all;
+        white-space: normal;
+        line-height: 1.4;
+      }
+
+      .post-meta {
+        display: flex;
+        align-items: center;
+        margin-top: 8px;
+        .post-meta-item {
+          font-size: 14px;
+          line-height: 20px;
+          color: #8a919f;
+          flex-shrink: 0;
+          display: flex;
+          align-items: center;
+
+          & + .post-meta-item {
+            margin-left: 12px;
+          }
+          span {
+            margin-left: 6px;
+          }
+        }
+      }
+    }
+
+    .post-content {
+      padding: 16px;
+    }
+
+    .post-comment {
+      padding: 0px 16px;
+      display: flex;
+      flex-direction: column;
+
+      .divider {
+        height: 1px;
+        width: 100%;
+        background-color: #e0e0e0;
+        margin: 18px 0px;
+      }
+
+      .post-comment-title {
+        font-size: 18px;
+        font-weight: bold;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+
+      .primary-comment {
+        display: flex;
+        gap: 16px;
+        margin-top: 16px;
+        .primary-comment-avatar {
+          min-width: 0;
+          flex-shrink: 0;
+        }
+        .post-comment-input {
+          flex: 1;
+        }
+      }
+      .reply-comment {
+        display: flex;
+        flex-direction: column;
+        margin-top: 32px;
+        .reply-comment-list {
+          margin-bottom: 24px;
+        }
+      }
+    }
+  }
+
+  .post-right {
+    width: 360px;
+    flex-shrink: 0;
+
+    .post-company {
+      display: flex;
+      align-items: flex-start;
+      padding: 16px;
+      margin: 0 auto;
+      border-radius: 6px;
+      border: 1px solid #ddd;
+      .company-info {
+        flex: 1;
+        margin-left: 12px;
+      }
+
+      .company-name {
+        margin: 0;
+        font-size: 18px;
+        font-weight: 600;
+        color: #222;
+      }
+
+      .company-meta {
+        margin: 6px 0 10px;
+        font-size: 13px;
+        color: #888;
+      }
+
+      .company-desc {
+        font-size: 14px;
+        line-height: 1.6;
+        color: #555;
+        margin-bottom: 12px;
+      }
+
+      .company-tags {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+      }
+
+      .tag {
+        font-size: 12px;
+        padding: 4px 10px;
+        border-radius: 6px;
+        background-color: #eef5ff;
+        color: #3a7afe;
+        white-space: nowrap;
+      }
+    }
+  }
+}
+</style>
diff --git a/code/link56/link56-frontend-new/src/views/post/home/index.vue b/code/link56/link56-frontend-new/src/views/post/home/index.vue
index 9164efc7..e139454e 100644
--- a/code/link56/link56-frontend-new/src/views/post/home/index.vue
+++ b/code/link56/link56-frontend-new/src/views/post/home/index.vue
@@ -1,18 +1,102 @@
 <script lang="ts" setup>
 import type { PostTag } from '@/types/base'
+import type { PublicPost, QueryPublicPostParams } from '@/types/post'
 import { Search } from '@element-plus/icons-vue'
-import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { onMounted, reactive, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
 import CustomEmpty from '@/components/CustomEmpty.vue'
+import CustomLoading from '@/components/CustomLoading.vue'
 import SvgIcon from '@/components/SvgIcon.vue'
+import { queryPublicPostApi } from '@/request/api/post'
 import { useCommonStore } from '@/store/common'
+import { formatPostTime } from '@/utils/time'
 
+const router = useRouter()
 const { postTagOptions } = useCommonStore()
 
 const activeNames = ref(['1'])
-const selectedTag = ref<PostTag>(postTagOptions[0])
+const selectedTag = ref<PostTag | null>(null)
+
+const tableData = ref<PublicPost[]>([])
+
+const page = reactive<Pagination>({
+  current: 1,
+  pageSize: 10,
+  total: 0,
+})
+const queryForm = reactive<QueryPublicPostParams>({
+  currentPage: page.current,
+  pageSize: page.pageSize,
+
+  title: '',
+  tag: '',
+})
+const loading = ref<boolean>(false)
+
+onMounted(() => {
+  queryPost()
+})
+
+watch(
+  postTagOptions,
+  (list) => {
+    if (list.length && !selectedTag.value) {
+      selectedTag.value = list[0]
+    }
+  },
+  { immediate: true },
+)
 
 function handleChangeSelectedTag(tag: PostTag) {
   selectedTag.value = tag
+
+  if (selectedTag.value.id === 0) {
+    queryForm.tag = ''
+  }
+  else {
+    queryForm.tag = selectedTag.value.name
+  }
+
+  queryForm.title = ''
+
+  page.current = 1
+
+  queryPost()
+}
+
+function queryPost() {
+  loading.value = true
+  queryPublicPostApi({
+    ...queryForm,
+    currentPage: page.current,
+    pageSize: page.pageSize,
+  }).then((res) => {
+    if (res.isSuccess) {
+      tableData.value = res.data.records
+      page.total = res.data.total
+    }
+    else {
+      ElMessage.error(res.message || '查询失败，请稍后再试')
+    }
+  }).catch((err) => {
+    console.log(err)
+    ElMessage.error('查询失败，请稍后再试')
+  }).finally(() => {
+    loading.value = false
+  })
+}
+
+function handleSearch() {
+  page.current = 1
+
+  queryPost()
+}
+
+function toDetail(data: PublicPost) {
+  router.push({
+    path: `/post/detail/${data.id}`,
+  })
 }
 </script>
 
@@ -26,7 +110,7 @@ function handleChangeSelectedTag(tag: PostTag) {
               v-for="item in postTagOptions"
               :key="item.id"
               class="tag-item"
-              :class="{ active: selectedTag.id === item.id }"
+              :class="{ active: selectedTag && (selectedTag.id === item.id) }"
               @click="handleChangeSelectedTag(item)"
             >
               <SvgIcon v-if="item.icon" :icon="item.icon" />
@@ -40,55 +124,70 @@ function handleChangeSelectedTag(tag: PostTag) {
     <div class="post-main">
       <div class="post-main-header">
         <el-input
+          v-model="queryForm.title"
           :prefix-icon="Search"
-          placeholder="搜索" size="large"
+          placeholder="搜索"
+          size="large"
+          @keyup.enter="handleSearch"
         />
         <div class="post-pagination">
-          <el-pagination layout="prev, pager, next,jumper" background :total="1000" />
+          <el-pagination
+            v-model:current-page="page.current"
+            :page-size="page.pageSize"
+            :total="page.total"
+            layout="prev, pager, next,jumper"
+            size="small"
+            background
+            @change="queryPost"
+          />
         </div>
       </div>
 
       <div class="post-content">
-        <!-- <CustomEmpty :in-container="true" /> -->
+        <CustomLoading v-if="loading" :in-container="true" />
 
-        <div class="post-list">
-          <div v-for="i in 20" :key="i" class="post-item">
+        <div v-else-if="tableData.length > 0" class="post-list">
+          <div v-for="item in tableData" :key="item.id" class="post-item">
             <div class="post-title-row">
-              <div class="post-title">
-                新项目为什么推荐WebFlux，而非SpringMVC?
+              <div class="post-title" @click="toDetail(item)">
+                {{ item.title }}
               </div>
             </div>
             <div class="post-meta">
               <div class="post-meta-actions">
                 <div class="post-meta-item">
-                  <div>刘大华</div>
+                  <div class="post-meta-company">
+                    {{ item.companyName }}
+                  </div>
                 </div>
 
                 <div class="post-meta-divider" />
 
                 <div class="post-meta-item">
                   <SvgIcon icon="mdi:eye-outline" />
-                  <span>1.7k</span>
+                  <span>{{ item.viewCount }}</span>
                 </div>
                 <div class="post-meta-item">
                   <SvgIcon icon="iconamoon:comment" />
-                  <span>1.7k</span>
+                  <span>{{ item.commentCount }}</span>
                 </div>
 
                 <div class="post-meta-divider" />
 
                 <div class="post-meta-item">
-                  <div>20分钟前</div>
+                  <div>{{ formatPostTime(item.activeTime) }}</div>
                 </div>
               </div>
               <div class="post-meta-tags">
-                <div class="post-tag">
-                  后端
+                <div v-for="tag in item.tags" :key="tag" class="post-tag">
+                  {{ tag }}
                 </div>
               </div>
             </div>
           </div>
         </div>
+
+        <CustomEmpty v-else :in-container="true" />
       </div>
     </div>
   </div>
@@ -96,6 +195,7 @@ function handleChangeSelectedTag(tag: PostTag) {
 
 <style lang="scss" scoped>
 .post-wrapper {
+  height: 100%;
   display: flex;
   padding: 0px 240px;
   background-color: #fff;
@@ -153,8 +253,10 @@ function handleChangeSelectedTag(tag: PostTag) {
   }
 
   .post-main {
+    display: flex;
+    flex-direction: column;
     flex: 1;
-    height: 100%;
+    width: 100%;
     flex-shrink: 0;
     .post-main-header {
       position: sticky;
@@ -169,6 +271,7 @@ function handleChangeSelectedTag(tag: PostTag) {
     }
 
     .post-content {
+      flex: 1;
       padding-bottom: 36px;
     }
 
@@ -177,19 +280,24 @@ function handleChangeSelectedTag(tag: PostTag) {
       flex-direction: column;
 
       .post-item {
-        padding: 12px 16px;
+        padding: 6px 16px;
         border-bottom: 1px solid #ddd;
 
         .post-title-row {
           display: flex;
           margin-bottom: 8px;
+
           .post-title {
-            font-weight: 400;
+            font-weight: 500;
             font-size: 16px;
             line-height: 24px;
             color: #252933;
             width: 100%;
             cursor: pointer;
+            &:hover {
+              color: #ff6600;
+              text-decoration: underline;
+            }
           }
         }
 
@@ -200,12 +308,13 @@ function handleChangeSelectedTag(tag: PostTag) {
           justify-content: space-between;
           width: 100%;
           flex-wrap: wrap;
+
           .post-meta-actions {
             display: flex;
             align-items: center;
 
             .post-meta-item {
-              font-size: 14px;
+              font-size: 13px;
               line-height: 20px;
               color: #8a919f;
               flex-shrink: 0;
@@ -215,13 +324,17 @@ function handleChangeSelectedTag(tag: PostTag) {
                 margin-left: 12px;
               }
               span {
-                margin-left: 4px;
+                margin-left: 6px;
+              }
+
+              .post-meta-company {
+                color: #0053a1;
               }
             }
 
             .post-meta-divider {
               width: 1px;
-              height: 12px;
+              height: 16px;
               background-color: #e4e6eb;
               margin: 0 12px;
               flex-shrink: 0;
diff --git a/code/link56/link56-frontend-new/test.html b/code/link56/link56-frontend-new/test.html
index 7d54558a..41cbccd7 100644
--- a/code/link56/link56-frontend-new/test.html
+++ b/code/link56/link56-frontend-new/test.html
@@ -1,1731 +1,118 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
+
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>企业信息平台 | 连接商业未来</title>
-    <!-- Bootstrap 5 CSS -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
-    <!-- Font Awesome -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <!-- 自定义CSS -->
+    <meta charset="UTF-8" />
+    <title>公司信息卡片</title>
     <style>
-        :root {
-            --primary-color: #1a73e8;
-            --secondary-color: #34a853;
-            --accent-color: #fbbc05;
-            --dark-color: #202124;
-            --light-color: #f8f9fa;
-            --gray-color: #5f6368;
-            --border-radius: 12px;
-            --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-            --transition: all 0.3s ease;
-        }
-        
         * {
-            margin: 0;
-            padding: 0;
             box-sizing: border-box;
         }
-        
+
         body {
-            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
-            background-color: #f5f7fa;
-            color: var(--dark-color);
-            line-height: 1.6;
+            margin: 0;
+            padding: 40px;
+            background-color: #ffffff;
+            /* 页面白色背景 */
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
+                "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
+            color: #333;
         }
-        
-        /* 导航栏 */
-        .navbar-brand {
-            font-weight: 700;
-            font-size: 1.5rem;
-            color: var(--primary-color);
-        }
-        
-        .navbar-brand i {
-            margin-right: 8px;
-        }
-        
-        .nav-link {
-            font-weight: 500;
-            padding: 8px 16px;
-            border-radius: 8px;
-            transition: var(--transition);
-        }
-        
-        .nav-link:hover, .nav-link.active {
-            background-color: rgba(26, 115, 232, 0.1);
-            color: var(--primary-color);
-        }
-        
-        .user-avatar {
-            width: 36px;
-            height: 36px;
-            border-radius: 50%;
-            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-            color: white;
+
+        .company-card {
             display: flex;
-            align-items: center;
-            justify-content: center;
-            font-weight: 600;
+            align-items: flex-start;
+            max-width: 520px;
+            background-color: #fff;
+            /* 卡片白色背景 */
+            padding: 20px;
+            margin: 0 auto;
+            border-radius: 12px;
+            border: 1px solid #ddd;
+            transition: all 0.2s ease;
         }
-        
-        /* 主内容区 */
-        .main-container {
-            padding-top: 20px;
-        }
-        
-        .page-title {
-            font-weight: 700;
-            margin-bottom: 24px;
-            color: var(--dark-color);
-        }
-        
-        /* 卡片样式 */
-        .card {
-            border: none;
-            border-radius: var(--border-radius);
-            box-shadow: var(--box-shadow);
-            transition: var(--transition);
-            overflow: hidden;
-        }
-        
-        .card:hover {
-            transform: translateY(-5px);
+
+        .company-card:hover {
+            transform: translateY(-2px);
             box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
         }
-        
-        .card-header {
-            background-color: white;
-            border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-            font-weight: 600;
-            padding: 16px 20px;
-        }
-        
-        .card-body {
-            padding: 20px;
-        }
-        
-        /* 企业卡片 */
-        .company-card {
-            height: 100%;
-            cursor: pointer;
-        }
-        
+
         .company-logo {
-            width: 80px;
-            height: 80px;
-            border-radius: 12px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 28px;
-            font-weight: 700;
-            color: white;
-            margin: 0 auto 16px;
+            width: 72px;
+            height: 72px;
+            border-radius: 10px;
+            object-fit: cover;
+            margin-right: 16px;
+            border: 1px solid #eee;
         }
-        
+
+        .company-info {
+            flex: 1;
+        }
+
         .company-name {
+            margin: 0;
+            font-size: 18px;
             font-weight: 600;
-            font-size: 1.1rem;
-            margin-bottom: 8px;
-            color: var(--dark-color);
+            color: #222;
         }
-        
-        .company-industry {
-            font-size: 0.85rem;
-            color: var(--gray-color);
+
+        .company-meta {
+            margin: 6px 0 10px;
+            font-size: 13px;
+            color: #888;
+        }
+
+        .company-desc {
+            font-size: 14px;
+            line-height: 1.6;
+            color: #555;
             margin-bottom: 12px;
         }
-        
-        .company-tag {
-            display: inline-block;
-            background-color: rgba(26, 115, 232, 0.1);
-            color: var(--primary-color);
+
+        .company-tags {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+        }
+
+        .tag {
+            font-size: 12px;
             padding: 4px 10px;
-            border-radius: 20px;
-            font-size: 0.8rem;
-            margin-right: 6px;
-            margin-bottom: 6px;
-        }
-        
-        .company-rating {
-            color: var(--accent-color);
-        }
-        
-        /* 按钮样式 */
-        .btn-primary {
-            background-color: var(--primary-color);
-            border-color: var(--primary-color);
-            padding: 8px 20px;
-            border-radius: 8px;
-            font-weight: 500;
-        }
-        
-        .btn-primary:hover {
-            background-color: #0d62d9;
-            border-color: #0d62d9;
-        }
-        
-        .btn-outline-primary {
-            color: var(--primary-color);
-            border-color: var(--primary-color);
-            border-radius: 8px;
-            font-weight: 500;
-        }
-        
-        .btn-outline-primary:hover {
-            background-color: var(--primary-color);
-            border-color: var(--primary-color);
-        }
-        
-        /* 标签样式 */
-        .badge-verified {
-            background-color: #e6f4ea;
-            color: var(--secondary-color);
-            font-weight: 500;
-            padding: 4px 10px;
-            border-radius: 20px;
-        }
-        
-        /* 搜索框 */
-        .search-container {
-            background-color: white;
-            border-radius: var(--border-radius);
-            padding: 20px;
-            box-shadow: var(--box-shadow);
-            margin-bottom: 30px;
-        }
-        
-        .search-input {
-            border-radius: 8px;
-            border: 2px solid #e0e0e0;
-            padding: 12px 20px;
-            font-size: 1rem;
-            transition: var(--transition);
-        }
-        
-        .search-input:focus {
-            border-color: var(--primary-color);
-            box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);
-        }
-        
-        /* 页脚 */
-        .footer {
-            background-color: var(--dark-color);
-            color: white;
-            margin-top: 60px;
-            padding: 40px 0 20px;
-        }
-        
-        .footer h5 {
-            font-weight: 600;
-            margin-bottom: 20px;
-        }
-        
-        .footer-links a {
-            color: #bdc1c6;
-            text-decoration: none;
-            display: block;
-            margin-bottom: 10px;
-            transition: var(--transition);
-        }
-        
-        .footer-links a:hover {
-            color: white;
-            padding-left: 5px;
-        }
-        
-        .copyright {
-            border-top: 1px solid #3c4043;
-            padding-top: 20px;
-            margin-top: 30px;
-            text-align: center;
-            color: #9aa0a6;
-            font-size: 0.9rem;
-        }
-        
-        /* 页面切换 */
-        .page {
-            display: none;
-        }
-        
-        .page.active {
-            display: block;
-            animation: fadeIn 0.5s ease;
-        }
-        
-        @keyframes fadeIn {
-            from { opacity: 0; }
-            to { opacity: 1; }
-        }
-        
-        /* 企业详情页 */
-        .company-header {
-            background: linear-gradient(135deg, #1a73e8, #4285f4);
-            color: white;
-            border-radius: var(--border-radius);
-            padding: 30px;
-            margin-bottom: 30px;
-        }
-        
-        .company-avatar {
-            width: 120px;
-            height: 120px;
-            border-radius: 20px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 48px;
-            font-weight: 700;
-            color: white;
-            background-color: rgba(255, 255, 255, 0.2);
-            border: 4px solid white;
-        }
-        
-        .company-detail-title {
-            font-weight: 700;
-            margin-bottom: 20px;
-            padding-bottom: 10px;
-            border-bottom: 2px solid rgba(0, 0, 0, 0.08);
-        }
-        
-        /* 聊天界面 */
-        .chat-container {
-            height: 500px;
-            border-radius: var(--border-radius);
-            overflow: hidden;
-            box-shadow: var(--box-shadow);
-        }
-        
-        .chat-sidebar {
-            background-color: #f8f9fa;
-            border-right: 1px solid #e0e0e0;
-            height: 100%;
-            overflow-y: auto;
-        }
-        
-        .chat-contact {
-            padding: 15px;
-            border-bottom: 1px solid #e0e0e0;
-            cursor: pointer;
-            transition: var(--transition);
-        }
-        
-        .chat-contact:hover, .chat-contact.active {
-            background-color: white;
-        }
-        
-        .chat-messages {
-            height: calc(100% - 60px);
-            overflow-y: auto;
-            padding: 20px;
-            background-color: #f0f2f5;
-        }
-        
-        .message {
-            margin-bottom: 20px;
-            max-width: 70%;
-        }
-        
-        .message.received {
-            align-self: flex-start;
-        }
-        
-        .message.sent {
-            align-self: flex-end;
-            margin-left: auto;
-        }
-        
-        .message-content {
-            padding: 12px 16px;
-            border-radius: 18px;
-            display: inline-block;
-        }
-        
-        .message.received .message-content {
-            background-color: white;
-            border-top-left-radius: 4px;
-        }
-        
-        .message.sent .message-content {
-            background-color: var(--primary-color);
-            color: white;
-            border-top-right-radius: 4px;
-        }
-        
-        /* 响应式调整 */
-        @media (max-width: 768px) {
-            .company-header {
-                padding: 20px;
-            }
-            
-            .company-avatar {
-                width: 80px;
-                height: 80px;
-                font-size: 32px;
-                margin-bottom: 15px;
-            }
-            
-            .chat-container {
-                height: 400px;
-            }
-        }
-        
-        /* 表单样式 */
-        .form-card {
-            max-width: 800px;
-            margin: 0 auto;
-        }
-        
-        .form-section {
-            margin-bottom: 30px;
-        }
-        
-        .step-indicator {
-            display: flex;
-            margin-bottom: 30px;
-        }
-        
-        .step {
-            flex: 1;
-            text-align: center;
-            position: relative;
-        }
-        
-        .step-number {
-            width: 40px;
-            height: 40px;
-            border-radius: 50%;
-            background-color: #e0e0e0;
-            color: #757575;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-weight: 600;
-            margin: 0 auto 10px;
-            z-index: 2;
-            position: relative;
-        }
-        
-        .step.active .step-number {
-            background-color: var(--primary-color);
-            color: white;
-        }
-        
-        .step.completed .step-number {
-            background-color: var(--secondary-color);
-            color: white;
-        }
-        
-        .step-line {
-            position: absolute;
-            top: 20px;
-            left: 50%;
-            right: -50%;
-            height: 2px;
-            background-color: #e0e0e0;
-            z-index: 1;
-        }
-        
-        .step:last-child .step-line {
-            display: none;
-        }
-        
-        .step.active .step-line, .step.completed .step-line {
-            background-color: var(--primary-color);
-        }
-        
-        /* 工具类 */
-        .text-primary {
-            color: var(--primary-color) !important;
-        }
-        
-        .bg-light {
-            background-color: var(--light-color) !important;
-        }
-        
-        .shadow {
-            box-shadow: var(--box-shadow) !important;
-        }
-        
-        .rounded-lg {
-            border-radius: var(--border-radius) !important;
+            border-radius: 6px;
+            background-color: #eef5ff;
+            color: #3a7afe;
+            white-space: nowrap;
         }
     </style>
 </head>
+
 <body>
-    <!-- 导航栏 -->
-    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm sticky-top">
-        <div class="container">
-            <a class="navbar-brand" href="#">
-                <i class="fas fa-handshake"></i> 企联汇
-            </a>
-            
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
-                <span class="navbar-toggler-icon"></span>
-            </button>
-            
-            <div class="collapse navbar-collapse" id="navbarNav">
-                <ul class="navbar-nav me-auto">
-                    <li class="nav-item">
-                        <a class="nav-link active" href="#" data-page="home">首页</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="#" data-page="discover">发现企业</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="#" data-page="messages">消息中心</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="#" data-page="register">企业入驻</a>
-                    </li>
-                </ul>
-                
-                <div class="d-flex align-items-center">
-                    <div class="input-group me-3" style="width: 300px;">
-                        <input type="text" class="form-control search-input" placeholder="搜索企业、产品或服务">
-                        <button class="btn btn-outline-primary" type="button">
-                            <i class="fas fa-search"></i>
-                        </button>
-                    </div>
-                    
-                    <div class="dropdown me-3">
-                        <button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
-                            <i class="fas fa-user me-1"></i> 我的账户
-                        </button>
-                        <ul class="dropdown-menu">
-                            <li><a class="dropdown-item" href="#"><i class="fas fa-building me-2"></i> 我的企业</a></li>
-                            <li><a class="dropdown-item" href="#"><i class="fas fa-heart me-2"></i> 我的收藏</a></li>
-                            <li><a class="dropdown-item" href="#"><i class="fas fa-cog me-2"></i> 账户设置</a></li>
-                            <li><hr class="dropdown-divider"></li>
-                            <li><a class="dropdown-item" href="#"><i class="fas fa-sign-out-alt me-2"></i> 退出登录</a></li>
-                        </ul>
-                    </div>
-                    
-                    <div class="user-avatar" data-bs-toggle="tooltip" title="张三">
-                        张
-                    </div>
-                </div>
-            </div>
-        </div>
-    </nav>
 
-    <!-- 主容器 -->
-    <div class="container main-container">
-        <!-- 首页 -->
-        <div id="home-page" class="page active">
-            <div class="row mb-5">
-                <div class="col-12">
-                    <h1 class="page-title">发现优秀企业，建立商业连接</h1>
-                </div>
+    <div class="company-card">
+        <img class="company-logo" src="https://via.placeholder.com/150" alt="公司 Logo" />
+
+        <div class="company-info">
+            <h3 class="company-name">远航国际物流有限公司</h3>
+
+            <div class="company-meta">
+                成立于 2012 年 · 上海
             </div>
-            
-            <!-- 搜索区域 -->
-            <div class="search-container">
-                <div class="row g-3">
-                    <div class="col-md-8">
-                        <input type="text" class="form-control form-control-lg search-input" placeholder="搜索企业名称、产品或服务">
-                    </div>
-                    <div class="col-md-2">
-                        <select class="form-select form-select-lg">
-                            <option selected>选择行业</option>
-                            <option value="tech">科技/互联网</option>
-                            <option value="manufacturing">制造业</option>
-                            <option value="finance">金融/投资</option>
-                            <option value="service">服务业</option>
-                        </select>
-                    </div>
-                    <div class="col-md-2">
-                        <button class="btn btn-primary w-100 btn-lg">
-                            <i class="fas fa-search me-2"></i> 搜索
-                        </button>
-                    </div>
-                </div>
-                
-                <div class="row mt-4">
-                    <div class="col-12">
-                        <div class="d-flex flex-wrap">
-                            <span class="badge bg-light text-dark me-2 mb-2 p-2">热门搜索：</span>
-                            <a href="#" class="badge bg-light text-dark me-2 mb-2 p-2">软件开发</a>
-                            <a href="#" class="badge bg-light text-dark me-2 mb-2 p-2">智能制造</a>
-                            <a href="#" class="badge bg-light text-dark me-2 mb-2 p-2">供应链</a>
-                            <a href="#" class="badge bg-light text-dark me-2 mb-2 p-2">人工智能</a>
-                            <a href="#" class="badge bg-light text-dark me-2 mb-2 p-2">生物科技</a>
-                            <a href="#" class="badge bg-light text-dark me-2 mb-2 p-2">新能源</a>
-                        </div>
-                    </div>
-                </div>
+
+            <div class="company-desc">
+                专注于海运、空运及多式联运服务，为客户提供高效、稳定、
+                可视化的国际物流解决方案，覆盖全球主要港口。
             </div>
-            
-            <!-- 推荐企业 -->
-            <div class="row mb-5">
-                <div class="col-12">
-                    <h2 class="mb-4">推荐企业</h2>
-                </div>
-                
-                <!-- 企业卡片 -->
-                <div class="col-md-6 col-lg-4 col-xl-3 mb-4">
-                    <div class="card company-card" data-company-id="1">
-                        <div class="card-body text-center">
-                            <div class="company-logo bg-primary mb-3">创</div>
-                            <div class="d-flex justify-content-center mb-2">
-                                <span class="badge-verified me-2"><i class="fas fa-check-circle me-1"></i> 已认证</span>
-                                <span class="company-rating">
-                                    <i class="fas fa-star"></i> 4.8
-                                </span>
-                            </div>
-                            <h5 class="company-name">创新科技有限公司</h5>
-                            <p class="company-industry">科技 · 北京 · 201-1000人</p>
-                            <p class="text-muted small mb-3">专注于企业级SaaS解决方案提供商，为中小企业提供数字化转型服务</p>
-                            <div class="mb-3">
-                                <span class="company-tag">高新技术企业</span>
-                                <span class="company-tag">ISO9001认证</span>
-                                <span class="company-tag">专精特新</span>
-                            </div>
-                            <button class="btn btn-outline-primary btn-sm w-100">查看详情</button>
-                        </div>
-                    </div>
-                </div>
-                
-                <div class="col-md-6 col-lg-4 col-xl-3 mb-4">
-                    <div class="card company-card" data-company-id="2">
-                        <div class="card-body text-center">
-                            <div class="company-logo bg-success mb-3">智</div>
-                            <div class="d-flex justify-content-center mb-2">
-                                <span class="badge-verified me-2"><i class="fas fa-check-circle me-1"></i> 已认证</span>
-                                <span class="company-rating">
-                                    <i class="fas fa-star"></i> 4.6
-                                </span>
-                            </div>
-                            <h5 class="company-name">智能制造集团</h5>
-                            <p class="company-industry">制造业 · 上海 · 1000+人</p>
-                            <p class="text-muted small mb-3">领先的智能制造解决方案提供商，工业自动化与机器人技术专家</p>
-                            <div class="mb-3">
-                                <span class="company-tag">智能制造</span>
-                                <span class="company-tag">工业4.0</span>
-                                <span class="company-tag">机器人</span>
-                            </div>
-                            <button class="btn btn-outline-primary btn-sm w-100">查看详情</button>
-                        </div>
-                    </div>
-                </div>
-                
-                <div class="col-md-6 col-lg-4 col-xl-3 mb-4">
-                    <div class="card company-card" data-company-id="3">
-                        <div class="card-body text-center">
-                            <div class="company-logo bg-warning mb-3">绿</div>
-                            <div class="d-flex justify-content-center mb-2">
-                                <span class="badge-verified me-2"><i class="fas fa-check-circle me-1"></i> 已认证</span>
-                                <span class="company-rating">
-                                    <i class="fas fa-star"></i> 4.9
-                                </span>
-                            </div>
-                            <h5 class="company-name">绿色能源科技</h5>
-                            <p class="company-industry">新能源 · 深圳 · 51-200人</p>
-                            <p class="text-muted small mb-3">专注于太阳能和储能技术的研发与应用，提供清洁能源解决方案</p>
-                            <div class="mb-3">
-                                <span class="company-tag">新能源</span>
-                                <span class="company-tag">环保</span>
-                                <span class="company-tag">光伏</span>
-                            </div>
-                            <button class="btn btn-outline-primary btn-sm w-100">查看详情</button>
-                        </div>
-                    </div>
-                </div>
-                
-                <div class="col-md-6 col-lg-4 col-xl-3 mb-4">
-                    <div class="card company-card" data-company-id="4">
-                        <div class="card-body text-center">
-                            <div class="company-logo bg-info mb-3">数</div>
-                            <div class="d-flex justify-content-center mb-2">
-                                <span class="badge-verified me-2"><i class="fas fa-check-circle me-1"></i> 已认证</span>
-                                <span class="company-rating">
-                                    <i class="fas fa-star"></i> 4.7
-                                </span>
-                            </div>
-                            <h5 class="company-name">数字营销有限公司</h5>
-                            <p class="company-industry">服务 · 杭州 · 1-50人</p>
-                            <p class="text-muted small mb-3">专业的数字营销服务提供商，帮助企业实现线上业务增长</p>
-                            <div class="mb-3">
-                                <span class="company-tag">数字营销</span>
-                                <span class="company-tag">SEO优化</span>
-                                <span class="company-tag">社交媒体</span>
-                            </div>
-                            <button class="btn btn-outline-primary btn-sm w-100">查看详情</button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            
-            <!-- 功能区域 -->
-            <div class="row mb-5">
-                <div class="col-md-4 mb-4">
-                    <div class="card h-100 text-center">
-                        <div class="card-body">
-                            <div class="display-1 text-primary mb-3">
-                                <i class="fas fa-building"></i>
-                            </div>
-                            <h4 class="card-title">企业入驻</h4>
-                            <p class="card-text">免费创建企业主页，展示您的产品与服务，获取更多商业机会</p>
-                            <button class="btn btn-primary mt-3" data-page="register">立即入驻</button>
-                        </div>
-                    </div>
-                </div>
-                
-                <div class="col-md-4 mb-4">
-                    <div class="card h-100 text-center">
-                        <div class="card-body">
-                            <div class="display-1 text-primary mb-3">
-                                <i class="fas fa-search"></i>
-                            </div>
-                            <h4 class="card-title">精准搜索</h4>
-                            <p class="card-text">通过行业、地区、规模等多维度筛选，快速找到合作伙伴</p>
-                            <button class="btn btn-primary mt-3" data-page="discover">发现企业</button>
-                        </div>
-                    </div>
-                </div>
-                
-                <div class="col-md-4 mb-4">
-                    <div class="card h-100 text-center">
-                        <div class="card-body">
-                            <div class="display-1 text-primary mb-3">
-                                <i class="fas fa-comments"></i>
-                            </div>
-                            <h4 class="card-title">即时沟通</h4>
-                            <p class="card-text">与潜在合作伙伴在线沟通，快速建立联系，洽谈合作事宜</p>
-                            <button class="btn btn-primary mt-3" data-page="messages">消息中心</button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        
-        <!-- 企业详情页 -->
-        <div id="company-detail-page" class="page">
-            <button class="btn btn-outline-primary mb-4" id="back-to-home">
-                <i class="fas fa-arrow-left me-2"></i> 返回
-            </button>
-            
-            <div class="company-header">
-                <div class="row align-items-center">
-                    <div class="col-md-3 text-center text-md-start mb-3 mb-md-0">
-                        <div class="company-avatar mx-auto mx-md-0">创</div>
-                    </div>
-                    <div class="col-md-9">
-                        <div class="d-flex flex-wrap align-items-center mb-3">
-                            <h1 class="text-white me-3 mb-2">创新科技有限公司</h1>
-                            <span class="badge-verified me-3 mb-2"><i class="fas fa-check-circle me-1"></i> 已认证</span>
-                            <span class="company-rating mb-2">
-                                <i class="fas fa-star"></i> 4.8 (128 评价)
-                            </span>
-                        </div>
-                        <div class="row text-white">
-                            <div class="col-md-6 mb-2">
-                                <i class="fas fa-industry me-2"></i> 科技/软件/人工智能
-                            </div>
-                            <div class="col-md-6 mb-2">
-                                <i class="fas fa-users me-2"></i> 201-1000人
-                            </div>
-                            <div class="col-md-6 mb-2">
-                                <i class="fas fa-map-marker-alt me-2"></i> 北京市海淀区
-                            </div>
-                            <div class="col-md-6 mb-2">
-                                <i class="fas fa-calendar-alt me-2"></i> 成立于 2015年
-                            </div>
-                        </div>
-                        <div class="mt-4">
-                            <button class="btn btn-light me-3">
-                                <i class="fas fa-star me-2"></i> 关注
-                            </button>
-                            <button class="btn btn-light me-3" id="send-message-btn">
-                                <i class="fas fa-comment me-2"></i> 发送消息
-                            </button>
-                            <button class="btn btn-light">
-                                <i class="fas fa-phone me-2"></i> 拨打电话
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            
-            <div class="row">
-                <div class="col-lg-8">
-                    <!-- 公司信息标签页 -->
-                    <div class="card mb-4">
-                        <div class="card-header">
-                            <ul class="nav nav-tabs card-header-tabs">
-                                <li class="nav-item">
-                                    <a class="nav-link active" data-bs-toggle="tab" href="#overview">公司概况</a>
-                                </li>
-                                <li class="nav-item">
-                                    <a class="nav-link" data-bs-toggle="tab" href="#products">产品与服务</a>
-                                </li>
-                                <li class="nav-item">
-                                    <a class="nav-link" data-bs-toggle="tab" href="#cases">成功案例</a>
-                                </li>
-                                <li class="nav-item">
-                                    <a class="nav-link" data-bs-toggle="tab" href="#contact">联系方式</a>
-                                </li>
-                            </ul>
-                        </div>
-                        <div class="card-body">
-                            <div class="tab-content">
-                                <!-- 公司概况 -->
-                                <div class="tab-pane fade show active" id="overview">
-                                    <h4 class="company-detail-title">公司简介</h4>
-                                    <p class="mb-4">创新科技有限公司成立于2015年，是一家专注于企业级SaaS解决方案的高新技术企业。公司致力于为中小企业提供数字化转型服务，通过云计算、大数据和人工智能技术，帮助企业提升运营效率、降低成本和实现业务增长。</p>
-                                    <p class="mb-4">公司核心团队来自国内外知名科技企业，拥有丰富的行业经验和深厚的技术积累。我们始终坚持以客户需求为导向，以技术创新为驱动，为超过5000家企业提供了优质的服务。</p>
-                                    
-                                    <h4 class="company-detail-title mt-5">核心业务</h4>
-                                    <div class="row">
-                                        <div class="col-md-6 mb-3">
-                                            <div class="card h-100">
-                                                <div class="card-body">
-                                                    <h5><i class="fas fa-cloud text-primary me-2"></i> 企业云服务</h5>
-                                                    <p class="mb-0">提供安全可靠的云基础设施和SaaS应用，支持企业快速上云和业务扩展。</p>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="col-md-6 mb-3">
-                                            <div class="card h-100">
-                                                <div class="card-body">
-                                                    <h5><i class="fas fa-robot text-primary me-2"></i> 智能解决方案</h5>
-                                                    <p class="mb-0">基于AI技术的智能客服、数据分析、自动化流程等解决方案，提升企业智能化水平。</p>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="col-md-6 mb-3">
-                                            <div class="card h-100">
-                                                <div class="card-body">
-                                                    <h5><i class="fas fa-chart-line text-primary me-2"></i> 数字化转型咨询</h5>
-                                                    <p class="mb-0">为企业提供数字化转型战略规划、技术选型和实施指导服务。</p>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="col-md-6 mb-3">
-                                            <div class="card h-100">
-                                                <div class="card-body">
-                                                    <h5><i class="fas fa-shield-alt text-primary me-2"></i> 安全与合规</h5>
-                                                    <p class="mb-0">提供全方位的数据安全和合规解决方案，确保企业信息安全符合监管要求。</p>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    
-                                    <h4 class="company-detail-title mt-5">企业资质</h4>
-                                    <div class="row">
-                                        <div class="col-md-3 col-6 mb-3 text-center">
-                                            <div class="p-3 border rounded-lg">
-                                                <div class="display-5 text-primary mb-2">
-                                                    <i class="fas fa-award"></i>
-                                                </div>
-                                                <div>高新技术企业</div>
-                                            </div>
-                                        </div>
-                                        <div class="col-md-3 col-6 mb-3 text-center">
-                                            <div class="p-3 border rounded-lg">
-                                                <div class="display-5 text-primary mb-2">
-                                                    <i class="fas fa-certificate"></i>
-                                                </div>
-                                                <div>ISO9001认证</div>
-                                            </div>
-                                        </div>
-                                        <div class="col-md-3 col-6 mb-3 text-center">
-                                            <div class="p-3 border rounded-lg">
-                                                <div class="display-5 text-primary mb-2">
-                                                    <i class="fas fa-medal"></i>
-                                                </div>
-                                                <div>专精特新企业</div>
-                                            </div>
-                                        </div>
-                                        <div class="col-md-3 col-6 mb-3 text-center">
-                                            <div class="p-3 border rounded-lg">
-                                                <div class="display-5 text-primary mb-2">
-                                                    <i class="fas fa-shield-alt"></i>
-                                                </div>
-                                                <div>CMMI 3级</div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                
-                                <!-- 产品与服务 -->
-                                <div class="tab-pane fade" id="products">
-                                    <h4 class="company-detail-title">核心产品</h4>
-                                    
-                                    <div class="card mb-4">
-                                        <div class="card-body">
-                                            <div class="row">
-                                                <div class="col-md-3 text-center">
-                                                    <div class="display-3 text-primary mb-3">
-                                                        <i class="fas fa-cloud"></i>
-                                                    </div>
-                                                </div>
-                                                <div class="col-md-9">
-                                                    <h5>创新云平台</h5>
-                                                    <p class="text-muted">一体化企业云服务平台，提供计算、存储、网络、安全等全套云服务。</p>
-                                                    <div class="mb-3">
-                                                        <span class="badge bg-primary me-2">云计算</span>
-                                                        <span class="badge bg-primary me-2">IaaS/PaaS/SaaS</span>
-                                                        <span class="badge bg-primary me-2">弹性伸缩</span>
-                                                    </div>
-                                                    <p>支持企业快速部署应用，按需付费，降低IT成本，提高运营效率。</p>
-                                                    <button class="btn btn-outline-primary btn-sm">了解更多</button>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    
-                                    <div class="card mb-4">
-                                        <div class="card-body">
-                                            <div class="row">
-                                                <div class="col-md-3 text-center">
-                                                    <div class="display-3 text-primary mb-3">
-                                                        <i class="fas fa-robot"></i>
-                                                    </div>
-                                                </div>
-                                                <div class="col-md-9">
-                                                    <h5>智能客服系统</h5>
-                                                    <p class="text-muted">基于自然语言处理技术的智能客服解决方案，7x24小时在线服务。</p>
-                                                    <div class="mb-3">
-                                                        <span class="badge bg-primary me-2">人工智能</span>
-                                                        <span class="badge bg-primary me-2">NLP</span>
-                                                        <span class="badge bg-primary me-2">机器学习</span>
-                                                    </div>
-                                                    <p>自动解答客户问题，支持多轮对话，客户满意度提升40%，客服成本降低60%。</p>
-                                                    <button class="btn btn-outline-primary btn-sm">了解更多</button>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                
-                                <!-- 成功案例 -->
-                                <div class="tab-pane fade" id="cases">
-                                    <h4 class="company-detail-title">成功案例</h4>
-                                    
-                                    <div class="card mb-4">
-                                        <div class="card-body">
-                                            <div class="d-flex align-items-start mb-3">
-                                                <div class="company-logo bg-success me-3" style="width: 60px; height: 60px;">A</div>
-                                                <div>
-                                                    <h5 class="mb-1">ABC集团数字化转型项目</h5>
-                                                    <p class="text-muted mb-0">制造业 · 2022年合作</p>
-                                                </div>
-                                            </div>
-                                            <p>为ABC集团提供全面的数字化转型解决方案，包括ERP系统升级、生产管理系统智能化改造、供应链优化等。项目实施后，ABC集团生产效率提升25%，库存周转率提高30%，运营成本降低18%。</p>
-                                            <div class="mb-3">
-                                                <span class="badge bg-light text-dark me-2">ERP系统</span>
-                                                <span class="badge bg-light text-dark me-2">智能制造</span>
-                                                <span class="badge bg-light text-dark me-2">供应链管理</span>
-                                            </div>
-                                            <div class="d-flex justify-content-between align-items-center">
-                                                <div>
-                                                    <span class="text-muted me-3"><i class="fas fa-clock me-1"></i> 实施周期：6个月</span>
-                                                    <span class="text-muted"><i class="fas fa-chart-line me-1"></i> ROI：280%</span>
-                                                </div>
-                                                <button class="btn btn-outline-primary btn-sm">查看案例详情</button>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    
-                                    <div class="card mb-4">
-                                        <div class="card-body">
-                                            <div class="d-flex align-items-start mb-3">
-                                                <div class="company-logo bg-warning me-3" style="width: 60px; height: 60px;">B</div>
-                                                <div>
-                                                    <h5 class="mb-1">XYZ电商平台智能客服系统</h5>
-                                                    <p class="text-muted mb-0">电商 · 2023年合作</p>
-                                                </div>
-                                            </div>
-                                            <p>为XYZ电商平台部署智能客服系统，实现7x24小时自动应答，支持商品咨询、订单查询、售后处理等场景。系统上线后，客服响应时间从平均3分钟缩短到10秒内，人工客服工作量减少65%，客户满意度从85%提升到96%。</p>
-                                            <div class="mb-3">
-                                                <span class="badge bg-light text-dark me-2">智能客服</span>
-                                                <span class="badge bg-light text-dark me-2">电商</span>
-                                                <span class="badge bg-light text-dark me-2">自动化</span>
-                                            </div>
-                                            <div class="d-flex justify-content-between align-items-center">
-                                                <div>
-                                                    <span class="text-muted me-3"><i class="fas fa-clock me-1"></i> 实施周期：3个月</span>
-                                                    <span class="text-muted"><i class="fas fa-chart-line me-1"></i> ROI：320%</span>
-                                                </div>
-                                                <button class="btn btn-outline-primary btn-sm">查看案例详情</button>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                
-                                <!-- 联系方式 -->
-                                <div class="tab-pane fade" id="contact">
-                                    <h4 class="company-detail-title">联系信息</h4>
-                                    <div class="row">
-                                        <div class="col-md-6">
-                                            <div class="card h-100">
-                                                <div class="card-body">
-                                                    <h5 class="card-title mb-4">联系方式</h5>
-                                                    <div class="mb-4">
-                                                        <h6><i class="fas fa-phone text-primary me-2"></i> 联系电话</h6>
-                                                        <p class="ms-4">010-12345678</p>
-                                                    </div>
-                                                    <div class="mb-4">
-                                                        <h6><i class="fas fa-envelope text-primary me-2"></i> 电子邮箱</h6>
-                                                        <p class="ms-4">contact@innovatech.com</p>
-                                                    </div>
-                                                    <div class="mb-4">
-                                                        <h6><i class="fas fa-globe text-primary me-2"></i> 官方网站</h6>
-                                                        <p class="ms-4">www.innovatech.com</p>
-                                                    </div>
-                                                    <div class="mb-4">
-                                                        <h6><i class="fas fa-map-marker-alt text-primary me-2"></i> 公司地址</h6>
-                                                        <p class="ms-4">北京市海淀区中关村大街1号<br>创新科技大厦A座12层</p>
-                                                    </div>
-                                                    <button class="btn btn-primary w-100" id="contact-btn">
-                                                        <i class="fas fa-comment me-2"></i> 立即联系
-                                                    </button>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="col-md-6">
-                                            <div class="card h-100">
-                                                <div class="card-body">
-                                                    <h5 class="card-title mb-4">位置地图</h5>
-                                                    <div class="border rounded-lg p-4 text-center bg-light" style="height: 300px;">
-                                                        <div class="d-flex flex-column justify-content-center align-items-center h-100">
-                                                            <div class="display-1 text-muted mb-3">
-                                                                <i class="fas fa-map-marked-alt"></i>
-                                                            </div>
-                                                            <p class="text-muted">地图展示（实际项目中可集成百度/高德地图）</p>
-                                                            <p class="text-muted">北京市海淀区中关村大街1号</p>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                
-                <div class="col-lg-4">
-                    <!-- 侧边栏：联系信息 -->
-                    <div class="card mb-4">
-                        <div class="card-header">
-                            <h5 class="mb-0">快速联系</h5>
-                        </div>
-                        <div class="card-body">
-                            <div class="d-grid gap-2">
-                                <button class="btn btn-primary">
-                                    <i class="fas fa-comment me-2"></i> 发送消息
-                                </button>
-                                <button class="btn btn-outline-primary">
-                                    <i class="fas fa-phone me-2"></i> 拨打电话
-                                </button>
-                                <button class="btn btn-outline-primary">
-                                    <i class="fas fa-envelope me-2"></i> 发送邮件
-                                </button>
-                                <button class="btn btn-outline-primary">
-                                    <i class="fas fa-calendar-alt me-2"></i> 预约会议
-                                </button>
-                            </div>
-                            
-                            <hr class="my-4">
-                            
-                            <h6 class="mb-3">联系人</h6>
-                            <div class="d-flex align-items-center mb-3">
-                                <div class="user-avatar me-3">李</div>
-                                <div>
-                                    <div class="fw-semibold">李经理</div>
-                                    <div class="small text-muted">商务总监</div>
-                                </div>
-                            </div>
-                            <div class="d-flex align-items-center">
-                                <div class="user-avatar me-3">王</div>
-                                <div>
-                                    <div class="fw-semibold">王总监</div>
-                                    <div class="small text-muted">技术负责人</div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <!-- 侧边栏：相似企业 -->
-                    <div class="card">
-                        <div class="card-header">
-                            <h5 class="mb-0">相似企业</h5>
-                        </div>
-                        <div class="card-body">
-                            <div class="mb-3">
-                                <div class="d-flex align-items-center mb-2">
-                                    <div class="company-logo bg-info me-3" style="width: 40px; height: 40px; font-size: 16px;">数</div>
-                                    <div>
-                                        <div class="fw-semibold">数字科技</div>
-                                        <div class="small text-muted">科技 · 北京</div>
-                                    </div>
-                                </div>
-                                <button class="btn btn-outline-primary btn-sm w-100">查看</button>
-                            </div>
-                            
-                            <div class="mb-3">
-                                <div class="d-flex align-items-center mb-2">
-                                    <div class="company-logo bg-secondary me-3" style="width: 40px; height: 40px; font-size: 16px;">智</div>
-                                    <div>
-                                        <div class="fw-semibold">智能科技</div>
-                                        <div class="small text-muted">人工智能 · 上海</div>
-                                    </div>
-                                </div>
-                                <button class="btn btn-outline-primary btn-sm w-100">查看</button>
-                            </div>
-                            
-                            <div>
-                                <div class="d-flex align-items-center mb-2">
-                                    <div class="company-logo bg-success me-3" style="width: 40px; height: 40px; font-size: 16px;">云</div>
-                                    <div>
-                                        <div class="fw-semibold">云计算科技</div>
-                                        <div class="small text-muted">云计算 · 深圳</div>
-                                    </div>
-                                </div>
-                                <button class="btn btn-outline-primary btn-sm w-100">查看</button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        
-        <!-- 消息中心 -->
-        <div id="messages-page" class="page">
-            <div class="d-flex justify-content-between align-items-center mb-4">
-                <h1 class="page-title mb-0">消息中心</h1>
-                <button class="btn btn-primary">
-                    <i class="fas fa-plus me-2"></i> 新建对话
-                </button>
-            </div>
-            
-            <div class="row">
-                <div class="col-md-4">
-                    <div class="card h-100">
-                        <div class="card-header">
-                            <div class="input-group">
-                                <input type="text" class="form-control" placeholder="搜索对话...">
-                                <button class="btn btn-outline-secondary" type="button">
-                                    <i class="fas fa-search"></i>
-                                </button>
-                            </div>
-                        </div>
-                        <div class="card-body p-0">
-                            <div class="list-group list-group-flush" id="chat-contacts">
-                                <!-- 对话联系人列表 -->
-                                <a href="#" class="list-group-item list-group-item-action chat-contact active">
-                                    <div class="d-flex w-100 justify-content-between">
-                                        <div class="d-flex">
-                                            <div class="user-avatar me-3">创</div>
-                                            <div>
-                                                <h6 class="mb-1">创新科技有限公司</h6>
-                                                <p class="mb-1 small text-muted">我们很期待与您的合作机会...</p>
-                                            </div>
-                                        </div>
-                                        <small class="text-muted">10:30</small>
-                                    </div>
-                                </a>
-                                <a href="#" class="list-group-item list-group-item-action chat-contact">
-                                    <div class="d-flex w-100 justify-content-between">
-                                        <div class="d-flex">
-                                            <div class="user-avatar me-3 bg-success">智</div>
-                                            <div>
-                                                <h6 class="mb-1">智能制造集团</h6>
-                                                <p class="mb-1 small text-muted">好的，我们明天详细讨论</p>
-                                            </div>
-                                        </div>
-                                        <small class="text-muted">昨天</small>
-                                    </div>
-                                </a>
-                                <a href="#" class="list-group-item list-group-item-action chat-contact">
-                                    <div class="d-flex w-100 justify-content-between">
-                                        <div class="d-flex">
-                                            <div class="user-avatar me-3 bg-warning">绿</div>
-                                            <div>
-                                                <h6 class="mb-1">绿色能源科技</h6>
-                                                <p class="mb-1 small text-muted">感谢您的询价，这是我们的报价单...</p>
-                                            </div>
-                                        </div>
-                                        <small class="text-muted">周三</small>
-                                    </div>
-                                </a>
-                                <a href="#" class="list-group-item list-group-item-action chat-contact">
-                                    <div class="d-flex w-100 justify-content-between">
-                                        <div class="d-flex">
-                                            <div class="user-avatar me-3 bg-info">数</div>
-                                            <div>
-                                                <h6 class="mb-1">数字营销有限公司</h6>
-                                                <p class="mb-1 small text-muted">请问您什么时候方便电话沟通？</p>
-                                            </div>
-                                        </div>
-                                        <small class="text-muted">周一</small>
-                                    </div>
-                                </a>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                
-                <div class="col-md-8">
-                    <div class="card h-100">
-                        <div class="card-header d-flex justify-content-between align-items-center">
-                            <div class="d-flex align-items-center">
-                                <div class="user-avatar me-3">创</div>
-                                <div>
-                                    <h5 class="mb-0">创新科技有限公司</h5>
-                                    <small class="text-muted">商务总监 · 在线</small>
-                                </div>
-                            </div>
-                            <div>
-                                <button class="btn btn-outline-secondary btn-sm me-2">
-                                    <i class="fas fa-phone"></i>
-                                </button>
-                                <button class="btn btn-outline-secondary btn-sm">
-                                    <i class="fas fa-ellipsis-v"></i>
-                                </button>
-                            </div>
-                        </div>
-                        
-                        <!-- 聊天消息区域 -->
-                        <div class="card-body p-0">
-                            <div class="chat-messages" id="chat-messages">
-                                <!-- 接收的消息 -->
-                                <div class="message received">
-                                    <div class="d-flex align-items-end mb-1">
-                                        <div class="user-avatar me-2">创</div>
-                                        <div>
-                                            <div class="message-content bg-white">
-                                                您好，我是创新科技有限公司的商务总监。我们对贵公司的产品很感兴趣，想了解更多信息。
-                                            </div>
-                                            <small class="text-muted ms-2">10:15 AM</small>
-                                        </div>
-                                    </div>
-                                </div>
-                                
-                                <!-- 发送的消息 -->
-                                <div class="message sent">
-                                    <div class="d-flex flex-column align-items-end">
-                                        <div class="message-content bg-primary text-white mb-1">
-                                            您好！很高兴收到您的消息。请问您想了解我们产品的哪些方面？
-                                        </div>
-                                        <small class="text-muted me-2">10:20 AM</small>
-                                    </div>
-                                </div>
-                                
-                                <!-- 接收的消息 -->
-                                <div class="message received">
-                                    <div class="d-flex align-items-end mb-1">
-                                        <div class="user-avatar me-2">创</div>
-                                        <div>
-                                            <div class="message-content bg-white">
-                                                我们主要对贵公司的智能客服系统感兴趣。能否提供更详细的技术参数和报价？
-                                            </div>
-                                            <small class="text-muted ms-2">10:25 AM</small>
-                                        </div>
-                                    </div>
-                                </div>
-                                
-                                <!-- 发送的消息 -->
-                                <div class="message sent">
-                                    <div class="d-flex flex-column align-items-end">
-                                        <div class="message-content bg-primary text-white mb-1">
-                                            当然可以。我已经将详细的产品手册和报价单发送到您的邮箱，请注意查收。另外，如果您方便的话，我们可以安排一次线上演示，让您更直观地了解系统功能。
-                                            </div>
-                                        <small class="text-muted me-2">10:30 AM</small>
-                                    </div>
-                                </div>
-                            </div>
-                            
-                            <!-- 消息输入区域 -->
-                            <div class="border-top p-3">
-                                <div class="input-group">
-                                    <button class="btn btn-outline-secondary" type="button">
-                                        <i class="fas fa-paperclip"></i>
-                                    </button>
-                                    <input type="text" class="form-control" placeholder="输入消息..." id="message-input">
-                                    <button class="btn btn-primary" type="button" id="send-message">
-                                        <i class="fas fa-paper-plane"></i>
-                                    </button>
-                                </div>
-                                <div class="mt-2">
-                                    <small class="text-muted">按Enter发送，Shift+Enter换行</small>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        
-        <!-- 企业入驻页面 -->
-        <div id="register-page" class="page">
-            <h1 class="page-title mb-4">企业入驻</h1>
-            
-            <!-- 步骤指示器 -->
-            <div class="step-indicator mb-5">
-                <div class="step active">
-                    <div class="step-number">1</div>
-                    <div class="step-label">基本信息</div>
-                    <div class="step-line"></div>
-                </div>
-                <div class="step">
-                    <div class="step-number">2</div>
-                    <div class="step-label">详细资料</div>
-                    <div class="step-line"></div>
-                </div>
-                <div class="step">
-                    <div class="step-number">3</div>
-                    <div class="step-label">产品服务</div>
-                    <div class="step-line"></div>
-                </div>
-                <div class="step">
-                    <div class="step-number">4</div>
-                    <div class="step-label">完成</div>
-                </div>
-            </div>
-            
-            <div class="card form-card">
-                <div class="card-body">
-                    <!-- 第1步：基本信息 -->
-                    <div id="step-1" class="form-step">
-                        <h4 class="company-detail-title mb-4">基本信息</h4>
-                        
-                        <div class="row">
-                            <div class="col-md-6 mb-3">
-                                <label for="company-name" class="form-label">企业名称 <span class="text-danger">*</span></label>
-                                <input type="text" class="form-control" id="company-name" placeholder="请输入营业执照上的公司全称" required>
-                            </div>
-                            <div class="col-md-6 mb-3">
-                                <label for="credit-code" class="form-label">统一社会信用代码 <span class="text-danger">*</span></label>
-                                <input type="text" class="form-control" id="credit-code" placeholder="18位统一社会信用代码" required>
-                            </div>
-                        </div>
-                        
-                        <div class="mb-3">
-                            <label for="company-logo" class="form-label">公司Logo</label>
-                            <div class="border rounded p-4 text-center" id="logo-upload-area" style="cursor: pointer;">
-                                <div id="logo-preview" class="d-none">
-                                    <img id="logo-preview-img" src="#" alt="Logo预览" class="img-thumbnail mb-2" style="max-width: 200px; max-height: 200px;">
-                                    <p class="mb-0">点击重新选择</p>
-                                </div>
-                                <div id="logo-upload-placeholder">
-                                    <div class="display-1 text-muted mb-3">
-                                        <i class="fas fa-cloud-upload-alt"></i>
-                                    </div>
-                                    <p class="mb-1">点击上传公司Logo</p>
-                                    <p class="text-muted small">建议尺寸：300x300px，支持JPG、PNG格式，不超过2MB</p>
-                                </div>
-                                <input type="file" class="d-none" id="logo-input" accept="image/*">
-                            </div>
-                        </div>
-                        
-                        <div class="mb-3">
-                            <label class="form-label">所属行业 <span class="text-danger">*</span></label>
-                            <div class="row">
-                                <div class="col-md-3 col-6 mb-2">
-                                    <div class="form-check">
-                                        <input class="form-check-input" type="checkbox" value="tech" id="industry-tech">
-                                        <label class="form-check-label" for="industry-tech">
-                                            科技/互联网
-                                        </label>
-                                    </div>
-                                </div>
-                                <div class="col-md-3 col-6 mb-2">
-                                    <div class="form-check">
-                                        <input class="form-check-input" type="checkbox" value="manufacturing" id="industry-manufacturing">
-                                        <label class="form-check-label" for="industry-manufacturing">
-                                            制造业
-                                        </label>
-                                    </div>
-                                </div>
-                                <div class="col-md-3 col-6 mb-2">
-                                    <div class="form-check">
-                                        <input class="form-check-input" type="checkbox" value="finance" id="industry-finance">
-                                        <label class="form-check-label" for="industry-finance">
-                                            金融/投资
-                                        </label>
-                                    </div>
-                                </div>
-                                <div class="col-md-3 col-6 mb-2">
-                                    <div class="form-check">
-                                        <input class="form-check-input" type="checkbox" value="service" id="industry-service">
-                                        <label class="form-check-label" for="industry-service">
-                                            服务业
-                                        </label>
-                                    </div>
-                                </div>
-                                <div class="col-md-3 col-6 mb-2">
-                                    <div class="form-check">
-                                        <input class="form-check-input" type="checkbox" value="education" id="industry-education">
-                                        <label class="form-check-label" for="industry-education">
-                                            教育/培训
-                                        </label>
-                                    </div>
-                                </div>
-                                <div class="col-md-3 col-6 mb-2">
-                                    <div class="form-check">
-                                        <input class="form-check-input" type="checkbox" value="medical" id="industry-medical">
-                                        <label class="form-check-label" for="industry-medical">
-                                            医疗/健康
-                                        </label>
-                                    </div>
-                                </div>
-                                <div class="col-md-3 col-6 mb-2">
-                                    <div class="form-check">
-                                        <input class="form-check-input" type="checkbox" value="retail" id="industry-retail">
-                                        <label class="form-check-label" for="industry-retail">
-                                            零售/贸易
-                                        </label>
-                                    </div>
-                                </div>
-                                <div class="col-md-3 col-6 mb-2">
-                                    <div class="form-check">
-                                        <input class="form-check-input" type="checkbox" value="other" id="industry-other">
-                                        <label class="form-check-label" for="industry-other">
-                                            其他
-                                        </label>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <div class="d-flex justify-content-between mt-5">
-                            <div></div> <!-- 占位 -->
-                            <button class="btn btn-primary" id="next-step-1">
-                                下一步 <i class="fas fa-arrow-right ms-2"></i>
-                            </button>
-                        </div>
-                    </div>
-                    
-                    <!-- 第2步：详细资料 -->
-                    <div id="step-2" class="form-step d-none">
-                        <h4 class="company-detail-title mb-4">详细资料</h4>
-                        
-                        <div class="mb-3">
-                            <label for="company-description" class="form-label">公司简介 <span class="text-danger">*</span></label>
-                            <textarea class="form-control" id="company-description" rows="4" placeholder="请简要描述公司主营业务、核心优势、发展历程等" maxlength="500"></textarea>
-                            <div class="form-text text-end"><span id="char-count">0</span>/500</div>
-                        </div>
-                        
-                        <div class="row">
-                            <div class="col-md-6 mb-3">
-                                <label for="employee-count" class="form-label">企业规模 <span class="text-danger">*</span></label>
-                                <select class="form-select" id="employee-count">
-                                    <option value="" selected disabled>请选择</option>
-                                    <option value="1-50">1-50人</option>
-                                    <option value="51-200">51-200人</option>
-                                    <option value="201-1000">201-1000人</option>
-                                    <option value="1000+">1000人以上</option>
-                                </select>
-                            </div>
-                            <div class="col-md-6 mb-3">
-                                <label for="founded-year" class="form-label">成立时间 <span class="text-danger">*</span></label>
-                                <select class="form-select" id="founded-year">
-                                    <option value="" selected disabled>请选择</option>
-                                    <!-- 年份选项由JavaScript生成 -->
-                                </select>
-                            </div>
-                        </div>
-                        
-                        <div class="mb-3">
-                            <label for="company-address" class="form-label">公司地址 <span class="text-danger">*</span></label>
-                            <input type="text" class="form-control" id="company-address" placeholder="请输入详细地址">
-                        </div>
-                        
-                        <div class="row">
-                            <div class="col-md-6 mb-3">
-                                <label for="company-phone" class="form-label">联系电话</label>
-                                <input type="tel" class="form-control" id="company-phone" placeholder="请输入公司联系电话">
-                            </div>
-                            <div class="col-md-6 mb-3">
-                                <label for="company-email" class="form-label">联系邮箱</label>
-                                <input type="email" class="form-control" id="company-email" placeholder="请输入公司联系邮箱">
-                            </div>
-                        </div>
-                        
-                        <div class="mb-3">
-                            <label for="company-website" class="form-label">官方网站</label>
-                            <div class="input-group">
-                                <span class="input-group-text">https://</span>
-                                <input type="text" class="form-control" id="company-website" placeholder="www.example.com">
-                            </div>
-                        </div>
-                        
-                        <div class="d-flex justify-content-between mt-5">
-                            <button class="btn btn-outline-primary" id="prev-step-2">
-                                <i class="fas fa-arrow-left me-2"></i> 上一步
-                            </button>
-                            <button class="btn btn-primary" id="next-step-2">
-                                下一步 <i class="fas fa-arrow-right ms-2"></i>
-                            </button>
-                        </div>
-                    </div>
-                    
-                    <!-- 第3步：产品服务 -->
-                    <div id="step-3" class="form-step d-none">
-                        <h4 class="company-detail-title mb-4">产品与服务</h4>
-                        <p class="text-muted mb-4">添加您的主营产品或服务，让客户更了解您的业务（至少添加一项）</p>
-                        
-                        <div id="products-container">
-                            <!-- 产品表单会通过JavaScript动态生成 -->
-                        </div>
-                        
-                        <div class="text-center my-4">
-                            <button class="btn btn-outline-primary" id="add-product">
-                                <i class="fas fa-plus me-2"></i> 添加产品/服务
-                            </button>
-                        </div>
-                        
-                        <div class="d-flex justify-content-between mt-5">
-                            <button class="btn btn-outline-primary" id="prev-step-3">
-                                <i class="fas fa-arrow-left me-2"></i> 上一步
-                            </button>
-                            <button class="btn btn-primary" id="next-step-3">
-                                提交审核 <i class="fas fa-check ms-2"></i>
-                            </button>
-                        </div>
-                    </div>
-                    
-                    <!-- 第4步：完成 -->
-                    <div id="step-4" class="form-step d-none text-center py-5">
-                        <div class="display-1 text-success mb-4">
-                            <i class="fas fa-check-circle"></i>
-                        </div>
-                        <h3 class="mb-3">提交成功！</h3>
-                        <p class="text-muted mb-4">您的企业信息已提交，我们将在1-3个工作日内完成审核</p>
-                        <p class="text-muted mb-5">审核通过后，您的企业将正式在平台展示，可以开始与其他企业建立联系</p>
-                        <div class="d-flex justify-content-center">
-                            <button class="btn btn-primary me-3" id="go-to-home">
-                                返回首页
-                            </button>
-                            <button class="btn btn-outline-primary" id="add-more-info">
-                                继续完善信息
-                            </button>
-                        </div>
-                    </div>
-                </div>
+
+            <div class="company-tags">
+                <span class="tag">海运</span>
+                <span class="tag">国际物流</span>
+                <span class="tag">货运代理</span>
+                <span class="tag">跨境贸易</span>
             </div>
         </div>
     </div>
-    </div>
 
-    <!-- 页脚 -->
-    <footer class="footer mt-5">
-        <div class="container">
-            <div class="row">
-                <div class="col-md-3 mb-4">
-                    <h5><i class="fas fa-handshake me-2"></i> 企联汇</h5>
-                    <p class="mt-3">连接企业，创造价值，赋能商业未来</p>
-                </div>
-                <div class="col-md-3 mb-4">
-                    <h5>产品服务</h5>
-                    <div class="footer-links">
-                        <a href="#">企业入驻</a>
-                        <a href="#">企业搜索</a>
-                        <a href="#">商业对接</a>
-                        <a href="#">行业资讯</a>
-                    </div>
-                </div>
-                <div class="col-md-3 mb-4">
-                    <h5>关于我们</h5>
-                    <div class="footer-links">
-                        <a href="#">公司介绍</a>
-                        <a href="#">加入我们</a>
-                        <a href="#">联系我们</a>
-                        <a href="#">帮助中心</a>
-                    </div>
-                </div>
-                <div class="col-md-3 mb-4">
-                    <h5>关注我们</h5>
-                    <div class="footer-links">
-                        <a href="#"><i class="fab fa-weixin me-2"></i> 微信公众号</a>
-                        <a href="#"><i class="fab fa-weibo me-2"></i> 新浪微博</a>
-                        <a href="#"><i class="fab fa-linkedin me-2"></i> LinkedIn</a>
-                        <a href="#"><i class="fas fa-envelope me-2"></i> 商务合作</a>
-                    </div>
-                </div>
-            </div>
-            <div class="copyright">
-                <p>© 2023 企联汇企业信息平台. 保留所有权利.</p>
-                <p class="small">京ICP备12345678号 | 京公网安备11010102001234号</p>
-            </div>
-        </div>
-    </footer>
+</body>
 
-    <!-- Bootstrap Bundle with Popper -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
-    
-    <!-- 自定义JavaScript -->
-    <script>
-        // 页面切换功能
-        document.addEventListener('DOMContentLoaded', function() {
-            // 获取所有页面和导航链接
-            const pages = document.querySelectorAll('.page');
-            const navLinks = document.querySelectorAll('[data-page]');
-            
-            // 导航切换功能
-            navLinks.forEach(link => {
-                link.addEventListener('click', function(e) {
-                    e.preventDefault();
-                    const targetPage = this.getAttribute('data-page');
-                    
-                    // 移除所有活跃状态
-                    navLinks.forEach(navLink => {
-                        navLink.classList.remove('active');
-                    });
-                    
-                    // 添加当前活跃状态
-                    this.classList.add('active');
-                    
-                    // 隐藏所有页面
-                    pages.forEach(page => {
-                        page.classList.remove('active');
-                    });
-                    
-                    // 显示目标页面
-                    if (targetPage === 'home' || targetPage === 'discover') {
-                        document.getElementById('home-page').classList.add('active');
-                    } else if (targetPage === 'messages') {
-                        document.getElementById('messages-page').classList.add('active');
-                    } else if (targetPage === 'register') {
-                        document.getElementById('register-page').classList.add('active');
-                    }
-                });
-            });
-            
-            // 企业卡片点击事件
-            const companyCards = document.querySelectorAll('.company-card');
-            const backButton = document.getElementById('back-to-home');
-            
-            companyCards.forEach(card => {
-                card.addEventListener('click', function() {
-                    // 隐藏所有页面
-                    pages.forEach(page => {
-                        page.classList.remove('active');
-                    });
-                    
-                    // 显示企业详情页
-                    document.getElementById('company-detail-page').classList.add('active');
-                    
-                    // 更新导航状态
-                    navLinks.forEach(navLink => {
-                        navLink.classList.remove('active');
-                    });
-                });
-            });
-            
-            // 返回按钮点击事件
-            if (backButton) {
-                backButton.addEventListener('click', function() {
-                    // 隐藏所有页面
-                    pages.forEach(page => {
-                        page.classList.remove('active');
-                    });
-                    
-                    // 显示首页
-                    document.getElementById('home-page').classList.add('active');
-                    
-                    // 更新导航状态
-                    navLinks.forEach(navLink => {
-                        navLink.classList.remove('active');
-                    });
-                    document.querySelector('[data-page="home"]').classList.add('active');
-                });
-            }
-            
-            // 联系按钮点击事件
-            const contactBtn = document.getElementById('contact-btn');
-            const sendMessageBtn = document.getElementById('send-message-btn');
-            
-            if (contactBtn || sendMessageBtn) {
-                const handleContactClick = function() {
-                    // 隐藏所有页面
-                    pages.forEach(page => {
-                        page.classList.remove('active');
-                    });
-                    
-                    // 显示消息中心
-                    document.getElementById('messages-page').classList.add('active');
-                    
-                    // 更新导航状态
-                    navLinks.forEach(navLink => {
-                        navLink.classList.remove('active');
-                    });
-                    document.querySelector('[data-page="messages"]').classList.add('active');
-                };
-                
-                if (contactBtn) contactBtn.addEventListener('click', handleContactClick);
-                if (sendMessageBtn) sendMessageBtn.addEventListener('click', handleContactClick);
-            }
-            
-            // 消息发送功能
-            const messageInput = document.getElementById('message-input');
-            const sendMessageBtnChat = document.getElementById('send-message');
-            const chatMessages = document.getElementById('chat-messages');
-            
-            if (messageInput && sendMessageBtnChat) {
-                const sendMessage = function() {
-                    const message = messageInput.value.trim();
-                    if (message === '') return;
-                    
-                    // 创建新消息元素
-                    const messageElement = document.createElement('div');
-                    messageElement.className = 'message sent';
-                    messageElement.innerHTML = `
-                        <div class="d-flex flex-column align-items-end">
-                            <div class="message-content bg-primary text-white mb-1">
-                                ${message}
-                            </div>
-                            <small class="text-muted me-2">刚刚</small>
-                        </div>
-                    `;
-                    
-                    // 添加到消息列表
-                    chatMessages.appendChild(messageElement);
-                    
-                    // 清空输入框
-                    messageInput.value = '';
-                    
-                    // 滚动到底部
-                    chatMessages.scrollTop = chatMessages.scrollHeight;
-                    
-                    // 模拟对方回复（2秒后）
-                    setTimeout(() => {
-                        const replyElement = document.createElement('div');
-                        replyElement.className = 'message received';
-                        replyElement.innerHTML = `
-                            <div class="d-flex align-items-end mb-1">
-                                <div class="user-avatar me-2">创</div>
-                                <div>
-                                    <div class="message-content bg-white">
-                                        收到，我们会尽快回复您！
-                                    </div>
-                                    <small class="text-muted ms-2">刚刚</small>
-                                </div>
-                            </div>
-                        `;
-                        
-                        chatMessages.appendChild(replyElement);
-                        chatMessages.scrollTop = chatMessages.scrollHeight;
-                    }, 2000);
-                };
-                
-                sendMessageBtnChat.addEventListener('click', sendMessage);
-                
-                messageInput.addEventListener('keypress', function(e) {
-                    if (e.key === 'Enter' && !e.shiftKey) {
-                        e.preventDefault();
-                        sendMessage();
-                    }
-                });
-            }
-            
-            // 聊天联系人切换
-            const chatContacts = document.querySelectorAll('.chat-contact');
-            chatContacts.forEach(contact => {
-                contact.addEventListener('click', function(e) {
\ No newline at end of file
+</html>
\ No newline at end of file
diff --git a/code/link56/link56-frontend/src/pages/forum/post-detail/modules/main/modules/comment-list.vue b/code/link56/link56-frontend/src/pages/forum/post-detail/modules/main/modules/comment-list.vue
index 5fb6e2b6..0920fcef 100644
--- a/code/link56/link56-frontend/src/pages/forum/post-detail/modules/main/modules/comment-list.vue
+++ b/code/link56/link56-frontend/src/pages/forum/post-detail/modules/main/modules/comment-list.vue
@@ -93,9 +93,11 @@ const props = defineProps<{
   modelValue: ForumCommentReuslt[];
   postDetail: ForumPostDetailResult;
 }>();
+
 const emit = defineEmits<{
   (event: "update:modelValue", data: ForumCommentReuslt[]): void;
 }>();
+
 const commentList = ref<ForumCommentReuslt[]>([]);
 
 watch(