refactor: 💡 代码&样式优化

demo/docs/.vitepress/config.mjs

@@ -1,8 +1,7 @@
-import { defineConfig } from 'vitepress'
-import extendMarkdown from './highlight'
-import sidebarConfig from './sidebar/sidebar'
 import fs from 'fs'
 import path from 'path'
+import { defineConfig } from 'vitepress'
+import sidebarConfig from './sidebar/sidebar'
 
 function init() {
   const dir = path.resolve(__dirname, '../guide')
@@ -24,8 +23,7 @@ function init() {
     },
     // 配置 Markdown 解析器选项
     markdown: {
-      lineNumbers: true,
-      extendMarkdown
+      lineNumbers: true
     },
     themeConfig: {
       iframeConfig: {

demo/docs/.vitepress/theme/index.mjs

@@ -1,6 +1,7 @@
 import VueseWebsiteTheme from '@mpxjs/vuese-website/dist/theme/index'
-import Layout from '../../../../packages/website/theme/layouts/Layout.vue'
+import Layout from '@mpxjs/vuese-website/dist/theme/layouts/Layout.vue'
 import Card from '@mpxjs/vuese-website/dist/theme/global-components/Card.vue'
+import '@mpxjs/vuese-website/dist/theme/styles/vars.css'
 
 export default {
   extend: VueseWebsiteTheme,

package.json

@@ -5,7 +5,7 @@
     "packages/*"
   ],
   "scripts": {
-    "demo": "node ./demo/index.js",
+    "serve": "node ./demo/index.js",
     "test": "yarn lint && jest --verbose",
     "build": "yarn lint && node ./scripts/build.js",
     "prepublishOnly": "yarn toc && yarn build",

packages/website/lib/gen-src-md.ts

@@ -1,13 +1,12 @@
 import path from 'path'
 import fs from 'fs'
+import hljs from 'highlight.js'
+import dirtyJson from 'dirty-json'
 import { parser } from '@mpxjs/vuese-parser'
 import { Render } from '@mpxjs/vuese-markdown-render'
 import { markdownRenderConfig } from './contants'
-import hljs from 'highlight.js'
-import dirtyJson from 'dirty-json'
 import { delScriptJsonBlock, delEmptyContentLineBreaks } from '../utils/index'
 
-
 export function genSrcMd(fileName: string, fullPath: string): Promise<string> {
   return new Promise(resolve => {
     fs.readFile(fullPath, 'utf-8', (err, content) => {

packages/website/lib/watch-change.ts

@@ -1,10 +1,10 @@
+import fs from 'fs'
+import path from 'path'
 import nodeWatch from 'node-watch'
 import { getCache } from './cache'
 import { genExampleMd } from './gen-example-md'
 import { genSrcMd } from './gen-src-md'
 import { getFiles } from './get-files-list'
-import fs from 'fs'
-import path from 'path'
 import { WebsiteConfig } from './index'
 
 export function watch(

packages/website/theme/components/Preview.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="containerRef" class="preview-container" v-if="showPreview">
+  <div class="preview-container" v-if="showPreview">
     <div class="preview" ref="previewRef">
       <span class="current-time"></span>
       <header class="header">
@@ -114,58 +114,21 @@ const handleMessage = e => {
   }
 }
 
-window.addEventListener('message', handleMessage)
-
-const containerRef = ref()
 const previewRef = ref()
 const calcPreviewerHeight = () => {
   const el = previewRef.value
   el.style.height = `${window.innerHeight - 110}px`
 }
-const calcPreviewerTransform = () => {
-  let offset = 0
-  const el = previewRef.value
 
-  if (!el.offsetParent) {
-    const container = containerRef.value
-    const elOffsetLeft = el.offsetLeft
-    const containerOffsetLeft = container.offsetLeft
-    offset = containerOffsetLeft - elOffsetLeft
-  } else {
-    const clientRect = el.getBoundingClientRect()
-    const innerWidth = window.innerWidth
-    offset =
-      clientRect.right < innerWidth ? 0 : clientRect.right - innerWidth + 24 // 24为右边距
-  }
-  // el.style.transform = `translateX(${offset}px)`
-}
 const handleResize = throttle(() => {
   calcPreviewerHeight()
-  calcPreviewerTransform()
 })
-const calcPreviewerPosition = () => {
-  let offset = 0
-  const el = previewRef.value
 
-  if (!el.offsetParent) {
-    const container = containerRef.value
-    const elOffsetLeft = el.offsetLeft
-    const containerOffsetLeft = container.offsetLeft
-    offset = containerOffsetLeft - elOffsetLeft
-  } else {
-    const clientRect = el.getBoundingClientRect()
-    const innerWidth = window.innerWidth
-    offset =
-      clientRect.right < innerWidth ? 0 : clientRect.right - innerWidth + 24 // 24为右边距
-  }
-  // el.style.transform = `translateX(${offset}px)`
-}
+window.addEventListener('message', handleMessage)
 
 onMounted(() => {
   handleResize()
-  calcPreviewerPosition()
   window.addEventListener('resize', handleResize)
-  window.addEventListener('scroll', calcPreviewerPosition)
   iframeRef.value.onload = () => {
     syncChildPath(router.route.path)
     showBackHandler(router.route.path)
@@ -174,7 +137,6 @@ onMounted(() => {
 
 onUnmounted(() => {
   window.removeEventListener('resize', handleResize)
-  window.removeEventListener('scroll', calcPreviewerPosition)
   window.removeEventListener('message', handleMessage)
 })
 </script>

packages/website/theme/layouts/Layout.vue

@@ -38,6 +38,7 @@ const showPreview = computed(() => {
   min-height 100vh
   min-width 100%
   background-color #f7f8fa
+  overflow: auto
 
   @media screen and (max-width: $MQMobile)
     flex-direction: column