小编点评

## 内容生成总结 **难点:** * 前端逻辑比较复杂，需要考虑布局、交互设计等因素。 * 文档页面功能开发需要仔细设计页面结构和内容。 * 侧边功能的实现需要针对特定情况进行调整。 **优点:** * 代码简洁易读，逻辑清晰。 * 使用了多种组件和设计元素，提升页面美观性和用户体验。 * 部分功能可以根据需要进行扩展。 **建议:** * 可以尝试使用一些工具或框架来帮助设计和实现页面，例如 Vuex 或 Element Plus。 * 可以使用一些测试框架来测试页面功能。 * 可以根据用户的实际需求进行页面优化。

正文

写在前面

这部分真的感觉超级难，其实也不能说难，主要是真的想不到这个思路应该这么做，或者说他好厉害，他怎么知道该这么设计实现。

说下难点吧，我觉得后天逻辑还好，主要是前端部分真的需要点花点时间来思考，比如布局、交互设计的实现等等。

文档页面功能开发

1、任务拆解

• 增加文档页面，首页点击电子书时，跳转到电子书文档页面
• 左边显示文档树
• 右边显示默认选择第一个节点的内容
• 文档编辑增加预览功能
• 无文档内容时，给出提示
• 功能优化及问题修复

2、增加文档页面

首页点击电子书时，跳转到电子书文档页面，参考之前电子书列表中文档管理的路由跳转即可，示例代码如下：

<router-link :to="'/doc?ebookId='+item.id">
  {{ item.name }}
</router-link>

3、左边显示文档树

就是把文档管理的树形数据变成菜单，选择对应菜单显示对应电子书，示例代码如下：

<a-row>
  <a-col :span="6">
    <a-tree
        v-if="level1 && level1.length"
        :defaultExpandAllRows="true"
        :tree-data="level1"
        @select="onSelect"
        :fieldNames="{title: 'name', key: 'id', value: 'id'}"
        :defaultExpandAll="true"
    >
    </a-tree>
  </a-col>
  <a-col :span="18">
  </a-col>
</a-row>

4、右边默认选择第一个节点

当进入文档页面时，默认就选择第一个节点内容，示例代码如下：

/**
   * 数据查询
   **/
  const handleQuery = () => {
    axios.get("/doc/all/" + route.query.ebookId).then((response) => {
      const data = response.data;
      if (data.success) {
        docs.value = data.content;
        level1.value = [];
        level1.value = Tool.array2Tree(docs.value, 0);
        setParent(level1.value)
        if (Tool.isNotEmpty(level1.value)) {
          defaultSelectedKeys.value = [level1.value[0].id];
          handleQueryContent(level1.value[0].id);
        }
      } else {
        message.error(data.message);
      }
    });
  };

5、文档编辑增加预览功能

就是增加一个按钮，点击后用一个抽屉显示即可，示例代码如下：

<!-- 预览按钮 -->
<a-button type="primary" @click="handlePreviewContent()">
  <EyeOutlined /> 内容预览
</a-button>
// 抽屉
<a-drawer width="750" placement="right" :closable="false" :visible="drawerVisible" @close="onDrawerClose">
  <div class="wangeditor" :innerHTML="previewHtml"></div>
</a-drawer>

6、无文档内容时，给出提示

判断接口返回数据，如果长度为0，就返回页面字符串显示，示例代码如下：

 <h3 v-if="level1.length === 0">对不起，找不到相关文档！</h3>

7、部分功能优化

图标的显示，需要先安装依赖如下：

npm install --save @ant-design/icons-vue

代码部分如下所示：

<a-button type="primary" @click="handlePreviewContent()">
  <EyeOutlined /> 内容预览
</a-button>

import {SmileOutlined, DownOutlined, ExclamationCircleOutlined,EyeOutlined} from '@ant-design/icons-vue';
 
components: {
  SmileOutlined,
  DownOutlined,
  EyeOutlined
},

8、效果

写在最后

这部分内容终于更新完，耗时大约五个小时吧，第一次感觉大脑饱和，有点整不动了，有种被压制的感觉呀，但是也真的好开心，又会了几个组件的使用。

但跳出来看，目前对我而言最大的快乐，也就是每天能会一旦点就可以啦，很简单而充实。

当然这也算单身狗的日常啦，感兴趣的同学可自行尝试！