refactor(project): remove the use of core internal bem syntax

packages/effects/common-ui/package.json

@@ -37,6 +37,7 @@
     }
   },
   "dependencies": {
+    "@vben-core/hooks": "workspace:*",
     "@vben-core/iconify": "workspace:*",
     "@vben-core/locales": "workspace:*",
     "@vben-core/shadcn-ui": "workspace:*",

packages/effects/common-ui/src/authentication/login-expired-modal.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
+import { useForwardPropsEmits } from '@vben-core/hooks';
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogTitle,
   VisuallyHidden,
-  useForwardPropsEmits,
 } from '@vben-core/shadcn-ui';
 
 import AuthenticationLogin from './login.vue';

packages/effects/common-ui/src/dashboard/analysis/analysis-charts-tabs.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { TabsOption } from '@vben/types';
+import type { TabOption } from '@vben/types';
 
 import { computed } from 'vue';
 
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@vben-core/shadcn-ui';
 
 interface Props {
-  tabs: TabsOption[];
+  tabs: TabOption[];
 }
 
 defineOptions({

packages/effects/layouts/src/basic/tabbar/use-tabs.ts

@@ -1,5 +1,5 @@
 import type { IContextMenuItem } from '@vben-core/tabs-ui';
-import type { TabItem } from '@vben-core/typings';
+import type { TabDefinition } from '@vben-core/typings';
 import type {
   RouteLocationNormalized,
   RouteLocationNormalizedGeneric,
@@ -105,7 +105,7 @@ function useTabs() {
     { immediate: true },
   );
 
-  const createContextMenus = (tab: TabItem) => {
+  const createContextMenus = (tab: TabDefinition) => {
     const tabs = coreTabbarStore.getTabs;
     const affixTabs = coreTabbarStore.affixTabs;
     const index = tabs.findIndex((item) => item.path === tab.path);
@@ -228,7 +228,7 @@ function useTabs() {
   /**
    * 取消固定标签页
    */
-  const handleUnpinTab = async (tab: TabItem) => {
+  const handleUnpinTab = async (tab: TabDefinition) => {
     await coreTabbarStore.unpinTab(tab);
   };
 

packages/effects/layouts/src/widgets/theme-toggle/theme-button.vue

@@ -2,7 +2,6 @@
 import { computed, nextTick } from 'vue';
 
 import { VbenButton } from '@vben-core/shadcn-ui';
-import { useNamespace } from '@vben-core/toolkit';
 
 interface Props {
   /**
@@ -21,8 +20,6 @@ const props = withDefaults(defineProps<Props>(), {
 
 const isDark = defineModel<boolean>();
 
-const { b, e, is } = useNamespace('theme-toggle');
-
 const theme = computed(() => {
   return isDark.value ? 'light' : 'dark';
 });
@@ -86,7 +83,7 @@ function toggleTheme(event: MouseEvent) {
 <template>
   <VbenButton
     :aria-label="theme"
-    :class="[b(), is(theme), `is-${theme}`]"
+    :class="[`is-${theme}`]"
     aria-live="polite"
     class="theme-toggle cursor-pointer border-none bg-none"
     v-bind="bindProps"
@@ -95,7 +92,6 @@ function toggleTheme(event: MouseEvent) {
     <svg aria-hidden="true" height="24" viewBox="0 0 24 24" width="24">
       <mask
         id="theme-toggle-moon"
-        :class="e('moon')"
         class="theme-toggle__moon"
         fill="hsl(var(--foreground)/80%)"
         stroke="none"
@@ -105,14 +101,13 @@ function toggleTheme(event: MouseEvent) {
       </mask>
       <circle
         id="sun"
-        :class="e('sun')"
         class="theme-toggle__sun"
         cx="12"
         cy="12"
         mask="url(#theme-toggle-moon)"
         r="11"
       />
-      <g :class="e('sun-beams')" class="theme-toggle__sun-beams">
+      <g class="theme-toggle__sun-beams">
         <line x1="12" x2="12" y1="1" y2="3" />
         <line x1="12" x2="12" y1="21" y2="23" />
         <line x1="4.22" x2="5.64" y1="4.22" y2="5.64" />