docs: 更新文档

ckpack · Dec 27, 2022 · 83b9ef6 · 83b9ef6
1 parent f53ec1b
commit 83b9ef6
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 19 deletions.
diff --git a/docs/.vitepress/mdPlugin.ts b/docs/.vitepress/mdPlugin.ts
@@ -17,7 +17,6 @@ export const mdPlugin = (md: any) => {
 
     const description = nextToken.content.slice(DEMOBLOCKTAG.length);
     const code = fs.readFileSync(src).toString();
-    const encodeDescription = encodeURIComponent(description);
     const encodeCode = encodeURIComponent(code);
     const compoentName = `${DEMO_COMPOENT_PREFIX}${compoentIndex += 1}`;
 
@@ -33,10 +32,8 @@ export const mdPlugin = (md: any) => {
     env.sfcBlocks.scriptSetup = scriptSetup;
     env.sfcBlocks.scripts = [scriptSetup];
 
-    return `<${DEMO_COMPOENT_PREFIX} description="${encodeDescription}" code="${encodeCode}" :compoent="${compoentName}">
-      <template #description>
-        ${md.render(description)}
-      </template>
+    return `${md.render(description)}
+    <${DEMO_COMPOENT_PREFIX} code="${encodeCode}" :demo="${compoentName}">
       <template #code>
         ${defaultFenceRender(tokens, idx, options, env, self)}
       </template>

diff --git a/docs/.vitepress/theme/demo-block.vue b/docs/.vitepress/theme/demo-block.vue
@@ -14,7 +14,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
-  compoent: Object,
+  demo: {
+    type: Object,
+    default: () => {},
+  },
 });
 
 const isShowCode = ref(false);
@@ -27,22 +30,25 @@ const openlink = (url: string) => window.open(url);
 
 <template>
   <div class="demo-block">
-    <div class="description">
+    <div v-if="description" class="description">
       <slot name="description" :description="description">
         {{ description }}
       </slot>
     </div>
-    <div class="preview">
-      <slot name="preview" :compoent="compoent">
-        <component :is="compoent" />
+    <div v-if="demo" class="preview">
+      <slot name="preview" :compoent="demo">
+        <component :is="demo" />
       </slot>
     </div>
     <div class="control">
       <button
         class="control-btn"
+        :style="{
+          color: isShowCode ? 'var(--vp-c-brand)' : 'var(--vp-c-text-2)',
+        }"
         @click="isShowCode = !isShowCode"
       >
-        {{ !isShowCode ? 'Code' : 'Hide' }}
+        {{ '</>' }}
       </button>
       <button
         v-if="editLink"
@@ -53,7 +59,7 @@ const openlink = (url: string) => window.open(url);
       </button>
     </div>
     <div
-      v-show="isShowCode"
+      v-show="isShowCode && code"
       class="code"
     >
       <slot name="code" :code="code">
@@ -68,29 +74,31 @@ const openlink = (url: string) => window.open(url);
 <style scoped>
 .demo-block {
   border: 1px solid var(--vp-c-divider-light);
-  padding: 12px;
-  word-wrap: break-word;
 }
 
 .demo-block .description {
   font-size: 1rem;
   font-weight: bolder;
-  padding-bottom: 12px;
 }
 
 .demo-block .preview {
   overflow: auto;
+  margin-top: 12px;
+  padding: 16px;
 }
 
 .demo-block .control {
   display: flex;
   flex-direction: row-reverse;
 }
 
+.demo-block .code {
+  padding: 16px;
+}
+
 .demo-block .control-btn {
-  cursor: pointer;
-  padding: 4px;
-  width: 4rem;
+  height: 32px;
+  padding: 0 16px;
   border: none;
 }
 </style>
diff --git a/docs/_demos/space/align-items.vue b/docs/_demos/space/align-items.vue
@@ -8,7 +8,7 @@ const alignItems = ['stretch', 'center', 'start', 'end', 'normal'];
       <v-button v-for="key in 4" :key="key" theme="primary">
         Button
       </v-button>
-      <div :style="{ height: '50px', border: '1px solid red', background: 'gray' }">
+      <div :style="{ height: '60px', border: '1px solid red', background: 'gray' }">
         {{ align }}
       </div>
     </v-space>