文章二维码

blossom-editor/src/renderer/src/api/blossom.ts

@@ -67,6 +67,15 @@ export const folderOpenApi = (data?: object): Promise<R<any>> => {
   return rq.post<R<any>>("/folder/open", data);
 }
 
+/**
+ * 查看专题文章
+ * @param params 
+ * @returns 
+ */
+export const subjectsApi = (params?: object): Promise<R<any>> => {
+  return rq.get<R<any>>("/folder/subjects", { params });
+}
+
 //#endregion
 
 //#region ====================================================< article >===================================================
@@ -125,31 +134,29 @@ export const articleUpdApi = (data?: object): Promise<R<any>> => {
  * }
  * @returns 
  */
-export const  articleUpdContentApi = (data?: object): Promise<R<any>> => {
+export const articleUpdContentApi = (data?: object): Promise<R<any>> => {
   return rq.post<R<any>>("/article/upd/content", data);
 }
 
+/**
+ * star 或取消 star
+ * @param data 
+ * @returns 
+ */
 export const articleStarApi = (data?: object): Promise<R<any>> => {
   return rq.post<R<any>>("/article/star", data);
 }
 
-export const articleOpenApi = (data?: object): Promise<R<any>> => {
-  return rq.post<R<any>>("/article/open", data);
-}
-
-export const articleSyncApi = (data?: object): Promise<R<any>> => {
-  return rq.post<R<any>>("/article/open/sync", data);
-}
-
+/**
+ * 下载文章 markdown
+ * @param params 
+ * @returns 
+ */
 export const articleDownloadApi = (params?: object): Promise<any> => {
   let config = { params: params, responseType: 'blob' }
   return rq.get("/article/download", config);
 }
 
-export const subjectsApi = (params?: object): Promise<R<any>> => {
-  return rq.get<R<any>>("/folder/subjects", { params });
-}
-
 export const articleWordsApi = (params?: object): Promise<R<any>> => {
   return rq.get<R<any>>("/article/stat/words", { params });
 }
@@ -162,11 +169,24 @@ export const articleHeatmapApi = (params?: object): Promise<R<any>> => {
   return rq.get<R<any>>("/article/stat/heatmap", { params });
 }
 
-
 export const articleRefListApi = (params?: object): Promise<R<any>> => {
   return rq.get<R<any>>("/article/ref/list", { params });
 }
 
+export const articleOpenApi = (data?: object): Promise<R<any>> => {
+  return rq.post<R<any>>("/article/open", data);
+}
+
+export const articleSyncApi = (data?: object): Promise<R<any>> => {
+  return rq.post<R<any>>("/article/open/sync", data);
+}
+
+export const articleQrCodeApi = (params?: object): Promise<any> => {
+  let config = { params: params, responseType: 'blob' }
+  return rq.get("/article/open/qrcode", config);
+}
+
+
 //#endregion
 
 //#region ====================================================< picture >===================================================

blossom-editor/src/renderer/src/views/article/ArticleQrCode.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="article-qrcode-root">
+
+    <!-- 标题 -->
+    <div class="title-wrapper">
+      <div class="title">公网访问二维码</div>
+    </div>
+
+    <div class="content" v-loading="isLoading">
+
+      <bl-row just="center">
+        <el-image fit="cover" :src="qrcodeImg" style="width: 200px;height: 200px;">
+          <template #error>
+            <bl-row just="center" height="200px" style="border:1px dashed var(--el-border-color);border-radius: 10px;">
+              二维码生成失败
+            </bl-row>
+          </template>
+        </el-image>
+      </bl-row>
+      <bl-row just="center" style="margin-top: 5px;color: var(--bl-text-color-light);">
+        <div>《{{ articleName }}》</div>
+      </bl-row>
+      <bl-row just="center" style="margin-top: 10px;">
+      </bl-row>
+
+      <bl-row class="label" style="margin-top: 10px;">
+        文章访问链接
+        <div class="iconbl bl-copy-line" @click="copyUrl"></div>
+        <div class="iconbl bl-a-clouddownload-line" @click="downloadImg"></div>
+      </bl-row>
+
+      <div style="word-break: break-all;font-size: 12px;margin-top: 10px;">
+        <a :href="qrcodeUrl" target="_blank">{{ qrcodeUrl }}</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { articleQrCodeApi } from '@renderer/api/blossom'
+import { writeText, download } from '@renderer/assets/utils/electron'
+
+const isLoading = ref(true)
+
+// 截屏图片预览
+const qrcodeImg = ref('')
+const qrcodeUrl = ref('')
+const articleName = ref('')
+
+const getArticleQrCode = (name: string, id: number) => {
+  articleName.value = name
+  articleQrCodeApi({ id: id }).then(resp => {
+    let blob = new Blob([resp.data], { type: "image/png" })
+    qrcodeImg.value = URL.createObjectURL(blob)
+    console.log(qrcodeImg.value);
+    qrcodeUrl.value = resp.headers.get('Article-Url')
+  }).finally(() => {
+    isLoading.value = false
+  })
+}
+
+const copyUrl = () => {
+  writeText(qrcodeUrl.value)
+}
+
+const downloadImg = () => {
+  download(qrcodeImg.value)
+}
+
+defineExpose({
+  getArticleQrCode
+})
+</script>
+
+<style scoped lang="scss">
+$height-title: 50px;
+
+.article-qrcode-root {
+  border-radius: 10px;
+
+  .title-wrapper {
+    @include box(100%, $height-title);
+    @include flex(row, flex-start, center);
+    border-bottom: 1px solid var(--el-border-color);
+
+    .info-icon {
+      @include box(50px, 100%);
+      padding: 5px 0;
+      text-align: center;
+    }
+
+    .title {
+      @include font(16px);
+      @include box(100%, 100%);
+      height: 100%;
+      padding-top: 10px;
+      color: var(--el-color-primary);
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      padding-left: 30px;
+    }
+  }
+
+  .content {
+    padding: 20px;
+
+    .label {
+      font-size: 16px;
+      border-top: 1px solid var(--el-border-color);
+      padding-top: 15px;
+
+      .iconbl {
+        font-size: 18px;
+        margin-left: 10px;
+        cursor: pointer;
+
+        &:hover {
+          color: var(--el-color-primary);
+        }
+      }
+    }
+
+    a {
+      color: var(--el-color-primary);
+    }
+  }
+
+
+}
+</style>
+
+<style></style>../doc

blossom-editor/src/renderer/src/views/article/ArticleTreeTitle.vue

@@ -41,21 +41,25 @@
           <!-- <div class="menu-item" @click="handleShowDocInfoDialog('add', props.trees.i)">
             <span class="iconbl bl-a-fileprohibit-line"></span>删除文档
           </div> -->
+          <div :class="['menu-item', props.trees.ty === 1 ? 'disabled' : '']" @click="createUrl('link')">
+            <span class="iconbl bl-correlation-line"></span>复制引用
+          </div>
           <div class="menu-item-divider"></div>
           <div :class="['menu-item', props.trees.ty === 1 ? 'disabled' : '']" @click="openArticleWindow">
             <span class="iconbl bl-a-computerend-line"></span>新窗口打开
           </div>
-          <div :class="['menu-item', props.trees.ty === 1 ? 'disabled' : '']" @click="articleDownload">
-            <span class="iconbl bl-a-computerend-line"></span>下载文章
-          </div>
           <div :class="['menu-item', props.trees.ty === 1 || !isOpen ? 'disabled' : '']" @click="createUrl('open')">
             <span class="iconbl bl-planet-line"></span>浏览器打开
           </div>
-          <div :class="['menu-item', props.trees.ty === 1 ? 'disabled' : '']" @click="createUrl('copy')">
+          <div :class="['menu-item', props.trees.ty === 1 ? 'disabled' : '']" @click="articleDownload">
+            <span class="iconbl bl-a-clouddownload-line"></span>下载文章
+          </div>
+          <div :class="['menu-item', props.trees.ty === 1 || !isOpen ? 'disabled' : '']" @click="createUrl('copy')">
             <span class="iconbl bl-a-linkspread-line"></span>复制链接
           </div>
-          <div :class="['menu-item', props.trees.ty === 1 ? 'disabled' : '']" @click="createUrl('link')">
-            <span class="iconbl bl-correlation-line"></span>复制引用
+          <div :class="['menu-item', props.trees.ty === 1 || !isOpen ? 'disabled' : '']"
+            @click="handleArticleQrCodeDialog()">
+            <span class="iconbl bl-a-qrcode1-line"></span>查看二维码
           </div>
         </div>
       </div>
@@ -70,6 +74,15 @@
     :close-on-click-modal="false" draggable>
     <ArticleInfo ref="ArticleInfoRef"></ArticleInfo>
   </el-dialog>
+
+  <!-- 详情的弹框 -->
+  <el-dialog v-model="isShowQrCodeDialog" width="335" top="100px" style="
+    --el-dialog-padding-primary:0;
+    --el-dialog-border-radius:10px;
+    --el-dialog-box-shadow:var(--bl-box-shadow-dialog)" :append-to-body="true" :destroy-on-close="true"
+    :close-on-click-modal="false" draggable>
+    <ArticleQrCode ref="ArticleQrCodeRef"></ArticleQrCode>
+  </el-dialog>
 </template>
 
 <script setup lang="ts">
@@ -77,12 +90,13 @@ import { ref, computed, onBeforeUnmount, nextTick } from 'vue'
 import type { PropType } from 'vue'
 import { useUserStore } from '@renderer/stores/user'
 
+import { grammar } from './markedjs'
 import { articleDownloadApi, articleSyncApi } from '@renderer/api/blossom'
 import { openExtenal, writeText, openNewArticleWindow } from '@renderer/assets/utils/electron'
 import { isNotBlank } from '@renderer/assets/utils/obj'
 import ArticleInfo from '@renderer/views/article/ArticleInfo.vue'
+import ArticleQrCode from './ArticleQrCode.vue'
 import Notify from '@renderer/components/Notify'
-import { grammar } from './markedjs'
 
 const userStore = useUserStore();
 
@@ -226,13 +240,22 @@ const sync = () => {
     Notify.success('同步成功')
   })
 }
+
+const isShowQrCodeDialog = ref<boolean>(false);
+const ArticleQrCodeRef = ref()
+
+const handleArticleQrCodeDialog = () => {
+  isShowQrCodeDialog.value = true
+  nextTick(() => {
+    ArticleQrCodeRef.value.getArticleQrCode(props.trees.n, props.trees.i)
+  })
+}
 //#endregion 右键菜单
 
 //#region ----------------------------------------< 新增修改详情弹框 >--------------------------------------
 
 const ArticleInfoRef = ref()
-const isShowDocInfoDialog = ref<boolean>(false);
-
+const isShowDocInfoDialog = ref<boolean>(false)
 /**
  * 显示弹框
  * @param dialogType 弹框的类型, 新增, 修改