增加深色/浅色主题切换功能
This commit is contained in:
parent
d08db8a76a
commit
bcada6ead5
@ -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"
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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 {
|
||||||
|
@ -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)
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user