From a34e27cc65f6eaf3c33745b00406d360d9926e1a Mon Sep 17 00:00:00 2001
From: Miao_Spring <539943419@qq.com>
Date: Sat, 31 Aug 2024 17:19:19 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0miaoMessageProvider?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/miaoMessageProvider.vue | 146 ++++++++++++++++++++++++-
 src/hooks/miaoTools.ts                 |   2 +-
 src/views/miaoCodeMirror.vue           |  38 +++++--
 src/views/miaoDirectory.vue            |  40 ++++---
 4 files changed, 193 insertions(+), 33 deletions(-)

diff --git a/src/components/miaoMessageProvider.vue b/src/components/miaoMessageProvider.vue
index 4ea00a7..6961adf 100644
--- a/src/components/miaoMessageProvider.vue
+++ b/src/components/miaoMessageProvider.vue
@@ -1,7 +1,147 @@
 <template>
-
+    <div class="miao-message-provider" ref="rootRef">
+        <slot></slot>
+        <transition-group name="message-fade" tag="div" class="miao-message-provider-container">
+            <div class="miao-message" v-for="msg in messageList" :key="msg.id"
+                :style="{ maxWidth: maxMessageWidth + 'px' }">
+                <n-icon class="miao-message-item" size="18" :color="msg.iconColor">
+                    <component :is="msg.icon"></component>
+                </n-icon>
+                <div class="miao-message-item miao-message-item-content">{{ msg.content }}</div>
+            </div>
+        </transition-group>
+    </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import generateId from '@/hooks/generateId';
+import { NIcon } from 'naive-ui';
+import { computed, onMounted, ref, shallowReactive } from 'vue';
+import { InformationCircle, CheckmarkCircle, CloseCircle } from '@vicons/ionicons5'
 
-<style scoped lang="scss"></style>
\ No newline at end of file
+interface MessageOptions {
+    type?: 'info' | 'success' | 'error'
+    timeout?: number
+    id?: number
+}
+
+interface Message {
+    icon: any,
+    timer: any,
+    iconColor: string,
+    content: string,
+}
+
+const iconMap = {
+    'info': { icon: InformationCircle, color: 'blue' },
+    'success': { icon: CheckmarkCircle, color: 'green' },
+    'error': { icon: CloseCircle, color: 'red' },
+}
+
+const messageMap = shallowReactive<Record<string, Message | undefined>>({})
+const rootRef = ref<HTMLDivElement>()
+const maxMessageWidth = ref<number>(-1)
+
+const messageList = computed(() => {
+    return Object.keys(messageMap).filter(v => messageMap[v] !== undefined).map(v => ({
+        id: v,
+        ...messageMap[v],
+    }))
+})
+const message = (content: string, options?: MessageOptions) => {
+    let timer: any
+    const { timeout = 0, type = 'info', id = generateId() } = options ?? {}
+    if (timeout > 0) {
+        messageMap[id]?.timer && clearTimeout(messageMap[id]?.timer)
+        timer = setTimeout(() => {
+            messageMap[id] = undefined
+        }, timeout)
+    }
+    messageMap[id] = {
+        icon: iconMap[type].icon,
+        iconColor: iconMap[type].color,
+        content,
+        timer
+    }
+    return (newContent: string, newOptions?: MessageOptions) => {
+        newOptions = newOptions ?? {}
+        newOptions.id = id
+        message(newContent, newOptions)
+    }
+}
+
+onMounted(async () => {
+    // const set = message('test', { timeout: 5000 })
+    // setTimeout(() => {
+    //     set('miao', { type: 'success' })
+    // }, 1000);
+    const observer = new ResizeObserver(entries => {
+        for (let entry of entries) {
+            maxMessageWidth.value = entry.contentRect.width * 0.8;
+        }
+    });
+    if (rootRef.value) {
+        observer.observe(rootRef.value);
+    }
+})
+
+
+defineExpose({ message });
+</script>
+
+<style scoped lang="scss">
+.miao-message-provider {
+    width: 100%;
+    height: 100%;
+    position: relative;
+
+    .miao-message-provider-container {
+        position: absolute;
+        width: 0;
+        height: 0;
+        left: 50%;
+        top: 30px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        overflow: visible;
+
+        .miao-message {
+            display: flex;
+            align-items: center;
+            width: max-content;
+            background-color: rgb(249, 249, 249);
+            padding: 5px 10px;
+            background-color: rgb(255 255 255);
+            box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);
+            border-radius: 5px;
+            user-select: none;
+            margin-top: 10px;
+
+            .miao-message-item {
+                margin: 0 5px;
+            }
+
+            .miao-message-item-content {
+                white-space: pre-wrap;
+            }
+        }
+    }
+
+    .message-fade-move,
+    .message-fade-enter-active,
+    .message-fade-leave-active {
+        transition: all 0.5s ease;
+    }
+
+    .message-fade-enter-from,
+    .message-fade-leave-to {
+        opacity: 0;
+        transform: translateX(30px);
+    }
+
+    .message-fade-leave-active {
+        position: absolute;
+    }
+}
+</style>
diff --git a/src/hooks/miaoTools.ts b/src/hooks/miaoTools.ts
index b1afac9..47352c4 100644
--- a/src/hooks/miaoTools.ts
+++ b/src/hooks/miaoTools.ts
@@ -43,5 +43,5 @@ export const filePicker = (() => {
 })();
 
 export default {
-	filePicker
+	filePicker,
 };
diff --git a/src/views/miaoCodeMirror.vue b/src/views/miaoCodeMirror.vue
index 51ceb96..5fefd72 100644
--- a/src/views/miaoCodeMirror.vue
+++ b/src/views/miaoCodeMirror.vue
@@ -1,18 +1,21 @@
 <template>
-    <div class="codemirror-container" ref="rootRef" :class="`codemirror-container-${theme}`">
-        <div class="codemirror-container-top">
-            <div class="codemirror-container-btn codemirror-container-btn-save" @click="handleSave">保存</div>
-            <div class="codemirror-container-btn codemirror-container-btn-save" @click="handleReset">恢复到上次保存</div>
+    <miao-message-provider ref="miaoMessage">
+        <div class="codemirror-container" ref="rootRef" :class="`codemirror-container-${theme}`">
+            <div class="codemirror-container-top">
+                <div class="codemirror-container-btn codemirror-container-btn-save" @click="handleSave">保存</div>
+                <div class="codemirror-container-btn codemirror-container-btn-save" @click="handleReset">恢复到上次保存</div>
+            </div>
+            <div class="codemirror-container-main">
+                <NScrollbar style="max-height: calc( 100% );">
+                    <codemirror v-model="codeData" :extensions="extensions" />
+                </NScrollbar>
+            </div>
         </div>
-        <div class="codemirror-container-main">
-            <NScrollbar style="max-height: calc( 100% );">
-                <codemirror v-model="codeData" :extensions="extensions" />
-            </NScrollbar>
-        </div>
-    </div>
+    </miao-message-provider>
 </template>
 
 <script setup lang="ts">
+import miaoMessageProvider from '@/components/miaoMessageProvider.vue'
 import { VirtualFile } from '@/class/VirtualDirectory'
 import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
 import { onMounted, ref } from 'vue'
@@ -25,6 +28,7 @@ const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
     required: true
 })
 
+const miaoMessage = ref<InstanceType<typeof miaoMessageProvider>>()
 const vFile = ref<VirtualFile>()
 const rootRef = ref<HTMLDivElement>()
 // const _key = ref(Math.random())
@@ -36,6 +40,10 @@ const theme = ref<'light' | 'dark'>('light')
 
 const handleSave = async () => {
     if (bakData.value === codeData.value || !vFile.value) {
+        miaoMessage.value?.message('内容未改动', {
+            timeout: 3000,
+            type: 'info'
+        })
         return
     }
     const parentDir = vFile.value?.parent
@@ -45,8 +53,14 @@ const handleSave = async () => {
     )
     const file = new File([new Blob([codeData.value ?? ''])], vFile.value.name)
     bakData.value = codeData.value
-    miaoFetchApi.upload(file, parentDir)
+    const { response } = miaoFetchApi.upload(file, parentDir)
     false && miaoFetchApi.upload(file_bak, parentDir)
+    await response
+    miaoMessage.value?.message('保存成功', {
+        timeout: 5000,
+        type: 'success'
+    })
+
 }
 
 const handleReset = async () => {
@@ -166,7 +180,7 @@ onMounted(async () => {
     }
 
     .codemirror-container-main {
-        height: calc( 100% - 25px );
+        height: calc(100% - 25px);
         position: relative;
     }
 }
diff --git a/src/views/miaoDirectory.vue b/src/views/miaoDirectory.vue
index fcfae3e..78b1983 100644
--- a/src/views/miaoDirectory.vue
+++ b/src/views/miaoDirectory.vue
@@ -65,7 +65,7 @@ const emit = defineEmits<{
   exit: []
 }>()
 
-const popupInput = ref()
+const popupInput = ref<InstanceType<typeof MiaoPopupInput>>()
 // 是否显示模态框
 const showModel = ref(0)
 const searchText = ref<string>('')
@@ -210,9 +210,9 @@ const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
     handleSearchReset()
     nextTick(() => {
       miaoDirectoryItemRef.value.scrollTo({
-            top: 0,
-            behavior: "instant"
-        })
+        top: 0,
+        behavior: "instant"
+      })
     })
   }
   currentDirectories.value[0] = virtualDirectory
@@ -302,9 +302,8 @@ const handleItemDelete = async (_item: VirtualDirectory | VirtualFile) => {
 }
 
 const handleItemRename = async (item: VirtualDirectory | VirtualFile) => {
-  const popupRes = await popupInput.value.popup({
+  const popupRes = await popupInput.value?.popup({
     title: '重命名',
-    showInput: true,
     inputValue: item.name,
     inputProps: {
       placeholder: item.name,
@@ -322,10 +321,13 @@ const handleItemRename = async (item: VirtualDirectory | VirtualFile) => {
       },
     ],
   })
-  if (popupRes.key === false) {
+  if (popupRes?.key === false) {
+    return
+  }
+  const newName = popupRes?.text
+  if (!newName) {
     return
   }
-  const newName = popupRes.text
   const { response } = miaoFetchApi.rename(item, newName, {
     retry: 5,
   })
@@ -362,7 +364,7 @@ const handleDropVDirectory = async (vDirs: VirtualDirectory[]) => {
     if (currentDirectory.value.getParents.includes(vDir)) {
       return
     }
-    if(vDir.parent === currentDirectory.value) {
+    if (vDir.parent === currentDirectory.value) {
       return
     }
   }
@@ -413,9 +415,8 @@ const handlePickFilesUpload = async () => {
 }
 
 const handleAddNewItem = async () => {
-  const popupRes = await popupInput.value.popup({
+  const popupRes = await popupInput.value?.popup({
     title: '新建文件/文件夹',
-    showInput: true,
     inputProps: {
       placeholder: '',
     },
@@ -438,12 +439,16 @@ const handleAddNewItem = async () => {
     ],
   })
   // todo: 上传前如重名文件夹等等的错误提前检查
-  if (popupRes.key === 'cancel' || popupRes.text === '') {
+  if (popupRes?.key === 'cancel' || popupRes?.text === '') {
     return
   }
   const _currDir = currentDirectory.value
-  const name = popupRes.text
-  const opType: 'file' | 'dir' = popupRes.key
+  const name = popupRes?.text
+  if (!name) {
+    return
+  }
+  // @ts-ignore
+  const opType: 'file' | 'dir' = popupRes?.key
   if (opType === 'dir') {
     const res = await miaoFetchApi.mkdir(currentDirectory.value, name)
     if (res.message === 'success') {
@@ -467,9 +472,8 @@ const handleItemSelect = (item: VirtualDirectory | VirtualFile) => {
 }
 
 const handleSearch = async () => {
-  const popupRes = await popupInput.value.popup({
+  const popupRes = await popupInput.value?.popup({
     title: '搜索当前文件夹',
-    showInput: true,
     inputValue: searchText.value,
     inputProps: {
       placeholder: '',
@@ -492,7 +496,9 @@ const handleSearch = async () => {
       },
     ],
   })
-  console.log(popupRes)
+  if (!popupRes) {
+    return
+  }
   if (popupRes.key === 'search') {
     searchText.value = popupRes.text
   } else if (popupRes.key === 'reset') {