From d70b962ef5f039c836e1d642826b90ae88fec462 Mon Sep 17 00:00:00 2001 From: hxuanyu <2252193204@qq.com> Date: Wed, 25 Jun 2025 23:53:40 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9F=BA=E6=9C=AC=E5=8A=9F=E8=83=BD=E5=AE=9E?= =?UTF-8?q?=E7=8E=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 63 +++++- index.html | 3 +- package-lock.json | 269 +++++++++++++++++++++++++- package.json | 6 +- src/App.vue | 30 +-- src/components/config/ClockConfig.vue | 224 +++++++++++++++++++++ src/components/config/DateConfig.vue | 225 +++++++++++++++++++++ src/components/config/ImageConfig.vue | 175 +++++++++++++++++ src/components/config/TextConfig.vue | 208 ++++++++++++++++++++ src/main.ts | 9 +- src/router/index.ts | 24 +++ src/style.css | 36 ++-- src/utils/configUtils.ts | 28 +++ src/views/ConfigView.vue | 248 ++++++++++++++++++++++++ src/views/HomeView.vue | 227 ++++++++++++++++++++++ src/views/PreviewView.vue | 60 ++++++ src/widgets/ClockWidget-new.vue | 120 ++++++++++++ src/widgets/ClockWidget.vue | 120 ++++++++++++ src/widgets/DateWidget.vue | 130 +++++++++++++ src/widgets/ImageWidget.vue | 90 +++++++++ src/widgets/TextWidget.vue | 77 ++++++++ 21 files changed, 2318 insertions(+), 54 deletions(-) create mode 100644 src/components/config/ClockConfig.vue create mode 100644 src/components/config/DateConfig.vue create mode 100644 src/components/config/ImageConfig.vue create mode 100644 src/components/config/TextConfig.vue create mode 100644 src/router/index.ts create mode 100644 src/utils/configUtils.ts create mode 100644 src/views/ConfigView.vue create mode 100644 src/views/HomeView.vue create mode 100644 src/views/PreviewView.vue create mode 100644 src/widgets/ClockWidget-new.vue create mode 100644 src/widgets/ClockWidget.vue create mode 100644 src/widgets/DateWidget.vue create mode 100644 src/widgets/ImageWidget.vue create mode 100644 src/widgets/TextWidget.vue diff --git a/README.md b/README.md index 33895ab..6b52678 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,62 @@ -# Vue 3 + TypeScript + Vite +# OBS Overlay Widget -This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 ` - diff --git a/src/components/config/ClockConfig.vue b/src/components/config/ClockConfig.vue new file mode 100644 index 0000000..da5be1a --- /dev/null +++ b/src/components/config/ClockConfig.vue @@ -0,0 +1,224 @@ + + + + + diff --git a/src/components/config/DateConfig.vue b/src/components/config/DateConfig.vue new file mode 100644 index 0000000..a9ee736 --- /dev/null +++ b/src/components/config/DateConfig.vue @@ -0,0 +1,225 @@ + + + + + diff --git a/src/components/config/ImageConfig.vue b/src/components/config/ImageConfig.vue new file mode 100644 index 0000000..112ac7d --- /dev/null +++ b/src/components/config/ImageConfig.vue @@ -0,0 +1,175 @@ + + + + + diff --git a/src/components/config/TextConfig.vue b/src/components/config/TextConfig.vue new file mode 100644 index 0000000..4e043b1 --- /dev/null +++ b/src/components/config/TextConfig.vue @@ -0,0 +1,208 @@ + + + + + diff --git a/src/main.ts b/src/main.ts index 2425c0f..4b1bdff 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,5 +1,12 @@ import { createApp } from 'vue' +import ElementPlus from 'element-plus' +import 'element-plus/dist/index.css' +import router from './router' import './style.css' import App from './App.vue' -createApp(App).mount('#app') +const app = createApp(App) + +app.use(ElementPlus) +app.use(router) +app.mount('#app') diff --git a/src/router/index.ts b/src/router/index.ts new file mode 100644 index 0000000..769cc89 --- /dev/null +++ b/src/router/index.ts @@ -0,0 +1,24 @@ +import { createRouter, createWebHistory } from 'vue-router'; + +const router = createRouter({ + history: createWebHistory(), + routes: [ + { + path: '/', + name: 'HomeView', + component: () => import('../views/HomeView.vue') + }, + { + path: '/config', + name: 'ConfigView', + component: () => import('../views/ConfigView.vue') + }, + { + path: '/preview', + name: 'PreviewView', + component: () => import('../views/PreviewView.vue') + } + ] +}); + +export default router; diff --git a/src/style.css b/src/style.css index f691315..f7fe674 100644 --- a/src/style.css +++ b/src/style.css @@ -5,7 +5,7 @@ color-scheme: light dark; color: rgba(255, 255, 255, 0.87); - background-color: #242424; + background-color: transparent; font-synthesis: none; text-rendering: optimizeLegibility; @@ -13,38 +13,24 @@ -moz-osx-font-smoothing: grayscale; } -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - body { margin: 0; - display: flex; - place-items: center; + padding: 0; min-width: 320px; min-height: 100vh; + background-color: transparent; } -h1 { - font-size: 3.2em; - line-height: 1.1; +/* Preview mode specific styles */ +.preview-view { + background-color: transparent !important; } -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; +@media (prefers-color-scheme: light) { + :root { + color: #213547; + background-color: transparent; + } } button:hover { border-color: #646cff; diff --git a/src/utils/configUtils.ts b/src/utils/configUtils.ts new file mode 100644 index 0000000..47001ef --- /dev/null +++ b/src/utils/configUtils.ts @@ -0,0 +1,28 @@ +/** + * Utility functions for encoding and decoding widget configurations in URL + */ + +/** + * Encodes widget configuration for URL sharing + * @param config The configuration object to encode + * @returns Encoded string for URL + */ +export const encodeConfig = (config: any): string => { + const jsonString = JSON.stringify(config); + return btoa(encodeURIComponent(jsonString)); +}; + +/** + * Decodes widget configuration from URL parameter + * @param encodedString The encoded configuration string from URL + * @returns Decoded configuration object + */ +export const decodeConfig = (encodedString: string): any => { + try { + const jsonString = decodeURIComponent(atob(encodedString)); + return JSON.parse(jsonString); + } catch (e) { + console.error('Failed to decode configuration', e); + throw new Error('Invalid configuration format'); + } +}; diff --git a/src/views/ConfigView.vue b/src/views/ConfigView.vue new file mode 100644 index 0000000..ce28574 --- /dev/null +++ b/src/views/ConfigView.vue @@ -0,0 +1,248 @@ + + + + + diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue new file mode 100644 index 0000000..e1e3da8 --- /dev/null +++ b/src/views/HomeView.vue @@ -0,0 +1,227 @@ + + + + + diff --git a/src/views/PreviewView.vue b/src/views/PreviewView.vue new file mode 100644 index 0000000..33a0d20 --- /dev/null +++ b/src/views/PreviewView.vue @@ -0,0 +1,60 @@ + + + + + diff --git a/src/widgets/ClockWidget-new.vue b/src/widgets/ClockWidget-new.vue new file mode 100644 index 0000000..44bc4ef --- /dev/null +++ b/src/widgets/ClockWidget-new.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/src/widgets/ClockWidget.vue b/src/widgets/ClockWidget.vue new file mode 100644 index 0000000..44bc4ef --- /dev/null +++ b/src/widgets/ClockWidget.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/src/widgets/DateWidget.vue b/src/widgets/DateWidget.vue new file mode 100644 index 0000000..b91d988 --- /dev/null +++ b/src/widgets/DateWidget.vue @@ -0,0 +1,130 @@ + + + + + diff --git a/src/widgets/ImageWidget.vue b/src/widgets/ImageWidget.vue new file mode 100644 index 0000000..7643ae4 --- /dev/null +++ b/src/widgets/ImageWidget.vue @@ -0,0 +1,90 @@ + + + + + diff --git a/src/widgets/TextWidget.vue b/src/widgets/TextWidget.vue new file mode 100644 index 0000000..f54ad12 --- /dev/null +++ b/src/widgets/TextWidget.vue @@ -0,0 +1,77 @@ + + + + +