Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin

2024-10-17 13:36:03 +08:00
parent b6256d4736 a0fbe0b21a
commit 70e7d6a131
54 changed files with 357 additions and 319 deletions
--- a/packages/@core/base/design/src/index.ts
+++ b/packages/@core/base/design/src/index.ts
@@ -1,7 +1,8 @@
+import './design-tokens';
+
 import './css/global.css';
 import './css/transition.css';
 import './css/nprogress.css';
 import './css/ui.css';
-import './design-tokens';

 export {};
--- a/packages/@core/preferences/tests/snapshots/config.test.ts.snap
+++ b/packages/@core/preferences/tests/snapshots/config.test.ts.snap
@@ -93,7 +93,7 @@ exports[`defaultPreferences immutability test > should not modify the config obj
    "mode": "dark",
    "radius": "0.5",
    "semiDarkHeader": false,
-    "semiDarkSidebar": true,
+    "semiDarkSidebar": false,
  },
  "transition": {
    "enable": true,
--- a/packages/@core/preferences/src/config.ts
+++ b/packages/@core/preferences/src/config.ts
@@ -82,7 +82,6 @@ const defaultPreferences: Preferences = {
    showIcon: true,
    showMaximize: true,
    showMore: true,
-
    styleType: 'chrome',
  },
  theme: {
@@ -94,7 +93,7 @@ const defaultPreferences: Preferences = {
    mode: 'auto',
    radius: '0.5',
    semiDarkHeader: false,
-    semiDarkSidebar: true,
+    semiDarkSidebar: false,
  },
  transition: {
    enable: true,
--- a/packages/@core/preferences/src/update-css-variables.ts
+++ b/packages/@core/preferences/src/update-css-variables.ts
@@ -18,7 +18,7 @@ function updateCSSVariables(preferences: Preferences) {

  const theme = preferences?.theme ?? {};

-  const { builtinType, colorPrimary, mode, radius } = theme;
+  const { builtinType, mode, radius } = theme;

  // html 设置 dark 类
  if (Reflect.has(theme, 'mode')) {
@@ -58,7 +58,7 @@ function updateCSSVariables(preferences: Preferences) {
    Reflect.has(theme, 'colorSuccess') ||
    Reflect.has(theme, 'colorWarning')
  ) {
-    preferences.theme.colorPrimary = builtinTypeColorPrimary || colorPrimary;
+    // preferences.theme.colorPrimary = builtinTypeColorPrimary || colorPrimary;
    updateMainColorVariables(preferences);
  }

--- a/packages/@core/ui-kit/form-ui/src/components/form-actions.vue
+++ b/packages/@core/ui-kit/form-ui/src/components/form-actions.vue
@@ -83,6 +83,9 @@ watch(
    "
    :style="queryFormStyle"
  >
+    <!-- 重置按钮前 -->
+    <slot name="reset-before"></slot>
+
    <component
      :is="COMPONENT_MAP.DefaultButton"
      v-if="resetButtonOptions.show"
@@ -94,6 +97,9 @@ watch(
      {{ resetButtonOptions.content }}
    </component>

+    <!-- 提交按钮前 -->
+    <slot name="submit-before"></slot>
+
    <component
      :is="COMPONENT_MAP.PrimaryButton"
      v-if="submitButtonOptions.show"
@@ -104,6 +110,9 @@ watch(
      {{ submitButtonOptions.content }}
    </component>

+    <!-- 展开按钮前 -->
+    <slot name="expand-before"></slot>
+
    <VbenExpandableArrow
      v-if="rootProps.showCollapseButton"
      v-model:model-value="collapsed"
@@ -111,5 +120,8 @@ watch(
    >
      <span>{{ collapsed ? $t('expand') : $t('collapse') }}</span>
    </VbenExpandableArrow>
+
+    <!-- 展开按钮后 -->
+    <slot name="expand-after"></slot>
  </div>
 </template>
--- a/packages/@core/ui-kit/form-ui/src/vben-use-form.vue
+++ b/packages/@core/ui-kit/form-ui/src/vben-use-form.vue
@@ -58,7 +58,20 @@ const handleUpdateCollapsed = (value: boolean) => {
          v-if="forward.showDefaultActions"
          :model-value="state.collapsed"
          @update:model-value="handleUpdateCollapsed"
-        />
+        >
+          <template #reset-before="resetSlotProps">
+            <slot name="reset-before" v-bind="resetSlotProps"></slot>
+          </template>
+          <template #submit-before="submitSlotProps">
+            <slot name="submit-before" v-bind="submitSlotProps"></slot>
+          </template>
+          <template #expand-before="expandBeforeSlotProps">
+            <slot name="expand-before" v-bind="expandBeforeSlotProps"></slot>
+          </template>
+          <template #expand-after="expandAfterSlotProps">
+            <slot name="expand-after" v-bind="expandAfterSlotProps"></slot>
+          </template>
+        </FormActions>
      </slot>
    </template>
  </Form>
--- a/packages/effects/access/src/accessible.ts
+++ b/packages/effects/access/src/accessible.ts
@@ -53,6 +53,10 @@ async function generateRoutes(

  let resultRoutes: RouteRecordRaw[] = routes;
  switch (mode) {
+    case 'backend': {
+      resultRoutes = await generateRoutesByBackend(options);
+      break;
+    }
    case 'frontend': {
      resultRoutes = await generateRoutesByFrontend(
        routes,
@@ -61,10 +65,6 @@ async function generateRoutes(
      );
      break;
    }
-    case 'backend': {
-      resultRoutes = await generateRoutesByBackend(options);
-      break;
-    }
  }

  /**
--- a/packages/effects/layouts/src/authentication/toolbar.vue
+++ b/packages/effects/layouts/src/authentication/toolbar.vue
@@ -3,6 +3,8 @@ import type { ToolbarType } from './types';

 import { computed } from 'vue';

+import { preferences } from '@vben/preferences';
+
 import {
  AuthenticationColorToggle,
  AuthenticationLayoutToggle,
@@ -41,7 +43,7 @@ const showTheme = computed(() => props.toolbarList.includes('theme'));
      <AuthenticationLayoutToggle v-if="showLayout" />
    </div>
    <!-- Always show Language and Theme toggles -->
-    <LanguageToggle v-if="showLanguage" />
-    <ThemeToggle v-if="showTheme" />
+    <LanguageToggle v-if="showLanguage && preferences.widget.languageToggle" />
+    <ThemeToggle v-if="showTheme && preferences.widget.themeToggle" />
  </div>
 </template>
--- a/packages/effects/layouts/src/widgets/color-toggle.vue
+++ b/packages/effects/layouts/src/widgets/color-toggle.vue
@@ -13,10 +13,11 @@ defineOptions({
  name: 'AuthenticationColorToggle',
 });

-function handleUpdate(value: BuiltinThemeType) {
+function handleUpdate(colorPrimary: string, type: BuiltinThemeType) {
  updatePreferences({
    theme: {
-      builtinType: value,
+      colorPrimary,
+      builtinType: type,
    },
  });
 }
@@ -30,7 +31,7 @@ function handleUpdate(value: BuiltinThemeType) {
      <template v-for="preset in COLOR_PRESETS" :key="preset.color">
        <VbenIconButton
          class="flex-center flex-shrink-0"
-          @click="handleUpdate(preset.type)"
+          @click="handleUpdate(preset.color, preset.type)"
        >
          <div
            :style="{ backgroundColor: preset.color }"
--- a/packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue
+++ b/packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue
@@ -31,11 +31,30 @@ const builtinThemePresets = computed(() => {

 function typeView(name: BuiltinThemeType) {
  switch (name) {
+    case 'custom': {
+      return $t('preferences.theme.builtin.custom');
+    }
+    case 'deep-blue': {
+      return $t('preferences.theme.builtin.deepBlue');
+    }
+    case 'deep-green': {
+      return $t('preferences.theme.builtin.deepGreen');
+    }
    case 'default': {
      return $t('preferences.theme.builtin.default');
    }
-    case 'violet': {
-      return $t('preferences.theme.builtin.violet');
+    case 'gray': {
+      return $t('preferences.theme.builtin.gray');
+    }
+    case 'green': {
+      return $t('preferences.theme.builtin.green');
+    }
+
+    case 'neutral': {
+      return $t('preferences.theme.builtin.neutral');
+    }
+    case 'orange': {
+      return $t('preferences.theme.builtin.orange');
    }
    case 'pink': {
      return $t('preferences.theme.builtin.pink');
@@ -46,18 +65,11 @@ function typeView(name: BuiltinThemeType) {
    case 'sky-blue': {
      return $t('preferences.theme.builtin.skyBlue');
    }
-    case 'deep-blue': {
-      return $t('preferences.theme.builtin.deepBlue');
+    case 'slate': {
+      return $t('preferences.theme.builtin.slate');
    }
-
-    case 'green': {
-      return $t('preferences.theme.builtin.green');
-    }
-    case 'deep-green': {
-      return $t('preferences.theme.builtin.deepGreen');
-    }
-    case 'orange': {
-      return $t('preferences.theme.builtin.orange');
+    case 'violet': {
+      return $t('preferences.theme.builtin.violet');
    }
    case 'yellow': {
      return $t('preferences.theme.builtin.yellow');
@@ -65,18 +77,6 @@ function typeView(name: BuiltinThemeType) {
    case 'zinc': {
      return $t('preferences.theme.builtin.zinc');
    }
-    case 'neutral': {
-      return $t('preferences.theme.builtin.neutral');
-    }
-    case 'slate': {
-      return $t('preferences.theme.builtin.slate');
-    }
-    case 'gray': {
-      return $t('preferences.theme.builtin.gray');
-    }
-    case 'custom': {
-      return $t('preferences.theme.builtin.custom');
-    }
  }
 }

--- a/packages/effects/layouts/src/widgets/preferences/blocks/theme/theme.vue
+++ b/packages/effects/layouts/src/widgets/preferences/blocks/theme/theme.vue
@@ -37,14 +37,14 @@ function activeClass(theme: string): string[] {

 function nameView(name: string) {
  switch (name) {
-    case 'light': {
-      return $t('preferences.theme.light');
+    case 'auto': {
+      return $t('preferences.followSystem');
    }
    case 'dark': {
      return $t('preferences.theme.dark');
    }
-    case 'auto': {
-      return $t('preferences.followSystem');
+    case 'light': {
+      return $t('preferences.theme.light');
    }
  }
 }
--- a/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
+++ b/packages/effects/plugins/src/vxe-table/use-vxe-grid.vue
@@ -277,6 +277,18 @@ onMounted(() => {
                  v-bind="slotProps"
                ></slot>
              </template>
+              <template #reset-before="slotProps">
+                <slot name="reset-before" v-bind="slotProps"></slot>
+              </template>
+              <template #submit-before="slotProps">
+                <slot name="submit-before" v-bind="slotProps"></slot>
+              </template>
+              <template #expand-before="slotProps">
+                <slot name="expand-before" v-bind="slotProps"></slot>
+              </template>
+              <template #expand-after="slotProps">
+                <slot name="expand-after" v-bind="slotProps"></slot>
+              </template>
            </Form>
          </slot>
          <div
--- a/packages/stores/src/modules/tabbar.ts
+++ b/packages/stores/src/modules/tabbar.ts
@@ -306,7 +306,9 @@ export const useTabbarStore = defineStore('core-tabbar', {
        (item) => getTabPath(item) === getTabPath(tab),
      );
      if (index !== -1) {
+        const oldTab = this.tabs[index];
        tab.meta.affixTab = true;
+        tab.meta.title = oldTab?.meta?.title as string;
        // this.addTab(tab);
        this.tabs.splice(index, 1, tab);
      }
@@ -411,7 +413,9 @@ export const useTabbarStore = defineStore('core-tabbar', {
      );

      if (index !== -1) {
+        const oldTab = this.tabs[index];
        tab.meta.affixTab = false;
+        tab.meta.title = oldTab?.meta?.title as string;
        // this.addTab(tab);
        this.tabs.splice(index, 1, tab);
      }