tci/paper-editor

Public

Code Issues Pull requests Events Packages Insights

main

Branch

首次提交

public
src
.eslintrc.js
.prettierignore
.prettierrc
README.md
package-lock.json
package.json

腾讯云TCI早报编辑器

一个专业的早报内容管理平台，基于React 18构建，提供智能编辑、短链接管理、数据分析和内容发布功能。支持响应式设计，适配桌面端和移动端。

✨ 核心功能

📝 智能编辑器

可视化编辑界面：直观的早报编辑器，支持实时预览
自动日期管理：智能显示当前日期和星期
内容模块化：支持问候语、技术精选、社区活动、冲浪百科等模块
响应式设计：完美适配桌面端和移动端设备
数据持久化：自动保存编辑内容到本地存储

🔗 短链接管理系统

智能短链生成：自动为文章和活动链接生成短链接
元数据提取：自动抓取网页标题、作者、描述等信息
点击统计追踪：实时记录和分析链接点击数据
批量管理：支持批量创建、编辑和删除短链接
一键复制分享：快速复制短链接进行分享
链接预览：支持链接预览和验证功能

📊 数据分析中心

实时统计：实时显示总点击量、今日点击量等关键指标
可视化图表：使用图表展示点击趋势和数据分析
链接性能分析：分析各个链接的点击表现
历史数据追踪：记录和查看历史点击数据
数据导出：支持多种格式的数据导出功能

🎯 内容管理模块

技术精选：管理技术文章链接，自动提取标题和作者信息
社区活动：管理社区活动信息和相关链接
冲浪百科：编辑和管理热门话题和词汇解释
每日问候：个性化问候语编辑和管理
内容预览：实时预览最终发布效果

🚀 快速开始

环境要求

Node.js 16.0+ 或更高版本
npm 7.0+ 或 yarn 1.22+
现代浏览器（Chrome 90+, Firefox 88+, Safari 14+）

安装和运行

克隆项目


git clone <repository-url>
cd bjq

安装依赖


npm install
# 或使用 yarn
yarn install

启动开发服务器


npm start
# 或使用 yarn
yarn start

访问应用

开发环境：http://localhost:3000
网络访问：http://your-ip:3000

生产环境构建


# 构建生产版本
npm run build

# 预览生产构建
npx serve -s build

🌐 部署和伪静态配置

Nginx 配置


server {
    listen 80;
    server_name your-domain.com;
    root /path/to/bjq/build;
    index index.html;

    # 启用 gzip 压缩
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

    # 处理 React Router 路由
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 短链接重定向处理
    location /s/ {
        try_files $uri $uri/ /index.html;
    }

    # 静态资源缓存
    location /static/ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # API 代理（如果需要）
    location /api/ {
        proxy_pass http://your-backend-server;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

Apache .htaccess 配置


RewriteEngine On

# 处理 React Router 路由
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

# 启用压缩
<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>

# 静态资源缓存
<IfModule mod_expires.c>
    ExpiresActive on
    ExpiresByType text/css "access plus 1 year"
    ExpiresByType application/javascript "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType image/jpg "access plus 1 year"
    ExpiresByType image/jpeg "access plus 1 year"
</IfModule>

Docker 部署


# Dockerfile
FROM node:18-alpine as build

WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production

COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]


# 构建和运行 Docker 容器
docker build -t bjq-app .
docker run -p 80:80 bjq-app

📁 项目架构


bjq/
├── public/                     # 静态资源目录
│   ├── index.html             # HTML 模板
│   ├── favicon.svg            # 网站图标
│   └── logo.svg               # Logo 文件
├── src/                       # 源代码目录
│   ├── components/            # React 组件
│   │   ├── App.js            # 主应用组件
│   │   ├── Home.js           # 首页组件（动画背景）
│   │   ├── Editor.js         # 核心编辑器组件
│   │   ├── Preview.js        # 内容预览组件
│   │   ├── ArticleList.js    # 技术文章管理
│   │   ├── communityactivity.js # 社区活动管理
│   │   ├── encyclopedia.js   # 冲浪百科管理
│   │   ├── ClickTracker.js   # 数据分析组件
│   │   ├── ShortLinkManager.js # 短链接管理
│   │   ├── ShortLinkRedirect.js # 短链接重定向
│   │   ├── ResponsiveNav.js  # 响应式导航
│   │   ├── ProtectedRoute.js # 路由保护组件
│   │   └── PasswordModal.js  # 密码验证模态框
│   ├── contexts/              # React Context
│   │   └── AuthContext.js    # 认证上下文
│   ├── services/              # API 服务层
│   │   └── api.js            # API 接口和短链接服务
│   ├── utils/                 # 工具函数
│   │   ├── helpers.js        # 通用辅助函数
│   │   └── dailyLogger.js    # 日志记录工具
│   ├── index.js              # 应用入口文件
│   └── index.css             # 全局样式
├── .eslintrc.js              # ESLint 配置
├── .prettierrc               # Prettier 配置
├── package.json              # 项目依赖配置
└── README.md                 # 项目文档

🛠 技术栈详解

前端框架

React 18.2.0 - 现代化用户界面构建框架
React Router DOM 6.11.0 - 单页应用路由管理
React Query 3.39.3 - 服务器状态管理和数据获取

样式和UI

Styled Components 6.0.0 - CSS-in-JS 样式解决方案
React Icons 4.8.0 - 丰富的图标库
响应式设计 - 移动端优先的设计理念

数据管理

Axios 1.4.0 - HTTP 客户端库
LocalStorage - 本地数据持久化存储
Context API - 全局状态管理

开发工具

ESLint 8.43.0 - 代码质量检查和规范
Prettier 2.8.8 - 代码格式化工具
React Scripts 5.0.1 - 开发构建工具链

🔧 核心组件详解

Editor.js - 主编辑器

功能特性：

模块化内容编辑（问候语、技术精选、社区活动、冲浪百科）
实时预览功能
自动保存机制
响应式布局适配
数据验证和错误处理

主要方法：

handleSave() - 保存编辑内容
handlePreview() - 切换预览模式
updateContent() - 更新内容模块

ArticleList.js - 技术文章管理

功能特性：

URL 自动解析和元数据提取
标题和作者信息自动填充
短链接自动生成
点击量实时统计
批量操作支持

核心功能：

fetchArticleMetadata() - 抓取文章元数据
generateShortLink() - 生成短链接
updateArticle() - 更新文章信息

ClickTracker.js - 数据分析

功能特性：

实时点击统计展示
可视化数据图表
历史数据追踪
性能分析报告
数据导出功能

数据指标：

总点击量统计
今日点击量
链接性能排行
时间趋势分析

ShortLinkManager.js - 短链接管理

功能特性：

短链接批量生成
点击统计追踪
链接管理和编辑
元数据自动提取
链接预览功能

API 接口：

createShortLink() - 创建短链接
getShortLink() - 获取短链接信息
deleteShortLink() - 删除短链接
updateClickCount() - 更新点击统计

ShortLinkRedirect.js - 短链接重定向

功能特性：

短链接解析和重定向
点击统计记录
错误处理和回退
访问日志记录

📊 数据存储方案

LocalStorage 数据结构


// 早报内容数据
'morning_report_data': {
  greeting: string,
  date: string,
  articles: Array<{
    id: number,
    title: string,
    author: string,
    url: string,
    shortLink: object,
    clicks: number
  }>,
  activities: Array<{
    id: number,
    title: string,
    description: string,
    url: string,
    shortLink: object
  }>,
  encyclopedia: {
    term: string,
    description: string
  }
}

// 短链接存储
'shortLinksStorage': {
  links: Map<string, {
    shortId: string,
    originalUrl: string,
    createdAt: string,
    metadata: object
  }>,
  clicks: Map<string, number>
}

// 点击统计数据
'daily_click_logs': Array<{
  date: string,
  clicks: number
}>

🎯 使用指南

1. 编辑早报内容

访问首页，点击"开始编辑早报"
输入每日问候语和选择日期
在"技术精选"模块添加技术文章链接
- 输入文章URL，系统自动抓取标题和作者
- 自动生成短链接并显示点击统计
在"社区活动"模块添加活动信息
- 编辑活动标题和描述
- 添加活动链接
在"冲浪百科"模块编辑热门话题
- 输入话题关键词
- 编写话题解释和描述
使用实时预览功能查看最终效果
保存内容并发布

2. 短链接管理

访问"短链接管理"页面
输入原始URL创建短链接
查看和编辑短链接信息
监控点击统计数据
批量管理和删除链接
复制短链接进行分享

3. 数据分析

访问"数据分析"页面
查看总体统计指标
- 总点击量
- 今日点击量
- 活跃链接数
分析链接性能排行
查看历史趋势图表
导出数据报告

4. 短链接访问

短链接格式：https://your-domain.com/s/{shortId}
自动重定向到原始URL
记录访问统计数据
支持移动端访问

🔄 数据导出功能

支持多种格式的数据导出：

1. 纯文本格式


腾讯云TCI早报 - 2024年1月15日 星期一

早上好！今天是美好的一天...

【技术精选】
1. 文章标题 - 作者名称
   链接：https://example.com
   点击量：123次

【社区活动】
1. 活动标题
   描述：活动详细描述...
   链接：https://example.com

【冲浪百科】
关键词：技术术语
解释：详细解释内容...

2. Markdown 格式


# 腾讯云TCI早报 - 2024年1月15日 星期一

早上好！今天是美好的一天...

## 技术精选

1. [文章标题](https://example.com) - 作者名称  
   点击量：123次

## 社区活动

1. **活动标题**  
   描述：活动详细描述...  
   链接：[查看详情](https://example.com)

## 冲浪百科

**关键词**：技术术语  
**解释**：详细解释内容...

3. JSON 格式


{
  "date": "2024-01-15",
  "greeting": "早上好！今天是美好的一天...",
  "articles": [
    {
      "title": "文章标题",
      "author": "作者名称",
      "url": "https://example.com",
      "clicks": 123
    }
  ],
  "activities": [
    {
      "title": "活动标题",
      "description": "活动详细描述...",
      "url": "https://example.com"
    }
  ],
  "encyclopedia": {
    "term": "技术术语",
    "description": "详细解释内容..."
  }
}

🔒 安全特性

认证和授权

密码保护的编辑功能
基于Context的认证状态管理
路由级别的访问控制
自动登出机制

数据安全

本地数据加密存储
XSS 攻击防护
URL 验证和清理
安全的链接重定向

📱 响应式设计

桌面端 (≥768px)

完整的侧边栏导航
多列布局展示
丰富的交互功能
大屏幕优化的数据展示

移动端 (<768px)

可折叠的汉堡菜单
单列布局适配
触控优化的界面
移动端友好的操作体验

平板端 (768px-1024px)

自适应布局
优化的触控交互
合理的内容密度

🚀 性能优化

前端优化

React 18 并发特性
组件懒加载
图片压缩和优化
代码分割和按需加载
Service Worker 缓存

构建优化

Webpack 打包优化
Tree Shaking 去除无用代码
资源压缩和混淆
静态资源 CDN 加速

🐛 故障排除

常见问题

Q: 短链接无法访问？ A: 检查服务器伪静态配置，确保正确处理 /s/ 路径的重定向。

Q: 数据丢失问题？ A: 检查浏览器 LocalStorage 是否被清理，建议定期导出数据备份。

Q: 移动端显示异常？ A: 确保使用现代浏览器，清除缓存后重新访问。

Q: 编辑器保存失败？ A: 检查浏览器存储权限，确保有足够的存储空间。

调试模式


// 开启调试模式
localStorage.setItem('debug', 'true');

// 查看存储数据
console.log('早报数据:', localStorage.getItem('morning_report_data'));
console.log('短链接数据:', localStorage.getItem('shortLinksStorage'));
console.log('点击日志:', localStorage.getItem('daily_click_logs'));

📈 未来规划

即将推出的功能

多用户协作编辑
云端数据同步
更丰富的数据可视化
移动端 PWA 支持
自动化内容推荐
社交媒体集成
API 接口开放
插件系统支持

技术升级计划

迁移到 TypeScript
升级到 React 19
引入 Next.js 框架
集成 GraphQL
微前端架构

🤝 贡献指南

开发环境设置

Fork 项目仓库
创建功能分支：git checkout -b feature/new-feature
提交更改：git commit -am 'Add new feature'
推送分支：git push origin feature/new-feature
创建 Pull Request

代码规范

遵循 ESLint 配置规则
使用 Prettier 格式化代码
编写清晰的提交信息
添加必要的注释和文档

测试要求

编写单元测试
确保测试覆盖率
进行跨浏览器测试
验证响应式设计

腾讯云TCI早报编辑器 - 让内容创作更简单，让数据分析更直观！

About

腾讯云 TCI 早报编辑器（前端）

376.00 KiB

0 forks 1 stars 1 branches 1 TagREADME

Release
1

v1.0.0

Contributors
1

Language

JavaScript88.4%

Markdown6.8%

CSS4.3%

HTML0.5%

35/F,Tencent Building,Kejizhongyi Avenue,Nanshan District,Shenzhen

京ICP备11018762号-111

腾讯云TCI早报编辑器

✨ 核心功能

📝 智能编辑器

🔗 短链接管理系统

📊 数据分析中心

🎯 内容管理模块

🚀 快速开始

环境要求

安装和运行

生产环境构建

🌐 部署和伪静态配置

Nginx 配置

Apache .htaccess 配置

Docker 部署

📁 项目架构

🛠 技术栈详解

前端框架

样式和UI

数据管理

开发工具

🔧 核心组件详解

Editor.js - 主编辑器

ArticleList.js - 技术文章管理

ClickTracker.js - 数据分析

ShortLinkManager.js - 短链接管理

ShortLinkRedirect.js - 短链接重定向

📊 数据存储方案

LocalStorage 数据结构

🎯 使用指南

1. 编辑早报内容

2. 短链接管理

3. 数据分析

4. 短链接访问

🔄 数据导出功能

1. 纯文本格式

2. Markdown 格式

3. JSON 格式

🔒 安全特性

认证和授权

数据安全

📱 响应式设计

桌面端 (≥768px)

移动端 (<768px)

平板端 (768px-1024px)

🚀 性能优化

前端优化

构建优化

🐛 故障排除

常见问题

调试模式

📈 未来规划

即将推出的功能

技术升级计划

🤝 贡献指南

开发环境设置

代码规范

测试要求

About

Release1

Contributors1

Release
1

Contributors
1