手机端查看代码

huchaomin · Jan 26, 2025 · 1ba9f49 · 1ba9f49
1 parent 90bc771
commit 1ba9f49
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 33 deletions.
diff --git a/.vitepress/theme/components/autoImport/DemoWrapper.vue b/.vitepress/theme/components/autoImport/DemoWrapper.vue
@@ -2,18 +2,21 @@
  * @Author       : huchaomin iisa_peter@163.com
  * @Date         : 2025-01-26 09:27:16
  * @LastEditors  : huchaomin iisa_peter@163.com
- * @LastEditTime : 2025-01-26 14:34:33
+ * @LastEditTime : 2025-01-26 15:56:11
  * @Description  :
 -->
 
 <script setup lang="ts">
-const showModal = ref(false)
+const showSource = ref(false)
 const scrollbarRef = ref<ComponentPublicInstance | null>(null)
 const codeElement = ref<HTMLElement | null>(null)
 const lineNumbersWrapper = ref<HTMLElement | null>(null)
 watchEffect(() => {
-  if (showModal.value) {
+  if (showSource.value) {
     nextTick(() => {
+      if (scrollbarRef.value === null) {
+        return
+      }
       const parent = scrollbarRef.value!.$el.parentElement
       codeElement.value = parent.querySelector('.vp-code')
       lineNumbersWrapper.value = parent.querySelector('.line-numbers-wrapper')
@@ -22,40 +25,63 @@ watchEffect(() => {
 })
 const { width: codeWidth } = useElementSize(codeElement)
 const { width: lineNumbersWrapperWidth } = useElementSize(lineNumbersWrapper)
+const isDropdownMode = computed(() => {
+  return isMobile.value || isTablet.value
+})
 </script>
 
 <template>
-  <NCard class="demo_wrapper_card" :class="isMobile ? '-mx-3 !w-auto' : ''">
-    <NTooltip>
-      <template #trigger>
-        <NButton quaternary class="show_code_btn !absolute" @click="showModal = true">
-          <i-material-symbols:code></i-material-symbols:code>
-        </NButton>
-      </template>
-      <span>查看代码</span>
-    </NTooltip>
-    <NScrollbar x-scrollable>
-      <slot></slot>
-    </NScrollbar>
-    <NModal
-      v-model:show="showModal"
-      title="查看代码"
-      :draggable="{
-        bounds: 'none',
-      }"
-      :style="{
-        width: `${codeWidth + lineNumbersWrapperWidth}px`,
-        minWidth: '720px',
-        maxWidth: '90vw',
+  <NCard
+    class="demo_wrapper_card"
+    :class="isMobile ? '-mx-3 !w-auto' : ''"
+    :content-class="isDropdownMode ? '!p-0' : ''"
+    :embedded="isDropdownMode"
+    :bordered="!isDropdownMode"
+  >
+    <template v-if="isDropdownMode">
+      <NButton tertiary block @click="showSource = !showSource">
+        <i-material-symbols:keyboard-double-arrow-down-rounded></i-material-symbols:keyboard-double-arrow-down-rounded>
+      </NButton>
+      <NCollapseTransition class="demo_fence_collapse" :show="showSource">
+        <slot name="source"></slot>
+      </NCollapseTransition>
+    </template>
+    <template v-else>
+      <NTooltip>
+        <template #trigger>
+          <NButton quaternary class="show_code_btn !absolute" @click="showSource = !showSource">
+            <i-material-symbols:code></i-material-symbols:code>
+          </NButton>
+        </template>
+        <span>查看代码</span>
+      </NTooltip>
+      <NModal
+        v-model:show="showSource"
+        title="查看代码"
+        :draggable="{
+          bounds: 'none',
+        }"
+        :style="{
+          width: `${codeWidth + lineNumbersWrapperWidth}px`,
+          minWidth: '720px',
+          maxWidth: '90vw',
+        }"
+        preset="card"
+        size="small"
+        content-class="demo_fence_modal !p-0"
+      >
+        <NScrollbar ref="scrollbarRef" style="max-height: 90vh;">
+          <slot name="source"></slot>
+        </NScrollbar>
+      </NModal>
+    </template>
+    <div
+      :class="{
+        'p-3': isDropdownMode,
       }"
-      preset="card"
-      size="small"
-      content-class="demo_fence_modal !p-0"
     >
-      <NScrollbar ref="scrollbarRef" style="max-height: 90vh;">
-        <slot name="source"></slot>
-      </NScrollbar>
-    </NModal>
+      <slot></slot>
+    </div>
   </NCard>
 </template>
 

diff --git a/src/assets/css/docContent/index.css b/src/assets/css/docContent/index.css
@@ -2,7 +2,7 @@
 @import './fence_card.css';
 @import 'vitepress/dist/client/theme-default/styles/components/vp-code.css';
 
-.fence_card:not(.details_container_card .fence_card, .code_group_card .fence_card, .demo_fence_modal .fence_card),
+.fence_card:not(.details_container_card .fence_card, .code_group_card .fence_card, .demo_fence_modal .fence_card, .demo_fence_collapse .fence_card),
 .details_container_card,
 .demo_wrapper_card {
   @apply my-6;

diff --git a/types/components.d.ts b/types/components.d.ts
@@ -16,6 +16,7 @@ declare module 'vue' {
     'ILineMd:playFilled': typeof import('~icons/line-md/play-filled')['default']
     'IMaterialSymbols:code': typeof import('~icons/material-symbols/code')['default']
     'IMaterialSymbols:contentCopyOutline': typeof import('~icons/material-symbols/content-copy-outline')['default']
+    'IMaterialSymbols:keyboardDoubleArrowDownRounded': typeof import('~icons/material-symbols/keyboard-double-arrow-down-rounded')['default']
     'IMaterialSymbolsLight:codeRounded': typeof import('~icons/material-symbols-light/code-rounded')['default']
     ImgWrapper: typeof import('./../.vitepress/theme/components/autoImport/ImgWrapper.vue')['default']
     NA: typeof import('naive-ui')['NA']
@@ -27,6 +28,7 @@ declare module 'vue' {
     NCarousel: typeof import('naive-ui')['NCarousel']
     NCollapse: typeof import('naive-ui')['NCollapse']
     NCollapseItem: typeof import('naive-ui')['NCollapseItem']
+    NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
     NDivider: typeof import('naive-ui')['NDivider']
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']