Skip to content

Harukaon/zizai-web

Repository files navigation

字在AI - AI写作助手 Web应用

字在AI Logo

专业的AI写作助手 | 智能写作工具 | 文章小说创作助手

License Vue Vite Tauri

📖 项目简介

字在AI是一款专业的AI写作助手应用,提供智能写作服务,帮助用户高效创作优质内容。无论是文章写作、小说创作还是内容优化,都能轻松应对。

✨ 核心功能

  • 🎯 AI智能写作 - 支持智能续写、灵感生成、内容优化
  • 📚 小说创作管理 - 完整的小说项目管理,支持章节管理、大纲规划
  • 👥 角色管理 - 智能角色创建与管理,维护角色一致性
  • 💬 智能对话 - 基于上下文的AI对话,支持历史记录
  • 📊 内容索引 - 章节内容智能索引,快速检索
  • 🎨 富文本编辑器 - 集成多种编辑器(TipTap、Milkdown、Monaco Editor)
  • 🌓 深色模式 - 支持明暗主题切换
  • 📱 响应式设计 - 适配多种设备尺寸

🛠️ 技术栈

前端框架

  • Vue 3.5.13 - 渐进式JavaScript框架
  • Vite 6.0.3 - 下一代前端构建工具
  • Vue Router 4.5.0 - 官方路由管理器
  • Pinia 2.3.1 - Vue状态管理库

UI组件库

  • Ant Design Vue 4.2.6 - 企业级UI组件库
  • Element Plus 2.9.4 - 桌面端组件库(按需导入)
  • Tailwind CSS 3.4.17 - 原子化CSS框架

富文本编辑器

  • TipTap 2.4.0 - 无头编辑器框架
  • Milkdown 7.15.1 - 插件化Markdown编辑器
  • Monaco Editor 0.52.2 - VS Code同款代码编辑器
  • md-editor-v3 5.8.1 - Vue 3 Markdown编辑器

可视化与图表

  • @antv/g6 4.8.25 - 图可视化引擎
  • @vue-flow/core 1.46.0 - 流程图组件
  • Mermaid 11.8.1 - 图表生成工具

桌面应用

  • Tauri 2.7.1 - 轻量级跨平台桌面应用框架

工具库

  • Axios 1.7.9 - HTTP客户端
  • VueUse 13.1.0 - Vue组合式API工具集
  • GSAP 3.13.0 - 动画库
  • date-fns 4.1.0 - 日期处理库
  • uuid 11.1.0 - UUID生成器

📁 项目结构

web-backups/
├── public/                    # 静态资源
├── src/
│   ├── api/                  # API接口封装
│   ├── components/           # 组件目录
│   │   └── Agent/           # AI对话相关组件
│   ├── config/              # 配置文件
│   ├── data/                # 数据文件
│   ├── lib/                 # 第三方库配置
│   ├── router/              # 路由配置
│   ├── stores/              # Pinia状态管理
│   ├── utils/               # 工具函数
│   ├── views/               # 页面组件
│   ├── websocket/           # WebSocket封装
│   ├── App.vue              # 根组件
│   ├── main.js              # 入口文件
│   └── style.css            # 全局样式
├── src-tauri/               # Tauri桌面应用配置
├── prompts/                 # AI提示词模板
├── dist/                    # 构建输出目录
├── api-*.txt                # API接口文档
├── index.html               # HTML模板
├── vite.config.js           # Vite配置
├── tailwind.config.js       # Tailwind配置
├── postcss.config.js        # PostCSS配置
├── package.json             # 项目依赖
└── README.md                # 项目说明

🚀 快速开始

环境要求

  • Node.js >= 16.0.0
  • npm >= 8.0.0 或 pnpm >= 7.0.0

安装依赖

# 使用 npm
npm install

# 或使用 pnpm
pnpm install

开发模式

# Web开发模式
npm run dev

# Tauri桌面应用开发模式
npm run tauri:dev

构建生产版本

# Web构建
npm run build

# Tauri桌面应用构建
npm run tauri:build

预览生产构建

npm run preview

🔧 配置说明

在线预览

你可以直接使用官方服务进行预览和体验:

# API地址
VITE_API_BASE_URL=https://www.wzizai.com

# WebSocket地址
VITE_WS_URL=wss://www.wzizai.com/ws

在线体验: https://www.wzizai.com/

环境变量

项目包含以下环境配置文件:

  • .env - 开发环境配置(已包含在仓库中,用于展示和快速体验)
  • .env.production - 生产环境配置

注意: 本项目的 .env 文件已包含在仓库中,方便其他开发者快速预览和学习使用,无需自行配置后端服务。

Vite配置

  • 端口: 5173
  • 主机: 0.0.0.0(支持局域网访问)
  • 路径别名:
    • @./src
    • @components./src/components
    • @assets./src/assets
    • @views./src/views
    • @utils./src/utils
    • @api./src/api

📡 API接口

项目包含以下API模块的接口文档:

  • 小说和章节管理 (api-小说和章节)

    • 小说类型列表
    • 小说CRUD操作
    • 章节管理
    • 章节内容编辑
  • AI智能功能 (api-关于AI智能.txt)

    • 生成小说基本信息
    • 生成角色信息
    • 智能续写
    • 章节索引
    • 创作灵感生成
    • 对话历史管理
  • 用户系统 (api-登录注册)

    • 用户注册/登录
    • 用户认证
  • 角色管理 (api-角色)

    • 角色创建/编辑/删除
    • 角色属性管理
  • 大纲管理 (api-大纲)

    • 大纲创建/编辑
    • 大纲结构化管理
  • 提示词模块 (api-新版提示词模块.txt)

    • 自定义提示词
    • 提示词模板管理

详细API文档请参考项目中的 api-*.txt 文件。

🔌 WebSocket功能

应用使用WebSocket实现实时通信功能:

  • 实时消息推送 - 接收系统消息和通知
  • 大纲状态更新 - 实时更新章节索引处理状态
  • AI流式输出 - 支持AI内容实时生成
  • 自动重连 - 断线自动重连机制

主要消息类型

  • system_message - 系统消息
  • outline_status - 大纲状态更新
  • message_id_update - 消息ID更新

🎨 主题定制

应用支持明暗两种主题,主题配置存储在 localStorage 中:

// 切换主题
localStorage.setItem('theme', 'dark') // 或 'light'
document.documentElement.classList.toggle('dark')

📝 小说类型

系统支持以下小说类型:

  1. 言情 - 以爱情故事为主线的小说
  2. 玄幻 - 具有虚构世界观和超自然力量的小说
  3. 都市 - 发生在现代都市的故事
  4. 科幻 - 以科学幻想为主题的小说

🔐 安全特性

  • Token认证 - 基于JWT的用户认证
  • 请求频率限制 - 防止接口滥用
  • XSS防护 - 输入内容过滤
  • HTTPS支持 - 支持HTTPS协议
  • 环境变量隔离 - 敏感信息环境变量管理

🌐 SEO优化

  • 完整的meta标签配置
  • Open Graph协议支持
  • Twitter Card支持
  • 结构化数据(JSON-LD)
  • 搜索引擎验证(百度、Google、Bing)
  • 规范链接和多语言支持

📱 PWA支持

应用支持Progressive Web App特性:

  • 可添加到主屏幕
  • 离线缓存(待实现)
  • 应用图标配置

🧩 核心功能实现

1. 编辑器集成

项目集成了多个富文本编辑器,适用于不同场景:

  • TipTap - 主要的章节内容编辑器,支持丰富的扩展
  • Milkdown - Markdown编辑场景
  • Monaco Editor - 代码编辑和高级文本处理
  • md-editor-v3 - Markdown预览和编辑

2. AI写作流程

用户输入 → 创建对话组 → 引用索引(章节/角色) 
→ AI处理 → 流式返回 → 用户接受/拒绝

3. 章节索引系统

章节索引处理状态:

  • PENDING - 待处理
  • PROCESSING - 处理中
  • SUCCESS - 处理成功
  • FAILED - 处理失败
  • ERROR - 服务异常

VIP用户享有优先处理权限。

🤝 使用须知

本项目为个人独立开发,开源用于学习和交流目的。

📋 使用限制

  • 允许: 个人学习、研究、参考代码实现
  • 允许: Fork 项目进行学习和改进
  • 禁止: 二次商业化开发和商业用途
  • 禁止: 未经授权的商业部署

💡 项目定位

本项目旨在展示 AI 写作助手的完整实现方案,包括前端架构、AI集成、实时通信等技术要点,供开发者学习参考。

📄 许可证

本项目采用 仅供学习使用 许可,不允许用于商业目的。

👨‍💻 开发者

本项目由个人独立开发和维护。

🔗 相关链接

📞 联系方式

如有问题、建议或合作意向,请通过以下方式联系:


个人独立开发项目 | 仅供学习交流使用

About

zizaiAI平台前端代码

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors