From 613269d9784898c9c8cf8ff1c046a55672e048d7 Mon Sep 17 00:00:00 2001
From: terwer <youweics@163.com>
Date: Fri, 29 Jul 2022 21:25:52 +0800
Subject: [PATCH] =?UTF-8?q?feat:#13=20=E5=8F=91=E5=B8=83=E5=88=B0Vuepress-?=
 =?UTF-8?q?=E7=94=9F=E6=88=90=E6=91=98=E8=A6=81=E5=92=8C=E8=AF=BB=E5=8F=96?=
 =?UTF-8?q?=E6=A0=87=E7=AD=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/main/VuepressMain.vue | 51 +++++++++++++++++++++++-----
 src/lib/siyuan/siyuanUtil.ts         | 10 +++++-
 src/lib/util.ts                      |  2 +-
 src/main.ts                          |  9 +++++
 4 files changed, 61 insertions(+), 11 deletions(-)

diff --git a/src/components/main/VuepressMain.vue b/src/components/main/VuepressMain.vue
index b151f86e..e747db90 100644
--- a/src/components/main/VuepressMain.vue
+++ b/src/components/main/VuepressMain.vue
@@ -53,6 +53,7 @@
               size="small"
               @keyup.enter="tagHandleInputConfirm"
               @blur="tagHandleInputConfirm"
+              autofocus
           />
           <el-button v-else class="button-new-tag ml-1 el-tag" size="small" @click="tagShowInput">
             {{ $t('main.tag.new') }}
@@ -107,12 +108,15 @@
 
 <script lang="ts" setup>
 import {onBeforeMount, ref} from "vue";
-import {getPage, getPageAttrs, getPageId} from "../../lib/siyuan/siyuanUtil";
+import {getPage, getPageAttrs, getPageId, getPageMd} from "../../lib/siyuan/siyuanUtil";
 import log from "../../lib/logUtil"
 import {SIYUAN_PAGE_ATTR_KEY} from "../../constants/siyuanPageConstants"
-import {pingyinSlugify, zhSlugify} from "../../lib/util";
+import {pingyinSlugify, zhSlugify, formatNumToZhDate} from "../../lib/util";
 import {useI18n} from "vue-i18n";
 import {ElMessage} from "element-plus";
+import {CONSTANTS} from "../../constants/constants";
+import {mdToHtml, parseHtml} from "../../lib/htmlUtil";
+import {nextTick} from 'vue'
 
 const {t} = useI18n()
 
@@ -121,18 +125,20 @@ const formData = ref({
   title: "",
   customSlug: "",
   desc: "",
-  created: new Date(),
+  created: "",
   checkList: [],
   tag: {
     inputValue: "",
-    dynamicTags: [],
+    dynamicTags: <string[]>([]),
     inputVisible: false
   },
   categories: ["默认分类"]
 })
 const siyuanData = ref({
   pageId: "",
-  meta: {}
+  meta: {
+    tags: ""
+  }
 })
 const vuepressData = {
   yamlObj: {
@@ -180,6 +186,14 @@ async function initPage() {
   formData.value.customSlug = siyuanData.value.meta[SIYUAN_PAGE_ATTR_KEY.SIYUAN_PAGE_ATTR_CUSTOM_SLUG_KEY];
   // @ts-ignore
   formData.value.desc = siyuanData.value.meta[SIYUAN_PAGE_ATTR_KEY.SIYUAN_PAGE_ATTR_CUSTOM_DESC_KEY];
+  formData.value.created = formatNumToZhDate(page.created)
+
+  formData.value.tag.dynamicTags = [];
+  const tagstr = siyuanData.value.meta.tags || ""
+  const tgarr = tagstr.split(",")
+  for (let i = 0; i < tgarr.length; i++) {
+    formData.value.tag.dynamicTags.push(tgarr[i])
+  }
 }
 
 async function makeSlug() {
@@ -208,20 +222,39 @@ async function makeSlug() {
   }
 }
 
-const makeDesc = () => {
+async function makeDesc() {
+  const data = await getPageMd(siyuanData.value.pageId);
 
+  const md = data.content
+  let html = mdToHtml(md)
+  // formData.value.desc = html;
+  formData.value.desc = parseHtml(html, CONSTANTS.MAX_PREVIEW_LENGTH, true)
 }
-const createTimeChanged = (val: any) => {
 
+const createTimeChanged = (val: any) => {
+  log.logInfo("createTimeChanged=>", val)
 }
 const tagHandleClose = (tag: any) => {
-
+  formData.value.tag.dynamicTags.splice(formData.value.tag.dynamicTags.indexOf(tag), 1)
 }
+// https://stackoverflow.com/questions/64774113/vue-js-3-use-autofocus-on-input-with-ref-inside-a-method
+// https://stackoverflow.com/questions/64774113/vue-js-3-use-autofocus-on-input-with-ref-inside-a-method
+// https://www.helloworld.net/p/2721375043
+const tagRefInput = ref();
 const tagShowInput = () => {
+  formData.value.tag.inputVisible = true
 
+  // this.$refs.tagRefInput.focus()
+  nextTick(() => {
+    tagRefInput.value.focus();
+  });
 }
 const tagHandleInputConfirm = () => {
-
+  if (formData.value.tag.inputValue) {
+    formData.value.tag.dynamicTags.push(formData.value.tag.inputValue)
+  }
+  formData.value.tag.inputVisible = false
+  formData.value.tag.inputValue = ''
 }
 const fetchTag = () => {
 
diff --git a/src/lib/siyuan/siyuanUtil.ts b/src/lib/siyuan/siyuanUtil.ts
index 9cf44596..ebdad4e2 100644
--- a/src/lib/siyuan/siyuanUtil.ts
+++ b/src/lib/siyuan/siyuanUtil.ts
@@ -3,7 +3,7 @@
  * @returns {Promise<string>}
  */
 import {getJSONConf, setJSONConf} from "../config";
-import {getBlockByID, getBlockAttrs} from "./siYuanApi.js";
+import {getBlockByID, getBlockAttrs, exportMdContent} from "./siYuanApi.js";
 import log from "../logUtil";
 import {getEnv} from "../envUtil";
 
@@ -131,4 +131,12 @@ export async function getPage(pageId: string) {
  */
 export async function getPageAttrs(pageId: string) {
     return await getBlockAttrs(pageId)
+}
+
+/**
+ * 获取页面的Markdown
+ * @param pageId
+ */
+export async function getPageMd(pageId: string) {
+    return await exportMdContent(pageId);
 }
\ No newline at end of file
diff --git a/src/lib/util.ts b/src/lib/util.ts
index 138a794f..b9d2d44b 100644
--- a/src/lib/util.ts
+++ b/src/lib/util.ts
@@ -210,7 +210,7 @@ export const formatIsoToZhDate = (str: string, isAddTimeZone: boolean) => {
  * @param str '20220718142548'
  * @returns {string|*}
  */
-export const formatNumToZhDate = (str: string) => {
+export const formatNumToZhDate = (str: string): string => {
     if (!str) {
         return "";
     }
diff --git a/src/main.ts b/src/main.ts
index f76dde39..18495af5 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -17,5 +17,14 @@ app.use(i18n)
 // Element-Plus
 app.use(ElementPlus)
 
+// Register a global custom directive called `v-focus`
+app.directive('focus', {
+    // When the bound element is mounted into the DOM...
+    mounted(el) {
+        // Focus the element
+        el.focus()
+    }
+})
+
 // 挂载Vue
 app.mount('#app')
\ No newline at end of file