From 11572f132ceab39e4289ca707d296499972b78b3 Mon Sep 17 00:00:00 2001 From: Flik Date: Thu, 22 Jan 2026 22:37:42 +0800 Subject: [PATCH] =?UTF-8?q?feat(theme):=20=E6=B7=BB=E5=8A=A0=E4=B8=BB?= =?UTF-8?q?=E9=A2=98=E5=88=87=E6=8D=A2=E5=8A=9F=E8=83=BD=E5=B9=B6=E4=BC=98?= =?UTF-8?q?=E5=8C=96UI=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 集成主题切换功能，支持浅色、深色和自动模式 - 添加SunnyOutline、MoonOutline、ContrastOutline图标用于主题选择 - 创建主题下拉菜单组件，允许用户切换不同主题模式 - 重构CSS样式使用CSS变量替代硬编码颜色值 - 优化导航栏、用户菜单、客户端卡片等组件的视觉效果 - 调整头部高度从60px到56px，修改品牌文字样式 - 更新按钮、下拉菜单、模态框等交互元素的样式 - 在客户端视图中添加心跳指示器显示连接状态 - 实现客户端页面数据自动轮询刷新功能 - 优化版本号显示逻辑，确保始终以v开头显示 - 修复更新检查按钮只在有可用更新时才显示的问题 --- cmd/client/main.go | 3 + cmd/server/main.go | 3 + pkg/version/version.go | 16 +- web/src/App.vue | 230 ++++++--- web/src/components/GlassModal.vue | 27 +- web/src/composables/useTheme.ts | 47 ++ web/src/style.css | 56 ++- web/src/views/ClientView.vue | 312 ++++++------ web/src/views/ClientsView.vue | 138 +++--- web/src/views/HomeView.vue | 202 +++----- web/src/views/LoginView.vue | 146 ++---- web/src/views/PluginsView.vue | 762 ------------------------------ web/src/views/SettingsView.vue | 120 ++--- 13 files changed, 691 insertions(+), 1371 deletions(-) create mode 100644 web/src/composables/useTheme.ts delete mode 100644 web/src/views/PluginsView.vue diff --git a/cmd/client/main.go b/cmd/client/main.go index 3b46a15..373c50a 100644 --- a/cmd/client/main.go +++ b/cmd/client/main.go @@ -13,9 +13,12 @@ import ( // 版本信息（通过 ldflags 注入） var Version string +var BuildTime string +var GitCommit string func init() { version.SetVersion(Version) + version.SetBuildInfo(GitCommit, BuildTime) } func main() { diff --git a/cmd/server/main.go b/cmd/server/main.go index df0d9db..4abc304 100644 --- a/cmd/server/main.go +++ b/cmd/server/main.go @@ -32,9 +32,12 @@ import ( // 版本信息（通过 ldflags 注入） var Version string +var BuildTime string +var GitCommit string func init() { version.SetVersion(Version) + version.SetBuildInfo(GitCommit, BuildTime) } func main() { diff --git a/pkg/version/version.go b/pkg/version/version.go index 70a2cd9..f930379 100644 --- a/pkg/version/version.go +++ b/pkg/version/version.go @@ -13,6 +13,8 @@ import ( // 版本信息 var Version = "1.0.0" +var GitCommit = "" +var BuildTime = "" // SetVersion 设置版本号（由 main 包在初始化时调用） func SetVersion(v string) { @@ -21,6 +23,16 @@ func SetVersion(v string) { } } +// SetBuildInfo 设置构建信息（由 main 包在初始化时调用） +func SetBuildInfo(gitCommit, buildTime string) { + if gitCommit != "" { + GitCommit = gitCommit + } + if buildTime != "" { + BuildTime = buildTime + } +} + // 仓库信息 const ( RepoURL = "https://git.92coco.cn/flik/GoTunnel" @@ -43,8 +55,8 @@ type Info struct { func GetInfo() Info { return Info{ Version: Version, - GitCommit: "", - BuildTime: "", + GitCommit: GitCommit, + BuildTime: BuildTime, GoVersion: runtime.Version(), OS: runtime.GOOS, Arch: runtime.GOARCH, diff --git a/web/src/App.vue b/web/src/App.vue index 5951a2a..70903f3 100644 --- a/web/src/App.vue +++ b/web/src/App.vue @@ -3,16 +3,20 @@ import { ref, onMounted, computed, watch } from 'vue' import { RouterView, useRouter, useRoute } from 'vue-router' import { HomeOutline, DesktopOutline, SettingsOutline, - PersonCircleOutline, LogOutOutline, LogoGithub, ServerOutline, CheckmarkCircleOutline, ArrowUpCircleOutline, CloseOutline + PersonCircleOutline, LogOutOutline, LogoGithub, ServerOutline, CheckmarkCircleOutline, ArrowUpCircleOutline, CloseOutline, + SunnyOutline, MoonOutline, ContrastOutline } from '@vicons/ionicons5' import { getServerStatus, getVersionInfo, checkServerUpdate, applyServerUpdate, removeToken, getToken, type UpdateInfo } from './api' import { useToast } from './composables/useToast' import { useConfirm } from './composables/useConfirm' +import { useTheme, type ThemeMode } from './composables/useTheme' const router = useRouter() const route = useRoute() const message = useToast() const dialog = useConfirm() +const { themeMode, setTheme } = useTheme() +const showThemeMenu = ref(false) const serverInfo = ref({ bind_addr: '', bind_port: 0 }) const clientCount = ref(0) const version = ref('') @@ -91,8 +95,23 @@ const toggleUserMenu = () => { showUserMenu.value = !showUserMenu.value } +const toggleThemeMenu = () => { + showThemeMenu.value = !showThemeMenu.value +} + +const selectTheme = (mode: ThemeMode) => { + setTheme(mode) + showThemeMenu.value = false +} + +const themeIcon = computed(() => { + if (themeMode.value === 'light') return SunnyOutline + if (themeMode.value === 'dark') return MoonOutline + return ContrastOutline +}) + const openUpdateModal = () => { - if (updateInfo.value) { + if (updateInfo.value && updateInfo.value.available) { showUpdateModal.value = true } } @@ -154,6 +173,25 @@ const handleApplyServerUpdate = () => {
+ +
+ +
+ + + +
+
+
@@ -177,7 +215,7 @@ const handleApplyServerUpdate = () => { GoTunnel
- v{{ version }} + {{ version.startsWith('v') ? version : 'v' + version }}