feat: 1.优化images样式表现。2.增加markdown浏览插件

package.json

@@ -27,6 +27,7 @@
         "axios": "^1.7.3",
         "codemirror": "^6.0.1",
         "lodash": "^4.17.21",
+        "markdown-it": "^14.1.0",
         "naive-ui": "^2.39.0",
         "pdfjs-dist": "^4.5.136",
         "sass": "^1.77.8",
@@ -37,6 +38,7 @@
     },
     "devDependencies": {
         "@types/lodash": "^4.17.7",
+        "@types/markdown-it": "^14.1.2",
         "@types/node": "^22.1.0",
         "@types/pdfjs-dist": "^2.10.378",
         "@vitejs/plugin-vue": "^5.1.2",

pnpm-lock.yaml

@@ -53,6 +53,9 @@ importers:
       lodash:
         specifier: ^4.17.21
         version: 4.17.21
+      markdown-it:
+        specifier: ^14.1.0
+        version: 14.1.0
       naive-ui:
         specifier: ^2.39.0
         version: 2.39.0(vue@3.4.37(typescript@5.5.4))
@@ -78,6 +81,9 @@ importers:
       '@types/lodash':
         specifier: ^4.17.7
         version: 4.17.7
+      '@types/markdown-it':
+        specifier: ^14.1.2
+        version: 14.1.2
       '@types/node':
         specifier: ^22.1.0
         version: 22.1.0
@@ -480,12 +486,21 @@ packages:
   '@types/katex@0.16.7':
     resolution: {integrity: sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ==}
 
+  '@types/linkify-it@5.0.0':
+    resolution: {integrity: sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==}
+
   '@types/lodash-es@4.17.12':
     resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==}
 
   '@types/lodash@4.17.7':
     resolution: {integrity: sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==}
 
+  '@types/markdown-it@14.1.2':
+    resolution: {integrity: sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==}
+
+  '@types/mdurl@2.0.0':
+    resolution: {integrity: sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==}
+
   '@types/node@22.1.0':
     resolution: {integrity: sha512-AOmuRF0R2/5j1knA3c6G3HOk523Ga+l+ZXltX8SF1+5oqcXijjfTd8fY3XRZqSihEu9XhtQnKYLmkFaoxgsJHw==}
 
@@ -575,6 +590,9 @@ packages:
     engines: {node: '>=10'}
     deprecated: This package is no longer supported.
 
+  argparse@2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+
   async-validator@4.2.5:
     resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==}
 
@@ -700,6 +718,10 @@ packages:
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
 
+  entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+
   entities@5.0.0:
     resolution: {integrity: sha512-BeJFvFRJddxobhvEdm5GqHzRV/X+ACeuw0/BuuxsCh1EUZcAIz8+kYmBp/LrQuloy6K1f3a0M7+IhmZ7QnkISA==}
     engines: {node: '>=0.12'}
@@ -826,6 +848,9 @@ packages:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
 
+  linkify-it@5.0.0:
+    resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
+
   lodash-es@4.17.21:
     resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
 
@@ -839,6 +864,13 @@ packages:
     resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
     engines: {node: '>=8'}
 
+  markdown-it@14.1.0:
+    resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==}
+    hasBin: true
+
+  mdurl@2.0.0:
+    resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
+
   micromatch@4.0.7:
     resolution: {integrity: sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==}
     engines: {node: '>=8.6'}
@@ -959,6 +991,10 @@ packages:
   proxy-from-env@1.1.0:
     resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
 
+  punycode.js@2.3.1:
+    resolution: {integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==}
+    engines: {node: '>=6'}
+
   readable-stream@3.6.2:
     resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
     engines: {node: '>= 6'}
@@ -1056,6 +1092,9 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
+  uc.micro@2.1.0:
+    resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==}
+
   undici-types@6.13.0:
     resolution: {integrity: sha512-xtFJHudx8S2DSoujjMd1WeWvn7KKWFRESZTMeL1RptAYERu29D6jphMjjY+vn96jvN3kVPDNxU/E13VTaXj6jg==}
 
@@ -1566,12 +1605,21 @@ snapshots:
 
   '@types/katex@0.16.7': {}
 
+  '@types/linkify-it@5.0.0': {}
+
   '@types/lodash-es@4.17.12':
     dependencies:
       '@types/lodash': 4.17.7
 
   '@types/lodash@4.17.7': {}
 
+  '@types/markdown-it@14.1.2':
+    dependencies:
+      '@types/linkify-it': 5.0.0
+      '@types/mdurl': 2.0.0
+
+  '@types/mdurl@2.0.0': {}
+
   '@types/node@22.1.0':
     dependencies:
       undici-types: 6.13.0
@@ -1701,6 +1749,8 @@ snapshots:
       readable-stream: 3.6.2
     optional: true
 
+  argparse@2.0.1: {}
+
   async-validator@4.2.5: {}
 
   asynckit@0.4.0: {}
@@ -1840,6 +1890,8 @@ snapshots:
   emoji-regex@8.0.0:
     optional: true
 
+  entities@4.5.0: {}
+
   entities@5.0.0: {}
 
   es5-ext@0.10.64:
@@ -1999,6 +2051,10 @@ snapshots:
 
   is-number@7.0.0: {}
 
+  linkify-it@5.0.0:
+    dependencies:
+      uc.micro: 2.1.0
+
   lodash-es@4.17.21: {}
 
   lodash@4.17.21: {}
@@ -2012,6 +2068,17 @@ snapshots:
       semver: 6.3.1
     optional: true
 
+  markdown-it@14.1.0:
+    dependencies:
+      argparse: 2.0.1
+      entities: 4.5.0
+      linkify-it: 5.0.0
+      mdurl: 2.0.0
+      punycode.js: 2.3.1
+      uc.micro: 2.1.0
+
+  mdurl@2.0.0: {}
+
   micromatch@4.0.7:
     dependencies:
       braces: 3.0.3
@@ -2143,6 +2210,8 @@ snapshots:
 
   proxy-from-env@1.1.0: {}
 
+  punycode.js@2.3.1: {}
+
   readable-stream@3.6.2:
     dependencies:
       inherits: 2.0.4
@@ -2261,6 +2330,8 @@ snapshots:
 
   typescript@5.5.4: {}
 
+  uc.micro@2.1.0: {}
+
   undici-types@6.13.0: {}
 
   util-deprecate@1.0.2:

src/hooks/init.ts

@@ -157,4 +157,21 @@ export default function init() {
             return false
         }
     })
+
+    
+    pluginCenter.registerComponent({
+        key: 'miaoMarkdown',
+        name: 'markdown浏览',
+        icon: DocumentText,
+        getComponent: async () => (await import('@/views/miaoMarkdown.vue')).default,
+        filter: (vDirs, vFiles) => {
+            if (vDirs.length !== 0) {
+                return false
+            }
+            if (vFiles.length !== 1) {
+                return false
+            }
+            return vFiles[0].name.endsWith('md')
+        }
+    })
 }

src/views/miaoIframe.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="iframe-container">
+    <div class="miao-markdown-container-miaomiaomiao">
         <iframe
             :src="iframeSrc"
             frameborder="0"
@@ -23,7 +23,7 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
-.iframe-container {
+.miao-markdown-container-miaomiaomiao {
     width: 100%;
     height: 100%;
     .iframe-container-iframe {

src/views/miaoImages.vue

@@ -1,57 +1,44 @@
 <template>
-    <miao-drop-handler
+    <miao-drop-handler @on-virtual-directory="handleDrop" @on-virtual-files="handleDrop">
-        @on-virtual-directory="handleDrop"
+        <miao-message-provider ref="miaoMessageRef">
-        @on-virtual-files="handleDrop">
             <div class="miaoImage" ref="rootRef">
                 <n-scrollbar ref="NScrollbarRef">
-                <div
+                    <div class="miaoImage-container" v-for="imageGroup in imageGroupList">
-                    class="miaoImage-container"
-                    v-for="imageGroup in imageGroupList">
                         <div class="miaoImage-container-day">
+                            <!-- <div class="miaoImage-container-divide miaoImage-container-divide-before">
+                            <div class="miaoImage-container-divide-line"></div>
+                        </div> -->
                             <span class="miaoImage-container-day-text">
                                 {{ imageGroup.day }}
                             </span>
+                            <!-- <div class="miaoImage-container-divide">
+                            <div class="miaoImage-container-divide-line"></div>
+                        </div> -->
                         </div>
-                    <div
+                        <div class="miaoImage-container-row" v-for="vFile in imageGroup.items" :key="vFile.id">
-                        class="miaoImage-container-row"
+                            <img :src="vFile.url" class="miaoImage-container-row-image" loading="lazy" :class="activeImage === vFile
-                        v-for="vFile in imageGroup.items"
-                        :key="vFile.id">
-                        <img
-                            :src="vFile.url"
-                            class="miaoImage-container-row-image"
-                            loading="lazy"
-                            :class="
-                                activeImage === vFile
                                 ? 'miaoImage-container-row-image-active'
                                 : ''
-                            "
+                                " @click="activeImage = vFile" />
-                            @click="activeImage = vFile" />
                         </div>
                     </div>
                 </n-scrollbar>
-            <miao-mask
+                <miao-mask :show="activeImage !== undefined" @click="activeImage = undefined" class="miaoImage-mask">
-                :show="activeImage !== undefined"
+                    <ChevronBack class="miaoImage-mask-btn miaoImage-mask-btn-back" @click="handleActiveImageBack" />
-                @click="activeImage = undefined"
+                    <img :src="activeImage?.url" class="miaoImage-mask-active" @click="(e) => e.stopPropagation()"
-                class="miaoImage-mask">
-                <ChevronBack
-                    class="miaoImage-mask-btn miaoImage-mask-btn-back"
-                    @click="handleActiveImageBack" />
-                <img
-                    :src="activeImage?.url"
-                    class="miaoImage-mask-active"
-                    @click="(e) => e.stopPropagation()"
                         draggable="false" />
-                <ChevronForward
+                    <ChevronForward class="miaoImage-mask-btn miaoImage-mask-btn-forward"
-                    class="miaoImage-mask-btn miaoImage-mask-btn-forward"
                         @click="handleActiveImageForward" />
                 </miao-mask>
             </div>
+        </miao-message-provider>
     </miao-drop-handler>
 </template>
 
 <script setup lang="ts">
 import miaoMask from '@/components/miaoMask.vue'
 import miaoDropHandler from '@/components/miaoDropHandler.vue'
+import miaoMessageProvider from '@/components/miaoMessageProvider.vue'
 import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
 import { uniq } from 'lodash'
 import { computed, nextTick, onMounted, ref } from 'vue'
@@ -89,6 +76,7 @@ const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
 
 const NScrollbarRef = ref()
 const rootRef = ref<any>()
+const miaoMessageRef = ref<InstanceType<typeof miaoMessageProvider>>()
 
 const imageFileList = ref<VirtualFile[]>([])
 
@@ -169,51 +157,57 @@ const handleActiveImageForward = (e: any) => {
     nextTick(scrollToActiveImage)
 }
 
-const handleDrop = (vItems: (VirtualFile | VirtualDirectory)[]) => {
+const handleDrop = async (vItems: (VirtualFile | VirtualDirectory)[]) => {
+    const length_before = imageFileList.value.length
     if (vItems[0].type === 'directory') {
         // @ts-ignore
         currentDirectories.value = [...currentDirectories.value, ...vItems]
+        for (const i of vItems) {
+            // @ts-ignore
+            await updateImageSrcList(i)
+        }
     } else {
         // @ts-ignore
         currentFiles.value = [...currentFiles, ...vItems]
+        // @ts-ignore
+        await updateImageSrcList(vItems)
     }
-    vItems.forEach((v) => {
+    miaoMessageRef.value?.message(length_before === imageFileList.value.length ? '未发现任何可添加图片' : `导入${imageFileList.value.length - length_before}张图片`, {
-        updateImageSrcList(v)
+        type: length_before === imageFileList.value.length ? 'info' : 'success'
+        , timeout: 5000
     })
 }
 
-const updateImageSrcList = async (source: VirtualFile | VirtualDirectory) => {
+const updateImageSrcList = async (source: VirtualFile[] | VirtualDirectory) => {
-    let newSrcList: string[]
     let newFileList: VirtualFile[]
-    if (source.type === 'directory') {
+    if ('type' in source) {
         await source.update()
         newFileList = [
             ...(source.files?.filter((v) =>
                 imageSuffixList.includes(v.name.split('.').pop() ?? '')
             ) ?? [])
         ]
-        newSrcList =
-            source.files
-                ?.filter((v) =>
-                    imageSuffixList.includes(v.name.split('.').pop() ?? '')
-                )
-                .map((v) => v.url) ?? []
     } else {
-        if (!imageSuffixList.includes(source.name.split('.').pop() ?? '')) {
+        newFileList = [
-            return
+            ...(source.filter((v) =>
-        }
+                imageSuffixList.includes(v.name.split('.').pop() ?? '')
-        newFileList = [source]
+            ) ?? [])
-        newSrcList = [source.url]
+        ]
     }
     imageFileList.value = uniq([...imageFileList.value, ...newFileList]).sort(
-        (a, b) => a.stats.mtimeMs - b.stats.mtimeMs
+        (a, b) => - a.stats.mtimeMs + b.stats.mtimeMs
     )
 }
 
-onMounted(() => {
+onMounted(async () => {
-    ;[...currentFiles.value, ...currentDirectories.value].forEach(
+    const length_before = imageFileList.value.length;
-        updateImageSrcList
+    for (const i of [currentFiles.value, ...currentDirectories.value]) {
-    )
+        await updateImageSrcList(i)
+    }
+    miaoMessageRef.value?.message(length_before === imageFileList.value.length ? '未发现任何新增图片' : `导入${imageFileList.value.length - length_before}张图片`, {
+        type: length_before === imageFileList.value.length ? 'info' : 'success'
+        , timeout: 5000
+    })
 })
 </script>
 
@@ -232,13 +226,38 @@ onMounted(() => {
         flex-wrap: wrap;
         margin-bottom: 20px;
         margin-top: 20px;
+
         .miaoImage-container-day {
             width: 100%;
+            display: flex;
+            align-items: center;
+            position: relative;
+            margin: 0 20px;
+
+            .miaoImage-container-divide {
+                flex: 1;
+                height: 100%;
+                position: relative;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+
+            .miaoImage-container-divide-line {
+                height: 3px;
+                width: 100%;
+                border-radius: 5px;
+                background-color: rgb(244 244 244);
+            }
+
+            .miaoImage-container-divide-before {
+                flex: 0.1;
+            }
+
             .miaoImage-container-day-text {
-                margin-left: 40px;
+                margin: 0 0 0 10px;
-                font-size: 20px;
+                font-size: 15px;
                 user-select: none;
-                letter-spacing: 1px;
             }
         }
 

src/views/miaoMarkdown.vue

@@ -0,0 +1,64 @@
+<template>
+  <n-scrollbar>
+    <div class="miao-markdown-container-miaomiaomiao" v-html="renderedMarkdown"></div>
+    <div style="height: 50px; width: 100%;"></div>
+  </n-scrollbar>
+</template>
+
+<script setup lang="ts">
+import { NScrollbar } from 'naive-ui';
+import { VirtualFile } from '@/class/VirtualDirectory'
+import { onMounted, ref } from 'vue'
+import MarkdownIt from 'markdown-it'
+import useMiaoFetchApi from '@/hooks/useMiaoFetchApi';
+
+const miaoFetchApi = useMiaoFetchApi()
+
+const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
+  required: true
+})
+
+const markdownSrc = ref<string>()
+const renderedMarkdown = ref<string>('')
+
+const md = new MarkdownIt()
+
+onMounted(async () => {
+  markdownSrc.value = currentFiles.value[0].url
+  const text = (await miaoFetchApi.getFile(currentFiles.value[0])).toString()
+  renderedMarkdown.value = md.render(text)
+})
+</script>
+
+<style lang="scss">
+.miao-markdown-container-miaomiaomiao {
+  width: 95%;
+  margin: 20px;
+
+  table,
+  td,
+  th {
+    border: 1px solid #ddd;
+    text-align: left;
+  }
+
+  table {
+    border-collapse: collapse;
+    margin-bottom: 20px;
+  }
+
+  th,
+  td {
+    padding: 15px;
+  }
+
+  tr:nth-child(even) {
+    background-color: #f2f2f2
+  }
+
+  th {
+    background-color: #04AA6D;
+    color: white;
+  }
+}
+</style>