fix: fixed some style issues (#4379)

1 week ago · 76a879d4d8
27 changed files with 160 additions and 66 deletions
--- a/apps/web-antd/src/router/index.ts
+++ b/apps/web-antd/src/router/index.ts
@ -19,7 +19,12 @@ const router = createRouter({
      : createWebHistory(import.meta.env.VITE_BASE),
  // 应该添加到路由的初始路由列表。
  routes,
-  scrollBehavior: () => ({ left: 0, top: 0 }),
+  scrollBehavior: (to, _from, savedPosition) => {
+    if (savedPosition) {
+      return savedPosition;
+    }
+    return to.hash ? { behavior: 'smooth', el: to.hash } : { left: 0, top: 0 };
+  },
  // 是否应该禁止尾部斜杠。
  // strict: true,
 });
--- a/apps/web-ele/src/router/index.ts
+++ b/apps/web-ele/src/router/index.ts
@ -19,7 +19,12 @@ const router = createRouter({
      : createWebHistory(import.meta.env.VITE_BASE),
  // 应该添加到路由的初始路由列表。
  routes,
-  scrollBehavior: () => ({ left: 0, top: 0 }),
+  scrollBehavior: (to, _from, savedPosition) => {
+    if (savedPosition) {
+      return savedPosition;
+    }
+    return to.hash ? { behavior: 'smooth', el: to.hash } : { left: 0, top: 0 };
+  },
  // 是否应该禁止尾部斜杠。
  // strict: true,
 });
--- a/apps/web-naive/src/router/index.ts
+++ b/apps/web-naive/src/router/index.ts
@ -19,7 +19,12 @@ const router = createRouter({
      : createWebHistory(import.meta.env.VITE_BASE),
  // 应该添加到路由的初始路由列表。
  routes,
-  scrollBehavior: () => ({ left: 0, top: 0 }),
+  scrollBehavior: (to, _from, savedPosition) => {
+    if (savedPosition) {
+      return savedPosition;
+    }
+    return to.hash ? { behavior: 'smooth', el: to.hash } : { left: 0, top: 0 };
+  },
  // 是否应该禁止尾部斜杠。
  // strict: true,
 });
--- a/docs/src/en/guide/essentials/development.md
+++ b/docs/src/en/guide/essentials/development.md
@ -55,15 +55,15 @@ The execution command is: `pnpm run [script]` or `npm run [script]`.
    // Build a local Docker image
    "build:docker": "./build-local-docker-image.sh",
    // Build the web-antd application separately
-    "build:antd": "pnpm run build --filter=@vben/web-antd",
+    "build:antd": "pnpm -F @vben/web-antd run build",
    // Build the documentation separately
-    "build:docs": "pnpm run build --filter=@vben/docs",
+    "build:docs": "pnpm -F @vben/docs run build",
    // Build the web-ele application separately
-    "build:ele": "pnpm run build --filter=@vben/web-ele",
+    "build:ele": "pnpm -F @vben/web-ele run build",
    // Build the web-naive application separately
-    "build:naive": "pnpm run build --filter=@vben/naive",
+    "build:naive": "pnpm -F @vben/web-naive run build",
    // Build the playground application separately
-    "build:play": "pnpm run build --filter=@vben/playground",
+    "build:play": "pnpm -F @vben/playground run build",
    // Changeset version management
    "changeset": "pnpm exec changeset",
    // Check for various issues in the project
--- a/docs/src/en/guide/introduction/thin.md
+++ b/docs/src/en/guide/introduction/thin.md
@ -52,11 +52,11 @@ After slimming down, you may need to adjust commands according to your project.
 ```json
 {
  "scripts": {
-    "build:antd": "pnpm run build --filter=@vben/web-antd",
-    "build:docs": "pnpm run build --filter=@vben/docs",
-    "build:ele": "pnpm run build --filter=@vben/web-ele",
-    "build:naive": "pnpm run build --filter=@vben/web-naive",
-    "build:play": "pnpm run build --filter=@vben/playground",
+    "build:antd": "pnpm -F @vben/web-antd run build",
+    "build:docs": "pnpm -F @vben/docs run build",
+    "build:ele": "pnpm -F @vben/web-ele run build",
+    "build:naive": "pnpm -F @vben/web-naive run build",
+    "build:play": "pnpm -F @vben/playground run build",
    "dev:antd": "pnpm -F @vben/web-antd run dev",
    "dev:docs": "pnpm -F @vben/docs run dev",
    "dev:ele": "pnpm -F @vben/web-ele run dev",
--- a/docs/src/guide/essentials/development.md
+++ b/docs/src/guide/essentials/development.md
@ -55,15 +55,15 @@ npm 脚本是项目常见的配置，用于执行一些常见的任务，比如
    // 构建本地 docker 镜像
    "build:docker": "./build-local-docker-image.sh",
    // 单独构建 web-antd 应用
-    "build:antd": "pnpm run build --filter=@vben/web-antd",
+    "build:antd": "pnpm -F @vben/web-antd run build",
    // 单独构建文档
-    "build:docs": "pnpm run build --filter=@vben/docs",
+    "build:docs": "pnpm -F @vben/docs run build",
    // 单独构建 web-ele 应用
-    "build:ele": "pnpm run build --filter=@vben/web-ele",
+    "build:ele": "pnpm -F @vben/web-ele run build",
    // 单独构建 web-naive 应用
-    "build:naive": "pnpm run build --filter=@vben/naive",
+    "build:naive": "pnpm -F @vben/web-naive run build",
    // 单独构建 playground 应用
-    "build:play": "pnpm run build --filter=@vben/playground",
+    "build:play": "pnpm -F @vben/playground run build",
    // changeset 版本管理
    "changeset": "pnpm exec changeset",
    // 检查项目各种问题
--- a/docs/src/guide/introduction/thin.md
+++ b/docs/src/guide/introduction/thin.md
@ -52,11 +52,11 @@ pnpm install
 ```json
 {
  "scripts": {
-    "build:antd": "pnpm run build --filter=@vben/web-antd",
-    "build:docs": "pnpm run build --filter=@vben/docs",
-    "build:ele": "pnpm run build --filter=@vben/web-ele",
-    "build:naive": "pnpm run build --filter=@vben/web-naive",
-    "build:play": "pnpm run build --filter=@vben/playground",
+    "build:antd": "pnpm -F @vben/web-antd run build",
+    "build:docs": "pnpm -F @vben/docs run build",
+    "build:ele": "pnpm -F @vben/web-ele run build",
+    "build:naive": "pnpm -F @vben/web-naive run build",
+    "build:play": "pnpm -F @vben/playground run build",
    "dev:antd": "pnpm -F @vben/web-antd run dev",
    "dev:docs": "pnpm -F @vben/docs run dev",
    "dev:ele": "pnpm -F @vben/web-ele run dev",
--- a/package.json
+++ b/package.json
@ -29,11 +29,11 @@
    "build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 turbo build",
    "build:analyze": "turbo build:analyze",
    "build:docker": "./build-local-docker-image.sh",
-    "build:antd": "pnpm run build --filter=@vben/web-antd",
-    "build:docs": "pnpm run build --filter=@vben/docs",
-    "build:ele": "pnpm run build --filter=@vben/web-ele",
-    "build:naive": "pnpm run build --filter=@vben/web-naive",
-    "build:play": "pnpm run build --filter=@vben/playground",
+    "build:antd": "pnpm -F @vben/web-antd run build",
+    "build:docs": "pnpm -F @vben/docs run build",
+    "build:ele": "pnpm -F @vben/web-ele run build",
+    "build:naive": "pnpm -F @vben/web-naive run build",
+    "build:play": "pnpm -F @vben/playground run build",
    "changeset": "pnpm exec changeset",
    "check": "pnpm run check:circular && pnpm run check:dep && pnpm run check:type && pnpm check:cspell",
    "check:circular": "vsh check-circular",
--- a/packages/@core/base/shared/src/utils/merge.ts
+++ b/packages/@core/base/shared/src/utils/merge.ts
@ -1 +1 @@
-export { defu as merge } from 'defu';
+export { createDefu as createMerge, defu as merge } from 'defu';
--- a/packages/@core/ui-kit/form-ui/src/form-api.ts
+++ b/packages/@core/ui-kit/form-ui/src/form-api.ts
@ -10,7 +10,19 @@ import type { FormActions, VbenFormProps } from './types';
 import { toRaw } from 'vue';

 import { Store } from '@vben-core/shared/store';
-import { bindMethods, isFunction, StateHandler } from '@vben-core/shared/utils';
+import {
+  bindMethods,
+  createMerge,
+  isFunction,
+  StateHandler,
+} from '@vben-core/shared/utils';
+
+const merge = createMerge((originObj, key, updates) => {
+  if (Array.isArray(originObj[key]) && Array.isArray(updates)) {
+    originObj[key] = updates;
+    return true;
+  }
+});

 function getDefaultState(): VbenFormProps {
  return {
@ -138,9 +150,11 @@ export class FormApi {
      | Partial<VbenFormProps>,
  ) {
    if (isFunction(stateOrFn)) {
-      this.store.setState(stateOrFn as (prev: VbenFormProps) => VbenFormProps);
+      this.store.setState((prev) => {
+        return merge(stateOrFn(prev), prev);
+      });
    } else {
-      this.store.setState((prev) => ({ ...prev, ...stateOrFn }));
+      this.store.setState((prev) => merge(stateOrFn, prev));
    }
  }

--- a/packages/@core/ui-kit/form-ui/src/form-render/expandable.ts
+++ b/packages/@core/ui-kit/form-ui/src/form-render/expandable.ts
@ -22,7 +22,7 @@ export function useExpandable(props: FormRenderProps) {
    for (let index = 1; index <= rows; index++) {
      maxItem += mapping?.[index] ?? 0;
    }
-    return maxItem - 1;
+    return maxItem - 1 || 1;
  });

  watch(
@ -50,11 +50,11 @@ export function useExpandable(props: FormRenderProps) {
      return;
    }
    // 小屏幕不计算
-    if (breakpoints.smaller('sm').value) {
-      // 保持一行
-      rowMapping.value = { 1: 2 };
-      return;
-    }
+    // if (breakpoints.smaller('sm').value) {
+    //   // 保持一行
+    //   rowMapping.value = { 1: 2 };
+    //   return;
+    // }

    const formItems = [...wrapperRef.value.children];

--- a/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts
+++ b/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts
@ -29,10 +29,12 @@ export class DrawerApi {
    } = options;

    const defaultState: DrawerState = {
+      class: '',
      closable: true,
      closeOnClickModal: true,
      closeOnPressEscape: true,
      confirmLoading: false,
+      contentClass: '',
      footer: true,
      isOpen: false,
      loading: false,
--- a/packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts
+++ b/packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts
@ -7,6 +7,7 @@ export interface DrawerProps {
   * 取消按钮文字
   */
  cancelText?: string;
+  class?: string;
  /**
   * 是否显示右上角的关闭按钮
   * @default true
@ -31,6 +32,7 @@ export interface DrawerProps {
   * 确定按钮文字
   */
  confirmText?: string;
+  contentClass?: string;
  /**
   * 弹窗描述
   */
--- a/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
+++ b/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
@ -26,14 +26,10 @@ import {
 import { cn } from '@vben-core/shared/utils';

 interface Props extends DrawerProps {
-  class?: string;
-  contentClass?: string;
  drawerApi?: ExtendedDrawerApi;
 }

 const props = withDefaults(defineProps<Props>(), {
-  class: '',
-  contentClass: '',
  drawerApi: undefined,
 });

@ -44,11 +40,13 @@ const state = props.drawerApi?.useStore?.();

 const {
  cancelText,
+  class: drawerClass,
  closable,
  closeOnClickModal,
  closeOnPressEscape,
  confirmLoading,
  confirmText,
+  contentClass,
  description,
  footer: showFooter,
  loading: showLoading,
@ -98,7 +96,7 @@ function pointerDownOutside(e: Event) {
  >
    <SheetContent
      :class="
-        cn('flex w-[520px] flex-col', props.class, {
+        cn('flex w-[520px] flex-col', drawerClass, {
          '!w-full': isMobile,
        })
      "
--- a/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts
+++ b/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts
@ -30,14 +30,18 @@ export class ModalApi {

    const defaultState: ModalState = {
      centered: false,
+      class: '',
      closeOnClickModal: true,
      closeOnPressEscape: true,
      confirmLoading: false,
+      contentClass: '',
      draggable: false,
      footer: true,
+      footerClass: '',
      fullscreen: false,
      fullscreenButton: true,
      header: true,
+      headerClass: '',
      isOpen: false,
      loading: false,
      modal: true,
--- a/packages/@core/ui-kit/popup-ui/src/modal/modal.ts
+++ b/packages/@core/ui-kit/popup-ui/src/modal/modal.ts
@ -12,6 +12,7 @@ export interface ModalProps {
   * @default false
   */
  centered?: boolean;
+  class?: string;
  /**
   * 是否显示右上角的关闭按钮
   * @default true
@ -36,6 +37,7 @@ export interface ModalProps {
   * 确定按钮文字
   */
  confirmText?: string;
+  contentClass?: string;
  /**
   * 弹窗描述
   */
@ -50,6 +52,7 @@ export interface ModalProps {
   * @default true
   */
  footer?: boolean;
+  footerClass?: string;
  /**
   * 是否全屏
   * @default false
@ -65,6 +68,7 @@ export interface ModalProps {
   * @default true
   */
  header?: boolean;
+  headerClass?: string;
  /**
   * 弹窗是否显示
   * @default false
--- a/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
+++ b/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
@ -27,18 +27,10 @@ import { cn } from '@vben-core/shared/utils';
 import { useModalDraggable } from './use-modal-draggable';

 interface Props extends ModalProps {
-  class?: string;
-  contentClass?: string;
-  footerClass?: string;
-  headerClass?: string;
  modalApi?: ExtendedModalApi;
 }

 const props = withDefaults(defineProps<Props>(), {
-  class: '',
-  contentClass: '',
-  footerClass: '',
-  headerClass: '',
  modalApi: undefined,
 });

@ -55,17 +47,21 @@ const state = props.modalApi?.useStore?.();
 const {
  cancelText,
  centered,
+  class: modalClass,
  closable,
  closeOnClickModal,
  closeOnPressEscape,
  confirmLoading,
  confirmText,
+  contentClass,
  description,
  draggable,
  footer: showFooter,
+  footerClass,
  fullscreen,
  fullscreenButton,
  header,
+  headerClass,
  loading: showLoading,
  modal,
  openAutoFocus,
@ -161,7 +157,7 @@ function pointerDownOutside(e: Event) {
      :class="
        cn(
          'border-border left-0 right-0 top-[10vh] mx-auto flex max-h-[80%] w-[520px] flex-col border p-0',
-          props.class,
+          modalClass,
          {
            'left-0 top-0 size-full max-h-full !translate-x-0 !translate-y-0':
              shouldFullscreen,
@ -186,7 +182,7 @@ function pointerDownOutside(e: Event) {
              hidden: !header,
              'cursor-move select-none': shouldDraggable,
            },
-            props.headerClass,
+            headerClass,
          )
        "
      >
@ -240,10 +236,7 @@ function pointerDownOutside(e: Event) {
        v-if="showFooter"
        ref="footerRef"
        :class="
-          cn(
-            'flex-row items-center justify-end border-t p-2',
-            props.footerClass,
-          )
+          cn('flex-row items-center justify-end border-t p-2', footerClass)
        "
      >
        <slot name="prepend-footer"></slot>
--- a/packages/@core/ui-kit/shadcn-ui/src/components/index.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/index.ts
@ -20,6 +20,7 @@ export * from './render-content';
 export * from './scrollbar';
 export * from './segmented';
 export * from './select';
+export * from './spine-text';
 export * from './spinner';
 export * from './swap';
 export * from './tooltip';
--- a/packages/@core/ui-kit/shadcn-ui/src/components/spine-text/index.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/spine-text/index.ts
@ -0,0 +1 @@
+export { default as VbenSpineText } from './spine-text.vue';
--- a/packages/@core/ui-kit/shadcn-ui/src/components/spine-text/spine-text.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/spine-text/spine-text.vue
@ -0,0 +1,31 @@
+<template>
+  <div class="vben-spine-text !bg-clip-text text-transparent">
+    <slot></slot>
+  </div>
+</template>
+<style>
+.vben-spine-text {
+  background:
+    radial-gradient(circle at center, rgb(255 255 255 / 80%), #f000) -200% 50% /
+      200% 100% no-repeat,
+    #000;
+  animation: shine 3s linear infinite;
+}
+
+.dark .vben-spine-text {
+  background:
+    radial-gradient(circle at center, rgb(24 24 26 / 80%), transparent) -200% 50% /
+      200% 100% no-repeat,
+    #f4f4f4;
+}
+
+@keyframes shine {
+  0% {
+    background-position: 200% 0%;
+  }
+
+  100% {
+    background-position: -200% 0%;
+  }
+}
+</style>
--- a/packages/effects/common-ui/src/ui/authentication/code-login.vue
+++ b/packages/effects/common-ui/src/ui/authentication/code-login.vue
@ -96,7 +96,14 @@ function goToLogin() {
      </template>
    </Title>
    <Form />
-    <VbenButton :loading="loading" class="w-full" @click="handleSubmit">
+    <VbenButton
+      :class="{
+        'cursor-wait': loading,
+      }"
+      :loading="loading"
+      class="w-full"
+      @click="handleSubmit"
+    >
      <slot name="submitButtonText">
        {{ submitButtonText || $t('common.login') }}
      </slot>
--- a/packages/effects/common-ui/src/ui/authentication/forget-password.vue
+++ b/packages/effects/common-ui/src/ui/authentication/forget-password.vue
@ -91,7 +91,13 @@ function goToLogin() {
    <Form />

    <div>
-      <VbenButton class="mt-2 w-full" @click="handleSubmit">
+      <VbenButton
+        :class="{
+          'cursor-wait': loading,
+        }"
+        class="mt-2 w-full"
+        @click="handleSubmit"
+      >
        <slot name="submitButtonText">
          {{ submitButtonText || $t('authentication.sendResetLink') }}
        </slot>
--- a/packages/effects/common-ui/src/ui/authentication/login.vue
+++ b/packages/effects/common-ui/src/ui/authentication/login.vue
@ -124,7 +124,14 @@ onMounted(() => {
        {{ $t('authentication.forgetPassword') }}
      </span>
    </div>
-    <VbenButton :loading="loading" class="w-full" @click="handleSubmit">
+    <VbenButton
+      :class="{
+        'cursor-wait': loading,
+      }"
+      :loading="loading"
+      class="w-full"
+      @click="handleSubmit"
+    >
      {{ submitButtonText || $t('common.login') }}
    </VbenButton>

--- a/packages/effects/common-ui/src/ui/authentication/register.vue
+++ b/packages/effects/common-ui/src/ui/authentication/register.vue
@ -92,7 +92,14 @@ function goToLogin() {
    </Title>
    <Form />

-    <VbenButton :loading="loading" class="mt-2 w-full" @click="handleSubmit">
+    <VbenButton
+      :class="{
+        'cursor-wait': loading,
+      }"
+      :loading="loading"
+      class="mt-2 w-full"
+      @click="handleSubmit"
+    >
      <slot name="submitButtonText">
        {{ submitButtonText || $t('authentication.signUp') }}
      </slot>
--- a/playground/src/router/index.ts
+++ b/playground/src/router/index.ts
@ -19,7 +19,12 @@ const router = createRouter({
      : createWebHistory(import.meta.env.VITE_BASE),
  // 应该添加到路由的初始路由列表。
  routes,
-  scrollBehavior: () => ({ left: 0, top: 0 }),
+  scrollBehavior: (to, _from, savedPosition) => {
+    if (savedPosition) {
+      return savedPosition;
+    }
+    return to.hash ? { behavior: 'smooth', el: to.hash } : { left: 0, top: 0 };
+  },
  // 是否应该禁止尾部斜杠。
  // strict: true,
 });
--- a/playground/src/views/examples/form/custom.vue
+++ b/playground/src/views/examples/form/custom.vue
@ -14,7 +14,7 @@ const [BaseForm] = useVbenForm({
    componentProps: {
      class: 'w-full',
    },
-    labelWidth: 200,
+    labelClass: 'w-2/6',
  },
  // 使用 tailwindcss grid布局
  // 提交函数
--- a/playground/src/views/examples/form/dynamic.vue
+++ b/playground/src/views/examples/form/dynamic.vue
@ -210,7 +210,6 @@ function onSubmit(values: Record<string, any>) {
 function handleDelete() {
  formApi.setState((prev) => {
    return {
-      ...prev,
      schema: prev.schema?.filter((item) => item.fieldName !== 'field7'),
    };
  });
@ -219,7 +218,6 @@ function handleDelete() {
 function handleAdd() {
  formApi.setState((prev) => {
    return {
-      ...prev,
      schema: [
        ...(prev?.schema ?? []),
        {
@ -235,7 +233,6 @@ function handleAdd() {
 function handleUpdate() {
  formApi.setState((prev) => {
    return {
-      ...prev,
      schema: prev.schema?.map((item) => {
        if (item.fieldName === 'field3') {
          return {