style(api): 统一代码格式化规范
- 调整 import 语句格式，统一空格和引号风格 - 修复函数参数跨行时的格式对齐问题 - 清理多余空行和注释中的空白字符 - 统一对象属性结尾逗号的使用规范 - 规范化字符串拼接和模板语法的格式 - 优化长参数列表的换行和缩进格式
This commit is contained in:
@@ -7,127 +7,127 @@
|
||||
:overlay-style="{ padding: '0 10px' }"
|
||||
>
|
||||
<a-badge :count="unreadNum" dot class="ele-notice-trigger" :offset="[4, 6]">
|
||||
<bell-outlined style="padding: 8px 0"/>
|
||||
<bell-outlined style="padding: 8px 0" />
|
||||
</a-badge>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {computed, ref} from 'vue';
|
||||
// import {useChatStore} from '@/store/modules/chat';
|
||||
import {useUserStore} from '@/store/modules/user';
|
||||
import {pageChatMessage} from '@/api/system/chat';
|
||||
import {ChatMessage} from '@/api/system/chat/model';
|
||||
import { computed, ref } from 'vue';
|
||||
// import {useChatStore} from '@/store/modules/chat';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { pageChatMessage } from '@/api/system/chat';
|
||||
import { ChatMessage } from '@/api/system/chat/model';
|
||||
|
||||
// const chatStore = useChatStore();
|
||||
const userStore = useUserStore();
|
||||
// 是否显示
|
||||
const visible = ref<boolean>(false);
|
||||
// 通知数据
|
||||
const notice = ref<ChatMessage[]>([]);
|
||||
// const chatStore = useChatStore();
|
||||
const userStore = useUserStore();
|
||||
// 是否显示
|
||||
const visible = ref<boolean>(false);
|
||||
// 通知数据
|
||||
const notice = ref<ChatMessage[]>([]);
|
||||
|
||||
console.log(userStore.info?.userId,'.....userId')
|
||||
// chatStore.connectSocketIO(userStore.info?.userId || 0);
|
||||
console.log(userStore.info?.userId, '.....userId');
|
||||
// chatStore.connectSocketIO(userStore.info?.userId || 0);
|
||||
|
||||
// 未读数量
|
||||
const unreadNum = computed(() => {
|
||||
return notice.value.length;
|
||||
});
|
||||
|
||||
/* 查询数据 */
|
||||
// const query = () => {
|
||||
// pageNotices({ status: 0 })
|
||||
// .then((result) => {
|
||||
// notice.value = result?.list;
|
||||
// })
|
||||
// .catch((e) => {
|
||||
// message.error(e.message);
|
||||
// });
|
||||
//
|
||||
// pageTodos({ status: 0 })
|
||||
// .then((result) => {
|
||||
// todo.value = result?.list;
|
||||
// })
|
||||
// .catch((e) => {
|
||||
// message.error(e.message);
|
||||
// });
|
||||
// };
|
||||
|
||||
/* 查询未读数量 */
|
||||
const queryUnReadNum = () => {
|
||||
const toUserId = Number(userStore.info?.userId || 0);
|
||||
console.log(toUserId);
|
||||
const status = 0;
|
||||
pageChatMessage({toUserId, status, keywords: ''}).then((result) => {
|
||||
console.log(result);
|
||||
notice.value = result?.list || [];
|
||||
// 未读数量
|
||||
const unreadNum = computed(() => {
|
||||
return notice.value.length;
|
||||
});
|
||||
};
|
||||
|
||||
queryUnReadNum();
|
||||
/* 查询数据 */
|
||||
// const query = () => {
|
||||
// pageNotices({ status: 0 })
|
||||
// .then((result) => {
|
||||
// notice.value = result?.list;
|
||||
// })
|
||||
// .catch((e) => {
|
||||
// message.error(e.message);
|
||||
// });
|
||||
//
|
||||
// pageTodos({ status: 0 })
|
||||
// .then((result) => {
|
||||
// todo.value = result?.list;
|
||||
// })
|
||||
// .catch((e) => {
|
||||
// message.error(e.message);
|
||||
// });
|
||||
// };
|
||||
|
||||
/* 查询未读数量 */
|
||||
const queryUnReadNum = () => {
|
||||
const toUserId = Number(userStore.info?.userId || 0);
|
||||
console.log(toUserId);
|
||||
const status = 0;
|
||||
pageChatMessage({ toUserId, status, keywords: '' }).then((result) => {
|
||||
console.log(result);
|
||||
notice.value = result?.list || [];
|
||||
});
|
||||
};
|
||||
|
||||
queryUnReadNum();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import {BellOutlined} from '@ant-design/icons-vue';
|
||||
import { BellOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'HeaderNotice',
|
||||
components: {
|
||||
BellOutlined
|
||||
}
|
||||
};
|
||||
export default {
|
||||
name: 'HeaderNotice',
|
||||
components: {
|
||||
BellOutlined
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.ele-notice-trigger.ant-badge {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.ele-notice-pop {
|
||||
&.ant-dropdown-menu {
|
||||
padding: 0;
|
||||
width: 286px;
|
||||
max-width: 100%;
|
||||
margin-top: 11px;
|
||||
.ele-notice-trigger.ant-badge {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
// 内容
|
||||
.ant-list-item {
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
transition: background-color 0.3s;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: hsla(0, 0%, 60%, 0.05);
|
||||
.ele-notice-pop {
|
||||
&.ant-dropdown-menu {
|
||||
padding: 0;
|
||||
width: 286px;
|
||||
max-width: 100%;
|
||||
margin-top: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// 操作按钮
|
||||
.ele-notice-actions {
|
||||
border-top: 1px solid hsla(0, 0%, 60%, 0.15);
|
||||
|
||||
& > .ele-cell-content {
|
||||
line-height: 46px;
|
||||
text-align: center;
|
||||
// 内容
|
||||
.ant-list-item {
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
transition: background-color 0.3s;
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
background: hsla(0, 0%, 60%, 0.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ele-cell-content {
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ant-tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// 操作按钮
|
||||
.ele-notice-actions {
|
||||
border-top: 1px solid hsla(0, 0%, 60%, 0.15);
|
||||
|
||||
& > .ele-cell-content {
|
||||
line-height: 46px;
|
||||
text-align: center;
|
||||
transition: background-color 0.3s;
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
background: hsla(0, 0%, 60%, 0.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ele-cell-content {
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div class="ele-admin-header-tool">
|
||||
<!-- 消息通知 -->
|
||||
<div class="ele-admin-header-tool-item" @click="openUrl(`/user/notice`)">
|
||||
<header-notice/>
|
||||
<header-notice />
|
||||
</div>
|
||||
<!-- 全屏切换 -->
|
||||
<div
|
||||
@@ -13,8 +13,8 @@
|
||||
]"
|
||||
@click="toggleFullscreen"
|
||||
>
|
||||
<fullscreen-exit-outlined v-if="fullscreen"/>
|
||||
<fullscreen-outlined v-else/>
|
||||
<fullscreen-exit-outlined v-if="fullscreen" />
|
||||
<fullscreen-outlined v-else />
|
||||
</div>
|
||||
<!-- 用户信息 -->
|
||||
<div class="ele-admin-header-tool-item">
|
||||
@@ -22,13 +22,13 @@
|
||||
<div class="ele-admin-header-avatar">
|
||||
<a-avatar :src="loginUser?.avatar">
|
||||
<template v-if="!loginUser?.avatar" #icon>
|
||||
<user-outlined/>
|
||||
<user-outlined />
|
||||
</template>
|
||||
</a-avatar>
|
||||
<span :class="{ 'hidden-sm-and-down': styleResponsive }">
|
||||
{{ loginUser.nickname }}
|
||||
</span>
|
||||
<down-outlined style="margin-left: 6px"/>
|
||||
<down-outlined style="margin-left: 6px" />
|
||||
</div>
|
||||
<template #overlay>
|
||||
<a-menu :selectable="false" @click="onUserDropClick">
|
||||
@@ -38,13 +38,15 @@
|
||||
<div class="nickname">
|
||||
<div class="ele-text-placeholder">
|
||||
<span class="text-gray-500 text-lg">{{
|
||||
website?.websiteName
|
||||
}}</span>
|
||||
website?.websiteName
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="text-gray-400">
|
||||
用户ID：<span class="ele-text-secondary" @click="copyText(loginUser.userId)">{{
|
||||
loginUser.userId
|
||||
}}</span>
|
||||
用户ID：<span
|
||||
class="ele-text-secondary"
|
||||
@click="copyText(loginUser.userId)"
|
||||
>{{ loginUser.userId }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="text-gray-400">
|
||||
昵称：<span class="ele-text-secondary">{{
|
||||
@@ -57,9 +59,11 @@
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="text-gray-400">
|
||||
租户：<span class="ele-text-secondary" @click="copyText(loginUser.tenantId)">{{
|
||||
loginUser.tenantId
|
||||
}}</span>
|
||||
租户：<span
|
||||
class="ele-text-secondary"
|
||||
@click="copyText(loginUser.tenantId)"
|
||||
>{{ loginUser.tenantId }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="text-gray-400">
|
||||
角色：
|
||||
@@ -78,33 +82,46 @@
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
<a-menu-divider/>
|
||||
<a-menu-divider />
|
||||
<a-menu-item key="profile">
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content"> {{ t('layout.header.profile') }}</div>
|
||||
<div class="ele-cell-content">
|
||||
{{ t('layout.header.profile') }}</div
|
||||
>
|
||||
</div>
|
||||
</a-menu-item>
|
||||
<a-menu-divider/>
|
||||
<a-menu-divider />
|
||||
<a-menu-item key="password">
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content"> {{ t('layout.header.password') }}</div>
|
||||
<div class="ele-cell-content">
|
||||
{{ t('layout.header.password') }}</div
|
||||
>
|
||||
</div>
|
||||
</a-menu-item>
|
||||
<template v-if="loginUser.username == 'admin' || loginUser.username == 'superAdmin'">
|
||||
<a-menu-divider/>
|
||||
<template
|
||||
v-if="
|
||||
loginUser.username == 'admin' ||
|
||||
loginUser.username == 'superAdmin'
|
||||
"
|
||||
>
|
||||
<a-menu-divider />
|
||||
<a-menu-item key="accessKey">
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content"> {{ t('layout.header.accessKey') }}</div>
|
||||
<div class="ele-cell-content">
|
||||
{{ t('layout.header.accessKey') }}</div
|
||||
>
|
||||
</div>
|
||||
</a-menu-item>
|
||||
<a-menu-divider/>
|
||||
<a-menu-divider />
|
||||
<a-menu-item key="system">
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content"> {{ t('layout.header.system') }}</div>
|
||||
<div class="ele-cell-content">
|
||||
{{ t('layout.header.system') }}</div
|
||||
>
|
||||
</div>
|
||||
</a-menu-item>
|
||||
</template>
|
||||
<a-menu-divider/>
|
||||
<a-menu-divider />
|
||||
<a-menu-item key="logout">
|
||||
<div class="ele-cell" align="center">
|
||||
<div class="ele-cell-content">
|
||||
@@ -117,193 +134,193 @@
|
||||
</a-dropdown>
|
||||
</div>
|
||||
<!-- 主题设置 -->
|
||||
<!-- <div class="ele-admin-header-tool-item" @click="openSetting">-->
|
||||
<!-- <more-outlined/>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="ele-admin-header-tool-item" @click="openSetting">-->
|
||||
<!-- <more-outlined/>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
<!-- 修改密码弹窗 -->
|
||||
<password-modal v-model:visible="passwordVisible"/>
|
||||
<password-modal v-model:visible="passwordVisible" />
|
||||
<!-- 主题设置抽屉 -->
|
||||
<setting-drawer v-model:visible="settingVisible"/>
|
||||
<setting-drawer v-model:visible="settingVisible" />
|
||||
<!-- 二维码 -->
|
||||
<Qrcode v-model:visible="showQrcode" :data="SiteUrl" @done="hideShare"/>
|
||||
<Qrcode v-model:visible="showQrcode" :data="SiteUrl" @done="hideShare" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {computed, createVNode, ref} from 'vue';
|
||||
import {useRouter} from 'vue-router';
|
||||
import {useI18n} from 'vue-i18n';
|
||||
import {Modal} from 'ant-design-vue/es';
|
||||
import {
|
||||
DownOutlined,
|
||||
ExclamationCircleOutlined,
|
||||
FullscreenOutlined,
|
||||
FullscreenExitOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import {storeToRefs} from 'pinia';
|
||||
import {copyText, openUrl} from '@/utils/common';
|
||||
import {useThemeStore} from '@/store/modules/theme';
|
||||
import HeaderNotice from './header-notice.vue';
|
||||
import PasswordModal from './password-modal.vue';
|
||||
import SettingDrawer from './setting-drawer.vue';
|
||||
import {useUserStore} from '@/store/modules/user';
|
||||
import {logout} from '@/utils/page-tab-util';
|
||||
import {listRoles} from '@/api/system/role';
|
||||
import { useSiteStore } from '@/store/modules/site';
|
||||
import Qrcode from "@/components/QrCode/index.vue";
|
||||
import {AppInfo} from "@/api/cms/cmsWebsite/model";
|
||||
import {getCmsWebsiteFieldByCode} from "@/api/cms/cmsWebsiteField";
|
||||
import { computed, createVNode, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { Modal } from 'ant-design-vue/es';
|
||||
import {
|
||||
DownOutlined,
|
||||
ExclamationCircleOutlined,
|
||||
FullscreenOutlined,
|
||||
FullscreenExitOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { copyText, openUrl } from '@/utils/common';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import HeaderNotice from './header-notice.vue';
|
||||
import PasswordModal from './password-modal.vue';
|
||||
import SettingDrawer from './setting-drawer.vue';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { logout } from '@/utils/page-tab-util';
|
||||
import { listRoles } from '@/api/system/role';
|
||||
import { useSiteStore } from '@/store/modules/site';
|
||||
import Qrcode from '@/components/QrCode/index.vue';
|
||||
import { AppInfo } from '@/api/cms/cmsWebsite/model';
|
||||
import { getCmsWebsiteFieldByCode } from '@/api/cms/cmsWebsiteField';
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const {styleResponsive} = storeToRefs(themeStore);
|
||||
const SiteUrl = localStorage.getItem('SiteUrl');
|
||||
// 是否显示二维码
|
||||
const showQrcode = ref(false);
|
||||
// 使用网站信息 store
|
||||
const siteStore = useSiteStore();
|
||||
// const TENANT_ID = localStorage.getItem('TenantId');
|
||||
// const TENANT_NAME = localStorage.getItem('TenantName');
|
||||
const emit = defineEmits<{
|
||||
(e: 'fullscreen'): void;
|
||||
}>();
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
const SiteUrl = localStorage.getItem('SiteUrl');
|
||||
// 是否显示二维码
|
||||
const showQrcode = ref(false);
|
||||
// 使用网站信息 store
|
||||
const siteStore = useSiteStore();
|
||||
// const TENANT_ID = localStorage.getItem('TenantId');
|
||||
// const TENANT_NAME = localStorage.getItem('TenantName');
|
||||
const emit = defineEmits<{
|
||||
(e: 'fullscreen'): void;
|
||||
}>();
|
||||
|
||||
defineProps<{
|
||||
// 是否是全屏
|
||||
fullscreen: boolean;
|
||||
}>();
|
||||
defineProps<{
|
||||
// 是否是全屏
|
||||
fullscreen: boolean;
|
||||
}>();
|
||||
|
||||
const {push} = useRouter();
|
||||
const {t} = useI18n();
|
||||
const userStore = useUserStore();
|
||||
// 是否显示修改密码弹窗
|
||||
const passwordVisible = ref(false);
|
||||
const { push } = useRouter();
|
||||
const { t } = useI18n();
|
||||
const userStore = useUserStore();
|
||||
// 是否显示修改密码弹窗
|
||||
const passwordVisible = ref(false);
|
||||
|
||||
// 是否显示主题设置抽屉
|
||||
const settingVisible = ref(false);
|
||||
// 是否显示主题设置抽屉
|
||||
const settingVisible = ref(false);
|
||||
|
||||
// 当前用户信息
|
||||
const loginUser = computed(() => userStore.info ?? {});
|
||||
const website = ref<AppInfo>();
|
||||
// 当前用户信息
|
||||
const loginUser = computed(() => userStore.info ?? {});
|
||||
const website = ref<AppInfo>();
|
||||
|
||||
/* 用户信息下拉点击 */
|
||||
const onUserDropClick = ({key}) => {
|
||||
if (key === 'password') {
|
||||
passwordVisible.value = true;
|
||||
} else if (key === 'profile') {
|
||||
push('/user/profile');
|
||||
} else if (key === 'accessKey') {
|
||||
push('/system/access-key');
|
||||
} else if (key === 'taskAdd') {
|
||||
push('/user/task/add');
|
||||
} else if (key === 'myTask') {
|
||||
push('/user/task/index');
|
||||
} else if (key === 'skin') {
|
||||
settingVisible.value = true;
|
||||
} else if (key === 'system') {
|
||||
push('/system/setting');
|
||||
} else if (key === 'logout') {
|
||||
// 退出登录
|
||||
Modal.confirm({
|
||||
title: t('layout.logout.title'),
|
||||
content: t('layout.logout.message'),
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
logout();
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
/* 用户信息下拉点击 */
|
||||
const onUserDropClick = ({ key }) => {
|
||||
if (key === 'password') {
|
||||
passwordVisible.value = true;
|
||||
} else if (key === 'profile') {
|
||||
push('/user/profile');
|
||||
} else if (key === 'accessKey') {
|
||||
push('/system/access-key');
|
||||
} else if (key === 'taskAdd') {
|
||||
push('/user/task/add');
|
||||
} else if (key === 'myTask') {
|
||||
push('/user/task/index');
|
||||
} else if (key === 'skin') {
|
||||
settingVisible.value = true;
|
||||
} else if (key === 'system') {
|
||||
push('/system/setting');
|
||||
} else if (key === 'logout') {
|
||||
// 退出登录
|
||||
Modal.confirm({
|
||||
title: t('layout.logout.title'),
|
||||
content: t('layout.logout.message'),
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
logout();
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const hideShare = () => {
|
||||
showQrcode.value = false;
|
||||
}
|
||||
const hideShare = () => {
|
||||
showQrcode.value = false;
|
||||
};
|
||||
|
||||
/* 打开主题设置抽屉 */
|
||||
// const openSetting = () => {
|
||||
// settingVisible.value = true;
|
||||
// };
|
||||
/* 打开主题设置抽屉 */
|
||||
// const openSetting = () => {
|
||||
// settingVisible.value = true;
|
||||
// };
|
||||
|
||||
/* 切换全屏 */
|
||||
const toggleFullscreen = () => {
|
||||
emit('fullscreen');
|
||||
};
|
||||
/* 切换全屏 */
|
||||
const toggleFullscreen = () => {
|
||||
emit('fullscreen');
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
// 查询网站信息
|
||||
if (!localStorage.getItem('WebsiteId')) {
|
||||
siteStore.fetchSiteInfo().catch(console.error);
|
||||
}
|
||||
// 查询商户角色的roleId
|
||||
if (!localStorage.getItem('RoleIdByMerchant')) {
|
||||
listRoles({roleCode: 'merchant'}).then((res) => {
|
||||
if (res.length > 0) {
|
||||
const item = res[0];
|
||||
localStorage.setItem('RoleIdByMerchant', `${item.roleId}`);
|
||||
localStorage.setItem('RoleNameByMerchant', `${item.roleName}`);
|
||||
}
|
||||
});
|
||||
}
|
||||
// 检查是否启动自定义接口
|
||||
if(import.meta.env.PROD){
|
||||
getCmsWebsiteFieldByCode('ApiUrl').then(res => {
|
||||
if(res){
|
||||
localStorage.setItem('ApiUrl', `${res.value}`);
|
||||
}
|
||||
})
|
||||
}
|
||||
};
|
||||
const reload = () => {
|
||||
// 查询网站信息
|
||||
if (!localStorage.getItem('WebsiteId')) {
|
||||
siteStore.fetchSiteInfo().catch(console.error);
|
||||
}
|
||||
// 查询商户角色的roleId
|
||||
if (!localStorage.getItem('RoleIdByMerchant')) {
|
||||
listRoles({ roleCode: 'merchant' }).then((res) => {
|
||||
if (res.length > 0) {
|
||||
const item = res[0];
|
||||
localStorage.setItem('RoleIdByMerchant', `${item.roleId}`);
|
||||
localStorage.setItem('RoleNameByMerchant', `${item.roleName}`);
|
||||
}
|
||||
});
|
||||
}
|
||||
// 检查是否启动自定义接口
|
||||
if (import.meta.env.PROD) {
|
||||
getCmsWebsiteFieldByCode('ApiUrl').then((res) => {
|
||||
if (res) {
|
||||
localStorage.setItem('ApiUrl', `${res.value}`);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
reload();
|
||||
reload();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import * as icons from '@/layout/menu-icons';
|
||||
import * as icons from '@/layout/menu-icons';
|
||||
|
||||
export default {
|
||||
components: icons,
|
||||
data() {
|
||||
return {
|
||||
iconData: [
|
||||
{
|
||||
title: '已引入的图标',
|
||||
icons: Object.keys(icons)
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
export default {
|
||||
components: icons,
|
||||
data() {
|
||||
return {
|
||||
iconData: [
|
||||
{
|
||||
title: '已引入的图标',
|
||||
icons: Object.keys(icons)
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ant-select {
|
||||
color: #bfbfbf;
|
||||
}
|
||||
.ant-select {
|
||||
color: #bfbfbf;
|
||||
}
|
||||
|
||||
.user-profile {
|
||||
display: flex;
|
||||
|
||||
.user-info {
|
||||
width: 100%;
|
||||
.user-profile {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.nickname {
|
||||
.user-info {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.nickname {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ele-admin-header-tool-item {
|
||||
:deep(.ant-select-tree-switcher) {
|
||||
background-color: #ff00fe;
|
||||
}
|
||||
.ele-admin-header-tool-item {
|
||||
:deep(.ant-select-tree-switcher) {
|
||||
background-color: #ff00fe;
|
||||
}
|
||||
|
||||
:deep(.ant-select-tree-indent) {
|
||||
display: none;
|
||||
:deep(.ant-select-tree-indent) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
<!-- 全局页脚 -->
|
||||
<template>
|
||||
<div v-if="config.setting?.showAdminCopyright" class="ele-text-center" style="padding: 16px 0">
|
||||
<div
|
||||
v-if="config.setting?.showAdminCopyright"
|
||||
class="ele-text-center"
|
||||
style="padding: 16px 0"
|
||||
>
|
||||
<div class="ele-text-secondary" style="margin-top: 8px">
|
||||
{{ t('layout.footer.copyright') }}
|
||||
</div>
|
||||
@@ -8,19 +12,19 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {useI18n} from 'vue-i18n';
|
||||
import {useWebsiteSettingStore} from "@/store/modules/setting";
|
||||
import {getSettingByKey} from "@/api/system/setting";
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useWebsiteSettingStore } from '@/store/modules/setting';
|
||||
import { getSettingByKey } from '@/api/system/setting';
|
||||
|
||||
const {t} = useI18n();
|
||||
const config = useWebsiteSettingStore();
|
||||
const { t } = useI18n();
|
||||
const config = useWebsiteSettingStore();
|
||||
|
||||
const reload = async () => {
|
||||
if (!config.setting) {
|
||||
const info = await getSettingByKey('privacy');
|
||||
config.setSetting(info)
|
||||
}
|
||||
}
|
||||
const reload = async () => {
|
||||
if (!config.setting) {
|
||||
const info = await getSettingByKey('privacy');
|
||||
config.setSetting(info);
|
||||
}
|
||||
};
|
||||
|
||||
reload();
|
||||
reload();
|
||||
</script>
|
||||
|
||||
@@ -26,12 +26,12 @@
|
||||
class="ele-bg-base ele-side-dark"
|
||||
@click="updateSideStyle('dark')"
|
||||
>
|
||||
<check-outlined v-if="sideStyle === 'dark'"/>
|
||||
<check-outlined v-if="sideStyle === 'dark'" />
|
||||
</div>
|
||||
</a-tooltip>
|
||||
<a-tooltip :title="t('layout.setting.sideStyles.light')">
|
||||
<div class="ele-bg-base" @click="updateSideStyle('light')">
|
||||
<check-outlined v-if="sideStyle === 'light'"/>
|
||||
<check-outlined v-if="sideStyle === 'light'" />
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
@@ -42,7 +42,7 @@
|
||||
class="ele-bg-base ele-head-light"
|
||||
@click="updateHeadStyle('light')"
|
||||
>
|
||||
<check-outlined v-if="headStyle === 'light'"/>
|
||||
<check-outlined v-if="headStyle === 'light'" />
|
||||
</div>
|
||||
</a-tooltip>
|
||||
<a-tooltip :title="t('layout.setting.headStyles.dark')">
|
||||
@@ -50,7 +50,7 @@
|
||||
class="ele-bg-base ele-head-dark"
|
||||
@click="updateHeadStyle('dark')"
|
||||
>
|
||||
<check-outlined v-if="headStyle === 'dark'"/>
|
||||
<check-outlined v-if="headStyle === 'dark'" />
|
||||
</div>
|
||||
</a-tooltip>
|
||||
<a-tooltip :title="t('layout.setting.headStyles.primary')">
|
||||
@@ -59,7 +59,7 @@
|
||||
@click="updateHeadStyle('primary')"
|
||||
>
|
||||
<div class="ele-bg-primary"></div>
|
||||
<check-outlined v-if="headStyle === 'primary'"/>
|
||||
<check-outlined v-if="headStyle === 'primary'" />
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
@@ -72,7 +72,7 @@
|
||||
class="ele-setting-color-item"
|
||||
@click="updateColor(item.value)"
|
||||
>
|
||||
<check-outlined v-if="item.value ? item.value === color : !color"/>
|
||||
<check-outlined v-if="item.value ? item.value === color : !color" />
|
||||
<a-tooltip :title="t('layout.setting.colors.' + item.name)">
|
||||
<div class="ele-setting-color-tooltip"></div>
|
||||
</a-tooltip>
|
||||
@@ -89,10 +89,10 @@
|
||||
<div class="ele-setting-item">
|
||||
<div class="setting-item-title">{{ t('layout.setting.darkMode') }}</div>
|
||||
<div class="setting-item-control">
|
||||
<a-switch size="small" :checked="darkMode" @change="updateDarkMode"/>
|
||||
<a-switch size="small" :checked="darkMode" @change="updateDarkMode" />
|
||||
</div>
|
||||
</div>
|
||||
<a-divider/>
|
||||
<a-divider />
|
||||
<!-- 导航布局 -->
|
||||
<div
|
||||
:class="[
|
||||
@@ -113,7 +113,7 @@
|
||||
class="ele-bg-base ele-side-dark"
|
||||
@click="updateLayoutStyle('side')"
|
||||
>
|
||||
<check-outlined v-if="layoutStyle === 'side'"/>
|
||||
<check-outlined v-if="layoutStyle === 'side'" />
|
||||
</div>
|
||||
</a-tooltip>
|
||||
<a-tooltip :title="t('layout.setting.layoutStyles.top')">
|
||||
@@ -121,7 +121,7 @@
|
||||
class="ele-bg-base ele-head-dark ele-layout-top"
|
||||
@click="updateLayoutStyle('top')"
|
||||
>
|
||||
<check-outlined v-if="layoutStyle === 'top'"/>
|
||||
<check-outlined v-if="layoutStyle === 'top'" />
|
||||
</div>
|
||||
</a-tooltip>
|
||||
<a-tooltip :title="t('layout.setting.layoutStyles.mix')">
|
||||
@@ -129,7 +129,7 @@
|
||||
class="ele-bg-base ele-layout-mix"
|
||||
@click="updateLayoutStyle('mix')"
|
||||
>
|
||||
<check-outlined v-if="layoutStyle === 'mix'"/>
|
||||
<check-outlined v-if="layoutStyle === 'mix'" />
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
@@ -162,7 +162,7 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<a-divider :class="{ 'hidden-xs-only': styleResponsive }"/>
|
||||
<a-divider :class="{ 'hidden-xs-only': styleResponsive }" />
|
||||
<div class="ele-setting-title ele-text-secondary">
|
||||
{{ t('layout.setting.other') }}
|
||||
</div>
|
||||
@@ -282,14 +282,14 @@
|
||||
<div class="ele-setting-item">
|
||||
<div class="setting-item-title">{{ t('layout.setting.weakMode') }}</div>
|
||||
<div class="setting-item-control">
|
||||
<a-switch size="small" :checked="weakMode" @change="updateWeakMode"/>
|
||||
<a-switch size="small" :checked="weakMode" @change="updateWeakMode" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 页签 -->
|
||||
<div class="ele-setting-item">
|
||||
<div class="setting-item-title">{{ t('layout.setting.showTabs') }}</div>
|
||||
<div class="setting-item-control">
|
||||
<a-switch size="small" :checked="showTabs" @change="updateShowTabs"/>
|
||||
<a-switch size="small" :checked="showTabs" @change="updateShowTabs" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 页签风格 -->
|
||||
@@ -345,10 +345,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 提示 -->
|
||||
<a-divider/>
|
||||
<a-divider />
|
||||
<a-alert show-icon type="warning" :message="t('layout.setting.tips')">
|
||||
<template #icon>
|
||||
<sound-outlined/>
|
||||
<sound-outlined />
|
||||
</template>
|
||||
</a-alert>
|
||||
<!-- 重置 -->
|
||||
@@ -360,388 +360,390 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {ref} from 'vue';
|
||||
import {useI18n} from 'vue-i18n';
|
||||
import {storeToRefs} from 'pinia';
|
||||
import {message} from 'ant-design-vue/es';
|
||||
import {CheckOutlined, SoundOutlined} from '@ant-design/icons-vue';
|
||||
import {messageLoading} from 'ele-admin-pro/es';
|
||||
import type {
|
||||
ThemeItem,
|
||||
HeadStyleType,
|
||||
SideStyleType,
|
||||
LayoutStyleType,
|
||||
TabStyleType
|
||||
} from 'ele-admin-pro/es';
|
||||
import {useThemeStore} from '@/store/modules/theme';
|
||||
import { ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import { CheckOutlined, SoundOutlined } from '@ant-design/icons-vue';
|
||||
import { messageLoading } from 'ele-admin-pro/es';
|
||||
import type {
|
||||
ThemeItem,
|
||||
HeadStyleType,
|
||||
SideStyleType,
|
||||
LayoutStyleType,
|
||||
TabStyleType
|
||||
} from 'ele-admin-pro/es';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
|
||||
defineProps<{
|
||||
// drawer 是否显示, v-model
|
||||
visible: boolean;
|
||||
}>();
|
||||
defineProps<{
|
||||
// drawer 是否显示, v-model
|
||||
visible: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:visible', value: boolean): void;
|
||||
}>();
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:visible', value: boolean): void;
|
||||
}>();
|
||||
|
||||
const {t} = useI18n();
|
||||
const themeStore = useThemeStore();
|
||||
const { t } = useI18n();
|
||||
const themeStore = useThemeStore();
|
||||
|
||||
const {
|
||||
showTabs,
|
||||
showFooter,
|
||||
headStyle,
|
||||
sideStyle,
|
||||
layoutStyle,
|
||||
sideMenuStyle,
|
||||
tabStyle,
|
||||
transitionName,
|
||||
fixedHeader,
|
||||
fixedSidebar,
|
||||
fixedBody,
|
||||
bodyFull,
|
||||
logoAutoSize,
|
||||
colorfulIcon,
|
||||
sideUniqueOpen,
|
||||
styleResponsive,
|
||||
weakMode,
|
||||
darkMode,
|
||||
color
|
||||
} = storeToRefs(themeStore);
|
||||
const {
|
||||
showTabs,
|
||||
showFooter,
|
||||
headStyle,
|
||||
sideStyle,
|
||||
layoutStyle,
|
||||
sideMenuStyle,
|
||||
tabStyle,
|
||||
transitionName,
|
||||
fixedHeader,
|
||||
fixedSidebar,
|
||||
fixedBody,
|
||||
bodyFull,
|
||||
logoAutoSize,
|
||||
colorfulIcon,
|
||||
sideUniqueOpen,
|
||||
styleResponsive,
|
||||
weakMode,
|
||||
darkMode,
|
||||
color
|
||||
} = storeToRefs(themeStore);
|
||||
|
||||
// 主题列表
|
||||
const themes = ref<ThemeItem[]>([
|
||||
{
|
||||
name: 'default',
|
||||
color: '#1890ff'
|
||||
},
|
||||
{
|
||||
name: 'dust',
|
||||
value: '#5f80c7'
|
||||
},
|
||||
{
|
||||
name: 'sunset',
|
||||
value: '#faad14'
|
||||
},
|
||||
{
|
||||
name: 'volcano',
|
||||
value: '#f5686f'
|
||||
},
|
||||
{
|
||||
name: 'purple',
|
||||
value: '#9266f9'
|
||||
},
|
||||
{
|
||||
name: 'green',
|
||||
value: '#33cc99'
|
||||
},
|
||||
{
|
||||
name: 'geekblue',
|
||||
value: '#32a2d4'
|
||||
}
|
||||
]);
|
||||
// 主题列表
|
||||
const themes = ref<ThemeItem[]>([
|
||||
{
|
||||
name: 'default',
|
||||
color: '#1890ff'
|
||||
},
|
||||
{
|
||||
name: 'dust',
|
||||
value: '#5f80c7'
|
||||
},
|
||||
{
|
||||
name: 'sunset',
|
||||
value: '#faad14'
|
||||
},
|
||||
{
|
||||
name: 'volcano',
|
||||
value: '#f5686f'
|
||||
},
|
||||
{
|
||||
name: 'purple',
|
||||
value: '#9266f9'
|
||||
},
|
||||
{
|
||||
name: 'green',
|
||||
value: '#33cc99'
|
||||
},
|
||||
{
|
||||
name: 'geekblue',
|
||||
value: '#32a2d4'
|
||||
}
|
||||
]);
|
||||
|
||||
// 颜色选择器预设颜色
|
||||
const predefineColors = ref<string[]>([
|
||||
'#f5222d',
|
||||
'#fa541c',
|
||||
'#fa8c16',
|
||||
'#faad14',
|
||||
'#a0d911',
|
||||
'#52c41a',
|
||||
'#13c2c2',
|
||||
'#2f54eb',
|
||||
'#722ed1',
|
||||
'#eb2f96'
|
||||
]);
|
||||
// 颜色选择器预设颜色
|
||||
const predefineColors = ref<string[]>([
|
||||
'#f5222d',
|
||||
'#fa541c',
|
||||
'#fa8c16',
|
||||
'#faad14',
|
||||
'#a0d911',
|
||||
'#52c41a',
|
||||
'#13c2c2',
|
||||
'#2f54eb',
|
||||
'#722ed1',
|
||||
'#eb2f96'
|
||||
]);
|
||||
|
||||
// 颜色选择器选中颜色
|
||||
const colorValue = ref<string | undefined>(void 0);
|
||||
// 颜色选择器选中颜色
|
||||
const colorValue = ref<string | undefined>(void 0);
|
||||
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
const updateVisible = (value: boolean) => {
|
||||
emit('update:visible', value);
|
||||
};
|
||||
|
||||
const updateShowTabs = (value: boolean) => {
|
||||
themeStore.setShowTabs(value);
|
||||
};
|
||||
const updateShowTabs = (value: boolean) => {
|
||||
themeStore.setShowTabs(value);
|
||||
};
|
||||
|
||||
const updateShowFooter = (value: boolean) => {
|
||||
themeStore.setShowFooter(value);
|
||||
};
|
||||
const updateShowFooter = (value: boolean) => {
|
||||
themeStore.setShowFooter(value);
|
||||
};
|
||||
|
||||
const updateHeadStyle = (value: HeadStyleType) => {
|
||||
themeStore.setHeadStyle(value);
|
||||
};
|
||||
const updateHeadStyle = (value: HeadStyleType) => {
|
||||
themeStore.setHeadStyle(value);
|
||||
};
|
||||
|
||||
const updateSideStyle = (value: SideStyleType) => {
|
||||
themeStore.setSideStyle(value);
|
||||
};
|
||||
const updateSideStyle = (value: SideStyleType) => {
|
||||
themeStore.setSideStyle(value);
|
||||
};
|
||||
|
||||
const updateLayoutStyle = (value: LayoutStyleType) => {
|
||||
themeStore.setLayoutStyle(value);
|
||||
};
|
||||
const updateLayoutStyle = (value: LayoutStyleType) => {
|
||||
themeStore.setLayoutStyle(value);
|
||||
};
|
||||
|
||||
const updateSideMenuStyle = (value: boolean) => {
|
||||
themeStore.setSideMenuStyle(value ? 'mix' : 'default');
|
||||
};
|
||||
const updateSideMenuStyle = (value: boolean) => {
|
||||
themeStore.setSideMenuStyle(value ? 'mix' : 'default');
|
||||
};
|
||||
|
||||
const updateTabStyle = (value: TabStyleType) => {
|
||||
themeStore.setTabStyle(value);
|
||||
};
|
||||
const updateTabStyle = (value: TabStyleType) => {
|
||||
themeStore.setTabStyle(value);
|
||||
};
|
||||
|
||||
const updateTransitionName = (value: string) => {
|
||||
themeStore.setTransitionName(value);
|
||||
};
|
||||
const updateTransitionName = (value: string) => {
|
||||
themeStore.setTransitionName(value);
|
||||
};
|
||||
|
||||
const updateFixedHeader = (value: boolean) => {
|
||||
themeStore.setFixedHeader(value);
|
||||
};
|
||||
const updateFixedHeader = (value: boolean) => {
|
||||
themeStore.setFixedHeader(value);
|
||||
};
|
||||
|
||||
const updateFixedSidebar = (value: boolean) => {
|
||||
themeStore.setFixedSidebar(value);
|
||||
};
|
||||
const updateFixedSidebar = (value: boolean) => {
|
||||
themeStore.setFixedSidebar(value);
|
||||
};
|
||||
|
||||
const updateFixedBody = (value: boolean) => {
|
||||
themeStore.setFixedBody(value);
|
||||
};
|
||||
const updateFixedBody = (value: boolean) => {
|
||||
themeStore.setFixedBody(value);
|
||||
};
|
||||
|
||||
const updateBodyFull = (value: boolean) => {
|
||||
themeStore.setBodyFull(!value);
|
||||
};
|
||||
const updateBodyFull = (value: boolean) => {
|
||||
themeStore.setBodyFull(!value);
|
||||
};
|
||||
|
||||
const updateLogoAutoSize = (value: boolean) => {
|
||||
themeStore.setLogoAutoSize(value);
|
||||
};
|
||||
const updateLogoAutoSize = (value: boolean) => {
|
||||
themeStore.setLogoAutoSize(value);
|
||||
};
|
||||
|
||||
const updateStyleResponsive = (value: boolean) => {
|
||||
themeStore.setStyleResponsive(value);
|
||||
updateVisible(false);
|
||||
};
|
||||
const updateStyleResponsive = (value: boolean) => {
|
||||
themeStore.setStyleResponsive(value);
|
||||
updateVisible(false);
|
||||
};
|
||||
|
||||
const updateColorfulIcon = (value: boolean) => {
|
||||
themeStore.setColorfulIcon(value);
|
||||
};
|
||||
const updateColorfulIcon = (value: boolean) => {
|
||||
themeStore.setColorfulIcon(value);
|
||||
};
|
||||
|
||||
const updateSideUniqueOpen = (value: boolean) => {
|
||||
themeStore.setSideUniqueOpen(value);
|
||||
};
|
||||
const updateSideUniqueOpen = (value: boolean) => {
|
||||
themeStore.setSideUniqueOpen(value);
|
||||
};
|
||||
|
||||
const updateWeakMode = (value: boolean) => {
|
||||
themeStore.setWeakMode(value);
|
||||
};
|
||||
const updateWeakMode = (value: boolean) => {
|
||||
themeStore.setWeakMode(value);
|
||||
};
|
||||
|
||||
const updateDarkMode = (value: boolean) => {
|
||||
doWithLoading(() => themeStore.setDarkMode(value));
|
||||
};
|
||||
const updateDarkMode = (value: boolean) => {
|
||||
doWithLoading(() => themeStore.setDarkMode(value));
|
||||
};
|
||||
|
||||
const updateColor = (value?: string) => {
|
||||
doWithLoading(() => themeStore.setColor(value));
|
||||
};
|
||||
const updateColor = (value?: string) => {
|
||||
doWithLoading(() => themeStore.setColor(value));
|
||||
};
|
||||
|
||||
const resetSetting = () => {
|
||||
doWithLoading(() => themeStore.resetSetting());
|
||||
};
|
||||
const resetSetting = () => {
|
||||
doWithLoading(() => themeStore.resetSetting());
|
||||
};
|
||||
|
||||
const doWithLoading = (fun: () => Promise<void>) => {
|
||||
const hide = messageLoading('正在加载主题..', 0);
|
||||
setTimeout(() => {
|
||||
fun()
|
||||
.then(() => {
|
||||
hide();
|
||||
initColorValue();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
console.error(e);
|
||||
message.error('主题加载失败');
|
||||
});
|
||||
}, 0);
|
||||
};
|
||||
const doWithLoading = (fun: () => Promise<void>) => {
|
||||
const hide = messageLoading('正在加载主题..', 0);
|
||||
setTimeout(() => {
|
||||
fun()
|
||||
.then(() => {
|
||||
hide();
|
||||
initColorValue();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
console.error(e);
|
||||
message.error('主题加载失败');
|
||||
});
|
||||
}, 0);
|
||||
};
|
||||
|
||||
const initColorValue = () => {
|
||||
if (color?.value && !themes.value.some((t) => t.value === color.value)) {
|
||||
colorValue.value = color.value;
|
||||
} else {
|
||||
colorValue.value = void 0;
|
||||
}
|
||||
};
|
||||
const initColorValue = () => {
|
||||
if (color?.value && !themes.value.some((t) => t.value === color.value)) {
|
||||
colorValue.value = color.value;
|
||||
} else {
|
||||
colorValue.value = void 0;
|
||||
}
|
||||
};
|
||||
|
||||
initColorValue();
|
||||
initColorValue();
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.ele-setting-wrapper {
|
||||
padding: 20px 18px;
|
||||
.ele-setting-wrapper {
|
||||
padding: 20px 18px;
|
||||
|
||||
.ele-setting-title {
|
||||
font-size: 13px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.ele-setting-title {
|
||||
font-size: 13px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* 主题风格 */
|
||||
/* 主题风格 */
|
||||
|
||||
.ele-setting-theme > div {
|
||||
width: 52px;
|
||||
height: 36px;
|
||||
line-height: 1;
|
||||
border-radius: 3px;
|
||||
margin: 0 20px 30px 0;
|
||||
padding: 16px 0 0 26px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:before,
|
||||
&:after,
|
||||
& > .ele-bg-primary {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
.ele-setting-theme > div {
|
||||
width: 52px;
|
||||
height: 36px;
|
||||
line-height: 1;
|
||||
border-radius: 3px;
|
||||
margin: 0 20px 30px 0;
|
||||
padding: 16px 0 0 26px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
&:after {
|
||||
width: 14px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.ele-side-dark:after,
|
||||
&.ele-head-dark:before,
|
||||
&.ele-layout-mix:before,
|
||||
&.ele-layout-mix:after {
|
||||
background: #001529;
|
||||
}
|
||||
|
||||
&.ele-head-light:before,
|
||||
&.ele-head-dark:before,
|
||||
& > .ele-bg-primary {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&.ele-layout-top {
|
||||
padding-left: 19px;
|
||||
&:before,
|
||||
&:after,
|
||||
& > .ele-bg-primary {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
&:after {
|
||||
display: none;
|
||||
width: 14px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.ele-side-dark:after,
|
||||
&.ele-head-dark:before,
|
||||
&.ele-layout-mix:before,
|
||||
&.ele-layout-mix:after {
|
||||
background: #001529;
|
||||
}
|
||||
|
||||
&.ele-head-light:before,
|
||||
&.ele-head-dark:before,
|
||||
& > .ele-bg-primary {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&.ele-layout-top {
|
||||
padding-left: 19px;
|
||||
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 主题色选择 */
|
||||
|
||||
.ele-setting-colors {
|
||||
color: #fff;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.ele-setting-color-item {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
border-radius: 2px;
|
||||
margin: 8px 8px 0 0;
|
||||
display: inline-block;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
.ele-setting-color-tooltip {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 主题配置项 */
|
||||
|
||||
.ele-setting-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.setting-item-title {
|
||||
flex: 1;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.setting-item-control {
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-divider {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.ant-alert + .ant-btn {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* 暗黑模式 */
|
||||
|
||||
&.ele-setting-dark .ele-setting-theme > div {
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
|
||||
|
||||
&:before,
|
||||
&:after,
|
||||
& > .ele-bg-primary {
|
||||
background: #1f1f1f;
|
||||
}
|
||||
|
||||
&.ele-side-dark:after,
|
||||
&.ele-head-dark:before,
|
||||
&.ele-layout-mix:before,
|
||||
&.ele-layout-mix:after {
|
||||
background: #262626;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 主题色选择 */
|
||||
|
||||
.ele-setting-colors {
|
||||
color: #fff;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.ele-setting-color-item {
|
||||
/* 颜色选择器 */
|
||||
.ele-setting-color-picker.ele-color-picker-trigger {
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
border-radius: 2px;
|
||||
margin: 8px 8px 0 0;
|
||||
display: inline-block;
|
||||
margin-top: 8px;
|
||||
border: none !important;
|
||||
background: none !important;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
.ele-setting-color-tooltip {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
& > .ele-color-picker-trigger-inner {
|
||||
background: none;
|
||||
|
||||
/* 主题配置项 */
|
||||
&.is-empty {
|
||||
background: conic-gradient(
|
||||
from 90deg at 50% 50%,
|
||||
rgb(255, 0, 0) -19.41deg,
|
||||
rgb(255, 0, 0) 18.76deg,
|
||||
rgb(255, 138, 0) 59.32deg,
|
||||
rgb(255, 230, 0) 99.87deg,
|
||||
rgb(20, 255, 0) 141.65deg,
|
||||
rgb(0, 163, 255) 177.72deg,
|
||||
rgb(5, 0, 255) 220.23deg,
|
||||
rgb(173, 0, 255) 260.13deg,
|
||||
rgb(255, 0, 199) 300.69deg,
|
||||
rgb(255, 0, 0) 340.59deg,
|
||||
rgb(255, 0, 0) 378.76deg
|
||||
);
|
||||
|
||||
.ele-setting-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.setting-item-title {
|
||||
flex: 1;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.setting-item-control {
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-divider {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.ant-alert + .ant-btn {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* 暗黑模式 */
|
||||
|
||||
&.ele-setting-dark .ele-setting-theme > div {
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
|
||||
|
||||
&:before,
|
||||
&:after,
|
||||
& > .ele-bg-primary {
|
||||
background: #1f1f1f;
|
||||
}
|
||||
|
||||
&.ele-side-dark:after,
|
||||
&.ele-head-dark:before,
|
||||
&.ele-layout-mix:before,
|
||||
&.ele-layout-mix:after {
|
||||
background: #262626;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 颜色选择器 */
|
||||
.ele-setting-color-picker.ele-color-picker-trigger {
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-top: 8px;
|
||||
border: none !important;
|
||||
background: none !important;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
|
||||
|
||||
& > .ele-color-picker-trigger-inner {
|
||||
background: none;
|
||||
|
||||
&.is-empty {
|
||||
background: conic-gradient(from 90deg at 50% 50%,
|
||||
rgb(255, 0, 0) -19.41deg,
|
||||
rgb(255, 0, 0) 18.76deg,
|
||||
rgb(255, 138, 0) 59.32deg,
|
||||
rgb(255, 230, 0) 99.87deg,
|
||||
rgb(20, 255, 0) 141.65deg,
|
||||
rgb(0, 163, 255) 177.72deg,
|
||||
rgb(5, 0, 255) 220.23deg,
|
||||
rgb(173, 0, 255) 260.13deg,
|
||||
rgb(255, 0, 199) 300.69deg,
|
||||
rgb(255, 0, 0) 340.59deg,
|
||||
rgb(255, 0, 0) 378.76deg);
|
||||
|
||||
& + .ele-color-picker-trigger-arrow {
|
||||
display: none;
|
||||
& + .ele-color-picker-trigger-arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -128,9 +128,9 @@
|
||||
const userStore = useUserStore();
|
||||
|
||||
// 是否刷新页面
|
||||
if(localStorage.getItem('Reload')){
|
||||
if (localStorage.getItem('Reload')) {
|
||||
window.location.reload();
|
||||
localStorage.removeItem('Reload')
|
||||
localStorage.removeItem('Reload');
|
||||
}
|
||||
|
||||
const themeStore = useThemeStore();
|
||||
@@ -311,7 +311,7 @@
|
||||
}
|
||||
|
||||
// 顶栏菜单标题中样式调整
|
||||
.ele-admin-header-nav{
|
||||
.ele-admin-header-nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
@@ -365,7 +365,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
svg.md-editor-icon{
|
||||
svg.md-editor-icon {
|
||||
width: 27px !important;
|
||||
height: 27px !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user