zwgczx/zwpanel
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

所有的子应用适配深色

Browse Source
This commit is contained in:
Sun 2024-01-09 23:35:13 +08:00
parent 7bbdecd244
commit 359a5fe7a1
8 changed files with 50 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@ -1,10 +1,11 @@
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<html>
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<meta content="yes" name="apple-mobile-web-app-capable"/>
<link rel="apple-touch-icon" href="/favicon.ico">
<link rel="stylesheet" href="./static/global.css">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
<title>Sun-Panel</title>

0
public/static/global.css Normal file
View File

2
src/components/apps/ItemGroupManage/index.vue
View File

@ -139,7 +139,7 @@ onMounted(() => {
</NButton>
</div>
<div class=" overflow-auto w-full mt-[20px] bg-slate-200 rounded-xl" style="height:calc(100% - 65px)">
<div class=" overflow-auto w-full mt-[20px] bg-slate-200 dark:bg-zinc-900 rounded-xl" style="height:calc(100% - 65px)">
<VueDraggable
v-model="groups"
item-key="sort" :animation="300"

2
src/components/apps/Style/index.vue
View File

@ -76,7 +76,7 @@ function resetPanelConfig() {
</script>
<template>
<div class="bg-slate-200 rounded-[10px] p-[8px] overflow-auto">
<div class="bg-slate-200 dark:bg-zinc-900 rounded-[10px] p-[8px] overflow-auto">
<NCard style="border-radius:10px" size="small">
<div class="text-slate-500 mb-[5px] font-bold">
LOGO

2
src/components/apps/UploadFileManager/index.vue
View File

@ -84,7 +84,7 @@ onMounted(() => {
</script>
<template>
<div class="bg-slate-200 p-2 h-full">
<div class="bg-slate-200 dark:bg-zinc-900 p-2 h-full">
<NSpin v-show="loading" size="small" />
<NAlert type="info" :bordered="false">
{{ $t('apps.uploadsFileManager.alertText') }}

30
src/components/apps/UserInfo/index.vue
View File

@ -4,7 +4,7 @@ import { NButton, NCard, NDivider, NForm, NFormItem, NInput, NSelect, useDialog,
import { ref } from 'vue'
import { useAppStore, useAuthStore, usePanelState, useUserStore } from '@/store'
import { languageOptions } from '@/utils/defaultData'
import type { Language } from '@/store/modules/app/helper'
import type { Language, Theme } from '@/store/modules/app/helper'
import { logout } from '@/api'
import { RoundCardModal, SvgIcon } from '@/components/common/'
import { updateInfo, updatePassword } from '@/api/system/user'
@ -19,15 +19,15 @@ const ms = useMessage()
const dialog = useDialog()
const languageValue = ref(appStore.language)
// const themeValue = ref(appStore.theme)
const themeValue = ref(appStore.theme)
const nickName = ref(authStore.userInfo?.name || '')
const isEditNickNameStatus = ref(false)
const formRef = ref<FormInst | null>(null)
// const themeOptions: { label: string; key: string; value: Theme }[] = [
// { label: t('apps.userInfo.themeStyle.dark'), key: 'dark', value: 'dark' },
// { label: t('apps.userInfo.themeStyle.light'), key: 'light', value: 'light' },
// { label: t('apps.userInfo.themeStyle.auto'), key: 'Auto', value: 'auto' },
// ]
const themeOptions: { label: string; key: string; value: Theme }[] = [
{ label: t('apps.userInfo.themeStyle.dark'), key: 'dark', value: 'dark' },
{ label: t('apps.userInfo.themeStyle.light'), key: 'light', value: 'light' },
{ label: t('apps.userInfo.themeStyle.auto'), key: 'Auto', value: 'auto' },
]
const updatePasswordModalState = ref({
show: false,
loading: false,
@ -138,15 +138,15 @@ function handleChangeLanuage(value: Language) {
location.reload()
}
// function handleChangeTheme(value: Theme) {
// themeValue.value = value
// appStore.setTheme(value)
// // location.reload()
// }
function handleChangeTheme(value: Theme) {
themeValue.value = value
appStore.setTheme(value)
// location.reload()
}
</script>
<template>
<div class="bg-slate-200 p-2 h-full">
<div class="bg-slate-200 dark:bg-zinc-900 p-2 h-full">
<NCard style="border-radius:10px" size="small">
<div>
<div class="text-slate-500 font-bold">
@ -187,14 +187,14 @@ function handleChangeLanuage(value: Language) {
</div>
</div>
<!-- <div class="mt-[10px]">
<div class="mt-[10px]">
<div class="text-slate-500 font-bold">
{{ $t('apps.userInfo.theme') }}
</div>
<div class="max-w-[200px]">
<NSelect v-model:value="themeValue" :options="themeOptions" @update-value="handleChangeTheme" />
</div>
</div> -->
</div>
<NDivider style="margin: 10px 0;" dashed />
<div>

51
src/views/home/components/AppStarter/index.vue
View File

@ -11,7 +11,6 @@ interface App {
icon: string
auth?: number
}
const props = defineProps<{
visible: boolean
}>()
@ -129,9 +128,9 @@ onUnmounted(() => {
</div>
</div>
</template>
<div class="w-full h-full">
<div class="w-full h-full app-starter-modal-content">
<NSpace vertical size="large" style="height: 100%;width: 100%;">
<NLayout has-sider>
<NLayout has-sider style="border-radius:0.75rem;">
<NLayoutSider
v-model:collapsed="collapsed"
collapse-mode="width"
@ -140,39 +139,41 @@ onUnmounted(() => {
style="height: 100%;"
content-style="overflow: hidden"
>
<div
class="p-[5px] bg-slate-200 rounded-xl overflow-auto"
:style="{
width: isSmallScreen ? '100%' : '220px',
minWidth: '200px',
height,
}"
>
<div class="w-full h-full dark:bg-[#2c2c32]">
<div
v-for=" (item, index) in apps"
:key="index"
:style="{ color: componentName === item.componentName ? 'var(--n-color-target)' : '' }"
@click="handleClickApp(item)"
class="p-[5px] bg-slate-200 dark:bg-zinc-900 rounded-xl overflow-auto"
:style="{
width: isSmallScreen ? '100%' : '220px',
minWidth: '200px',
height,
}"
>
<div
class="bg-white p-[10px] rounded-lg mb-[5px] font-bold cursor-pointer flex items-center"
v-for=" (item, index) in apps"
:key="index"
:style="{ color: componentName === item.componentName ? 'var(--n-color-target)' : '' }"
@click="handleClickApp(item)"
>
<div class="flex items-center justify-center">
<div class="text-lg">
<SvgIcon :icon="item.icon" />
<div
class="bg-white dark:bg-zinc-800 p-[10px] rounded-lg mb-[5px] font-bold cursor-pointer flex items-center"
>
<div class="flex items-center justify-center">
<div class="text-lg">
<SvgIcon :icon="item.icon" />
</div>
<span class="ml-2">{{ item.name }}</span>
</div>
<span class="ml-2">{{ item.name }}</span>
</div>
<!-- 更多按钮 -->
<!-- <div class="ml-auto">
<SvgIcon icon="mingcute-more-1-fill" />
</div> -->
</div>
</div>
</div>
</div>
</NLayoutSider>
<NLayoutContent :content-style="{ height }">
<div class="rounded-lg h-full overflow-auto transition-all duration-500 min-w-[300px] h-full" :class="(isSmallScreen && !collapsed) ? 'opacity-0' : 'opacity-100'">
<div class="rounded-2xl h-full overflow-auto transition-all duration-500 min-w-[300px] h-full" :class="(isSmallScreen && !collapsed) ? 'opacity-0' : 'opacity-100'">
<AppLoader :component-name="componentName" class="h-full" />
</div>
</NLayoutContent>
@ -188,3 +189,9 @@ onUnmounted(() => {
text-shadow: 0px 0px 5px gray;
}
</style>
<style>
.dark .app-starter-modal-content .n-layout{
background-color: #2c2c32;
}
</style>

2
src/views/home/index.vue
View File

@ -43,7 +43,7 @@ const dropdownShow = ref(false)
const currentRightSelectItem = ref<Panel.ItemInfo | null>(null)
const currentAddItenIconGroupId = ref<number | undefined>()
const settingModalShow = ref(false)
const settingModalShow = ref(true)
const items = ref<ItemGroup[]>([])
const filterItems = ref<ItemGroup[]>([])