V1.2.0需求 4个页面新增及功能 待处理编辑器锚点定位、编辑器发布的文章UI优化、中英文翻译

mining-pool/src/views/announcementDetails/index.js

@@ -0,0 +1,79 @@
+import { documentsList,findDataInfo} from '../../api/documentManagement'
+export default {  
+    data() {
+      return {
+        problems: [
+          {
+            id: 1,
+            title: "如何开始挖矿？",
+            content: "详细步骤：注册、配置矿机、连接矿池。",
+          },
+          {
+            id: 2,
+            title: "如何查看收益？",
+            content: "登录后在个人中心查看收益统计。",
+          },
+          {
+            id: 3,
+            title: "如何联系客服？",
+            content: "可通过在线客服或提交工单联系我们。",
+          },
+        ],
+        listParams:{
+            type:"3",//常见问题
+            lang:this.$i18n.locale,
+            pageNum:1,
+            pageSize:50
+          },
+          problemLoading:false,
+          DetailsParams:{
+            id:"",
+            lang:this.$i18n.locale,
+          },
+          info:""
+      };
+    },
+    mounted() {
+        this.DetailsParams.id = this.$route.query.id;
+        console.log(this.$route.query.id,"this.DetailsParams.id");
+        if (this.DetailsParams.id) {
+            this.fetchProblemDetails(this.DetailsParams)
+        }
+        this.fetchProblemsList(this.listParams)
+    },
+    methods: {
+        async fetchProblemsList(params) {
+            this.setLoading('problemLoading', true);
+            const res = await documentsList(params)
+            if(res && res.code === 200){
+                this.problems = res.rows;
+                // this.DetailsParams.id = this.problems[0].id;
+                // this.fetchProblemDetails(this.DetailsParams)
+            }
+            this.setLoading('problemLoading', false);
+        },
+
+        async fetchProblemDetails(params) {
+            this.setLoading('problemLoading', true);
+            const res = await findDataInfo(params)
+            if(res && res.code === 200){
+               console.log(res,"res");
+                this.info = res.data.content || ""
+            }
+            this.setLoading('problemLoading', false);
+        },
+
+
+
+
+      /**
+       * 跳转到问题详情页
+       * @param {number} id 问题ID
+       */
+      handleClick(id) {
+      
+        this.DetailsParams.id = id;
+        this.fetchProblemDetails(this.DetailsParams)
+      },
+    },
+  };

mining-pool/src/views/announcementDetails/index.vue

@@ -0,0 +1,131 @@
+<template>
+    <div class="announcementDetails">
+      <section class="container">
+        <section class="leftNav">
+          <div class="leftNav-item " :class="{active:DetailsParams.id == item.id}"  v-for="item in problems" :key="item.id" @click="handleClick(item.id)">
+            {{ item.title }}
+          </div>
+        </section>
+        <section class="rightContent">
+          <div v-if="problemLoading" class="loading-container">
+            <span class="loading-text">正在加载内容...</span>
+          </div>
+          <div v-else-if="info && info.trim()" class="dynamic-content" v-html="info"></div>
+          <div v-else class="no-content">
+            <p>暂无内容</p>
+          </div>
+        </section>
+      </section>
+    </div>
+  </template>
+  
+  <script>
+  import IndexJs from "./index.js";
+  export default {
+    mixins: [IndexJs],
+  }
+  </script>
+  
+  <style lang="scss" scoped>
+  .announcementDetails{
+    width: 100vw;
+    height: 100vh;
+    background: #F8F9FA;
+    padding-top: 60px;
+  }
+  .container{
+    display: flex;
+    justify-content: center;
+    width: 70vw;
+    height: 80vh;
+    margin: 0 auto;
+    background: #fff;
+    border-radius: 10px;
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+    padding: 20px;
+  
+    padding-top: 50px;
+    .leftNav{
+      width: 200px;
+      height: 100%;
+      overflow-y: auto;
+    }
+    .rightContent{
+      flex: 1;
+      height: 100%;
+      margin-left: 50px;
+      overflow-y: auto;
+      padding-right: 20px;
+      .dynamic-content {
+        width: 100%;
+        margin: 0 auto;
+       
+        // 富文本样式
+        :deep(table) {
+          border-collapse: collapse;
+          width: 100%;
+          margin: 16px 0;
+        }
+        :deep(th), :deep(td) {
+          border: 1px solid #d1d5db;
+          padding: 8px 12px;
+          text-align: left;
+        }
+        :deep(th) {
+          background: #f3f4f6;
+          font-weight: bold;
+        }
+        :deep(strong), :deep(b) {
+          font-weight: bold !important;
+          color: inherit !important;
+          font-style: normal !important;
+        }
+        :deep(em), :deep(i) {
+          font-style: italic !important;
+          color: inherit !important;
+        }
+        :deep(a) {
+          color: #007bff !important;
+          text-decoration: none !important;
+          &:hover {
+            text-decoration: underline !important;
+          }
+        }
+      }
+      .loading-container {
+        text-align: center;
+        padding: 40px 0;
+        .loading-text {
+          font-size: 16px;
+          color: #666;
+          vertical-align: middle;
+        }
+      }
+      .no-content {
+        text-align: center;
+        padding: 40px 0;
+        p {
+          font-size: 16px;
+          color: #999;
+          margin: 0;
+        }
+      }
+    }
+  }
+  
+  .leftNav-item{
+    cursor: pointer;
+    padding: 10px;
+    margin-bottom: 10px;
+    text-decoration: underline;
+    text-align: right;
+    &:hover{
+      background:rgba(0,0,0,0.02);
+      color: #651FFF;
+    }
+  }
+  
+  .active{
+    color: #651FFF;
+  }
+  </style>