feat: #285 支持生成ankilink牌组标记-列表新增牌组标记管理按钮

components/anki/AnkiIndex.vue

@@ -132,7 +132,7 @@
 
 <script lang="ts" setup>
 import { SiYuanApi } from "~/utils/platform/siyuan/siYuanApi"
-import { onMounted, reactive } from "vue"
+import { onMounted, reactive, watch } from "vue"
 import { getPageId } from "~/utils/platform/siyuan/siyuanUtil"
 import { ElMessage, ElMessageBox } from "element-plus"
 import { useI18n } from "vue-i18n"
@@ -152,6 +152,14 @@ const formData = reactive({
   tagMap: {},
 })
 
+// props
+const props = defineProps({
+  pageId: {
+    type: String,
+    default: undefined,
+  },
+})
+
 const updateCard = async () => {
   ElMessageBox.confirm("准备同步Anki卡片，是否继续？", t("main.opt.warning"), {
     confirmButtonText: t("main.opt.ok"),
@@ -223,7 +231,7 @@ const tagHandleInputConfirm = (blockId) => {
 
 // init
 const initPage = async () => {
-  const pageId = await getPageId()
+  const pageId = await getPageId(true, props.pageId)
   formData.ankiInfo = await siyuanApi.getAnkilinkInfo(pageId)
 
   formData.ankiInfo.forEach((item) => {
@@ -294,6 +302,19 @@ const saveAnkiInfo = (blockId: string) => {
   ElMessage.success(t("main.opt.success"))
 }
 
+/* 监听props */
+watch(
+  () => props.pageId,
+  /**/ (oldValue, newValue) => {
+    // Here you can add you functionality
+    // as described in the name you will get old and new value of watched property
+    // 默认选中vuepress
+    // setBooleanConf(SWITCH_CONSTANTS.SWITCH_VUEPRESS_KEY, true)
+    initPage()
+    logger.debug("Anki初始化")
+  }
+)
+
 onMounted(async () => {
   await initPage()
 })

components/blog/BlogMain.vue

@@ -84,18 +84,34 @@
             <div style="text-align: center">操作</div>
           </template>
           <template #default="scope">
+            <!-- 预览 -->
             <el-button
               size="small"
               @click="handleView(scope.$index, scope.row)"
             >
               <font-awesome-icon icon="fa-solid fa-book-open-reader" />
             </el-button>
+            <!-- 发布 -->
             <el-button
               size="small"
               @click="handleEdit(scope.$index, scope.row)"
             >
               <font-awesome-icon icon="fa-solid fa-upload" />
             </el-button>
+            <!-- anki -->
+            <el-button
+              size="small"
+              @click="handleAnki(scope.$index, scope.row)"
+            >
+              <font-awesome-icon icon="fa-solid fa-credit-card" />
+            </el-button>
+            <!-- picgo -->
+            <el-button
+              size="small"
+              @click="handlePicgo(scope.$index, scope.row)"
+            >
+              <font-awesome-icon icon="fa-solid fa-image" />
+            </el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -130,17 +146,24 @@
     <div id="post-detail" v-if="showDetail">
       <single-blog-detail
         :post="postDetail"
-        @on-change="emitFn"
+        @on-change="emitBackFn"
         @on-publish-change="emitPublishPageFn"
       />
     </div>
 
     <!-- 文章发布 -->
     <div id="post-publisher" v-if="showPublish">
-      <single-publish
-        :publish-data="publishData"
-        @on-change="emitPublishBackFn"
-      />
+      <single-publish :publish-data="publishData" @on-change="emitBackFn" />
+    </div>
+
+    <!-- Anki -->
+    <div class="post-anki" v-if="showAnki">
+      <single-anki :post="postDetail" @on-change="emitBackFn" />
+    </div>
+
+    <!-- Picgo -->
+    <div class="post-picgo" v-if="showPicgo">
+      <single-picgo :post="postDetail" @on-change="emitBackFn" />
     </div>
   </div>
 </template>
@@ -163,6 +186,8 @@ import SinglePublish from "~/components/blog/singleWin/singlePublish.vue"
 import { getPublishCfg } from "~/utils/publishUtil"
 import { isEmptyString, parseBoolean } from "~/utils/util"
 import { isInSiyuanNewWinBrowser } from "~/utils/otherlib/siyuanBrowserUtil"
+import SingleAnki from "~/components/blog/singleWin/SingleAnki.vue"
+import SinglePicgo from "~/components/blog/singleWin/SinglePicgo.vue"
 
 const logger = LogFactory.getLogger()
 
@@ -171,6 +196,9 @@ const { t } = useI18n()
 const showHome = ref(true)
 const showDetail = ref(false)
 const showPublish = ref(false)
+const showAnki = ref(false)
+const showPicgo = ref(false)
+
 const postDetail = ref()
 const publishData = ref()
 const isInSiyuan = ref(false)
@@ -231,6 +259,8 @@ const handleView = (index, row) => {
 
     showPublish.value = false
     showHome.value = false
+    showAnki.value = false
+    showPicgo.value = false
     showDetail.value = true
   }
 }
@@ -263,18 +293,18 @@ const emitFn = () => {
   // console.log("emitFn");
 }
 
-const emitPublishBackFn = () => {
+const emitBackFn = () => {
   emitFn()
 }
 
 const emitPublishPageFn = (post) => {
-  // post.postid = post.postid
-  // post.title = post.title
   publishData.value = post
 
   showPublish.value = true
   showHome.value = false
   showDetail.value = false
+  showAnki.value = false
+  showPicgo.value = false
 }
 
 const handleEdit = (index, row) => {
@@ -289,6 +319,8 @@ const handleEdit = (index, row) => {
     showPublish.value = true
     showHome.value = false
     showDetail.value = false
+    showAnki.value = false
+    showPicgo.value = false
   }
 }
 const handleNewWinEdit = (index, row) => {
@@ -318,6 +350,88 @@ const handleRowClick = (row, column, event) => {
   // console.log("handleRowClick", row)
 }
 
+const handleAnki = (index, row) => {
+  if (isNewWin.value) {
+    handleNewWinAnki(index, row)
+  } else {
+    const post = new Post()
+    post.postid = row.postid
+    post.title = row.title
+    post.dateCreated = row.dateCreated
+    post.mt_keywords = row.mt_keywords
+    post.description = row.description
+    postDetail.value = post
+
+    showPublish.value = false
+    showHome.value = false
+    showPicgo.value = false
+    showDetail.value = false
+    showAnki.value = true
+  }
+}
+const handleNewWinAnki = (index, row) => {
+  ElMessageBox.confirm(
+    "此操作会打开新页面，此窗口将关闭，是否继续？",
+    t("main.opt.warning"),
+    {
+      confirmButtonText: t("main.opt.ok"),
+      cancelButtonText: t("main.opt.cancel"),
+      type: "warning",
+    }
+  )
+    .then(async () => {
+      goToPage("/anki/index.html?id=" + row.postid)
+      // console.log(index, row)
+    })
+    .catch(() => {
+      // ElMessage({
+      //   type: 'error',
+      //   message: t("main.opt.failure"),
+      // })
+    })
+}
+
+const handlePicgo = (index, row) => {
+  if (isNewWin.value) {
+    handleNewWinPicgo(index, row)
+  } else {
+    const post = new Post()
+    post.postid = row.postid
+    post.title = row.title
+    post.dateCreated = row.dateCreated
+    post.mt_keywords = row.mt_keywords
+    post.description = row.description
+    postDetail.value = post
+
+    showPublish.value = false
+    showHome.value = false
+    showAnki.value = false
+    showDetail.value = false
+    showPicgo.value = true
+  }
+}
+const handleNewWinPicgo = (index, row) => {
+  ElMessageBox.confirm(
+    "此操作会打开新页面，此窗口将关闭，是否继续？",
+    t("main.opt.warning"),
+    {
+      confirmButtonText: t("main.opt.ok"),
+      cancelButtonText: t("main.opt.cancel"),
+      type: "warning",
+    }
+  )
+    .then(async () => {
+      goToPage("/picgo/index.html?id=" + row.postid)
+      // console.log(index, row)
+    })
+    .catch(() => {
+      // ElMessage({
+      //   type: 'error',
+      //   message: t("main.opt.failure"),
+      // })
+    })
+}
+
 const initPage = async () => {
   isInSiyuan.value = inSiyuan()
 

components/blog/singleWin/SingleAnki.vue

@@ -0,0 +1,47 @@
+<template>
+  <div id="post-detail-body">
+    <el-page-header :icon="ArrowLeft" title="返回" @click="onBack">
+      <template #content>
+        <div class="flex items-center">
+          <span class="text-large font-600 mr-3" :title="props.post.title">
+            {{ shortTitle }} - Anki
+          </span>
+        </div>
+      </template>
+    </el-page-header>
+
+    <div class="post-detail-content-box">
+      <anki-index :page-id="props.post.postid" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Post } from "~/utils/models/post"
+import { getByLength } from "~/utils/strUtil"
+import { onMounted, ref } from "vue"
+import { getPublishCfg } from "~/utils/publishUtil"
+import { parseBoolean } from "~/utils/util"
+import { ArrowLeft } from "@element-plus/icons-vue"
+import AnkiIndex from "~/components/anki/AnkiIndex.vue"
+
+const props = defineProps({
+  post: {
+    type: Post,
+    default: new Post(),
+  },
+})
+const emits = defineEmits(["on-change"])
+
+const shortTitle = getByLength(props.post?.title, 18, false)
+const isNewWin = ref(true)
+
+const onBack = () => {
+  emits("on-change")
+}
+
+onMounted(() => {
+  const publishCfg = getPublishCfg()
+  isNewWin.value = parseBoolean(publishCfg.newWin)
+})
+</script>

components/blog/singleWin/SinglePicgo.vue

@@ -0,0 +1,47 @@
+<template>
+  <div id="post-detail-body">
+    <el-page-header :icon="ArrowLeft" title="返回" @click="onBack">
+      <template #content>
+        <div class="flex items-center">
+          <span class="text-large font-600 mr-3" :title="props.post.title">
+            {{ shortTitle }} - Picgo
+          </span>
+        </div>
+      </template>
+    </el-page-header>
+
+    <div class="post-detail-content-box">
+      <picgo-index />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Post } from "~/utils/models/post"
+import { getByLength } from "~/utils/strUtil"
+import { onMounted, ref } from "vue"
+import { getPublishCfg } from "~/utils/publishUtil"
+import { parseBoolean } from "~/utils/util"
+import { ArrowLeft } from "@element-plus/icons-vue"
+import PicgoIndex from "~/components/picgo/PicgoIndex.vue"
+
+const props = defineProps({
+  post: {
+    type: Post,
+    default: new Post(),
+  },
+})
+const emits = defineEmits(["on-change"])
+
+const shortTitle = getByLength(props.post?.title, 18, false)
+const isNewWin = ref(true)
+
+const onBack = () => {
+  emits("on-change")
+}
+
+onMounted(() => {
+  const publishCfg = getPublishCfg()
+  isNewWin.value = parseBoolean(publishCfg.newWin)
+})
+</script>