feat: 添加文章页面

2023-03-11 17:00:36 +08:00
parent 9593b68d33
commit 3de32945f2
16 changed files with 206 additions and 47 deletions
--- a/Yi.BBS.Vue3/package-lock.json
+++ b/Yi.BBS.Vue3/package-lock.json
@@ -11,10 +11,13 @@
        "@element-plus/icons-vue": "^2.1.0",
        "axios": "^1.3.4",
        "element-plus": "^2.2.32",
+        "highlight": "^0.2.4",
+        "marked": "^4.2.12",
        "mavon-editor": "^3.0.0",
        "pinia": "^2.0.32",
        "vue": "^3.2.47",
-        "vue-router": "^4.1.6"
+        "vue-router": "^4.1.6",
+        "yarm": "^0.4.0"
      },
      "devDependencies": {
        "@vitejs/plugin-vue": "^4.0.0",
@@ -2289,6 +2292,12 @@
      "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==",
      "dev": true
    },
+    "node_modules/highlight": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmmirror.com/highlight/-/highlight-0.2.4.tgz",
+      "integrity": "sha512-TEcWU6BolpDYIaVD91KmaYe/kRZwOmQlLWZGO8DK+Cs555+7mawk2KUnF/dBwcLnrvlCDk/xC+BXfz7Zva+Jfg==",
+      "deprecated": "Not maintained anymore"
+    },
    "node_modules/highlight.js": {
      "version": "9.18.5",
      "resolved": "https://registry.npmmirror.com/highlight.js/-/highlight.js-9.18.5.tgz",
@@ -2581,6 +2590,17 @@
        "sourcemap-codec": "^1.4.8"
      }
    },
+    "node_modules/marked": {
+      "version": "4.2.12",
+      "resolved": "https://registry.npmmirror.com/marked/-/marked-4.2.12.tgz",
+      "integrity": "sha512-yr8hSKa3Fv4D3jdZmtMMPghgVt6TWbk86WQaWhDloQjRSQhMMYCAro7jP7VDJrjjdV8pxVxMssXS8B8Y5DZ5aw==",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
    "node_modules/mavon-editor": {
      "version": "3.0.0",
      "resolved": "https://registry.npmmirror.com/mavon-editor/-/mavon-editor-3.0.0.tgz",
@@ -3775,6 +3795,11 @@
      "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz",
      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
      "dev": true
+    },
+    "node_modules/yarm": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/yarm/-/yarm-0.4.0.tgz",
+      "integrity": "sha512-yCoX5QCA5Upb+VP7/UBuNGBz7MO5oWyc6degv5AifeGnakpaHeNwE/SNOPMefFKpQBionZyUeRdBo63Dl+awDQ=="
    }
  },
  "dependencies": {
@@ -5517,6 +5542,11 @@
      "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==",
      "dev": true
    },
+    "highlight": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmmirror.com/highlight/-/highlight-0.2.4.tgz",
+      "integrity": "sha512-TEcWU6BolpDYIaVD91KmaYe/kRZwOmQlLWZGO8DK+Cs555+7mawk2KUnF/dBwcLnrvlCDk/xC+BXfz7Zva+Jfg=="
+    },
    "highlight.js": {
      "version": "9.18.5",
      "resolved": "https://registry.npmmirror.com/highlight.js/-/highlight.js-9.18.5.tgz",
@@ -5751,6 +5781,11 @@
        "sourcemap-codec": "^1.4.8"
      }
    },
+    "marked": {
+      "version": "4.2.12",
+      "resolved": "https://registry.npmmirror.com/marked/-/marked-4.2.12.tgz",
+      "integrity": "sha512-yr8hSKa3Fv4D3jdZmtMMPghgVt6TWbk86WQaWhDloQjRSQhMMYCAro7jP7VDJrjjdV8pxVxMssXS8B8Y5DZ5aw=="
+    },
    "mavon-editor": {
      "version": "3.0.0",
      "resolved": "https://registry.npmmirror.com/mavon-editor/-/mavon-editor-3.0.0.tgz",
@@ -6673,6 +6708,11 @@
      "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz",
      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
      "dev": true
+    },
+    "yarm": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/yarm/-/yarm-0.4.0.tgz",
+      "integrity": "sha512-yCoX5QCA5Upb+VP7/UBuNGBz7MO5oWyc6degv5AifeGnakpaHeNwE/SNOPMefFKpQBionZyUeRdBo63Dl+awDQ=="
    }
  }
 }
--- a/Yi.BBS.Vue3/package.json
+++ b/Yi.BBS.Vue3/package.json
@@ -11,10 +11,13 @@
    "@element-plus/icons-vue": "^2.1.0",
    "axios": "^1.3.4",
    "element-plus": "^2.2.32",
+    "highlight": "^0.2.4",
+    "marked": "^4.2.12",
    "mavon-editor": "^3.0.0",
    "pinia": "^2.0.32",
    "vue": "^3.2.47",
-    "vue-router": "^4.1.6"
+    "vue-router": "^4.1.6",
+    "yarm": "^0.4.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
--- a/Yi.BBS.Vue3/src/App.vue
+++ b/Yi.BBS.Vue3/src/App.vue
@@ -2,9 +2,16 @@
 </script>

 <template>
+    <el-config-provider :locale="locale">
  <RouterView />
+</el-config-provider>
 </template>
+<script setup>
+  import { ElConfigProvider } from 'element-plus'

+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+const locale= zhCn;
+</script>
 <style scoped>

 </style>
--- a/Yi.BBS.Vue3/src/apis/discussApi.js
+++ b/Yi.BBS.Vue3/src/apis/discussApi.js
@@ -6,10 +6,9 @@ export function getList(data){
        params:data
    })
 };
-
-export function getListByPlateId(plateId){
+export function get(id){
    return myaxios({
-        url: `/discuss/plate-id/${plateId}`,
+        url: `/discuss/${id}`,
        method: 'get'
    })
-};
+};
--- a/Yi.BBS.Vue3/src/components/ArticleContentInfo.vue
+++ b/Yi.BBS.Vue3/src/components/ArticleContentInfo.vue
@@ -0,0 +1,43 @@
+<template>
+    <div>
+        <div class="md" v-html="code"></div>
+        {{ code }}
+        <button @click="code='1234'">你好</button>
+    </div>
+</template>
+  
+<script setup>
+import { marked } from 'marked';
+import hljs from "highlight.js";
+import javascript from 'highlight.js/lib/languages/javascript';
+import 'highlight.js/styles/monokai-sublime.css';
+import { onMounted,ref } from 'vue';
+const code =ref( "```javascript\nfunction(){\n\tconsole.log(123)\n}\n```\n"
+"# 你好世界\n"+
+"## 是我的"
+)
+
+// const props = defineProps(['code'])
+
+onMounted(() => {
+    // code.value=props.code;
+    marked.setOptions({
+        renderer: new marked.Renderer(),
+        highlight: function (code) {
+            return hljs.highlightAuto(code.value).value;
+        },
+        pedantic: false,
+        gfm: true,
+        tables: true,
+        breaks: false,
+        sanitize: false,
+        smartLists: true,
+        smartypants: false,
+        xhtml: false
+    }
+    );
+    code.value = marked(code.value)
+    console.log( code.value," code.value");
+})
+
+</script>
--- a/Yi.BBS.Vue3/src/components/AvatarInfo.vue
+++ b/Yi.BBS.Vue3/src/components/AvatarInfo.vue
@@ -20,6 +20,7 @@
    </div>
 </template>
 <script setup>
+
 import { onMounted } from 'vue';

 const props = defineProps(['size', 'src','showWatching','time'])
--- a/Yi.BBS.Vue3/src/components/DisscussCard.vue
+++ b/Yi.BBS.Vue3/src/components/DisscussCard.vue
@@ -7,7 +7,7 @@



-        <div class=" item item-title "> <el-link size="100" :underline="false" @click="enterDiscuss">{{props.title}}</el-link></div>
+        <div class=" item item-title "> <el-link size="100" :underline="false" @click="enterDiscuss(props.id)">{{props.title}}</el-link></div>
        <div class=" item item-description">{{props.introduction}}</div>
        <div class=" item item-tag"><el-tag v-for="i in 4" :key="i">教程</el-tag></div>
        <div class=" item item-bottom">
@@ -35,12 +35,12 @@ import { h, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import AvatarInfo from './AvatarInfo.vue';

-const props = defineProps(['title','introduction','createTime'])
+const props = defineProps(['title','introduction','createTime','id'])

 const router = useRouter()
 const spacer = h(ElDivider, { direction: 'vertical' })
-const enterDiscuss = () => {
-    router.push("/article")
+const enterDiscuss = (id) => {
+    router.push(`/article/${id}`)
 }
 </script>
 <style scoped>
--- a/Yi.BBS.Vue3/src/main.js
+++ b/Yi.BBS.Vue3/src/main.js
@@ -6,11 +6,13 @@ import router from './router'

 import './assets/main.css'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+
+
+
 const app = createApp(App)
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
  }
 app.use(createPinia())
 app.use(router)
-
 app.mount('#app')
--- a/Yi.BBS.Vue3/src/router/index.js
+++ b/Yi.BBS.Vue3/src/router/index.js
@@ -17,7 +17,7 @@ const router = createRouter({
        },
        {
          name:'article',
-          path: '/article',
+          path: '/article/:discussId',
          component: () => import('../views/Article.vue')
        },
        {
--- a/Yi.BBS.Vue3/src/views/Article.vue
+++ b/Yi.BBS.Vue3/src/views/Article.vue
@@ -19,7 +19,13 @@
                                </template>
                            </InfoCard>
                        </el-col>
-
+                        <el-col :span="24">
+                            <InfoCard :items=items header="推荐好友" text="更多">
+                                <template #item="temp">
+                                    <AvatarInfo />
+                                </template>
+                            </InfoCard>
+                        </el-col>
                    </el-col>

                </el-row>
@@ -33,9 +39,10 @@
                        <AvatarInfo :size="50" :showWatching="true" :time="'2023-03-08 21:09:02'"></AvatarInfo>

                        <el-divider />
-                        <h2>面试题挑战</h2>
-                        文章详情
-
+                        
+                        <h2>{{discuss.title}}</h2>
+                       <!-- {{discuss.content}} -->
+                       <ArticleContentInfo/>

                        <el-divider class="tab-divider" />

@@ -53,7 +60,7 @@

                    </el-col>

-                    <el-col :span="24">
+                    <el-col :span="24" class="comment">
                        文章评论
                    </el-col>
                </el-row>
@@ -83,8 +90,7 @@
                                <div>
                                    <ul class="art-info-ul">
                                        <li v-for="i in 6">
-                                            <el-button style="width: 100%;
-                                              justify-content: left" :key="你好" type="primary" text>{{ i }}：第一小结</el-button>
+                                            <el-button style="width: 100%;justify-content: left" type="primary" text>{{ i }}：第一小结</el-button>
                                        </li>
                                    </ul>
                                </div>
@@ -111,15 +117,21 @@
    </div>
 </template>
 <script setup>
-import { h, ref } from 'vue'
+import { h, ref ,onMounted } from 'vue'
 import AvatarInfo from '@/components/AvatarInfo.vue'
-import InfoCard from '../components/InfoCard.vue';
+import InfoCard from '@/components/InfoCard.vue';
+import ArticleContentInfo from  '@/components/ArticleContentInfo.vue'
+import { useRoute } from 'vue-router'
+
+import {get as discussGet} from '@/apis/discussApi.js';
+
+//数据定义
+const route=useRoute()
 const spacer = h(ElDivider, { direction: 'vertical' })
 const items = [{ user: "用户1" }, { user: "用户2" }, { user: "用户3" }]
 const handleNodeClick = (data) => {
    console.log(data)
 }
-
 const data = [
    {
        label: 'HTML',
@@ -189,9 +201,25 @@ const data = [
        label: 'Tcp/ip',
    }
 ]
+//主题内容
+const discuss=ref({});

+//主题初始化
+const loadDiscuss=async()=>{
+    discuss.value= await discussGet(route.params.discussId);
+}
+
+
+onMounted(async()=>{
+   await loadDiscuss();
+
+})
 </script>
 <style scoped >
+.comment
+{
+    height:40rem;
+}
 .art-info-left {
    margin-bottom: 1rem;
 }
--- a/Yi.BBS.Vue3/src/views/Discuss.vue
+++ b/Yi.BBS.Vue3/src/views/Discuss.vue
@@ -2,20 +2,20 @@
    <div style="width: 1200px;" class="body-div">
 <div class="header">
    <el-form :inline="true" >
-            <el-form-item label="标签：" >
-      <el-input          placeholder="请输入标签"
+            <el-form-item label="标题：" >
+      <el-input  v-model="query.title"        placeholder="请输入标题"
      ></el-input>
    </el-form-item>
      
-    <el-form-item label="内容：">
+    <el-form-item label="标签：">
        <el-input
-        placeholder="搜索当下分类下的内容"
+        placeholder="搜索当下分类下的标签"

      />
    </el-form-item>
    <div class="form-right">
            <el-button>重置</el-button>
-             <el-button type="primary">查询</el-button>
+             <el-button type="primary" @click="async()=>{ await loadDiscussList();}">查询</el-button>
            
             <el-dropdown>
    <span class="el-dropdown-link">
@@ -47,31 +47,64 @@
    <el-tab-pane label="最热" name="third">   </el-tab-pane>
  </el-tabs>
 <div class="div-item" v-for="i in discussList" >
-  <DisscussCard :title="i.title" :introduction="i.introduction" :createTime="i.createTime"/>
+  <DisscussCard :title="i.title" :introduction="i.introduction" :createTime="i.createTime" :id="i.id"/>
 </div>
+<div>
+    <el-pagination
+      v-model:current-page="query.pageNum"
+      v-model:page-size="query.pageSize"
+      :page-sizes="[10, 20, 30, 50]"
+      :background="true"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="total"
+      @size-change="async(val)=>{ await loadDiscussList();}"
+      @current-change="async(val)=>{ await loadDiscussList();}"
+    />
+  </div>
+
+<el-empty v-if="discussList.length==0" description="空空如也" />
    </div>
 </template>
+
+
 <script setup>
 import DisscussCard from '@/components/DisscussCard.vue'
-import {getListByPlateId} from '@/apis/discussApi.js'
-import { onMounted, ref } from 'vue'
-import { useRouter,useRoute } from 'vue-router'
-const router = useRouter()
+import {getList} from '@/apis/discussApi.js'
+import { onMounted, ref,reactive  } from 'vue'
+import { useRoute } from 'vue-router'
+
+//数据定义
 const route=useRoute()
 const activeName = ref('first')
-
 const discussList=ref([]);
+const total=ref(100)
+const query=reactive({
+  pageNum:1,
+  pageSize:10,
+  title:'',
+  plateId:''
+})

 const handleClick = (tab, event) => {
  console.log(tab, event)
 }

 onMounted(async()=>{
- const response= await getListByPlateId(route.params.plateId);
- discussList.value=response.items;
+ await loadDiscussList();
 })
+
+//加载discuss
+const loadDiscussList=async()=>{
+  query.plateId=route.params.plateId;
+  const response= await getList(query);
+ discussList.value=response.items;
+ total.value=Number( response.total);
+}
+
 </script>
 <style scoped>
+.el-pagination
+{margin: 2rem 0rem 2rem 0rem;justify-content: right;}
 .body-div{
 min-height: 1000px;
 }
--- a/Yi.BBS.Vue3/src/views/Index.vue
+++ b/Yi.BBS.Vue3/src/views/Index.vue
@@ -14,7 +14,7 @@
          </el-col>

        <el-col :span="24" v-for="i in discussList">
-<DisscussCard :title="i.title" :introduction="i.introduction" :createTime="i.createTime"/>
+<DisscussCard :title="i.title" :introduction="i.introduction" :createTime="i.createTime" :id="i.id"/>
          
        </el-col>
      </el-row>
--- a/Yi.Framework.Net6/src/project/BBS/Yi.BBS.Application/ApplicationSwaggerDoc.xml
+++ b/Yi.Framework.Net6/src/project/BBS/Yi.BBS.Application/ApplicationSwaggerDoc.xml
@@ -64,11 +64,10 @@
            Discuss应用服务实现,用于参数效验、领域服务业务组合、日志记录、事务处理、账户信息
            </summary>
        </member>
-        <member name="M:Yi.BBS.Application.Forum.DiscussService.GetPlateIdAsync(System.Int64,Yi.BBS.Application.Contracts.Forum.Dtos.Discuss.DiscussGetListInputVo)">
+        <member name="M:Yi.BBS.Application.Forum.DiscussService.GetListAsync(Yi.BBS.Application.Contracts.Forum.Dtos.Discuss.DiscussGetListInputVo)">
            <summary>
-            获取改板块下的主题
+            查询
            </summary>
-            <param name="plateId"></param>
            <param name="input"></param>
            <returns></returns>
        </member>
--- a/Yi.Framework.Net6/src/project/bbs/Yi.BBS.Application.Contracts/Forum/Dtos/Discuss/DiscussGetListInputVo.cs
+++ b/Yi.Framework.Net6/src/project/bbs/Yi.BBS.Application.Contracts/Forum/Dtos/Discuss/DiscussGetListInputVo.cs
@@ -9,5 +9,8 @@ namespace Yi.BBS.Application.Contracts.Forum.Dtos.Discuss
 {
    public class DiscussGetListInputVo : PagedAndSortedResultRequestDto
    {
+        public string? Title { get; set; }
+
+        public long? PlateId { get; set; }
    }
 }
--- a/Yi.Framework.Net6/src/project/bbs/Yi.BBS.Application/ApplicationSwaggerDoc.xml
+++ b/Yi.Framework.Net6/src/project/bbs/Yi.BBS.Application/ApplicationSwaggerDoc.xml
@@ -64,11 +64,10 @@
            Discuss应用服务实现,用于参数效验、领域服务业务组合、日志记录、事务处理、账户信息
            </summary>
        </member>
-        <member name="M:Yi.BBS.Application.Forum.DiscussService.GetPlateIdAsync(System.Int64,Yi.BBS.Application.Contracts.Forum.Dtos.Discuss.DiscussGetListInputVo)">
+        <member name="M:Yi.BBS.Application.Forum.DiscussService.GetListAsync(Yi.BBS.Application.Contracts.Forum.Dtos.Discuss.DiscussGetListInputVo)">
            <summary>
-            获取改板块下的主题
+            查询
            </summary>
-            <param name="plateId"></param>
            <param name="input"></param>
            <returns></returns>
        </member>
--- a/Yi.Framework.Net6/src/project/bbs/Yi.BBS.Application/Forum/DiscussService.cs
+++ b/Yi.Framework.Net6/src/project/bbs/Yi.BBS.Application/Forum/DiscussService.cs
@@ -29,17 +29,19 @@ namespace Yi.BBS.Application.Forum
        private IRepository<PlateEntity> _plateEntityRepository { get; set; }

        /// <summary>
-        /// 获取改板块下的主题
+        /// 查询
        /// </summary>
-        /// <param name="plateId"></param>
        /// <param name="input"></param>
        /// <returns></returns>

-        public async Task<PagedResultDto<DiscussGetListOutputDto>> GetPlateIdAsync([FromRoute] long plateId, [FromQuery] DiscussGetListInputVo input)
+        public override async Task<PagedResultDto<DiscussGetListOutputDto>> GetListAsync( [FromQuery] DiscussGetListInputVo input)
        {
-            var entities = await _repository.GetPageListAsync(x => x.PlateId == plateId, input);
+            RefAsync<int> total = 0;
+            var entities = await _DbQueryable
+                 .WhereIF(!string.IsNullOrEmpty(input.Title), x => x.Title.Contains(input.Title))
+                     .WhereIF(input.PlateId is not null, x => x.PlateId == input.PlateId)
+                .ToPageListAsync(input.PageNum, input.PageSize, total);
            var items = await MapToGetListOutputDtosAsync(entities);
-            var total = await _repository.CountAsync(x => x.IsDeleted == false);
            return new PagedResultDto<DiscussGetListOutputDto>(total, items);
        }