链接优化

2025-06-27 17:30:23 +08:00 · 2025-06-27 17:30:23 +08:00 · 1f07656749
commit 1f07656749
parent b7ea988888
5 changed files with 210 additions and 89 deletions
--- a/DEPLOYMENT.md
+++ b/DEPLOYMENT.md
@ -1,78 +0,0 @@
-# 部署说明
-
-本项目支持多种部署方式，每种方式都有对应的构建命令。
-
-## 🚀 部署方式
-
-### 1. GitHub Pages（自动部署）
-
-**特点**：推送代码到 `main` 或 `master` 分支后自动部署
-**URL格式**：`https://username.github.io/obs-overlay-widget/`
-
-**设置步骤**：
-1. 推送代码到GitHub仓库
-2. 在仓库设置中启用GitHub Pages
-   - 进入 Settings → Pages
-   - Source 选择 "GitHub Actions"
-3. GitHub Actions会自动构建和部署
-
-### 2. 手动部署（任意服务器）
-
-**特点**：适用于任何Web服务器，包括Apache、Nginx、静态托管服务等
-**构建命令**：
-```bash
-npm run build
-```
-
-**部署步骤**：
-1. 运行构建命令
-2. 将 `dist` 文件夹中的所有文件上传到服务器
-3. 可以部署到根目录或任何子目录
-
-### 3. GitHub Pages（手动构建）
-
-**特点**：如果你需要手动为GitHub Pages构建
-**构建命令**：
-```bash
-npm run build:github
-```
-
-## 📝 构建命令说明
-
-| 命令 | 用途 | base路径 | 适用场景 |
-|------|------|----------|----------|
-| `npm run dev` | 开发服务器 | `/` | 本地开发 |
-| `npm run build` | 生产构建 | `./` | 手动部署到任意服务器 |
-| `npm run build:github` | GitHub Pages构建 | `/obs-overlay-widget/` | 手动GitHub Pages部署 |
-| `npm run preview` | 预览构建结果 | - | 本地测试构建结果 |
-
-## 🛠️ 技术说明
-
-### Base路径配置
-
-项目使用智能的base路径配置：
-
- **开发模式**：使用 `/` 作为base路径
- **生产模式**：
-  - 默认使用 `./`（相对路径），适用于任何部署位置
-  - 如果设置了 `VITE_BASE_PATH` 环境变量，则使用指定路径
-
-### 自动化部署
-
-GitHub Actions工作流（`.github/workflows/deploy.yml`）会：
-1. 检测代码变更
-2. 安装依赖
-3. 使用 `npm run build:github` 构建项目
-4. 自动部署到GitHub Pages
-
-## 🔧 自定义部署
-
-如果你的仓库名不是 `obs-overlay-widget`，需要修改：
-
-1. **vite.config.ts** 中的仓库名
-2. **package.json** 中 `build:github` 脚本的路径
-
-例如，如果仓库名是 `my-widget`：
-```json
-"build:github": "vue-tsc -b && cross-env VITE_BASE_PATH=/my-widget/ vite build"
-```
--- a/QUICK-SETUP.md
+++ b/QUICK-SETUP.md
@ -0,0 +1,47 @@
+# 🚀 快速部署指南
+
+## 准备工作
+
+1. **Fork或下载此项目**
+2. **更新GitHub用户名**：
+
+### 在Windows上：
+```cmd
+setup-readme.bat YOUR_GITHUB_USERNAME
+```
+
+### 在Linux/Mac上：
+```bash
+chmod +x setup-readme.sh
+./setup-readme.sh YOUR_GITHUB_USERNAME
+```
+
+### 手动更新：
+如果脚本无法运行，请手动替换README.md中所有的`USERNAME`为你的GitHub用户名。
+
+## 部署到GitHub Pages
+
+1. **提交更改**：
+   ```bash
+   git add .
+   git commit -m "Setup project for deployment"
+   git push origin main
+   ```
+
+2. **启用GitHub Pages**：
+   - 访问你的GitHub仓库
+   - 进入 Settings → Pages
+   - Source 选择 "GitHub Actions"
+
+3. **等待部署完成**：
+   - 查看Actions页面的构建状态
+   - 几分钟后访问：`https://YOUR_GITHUB_USERNAME.github.io/obs-overlay-widget/`
+
+## 验证部署
+
+✅ 构建状态正常  
+✅ 网站可以访问  
+✅ 小组件配置正常工作  
+✅ 预览链接生成正确  
+
+恭喜！你的OBS小组件工具已经成功部署！🎉
--- a/README.md
+++ b/README.md
@ -1,7 +1,43 @@
 # OBS 悬浮小组件

+[![Deploy to GitHub Pages](https://github.com/USERNAME/obs-overlay-widget/actions/workflows/deploy.yml/badge.svg)](https://github.com/USERNAME/obs-overlay-widget/actions/workflows/deploy.yml)
+[![GitHub Pages](https://img.shields.io/badge/GitHub%20Pages-Live%20Demo-brightgreen)](https://USERNAME.github.io/obs-overlay-widget/)
+[![Vue 3](https://img.shields.io/badge/Vue-3-brightgreen.svg)](https://vuejs.org/)
+[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
+[![Vite](https://img.shields.io/badge/Vite-Powered-646CFF.svg)](https://vitejs.dev/)
+
 一个为 OBS Studio 直播和录制场景开发的高度可定制化小组件集合，基于 Vue 3、TypeScript 和 Vite 构建。

+## 🚀 在线预览
+
+📺 **[立即体验 - GitHub Pages](https://USERNAME.github.io/obs-overlay-widget/)**
+
+> 注意：请将上面链接中的 `USERNAME` 替换为你的 GitHub 用户名
+
+## 📦 快速开始
+
+### 方式一：直接使用（推荐）
+直接访问 [在线版本](https://USERNAME.github.io/obs-overlay-widget/)，配置你的小组件并复制生成的URL到OBS中使用。
+
+### 方式二：本地部署
+```bash
+# 克隆项目
+git clone https://github.com/USERNAME/obs-overlay-widget.git
+cd obs-overlay-widget
+
+# 安装依赖
+npm install
+
+# 启动开发服务器
+npm run dev
+```
+
+## 🎯 部署状态
+
+- **主分支构建**：[![Deploy Status](https://github.com/USERNAME/obs-overlay-widget/actions/workflows/deploy.yml/badge.svg?branch=main)](https://github.com/USERNAME/obs-overlay-widget/actions/workflows/deploy.yml)
+- **在线版本**：[https://USERNAME.github.io/obs-overlay-widget/](https://USERNAME.github.io/obs-overlay-widget/)
+- **最后更新**：自动同步 GitHub 主分支
+
 ## 功能特点

 - **多种小组件**：内置时钟、日期、文本、图片等多种可配置小组件
@ -91,7 +127,9 @@
  - 运动计时：适合健身和运动的动感样式
  - 简约风格：简洁的极简主义设计

-## 开发
+## 💻 开发
+
+### 基础命令

 ```bash
 # 安装依赖
@ -100,13 +138,34 @@ npm install
 # 启动开发服务器
 npm run dev

-# 构建生产版本
+# 构建生产版本（适用于手动部署）
 npm run build

+# 构建GitHub Pages版本
+npm run build:github
+
 # 预览生产构建
 npm run preview
 ```

+### 🚀 部署方式
+
+| 部署方式 | 构建命令 | 说明 |
+|----------|----------|------|
+| **GitHub Pages** | `npm run build:github` | 自动部署，推送到main分支即可 |
+| **手动部署** | `npm run build` | 将`dist`文件夹上传到任意Web服务器 |
+| **开发预览** | `npm run dev` | 本地开发和测试 |
+
+### 🔄 自动部署
+
+项目配置了GitHub Actions自动部署：
+
+1. **触发条件**：推送代码到`main`或`master`分支
+2. **构建过程**：自动安装依赖、构建、部署到GitHub Pages
+3. **访问地址**：`https://USERNAME.github.io/obs-overlay-widget/`
+
+查看部署状态：[![Deploy Status](https://github.com/USERNAME/obs-overlay-widget/actions/workflows/deploy.yml/badge.svg)](https://github.com/USERNAME/obs-overlay-widget/actions)
+
 ## 项目结构

 ```
@ -388,13 +447,62 @@ case 'new':
 2. 为所有配置选项提供默认值
 3. 使用适当的空值检查（例如：`props.config.property || defaultValue`）

-## 与 OBS Studio 集成
+## 🎬 与 OBS Studio 集成

-1. 在 Web 服务器或本地运行此应用
-2. 使用配置界面设置您的小组件
-3. 复制生成的 URL
-4. 在 OBS Studio 中：
+1. **获取小组件URL**：
+   - 访问 [在线配置页面](https://hanxuanyu.github.io/obs-overlay-widget/)
+   - 选择和配置您需要的小组件
+   - 复制生成的URL
+
+2. **在OBS中添加浏览器源**：
   - 向您的场景添加"浏览器源"
   - 将URL粘贴到浏览器源URL字段
-   - 根据需要设置宽度和高度
+   - 设置合适的宽度和高度
   - 勾选"不可见时关闭源"以获得更好的性能
+
+3. **推荐设置**：
+   - 宽度：1920px（或您的分辨率宽度）
+   - 高度：1080px（或您的分辨率高度）
+   - 自定义CSS：`body { margin: 0; }`
+
+## 📊 项目状态
+
+- **构建状态**：[![Build Status](https://github.com/hanxuanyu/obs-overlay-widget/actions/workflows/deploy.yml/badge.svg)](https://github.com/hanxuanyu/obs-overlay-widget/actions)
+- **在线版本**：[![Live Demo](https://img.shields.io/badge/Demo-Live-success)](https://hanxuanyu.github.io/obs-overlay-widget/)
+- **许可证**：MIT
+- **技术栈**：Vue 3 + TypeScript + Vite + Element Plus
+
+## 🤝 贡献
+
+欢迎提交Issue和Pull Request！
+
+1. Fork 本仓库
+2. 创建你的特性分支 (`git checkout -b feature/AmazingFeature`)
+3. 提交你的更改 (`git commit -m 'Add some AmazingFeature'`)
+4. 推送到分支 (`git push origin feature/AmazingFeature`)
+5. 开启一个Pull Request
+
+## 📝 更新日志
+
+### v1.0.0
+- ✨ 基础小组件集合（时钟、日期、文本、图片、计时器）
+- 🎨 可视化配置界面
+- 🚀 GitHub Pages自动部署
+- 📱 响应式设计
+- 🔧 TypeScript支持
+
+## 📄 许可证
+
+本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情
+
+## 🙏 致谢
+
+- [Vue 3](https://vuejs.org/) - 渐进式JavaScript框架
+- [Element Plus](https://element-plus.org/) - Vue 3 UI组件库
+- [Vite](https://vitejs.dev/) - 下一代前端构建工具
+- [TypeScript](https://www.typescriptlang.org/) - JavaScript的超集
+
+---
+
+
+**⭐ 如果这个项目对你有帮助，请给个Star支持一下！**
--- a/src/utils/urlUtils.ts
+++ b/src/utils/urlUtils.ts
@ -0,0 +1,43 @@
+/**
+ * URL工具函数
+ */
+
+/**
+ * 获取应用的基础URL路径
+ * 用于生成正确的预览链接，支持不同的部署环境
+ */
+export function getAppBaseUrl(): string {
+  const origin = window.location.origin;
+  
+  // 获取Vite配置的base路径
+  let basePath = import.meta.env.BASE_URL;
+  
+  // 如果base路径是相对路径（如'./'），需要根据当前页面路径来确定完整路径
+  if (basePath.startsWith('./')) {
+    // 从当前路径中提取base路径
+    const currentPath = window.location.pathname;
+    const pathSegments = currentPath.split('/').filter(Boolean);
+    
+    // 如果当前路径包含index.html，移除它
+    if (pathSegments[pathSegments.length - 1] === 'index.html') {
+      pathSegments.pop();
+    }
+    
+    // 重建base路径
+    basePath = pathSegments.length > 0 ? `/${pathSegments.join('/')}/` : '/';
+  }
+  
+  // 清理base路径，确保格式正确
+  const cleanBasePath = basePath === '/' ? '' : basePath.replace(/\/$/, '');
+  
+  return `${origin}${cleanBasePath}`;
+}
+
+/**
+ * 生成预览URL
+ * @param configData 配置数据字符串
+ */
+export function generatePreviewUrl(configData: string): string {
+  const baseUrl = getAppBaseUrl();
+  return `${baseUrl}/#/preview?data=${configData}`;
+}
--- a/src/views/ConfigView.vue
+++ b/src/views/ConfigView.vue
@ -44,6 +44,7 @@ import { ref, computed, onMounted, watch } from 'vue';
 import { CopyDocument, View } from '@element-plus/icons-vue';
 import { ElMessage } from 'element-plus';
 import { encodeConfig, decodeConfig } from '../utils/configUtils';
+import { generatePreviewUrl } from '../utils/urlUtils';

 // 导入小组件注册表
 import { widgets, getDefaultConfig } from '../widgets/registry';
@ -78,12 +79,12 @@ const updateWidgetConfig = (newConfig: any) => {

 // 生成预览 URL
 const updateGeneratedUrl = () => {
-  const baseUrl = window.location.origin;
  const configStr = encodeConfig({
    type: selectedWidget.value,
    config: currentWidgetConfig.value
  });
-  generatedUrl.value = `${baseUrl}/#/preview?data=${configStr}`;
+  
+  generatedUrl.value = generatePreviewUrl(configStr);
 };

 // 复制 URL 到剪贴板