Deroino
81b71d023d
- Add isDraft parameter to TencentVideo class to control publishing behavior - Modify click_publish method to click "保存草稿" instead of "发表" when isDraft is true - Update post_video_tencent function to accept and pass is_draft parameter - Add is_draft parameter to /postVideo API endpoint to receive frontend data - Add "视频号上传草稿" checkbox in frontend that appears only for video channel platform - Update defaultTabInit to include isDraft property with default value false - Include isDraft in publishData sent to backend API - Implement proper URL checking for draft vs publish success confirmation The new functionality allows users to save WeChat Channel videos as drafts instead of immediately publishing them when the checkbox is selected.
Vue3 + Vite 项目
一个基于 Vue3、Vite、Element Plus、Pinia、Vue Router 和 Axios 的现代化前端项目模板。
🚀 特性
- ⚡️ Vite - 极速的构建工具
- 🖖 Vue 3 - 渐进式 JavaScript 框架
- 🎨 Element Plus - 基于 Vue 3 的组件库
- 🗂 Vue Router - 官方路由管理器（WebHash 模式）
- 📦 Pinia - 新一代状态管理
- 🔗 Axios - HTTP 请求库（已封装）
- 🎯 Sass - CSS 预处理器
- 📁 规范化目录结构 - views 存放页面，components 存放组件
- 🔧 完整配置 - 包含开发和生产环境配置
📦 安装
# 安装依赖
npm install
# 启动开发服务器
npm run dev
# 构建生产版本
npm run build
# 预览生产构建
npm run preview
📁 项目结构
src/
├── api/ # API 接口
│ ├── index.js # API 统一导出
│ └── user.js # 用户相关 API
├── components/ # 公共组件
│ └── HelloWorld.vue # 示例组件
├── router/ # 路由配置
│ └── index.js # 路由主文件
├── stores/ # 状态管理
│ ├── index.js # Pinia 配置
│ └── user.js # 用户状态
├── styles/ # 样式文件
│ ├── index.scss # 主样式文件
│ ├── reset.scss # 重置样式
│ └── variables.scss # 样式变量
├── utils/ # 工具函数
│ └── request.js # HTTP 请求封装
├── views/ # 页面组件
│ ├── Home.vue # 首页
│ └── About.vue # 关于页面
├── App.vue # 根组件
└── main.js # 入口文件
🔧 配置说明
环境变量
.env- 通用环境变量.env.development- 开发环境变量.env.production- 生产环境变量
路由配置
项目使用 Vue Router 4，配置为 WebHash 模式，路由文件位于 src/router/index.js。
状态管理
使用 Pinia 进行状态管理，store 文件位于 src/stores/ 目录。
HTTP 请求
Axios 已经过封装，包含：
- 请求/响应拦截器
- 错误处理
- Token 自动添加
- 统一的响应格式处理
使用方式：
import { http } from '@/utils/request'
// GET 请求
const data = await http.get('/api/users')
// POST 请求
const result = await http.post('/api/users', { name: 'John' })
样式系统
- 使用 Sass 作为 CSS 预处理器
- 已删除所有浏览器默认样式
- 提供了完整的样式变量和工具类
- 支持 Element Plus 主题定制
🎨 组件库
项目集成了 Element Plus，所有组件都可以直接使用：
<template>
<el-button type="primary">按钮</el-button>
<el-input v-model="input" placeholder="请输入内容"></el-input>
</template>
📝 开发规范
- 页面组件 放在
src/views/目录 - 公共组件 放在
src/components/目录 - 使用 setup 语法糖 编写组件
- 样式使用 Sass 并遵循 BEM 命名规范
- API 请求 统一放在
src/api/目录 - 状态管理 按模块划分，放在
src/stores/目录
🚀 部署
# 构建生产版本
npm run build
# 构建完成后，dist 目录包含所有静态文件
# 可以部署到任何静态文件服务器
📄 许可证
MIT License