hxuanyu/obs-overlay-widget
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加返回首页按钮及其样式，优化用户导航体验

Browse Source
This commit is contained in:
hxuanyu 2025-07-21 17:13:22 +08:00
parent b0cc476822
commit d5cc3eb084
1 changed files with 40 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/views/ConfigView.vue
View File

@ -1,6 +1,12 @@
<template> <template>
<div class="config-view"> <div class="config-view">
<div class="left-panel"> <div class="left-panel">
<div class="header-section">
<el-button @click="goHome" type="text" class="back-button" size="large">
<el-icon><ArrowLeft /></el-icon> 返回首页
</el-button>
</div>
<div class="widget-selector"> <div class="widget-selector">
<el-select v-model="selectedWidget" placeholder="选择小组件" @change="handleWidgetChange"> <el-select v-model="selectedWidget" placeholder="选择小组件" @change="handleWidgetChange">
<el-option v-for="widget in widgets" :key="widget.value" :label="widget.label" :value="widget.value" /> <el-option v-for="widget in widgets" :key="widget.value" :label="widget.label" :value="widget.value" />
@ -41,7 +47,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'; import { ref, computed, onMounted, watch } from 'vue';
import { CopyDocument, View } from '@element-plus/icons-vue'; import { useRouter } from 'vue-router';
import { CopyDocument, View, ArrowLeft } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus'; import { ElMessage } from 'element-plus';
import { encodeConfig, decodeConfig } from '../utils/configUtils'; import { encodeConfig, decodeConfig } from '../utils/configUtils';
import { generatePreviewUrl } from '../utils/urlUtils'; import { generatePreviewUrl } from '../utils/urlUtils';
@ -49,6 +56,7 @@ import { generatePreviewUrl } from '../utils/urlUtils';
// 导入小组件注册表 // 导入小组件注册表
import { widgets, getDefaultConfig } from '../widgets/registry'; import { widgets, getDefaultConfig } from '../widgets/registry';
const router = useRouter();
const selectedWidget = ref('clock'); const selectedWidget = ref('clock');
const currentWidgetConfig = ref({}); const currentWidgetConfig = ref({});
const generatedUrl = ref(''); const generatedUrl = ref('');
@ -105,6 +113,11 @@ const openPreview = () => {
} }
}; };
// 返回首页
const goHome = () => {
router.push('/');
};
// 加载时检查查询参数（用于直接链接） // 加载时检查查询参数（用于直接链接）
onMounted(() => { onMounted(() => {
const queryParams = new URLSearchParams(window.location.search); const queryParams = new URLSearchParams(window.location.search);
@ -192,6 +205,32 @@ watch([selectedWidget, currentWidgetConfig], () => {
width: 100%; width: 100%;
} }
.header-section {
margin-bottom: 15px;
}
.back-button {
padding: 8px 0;
color: #606266;
font-size: 16px;
transition: color 0.3s ease;
}
.back-button:hover {
color: #409eff;
}
/* 深色模式下的返回按钮样式 */
@media (prefers-color-scheme: dark) {
.back-button {
color: #cccccc;
}
.back-button:hover {
color: #409eff;
}
}
.config-panel { .config-panel {
/* 配置面板可以滚动 */ /* 配置面板可以滚动 */
overflow-y: auto; overflow-y: auto;