feat: 优化PDF插件的放缩操作实现

src/App.vue

@@ -120,6 +120,7 @@ onMounted(() => {
                             :key="view.uid">
                             <span
                                 class="tab-title"
+                                :title="view.title"
                                 @click="handleClickTitle(index)">
                                 {{
                                     view.title.length > 5 && 0
@@ -332,7 +333,7 @@ $tag-width: 170px;
         .view-container-item {
             flex: 1;
             height: 100%;
-            min-width: 0;
+            min-width: 200px;
         }
 
         &::-webkit-scrollbar {

src/components/miaoDirectory/miaoDirectoryItem.vue

@@ -7,7 +7,7 @@
                 <div class="item-main-info">
                     <div class="item-main-info-name">
                         <Icon class="item-main-info-name-icon" v-if="clientWidth <= 250"></Icon>
-                        <n-ellipsis style="max-width: 140px;">{{ name }}</n-ellipsis>
+                        <n-ellipsis style="max-width: 80%;">{{ name }}</n-ellipsis>
                     </div>
                     <div class="item-main-info-date" v-if="time">
                         {{ time }}
@@ -249,6 +249,7 @@ onMounted(() => {
     .item-main {
         position: relative;
         width: 100%;
+        min-width: 200px;
         height: 95%;
         background-color: rgb(255, 255, 255);
         border-radius: 7px;
@@ -258,14 +259,16 @@ onMounted(() => {
 
         .item-main-front {
             height: 100%;
-            width: 10px;
+            min-width: 10px;
             border-radius: 7px 0 0 7px;
             background-color: rgb(0, 0, 0);
         }
 
         .item-main-icon {
+            min-width: 30px;
             margin-left: 10px;
-            height: 80%;
+            height: 30px;
+            width: 30px;
             color: #00403e;
             transition: color 0.15s ease-out;
         }
@@ -273,6 +276,7 @@ onMounted(() => {
         .item-main-info {
             margin-left: 10px;
             height: 100%;
+            width: calc( 100% - 10px );
             display: flex;
             flex-direction: column;
 

src/views/miaoDirectory.vue

@@ -457,6 +457,7 @@ $bottom-bar-height: 60px;
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    min-width: 170px;
 
     .container-top {
         height: $top-height;

src/views/miaoPDF.vue

@@ -8,9 +8,13 @@
             <div class="miao-container-topBar-btn" @click="() => handleShrink(10)" title="快速放大">++</div>
         </div>
         <NScrollbar>
-            <div ref="pdfEl" class="miao-container-pdf" :style="{ margin: `0 ${pdfMargin}px` }"></div>
+            <div class="miao-container-pdf" :style="{alignItems: pdfMargin < 0 ? 'baseline' : 'center'}">
+                <div ref="pdfEl" class="miao-container-pdf-content" :style="{ width: `calc( 100% - ${pdfMargin}px)`}">
+                </div>
+            </div>
         </NScrollbar>
-        <div class="miao-container-loading" v-if="isLoading">加载中，加载进度：{{ loadingPercent === -1 ? '缓存中' : `${canvasList.length}/${pdfPageCount}` }}</div>
+        <div class="miao-container-loading" v-if="isLoading">{{ loadingPercent === -1 ? '缓存中' :
+            `渲染进度：${canvasList.length}/${pdfPageCount}` }}</div>
     </div>
 </template>
 
@@ -44,9 +48,9 @@ const handleZoom = (index?: number) => {
 
 const handleShrink = (index?: number) => {
     const _index = index ?? 1
-    if (pdfMargin.value - 10 * _index <= 0) {
-        return pdfMargin.value = 0
-    }
+    // if (pdfMargin.value - 10 * _index <= 0) {
+    //     return pdfMargin.value = 0
+    // }
     pdfMargin.value -= 10 * _index
 }
 
@@ -55,7 +59,7 @@ const handleResetMargin = () => {
 }
 
 const loadingPercent = computed(() => {
-    if(pdfPageCount.value === -1) {
+    if (pdfPageCount.value === -1) {
         return -1
     }
     return canvasList.length / pdfPageCount.value
@@ -100,7 +104,7 @@ onMounted(async () => {
     width: 100%;
     height: 100%;
     background-color: rgb(53, 53, 53);
-    overflow-y: hidden;
+    overflow: hidden;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -136,22 +140,12 @@ onMounted(async () => {
 
     .miao-container-pdf {
         min-width: 0;
-        max-width: 100%;
-        max-height: 100%;
+        width: 100%;
         display: flex;
         flex-direction: column;
-
-        .page {
+        .miao-container-pdf-content {
             display: flex;
-            justify-content: center;
-            align-items: center;
-            transform: scale(0.5);
-        }
-
-        canvas {
-            width: 100%;
-            height: 100%;
-            border-bottom: 1px solid black;
+            flex-direction: column;
         }
     }
 
@@ -161,12 +155,12 @@ onMounted(async () => {
         background-color: aliceblue;
         border: 1px solid black;
         height: 40px;
-        width: 400px;
+        width: 200px;
         border-radius: 10px;
         display: flex;
         justify-content: center;
         align-items: center;
-        font-size: 20px;
+        font-size: 15px;
         letter-spacing: 5px;
         user-select: none;
     }