# Tag-collection

**Repository Path**: zhenzekun/tag-collection

## Basic Information

- **Project Name**: Tag-collection
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-17
- **Last Updated**: 2025-08-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 企业标签收藏夹

一个简洁美观的企业内部标签收藏页面，帮助员工快速访问常用网站，提升工作效率。

## 功能特性

- ✅ **标签管理**：添加、编辑、删除标签
- ✅ **智能搜索**：支持按名称、URL、分类、描述搜索
- ✅ **分类管理**：工作、开发、设计、文档、其他
- ✅ **数据持久化**：Node.js服务器自动保存 + JSON文件存储
- ✅ **导入导出**：支持JSON格式数据导入导出
- ✅ **响应式设计**：适配桌面和移动设备
- ✅ **现代化UI**：渐变背景、卡片阴影、动画效果

## 文件结构

```
ces/
├── index.html          # 主页面
├── styles.css          # 样式文件
├── script.js           # 功能脚本
├── bookmarks.json      # 数据文件
├── server.js           # Node.js服务器
├── package.json        # 项目依赖配置
├── nginx.conf          # Nginx配置示例
├── DEPLOYMENT.md       # 详细部署指南
└── README.md           # 说明文档
```

## 数据持久化说明

### 当前存储机制

1. **JSON文件存储** (`bookmarks.json`)
   - 作为数据源和持久化存储
   - 可以手动编辑和版本控制
   - 部署时包含默认数据

2. **服务器端保存**（Node.js模式）
   - 用户操作自动保存到JSON文件
   - 通过POST请求实现数据持久化
   - 支持实时数据同步

### 数据加载和保存流程

**Node.js服务器模式：**
1. 页面加载时从 `bookmarks.json` 读取数据
2. 用户修改数据后自动调用 `/save-bookmarks` API
3. 服务器将数据写入 `bookmarks.json` 文件
4. 数据实时持久化，无需手动保存

**静态文件模式：**
1. 页面加载时从 `bookmarks.json` 读取数据
2. 数据仅在内存中修改
3. 需要手动导出数据进行备份
4. 刷新页面后修改丢失

### 数据格式

```json
[
  {
    "id": 1,
    "name": "网站名称",
    "url": "https://example.com",
    "category": "工作",
    "description": "网站描述",
    "createdAt": "2024-01-15T08:00:00.000Z"
  }
]
```

## 快速开始

### 本地开发

#### 方法一：Node.js服务器（推荐）
```bash
# 启动Node.js服务器（支持数据保存）
node server.js

# 或使用npm脚本
npm start
```

访问：http://localhost:8000

**特性：**
- ✅ 支持数据自动保存到bookmarks.json
- ✅ 完整的CRUD功能
- ✅ CORS支持

#### 方法二：Python HTTP服务器（仅静态展示）
```bash
# Python 3
python -m http.server 8000

# Python 2
python -m SimpleHTTPServer 8000
```

**注意：** Python服务器不支持数据保存功能，修改后的数据不会持久化。

### 生产环境部署

#### 方案一：Nginx + Node.js（推荐）

1. **启动Node.js服务**
   ```bash
   # 使用PM2管理进程
   npm install -g pm2
   pm2 start server.js --name bookmark-manager
   pm2 startup
   pm2 save
   ```

2. **配置Nginx代理**
   ```nginx
   server {
       listen 80;
       server_name bookmarks.company.com;
       root /var/www/bookmarks;
       index index.html;
       
       location / {
           try_files $uri $uri/ /index.html;
       }
       
       # 代理API请求到Node.js
       location /save-bookmarks {
           proxy_pass http://localhost:8000;
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
       }
   }
   ```

#### 方案二：纯静态部署

### Linux + Nginx 部署

1. **上传文件**
   ```bash
   # 将所有文件上传到服务器目录
   scp -r ces/ user@server:/var/www/bookmarks/
   ```

2. **配置Nginx**
   ```nginx
   server {
       listen 80;
       server_name bookmarks.company.com;
       root /var/www/bookmarks;
       index index.html;
       
       location / {
           try_files $uri $uri/ /index.html;
       }
       
       # 确保JSON文件可以被访问
       location ~ \.json$ {
           add_header Content-Type application/json;
       }
   }
   ```

3. **重启Nginx**
   ```bash
   sudo systemctl reload nginx
   ```

### 其他Web服务器

- **Apache**: 确保支持静态文件服务
- **IIS**: 配置MIME类型支持JSON文件
- **Node.js**: 使用express.static中间件

## 使用说明

### 基本操作

1. **添加标签**：点击"添加标签"按钮，填写网站信息
2. **搜索标签**：在搜索框输入关键词快速查找
3. **编辑标签**：点击标签卡片上的编辑按钮
4. **删除标签**：点击标签卡片上的删除按钮
5. **访问网站**：点击"访问网站"按钮在新窗口打开

### 数据管理

1. **导出数据**：点击"导出"按钮下载JSON文件
2. **导入数据**：点击"导入"按钮选择JSON文件
3. **备份数据**：定期导出数据文件进行备份

### 管理员操作

1. **批量添加**：直接编辑 `bookmarks.json` 文件
2. **数据迁移**：使用导出/导入功能
3. **版本控制**：将 `bookmarks.json` 纳入Git管理

## 技术特性

- **纯前端**：无需后端服务器或数据库
- **现代JavaScript**：ES6+语法，async/await
- **响应式CSS**：Flexbox + Grid布局
- **安全性**：HTML转义防止XSS攻击
- **兼容性**：支持现代浏览器

## 浏览器支持

- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+

## 许可证

MIT License

## 更新日志

### v1.1.0
- 添加JSON文件数据持久化
- 新增导入导出功能
- 优化数据加载机制
- 完善错误处理

### v1.0.0
- 基础标签管理功能
- 搜索和分类功能
- 响应式设计
- localStorage存储