diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bb32d2d4..f2877bde 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -65,6 +65,9 @@ dependencies:
   echarts-gl:
     specifier: ^2.0.9
     version: 2.0.9(echarts@5.5.0)
+  echarts-liquidfill:
+    specifier: ^3.1.0
+    version: 3.1.0(echarts@5.5.0)
   echarts4:
     specifier: npm:echarts@^4.9.0
     version: /echarts@4.9.0
@@ -2421,6 +2424,14 @@ packages:
       zrender: 5.5.0
     dev: false
 
+  /echarts-liquidfill@3.1.0(echarts@5.5.0):
+    resolution: {integrity: sha512-5Dlqs/jTsdTUAsd+K5LPLLTgrbbNORUSBQyk8PSy1Mg2zgHDWm83FmvA4s0ooNepCJojFYRITTQ4GU1UUSKYLw==, tarball: https://registry.npmmirror.com/echarts-liquidfill/-/echarts-liquidfill-3.1.0.tgz}
+    peerDependencies:
+      echarts: ^5.0.1
+    dependencies:
+      echarts: 5.5.0
+    dev: false
+
   /echarts@4.9.0:
     resolution: {integrity: sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==, tarball: https://registry.npmmirror.com/echarts/-/echarts-4.9.0.tgz}
     dependencies:
diff --git a/src/layouts/Layout.vue b/src/layouts/Layout.vue
index 82bff724..d8962634 100644
--- a/src/layouts/Layout.vue
+++ b/src/layouts/Layout.vue
@@ -67,7 +67,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-$prefix-cls: #{$namespace}-layout;
+$prefix-cls: v-layout;
 
 .#{$prefix-cls} {
   background-color: var(--app-content-bg-color);
diff --git a/src/layouts/components/Menu/src/Menu.vue b/src/layouts/components/Menu/src/Menu.vue
index 7ee3ca9d..9c13eed5 100644
--- a/src/layouts/components/Menu/src/Menu.vue
+++ b/src/layouts/components/Menu/src/Menu.vue
@@ -122,7 +122,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-$prefix-cls: #{$namespace}-menu;
+$prefix-cls: v-menu;
 
 .#{$prefix-cls} {
   position: relative;
@@ -224,7 +224,7 @@ $prefix-cls: #{$namespace}-menu;
 </style>
 
 <style lang="scss">
-$prefix-cls: #{$namespace}-menu-popper;
+$prefix-cls: v-menu-popper;
 
 .#{$prefix-cls}--vertical,
 .#{$prefix-cls}--horizontal {
diff --git a/src/layouts/components/Setting/src/Setting.vue b/src/layouts/components/Setting/src/Setting.vue
index e1908b63..ac1c38cf 100644
--- a/src/layouts/components/Setting/src/Setting.vue
+++ b/src/layouts/components/Setting/src/Setting.vue
@@ -291,7 +291,7 @@ const clear = () => {
 </template>
 
 <style lang="scss" scoped>
-$prefix-cls: #{$namespace}-setting;
+$prefix-cls: v-setting;
 
 .#{$prefix-cls} {
   border-radius: 6px 0 0 6px;
diff --git a/src/layouts/components/Setting/src/components/ColorRadioPicker.vue b/src/layouts/components/Setting/src/components/ColorRadioPicker.vue
index fcc5e758..942ec6a4 100644
--- a/src/layouts/components/Setting/src/components/ColorRadioPicker.vue
+++ b/src/layouts/components/Setting/src/components/ColorRadioPicker.vue
@@ -57,7 +57,7 @@ watch(
 </template>
 
 <style lang="scss" scoped>
-$prefix-cls: #{$namespace}-color-radio-picker;
+$prefix-cls: v-color-radio-picker;
 
 .#{$prefix-cls} {
   .is-active {
diff --git a/src/layouts/components/Setting/src/components/LayoutRadioPicker.vue b/src/layouts/components/Setting/src/components/LayoutRadioPicker.vue
index 801686c2..c90171fa 100644
--- a/src/layouts/components/Setting/src/components/LayoutRadioPicker.vue
+++ b/src/layouts/components/Setting/src/components/LayoutRadioPicker.vue
@@ -61,7 +61,7 @@ const layout = computed(() => appStore.getLayout)
 </template>
 
 <style lang="scss" scoped>
-$prefix-cls: #{$namespace}-layout-radio-picker;
+$prefix-cls: v-layout-radio-picker;
 
 .#{$prefix-cls} {
   &__classic {
diff --git a/src/layouts/components/TabMenu/src/TabMenu.vue b/src/layouts/components/TabMenu/src/TabMenu.vue
index b70464c1..b4427842 100644
--- a/src/layouts/components/TabMenu/src/TabMenu.vue
+++ b/src/layouts/components/TabMenu/src/TabMenu.vue
@@ -212,7 +212,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-$prefix-cls: #{$namespace}-tab-menu;
+$prefix-cls: v-tab-menu;
 
 .#{$prefix-cls} {
   transition: all var(--transition-time-02);
diff --git a/src/layouts/components/TagsView/src/TagsView.vue b/src/layouts/components/TagsView/src/TagsView.vue
index c765112d..7cfca6c7 100644
--- a/src/layouts/components/TagsView/src/TagsView.vue
+++ b/src/layouts/components/TagsView/src/TagsView.vue
@@ -473,7 +473,7 @@ watch(
 </template>
 
 <style lang="scss" scoped>
-$prefix-cls: #{$namespace}-tags-view;
+$prefix-cls: v-tags-view;
 
 .#{$prefix-cls} {
   :deep(.el-scrollbar__view) {
diff --git a/src/layouts/components/ToolHeader.vue b/src/layouts/components/ToolHeader.vue
index 0b8d00d5..17b2ed0f 100644
--- a/src/layouts/components/ToolHeader.vue
+++ b/src/layouts/components/ToolHeader.vue
@@ -87,7 +87,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-$prefix-cls: #{$namespace}-tool-header;
+$prefix-cls: v-tool-header;
 
 .#{$prefix-cls} {
   transition: left var(--transition-time-02);
diff --git a/src/layouts/components/UserInfo/src/components/LockPage.vue b/src/layouts/components/UserInfo/src/components/LockPage.vue
index 497dd37b..bbd17d61 100644
--- a/src/layouts/components/UserInfo/src/components/LockPage.vue
+++ b/src/layouts/components/UserInfo/src/components/LockPage.vue
@@ -152,7 +152,7 @@ function handleShowForm(show = false) {
 </template>
 
 <style lang="scss" scoped>
-$prefix-cls: '#{$namespace}-lock-page';
+$prefix-cls: 'v-lock-page';
 
 // Small screen / tablet
 $screen-sm: 576px;