BingPaper/webapp

BingPaper WebApp

BingPaper 的前端 Web 应用，使用 Vue 3 + TypeScript + Vite 构建。

💡 性能优化提示：已配置浏览器缓存优化，可减少 60-80% 带宽！
👉 后端配置：查看 缓存配置快速参考

特性

• ✨ Vue 3 组合式 API
• 🎨 Tailwind CSS + shadcn-vue 组件库
• 📦 TypeScript 类型支持
• 🔧 完整的 API 客户端封装
• 🚀 优化的构建配置
• ⚡ 浏览器缓存优化（内容哈希 + 代码分割）
• 🌐 支持自定义后端路径
• 📁 自动输出到上级目录的 web 文件夹

快速开始

安装依赖

npm install

开发环境

npm run dev

开发服务器会在 http://localhost:5173 启动，并自动代理 /api 请求到后端服务器。

构建生产版本

npm run build

构建产物会自动输出到项目上级目录的 web 文件夹，供 Go 服务器使用。

预览构建结果

npm run preview

构建配置

环境变量

项目支持通过环境变量配置后端 API 路径：

• .env - 默认配置
• .env.development - 开发环境配置
• .env.production - 生产环境配置

修改 VITE_API_BASE_URL 来自定义后端 API 路径。

输出目录

构建产物输出到 ../web/，目录结构：

web/
├── index.html
├── assets/
│   ├── index-[hash].js
│   └── index-[hash].css
└── vite.svg

API 使用

项目提供了完整的 TypeScript API 客户端：

import { bingPaperApi } from '@/lib/api-service'

// 获取今日图片
const meta = await bingPaperApi.getTodayImageMeta()

// 获取图片列表
const images = await bingPaperApi.getImages({ limit: 10 })

详细的 API 使用示例请参阅 API_EXAMPLES.md

构建说明

详细的构建配置和部署说明请参阅 BUILD.md

项目结构

src/
├── lib/              # 核心库
│   ├── api-config.ts    # API 配置
│   ├── api-types.ts     # TypeScript 类型定义
│   ├── api-service.ts   # API 服务封装
│   ├── http-client.ts   # HTTP 客户端
│   └── utils.ts        # 工具函数
├── components/       # Vue 组件
│   └── ui/          # UI 组件库
├── views/           # 页面视图
├── assets/          # 静态资源
├── App.vue          # 根组件
└── main.ts          # 入口文件

📚 文档

核心文档

• README.md - 项目概览（本文件）
• BUILD.md - 构建说明
• USAGE.md - 使用指南

性能优化 ⚡

• CACHE_QUICK_REF.md - 缓存配置快速参考（推荐从这里开始）
• CACHE_CONFIG.md - 详细的缓存配置指南
• CACHE_OPTIMIZATION_SUMMARY.md - 优化总结
• CACHE_TEST.html - 缓存测试页面

API 相关

• CORS_CONFIG.md - CORS 配置
• API_EXAMPLES.md - API 使用示例

其他

• CHANGELOG.md - 更新日志