+
@@ -74,7 +80,7 @@ const getIconName = computed(() =>
@prefix-cls: ~'@{namespace}-input-password';
.@{prefix-cls} {
- :deep(.el-input__clear) {
+ :deep(.@{elNamespace}-input__clear) {
margin-left: 5px;
}
diff --git a/src/components/LocaleDropdown/src/LocaleDropdown.vue b/src/components/LocaleDropdown/src/LocaleDropdown.vue
index 8ebb18f20..9040908c5 100644
--- a/src/components/LocaleDropdown/src/LocaleDropdown.vue
+++ b/src/components/LocaleDropdown/src/LocaleDropdown.vue
@@ -4,6 +4,11 @@ import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
import { useLocaleStore } from '@/store/modules/locale'
import { useLocale } from '@/hooks/web/useLocale'
import { propTypes } from '@/utils/propTypes'
+import { useDesign } from '@/hooks/web/useDesign'
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('locale-dropdown')
defineProps({
color: propTypes.string.def('')
@@ -28,7 +33,7 @@ const setLang = (lang: LocaleType) => {
-
+
import { ref, watch, computed, onMounted, unref } from 'vue'
import { useAppStore } from '@/store/modules/app'
+import { useDesign } from '@/hooks/web/useDesign'
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('logo')
const appStore = useAppStore()
@@ -52,10 +57,8 @@ watch(
-
-
diff --git a/src/components/Menu/src/Menu.vue b/src/components/Menu/src/Menu.vue
index 68b80e02e..3eb60e541 100644
--- a/src/components/Menu/src/Menu.vue
+++ b/src/components/Menu/src/Menu.vue
@@ -7,6 +7,11 @@ import type { LayoutType } from '@/config/app'
import { useRenderMenuItem } from './components/useRenderMenuItem'
import { useRouter } from 'vue-router'
import { isUrl } from '@/utils/is'
+import { useDesign } from '@/hooks/web/useDesign'
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('menu')
export default defineComponent({
name: 'Menu',
@@ -66,7 +71,7 @@ export default defineComponent({
return () => (
.el-sub-menu__title {
+ & > .@{elNamespace}-sub-menu__title {
color: var(--left-menu-text-active-color) !important;
}
}
// 设置子菜单悬停的高亮和背景色
- .el-sub-menu__title,
- .el-menu-item {
+ .@{elNamespace}-sub-menu__title,
+ .@{elNamespace}-menu-item {
&:hover {
color: var(--left-menu-text-active-color) !important;
background-color: var(--left-menu-bg-color) !important;
@@ -147,8 +152,8 @@ export default defineComponent({
}
// 设置选中时的高亮背景和高亮颜色
- .el-sub-menu.is-active,
- .el-menu-item.is-active {
+ .@{elNamespace}-sub-menu.is-active,
+ .@{elNamespace}-menu-item.is-active {
color: var(--left-menu-text-active-color) !important;
background-color: var(--left-menu-bg-active-color) !important;
@@ -157,7 +162,7 @@ export default defineComponent({
}
}
- .el-menu-item.is-active {
+ .@{elNamespace}-menu-item.is-active {
position: relative;
&:after {
@@ -166,20 +171,20 @@ export default defineComponent({
}
// 设置子菜单的背景颜色
- .el-menu {
- .el-sub-menu__title,
- .el-menu-item:not(.is-active) {
+ .@{elNamespace}-menu {
+ .@{elNamespace}-sub-menu__title,
+ .@{elNamespace}-menu-item:not(.is-active) {
background-color: var(--left-menu-bg-light-color) !important;
}
}
}
// 折叠时的最小宽度
- :deep(.el-menu--collapse) {
+ :deep(.@{elNamespace}-menu--collapse) {
width: var(--left-menu-min-width);
& > .is-active,
- & > .is-active > .el-sub-menu__title {
+ & > .is-active > .@{elNamespace}-sub-menu__title {
position: relative;
background-color: var(--left-menu-collapse-bg-active-color) !important;
@@ -201,17 +206,17 @@ export default defineComponent({
&__horizontal {
height: calc(~'var( - -top-tool-height)') !important;
- :deep(.el-menu--horizontal) {
+ :deep(.@{elNamespace}-menu--horizontal) {
height: calc(~'var( - -top-tool-height)');
border-bottom: none;
// 重新设置底部高亮颜色
- & > .el-sub-menu.is-active {
- .el-sub-menu__title {
+ & > .@{elNamespace}-sub-menu.is-active {
+ .@{elNamespace}-sub-menu__title {
border-bottom-color: var(--el-color-primary) !important;
}
}
- .el-menu-item.is-active {
+ .@{elNamespace}-menu-item.is-active {
position: relative;
&:after {
@@ -219,7 +224,7 @@ export default defineComponent({
}
}
- .v-menu__title {
+ .@{prefix-cls}__title {
/* stylelint-disable-next-line */
max-height: calc(~'var(--top-tool-height) - 2px') !important;
/* stylelint-disable-next-line */
diff --git a/src/components/Screenfull/src/Screenfull.vue b/src/components/Screenfull/src/Screenfull.vue
index b0ad07ef0..32a12e733 100644
--- a/src/components/Screenfull/src/Screenfull.vue
+++ b/src/components/Screenfull/src/Screenfull.vue
@@ -2,6 +2,11 @@
import { Icon } from '@/components/Icon'
import { useFullscreen } from '@vueuse/core'
import { propTypes } from '@/utils/propTypes'
+import { useDesign } from '@/hooks/web/useDesign'
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('screenfull')
defineProps({
color: propTypes.string.def('')
@@ -15,7 +20,7 @@ const toggleFullscreen = () => {
-
+
{
+
+
{{ t('setting.breadcrumb') }}
+
appStore.getLayout)
>
{
-
+
diff --git a/src/components/TabMenu/src/TabMenu.vue b/src/components/TabMenu/src/TabMenu.vue
index e1827769a..c0ca72117 100644
--- a/src/components/TabMenu/src/TabMenu.vue
+++ b/src/components/TabMenu/src/TabMenu.vue
@@ -10,6 +10,11 @@ import { useRouter } from 'vue-router'
import { pathResolve } from '@/utils/routerHelper'
import { cloneDeep } from 'lodash-es'
import { filterMenusPath, initTabMap, tabPathMap } from './helper'
+import { useDesign } from '@/hooks/web/useDesign'
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('tab-menu')
export default defineComponent({
name: 'TabMenu',
@@ -102,7 +107,8 @@ export default defineComponent({
return () => (
{
return unref(tabRouters).map((v) => {
const item = (
- v?.children?.length && v?.children?.length > 1
+ v.meta?.alwaysShow || (v?.children?.length && v?.children?.length > 1)
? v
: {
...(v?.children && v?.children[0]),
@@ -125,7 +131,8 @@ export default defineComponent({
return (
+
{
@change="themeChange"
/>
-
-
diff --git a/src/components/UserInfo/src/UserInfo.vue b/src/components/UserInfo/src/UserInfo.vue
index 5669e387f..a630fc1ff 100644
--- a/src/components/UserInfo/src/UserInfo.vue
+++ b/src/components/UserInfo/src/UserInfo.vue
@@ -5,6 +5,11 @@ import { useCache } from '@/hooks/web/useCache'
import { resetRouter } from '@/router'
import { useRouter } from 'vue-router'
import { loginOutApi } from '@/api/login'
+import { useDesign } from '@/hooks/web/useDesign'
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('user-info')
const { t } = useI18n()
@@ -31,7 +36,7 @@ const loginOut = () => {
-
+
Archer
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
index 1e921c8e0..7b26d9723 100644
--- a/src/layout/Layout.vue
+++ b/src/layout/Layout.vue
@@ -1,9 +1,14 @@
diff --git a/src/layout/components/AppView.vue b/src/layout/components/AppView.vue
index 6a94b33f1..1cc009a34 100644
--- a/src/layout/components/AppView.vue
+++ b/src/layout/components/AppView.vue
@@ -22,17 +22,19 @@ const getCaches = computed((): string[] => {
Archer
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
index 1e921c8e0..7b26d9723 100644
--- a/src/layout/Layout.vue
+++ b/src/layout/Layout.vue
@@ -1,9 +1,14 @@
diff --git a/src/layout/components/AppView.vue b/src/layout/components/AppView.vue
index 6a94b33f1..1cc009a34 100644
--- a/src/layout/components/AppView.vue
+++ b/src/layout/components/AppView.vue
@@ -22,17 +22,19 @@ const getCaches = computed((): string[] => {
{
{
-
+
{
{/* */}
{
-// import { ElRow, ElCol } from 'element-plus'
+import PanelGroup from './components/PanelGroup.vue'
-
+
+
+
+
+
+
+
+
dddd
+
+
+
+
+
+
+
+
+ 新增用户
+