[其他] 初始化项目结构

docs/src/App.vue

@@ -0,0 +1,3 @@
+<template>
+  <router-view />
+</template>

docs/src/components/LayCode.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="lay-code">
+    <div class="source">
+      <slot />
+    </div>
+    <div
+      ref="meta"
+      class="meta"
+    >
+      <div
+        v-if="$slots.description"
+        class="description"
+      >
+        <slot name="description" />
+      </div>
+      <div class="language-html">
+        <slot name="code" />
+      </div>
+    </div>
+    <div
+      :class="{ 'is-fixed': isFixContorl }"
+      class="control"
+      @click="toggleShow"
+    >
+      <i :class="[show ? 'el-icon-caret-top' : 'el-icon-caret-bottom']" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+
+const meta = ref<HTMLElement>({} as HTMLElement)
+const isFixContorl = ref(false)
+const codeAreaHeight = ref(0)
+
+const show = ref(false);
+
+const toggleShow = function() {
+  show.value = !show.value;
+}
+
+onMounted(() => {
+  const foundDescs = meta.value.getElementsByClassName('description')
+  const foundCodes = meta.value.getElementsByClassName('language-html')
+
+  if (foundDescs.length) {
+    codeAreaHeight.value =
+      foundDescs[0].clientHeight + foundCodes[0].clientHeight + 30
+  } else {
+    codeAreaHeight.value = foundCodes[0].clientHeight + 20
+  }
+})
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', handleScroll)
+})
+
+watch(show, (value) => {
+  if (value) {
+    meta.value.style.height = `${codeAreaHeight.value}px`
+    window.addEventListener('scroll', handleScroll)
+    setTimeout(handleScroll, 100)
+  } else {
+    meta.value.style.height = '0'
+    window.removeEventListener('scroll', handleScroll)
+  }
+})
+
+function handleScroll() {
+  const { top, bottom } = meta.value.getBoundingClientRect()
+  isFixContorl.value =
+    bottom > window.innerHeight && top + 44 <= window.innerHeight
+}
+</script>
+
+<style>
+.lay-code {
+  margin: 1rem 0;
+  border: 1px solid whitesmoke;
+  border-radius: 3px;
+  background: var(--c-bg);
+  transition: all 0.2s;
+}
+.lay-code:hover {
+  box-shadow: var(--shadow-2);
+}
+.lay-code .source {
+  padding: 24px;
+}
+.lay-code .meta {
+  padding: 0 10px;
+  height: 0;
+  background-color: var(--c-page-background);
+  overflow: hidden;
+  transition: height 0.2s;
+}
+.lay-code .meta .description {
+  padding: 20px;
+  margin: 10px 0;
+  border: 1px solid var(--c-divider);
+  box-sizing: border-box;
+  background: var(--c-bg);
+  font-size: 14px;
+  line-height: 22px;
+  color: var(--c-text-light-1);
+  word-break: break-word;
+}
+.lay-code .meta .description p {
+  margin: 0 !important;
+  line-height: 26px !important;
+}
+.lay-code .meta .description code {
+  display: inline-block;
+  padding: 1px 5px;
+  margin: 0 4px;
+  height: 18px;
+  border-radius: 3px;
+  background-color: var(--code-inline-bg-color);
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--c-text-light);
+}
+.lay-code .control {
+  height: 44px;
+  box-sizing: border-box;
+  border-top: 1px solid whitesmoke;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  background: var(--c-bg);
+  text-align: center;
+  color: var(--c-text);
+  cursor: pointer;
+  width: 100%;
+  user-select: none;
+}
+.lay-code .control.is-fixed {
+  position: sticky;
+  z-index: 11;
+  bottom: 0;
+}
+.lay-code .control:hover {
+  background-color: var(--c-page-background);
+  color: var(--c-brand);
+}
+.lay-code .control > i {
+  display: inline-block;
+  font-size: 16px;
+  line-height: 44px;
+  transition: all 0.3s;
+}
+</style>

docs/src/entry-client.ts

@@ -0,0 +1,7 @@
+import { createApp } from './main'
+
+const { app, router } = createApp()
+
+router.isReady().then(() => {
+  app.mount('#app')
+})

docs/src/entry-server.ts

@@ -0,0 +1,51 @@
+import { createApp } from './main'
+import { renderToString } from '@vue/server-renderer'
+
+export async function render(url, manifest): Promise<string[]> {
+  const { app, router } = createApp()
+
+  // set the router to the desired URL before rendering
+  router.push(url)
+  await router.isReady()
+
+  // passing SSR context object which will be available via useSSRContext()
+  // @vitejs/plugin-vue injects code into a component's setup() that registers
+  // itself on ctx.modules. After the render, ctx.modules would contain all the
+  // components that have been instantiated during this render call.
+  const ctx = {}
+  const html = await renderToString(app, ctx)
+
+  // the SSR manifest generated by Vite contains module -> chunk/asset mapping
+  // which we can then use to determine what files need to be preloaded for this
+  // request.
+  const preloadLinks = renderPreloadLinks(ctx.modules, manifest)
+  return [html, preloadLinks]
+}
+
+function renderPreloadLinks(modules, manifest) {
+  let links = ''
+  const seen = new Set()
+  modules.forEach((id) => {
+    const files = manifest[id]
+    if (files) {
+      files.forEach((file) => {
+        if (!seen.has(file)) {
+          seen.add(file)
+          links += renderPreloadLink(file)
+        }
+      })
+    }
+  })
+  return links
+}
+
+function renderPreloadLink(file) {
+  if (file.endsWith('.js')) {
+    return `<link rel="modulepreload" crossorigin href="${file}">`
+  } else if (file.endsWith('.css')) {
+    return `<link rel="stylesheet" href="${file}">`
+  } else {
+    // TODO
+    return ''
+  }
+}

docs/src/layouts/Layout.vue

@@ -0,0 +1,25 @@
+<template>
+  <lay-layout>
+    <lay-header>
+      <lay-logo>layui-logo</lay-logo>
+    </lay-header>
+    <lay-side>
+      <router-link to="/zh-CN/components/layout">布局</router-link>
+      <router-link to="/zh-CN/components/button">按钮</router-link>
+    </lay-side>
+    <lay-body>
+      <div style="padding: 20px">
+        <router-view></router-view>
+      </div>
+    </lay-body>
+    <lay-footer></lay-footer>
+  </lay-layout>
+</template>
+<script>
+import { ref } from 'vue'
+export default {
+  setup() {
+    return {}
+  },
+}
+</script>

docs/src/main.ts

@@ -0,0 +1,25 @@
+import Layout from './App.vue'
+import { App, createApp as _createApp, createSSRApp } from 'vue'
+import { createRouter } from './router/index'
+import { Router } from 'vue-router'
+import Layui from '/@src/index'
+import LayCode from './components/LayCode.vue'
+import './styles/index.css'
+
+export function createApp(): {
+  app: App<Element>
+  router: Router
+} {
+  const app =
+    import.meta.env.MODE === 'production'
+      ? createSSRApp(Layout)
+      : _createApp(Layout)
+  const router = createRouter()
+
+  app
+    .use(router)
+    .component('LayCode', LayCode)
+    .use(Layui)
+
+  return { app, router }
+}

docs/src/plugin/common-plugins.ts

@@ -0,0 +1,47 @@
+import vue from '@vitejs/plugin-vue'
+import Markdown from 'vite-plugin-md'
+import container from 'markdown-it-container'
+import highlight from './highlight'
+import snippet from './snippet'
+import demo from './demo'
+import createContainer from './create-container'
+import preWrapper from './pre-wrapper'
+import type Token from 'markdown-it/lib/token'
+
+const plugins = [
+  vue({
+    include: [/\.vue$/, /\.md$/],
+  }),
+  Markdown({
+    markdownItOptions: {
+      html: true,
+      linkify: true,
+      typographer: true,
+      highlight,
+    },
+    markdownItSetup(md) {
+      md.use(snippet)
+        .use(preWrapper)
+        .use(container, 'demo', demo)
+        .use(...createContainer('tip', 'TIP'))
+        .use(...createContainer('warning', 'WARNING'))
+        .use(...createContainer('danger', 'WARNING'))
+        .use(container, 'v-pre', {
+          render: (tokens: Token[], idx: number) =>
+            tokens[idx].nesting === 1 ? '<div v-pre>\n' : '</div>\n',
+        })
+        .use(container, 'details', {
+          render: (tokens: Token[], idx: number) => {
+            const info = tokens[idx].info.trim().slice(7).trim() // 7 = 'details'.length
+            return tokens[idx].nesting === 1
+              ? `<details class="custom-block details">${
+                  info ? `<summary>${info}</summary>` : ''
+                }\n`
+              : '</details>'
+          },
+        })
+    },
+  }),
+]
+
+export default plugins

docs/src/plugin/create-container.ts

@@ -0,0 +1,33 @@
+import container from 'markdown-it-container'
+import type Token from 'markdown-it/lib/token'
+
+type ContainerArgs = [
+  typeof container,
+  string,
+  {
+    render(tokens: Token[], idx: number): string
+  }
+]
+
+export default function createContainer(
+  klass: string,
+  defaultTitle: string
+): ContainerArgs {
+  return [
+    container,
+    klass,
+    {
+      render(tokens, idx) {
+        const token = tokens[idx]
+        const info = token.info.trim().slice(klass.length).trim()
+        if (token.nesting === 1) {
+          return `<div class="${klass} custom-block"><p class="custom-block-title">${
+            info || defaultTitle
+          }</p>\n`
+        } else {
+          return '</div>\n'
+        }
+      },
+    },
+  ]
+}

docs/src/plugin/demo.ts

@@ -0,0 +1,146 @@
+import markdown from 'markdown-it'
+import highlight from './highlight'
+import type Token from 'markdown-it/lib/token'
+
+/**
+ * Combine the script content
+ * @param {string} script script string
+ */
+function assignScript(script: string) {
+  const dependencies = {} as Record<string, string[]>
+  const attrs = {} as Record<string, string>
+  const content = script
+    // import { ref } from 'vue' -> ''
+    .replace(/import\s?\{.*\}.*/g, (item) => {
+      const key = getInnerString(item.replace(/'/g, '"'), '"', '"')
+      const value = getInnerString(item.replace(/\s+/g, ''), '{', '}')
+      const list = value ? value.split(',') : []
+      if (key && dependencies[key]) {
+        dependencies[key] = dependencies[key].concat(list)
+      } else if (key) {
+        dependencies[key] = list
+      }
+      return ''
+    })
+    /**
+     * const -> let
+     *
+     * const a = -> let a =
+     * const a = -> a =
+     */
+    .replace(/(const|let|var)\s\w*\s?=/g, (item) => {
+      const attr = getInnerString(item, '\\s', '\\s?=')
+      if (attr && !(attr in attrs)) {
+        attrs[attr] = attr
+        return `let ${attr} =`
+      } else {
+        return attr + ' ='
+      }
+    })
+    // Remove extra line breaks
+    .replace(/\n+/gm, '\n')
+  // Combine the import
+  const reImport = Object.keys(dependencies).reduce((all, item) => {
+    const filterAttrs = [...new Set(dependencies[item])]
+    return all + `import {${filterAttrs + ','}} from '${item}';\n`
+  }, '')
+
+  return reImport + content
+}
+
+/**
+ * Extract part of the new string from the middle of the string
+ * @param {string} string string
+ * @param {string} prefix RegExp string
+ * @param {string} postfix RegExp string
+ * @param {string} type g | m | i
+ */
+function getInnerString(
+  string: string,
+  prefix: string,
+  postfix = '',
+  type: 'i' | 'g' | 'm' = 'i'
+): string | undefined {
+  const result = new RegExp(`${prefix}(.*)${postfix}`, type)
+  const match = string.match(result)
+  return match ? match[1].trim() : undefined
+}
+
+let script = '' // Record the <script> label of the current page
+
+export default {
+  render: (tokens: Token[], idx: number): string => {
+    // the `demo` block of the current page
+    const htmlBlock = tokens.filter((item) => item.type === 'html_block')
+    const { nesting, info = '', map } = tokens[idx]
+
+    if (nesting === -1) {
+      return '</lay-code>'
+    }
+
+    const matchedInfo = info.trim().match(/^demo\s+(.*)$/)
+    const description = matchedInfo && matchedInfo[1]
+    const descTemplate = markdown().render(description || '')
+    let str = '' // copy the current `demo` block code
+    let lastLine = NaN
+
+    for (let i = 0; i < htmlBlock.length; i++) {
+      const item = htmlBlock[i]
+
+      if (item.map && map && item.map[0] >= map[0] && item.map[1] <= map[1]) {
+        const { map, content } = item
+        const delta = map[0] - (lastLine || map[1])
+
+        if (delta > 0) {
+          str += '\n'.repeat(delta)
+        }
+        str += content
+        lastLine = map[1]
+        if (i === 0) {
+          script = ''
+        }
+        // Remove top <template>
+        if (/^<template>/.test(content)) {
+          const reContent = content.match(/^<template>((\s|\S)*)<\/template>/m)
+
+          htmlBlock[i].content = (reContent && reContent[1]) || ''
+        }
+        // Extract the <script> label content
+        if (content.includes('<script')) {
+          if (/export\sdefault\s?\{/m.test(content)) {
+            const setup = content.match(
+              /setup\s?\(\)\s?\{((\s|\S)*)return\s?\{/m
+            )
+            const reContent = content.replace(
+              /export\sdefault\s?\{((\s|\S)*)\}/m,
+              (setup && setup[1]) || ''
+            )
+            const reScript = reContent.match(
+              /^<script\s?.*?>((\s|\S)*)<\/script>/m
+            )
+            script += (reScript && reScript[1]) || ''
+          } else {
+            const reScript = content.match(
+              /^<script\s?.*?>((\s|\S)*)<\/script>/m
+            )
+            script += (reScript && reScript[1]) || ''
+          }
+          htmlBlock[i].content = ''
+        }
+        // Change the last content to <script> of the current page
+        if (i + 1 === htmlBlock.length) {
+          htmlBlock[i].content = `
+          <script setup>
+            ${assignScript(script)}
+          </script>`
+        }
+      }
+    }
+
+    return `
+    <lay-code>
+      ${description ? `<template #description>${descTemplate}</template>` : ''}
+      <template #code>${highlight(str, 'vue')}</template>
+    `
+  },
+}

docs/src/plugin/highlight.ts

@@ -0,0 +1,46 @@
+// copy from [vitepress](https://github.com/vuejs/vitepress)
+import prism from 'prismjs'
+import loadLanguages from 'prismjs/components/index'
+import escapeHtml from 'escape-html'
+
+// required to make embedded highlighting work...
+loadLanguages(['markup', 'css', 'javascript'])
+
+function wrap(code: string, lang: string): string {
+  if (lang === 'text') {
+    code = escapeHtml(code)
+  }
+  return `<pre v-pre><code>${code}</code></pre>`
+}
+
+export default (str: string, lang: string): string => {
+  if (!lang) {
+    return wrap(str, 'text')
+  }
+  lang = lang.toLowerCase()
+  const rawLang = lang
+  if (lang === 'vue' || lang === 'html') {
+    lang = 'markup'
+  }
+  if (lang === 'md') {
+    lang = 'markdown'
+  }
+  if (lang === 'ts') {
+    lang = 'typescript'
+  }
+  if (lang === 'py') {
+    lang = 'python'
+  }
+  if (!prism.languages[lang]) {
+    try {
+      loadLanguages([lang])
+    } catch (e) {
+      console.warn(lang, e)
+    }
+  }
+  if (prism.languages[lang]) {
+    const code = prism.highlight(str, prism.languages[lang], lang)
+    return wrap(code, rawLang)
+  }
+  return wrap(str, 'text')
+}

docs/src/plugin/pre-wrapper.ts

@@ -0,0 +1,11 @@
+import MarkdownIt from 'markdown-it'
+
+export default (md: MarkdownIt): void => {
+  const fence = md.renderer.rules.fence!
+  md.renderer.rules.fence = (...args) => {
+    const [tokens, idx] = args
+    const token = tokens[idx]
+    const rawCode = fence(...args)
+    return `<div class="language-${token.info.trim()}">${rawCode}</div>`
+  }
+}

docs/src/plugin/snippet.ts

@@ -0,0 +1,49 @@
+// copy from [vitepress](https://github.com/vuejs/vitepress)
+import fs from 'fs'
+import MarkdownIt from 'markdown-it'
+import { RuleBlock } from 'markdown-it/lib/parser_block'
+
+export default (md: MarkdownIt): void => {
+  const parser: RuleBlock = (state, startLine, endLine, silent) => {
+    const CH = '<'.charCodeAt(0)
+    const pos = state.bMarks[startLine] + state.tShift[startLine]
+    const max = state.eMarks[startLine]
+
+    // if it's indented more than 3 spaces, it should be a code block
+    if (state.sCount[startLine] - state.blkIndent >= 4) {
+      return false
+    }
+
+    for (let i = 0; i < 3; ++i) {
+      const ch = state.src.charCodeAt(pos + i)
+      if (ch !== CH || pos + i >= max) return false
+    }
+
+    if (silent) {
+      return true
+    }
+
+    const start = pos + 3
+    const end = state.skipSpacesBack(max, pos)
+    const rawPath = state.src
+      .slice(start, end)
+      .trim()
+      .replace(/^@/, process.cwd())
+    const content = fs.existsSync(rawPath)
+      ? fs.readFileSync(rawPath).toString()
+      : 'Not found: ' + rawPath
+    const meta = rawPath.replace(rawPath, '')
+
+    state.line = startLine + 1
+
+    const token = state.push('fence', 'code', 0)
+    token.info = rawPath.split('.').pop() + meta
+    token.content = content
+    token.markup = '```'
+    token.map = [startLine, startLine + 1]
+
+    return true
+  }
+
+  md.block.ruler.before('fence', 'snippet', parser)
+}

docs/src/router/index.ts

@@ -0,0 +1,20 @@
+import {
+  createMemoryHistory,
+  createRouter as _createRouter,
+  createWebHistory,
+  Router,
+} from 'vue-router'
+import zhCN from './zh-CN'
+import type { IRouteRecordRaw } from '/@src/index'
+
+const routes: IRouteRecordRaw[] = [...zhCN]
+
+export function createRouter(): Router {
+  const baseUrl = import.meta.env.BASE_URL
+  return _createRouter({
+    history: import.meta.env.SSR
+      ? createMemoryHistory(baseUrl)
+      : createWebHistory(baseUrl),
+    routes:  routes 
+  })
+}

docs/src/router/zh-CN.ts

@@ -0,0 +1,32 @@
+import BaseLayout from '../layouts/Layout.vue'
+
+const zhCN = [
+  {
+    path: '/',
+    redirect: '/zh-CN/guide/',
+    component: BaseLayout,
+    meta: { title: '指南', icon: 'el-icon-position' },
+    children: [
+      {
+        path: '/zh-CN/guide/',
+        component: () => import('../../docs/zh-CN/guide/home.md'),
+        meta: { title: '介绍' },
+      }
+    ],
+  },
+  {
+    path: '/zh-CN/components/',
+    redirect: '/zh-CN/components/button',
+    component: BaseLayout,
+    meta: { title: '组件', icon: 'el-icon-copy-document' },
+    children: [
+      {
+        path: '/zh-CN/components/button',
+        component: () => import('../../docs/zh-CN/components/button.md'),
+        meta: { title: '按钮' },
+      }
+    ],
+  },
+]
+
+export default zhCN

docs/src/styles/code.css

@@ -0,0 +1,214 @@
+/* copy from [vitepress](https://github.com/vuejs/vitepress) */
+code {
+  margin: 0;
+  border-radius: 3px;
+  padding: 0.25rem 0.5rem;
+  font-family: var(--code-font-family);
+  font-size: 0.85em;
+  color: var(--c-text-light);
+  background-color: var(--code-inline-bg-color);
+}
+
+code .token.deleted {
+  color: #ec5975;
+}
+
+code .token.inserted {
+  color: var(--c-brand);
+}
+
+div[class*='language-'] {
+  position: relative;
+  margin: 1rem -1.5rem;
+  background-color: #fafafa;
+  overflow-x: auto;
+  border: 1px solid #eaeefb;
+}
+
+li > div[class*='language-'] {
+  border-radius: 6px 0 0 6px;
+  margin: 1rem -1.5rem 1rem -1.25rem;
+}
+
+@media (min-width: 420px) {
+  div[class*='language-'] {
+    margin: 1rem 0;
+    border-radius: 6px;
+  }
+
+  li > div[class*='language-'] {
+    margin: 1rem 0 1rem 0rem;
+    border-radius: 6px;
+  }
+}
+
+[class*='language-'] pre,
+[class*='language-'] code {
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+[class*='language-'] pre {
+  position: relative;
+  z-index: 1;
+  margin: 0;
+  padding: 1.25rem 1.5rem;
+  background: transparent;
+  overflow-x: auto;
+}
+
+[class*='language-'] pre p {
+  margin: auto !important;
+}
+
+[class*='language-'] code {
+  padding: 0;
+  line-height: var(--code-line-height);
+  font-size: var(--code-font-size);
+  color: #000;
+  background-color: #fafafa;
+}
+
+/* Line highlighting */
+
+.highlight-lines {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  padding: 1.25rem 0;
+  width: 100%;
+  line-height: var(--code-line-height);
+  font-family: var(--code-font-family);
+  font-size: var(--code-font-size);
+  user-select: none;
+  overflow: hidden;
+}
+
+.highlight-lines .highlighted {
+  background-color: rgba(0, 0, 0, 0.66);
+}
+
+/* Line numbers mode */
+
+div[class*='language-'].line-numbers-mode {
+  padding-left: 3.5rem;
+}
+
+.line-numbers-wrapper {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 3;
+  border-right: 1px solid rgba(0, 0, 0, 0.5);
+  padding: 1.25rem 0;
+  width: 3.5rem;
+  text-align: center;
+  line-height: var(--code-line-height);
+  font-family: var(--code-font-family);
+  font-size: var(--code-font-size);
+  color: #888;
+}
+
+/* Language marker */
+
+[class*='language-']:before {
+  position: absolute;
+  top: 0.6em;
+  right: 1em;
+  z-index: 2;
+  font-size: 0.8rem;
+  color: #888;
+}
+
+/**
+ * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML.
+ * Based on https://github.com/chriskempson/tomorrow-theme
+ *
+ * @author Rose Pritchard
+ */
+.token.comment,
+.token.block-comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #999;
+}
+
+.token.punctuation {
+  color: #ccc;
+}
+
+.token.tag,
+.token.attr-name,
+.token.namespace,
+.token.deleted {
+  color: #e2777a;
+}
+
+.token.function-name {
+  color: #6196cc;
+}
+
+.token.boolean,
+.token.number,
+.token.function {
+  color: #f08d49;
+}
+
+.token.property,
+.token.class-name,
+.token.constant,
+.token.symbol {
+  color: #f8c555;
+}
+
+.token.selector,
+.token.important,
+.token.atrule,
+.token.keyword,
+.token.builtin {
+  color: #cc99cd;
+}
+
+.token.string,
+.token.char,
+.token.attr-value,
+.token.regex,
+.token.variable {
+  color: #7ec699;
+}
+
+.token.operator,
+.token.entity,
+.token.url {
+  color: #67cdcc;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}
+
+.token.inserted {
+  color: green;
+}

docs/src/styles/custom-blocks.css

@@ -0,0 +1,71 @@
+.custom-block.tip,
+.custom-block.warning,
+.custom-block.danger {
+  margin: 1rem 0;
+  border-left: 0.3rem solid;
+  padding: 0.1rem 1.5rem;
+  overflow-x: auto;
+  border-radius: 4px;
+}
+
+.custom-block.tip {
+  background-color: #f3f5f7;
+  border-color: #409eff;
+}
+
+.custom-block.warning {
+  border-color: #e7c000;
+  color: #6b5900;
+  background-color: rgba(255, 229, 100, 0.3);
+}
+
+.custom-block.warning .custom-block-title {
+  color: #b29400;
+}
+
+.custom-block.warning a {
+  color: var(--c-text);
+}
+
+.custom-block.danger {
+  border-color: #c00;
+  color: #4d0000;
+  background-color: #ffe6e6;
+}
+
+.custom-block.danger .custom-block-title {
+  color: #900;
+}
+
+.custom-block.danger a {
+  color: var(--c-text);
+}
+
+.custom-block.details {
+  position: relative;
+  display: block;
+  border-radius: 2px;
+  margin: 1.6em 0;
+  padding: 1.6em;
+  background-color: #eee;
+}
+
+.custom-block.details h4 {
+  margin-top: 0;
+}
+
+.custom-block.details figure:last-child,
+.custom-block.details p:last-child {
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+.custom-block.details summary {
+  outline: none;
+  cursor: pointer;
+}
+
+.custom-block-title {
+  margin-bottom: -0.4rem;
+  font-weight: 600;
+}

docs/src/styles/index.css

@@ -0,0 +1,4 @@
+@import './code.css';
+@import './custom-blocks.css';
+@import './markdown.css';
+@import './vars.css';

docs/src/styles/markdown.css

@@ -0,0 +1,220 @@
+html {
+  line-height: 1.4;
+  font-size: 16px;
+  -webkit-text-size-adjust: 100%;
+}
+
+h4 {
+  font-weight: 700 !important;
+  font-size: 16.8px !important;
+  margin-top: 20px !important;
+  margin-bottom: 20px !important;
+}
+
+h5 {
+  font-weight: 700;
+  font-size: 16.8px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  color: #303133;
+  line-height: 1.25;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+strong,
+b {
+  font-weight: 600;
+}
+
+h1:hover .header-anchor,
+h1:focus .header-anchor,
+h2:hover .header-anchor,
+h2:focus .header-anchor,
+h3:hover .header-anchor,
+h3:focus .header-anchor,
+h4:hover .header-anchor,
+h4:focus .header-anchor,
+h5:hover .header-anchor,
+h5:focus .header-anchor,
+h6:hover .header-anchor,
+h6:focus .header-anchor {
+  opacity: 1;
+}
+
+h1 {
+  margin-top: 1.5rem;
+  font-size: 1.9rem;
+}
+
+@media screen and (min-width: 420px) {
+  h1 {
+    font-size: 2.2rem;
+  }
+}
+
+h2 {
+  margin-top: 2.25rem;
+  margin-bottom: 1.25rem;
+  border-bottom: 1px solid var(--c-divider);
+  padding-bottom: 0.3rem;
+  line-height: 1.25;
+  font-size: 1.65rem;
+  /* overflow-x: auto; */
+}
+
+h2 + h3 {
+  margin-top: 1.5rem;
+}
+
+h3 {
+  margin-top: 2rem;
+  font-size: 1.35rem;
+}
+
+h4 {
+  font-size: 1.15rem;
+}
+
+h1 {
+  margin-top: 4px !important;
+  margin-bottom: 22px !important;
+  color: #000000d9 !important;
+  font-weight: 500 !important;
+  font-size: 20px !important;
+  font-family: Avenir, -apple-system, BlinkMacSystemFont, segoe ui, Roboto,
+    helvetica neue, Arial, noto sans, sans-serif, apple color emoji,
+    segoe ui emoji, segoe ui symbol, noto color emoji, sans-serif;
+  line-height: 38px;
+}
+
+h2 {
+  margin-top: 4px !important;
+  margin-bottom: 16px !important;
+  color: #000000d9 !important;
+  font-weight: 500 !important;
+  font-size: 16px !important;
+  border-bottom: 0px;
+  font-family: Avenir, -apple-system, BlinkMacSystemFont, segoe ui, Roboto,
+    helvetica neue, Arial, noto sans, sans-serif, apple color emoji,
+    segoe ui emoji, segoe ui symbol, noto color emoji, sans-serif;
+  line-height: 38px;
+}
+
+p,
+ol,
+ul {
+  margin: 1rem 0;
+  line-height: 1.7;
+}
+
+p {
+  color: #454d64 !important;
+  margin-top: 20px !important;
+  font-size: 14px !important;
+}
+
+a,
+area,
+button,
+[role='button'],
+input,
+label,
+select,
+summary,
+textarea {
+  touch-action: manipulation;
+}
+
+a {
+  text-decoration: none;
+  color: var(--c-brand);
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+a.header-anchor {
+  float: left;
+  margin-top: 0.125em;
+  margin-left: -0.87em;
+  padding-right: 0.23em;
+  font-size: 0.85em;
+  opacity: 0;
+}
+
+a.header-anchor:hover,
+a.header-anchor:focus {
+  text-decoration: none;
+}
+
+figure {
+  margin: 0;
+}
+
+img {
+  max-width: 100%;
+}
+
+ul,
+ol {
+  padding-left: 1.25em;
+}
+
+li > ul,
+li > ol {
+  margin: 0;
+}
+
+blockquote {
+  margin: 1rem 0;
+  border-left: 0.2rem solid #dfe2e5;
+  padding: 0.25rem 0 0.25rem 1rem;
+  font-size: 1rem;
+  color: #999;
+}
+
+blockquote > p {
+  margin: 0;
+}
+
+form {
+  margin: 0;
+}
+
+table {
+  width: 100%; /*表格宽度*/
+  border-collapse: collapse; /*使用单一线条的边框*/
+  empty-cells: show; /*单元格无内容依旧绘制边框*/
+}
+
+table th,
+table td {
+  font-size: 14px;
+  color: #606266;
+  height: 50px; /*统一每一行的默认高度*/
+  border-top: 1px solid whitesmoke; /*内部边框样式*/
+  padding: 0 10px; /*内边距*/
+}
+
+table tr:hover {
+  background: #efefef;
+}
+table th {
+  white-space: nowrap; /*表头内容强制在一行显示*/
+}
+table td {
+  white-space: nowrap;
+}

docs/src/styles/vars.css

@@ -0,0 +1,52 @@
+/* TODO: rebuild... copy from [vitepress](https://github.com/vuejs/vitepress) */
+:root {
+  --c-white: #ffffff;
+  --c-black: #000000;
+
+  --c-divider-light: rgba(60, 60, 67, 0.12);
+  --c-divider-dark: rgba(84, 84, 88, 0.48);
+
+  --c-text-light-1: #2c3e50;
+  --c-text-light-2: #476582;
+  --c-text-light-3: #90a4b7;
+
+  --c-brand: #409eff;
+  --c-brand-light: #4abf8a;
+
+  /**
+   * Typography
+   * --------------------------------------------------------------------- */
+
+  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  --font-family-mono: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+
+  /**
+   * Shadows
+   * --------------------------------------------------------------------- */
+
+  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
+  --shadow-2: 0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.07);
+  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
+  --shadow-4: 0 14px 44px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.12);
+  --shadow-5: 0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);
+}
+
+/** Fallback Styles */
+:root {
+  --c-divider: var(--c-divider-light);
+
+  --c-text: var(--c-text-light-1);
+  --c-text-light: var(--c-text-light-2);
+  --c-text-lighter: var(--c-text-light-3);
+
+  --c-bg: var(--c-white);
+
+  --code-line-height: 24px;
+  --code-font-family: var(--font-family-mono);
+  --code-font-size: 14px;
+  --code-inline-bg-color: rgba(27, 31, 35, 0.05);
+  --code-bg-color: #282c34;
+}

docs/src/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": [".", "../../shims-vue.d.ts"]
+}