feat: AI 功能发布

terwer · Aug 23, 2023 · ff837b0 · ff837b0
1 parent c6d781f
commit ff837b0
Show file tree

Hide file tree

Showing 9 changed files with 260 additions and 25 deletions.
diff --git a/src/components/publish/BatchPublishIndex.vue b/src/components/publish/BatchPublishIndex.vue
@@ -48,6 +48,7 @@ import { ICategoryConfig } from "~/src/types/ICategoryConfig.ts"
 import { SiyuanAttr } from "zhi-siyuan-api"
 import { DistributionPattern } from "~/src/models/distributionPattern.ts"
 import _ from "lodash"
+import PublishTitle from "~/src/components/publish/form/PublishTitle.vue"
 
 const logger = createAppLogger("publisher-index")
 
@@ -254,6 +255,11 @@ const syncAiSwitch = (val: boolean) => {
   logger.debug(`syncAiSwitch in batch publish => ${formData.useAi}`)
 }
 
+const syncPublishTitle = (val: string) => {
+  formData.siyuanPost.title = val
+  logger.debug("syncPublishTitle in batch publish")
+}
+
 const syncEditMode = async (val: PageEditMode) => {
   formData.editType = val
   logger.debug("syncEditMode in batch publish")
@@ -346,6 +352,13 @@ onMounted(async () => {
         <!-- 表单数据 -->
         <div class="publish-form">
           <el-form label-width="100px">
+            <el-alert
+                v-if="formData.useAi"
+                class="top-tip"
+                :title="t('category.ai.enabled')"
+                type="success"
+                :closable="false"
+            />
             <!-- 编辑模式选择 -->
             <edit-mode-select v-model:edit-type="formData.editType" @emitSyncEditMode="syncEditMode" />
 
@@ -361,11 +374,13 @@ onMounted(async () => {
             />
             <div v-else class="normal-mode">
               <!-- 文章标题 -->
-              <div class="form-post-title">
-                <el-form-item :label="t('main.title')">
-                  <el-input v-model="formData.siyuanPost.title" />
-                </el-form-item>
-              </div>
+              <publish-title
+                v-model:use-ai="formData.useAi"
+                v-model="formData.siyuanPost.title"
+                @emitSyncPublishTitle="syncPublishTitle"
+                v-model:md="formData.siyuanPost.markdown"
+                v-model:html="formData.siyuanPost.html"
+              />
 
               <!-- 分发模式 -->
               <div class="distri-type">
@@ -380,7 +395,9 @@ onMounted(async () => {
 
               <div v-if="formData.editType === PageEditMode.EditMode_complex" class="complex-mode">
                 <!-- AI开关 -->
+                <!--
                 <ai-switch v-if="formData.useAi" v-model:use-ai="formData.useAi" @emitSyncAiSwitch="syncAiSwitch" />
+                -->
 
                 <!-- 别名 -->
                 <el-form-item :label="t('main.slug')">
@@ -392,7 +409,8 @@ onMounted(async () => {
                   v-model:use-ai="formData.useAi"
                   v-model:page-id="id"
                   v-model:desc="formData.siyuanPost.shortDesc"
-                  v-model:content="formData.siyuanPost.html"
+                  v-model:md="formData.siyuanPost.markdown"
+                  v-model:html="formData.siyuanPost.html"
                   @emitSyncDesc="syncDesc"
                 />
 
@@ -401,12 +419,19 @@ onMounted(async () => {
                   v-model:use-ai="formData.useAi"
                   v-model:page-id="id"
                   v-model:tags="formData.siyuanPost.mt_keywords"
-                  v-model:content="formData.siyuanPost.html"
+                  v-model:md="formData.siyuanPost.markdown"
+                  v-model:html="formData.siyuanPost.html"
                   @emitSyncTags="syncTags"
                 />
 
                 <!-- 公共分类 -->
-                <common-categories v-model:cates="formData.siyuanPost.categories" @emitSyncCates="syncCates" />
+                <common-categories
+                  v-model:use-ai="formData.useAi"
+                  v-model:cates="formData.siyuanPost.categories"
+                  @emitSyncCates="syncCates"
+                  v-model:md="formData.siyuanPost.markdown"
+                  v-model:html="formData.siyuanPost.html"
+                />
 
                 <!-- 发布时间 -->
                 <publish-time v-model="formData.siyuanPost" @emitSyncPublishTime="syncPublishTime" />

diff --git a/src/components/publish/SinglePublishDoPublish.vue b/src/components/publish/SinglePublishDoPublish.vue
@@ -50,6 +50,7 @@ import { ICategoryConfig } from "~/src/types/ICategoryConfig.ts"
 import PublishKnowledgeSpace from "~/src/components/publish/form/PublishKnowledgeSpace.vue"
 import { SiyuanAttr } from "zhi-siyuan-api"
 import Adaptors from "~/src/adaptors"
+import PublishTitle from "~/src/components/publish/form/PublishTitle.vue"
 
 const logger = createAppLogger("single-publish-do-publish")
 
@@ -275,6 +276,11 @@ const syncAiSwitch = (val: boolean) => {
   logger.debug(`syncAiSwitch in single publish => ${formData.useAi}`)
 }
 
+const syncPublishTitle = (val: string) => {
+  formData.mergedPost.title = val
+  logger.debug("syncPublishTitle in single publish")
+}
+
 const syncDesc = (val: string) => {
   formData.mergedPost.shortDesc = val
   logger.debug("syncDesc in single publish")
@@ -396,6 +402,13 @@ onMounted(async () => {
     <el-skeleton class="placeholder" v-if="!formData.isInit" :rows="5" animated />
     <div v-else id="batch-publish-index">
       <el-alert class="top-tip" :title="topTitle" type="info" :closable="false" />
+      <el-alert
+        v-if="formData.useAi"
+        class="top-tip"
+        :title="t('category.ai.enabled')"
+        type="success"
+        :closable="false"
+      />
       <el-container>
         <el-main>
           <!-- 表单数据 -->
@@ -419,11 +432,13 @@ onMounted(async () => {
               />
               <div v-else class="normal-mode">
                 <!-- 文章标题 -->
-                <div class="form-post-title">
-                  <el-form-item :label="t('main.title')">
-                    <el-input v-model="formData.mergedPost.title" />
-                  </el-form-item>
-                </div>
+                <publish-title
+                  v-model:use-ai="formData.useAi"
+                  v-model="formData.mergedPost.title"
+                  @emitSyncPublishTitle="syncPublishTitle"
+                  v-model:md="formData.mergedPost.markdown"
+                  v-model:html="formData.mergedPost.html"
+                />
 
                 <!-- 知识空间 -->
                 <publish-knowledge-space
@@ -436,7 +451,12 @@ onMounted(async () => {
 
                 <div v-if="formData.editType === PageEditMode.EditMode_complex" class="complex-mode">
                   <!-- AI开关 -->
+                  <!--
+                  根据配置正确与否自动开启，不再提供手动设置
+                  -->
+                  <!--
                   <ai-switch v-if="formData.useAi" v-model:use-ai="formData.useAi" @emitSyncAiSwitch="syncAiSwitch" />
+                  -->
 
                   <!-- 别名字段 -->
                   <el-form-item :label="t('main.slug')">
@@ -457,15 +477,19 @@ onMounted(async () => {
                     v-model:use-ai="formData.useAi"
                     v-model:page-id="id"
                     v-model:tags="formData.mergedPost.mt_keywords"
-                    v-model:content="formData.mergedPost.html"
+                    v-model:md="formData.mergedPost.markdown"
+                    v-model:html="formData.mergedPost.html"
                     @emitSyncTags="syncTags"
                   />
 
                   <!-- 分类 -->
                   <publish-categories
+                    v-model:use-ai="formData.useAi"
                     v-model:category-type="formData.publishCfg.cfg.categoryType"
                     v-model:category-config="formData.categoryConfig"
                     v-model:categories="formData.mergedPost.categories"
+                    v-model:md="formData.mergedPost.markdown"
+                    v-model:html="formData.mergedPost.html"
                     @emitSyncCates="syncCates"
                   />
 
@@ -535,4 +559,7 @@ onMounted(async () => {
 .top-tip
   margin-top 10px
   padding-left 0
+.form-item-tip
+  padding 2px 4px
+  margin 0 10px 0 0
 </style>
diff --git a/src/components/publish/form/CommonCategories.vue b/src/components/publish/form/CommonCategories.vue
@@ -27,11 +27,16 @@
 import { createAppLogger } from "~/src/utils/appLogger.ts"
 import { useVueI18n } from "~/src/composables/useVueI18n.ts"
 import { nextTick, reactive, ref } from "vue"
+import { watch } from "vue"
 
 const logger = createAppLogger("common-categories")
 const { t } = useVueI18n()
 
 const props = defineProps({
+  useAi: {
+    type: Boolean,
+    default: false,
+  },
   cates: {
     type: Array,
     default: [],
@@ -41,13 +46,22 @@ const props = defineProps({
 // datas
 const tagRefInput = ref()
 const formData = reactive({
+  isLoading: false,
+  useAi: props.useAi,
   cate: {
     inputValue: "",
     dynamicCates: <string[]>(props.cates.length == 0 ? [] : props.cates),
     inputVisible: false,
   },
 })
 
+watch(
+  () => props.useAi,
+  (newValue) => {
+    formData.useAi = newValue
+  }
+)
+
 const emit = defineEmits(["emitSyncCates"])
 
 const cateMethods = {
@@ -71,6 +85,7 @@ const cateMethods = {
     formData.cate.inputVisible = false
     formData.cate.inputValue = ""
   },
+  fetchCate: async () => {},
 }
 </script>
 
@@ -100,6 +115,17 @@ const cateMethods = {
         {{ t("main.cate.new") }}
       </el-button>
     </el-form-item>
+    <div v-if="formData.useAi">
+      推荐的分类
+      <el-form-item>
+        <el-button size="small" :loading="formData.isLoading" type="primary" @click="cateMethods.fetchCate">
+          {{ formData.isLoading ? t("main.opt.loading") : t("main.auto.fetch.cate") }}
+        </el-button>
+      </el-form-item>
+      <el-form-item>
+        <el-alert :closable="false" :title="t('category.ai.hand')" class="form-item-tip" type="warning" />
+      </el-form-item>
+    </div>
     <el-form-item>
       <el-alert :closable="false" :title="t('category.batch.not.supported')" class="form-item-tip" type="warning" />
     </el-form-item>

diff --git a/src/components/publish/form/PublishCategories.vue b/src/components/publish/form/PublishCategories.vue
@@ -28,10 +28,17 @@ import { CategoryTypeEnum } from "zhi-blog-api"
 import { reactive, toRaw } from "vue"
 import { ICategoryConfig, IMultiCategoriesConfig } from "~/src/types/ICategoryConfig.ts"
 import { createAppLogger } from "~/src/utils/appLogger.ts"
+import { useVueI18n } from "~/src/composables/useVueI18n.ts"
+import { watch } from "vue"
 
 const logger = createAppLogger("publish-categories")
+const { t } = useVueI18n()
 
 const props = defineProps({
+  useAi: {
+    type: Boolean,
+    default: false,
+  },
   categoryType: {
     type: String as () => CategoryTypeEnum,
     default: CategoryTypeEnum.CategoryType_None,
@@ -44,14 +51,33 @@ const props = defineProps({
     type: Array,
     default: <string[]>[],
   },
+  md: {
+    type: String,
+    default: "",
+  },
+  html: {
+    type: String,
+    default: "",
+  },
 })
 
 const formData = reactive({
   categoryType: props.categoryType,
   categoryConfig: props.categoryConfig,
   categories: props.categories,
+  isLoading: false,
+  useAi: props.useAi,
+  md: props.md,
+  html: props.html,
 })
 
+watch(
+  () => props.useAi,
+  (newValue) => {
+    formData.useAi = newValue
+  }
+)
+
 // emits
 const emit = defineEmits(["emitSyncCates"])
 
@@ -63,15 +89,40 @@ const syncPubCates = (cates: string[]) => {
   formData.categories = cates
   emit("emitSyncCates", cates)
 }
+
+const fetchCate = () => {}
 </script>
 
 <template>
-  <div v-if="formData.categoryType === CategoryTypeEnum.CategoryType_Multi">
-    <multi-categories
-      v-model:category-config="formData.categoryConfig as IMultiCategoriesConfig"
-      v-model:categories="formData.categories"
-      @emitSyncMultiCates="syncPubCates"
-    />
+  <div class="category-box">
+    <div v-if="formData.categoryType === CategoryTypeEnum.CategoryType_Multi">
+      <multi-categories
+        v-model:category-config="formData.categoryConfig as IMultiCategoriesConfig"
+        v-model:categories="formData.categories"
+        @emitSyncMultiCates="syncPubCates"
+      />
+    </div>
+    <div v-else></div>
+    <div v-if="formData.useAi">
+      推荐的分类
+      <el-form-item>
+        <el-button size="small" :loading="formData.isLoading" type="primary" @click="fetchCate">
+          {{ formData.isLoading ? t("main.opt.loading") : t("main.auto.fetch.cate") }}
+        </el-button>
+      </el-form-item>
+      <el-form-item>
+        <el-alert :closable="false" :title="t('category.ai.hand')" class="form-item-tip" type="warning" />
+      </el-form-item>
+      <div class="form-item-bottom"></div>
+    </div>
   </div>
-  <div v-else></div>
 </template>
+
+<style lang="stylus" scoped>
+.form-item-tip
+  padding 2px 4px
+  margin 0 10px 0 0
+
+.form-item-bottom
+  margin-bottom 16px
+</style>
diff --git a/src/components/publish/form/PublishDescription.vue b/src/components/publish/form/PublishDescription.vue
@@ -46,7 +46,11 @@ const props = defineProps({
     type: String,
     default: "",
   },
-  content: {
+  md: {
+    type: String,
+    default: "",
+  },
+  html: {
     type: String,
     default: "",
   },
@@ -58,7 +62,8 @@ const formData = reactive({
   useAi: props.useAi,
   pageId: props.pageId,
   desc: props.desc,
-  html: props.content,
+  md: props.md,
+  html: props.html,
 })
 
 // 对于未强制刷新组件的情况下需要watch或者computed