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> <!DOCTYPE html>
<html lang="zh-cmn-Hans"> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="icon" type="image/svg+xml" href="/favicon.svg">
<meta content="yes" name="apple-mobile-web-app-capable"/> <meta content="yes" name="apple-mobile-web-app-capable"/>
<link rel="apple-touch-icon" href="/favicon.ico"> <link rel="apple-touch-icon" href="/favicon.ico">
<link rel="stylesheet" href="./static/global.css">
<meta name="viewport" <meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" /> content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
<title>Sun-Panel</title> <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> </NButton>
</div> </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 <VueDraggable
v-model="groups" v-model="groups"
item-key="sort" :animation="300" item-key="sort" :animation="300"

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

@ -76,7 +76,7 @@ function resetPanelConfig() {
</script> </script>
<template> <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"> <NCard style="border-radius:10px" size="small">
<div class="text-slate-500 mb-[5px] font-bold"> <div class="text-slate-500 mb-[5px] font-bold">
LOGO LOGO

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

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

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

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