Update README.md

README.md

@@ -1,14 +1,10 @@
 [![index]( https://youdoc.github.io/img/tencent.jpg )]( https://cloud.tencent.com/act/cps/redirect?redirect=2446&cps_key=736e609d66e0ac4e57813316cec6fd0b&from=console )
 
 <p align="center">
-    <a href='https://docs.oracle.com/en/java/javase/17'><img alt="Java 17" src="https://img.shields.io/badge/Java%2017-%234479A1.svg?logo=data:image/png;base64,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"></a>
-    <a href='https://docs.spring.io/spring-boot/docs/3.0.0-SNAPSHOT/reference/html'><img alt="Spring Boot 3" src="https://img.shields.io/badge/Spring%20Boot%203-%23000000.svg?logo=springboot"></a>
-    <a href='https://staging-cn.vuejs.org'><img alt="Vue 3" src="https://img.shields.io/badge/Vue%203%20-%232b3847.svg?logo=vue.js"></a><br/>
     <a href='https://github.com/201206030/novel'><img alt="Github stars" src="https://img.shields.io/github/stars/201206030/novel?logo=github"></a>
     <a href='https://github.com/201206030/novel'><img alt="Github forks" src="https://img.shields.io/github/forks/201206030/novel?logo=github"></a>
     <a href='https://gitee.com/novel_dev_team/novel'><img alt="Gitee stars" src="https://gitee.com/novel_dev_team/novel/badge/star.svg?theme=gitee"></a>
     <a href='https://gitee.com/novel_dev_team/novel'><img alt="Gitee forks" src="https://gitee.com/novel_dev_team/novel/badge/fork.svg?theme=gitee"></a>
-    <a href="https://github.com/201206030/novel"><img src="https://visitor-badge.glitch.me/badge?page_id=201206030.novel" alt="visitors"></a>
 </p>
 
 ## 项目简介
@@ -32,37 +28,38 @@ novel 是一套基于时下**最新** Java 技术栈 Spring Boot 3 + Vue 3 开
 - Elasticsearch 8.2.0（可选）
 - RabbitMQ 3.10.2（可选）
 - XXL-JOB 2.3.1（可选）
-- JDK 17
+- JDK 21
 - Maven 3.8
-- IntelliJ IDEA 2021.3（可选）
+- IntelliJ IDEA（可选）
 - Node 16.14
 
 **注：Elasticsearch、RabbitMQ 和 XXL-JOB 默认关闭，可通过 application.yml 配置文件中相应的`enable`配置属性开启。**
 
 ## 后端技术选型
 
-| 技术                  |       版本       | 说明                  | 官网                                |                                                              学习                                                               |
+| 技术                  |      版本      | 说明                      | 官网                              |                                                            学习                                                            |
-|---------------------|:--------------:|---------------------| --------------------------------------- |:-----------------------------------------------------------------------------------------------------------------------------:|
+|---------------------|:------------:|-------------------------| ------------------------------------ |:------------------------------------------------------------------------------------------------------------------------:|
-| Spring Boot         | 3.0.0 | 容器 + MVC 框架         | [进入](https://spring.io/projects/spring-boot)  |                              [进入](https://docs.spring.io/spring-boot/docs/3.0.0/reference/html)                               |
+| Spring Boot         |    3.3.0     | 容器 + MVC 框架             | [进入](https://spring.io/projects/spring-boot) |                            [进入](https://docs.spring.io/spring-boot/docs/3.0.0/reference/html)                            |
-| MyBatis             |     3.5.9      | ORM 框架              | [进入](http://www.mybatis.org)                  |                                       [进入](https://mybatis.org/mybatis-3/zh/index.html)                                       |
+| Spring AI           |    1.0.0-SNAPSHOT     | Spring 官方 AI 框架         | [进入](https://spring.io/projects/spring-ai) |                                                          [进入](https://docs.spring.io/spring-ai/reference/)                                                          |
-| MyBatis-Plus        |     3.5.3      | MyBatis 增强工具        | [进入](https://baomidou.com/)                   |                                           [进入](https://baomidou.com/pages/24112f/)                                            |
+| MyBatis             |    3.5.9     | ORM 框架                  | [进入](http://www.mybatis.org)               |                                    [进入](https://mybatis.org/mybatis-3/zh/index.html)                                     |
-| JJWT                |     0.11.5     | JWT 登录支持            | [进入](https://github.com/jwtk/jjwt)            |                                                               -                                                               |
+| MyBatis-Plus        |    3.5.3     | MyBatis 增强工具            | [进入](https://baomidou.com/)                |                                         [进入](https://baomidou.com/pages/24112f/)                                         |
-| Lombok              |    1.18.24     | 简化对象封装工具            | [进入](https://github.com/projectlombok/lombok) |                                         [进入](https://projectlombok.org/features/all)                                          |
+| JJWT                |    0.11.5    | JWT 登录支持                | [进入](https://github.com/jwtk/jjwt)         |                                                            -                                                             |
-| Caffeine            |     3.1.0      | 本地缓存支持              | [进入](https://github.com/ben-manes/caffeine)               |                                  [进入](https://github.com/ben-manes/caffeine/wiki/Home-zh-CN)                                  |
+| Lombok              |   1.18.24    | 简化对象封装工具                | [进入](https://github.com/projectlombok/lombok) |                                       [进入](https://projectlombok.org/features/all)                                       |
-| Redis               |      7.0       | 分布式缓存支持             | [进入](https://redis.io)                   |                                                  [进入](https://redis.io/docs)                                                  |
+| Caffeine            |    3.1.0     | 本地缓存支持                  | [进入](https://github.com/ben-manes/caffeine)            |                               [进入](https://github.com/ben-manes/caffeine/wiki/Home-zh-CN)                                |
-| Redisson            |      3.17.4       | 分布式锁实现              | [进入](https://github.com/redisson/redisson)                  |                              [进入](https://github.com/redisson/redisson/wiki/%E7%9B%AE%E5%BD%95)                               |
+| Redis               |     7.0      | 分布式缓存支持                 | [进入](https://redis.io)                |                                               [进入](https://redis.io/docs)                                                |
-| MySQL               |      8.0       | 数据库服务               | [进入](https://www.mysql.com)                  |                       [进入](https://docs.oracle.com/en-us/iaas/mysql-database/doc/getting-started.html)                        |
+| Redisson            |    3.17.4    | 分布式锁实现                  | [进入](https://github.com/redisson/redisson)               |                            [进入](https://github.com/redisson/redisson/wiki/%E7%9B%AE%E5%BD%95)                            |
-| ShardingSphere-JDBC |      5.1.1       | 数据库分库分表支持           | [进入](https://shardingsphere.apache.org)                  |                              [进入](https://shardingsphere.apache.org/document/5.1.1/cn/overview)                               |
+| MySQL               |     8.0      | 数据库服务                   | [进入](https://www.mysql.com)               |                     [进入](https://docs.oracle.com/en-us/iaas/mysql-database/doc/getting-started.html)                     |
-| Elasticsearch       |     8.2.0      | 搜索引擎服务              | [进入](https://www.elastic.co)                  |                       [进入](https://www.elastic.co/guide/en/elasticsearch/reference/current/index.html)                        |
+| ShardingSphere-JDBC |    5.5.1     | 数据库分库分表支持               | [进入](https://shardingsphere.apache.org)               |                            [进入](https://shardingsphere.apache.org/document/5.1.1/cn/overview)                            |
-| RabbitMQ            |     3.10.2     | 开源消息中间件             | [进入](https://www.rabbitmq.com)                  |                                [进入](https://www.rabbitmq.com/tutorials/tutorial-one-java.html)                                |
+| Elasticsearch       |    8.2.0     | 搜索引擎服务                  | [进入](https://www.elastic.co)               |                     [进入](https://www.elastic.co/guide/en/elasticsearch/reference/current/index.html)                     |
-| XXL-JOB             |     2.3.1      | 分布式任务调度平台           | [进入](https://www.xuxueli.com/xxl-job)                  |                                             [进入](https://www.xuxueli.com/xxl-job)                                             |
+| RabbitMQ            |    3.10.2    | 开源消息中间件                 | [进入](https://www.rabbitmq.com)               |                             [进入](https://www.rabbitmq.com/tutorials/tutorial-one-java.html)                              |
-| Sentinel            |     1.8.4      | 流量控制组件              | [进入](https://github.com/alibaba/Sentinel)                 |                               [进入](https://github.com/alibaba/Sentinel/wiki/%E4%B8%BB%E9%A1%B5)                               |
+| XXL-JOB             |    2.3.1     | 分布式任务调度平台               | [进入](https://www.xuxueli.com/xxl-job)               |                                          [进入](https://www.xuxueli.com/xxl-job)                                           |
-| Springdoc-openapi   |     2.0.0      | Swagger 3 接口文档自动生成  | [进入](https://github.com/springdoc/springdoc-openapi)                 |                                                 [进入](https://springdoc.org/)                                                  |
+| Sentinel            |    1.8.4     | 流量控制组件                  | [进入](https://github.com/alibaba/Sentinel)              |                            [进入](https://github.com/alibaba/Sentinel/wiki/%E4%B8%BB%E9%A1%B5)                             |
-| Spring Boot Admin   |     3.0.0-M1      | 应用管理和监控             | [进入](https://github.com/codecentric/spring-boot-admin)                 |                                [进入](https://codecentric.github.io/spring-boot-admin/3.0.0-M1)                                 |
+| Springdoc-openapi   |    2.0.0     | Swagger 3 接口文档自动生成      | [进入](https://github.com/springdoc/springdoc-openapi)              |                                               [进入](https://springdoc.org/)                                               |
-| Undertow            |  2.2.17.Final  | Java 开发的高性能 Web 服务器 | [进入](https://undertow.io) |                                         [进入](https://undertow.io/documentation.html)                                          |
+| Spring Boot Admin   |   3.0.0-M1   | 应用管理和监控                 | [进入](https://github.com/codecentric/spring-boot-admin)              |                              [进入](https://codecentric.github.io/spring-boot-admin/3.0.0-M1)                              |
-| Docker              |       -        | 应用容器引擎              | [进入](https://www.docker.com/)                |                                                               -                                                               |
+| Tomcat              | 10.1.24 | Spring Boot 默认内嵌 Web 容器 | [进入](https://tomcat.apache.org) |                                       [进入](https://tomcat.apache.org/tomcat-10.1-doc/index.html)                                       |
-| Jenkins             |       -        | 自动化部署工具             | [进入](https://github.com/jenkinsci/jenkins)   |                                                               -                                                               |
+| Docker              |      -       | 应用容器引擎                  | [进入](https://www.docker.com/)             |                                                            -                                                             |
-| Sonarqube           |       -        | 代码质量控制              | [进入](https://www.sonarqube.org/)             |                                                               -                                                               |
+| Jenkins             |      -       | 自动化部署工具                 | [进入](https://github.com/jenkinsci/jenkins) |                                                            -                                                             |
+| Sonarqube           |      -       | 代码质量控制                  | [进入](https://www.sonarqube.org/)          |                                                            -                                                             |
 
 **注：更多热门新技术待集成。**
 

src/api/author.js

@@ -24,6 +24,19 @@ export function publishChapter(bookId,params) {
     return request.post(`/author/book/chapter/${bookId}`, params);
 }
 
+export function aiGenerate(action,params) {
+    const formData = new FormData();
+    Object.keys(params).forEach(key => {
+        formData.append(key, params[key]);
+    });
+    return request.post(`/author/ai/${action}`, formData, {
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded'
+        },
+        timeout: 60000
+      });
+}
+
 export function deleteChapter(id) {
     return request.delete(`/author/book/chapter/${id}`);
 }

src/main.js

@@ -5,6 +5,7 @@ import App from './App.vue'
 import router from '@/router'
 import '@/assets/styles/base.css'
 import '@/assets/styles/main.css'
+import { Loading } from '@element-plus/icons-vue'
 
 const app = createApp(App)
 
@@ -12,4 +13,6 @@ app.use(ElementPlus)
 
 app.use(router)
 
-app.mount('#app')
+app.mount('#app')
+
+app.component('Loading', Loading)

src/views/author/ChapterAdd.vue

@@ -25,7 +25,7 @@
                   <b>章节名：</b>
                   <li>
                     <input
-                    v-model="chapter.chapterName"
+                      v-model="chapter.chapterName"
                       type="text"
                       id="bookIndex"
                       name="bookIndex"
@@ -34,26 +34,102 @@
                   </li>
                   <b>章节内容：</b>
                   <li id="contentLi">
+                    <div class="ai-toolbar">
+                      <el-button
+                        v-for="btn in aiButtons"
+                        :key="btn.action"
+                        :type="btn.type"
+                        :disabled="!hasSelection || generating"
+                        @click="openDialog(btn.action)"
+                        size="small"
+                      >
+                        {{ btn.label }}
+                        <el-icon v-if="generating" class="is-loading">
+                          <Loading />
+                        </el-icon>
+                      </el-button>
+
+                      <!-- 参数输入对话框 -->
+                      <el-dialog
+                        v-model="dialogVisible"
+                        :title="dialogTitle"
+                        width="30%"
+                      >
+                        <div
+                          v-if="
+                            currentAction === 'expand' ||
+                            currentAction === 'condense'
+                          "
+                        >
+                          <el-input
+                            v-model.number="ratio"
+                            type="number"
+                            :placeholder="`请输入${
+                              currentAction === 'expand' ? '扩写' : '缩写'
+                            }比例（1-200%）`"
+                            min="1"
+                            max="200"
+                          >
+                            <template #append>%</template>
+                          </el-input>
+                        </div>
+
+                        <div v-if="currentAction === 'continue'">
+                          <el-input
+                            v-model.number="length"
+                            type="number"
+                            placeholder="请输入续写长度（50-1000字）"
+                            min="50"
+                            max="1000"
+                          >
+                            <template #append>字</template>
+                          </el-input>
+                        </div>
+
+                        <template #footer>
+                          <el-button @click="dialogVisible = false"
+                            >取消</el-button
+                          >
+                          <el-button type="primary" @click="confirmParams"
+                            >确定</el-button
+                          >
+                        </template>
+                      </el-dialog>
+                    </div>
                     <textarea
-                    v-model="chapter.chapterContent"
+                      ref="editor"
+                      v-model="chapter.chapterContent"
                       name="bookContent"
                       rows="30"
                       cols="80"
                       id="bookContent"
                       class="textarea"
+                      @mouseup="checkSelection"
+                      @keyup="checkSelection"
                     ></textarea>
                   </li>
                   <br />
 
                   <b>是否收费：</b>
                   <li>
-                    <input v-model="chapter.isVip" type="radio" name="isVip" value="0" checked="" />免费
+                    <input
-                    <input v-model="chapter.isVip" type="radio" name="isVip" value="1" />收费
+                      v-model="chapter.isVip"
+                      type="radio"
+                      name="isVip"
+                      value="0"
+                      checked=""
+                    />免费
+                    <input
+                      v-model="chapter.isVip"
+                      type="radio"
+                      name="isVip"
+                      value="1"
+                    />收费
                   </li>
 
                   <li style="margin-top: 10px">
                     <input
-                    @click="saveChapter"
+                      @click="saveChapter"
                       type="button"
                       name="btnRegister"
                       value="提交"
@@ -104,12 +180,11 @@
 
 <script>
 import "@/assets/styles/book.css";
-import { reactive, toRefs, onMounted, ref } from "vue";
+import { reactive, toRefs, computed, ref } from "vue";
 import { useRouter, useRoute } from "vue-router";
-import { ElMessage } from "element-plus";
+import { ElMessage} from "element-plus";
-import { publishChapter } from "@/api/author";
+import { publishChapter, aiGenerate } from "@/api/author";
 import AuthorHeader from "@/components/author/Header.vue";
-import picUpload from "@/assets/images/pic_upload.png";
 export default {
   name: "authorChapterAdd",
   components: {
@@ -118,12 +193,145 @@ export default {
   setup() {
     const route = useRoute();
     const router = useRouter();
+    const editor = ref(null);
 
     const state = reactive({
       bookId: route.query.id,
       chapter: { chapterName: "", chapterContent: "", isVip: 0 },
+      hasSelection: false,
+      generating: false,
+      selectedText: "",
+      aiButtons: [
+        { label: "AI扩写", action: "expand", type: "primary" },
+        { label: "AI缩写", action: "condense", type: "success" },
+        { label: "AI续写", action: "continue", type: "warning" },
+        { label: "AI润色", action: "polish", type: "danger" },
+      ],
+      dialogVisible: false,
+      currentAction: '',
+      ratio: 30,    // 默认扩写/缩写比例
+      length: 200,  // 默认续写长度
     });
 
+    const dialogTitle = computed(() => {
+      const map = {
+        expand: '扩写设置',
+        condense: '缩写设置',
+        continue: '续写设置',
+        polish: '润色设置'
+      }
+      return map[state.currentAction]
+    })
+
+    const openDialog = (action) => {
+      state.currentAction = action
+      // 润色不需要参数
+      if (action === 'polish') {
+        handleAI(action)
+      } else {
+        state.dialogVisible = true
+      }
+    }
+
+    const validateParams = () => {
+      if (state.currentAction === 'expand') {
+        if (!state.ratio || state.ratio < 110 || state.ratio > 200) {
+          ElMessage.error('请输入110-200%之间的比例')
+          return false
+        }
+      }
+      if (state.currentAction === 'condense') {
+        if (!state.ratio || state.ratio < 1 || state.ratio > 99) {
+          ElMessage.error('请输入1-99%之间的比例')
+          return false
+        }
+      }
+      if (state.currentAction === 'continue') {
+        if (!state.length || state.length < 50 || state.length > 1000) {
+          ElMessage.error('请输入50-1000字之间的长度')
+          return false
+        }
+      }
+      return true
+    }
+
+    const confirmParams = async () => {
+      if (!validateParams()) return
+      
+      state.dialogVisible = false
+      await handleAI(state.currentAction)
+    }
+
+    const getActionName = (action) => {
+      return {
+        expand: `扩写（${state.ratio}%）`,
+        condense: `缩写（${state.ratio}%）`,
+        continue: `续写（${state.length}字）`,
+        polish: '润色'
+      }[action]
+    }
+
+
+    const checkSelection = () => {
+      const textarea = editor.value;
+      if (textarea) {
+        const start = textarea.selectionStart;
+        const end = textarea.selectionEnd;
+        state.hasSelection = start !== end;
+        if (state.hasSelection) {
+          state.selectedText = textarea.value.substring(start, end);
+        }
+      }
+    };
+
+    const typewriterEffect = (text) => {
+      return new Promise((resolve) => {
+        let index = 0;
+        const typing = setInterval(() => {
+          if (index < text.length) {
+            state.chapter.chapterContent += text.charAt(index);
+            index++;
+            // 自动滚动到底部
+            editor.scrollTop = editor.scrollHeight;
+          } else {
+            clearInterval(typing);
+            resolve();
+          }
+        }, 20);
+      });
+    };
+
+    const handleAI = async (action) => {    
+
+      try {
+        state.generating = true
+        
+        const params = {
+          text: state.selectedText
+        }
+
+        // 添加参数
+        if (action === 'expand' || action === 'condense') {
+          params.ratio = state.ratio
+        }
+        if (action === 'continue') {
+          params.length = state.length
+        }
+
+        const response = await aiGenerate(action,params)
+
+        // 在原有内容后追加生成内容，并实现打字效果
+        const newContent = `\n\n【AI生成内容】${response.data}`;
+        state.hasSelection = false;
+        state.selectedText = '';
+        await typewriterEffect(newContent);
+      } catch (error) {
+        ElMessage.error("AI生成失败：" + error.message);
+      } finally {
+        state.generating = false;
+      }
+    };
+
     const saveChapter = async () => {
       console.log("sate=========", state.chapter);
       if (!state.chapter.chapterName) {
@@ -141,12 +349,19 @@ export default {
       }
 
       await publishChapter(state.bookId, state.chapter);
-      router.push({ name: "authorChapterList", query:{'id':state.bookId} });
+      router.push({ name: "authorChapterList", query: { id: state.bookId } });
     };
 
     return {
       ...toRefs(state),
+      editor,
+      checkSelection,
+      handleAI,
       saveChapter,
+      dialogTitle,
+      openDialog,
+      confirmParams,
+      getActionName
     };
   },
 };
@@ -744,4 +959,28 @@ a.redBtn:hover {
   padding: 10px;
   line-height: 1.8;
 }
+
+/* 新增AI工具栏样式 */
+.ai-toolbar {
+  margin-bottom: 10px;
+  width: 500px;
+}
+.ai-toolbar .el-button {
+  margin-right: 10px;
+}
+
+.textarea {
+  position: relative;
+  font-family: "Microsoft YaHei", sans-serif;
+  line-height: 1.6;
+  padding: 10px;
+}
+
+.ai-toolbar .el-input {
+  margin-bottom: 15px;
+}
+
+:deep(.el-dialog__body) {
+  padding: 20px;
+}
 </style>