fix: less 变量命名与 css 关键字冲突 #475

.gitignore

@@ -7,4 +7,4 @@ dist-ssr
 *-lock.*
 pnpm-debug
 stats.html
-
+.idea

src/App.vue

@@ -34,7 +34,7 @@ ElNotification({
 </template>
 
 <style lang="less">
-@prefix-cls: ~'@{namespace}-app';
+@prefix-cls: ~'@{adminNamespace}-app';
 
 .size {
   width: 100%;

src/components/Avatars/src/Avatars.vue

@@ -69,7 +69,7 @@ const filterData = computed(() => props.data.slice(0, props.max))
 </template>
 
 <style scoped lang="less">
-@prefix-cls: ~'@{namespace}-avatars';
+@prefix-cls: ~'@{adminNamespace}-avatars';
 
 .@{prefix-cls} {
   .@{elNamespace}-avatar + .@{elNamespace}-avatar {

src/components/Descriptions/src/Descriptions.vue

@@ -163,7 +163,7 @@ export default defineComponent({
 </script>
 
 <style lang="less" scoped>
-@prefix-cls: ~'@{namespace}-descriptions';
+@prefix-cls: ~'@{adminNamespace}-descriptions';
 
 :deep(.@{elNamespace}-descriptions__header) {
   display: none !important;

src/components/Form/src/Form.vue

@@ -420,7 +420,7 @@ export default defineComponent({
 </script>
 
 <style lang="less" scoped>
-.@{elNamespace}-form.@{namespace}-form .@{elNamespace}-row {
+.@{elNamespace}-form.@{adminNamespace}-form .@{elNamespace}-row {
   margin-right: 0 !important;
   margin-left: 0 !important;
 }

src/components/Icon/src/Icon.vue

@@ -53,7 +53,7 @@ const getIconifyStyle = computed(() => {
 </template>
 
 <style lang="less" scoped>
-@prefix-cls: ~'@{namespace}-icon';
+@prefix-cls: ~'@{adminNamespace}-icon';
 
 .@{prefix-cls},
 .iconify {

src/components/IconPicker/src/IconPicker.vue

@@ -182,7 +182,7 @@ const inputClear = () => {
 </template>
 
 <style lang="less" scoped>
-@prefix-cls: ~'@{namespace}-icon-picker';
+@prefix-cls: ~'@{adminNamespace}-icon-picker';
 
 .@{prefix-cls} {
   :deep(.@{elNamespace}-input__wrapper) {

src/components/InputPassword/src/InputPassword.vue

@@ -65,7 +65,7 @@ const getPasswordStrength = computed(() => {
 </template>
 
 <style lang="less" scoped>
-@prefix-cls: ~'@{namespace}-input-password';
+@prefix-cls: ~'@{adminNamespace}-input-password';
 
 .@{prefix-cls} {
   :deep(.@{elNamespace}-input__clear) {

src/components/Menu/src/Menu.vue

@@ -126,7 +126,7 @@ export default defineComponent({
 </script>
 
 <style lang="less" scoped>
-@prefix-cls: ~'@{namespace}-menu';
+@prefix-cls: ~'@{adminNamespace}-menu';
 
 .@{prefix-cls} {
   position: relative;
@@ -227,7 +227,7 @@ export default defineComponent({
 </style>
 
 <style lang="less">
-@prefix-cls: ~'@{namespace}-menu-popper';
+@prefix-cls: ~'@{adminNamespace}-menu-popper';
 
 .@{prefix-cls}--vertical,
 .@{prefix-cls}--horizontal {

src/components/Qrcode/src/Qrcode.vue

@@ -238,7 +238,7 @@ const disabledClick = () => {
 </template>
 
 <style lang="less" scoped>
-@prefix-cls: ~'@{namespace}-qrcode';
+@prefix-cls: ~'@{adminNamespace}-qrcode';
 
 .@{prefix-cls} {
   &--disabled {

src/components/Setting/src/Setting.vue

@@ -249,7 +249,7 @@ const themeChange = () => {
 </template>
 
 <style lang="less" scoped>
-@prefix-cls: ~'@{namespace}-setting';
+@prefix-cls: ~'@{adminNamespace}-setting';
 
 .@{prefix-cls} {
   border-radius: 6px 0 0 6px;

src/components/Setting/src/components/ColorRadioPicker.vue

@@ -55,7 +55,7 @@ watch(
 </template>
 
 <style lang="less" scoped>
-@prefix-cls: ~'@{namespace}-color-radio-picker';
+@prefix-cls: ~'@{adminNamespace}-color-radio-picker';
 
 .@{prefix-cls} {
   .is-active {

src/components/Setting/src/components/LayoutRadioPicker.vue

@@ -60,7 +60,7 @@ const layout = computed(() => appStore.getLayout)
 </template>
 
 <style lang="less" scoped>
-@prefix-cls: ~'@{namespace}-layout-radio-picker';
+@prefix-cls: ~'@{adminNamespace}-layout-radio-picker';
 
 .@{prefix-cls} {
   &__classic {

src/components/TabMenu/src/TabMenu.vue

@@ -223,7 +223,7 @@ export default defineComponent({
 </script>
 
 <style lang="less" scoped>
-@prefix-cls: ~'@{namespace}-tab-menu';
+@prefix-cls: ~'@{adminNamespace}-tab-menu';
 
 .@{prefix-cls} {
   transition: all var(--transition-time-02);

src/components/TagsView/src/TagsView.vue

@@ -478,7 +478,7 @@ watch(
 </template>
 
 <style lang="less" scoped>
-@prefix-cls: ~'@{namespace}-tags-view';
+@prefix-cls: ~'@{adminNamespace}-tags-view';
 
 .@{prefix-cls} {
   :deep(.@{elNamespace}-scrollbar__view) {

src/components/UserInfo/src/components/LockPage.vue

@@ -152,7 +152,7 @@ function handleShowForm(show = false) {
 </template>
 
 <style lang="less" scoped>
-@prefix-cls: ~'@{namespace}-lock-page';
+@prefix-cls: ~'@{adminNamespace}-lock-page';
 
 // Small screen / tablet
 @screen-sm: 576px;

src/layout/Layout.vue

@@ -67,7 +67,7 @@ export default defineComponent({
 </script>
 
 <style lang="less" scoped>
-@prefix-cls: ~'@{namespace}-layout';
+@prefix-cls: ~'@{adminNamespace}-layout';
 
 .@{prefix-cls} {
   background-color: var(--app-content-bg-color);

src/layout/components/ToolHeader.vue

@@ -74,7 +74,7 @@ export default defineComponent({
 </script>
 
 <style lang="less" scoped>
-@prefix-cls: ~'@{namespace}-tool-header';
+@prefix-cls: ~'@{adminNamespace}-tool-header';
 
 .@{prefix-cls} {
   transition: left var(--transition-time-02);

src/styles/variables.module.less

@@ -1,10 +1,10 @@
 // 命名空间
-@namespace: v;
+@adminNamespace: v;
 // el命名空间
 @elNamespace: el;
 
 // 导出变量
 :export {
-  namespace: @namespace;
+  namespace: @adminNamespace;
   elNamespace: @elNamespace;
 }

src/views/Dashboard/components/PanelGroup.vue

@@ -155,7 +155,7 @@ getCount()
 </template>
 
 <style lang="less" scoped>
-@prefix-cls: ~'@{namespace}-panel';
+@prefix-cls: ~'@{adminNamespace}-panel';
 
 .@{prefix-cls} {
   &__item {
@@ -176,7 +176,7 @@ getCount()
     }
 
     &:hover {
-      :deep(.@{namespace}-icon) {
+      :deep(.@{adminNamespace}-icon) {
         color: #fff !important;
       }
       .@{prefix-cls}__item--icon {

src/views/Login/Login.vue

@@ -99,7 +99,7 @@ const themeChange = () => {
 </template>
 
 <style lang="less" scoped>
-@prefix-cls: ~'@{namespace}-login';
+@prefix-cls: ~'@{adminNamespace}-login';
 
 .@{prefix-cls} {
   overflow: auto;