mirror of
https://github.com/201206030/novel-front-web.git
synced 2025-04-27 07:50:50 +00:00
Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
7004f55fc9 | ||
|
|
a59704ae42 |
17
README.md
17
README.md
@ -1,14 +1,10 @@
|
||||
[]( 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,9 +28,9 @@ 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`配置属性开启。**
|
||||
@ -42,8 +38,9 @@ novel 是一套基于时下**最新** Java 技术栈 Spring Boot 3 + Vue 3 开
|
||||
## 后端技术选型
|
||||
|
||||
| 技术 | 版本 | 说明 | 官网 | 学习 |
|
||||
|---------------------|:--------------:|---------------------| --------------------------------------- |:-----------------------------------------------------------------------------------------------------------------------------:|
|
||||
| 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) |
|
||||
| Spring AI | 1.0.0-SNAPSHOT | Spring 官方 AI 框架 | [进入](https://spring.io/projects/spring-ai) | [进入](https://docs.spring.io/spring-ai/reference/) |
|
||||
| MyBatis | 3.5.9 | ORM 框架 | [进入](http://www.mybatis.org) | [进入](https://mybatis.org/mybatis-3/zh/index.html) |
|
||||
| MyBatis-Plus | 3.5.3 | MyBatis 增强工具 | [进入](https://baomidou.com/) | [进入](https://baomidou.com/pages/24112f/) |
|
||||
| JJWT | 0.11.5 | JWT 登录支持 | [进入](https://github.com/jwtk/jjwt) | - |
|
||||
@ -52,14 +49,14 @@ novel 是一套基于时下**最新** Java 技术栈 Spring Boot 3 + Vue 3 开
|
||||
| Redis | 7.0 | 分布式缓存支持 | [进入](https://redis.io) | [进入](https://redis.io/docs) |
|
||||
| Redisson | 3.17.4 | 分布式锁实现 | [进入](https://github.com/redisson/redisson) | [进入](https://github.com/redisson/redisson/wiki/%E7%9B%AE%E5%BD%95) |
|
||||
| MySQL | 8.0 | 数据库服务 | [进入](https://www.mysql.com) | [进入](https://docs.oracle.com/en-us/iaas/mysql-database/doc/getting-started.html) |
|
||||
| ShardingSphere-JDBC | 5.1.1 | 数据库分库分表支持 | [进入](https://shardingsphere.apache.org) | [进入](https://shardingsphere.apache.org/document/5.1.1/cn/overview) |
|
||||
| ShardingSphere-JDBC | 5.5.1 | 数据库分库分表支持 | [进入](https://shardingsphere.apache.org) | [进入](https://shardingsphere.apache.org/document/5.1.1/cn/overview) |
|
||||
| Elasticsearch | 8.2.0 | 搜索引擎服务 | [进入](https://www.elastic.co) | [进入](https://www.elastic.co/guide/en/elasticsearch/reference/current/index.html) |
|
||||
| RabbitMQ | 3.10.2 | 开源消息中间件 | [进入](https://www.rabbitmq.com) | [进入](https://www.rabbitmq.com/tutorials/tutorial-one-java.html) |
|
||||
| XXL-JOB | 2.3.1 | 分布式任务调度平台 | [进入](https://www.xuxueli.com/xxl-job) | [进入](https://www.xuxueli.com/xxl-job) |
|
||||
| Sentinel | 1.8.4 | 流量控制组件 | [进入](https://github.com/alibaba/Sentinel) | [进入](https://github.com/alibaba/Sentinel/wiki/%E4%B8%BB%E9%A1%B5) |
|
||||
| Springdoc-openapi | 2.0.0 | Swagger 3 接口文档自动生成 | [进入](https://github.com/springdoc/springdoc-openapi) | [进入](https://springdoc.org/) |
|
||||
| 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) |
|
||||
| Undertow | 2.2.17.Final | Java 开发的高性能 Web 服务器 | [进入](https://undertow.io) | [进入](https://undertow.io/documentation.html) |
|
||||
| Tomcat | 10.1.24 | Spring Boot 默认内嵌 Web 容器 | [进入](https://tomcat.apache.org) | [进入](https://tomcat.apache.org/tomcat-10.1-doc/index.html) |
|
||||
| Docker | - | 应用容器引擎 | [进入](https://www.docker.com/) | - |
|
||||
| Jenkins | - | 自动化部署工具 | [进入](https://github.com/jenkinsci/jenkins) | - |
|
||||
| Sonarqube | - | 代码质量控制 | [进入](https://www.sonarqube.org/) | - |
|
||||
|
||||
@ -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}`);
|
||||
}
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -13,3 +14,5 @@ app.use(ElementPlus)
|
||||
app.use(router)
|
||||
|
||||
app.mount('#app')
|
||||
|
||||
app.component('Loading', Loading)
|
||||
|
||||
@ -34,21 +34,97 @@
|
||||
</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
|
||||
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 v-model="chapter.isVip" type="radio" name="isVip" value="1" />收费
|
||||
<input
|
||||
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">
|
||||
@ -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 { 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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user