eazy-gitee-note
/
index.html

<!--
 * @Author: N0ts
 * @Date: 2021-10-08 00:36:01
<<<<<<< HEAD
 * @LastEditTime: 2022-05-30 23:50:22
=======
 * @LastEditTime: 2022-01-06 15:02:52
>>>>>>> 7ec3cea57a2f8420885f651cc03a6e220cf7db0f
 * @Description: Gitee 笔记
 * @FilePath: /eazy-gitee-note/index.html
 * @Mail：mail@n0ts.cn
-->

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>N0ts的笔记小站</title>
        <meta name="description" content="网站介绍" />
        <meta name="keywords" content="关键词" />
        <link rel="icon" href="https://n0ts.gitee.io/lovexhjto520/favicon.ico" />
        <link
            href="https://cdn.bootcdn.net/ajax/libs/element-plus/1.0.2-beta.65/theme-chalk/index.min.css"
            rel="stylesheet"
        />
        <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
        <link href="https://cdn.bootcdn.net/ajax/libs/viewerjs/1.10.1/viewer.min.css" rel="stylesheet" />
        <link href="https://cdn.bootcdn.net/ajax/libs/firacode/5.2.0/fira_code.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="./css/main.css" />
        <link id="stylesheet" rel="stylesheet" href="./css/default-light.css" />
    </head>
    <body>
        <div id="app">
            <!-- 加载 -->
            <div class="loading" v-if="!Trees">
                <p>加载中</p>
            </div>
            <!-- 主体 -->
            <div class="main" v-cloak v-else v-loading="loadContent" element-loading-text="全力加载中...">
                <!-- 左侧 -->
                <div :class="{ leftMenu: true, leftMenuHide: menuShow }">
                    <!-- 菜单 -->
                    <el-tabs v-model="treeMenu">
                        <!-- 文件树 -->
                        <el-tab-pane label="文件" name="文件">
                            <div class="trees">
                                <!-- 文件列表头部 -->
                                <div class="treesHead">
                                    <a :href="Trees.giteeURL" target="_blank">
                                        <i class="fa fa-folder-open"></i>
                                        {{ Trees.sha }}
                                    </a>
                                </div>
                                <!-- 文件列表 -->
                                <div
                                    :class="{ treesItem: true, treesItemActive: index == contentSelectIndex }"
                                    v-for="(item, index) in Trees.tree"
                                    @click="getContents(item.path, index)"
                                >
                                    <i class="fa fa-file-code-o"></i>
                                    {{ item.path }}
                                </div>
                            </div>
                        </el-tab-pane>
                        <!-- 目录 -->
                        <el-tab-pane label="目录" name="目录">
                            <div class="contentTrees">
                                <div
                                    :class="{ contentItem: true, contentItemActive: index == menuSelectIndex, [item.tagName]: true }"
                                    v-for="(item, index) in menuData"
                                    @click="menuSelect(index)"
                                >
                                    {{ item.textContent }}
                                </div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                    <!-- 底部菜单 -->
                    <div class="bottomMenu">
                        <div content="回到顶部" @click="backTop">
                            <i class="fa fa-angle-up"></i>
                        </div>
                        <div content="收起菜单" @click="menuShowOrHide" v-if="menuShow">
                            <i class="fa fa-angle-left"></i>
                        </div>
                        <div content="展开菜单" @click="menuShowOrHide" v-else>
                            <i class="fa fa-angle-right"></i>
                        </div>
                        <div content="更换主题" @click="checkTheme">
                            <i class="fa fa-star-half-empty"></i>
                        </div>
                        <div content="编辑本文" @click="editorState = !editorState">
                            <i class="fa fa-pencil"></i>
                        </div>
                        <!-- <div content="设置" @click="openSetting">
                            <i class="fa fa-cog"></i>
                        </div> -->
                    </div>
                </div>
                <!-- 手机端遮罩 -->
                <div :class="{ peBlack: true, peBlackHide: menuShow }" @click="menuShowOrHide"></div>
                <!-- 内容 -->
                <div class="body">
                    <!-- 编辑界面 -->
                    <div class="editor" :class="{editorShow: editorState}">
                        <!-- 编辑菜单 -->
                        <div class="editorMenu">
                            <el-tooltip class="box-item" effect="dark" content="保存" placement="bottom">
                                <i class="fa fa-cloud-upload"></i>
                            </el-tooltip>
                        </div>
                        <!-- 编辑框 -->
                        <textarea v-model="markdown"></textarea>
                    </div>
                    <!-- 文章内容 -->
                    <div
                        :class="{ content: true, contentHide: !menuShow }"
                        ref="contentDom"
                        id="content"
                        :style="'padding-top:' + contentPaddingTop + 'px;'"
                    >
                        <div v-html="content"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- js引用 -->
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.0-beta.7/vue.global.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/element-plus/1.0.2-beta.65/index.full.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/marked/2.1.3/marked.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/viewerjs/1.10.1/viewer.min.js"></script>
        <script src="https://fastly.jsdelivr.net/npm/js-base64@3.7.2/base64.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/editor.js/2.23.0-rc.1/editor.min.js"></script>
        <script src="./js/main.js" type="module"></script>
    </body>
</html>