feat: add naive app

packages/@core/preferences/src/config.ts

@@ -18,7 +18,7 @@ const defaultPreferences: Preferences = {
     layout: 'sidebar-nav',
     locale: 'zh-CN',
     loginExpiredMode: 'modal',
-    name: 'Vben Admin',
+    name: 'Vben Admin Naive',
     watermark: false,
   },
   breadcrumb: {

packages/@core/ui-kit/tabs-ui/src/tabs-view.vue

@@ -2,7 +2,7 @@
 import type { Sortable } from '@vben-core/composables';
 import type { TabDefinition } from '@vben-core/typings';
 
-import { nextTick, onMounted, onUnmounted, ref } from 'vue';
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 
 import { useForwardPropsEmits, useSortable } from '@vben-core/composables';
 
@@ -105,6 +105,14 @@ async function initTabsSortable() {
 
 onMounted(initTabsSortable);
 
+watch(
+  () => props.styleType,
+  () => {
+    sortableInstance.value?.destroy();
+    initTabsSortable();
+  },
+);
+
 onUnmounted(() => {
   sortableInstance.value?.destroy();
 });

packages/effects/hooks/src/use-design-tokens.ts

@@ -2,10 +2,14 @@ import { reactive, watch } from 'vue';
 
 import { preferences } from '@vben/preferences';
 
-export function useDesignTokens() {
+/**
+ * 用于适配各个框架的设计系统
+ */
+
+export function useAntdDesignTokens() {
   const rootStyles = getComputedStyle(document.documentElement);
 
-  const antDesignTokens = reactive({
+  const tokens = reactive({
     borderRadius: '' as any,
     colorBgBase: '',
     colorBgContainer: '',
@@ -29,23 +33,124 @@ export function useDesignTokens() {
   watch(
     () => preferences.theme,
     () => {
-      antDesignTokens.colorPrimary = getCssVariableValue('--primary');
-      antDesignTokens.colorError = getCssVariableValue('--destructive');
-      antDesignTokens.colorWarning = getCssVariableValue('--warning');
-      antDesignTokens.colorSuccess = getCssVariableValue('--success');
-      antDesignTokens.colorBgBase = getCssVariableValue('--background');
-      antDesignTokens.colorBgLayout = getCssVariableValue('--background-deep');
-      antDesignTokens.colorBgMask = getCssVariableValue('--overlay');
-      antDesignTokens.colorBorder = getCssVariableValue('--border');
-      antDesignTokens.colorTextBase = getCssVariableValue('--foreground');
-      antDesignTokens.colorBgElevated = getCssVariableValue('--popover');
-      antDesignTokens.colorBgContainer = getCssVariableValue('--card');
-      antDesignTokens.borderRadius = getCssVariableValue('--radius', false);
+      tokens.colorPrimary = getCssVariableValue('--primary');
+
+      tokens.colorError = getCssVariableValue('--destructive');
+
+      tokens.colorWarning = getCssVariableValue('--warning');
+
+      tokens.colorSuccess = getCssVariableValue('--success');
+
+      tokens.colorTextBase = getCssVariableValue('--foreground');
+
+      getCssVariableValue('--primary-foreground');
+
+      tokens.colorBorder = getCssVariableValue('--border');
+
+      tokens.colorBgElevated = getCssVariableValue('--popover');
+
+      tokens.colorBgContainer = getCssVariableValue('--card');
+
+      tokens.colorBgBase = getCssVariableValue('--background');
+
+      tokens.borderRadius = getCssVariableValue('--radius', false);
+
+      tokens.colorBgLayout = getCssVariableValue('--background-deep');
+      tokens.colorBgMask = getCssVariableValue('--overlay');
     },
     { immediate: true },
   );
 
   return {
-    antDesignTokens,
+    tokens,
+  };
+}
+
+export function useNaiveDesignTokens() {
+  const rootStyles = getComputedStyle(document.documentElement);
+
+  const commonTokens = reactive({
+    baseColor: '',
+    bodyColor: '',
+    borderColor: '',
+    borderRadius: '',
+    cardColor: '',
+    dividerColor: '',
+    errorColor: '',
+    errorColorHover: '',
+    errorColorPressed: '',
+    errorColorSuppl: '',
+    invertedColor: '',
+    modalColor: '',
+    popoverColor: '',
+    primaryColor: '',
+    primaryColorHover: '',
+    primaryColorPressed: '',
+    primaryColorSuppl: '',
+    successColor: '',
+    successColorHover: '',
+    successColorPressed: '',
+    successColorSuppl: '',
+    tableColor: '',
+    textColorBase: '',
+    warningColor: '',
+    warningColorHover: '',
+    warningColorPressed: '',
+    warningColorSuppl: '',
+  });
+
+  const getCssVariableValue = (variable: string, isColor: boolean = true) => {
+    const value = rootStyles.getPropertyValue(variable);
+    return isColor ? `hsl(${value})` : value;
+  };
+
+  watch(
+    () => preferences.theme,
+    () => {
+      commonTokens.primaryColor = getCssVariableValue('--primary');
+      commonTokens.primaryColorHover = getCssVariableValue('--primary-600');
+      commonTokens.primaryColorPressed = getCssVariableValue('--primary-700');
+      commonTokens.primaryColorSuppl = getCssVariableValue('--primary-800');
+
+      commonTokens.errorColor = getCssVariableValue('--destructive');
+      commonTokens.errorColorHover = getCssVariableValue('--destructive-600');
+      commonTokens.errorColorPressed = getCssVariableValue('--destructive-700');
+      commonTokens.errorColorSuppl = getCssVariableValue('--destructive-800');
+
+      commonTokens.warningColor = getCssVariableValue('--warning');
+      commonTokens.warningColorHover = getCssVariableValue('--warning-600');
+      commonTokens.warningColorPressed = getCssVariableValue('--warning-700');
+      commonTokens.warningColorSuppl = getCssVariableValue('--warning-800');
+
+      commonTokens.successColor = getCssVariableValue('--success');
+      commonTokens.successColorHover = getCssVariableValue('--success-600');
+      commonTokens.successColorPressed = getCssVariableValue('--success-700');
+      commonTokens.successColorSuppl = getCssVariableValue('--success-800');
+
+      commonTokens.textColorBase = getCssVariableValue('--foreground');
+
+      commonTokens.baseColor = getCssVariableValue('--primary-foreground');
+
+      commonTokens.dividerColor = commonTokens.borderColor =
+        getCssVariableValue('--border');
+
+      commonTokens.modalColor = commonTokens.popoverColor =
+        getCssVariableValue('--popover');
+
+      commonTokens.tableColor = commonTokens.cardColor =
+        getCssVariableValue('--card');
+
+      commonTokens.bodyColor = getCssVariableValue('--background');
+      commonTokens.invertedColor = getCssVariableValue('--background-deep');
+
+      commonTokens.borderRadius = getCssVariableValue('--radius', false);
+
+      // antDesignTokens.colorBgMask = getCssVariableValue('--overlay');
+    },
+    { immediate: true },
+  );
+
+  return {
+    commonTokens,
   };
 }