md文件保存实现，修改bookmark的事务问题

src/view/blog/createBlog.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="blog_editer" v-if="isReady">
-    <div class="bt_section">
-      <el-button>增加</el-button>
-      <el-button class="bts" v-for="(value, key) of blogTypes" :key="key" @click="onclickBlogTab(value[0])">
+    <div class="bt_section" :style="btWholeStyle">
+      <el-button @click="insertBlogType">增加</el-button>
+      <el-button class="bts" v-for="(value, key) of blogTypes" :key="key" @click="onclickTypeTab(value[0])">
         <el-dropdown trigger="click">
           <el-icon>
             <edit />
@@ -17,14 +17,16 @@
         {{ value[1].btName }}
       </el-button>
     </div>
-    <div class="b_section">
-      <el-button @click="insertBlogType">增加</el-button>
-      <el-button v-for="(blog, index) of blogTypes.get(checkedBlogIndex)?.blogs" @click="onclickTypeTab(blog[0])">
+    <div class="b_section" :style="bWholeStyle">
+      <el-button @click="insertBlog">增加</el-button>
+      <el-button v-for="(blog, index) of blogTypes.get(checkedBlogIndex)?.blogs" @click="onclickBlogTab(blog[0])">
         {{ blog[1].title }}
       </el-button>
     </div>
-    <div>
-      <md-editor theme="light" v-model="blog.content" @save="saveContent" />
+    <div :style="cWholeStyle">
+      <md-editor theme="light"
+        v-model="((blogTypes.get(checkedBlogIndex) as BlogType).blogs.get(checkedIndex) as Blog).content"
+        @save="saveContent" />
     </div>
     <el-dialog v-model="dialogVisible" title="Tips" width="30%">
       <el-input v-model="(blogTypes.get(checkedBlogIndex) as BlogType).btName"></el-input>
@@ -35,6 +37,16 @@
         </span>
       </template>
     </el-dialog>
+    <el-dialog v-model="contentDialogVisible" title="Tips" width="30%">
+      <el-input v-model="((blogTypes.get(checkedBlogIndex) as BlogType).blogs.get(checkedIndex) as Blog).title">
+      </el-input>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="contentDialogVisible = false">Cancel</el-button>
+          <el-button type="primary" @click="saveTitle">Confirm</el-button>
+        </span>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -43,26 +55,37 @@ import { onBeforeMount, onMounted, reactive, ref, watch } from 'vue'
 import MdEditor from 'md-editor-v3'
 import { Edit } from "@element-plus/icons-vue";
 import 'md-editor-v3/lib/style.css'
-import { Blog, BlogType } from '../../entity/index'
-import { updateBtName, updateContent, listAll, insert_blog_type } from '../../api/blog'
+import { updateBtName, updateContent, listAll, insert_blog_type, getContent, newBlog } from '../../api/blog'
+import $moment from "moment";
 
 // const MD_SETTING = () => {
 //   return {
 //     tools: [{ title: 'bold' }]
 //   }
 // }
+type Blog = {
+  bid: string,
+  btId: string,
+  btName: string,
+  title: string,
+  blog_prex: string,
+  content: string
+}
 
+type BlogType = {
+  btId: string,
+  btName: string,
+  blogs: Map<string, Blog>
+}
 const blogTypes = reactive<Map<string, BlogType>>(new Map())
-const blog = reactive<Blog>({} as Blog)
-let bid = ref("")
 const dialogVisible = ref(false)
+const contentDialogVisible = ref(false)
 
 let checkedIndex = ref<string>("")
 let checkedBlogIndex = ref<string>("")
 let isReady = ref(false)
 const getTestData = async () => {
   await listAll().then(response => {
-    console.log(response)
     response.data.forEach((element: any) => {
       const blog_type: BlogType = {
         btId: element.btId,
@@ -82,20 +105,27 @@ const getTestData = async () => {
         blog_type.blogs.set(item.bid, blog)
       })
     })
-    console.log(blogTypes)
   })
   isReady.value = true
   checkedBlogIndex.value = blogTypes.keys().next().value
+  checkedIndex.value = blogTypes.values().next().value.blogs.keys().next().value
+  console.log(checkedIndex.value)
 }
 getTestData()
 // watch(blogTypes, (newValue, oldValue) => {
 //   console.log(newValue, '新值', oldValue, '旧值')
 // }, { deep: true })
 const onclickTypeTab = (key: string) => {
-  checkedIndex.value = key
+  const bid = <string>blogTypes.get(key)?.blogs.values().next().value.bid
+  getContent(bid).then(response => {
+    ((blogTypes.get(key) as BlogType).blogs.get(bid) as Blog).content = response.data.content
+    checkedBlogIndex.value = key
+    checkedIndex.value = bid
+  })
+
 }
 const onclickBlogTab = (key: string) => {
-  checkedBlogIndex.value = key
+  checkedIndex.value = key
 }
 const handleEditBtName = (bt: BlogType) => {
   dialogVisible.value = true
@@ -111,19 +141,19 @@ const saveType = () => {
   })
 
 }
-const saveTitle = (params: any) => {
+const saveTitle = () => {
   const query = {
-    bid: params.id,
-    title: params.name
+    bid: checkedIndex.value,
+    title: ((blogTypes.get(checkedBlogIndex.value) as BlogType).blogs.get(checkedIndex.value) as Blog).title
   }
   updateContent(query).then(response => {
-
+    contentDialogVisible.value = false
   })
 }
 const saveContent = () => {
   const query = {
-    bid: bid.value,
-    content: blog.content
+    bid: checkedIndex.value,
+    content: ((blogTypes.get(checkedBlogIndex.value) as BlogType).blogs.get(checkedIndex.value) as Blog).content
   }
   updateContent(query).then(response => {
 
@@ -132,14 +162,45 @@ const saveContent = () => {
 const insertBlogType = () => {
   dialogVisible.value = true
 }
-
+const insertBlog = () => {
+  const data = {
+    btId: checkedBlogIndex.value,
+    title: $moment().format("YYYY-MM-DD")
+  }
+  newBlog(data).then(response => {
+    const { bid, title, content } = response.data
+    const blog = {
+      bid: bid,
+      btId: checkedBlogIndex.value,
+      btName: "",
+      title: title,
+      blog_prex: "",
+      content: content
+    } as Blog
+    (blogTypes.get(checkedBlogIndex.value) as BlogType).blogs.set(bid, blog)
+    checkedIndex.value = bid
+  })
+}
+console.log(window.innerWidth)
+type WholeStyle = {
+  width: string
+}
+const btWholeStyle = reactive<WholeStyle>({} as WholeStyle)
+let btWidth = 0.10 * window.innerWidth
+btWholeStyle.width = btWidth + 'px'
+const bWholeStyle = reactive<WholeStyle>({} as WholeStyle)
+let bWidth = 0.23 * window.innerWidth
+bWholeStyle.width = bWidth + 'px'
+const cWholeStyle = reactive<WholeStyle>({} as WholeStyle)
+let contentWidth = 0.67 * window.innerWidth
+cWholeStyle.width = contentWidth + 'px'
 </script>
 
 <style scoped>
 .b_section {
   display: flex;
   flex-direction: column;
-  width: 80px;
+  width: 100px;
 }
 
 .bts {
@@ -148,6 +209,10 @@ const insertBlogType = () => {
 
 }
 
+.el-button {
+  font-size: 15px;
+}
+
 .el-dropdown {
   margin-right: 5px;
 }
@@ -156,7 +221,7 @@ const insertBlogType = () => {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  width: 80px;
+  width: 100px;
 }
 
 .blog_editer {