feat(nav): upgrade sidebar, navScreenMenu, localNav components with pinia

Author: andurils

examples/App.vue

@@ -6,9 +6,11 @@ import {
   watchEffect,
   provide,
   onUnmounted,
+  watch,
 } from "vue";
 import { useSidebar } from "@examples/composables/sidebar";
 import { useRoute } from "@examples/composables/router";
+import { useSidebarStore } from "./store/modules/sidebar";
 
 export default {
   name: "App",
@@ -24,24 +26,24 @@ export default {
 
   setup() {
     const router = useRoute();
-    // 解构
-    const {
-      isOpen: isSidebarOpen,
-      open: openSidebar,
-      close: closeSidebar,
-    } = useSidebar(router.value);
+    const sidebarStore = useSidebarStore();
+    sidebarStore.setCurrentRoute(router.value);
+
+    watch(router, (newValue, oldValue) => {
+      sidebarStore.setCurrentRoute(newValue);
+    });
 
     // https://stackoverflow.com/questions/53126710/how-to-get-current-name-of-route-in-vue
     let triggerElement: HTMLButtonElement | undefined;
     watchEffect(() => {
-      triggerElement = isSidebarOpen.value
+      triggerElement = sidebarStore.getSidebarOpen
         ? (document.activeElement as HTMLButtonElement)
         : undefined;
     });
 
     const onEsacpe = (e: KeyboardEvent) => {
-      if (e.key === "Escape" && isSidebarOpen.value) {
-        closeSidebar();
+      if (e.key === "Escape" && sidebarStore.getSidebarOpen) {
+        sidebarStore.setSidebarClose();
         triggerElement?.focus();
       }
     };
@@ -54,7 +56,7 @@ export default {
       window.removeEventListener("keyup", onEsacpe);
     });
 
-    provide("close-sidebar", closeSidebar);
+    provide("close-sidebar", sidebarStore.setSidebarClose);
 
     const isComponent = computed(
       () =>
@@ -76,22 +78,27 @@ export default {
       isRepl,
       isChangelog,
       isHome,
-      // Sidebar
-      isSidebarOpen,
-      openSidebar,
-      closeSidebar,
+
+      sidebarStore,
+      openSidebar: sidebarStore.setSidebarOpen,
+      closeSidebar: sidebarStore.setSidebarClose,
     };
   },
 };
 </script>
 <template>
   <div id="app" class="VPApp" :class="{ 'is-component': isComponent }">
     <!-- <VPSkipLink /> -->
-    <VCVBackdrop class="backdrop" :show="isSidebarOpen" @click="closeSidebar" />
+    <VCVBackdrop
+      class="backdrop"
+      :show="sidebarStore.getSidebarOpen"
+      @click.native="closeSidebar"
+    />
     <Banner />
     <VPNav />
-    <VPLocalNav :open="isSidebarOpen" @open-menu="openSidebar" />
-    <VPSidebar :open="isSidebarOpen">
+    <!-- 左侧导航隐藏后显示 -->
+    <VPLocalNav :open="sidebarStore.getSidebarOpen" @open-menu="openSidebar" />
+    <VPSidebar :open="sidebarStore.getSidebarOpen">
       <template #top> </template>
       <template #bottom> </template>
     </VPSidebar>

examples/docs/guides/code-logic-intro.md

@@ -1,13 +1,12 @@
-
-# 0x00 前言
+# 源码概述
 
 书接上文，本文将从源码功能方面讲解下 `vue-code-view` 组件核心逻辑，您可以了解以下内容：
 
 - 动态组件的使用。
 - `codeMirror`插件的使用。
 - 单文件组件(SFC,single-file component) Parser。
 
-# 0x01 CodeEditor组件
+## CodeEditor组件
 
 项目使用功能丰富的`codeMirror`实现在线代码展示编辑功能。  
 
@@ -150,7 +149,7 @@ this.codeEditor.setValue(this.value);
 this.codeEditor.on("change", (item) => { this.codeHandler(item.getValue()); });
 ```
 
-# 0x02 SFC Parser
+## SFC Parser
 
 组件的功能场景是用于简单示例代码运行展示，将源码视为 单文件组件(SFC,single-file component)的简单实例。
 
@@ -183,15 +182,15 @@ export interface SFCBlock {
 `SFCDescriptor` 包含 `template`、`script`、`styles`、`customBlocks` 四个部分，将用于示例组件的动态构建。 其中 `styles`是数组，可以包含多个代码块并解析； `template`和`script` 若存在多个代码块只能解析最后一个。
 `customBlocks`是没在`template`的HTML代码，处理逻辑暂未包含此内容。
 
-# 0x03 组件动态样式
+## 组件动态样式
 
 文件`src\utils\style-loader\addStylesClient.js` 移植 `vue-style-loader` 源码 [addStylesClient](https://github.com/vuejs/vue-style-loader/blob/master/lib/addStylesClient.js) 方法,用于在页面DOM中动态创建组件样式。
 
 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b1c7fda5256549929e49f5be63326ffd~tplv-k3u1fbpfcp-watermark.image?)
 
 根据 `SFCDescriptor` 中的 `styles`和组件编号，在DOM中添加对应样式内容，若新增删除 `<style>`，页面DOM中对应创建或移除该样式内容。若更新  `<style>`内容，DOM节点只更新对应块的内容，优化页面性能。
 
-# 0x04 CodeViewer 组件
+## CodeViewer 组件
 
 使用 `JSX` 语法实现组件核心代码。
 
@@ -378,6 +377,6 @@ computed: {
 
 ---
 
-# 完结
+## 完结
 
-此组件编写是个人对于 [📚Element 2 源码学习系列](https://juejin.cn/column/6961321064110489631 "https://juejin.cn/column/6961321064110489631") 学习实践的总结,希望会对您有所帮助!
+此组件编写是个人对于 [📚Element 2 源码学习系列](https://juejin.cn/column/6961321064110489631) 学习实践的总结,希望会对您有所帮助!

examples/docs/guides/overview.md

@@ -4,13 +4,7 @@
   </a>
 </p>
 
-<h1 align="center">Vue Code View(VCV)</h1>
- 
-![Build Status](https://app.travis-ci.com/andurils/vue-code-view.svg?branch=dev)
-![GitHub license](https://img.shields.io/github/license/andurils/vue-code-view)
-![npm](https://img.shields.io/npm/v/vue-code-view)
-![npm bundle size](https://img.shields.io/bundlephobia/min/vue-code-view)
-![npm](https://img.shields.io/npm/dt/vue-code-view?label=npm%20downloads)
+<h1 align="center">Vue Code View(VCV)</h1> 
 
  一个基于 `vue 2.x`的轻量代码交互组件，在网页中可以编辑、运行并实时预览代码效果展示。
 

examples/docs/guides/project-intro.md

@@ -1,5 +1,4 @@
-
-# 0x00 前言
+# 项目概述
 
 本文将从结构、功能等方面讲解下项目 `vue-code-view` 的搭建过程，您可以了解以下内容：
 
@@ -9,138 +8,9 @@
 - 项目NPM包发布。
 - 项目组件的自定义 `Markdown` 解析 `loader`。
 
-本文算是 [📚Element 2 源码学习系列](https://juejin.cn/column/6961321064110489631) 的拓展篇内容，通过之前的文章了解了开源组件库的结构原理后，自己也搭建个组件项目怎么办？接下来就是实践的过程，算是"**知行合一**"了吧！ 耐心读完，相信会对您有所帮助!
-
----
-
-# 0x01 项目概述
-
-## 创建项目
-
-本项目使用 `Vue CLI 4.x` 进行项目创建。
-
-```bash
-// 安装环境 
-npm install -g @vue/cli 
-// 创建项目 
-vue create vue-code-view
-```
-
-在终端中输入命令后，按照以下步骤操作创建项目：
-
-1. 选择手动选择功能 `Manually select features`。
-2. 选中 `Babel`, `Router`, `CSS Pre-processors`,`Linter / Formatter`等功能 。
-3. 选择 `vue` 版本 `2.X`
-4. 选择路由是否使用`history`模式，默认 `yes`。
-5. 选择CSS 预处理器`Sass/SCSS(with node-sass)`。
-6. 选择代码风格、格式校验 `linter / formatter`配置`ESLint + Prettier`。
-7. 选择校验时机保存时检测`Lint on save`  
-8. 选择 `Babel`, `ESLint`等配置文件存放在专用配置文件中  `In dedicated config files`。
-
-## 配置多环境变量
-
-在项目根目录中新建 `.env`, `.env.deploy`,`.env.production`等文件。
-
-以 `VUE_APP` 开头的变量会被 `webpack.DefinePlugin` 静态嵌入到客户端侧的包中，代码中可以通过 `process.env.VUE_APP[xxx]` 访问。
-
-> `NODE_ENV` 和 `BASE_URL` 是两个特殊变量，在代码中始终可用。
-
-**.env**\
-`vue-cli-service serve` 默认的本地开发环境配置
-
-```bash
-NODE_ENV = development
-VUE_APP_PUBLIC_PATH = /
-```
-
-**.env.production**\
-`vue-cli-service build` 默认的环境配置（正式服务器）
-
-```bash
-NODE_ENV = production 
-VUE_APP_PUBLIC_PATH = /
-VUE_APP_ENV = pub
-```
-
-**.env.deploy**\
-用于 github pages 构建部署的环境配置。`VUE_APP_PUBLIC_PATH` 设置 `/vue-code-view` 用于虚拟目录。
-
-```bash
-NODE_ENV = production 
-VUE_APP_PUBLIC_PATH = /vue-code-view
-VUE_APP_ENV = deploy
-```
+## 项目构建
 
-## 目录结构调整
-
-默认的 `src` 目录下存放项目源码及需要引用的资源文件。根目录下新建 `examples` 文件夹用于项目示例网站，将`src` 目录下文件移至 `examples` 文件 。`src` 目录存放项目组件源码。
-
-调整后根目录文件结构如下：
-
-```bash
-├── examples   // 项目示例网站
-|  ├── App.vue
-|  ├── assets
-|  ├── components
-|  ├── main.js
-|  ├── router
-|  └── views 
-├── src       // 项目组件源码 
-|  ├── fonts
-|  ├── index.js
-|  ├── locale
-|  ├── mixins
-|  ├── src
-|  ├── styles
-|  └── utils
-├── public
-├── package.json
-```
-
-## 配置基础 vue.config.js
-
-项目默认入口`./src/main.js`,配置如下：
-
-```js
-{
-  entry: {
-    app: [
-      './src/main.js'
-    ]
-  }
-} 
-```
-
-在根目录下创建 `vue.config.js` 修改默认配置。
-
-```js
-const path = require("path");
-const resolve = (dir) => path.join(__dirname, dir);
-
-module.exports = {
-  configureWebpack: (config) => {
-    // 项目入口
-    config.entry.app = "./examples/main.js";
-  },
-  chainWebpack: (config) => {
-    // 添加别名
-    config.resolve.alias
-      .set("vue$", "vue/dist/vue.esm.js")
-      .set("@", resolve("examples"))
-      .set("@assets", resolve("examples/assets"))
-      .set("@src", resolve("src"))
-      .set("@views", resolve("examples/views"))
-      .set("@router", resolve("examples/router"))
-      .set("@store", resolve("examples/store")); 
-  },
-}; 
-```
-
-运行 `npm run serve` ， 项目网站正常运行。
-
-# 0x02 项目构建
-
-## npm scripts 配置
+### npm scripts 配置
 
 调整 `package.json` 里的 `scripts` 配置脚本,并添加 `--mode xxx` 来选择不同环境配置。
 
@@ -155,7 +25,7 @@ module.exports = {
 }
 ```
 
-## 组件构建  
+### 组件构建  
 
 组件库构建通过指定入口文件`src/index.js`、设定参数选项。
 
@@ -176,7 +46,7 @@ module.exports = {
 - `lib/vue-code-viewer.umd.min.js`：压缩后的 UMD 构建版本。
 - `lib/vue-code-viewer.css`：提取出来的 CSS 文件。
 
-## 组件NPM包发布  
+### 组件NPM包发布  
 
 配置 `package.json` 文件中属性值用于npm 发布。
 
@@ -248,7 +118,7 @@ deploy/
 
 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c96d56ee6144485f93913b688f664e68~tplv-k3u1fbpfcp-watermark.image?)
 
-## 项目示例网站构建  
+### 项目示例网站构建  
 
 更新 `vue.config.js`，运行 `npm run deploy:build` 构建项目示例网站输出至 `deploy` 目录下。
 
@@ -270,7 +140,7 @@ module.exports = {
 
 ```
 
-## 持续集成
+### 持续集成
 
 使用 `Travis CI`的持续集成服务自动构建项目示例网站并部署至 `gh-pages` 分支 。
 
@@ -305,7 +175,7 @@ after_script:
 
 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dbfeedcb19854b06acb0af1ec87e415e~tplv-k3u1fbpfcp-watermark.image?)
 
-## 开启构建压缩
+### 开启构建压缩
 
 安装相关插件。
 
@@ -370,7 +240,7 @@ module.exports = {
 
 ```
 
-## 组件说明文档
+### 组件说明文档
 
 参考`element 2`的实现，自定义 `build/md-loder`对 `Markdown` 文件进行解析渲染，将 `examples\docs\zh-CN\example.md` 编译为 HTML。已在前文 [04.封装组件封装、编写说明文档](https://juejin.cn/post/6953614014546968589#heading-5) 中详细说明,不再过多赘述。
 
@@ -410,5 +280,3 @@ const routes = [
   },
 ];
 ```
-
----

examples/docs/tutorials/todo.md

@@ -0,0 +1,3 @@
+# tutorial
+
+内容建设中...

examples/layouts/content/VPContent.vue

@@ -71,6 +71,7 @@ export default defineComponent({
 
     <!-- <VPNotFound v-if="route.path === 'VPNotFound'" /> -->
     <!-- <VPContentPage v-else-if="!!frontmatter.page"> -->
+    <!-- 文档展示 存在侧边/底部 -->
     <VPContentDoc v-if="!!hasSidebar" :class="{ 'has-sidebar': !!hasSidebar }">
       <template #content-top><slot name="content-top" /></template>
       <template #content-bottom><slot name="content-bottom" /></template>