feat: 移除用户菜单中的设置切换选项

This commit is contained in:
Guo Tiantian
2025-09-09 22:56:39 +08:00
parent 3d4a8fd7b0
commit 8f06deaea4
8 changed files with 190 additions and 156 deletions
+10 -2
View File
@@ -16,7 +16,11 @@ export const SHOW_TAGS_VIEW_KEY = "showTagsView";
export const SHOW_APP_LOGO_KEY = "showAppLogo";
export const SHOW_WATERMARK_KEY = "showWatermark";
export const SHOW_SETTINGS_KEY = "showSettings";
export const SHOW_DESKTOP_TOOLS_KEY = "showDesktopTools";
export const SHOW_MENU_SEARCH_KEY = "showMenuSearch";
export const SHOW_FULLSCREEN_KEY = "showFullscreen";
export const SHOW_SIZE_SELECT_KEY = "showSizeSelect";
export const SHOW_LANG_SELECT_KEY = "showLangSelect";
export const SHOW_NOTIFICATION_KEY = "showNotification";
export const LAYOUT_KEY = "layout";
export const SIDEBAR_COLOR_SCHEME_KEY = "sidebarColorScheme";
export const THEME_KEY = "theme";
@@ -42,7 +46,11 @@ export const SETTINGS_KEYS = {
SHOW_APP_LOGO: SHOW_APP_LOGO_KEY,
SHOW_WATERMARK: SHOW_WATERMARK_KEY,
SHOW_SETTINGS: SHOW_SETTINGS_KEY,
SHOW_DESKTOP_TOOLS: SHOW_DESKTOP_TOOLS_KEY,
SHOW_MENU_SEARCH: SHOW_MENU_SEARCH_KEY,
SHOW_FULLSCREEN: SHOW_FULLSCREEN_KEY,
SHOW_SIZE_SELECT: SHOW_SIZE_SELECT_KEY,
SHOW_LANG_SELECT: SHOW_LANG_SELECT_KEY,
SHOW_NOTIFICATION: SHOW_NOTIFICATION_KEY,
SIDEBAR_COLOR_SCHEME: SIDEBAR_COLOR_SCHEME_KEY,
LAYOUT: LAYOUT_KEY,
THEME_COLOR: THEME_COLOR_KEY,
+6 -8
View File
@@ -136,14 +136,6 @@ export default {
profile: "User Profile",
config: "Config Center",
tour: "Project Tour",
showSettings: "Show Project Settings",
hideSettings: "Hide Project Settings",
showDesktopTools: "Show Desktop Tools",
hideDesktopTools: "Hide Desktop Tools",
settingsEnabled: "Project settings button enabled",
settingsDisabled: "Project settings button disabled",
desktopToolsEnabled: "Desktop tools enabled",
desktopToolsDisabled: "Desktop tools disabled",
refresh: "Refresh",
close: "Close",
closeLeft: "Close Left",
@@ -185,6 +177,12 @@ export default {
showAppLogo: "Show App Logo",
sidebarColorScheme: "Sidebar Color Scheme",
showWatermark: "Show Watermark",
showDesktopTools: "Desktop Tools Settings",
showMenuSearch: "Show Menu Search",
showFullscreen: "Show Fullscreen Toggle",
showSizeSelect: "Show Layout Size",
showLangSelect: "Show Language Select",
showNotification: "Show Notification",
classicBlue: "Classic Blue",
minimalWhite: "Minimal White",
copyConfig: "Copy Config",
+6 -8
View File
@@ -136,14 +136,6 @@ export default {
profile: "个人中心",
config: "配置中心",
tour: "项目引导",
showSettings: "打开项目配置",
hideSettings: "隐藏项目配置",
showDesktopTools: "打开顶部工具",
hideDesktopTools: "隐藏顶部工具",
settingsEnabled: "已打开项目配置按钮",
settingsDisabled: "已隐藏项目配置按钮",
desktopToolsEnabled: "已打开顶部工具",
desktopToolsDisabled: "已隐藏顶部工具",
refresh: "刷新",
close: "关闭",
closeLeft: "关闭左侧",
@@ -189,6 +181,12 @@ export default {
showTagsView: "显示页签",
showAppLogo: "显示Logo",
showWatermark: "显示水印",
showDesktopTools: "桌面端工具设置",
showMenuSearch: "显示菜单搜索",
showFullscreen: "显示全屏切换",
showSizeSelect: "显示布局大小",
showLangSelect: "显示语言选择",
showNotification: "显示通知",
classicBlue: "经典蓝",
minimalWhite: "极简白",
copyConfig: "复制配置",
@@ -1,31 +1,31 @@
<template>
<div ref="navbar-actions" :class="['navbar-actions', navbarActionsClass]">
<!-- 桌面端工具项 -->
<template v-if="isDesktop && settingStore.showDesktopTools">
<template v-if="isDesktop">
<!-- 搜索 -->
<div class="navbar-actions__item">
<div v-if="settingStore.showMenuSearch" class="navbar-actions__item">
<MenuSearch />
</div>
<!-- 全屏 -->
<div class="navbar-actions__item">
<div v-if="settingStore.showFullscreen" class="navbar-actions__item">
<Fullscreen />
</div>
<!-- 布局大小 -->
<div class="navbar-actions__item">
<div v-if="settingStore.showSizeSelect" class="navbar-actions__item">
<SizeSelect />
</div>
<!-- 语言选择 -->
<div class="navbar-actions__item">
<div v-if="settingStore.showLangSelect" class="navbar-actions__item">
<LangSelect />
</div>
</template>
<!-- 通知 -->
<div class="navbar-actions__item">
<div v-if="settingStore.showNotification" class="navbar-actions__item">
<Notification />
</div>
@@ -63,14 +63,6 @@
<el-icon><Position /></el-icon>
{{ t("navbar.tour") }}
</el-dropdown-item>
<el-dropdown-item divided @click="handleToggleSettings">
<el-icon><Tools /></el-icon>
{{ settingStore.showSettings ? t('navbar.hideSettings') : t('navbar.showSettings') }}
</el-dropdown-item>
<el-dropdown-item @click="handleToggleDesktopTools">
<el-icon><Operation /></el-icon>
{{ settingStore.showDesktopTools ? t('navbar.hideDesktopTools') : t('navbar.showDesktopTools') }}
</el-dropdown-item>
<el-dropdown-item divided @click="handlelockScreen">
<el-icon><Lock /></el-icon>
{{ t("navbar.lock") }}
@@ -183,25 +175,6 @@ function handleTourClick() {
}
}
/**
* 切换项目配置显示状态
*/
function handleToggleSettings() {
settingStore.updateSetting('showSettings', !settingStore.showSettings);
ElMessage.success(
settingStore.showSettings ? t('navbar.settingsEnabled') : t('navbar.settingsDisabled')
);
}
/**
* 切换桌面端工具项打开状态
*/
function handleToggleDesktopTools() {
settingStore.updateSetting('showDesktopTools', !settingStore.showDesktopTools);
ElMessage.success(
settingStore.showDesktopTools ? t('navbar.desktopToolsEnabled') : t('navbar.desktopToolsDisabled')
);
}
/**
* 锁屏
@@ -74,6 +74,9 @@
</div> -->
<!-- 自定义主题颜色选择器 -->
<div class="theme-color-selector">
<div class="color-label">
<span class="text-xs">{{ t("settings.themeColor") }}</span>
</div>
<div class="color-options">
<!-- 预设颜色选项 -->
<div
@@ -140,6 +143,34 @@
<span class="text-xs">{{ t("settings.showWatermark") }}</span>
<el-switch v-model="settingsStore.showWatermark" />
</div>
<!-- 桌面端工具项控制 -->
<el-divider>{{ t("settings.showDesktopTools") }}</el-divider>
<div class="flex-x-between">
<span class="text-xs">{{ t("settings.showMenuSearch") }}</span>
<el-switch v-model="settingsStore.showMenuSearch" />
</div>
<div class="flex-x-between">
<span class="text-xs">{{ t("settings.showFullscreen") }}</span>
<el-switch v-model="settingsStore.showFullscreen" />
</div>
<div class="flex-x-between">
<span class="text-xs">{{ t("settings.showSizeSelect") }}</span>
<el-switch v-model="settingsStore.showSizeSelect" />
</div>
<div class="flex-x-between">
<span class="text-xs">{{ t("settings.showLangSelect") }}</span>
<el-switch v-model="settingsStore.showLangSelect" />
</div>
<div class="flex-x-between">
<span class="text-xs">{{ t("settings.showNotification") }}</span>
<el-switch v-model="settingsStore.showNotification" />
</div>
</section>
</div>
@@ -223,7 +254,7 @@ const colorPresets = themeColorPresets;
const settingsStore = useSettingsStore();
// 主题颜色选择器相关
const displayColorPresets = computed(() => themeColorPresets.slice(0, 9)); // 只显示前9个预设颜色
const displayColorPresets = computed(() => themeColorPresets.slice(0, 7)); // 只显示前9个预设颜色
const allColorPresets = themeColorPresets; // 所有颜色预设,用于自定义颜色选择器
// 判断当前颜色是否为自定义颜色(不在前7个预设中)
@@ -339,6 +370,11 @@ const generateSettingsCode = (): string => {
showSettings: true,
showTagsView: settingsStore.showTagsView,
showAppLogo: settingsStore.showAppLogo,
showMenuSearch: settingsStore.showMenuSearch,
showFullscreen: settingsStore.showFullscreen,
showSizeSelect: settingsStore.showSizeSelect,
showLangSelect: settingsStore.showLangSelect,
showNotification: settingsStore.showNotification,
layout: `LayoutMode.${settingsStore.layout.toUpperCase()}`,
theme: `ThemeMode.${settingsStore.theme.toUpperCase()}`,
size: "ComponentSize.DEFAULT",
@@ -355,6 +391,11 @@ const generateSettingsCode = (): string => {
showSettings: ${settings.showSettings},
showTagsView: ${settings.showTagsView},
showAppLogo: ${settings.showAppLogo},
showMenuSearch: ${settings.showMenuSearch},
showFullscreen: ${settings.showFullscreen},
showSizeSelect: ${settings.showSizeSelect},
showLangSelect: ${settings.showLangSelect},
showNotification: ${settings.showNotification},
layout: ${settings.layout},
theme: ${settings.theme},
size: ${settings.size},
@@ -484,14 +525,14 @@ const handleCloseDrawer = () => {
height: 80px;
overflow: hidden;
cursor: pointer;
background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
background: var(--el-bg-color);
border: 2px solid var(--el-border-color-light);
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: var(--el-box-shadow-light);
transition: all 0.3s var(--el-transition-duration);
&:hover {
background: linear-gradient(145deg, #ffffff 0%, var(--el-color-primary-light-9) 100%);
background: var(--el-color-primary-light-9);
border-color: var(--el-color-primary-light-3);
transform: translateY(-4px) scale(1.05);
}
@@ -513,11 +554,7 @@ const handleCloseDrawer = () => {
right: 4px;
left: 4px;
height: 8px;
background: linear-gradient(
90deg,
var(--el-color-primary) 0%,
var(--el-color-primary-light-3) 100%
);
background: var(--el-color-primary);
border-radius: 2px;
}
@@ -525,17 +562,13 @@ const handleCloseDrawer = () => {
position: absolute;
left: 4px;
width: 12px;
background: linear-gradient(
180deg,
var(--el-color-primary-dark-2) 0%,
var(--el-color-primary) 100%
);
background: var(--el-color-primary-light-3);
border-radius: 2px;
}
.layout-main {
position: absolute;
background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
background: var(--el-fill-color-light);
border: 1px solid var(--el-border-color-lighter);
border-radius: 2px;
}
@@ -562,7 +595,7 @@ const handleCloseDrawer = () => {
width: 16px;
height: 16px;
font-size: 10px;
color: white;
color: var(--el-color-white);
background: var(--el-color-success);
border-radius: 50%;
}
@@ -612,11 +645,7 @@ const handleCloseDrawer = () => {
}
&.is-active {
background: linear-gradient(
145deg,
var(--el-color-primary-light-9) 0%,
var(--el-color-primary-light-8) 100%
);
background: var(--el-color-primary-light-9);
border-color: var(--el-color-primary);
transform: translateY(-2px) scale(1.08);
@@ -639,33 +668,34 @@ const handleCloseDrawer = () => {
}
.layout-item {
background: linear-gradient(145deg, var(--el-bg-color) 0%, var(--el-bg-color-page) 100%);
background: var(--el-bg-color);
border-color: var(--el-border-color);
&:hover {
background: linear-gradient(
145deg,
var(--el-bg-color-page) 0%,
var(--el-color-primary-light-9) 100%
);
background: var(--el-color-primary-light-9);
}
&.is-active {
background: linear-gradient(
145deg,
var(--el-color-primary-light-9) 0%,
var(--el-color-primary-light-8) 100%
);
background: var(--el-color-primary-light-9);
}
.layout-main {
background: linear-gradient(135deg, var(--el-fill-color) 0%, var(--el-fill-color-light) 100%);
background: var(--el-fill-color);
}
}
}
/* 主题颜色选择器样式 */
.theme-color-selector {
display: flex;
align-items: center;
gap: 12px;
.color-label {
flex-shrink: 0;
min-width: 60px;
}
.color-options {
display: flex;
gap: 8px;
@@ -680,19 +710,19 @@ const handleCloseDrawer = () => {
cursor: pointer;
border: 2px solid var(--el-border-color-light);
border-radius: 6px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: all 0.3s var(--el-transition-duration);
box-shadow: var(--el-box-shadow-light);
&:hover {
transform: translateY(-2px) scale(1.05);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
box-shadow: var(--el-box-shadow);
border-color: var(--el-color-primary-light-3);
}
&.is-active {
border-color: var(--el-color-primary);
transform: translateY(-1px) scale(1.08);
box-shadow: 0 4px 16px rgba(64, 128, 255, 0.3);
box-shadow: var(--el-box-shadow-dark);
}
.color-check {
@@ -704,43 +734,42 @@ const handleCloseDrawer = () => {
justify-content: center;
width: 16px;
height: 16px;
color: white;
background: rgba(0, 0, 0, 0.6);
color: var(--el-color-white);
background: var(--el-overlay-color-lighter);
border-radius: 50%;
transform: translate(-50%, -50%);
font-size: 10px;
backdrop-filter: blur(2px);
}
}
.color-picker-wrapper {
.custom-color-picker {
:deep(.el-color-picker__trigger) {
width: 22px !important;
height: 22px !important;
border: 2px solid var(--el-border-color-light) !important;
border-radius: 6px !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
.custom-color-picker {
:deep(.el-color-picker__trigger) {
width: 22px;
height: 22px;
border: 2px solid var(--el-border-color-light);
border-radius: 6px;
transition: all 0.3s var(--el-transition-duration);
box-shadow: var(--el-box-shadow-light);
&:hover {
transform: translateY(-2px) scale(1.05) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
border-color: var(--el-color-primary-light-3) !important;
&:hover {
transform: translateY(-2px) scale(1.05);
box-shadow: var(--el-box-shadow);
border-color: var(--el-color-primary-light-3);
}
}
}
:deep(.el-color-picker__color) {
border: none !important;
border-radius: 3px !important;
border: none;
border-radius: 3px;
}
:deep(.el-color-picker__color-inner) {
border-radius: 3px !important;
border-radius: 3px;
}
:deep(.el-color-picker__icon) {
font-size: 10px !important;
font-size: 10px;
}
}
}
@@ -752,23 +781,23 @@ const handleCloseDrawer = () => {
.theme-color-selector {
.color-option {
border-color: var(--el-border-color);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
box-shadow: var(--el-box-shadow-light);
&:hover {
border-color: var(--el-color-primary-light-3);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
box-shadow: var(--el-box-shadow);
}
}
.color-picker-wrapper {
.custom-color-picker {
:deep(.el-color-picker__trigger) {
border-color: var(--el-border-color) !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
border-color: var(--el-border-color);
box-shadow: var(--el-box-shadow-light);
&:hover {
border-color: var(--el-color-primary-light-3) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
border-color: var(--el-color-primary-light-3);
box-shadow: var(--el-box-shadow);
}
}
}
@@ -776,6 +805,7 @@ const handleCloseDrawer = () => {
}
}
/* 复制配置对话框样式 */
:deep(.copy-config-dialog) {
.el-message-box__content {
+8 -3
View File
@@ -10,10 +10,15 @@ export const defaultSettings: AppSettings = {
title: pkg.name,
// 系统版本
version: pkg.version,
// 是否显示设置
// 是否显示设置按钮
showSettings: true,
// 是否显示桌面端工具项
showDesktopTools: true,
// 桌面端工具项单独控制
showMenuSearch: true,
showFullscreen: true,
showSizeSelect: true,
showLangSelect: true,
// 是否显示通知
showNotification: true,
// 是否显示标签视图
showTagsView: true,
// 是否显示应用Logo
+49 -35
View File
@@ -12,7 +12,13 @@ interface SettingsState {
showAppLogo: boolean;
showWatermark: boolean;
showSettings: boolean;
showDesktopTools: boolean;
// 桌面端工具显示设置
showMenuSearch: boolean;
showFullscreen: boolean;
showSizeSelect: boolean;
showLangSelect: boolean;
showNotification: boolean;
// 布局设置
layout: LayoutMode;
@@ -31,38 +37,23 @@ export const useSettingsStore = defineStore("setting", () => {
// 🎯 基础设置 - 非持久化
const settingsVisible = ref<boolean>(false);
// 🎯 持久化设置 - 使用分组常量
const showTagsView = useStorage<boolean>(
SETTINGS_KEYS.SHOW_TAGS_VIEW,
defaultSettings.showTagsView
);
// 🎯 界面显示设置 - 持久化
const showTagsView = useStorage<boolean>(SETTINGS_KEYS.SHOW_TAGS_VIEW, defaultSettings.showTagsView);
const showAppLogo = useStorage<boolean>(SETTINGS_KEYS.SHOW_APP_LOGO, defaultSettings.showAppLogo);
const showWatermark = useStorage<boolean>(SETTINGS_KEYS.SHOW_WATERMARK, defaultSettings.showWatermark);
const showSettings = useStorage<boolean>(SETTINGS_KEYS.SHOW_SETTINGS, defaultSettings.showSettings);
const showWatermark = useStorage<boolean>(
SETTINGS_KEYS.SHOW_WATERMARK,
defaultSettings.showWatermark
);
const showSettings = useStorage<boolean>(
SETTINGS_KEYS.SHOW_SETTINGS,
defaultSettings.showSettings
);
const showDesktopTools = useStorage<boolean>(
SETTINGS_KEYS.SHOW_DESKTOP_TOOLS,
defaultSettings.showDesktopTools
);
const sidebarColorScheme = useStorage<string>(
SETTINGS_KEYS.SIDEBAR_COLOR_SCHEME,
defaultSettings.sidebarColorScheme
);
// 🎯 桌面端工具设置 - 持久化
const showMenuSearch = useStorage<boolean>(SETTINGS_KEYS.SHOW_MENU_SEARCH, defaultSettings.showMenuSearch);
const showFullscreen = useStorage<boolean>(SETTINGS_KEYS.SHOW_FULLSCREEN, defaultSettings.showFullscreen);
const showSizeSelect = useStorage<boolean>(SETTINGS_KEYS.SHOW_SIZE_SELECT, defaultSettings.showSizeSelect);
const showLangSelect = useStorage<boolean>(SETTINGS_KEYS.SHOW_LANG_SELECT, defaultSettings.showLangSelect);
const showNotification = useStorage<boolean>(SETTINGS_KEYS.SHOW_NOTIFICATION, defaultSettings.showNotification);
// 🎯 布局和主题设置 - 持久化
const sidebarColorScheme = useStorage<string>(SETTINGS_KEYS.SIDEBAR_COLOR_SCHEME, defaultSettings.sidebarColorScheme);
const layout = useStorage<LayoutMode>(SETTINGS_KEYS.LAYOUT, defaultSettings.layout as LayoutMode);
const themeColor = useStorage<string>(SETTINGS_KEYS.THEME_COLOR, defaultSettings.themeColor);
const theme = useStorage<ThemeMode>(SETTINGS_KEYS.THEME, defaultSettings.theme);
// 🎯 设置项映射
@@ -71,7 +62,11 @@ export const useSettingsStore = defineStore("setting", () => {
showAppLogo,
showWatermark,
showSettings,
showDesktopTools,
showMenuSearch,
showFullscreen,
showSizeSelect,
showLangSelect,
showNotification,
sidebarColorScheme,
layout,
} as const;
@@ -136,11 +131,20 @@ export const useSettingsStore = defineStore("setting", () => {
// 🎯 批量重置设置
function resetSettings(): void {
// 界面显示设置
showTagsView.value = defaultSettings.showTagsView;
showAppLogo.value = defaultSettings.showAppLogo;
showWatermark.value = defaultSettings.showWatermark;
showSettings.value = defaultSettings.showSettings;
showDesktopTools.value = defaultSettings.showDesktopTools;
// 桌面端工具设置
showMenuSearch.value = defaultSettings.showMenuSearch;
showFullscreen.value = defaultSettings.showFullscreen;
showSizeSelect.value = defaultSettings.showSizeSelect;
showLangSelect.value = defaultSettings.showLangSelect;
showNotification.value = defaultSettings.showNotification;
// 布局和主题设置
sidebarColorScheme.value = defaultSettings.sidebarColorScheme;
layout.value = defaultSettings.layout as LayoutMode;
themeColor.value = defaultSettings.themeColor;
@@ -148,31 +152,41 @@ export const useSettingsStore = defineStore("setting", () => {
}
return {
// 状态
// 🎯 基础状态
settingsVisible,
// 🎯 界面显示状态
showTagsView,
showAppLogo,
showWatermark,
showSettings,
showDesktopTools,
// 🎯 桌面端工具状态
showMenuSearch,
showFullscreen,
showSizeSelect,
showLangSelect,
showNotification,
// 🎯 布局和主题状态
sidebarColorScheme,
layout,
themeColor,
theme,
// 更新方法
// 🎯 更新方法
updateSetting,
updateTheme,
updateThemeColor,
updateSidebarColorScheme,
updateLayout,
// 面板控制
// 🎯 面板控制
toggleSettingsPanel,
showSettingsPanel,
hideSettingsPanel,
// 重置功能
// 🎯 重置功能
resetSettings,
};
});
+11 -3
View File
@@ -62,10 +62,18 @@ declare global {
title: string;
/** 系统版本 */
version: string;
/** 是否显示设置 */
/** 是否显示设置按钮 */
showSettings: boolean;
/** 是否显示桌面端工具项 */
showDesktopTools: boolean;
/** 是否显示菜单搜索 */
showMenuSearch: boolean;
/** 是否显示全屏切换 */
showFullscreen: boolean;
/** 是否显示布局大小 */
showSizeSelect: boolean;
/** 是否显示语言选择 */
showLangSelect: boolean;
/** 是否显示通知 */
showNotification: boolean;
/** 是否显示多标签导航 */
showTagsView: boolean;
/** 是否显示应用Logo */