fix: 调整社区模块样式，修复边距和填充问题，优化响应式设计 #6

Author: Kaviilee

src/assets/css/community/community-single.less

@@ -1,6 +1,8 @@
 .m-community-single {
-    .m-community-footer,
     .m-community-header {
+        padding: 0;
+    }
+    .m-community-footer {
         padding: 0 28px;
     }
     .m-topic-category-box {

src/assets/css/community/reply_item.less

@@ -5,6 +5,10 @@
     background: white;
     padding: 16px 0;
     border-radius: 0 0 10px 10px;
+
+    &.is-master {
+        padding-top: 0;
+    }
 }
 
 // 包含回帖内容 、时间、操作按钮 的主要展示区域
@@ -262,7 +266,7 @@
     display: flex;
     flex-direction: column;
     border-left: 1px solid rgba(232, 232, 232, 1);
-    padding: 0 24px;
+    padding: 0 30px;
     min-width: 0;
 }
 // 折叠评论

src/components/bbs/single_side.vue

@@ -50,7 +50,7 @@ export default {
 
 <style lang="less">
 .m-single-side {
-    padding: 20px;
+    // padding: 20px;
 }
 .m-single-directory {
     .mb(20px);

src/components/community/post_header.vue

@@ -57,6 +57,10 @@
                 <img svg-inline src="@/assets/img/community/is_star_inline.svg" alt="" />
                 精选
             </span>
+            <div class="u-meta u-sub-block">
+                <em class="u-label">适用客户端</em>
+                <span class="u-value u-client" :class="'i-client-' + client">{{ showClientLabel(client) }}</span>
+            </div>
 
             <!-- 帖子分类 -->
             <!-- <span class="u-status u-sub-block" :style="`background-color: ${styles.color};`">
@@ -87,6 +91,13 @@
                 <time>{{ post_date }}</time>
             </span>
 
+            <span class="u-sub-block" :title="'发布日期:' + post_time">
+                <i class="u-icon-modate">
+                    <img svg-inline src="@jx3box/jx3box-common-ui/assets/img/single/modate.svg" />
+                </i>
+                <time>{{ update_date }}</time>
+            </span>
+
             <!-- 查看次数 -->
             <span class="u-views u-sub-block">
                 <i class="el-icon-view"></i>
@@ -209,6 +220,9 @@ export default {
             }
             return null;
         },
+        client: function () {
+            return this.post?.client || "std";
+        },
     },
     watch: {
         post: {

src/components/community/reply_item.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="m-reply-wrapper" :id="`floor-${post.floor}`">
+    <div class="m-reply-wrapper" :class="{'is-master': isMaster}" :id="`floor-${post.floor || 0}`">
         <div class="m-reply-left">
             <CommentUser :uid="userInfo.id" :isMaster="isMaster" :isAnonymous="isAnonymous" />
             <div class="u-top-right u-mobile-show">
@@ -8,9 +8,10 @@
             </div>
         </div>
         <div class="m-reply-right">
+            <slot name="header"></slot>
             <div class="m-reply-content">
                 <div class="u-reply-floor u-mobile-hidden">
-                    <a :href="`#floor-${post.floor}`" @click="onFloorClick">{{
+                    <a :href="`#floor-${post.floor || 0}`" @click="onFloorClick">{{
                         isMaster ? "楼主" : post.floor + "楼"
                     }}</a>
                     <span class="u-comment-time u-mobile-hidden">{{ post.updated_at }}</span>
@@ -100,7 +101,7 @@
                     :author-id="post.user_id"
                     :banner="post.banner_img"
                     :contentMetaId="post.link_content_meta_id"
-                    :allowGift="!isDisableBoxcoin"
+                    :allowGift="Number(!isDisableBoxcoin)"
                 />
                 <!-- 操作按钮 -->
                 <!-- <div class="m-reply-time u-mobile-hidden">{{ showTime }}</div> -->

src/components/single/single_side.vue

@@ -41,7 +41,7 @@ export default {
 
 <style lang="less">
 .m-single-side {
-    padding: 20px;
+    // padding: 15px;
 }
 .m-single-directory {
     .mb(20px);

src/views/CommunitySingle.vue

@@ -2,7 +2,7 @@
     <CommunitySingleLayout :post="post">
         <div class="m-community-single" v-loading="loading">
             <!-- 头部 -->
-            <div class="m-community-header">
+            <!-- <div class="m-community-header">
                 <PostHeader :post="post" :stat="stat">
                     <template #append>
                         <el-pagination
@@ -16,16 +16,16 @@
                             class="m-pageheader-pagination"
                         ></el-pagination>
                     </template>
-                </PostHeader>
+                </PostHeader> -->
                 <!-- 文集小册 -->
-                <Collection
+                <!-- <Collection
                     class="m-single-collection"
                     :id="collection_id"
                     :defaultVisible="collection_collapse"
                     @collectionUpdate="updateCollection"
                 />
-                <el-divider content-position="left">JX3BOX</el-divider>
-            </div>
+                <el-divider content-position="left">JX3BOX</el-divider> -->
+            <!-- </div> -->
 
             <div class="m-list-box">
                 <!--  楼主 -->
@@ -37,7 +37,35 @@
                         :post="post"
                         @onReplyTopic="handleReplyTopic"
                         @enterPwd="enterPwd"
-                    />
+                    >
+                        <template #header>
+                            <!-- 头部 -->
+                            <div class="m-community-header">
+                                <PostHeader :post="post" :stat="stat">
+                                    <template #append>
+                                        <el-pagination
+                                            layout="prev, pager, next"
+                                            :hide-on-single-page="true"
+                                            :page-size="per"
+                                            :total="total"
+                                            :current-page.sync="page"
+                                            @current-change="changePage"
+                                            size="small"
+                                            class="m-pageheader-pagination"
+                                        ></el-pagination>
+                                    </template>
+                                </PostHeader>
+                                <!-- 文集小册 -->
+                                <Collection
+                                    class="m-single-collection"
+                                    :id="collection_id"
+                                    :defaultVisible="collection_collapse"
+                                    @collectionUpdate="updateCollection"
+                                />
+                                <el-divider content-position="left">JX3BOX</el-divider>
+                            </div>
+                        </template>
+                    </ReplyItem>
                 </div>
 
                 <!-- 帖子回复 -->
@@ -82,7 +110,9 @@
                 <div class="u-editor">
                     <el-divider content-position="left">回帖</el-divider>
                     <CommentEditor @submit="onReplyTopic" v-if="!isDisabledComment" />
-                    <el-alert :show-close="false" center v-else class="m-disabled-comment-tip">作者已关闭回帖功能</el-alert>
+                    <el-alert :show-close="false" center v-else class="m-disabled-comment-tip"
+                        >作者已关闭回帖功能</el-alert
+                    >
                 </div>
             </div>
         </div>
@@ -206,7 +236,7 @@ export default {
         };
     },
     computed: {
-        styles: function() {
+        styles: function () {
             let item = this.categoryList.find((item) => item.value === this.post.category);
             if (item) {
                 return item;
@@ -218,7 +248,7 @@ export default {
                 };
             }
         },
-        id: function() {
+        id: function () {
             return this.$route.params.id;
         },
         isAuthor() {
@@ -228,25 +258,25 @@ export default {
             return window.innerWidth < 768;
         },
         // 是否显示加载更多
-        hasNextPage: function() {
+        hasNextPage: function () {
             return this.pageTotal >= 1 && this.per * this.page < this.total;
         },
         collection_id() {
             return this.post.collection_id;
         },
-        collection_collapse: function() {
+        collection_collapse: function () {
             return this.post?.collection_collapse;
         },
-        null_tip: function() {
+        null_tip: function () {
             let str = "作者设置了【";
             str += __visibleMap[this.post?.visible];
             str += "】";
             return str;
         },
-        visible: function() {
+        visible: function () {
             return !!this.post?.visible_validate;
         },
-        isDisabledComment: function() {
+        isDisabledComment: function () {
             return !!this.post?.disable_comment;
         },
     },
@@ -281,7 +311,7 @@ export default {
         "$route.query": {
             deep: true,
             immediate: true,
-            handler: function(query) {
+            handler: function (query) {
                 if (Object.keys(query).length) {
                     for (let key in query) {
                         // for:element分页组件兼容性问题
@@ -299,7 +329,7 @@ export default {
         /**
          * 获取url楼诚参数
          */
-        getJumpFloor: function() {
+        getJumpFloor: function () {
             const hash = window.location.hash;
             const floor = hash.substring(1).split("?")[0];
             if (floor) {
@@ -322,7 +352,7 @@ export default {
             });
         },
         // 翻页按钮
-        nextPage: function() {
+        nextPage: function () {
             this.getReplyList(true);
         },
         onSearch() {
@@ -341,7 +371,7 @@ export default {
             this.getReplyList();
         },
 
-        buildQuery: function() {
+        buildQuery: function () {
             let _query = {
                 index: this.page,
                 pageSize: this.per,
@@ -354,10 +384,10 @@ export default {
             this.replaceRoute({ page: this.page, onlyAuthor: this.onlyAuthor });
             return _query;
         },
-        getTopicData: function() {
+        getTopicData: function () {
             return this.post;
         },
-        getDetails: function() {
+        getDetails: function () {
             let fun = getTopicDetails;
             if (this.mode == "admin") {
                 fun = getTopicDetailsFromAdmin;
@@ -400,7 +430,7 @@ export default {
                 }
             });
         },
-        getReplyList: function(appendMode) {
+        getReplyList: function (appendMode) {
             if (this.mode == "admin") return;
             this.loading = true;
             if (appendMode) {
@@ -516,7 +546,7 @@ export default {
             this.getReplyList();
         },
         // 路由绑定
-        replaceRoute: function(extend) {
+        replaceRoute: function (extend) {
             return this.$router
                 .push({ name: this.$route.name, query: Object.assign({}, this.$route.query, extend) })
                 .then(() => {
@@ -528,7 +558,7 @@ export default {
             // 展示快捷回复弹窗
             this.showComment = true;
         },
-        updateCollection: function(val) {
+        updateCollection: function (val) {
             this.collection_data = val;
         },