样式修改

README-zh_CN.md

@@ -0,0 +1,59 @@
+# 光影畅享
+
+[English](./README.md) | 简体中文
+
+---
+
+「光影畅享」是一个在线视频播放器，支持 Web 网页和 Windows、Mac、Linux 桌面应用。主要用于 CMS 视频采集站资源的在线浏览，实现了 HLS 视频流（m3u8）的在线播放。
+
+## 特性
+
+- 实现了 Web 网页和 Windows、Mac、Linux 桌面应用
+- 只需要一个 URL，就可以导入 CMS 视频采集站资源
+- 支持多语言（i18n）
+- 提供了丰富的设置，如界面设置、播放器设置等
+- 支持数据备份与还原
+- 为常用功能提供了键盘快捷键
+
+## 待办
+
+- [ ] 历史播放记录
+- [ ] 搜索记录
+- [ ] 收藏功能
+- [ ] XML 格式数据支持
+- [ ] m3u8 直播源支持
+- [x] 导出/导入/重置设置和播放源
+- [x] 拖入文件或粘贴导入设置和播放源
+
+## 截图
+
+![截图](./screenshot/1.png)
+![截图](./screenshot/2.png)
+![截图](./screenshot/3.png)
+![截图](./screenshot/4.png)
+
+## 使用
+
+### 桌面应用
+
+请到 [releases](https://github.com/xurenda/enjoy-player/releases) 页面下载最新版本，支持 Windows、Mac、Linux
+
+### Web 网页
+
+```sh
+git clone https://github.com/xurenda/enjoy-player.git
+cd enjoy-player
+pnpm install
+pnpm run dev:web
+```
+
+> 建议使用桌面应用，因为 Web 端可能存在跨域请求无法拿到数据的问题
+
+## 视频源
+
+1. 搜索引擎搜索“CMS 视频资源站”
+2. 进入某个视频资源站后，查看采集教程，复制 JSON 接口 URL 地址
+
+## 参考项目
+
+- [h-player-v2](https://github.com/ZyqGitHub1/h-player-v2)

README.md

@@ -1,39 +1,59 @@
-# h-player-web
+# Enjoy-player
 
-This template should help get you started developing with Vue 3 in Vite.
+English | [简体中文](./README-zh_CN.md)
 
-## Recommended IDE Setup
+---
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+Enjoy-player is an online video player that supports web pages and Windows, Mac and Linux desktop applications. It is mainly used for online browsing of CMS video acquisition station resources, and realizes the online playback of HLS video stream (m3u8).
 
-## Type Support for `.vue` Imports in TS
+## Features
 
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+- Realize Web pages and Windows, Mac, Linux desktop applications
+- You only need one URL to import CMS video acquisition station resources
+- Support multiple languages (i18n)
+- Rich settings are provided, such as interface settings, player settings, etc
+- Support data backup and restoration
+- Provides keyboard shortcuts for commonly used functions
 
-## Customize configuration
+# TODO
 
-See [Vite Configuration Reference](https://vitejs.dev/config/).
+- [ ] History playback record
+- [ ] Search history
+- [ ] Collection feature
+- [ ] XML format data support
+- [ ] M3u8 live streaming source support
+- [x] Export/Import/Reset Settings and Playback Sources
+- [x] Drag and drop files or paste import settings and playback sources
 
-## Project Setup
+## Screenshot
 
-```sh
-pnpm install
-```
+![Screenshot](./screenshot/1.png)
+![Screenshot](./screenshot/2.png)
+![Screenshot](./screenshot/3.png)
+![Screenshot](./screenshot/4.png)
 
-### Compile and Hot-Reload for Development
+## Using
 
-```sh
-pnpm dev
-```
+### Desktop applications
+
+Please download the latest version from [releases](https://github.com/xurenda/enjoy-player/releases) page, which supports Windows, Mac, and Linux
 
-### Type-Check, Compile and Minify for Production
+### Web page
 
 ```sh
-pnpm build
+git clone https://github.com/xurenda/enjoy-player.git
+cd enjoy-player
+pnpm install
+pnpm run dev:web
 ```
 
-### Lint with [ESLint](https://eslint.org/)
+> It is recommended to use desktop applications, because there may be a problem that cross-domain requests cannot obtain data on the web terminal.
 
-```sh
-pnpm lint
-```
+## Video source
+
+1. Search for "CMS Video Resource Station" on search engines
+2. After entering a video resource station, check the collection tutorial and copy the JSON interface URL address.
+
+## Reference projects
+
+- [h-player-v2](https://github.com/ZyqGitHub1/h-player-v2)

components.d.ts

@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     AAlert: typeof import('ant-design-vue/es')['Alert']
+    ABadge: typeof import('ant-design-vue/es')['Badge']
     AButton: typeof import('ant-design-vue/es')['Button']
     ACascader: typeof import('ant-design-vue/es')['Cascader']
     ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
@@ -29,12 +30,14 @@ declare module 'vue' {
     ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
     ASkeleton: typeof import('ant-design-vue/es')['Skeleton']
     ASlider: typeof import('ant-design-vue/es')['Slider']
+    ASpace: typeof import('ant-design-vue/es')['Space']
     ASwitch: typeof import('ant-design-vue/es')['Switch']
     ATabPane: typeof import('ant-design-vue/es')['TabPane']
     ATabs: typeof import('ant-design-vue/es')['Tabs']
     ATag: typeof import('ant-design-vue/es')['Tag']
     ATextarea: typeof import('ant-design-vue/es')['Textarea']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
+    ATour: typeof import('ant-design-vue/es')['Tour']
     ATypographyParagraph: typeof import('ant-design-vue/es')['TypographyParagraph']
     ATypographyText: typeof import('ant-design-vue/es')['TypographyText']
     ATypographyTitle: typeof import('ant-design-vue/es')['TypographyTitle']

electron/main.js

@@ -1,4 +1,4 @@
-import { app, BrowserWindow } from 'electron'
+import { app, BrowserWindow, Menu } from 'electron'
 import isDev from 'electron-is-dev'
 import windowStateKeeper from 'electron-window-state'
 import path, { dirname } from 'node:path'
@@ -32,6 +32,10 @@ const createWindow = () => {
     },
   })
   mainWindowState.manage(win)
+
+  if (process.platform !== 'darwin') {
+    Menu.setApplicationMenu(Menu.buildFromTemplate([]))
+  }
   win.loadURL(mainUrl)
 }
 

env.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="vite/client" />
 
 interface Window {
+  curVersion: string
   searchInputRef: HTMLInputElement | null
   electronAPI?: {
     versions: {

index.html

@@ -5,7 +5,6 @@
     <link rel="icon" href="/logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>光影畅享</title>
-    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4683879_k418wuoi98.css" />
   </head>
   <body class="m-0">
     <div id="app" class="bg-color-bg dark:text-white"></div>

src/assets/css/main.css

@@ -20,6 +20,20 @@
   --color-gray: rgba(255, 255, 255, 0.6);
 }
 
+a:link {
+  color: rgb(var(--color-primary-arr) / 0.8);
+}
+
+a:visited,
+a:hover,
+a:active {
+  color: var(--color-primary);
+}
+a[target='_blank']::after {
+  content: '\e85f';
+  font-family: iconfont !important;
+}
+
 .ant-tabs,
 .ant-tabs .ant-tabs-content,
 .ant-tabs .ant-tabs-tabpane {
@@ -40,19 +54,35 @@
   padding-top: 4px;
 }
 
+.checked-no-active.ant-switch.ant-switch-checked {
+  background-color: var(--color-border);
+}
+.checked-no-active.ant-switch.ant-switch-checked:hover {
+  background-color: var(--color-disable);
+}
+
 /* 滚动槽 */
 ::-webkit-scrollbar {
   width: 6px;
   height: 6px;
 }
 ::-webkit-scrollbar-track {
   border-radius: 3px;
-  background: rgba(0, 0, 0, 0.06);
-  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.08);
+  background-color: rgba(0, 0, 0, 0.06);
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.08);
 }
 /* 滚动条滑块 */
 ::-webkit-scrollbar-thumb {
   border-radius: 3px;
   background: rgba(0, 0, 0, 0.12);
-  -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
+  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
+}
+
+.dark ::-webkit-scrollbar-track {
+  background-color: rgba(255, 255, 255, 0.06);
+  box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.08);
+}
+.dark *::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.12);
+  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.2);
 }