增加深色/浅色主题切换功能

This commit is contained in:
aylvn 2025-03-16 16:22:22 +08:00
parent d08db8a76a
commit bcada6ead5
3 changed files with 43 additions and 20 deletions

View File

@ -115,12 +115,23 @@ watch(() => router.currentRoute.value.path, (newValue, oldValue) => {
function activeMenu() { function activeMenu() {
const currRoute = router.currentRoute const currRoute = router.currentRoute
const path = currRoute.value.path const path = currRoute.value.path
// console.log("currRoute path:", path) console.log("currRoute path:", path)
let index = getIndexByPath(path) let index = getIndexByPath(path)
// console.log("index:", index) console.log("index:", index)
if (utils.notNull(index)) { if (utils.notNull(index)) {
return index return index
} }
// ,path,
const lastIndex = path.lastIndexOf('/')
if (lastIndex != -1) {
const newPath = path.substring(0, lastIndex)
console.log("截取后newPath:", newPath)
index = getIndexByPath(newPath)
console.log("截取后index:", index)
if (utils.notNull(index)) {
return index
}
}
return "1" return "1"
} }

View File

@ -143,7 +143,7 @@ header {
width: 100%; width: 100%;
height: 44px; height: 44px;
padding: 0px; padding: 0px;
background-color: var(--el-bg-color); background-color: var(--el-fg-color);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -169,6 +169,7 @@ main {
width: 100%; width: 100%;
padding: 0px; padding: 0px;
overflow: hidden; overflow: hidden;
background-color: var(--el-bg-color);
} }
.menu-logo { .menu-logo {

View File

@ -27,6 +27,13 @@
</el-link> </el-link>
</div> </div>
<!-- 右侧 -->
<div class="fxc">
<div class="mlr-8">
<el-switch v-model="isDark" :active-action-icon="Moon" :inactive-action-icon="Sunny" width="40"
style="--el-switch-on-color: #4c4d4f; --el-switch-off-color: #f2f2f2;" />
</div>
<!-- 右侧固定下拉 --> <!-- 右侧固定下拉 -->
<el-dropdown trigger="click" @command="handleSwitchLang" class="fxc plr-16"> <el-dropdown trigger="click" @command="handleSwitchLang" class="fxc plr-16">
<span class="el-dropdown-link"> <span class="el-dropdown-link">
@ -44,14 +51,18 @@
</template> </template>
</el-dropdown> </el-dropdown>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
import { onMounted, ref } from 'vue' import { onMounted, ref } from 'vue'
import { ArrowDown, Refresh } from '@element-plus/icons-vue' import { ArrowDown, Refresh, Moon, Sunny } from '@element-plus/icons-vue'
import { useConfig } from '@/store/config' import { useConfig } from '@/store/config'
/** 暗黑主题切换 */
import { useDark } from '@vueuse/core'
const config = useConfig() const config = useConfig()
const isDark = useDark()
const modelList = ref(config.modelList) const modelList = ref(config.modelList)