chore: update vben admin

apps/admin/package.json

@@ -56,7 +56,7 @@
  "@vueuse/core": "^9.13.0",
  "@vueuse/shared": "^9.13.0",
  "@zxcvbn-ts/core": "^2.2.1",
- "ant-design-vue": "^3.2.20",
+ "ant-design-vue": "^4.0.6",
  "axios": "^1.6.0",
  "codemirror": "^5.65.15",
  "cropperjs": "^1.6.1",
@@ -71,6 +71,7 @@
  "nprogress": "^0.2.0",
  "path-to-regexp": "^6.2.1",
  "pinia": "2.0.33",
+ "pinia-plugin-persistedstate": "^3.2.0",
  "print-js": "^1.6.0",
  "qrcode": "^1.5.3",
  "qs": "^6.11.2",
@@ -124,4 +125,4 @@
  "node": ">=16.15.1",
  "pnpm": ">=8.1.0"
  }
-}
+}

apps/admin/src/App.vue

@@ -1,5 +1,5 @@
 <template>
- <ConfigProvider :locale="getAntdLocale">
+ <ConfigProvider :locale="getAntdLocale" :theme="isDark ? darkTheme : {}">
  <AppProvider>
  <RouterView />
  </AppProvider>
@@ -11,11 +11,15 @@
  import { AppProvider } from '@/components/Application';
  import { useTitle } from '@/hooks/web/useTitle';
  import { useLocale } from '@/locales/useLocale';
+
  import 'dayjs/locale/zh-cn';
+ import { useDarkModeTheme } from '@/hooks/setting/useDarkModeTheme';
 
  // support Multi-language
  const { getAntdLocale } = useLocale();
 
+ const { isDark, darkTheme } = useDarkModeTheme();
+
  // Listening to page changes and dynamically changing site titles
  useTitle();
 </script>

apps/admin/src/components/Application/src/AppDarkModeToggle.vue

@@ -6,71 +6,71 @@
  </div>
 </template>
 <script lang="ts" setup>
-import { computed, unref } from 'vue';
-import { SvgIcon } from '/@/components/Icon';
-import { useDesign } from '/@/hooks/web/useDesign';
-import { useRootSetting } from '/@/hooks/setting/useRootSetting';
-import { updateHeaderBgColor, updateSidebarBgColor } from '/@/logics/theme/updateBackground';
-import { updateDarkTheme } from '/@/logics/theme/dark';
-import { ThemeEnum } from '/@/enums/appEnum';
+ import { computed, unref } from 'vue';
+ import { SvgIcon } from '/@/components/Icon';
+ import { useDesign } from '/@/hooks/web/useDesign';
+ import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+ import { updateHeaderBgColor, updateSidebarBgColor } from '/@/logics/theme/updateBackground';
+ import { updateDarkTheme } from '/@/logics/theme/dark';
+ import { ThemeEnum } from '/@/enums/appEnum';
 
-const { prefixCls } = useDesign('dark-switch');
-const { getDarkMode, setDarkMode, getShowDarkModeToggle } = useRootSetting();
+ const { prefixCls } = useDesign('dark-switch');
+ const { getDarkMode, setDarkMode, getShowDarkModeToggle } = useRootSetting();
 
-const isDark = computed(() => getDarkMode.value === ThemeEnum.DARK);
+ const isDark = computed(() => getDarkMode.value === ThemeEnum.DARK);
 
-const getClass = computed(() => [
- prefixCls,
- {
- [`${prefixCls}--dark`]: unref(isDark),
- },
-]);
+ const getClass = computed(() => [
+  prefixCls,
+  {
+  [`${prefixCls}--dark`]: unref(isDark),
+  },
+ ]);
 
-function toggleDarkMode() {
- const darkMode = getDarkMode.value === ThemeEnum.DARK ? ThemeEnum.LIGHT : ThemeEnum.DARK;
- setDarkMode(darkMode);
- updateDarkTheme(darkMode);
- updateHeaderBgColor();
- updateSidebarBgColor();
-}
+ function toggleDarkMode() {
+  const darkMode = getDarkMode.value === ThemeEnum.DARK ? ThemeEnum.LIGHT : ThemeEnum.DARK;
+  setDarkMode(darkMode);
+  updateDarkTheme(darkMode);
+  updateHeaderBgColor();
+  updateSidebarBgColor();
+ }
 </script>
 <style lang="less" scoped>
-@prefix-cls: ~'@{namespace}-dark-switch';
+ @prefix-cls: ~'@{namespace}-dark-switch';
 
-html[data-theme='dark'] {
- .@{prefix-cls} {
- border: 1px solid rgb(196 188 188);
+ html[data-theme='dark'] {
+ .@{prefix-cls} {
+ border: 1px solid rgb(196 188 188);
+ }
  }
-}
 
-.@{prefix-cls} {
- display: flex;
- position: relative;
- align-items: center;
- justify-content: space-between;
- width: 50px;
- height: 26px;
- margin-left: auto;
- padding: 0 6px;
- border-radius: 30px;
- background-color: #151515;
- cursor: pointer;
+ .@{prefix-cls} {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: space-between;
+  width: 50px;
+  height: 26px;
+  margin-left: auto;
+  padding: 0 6px;
+  border-radius: 30px;
+  background-color: #151515;
+  cursor: pointer;
 
- &-inner {
- position: absolute;
- z-index: 1;
- width: 18px;
- height: 18px;
- transition: transform 0.5s, background-color 0.5s;
- border-radius: 50%;
- background-color: #fff;
- will-change: transform;
- }
+  &-inner {
+  position: absolute;
+  z-index: 1;
+  width: 18px;
+  height: 18px;
+  transition: transform 0.5s, background-color 0.5s;
+  border-radius: 50%;
+  background-color: #fff;
+  will-change: transform;
+  }
 
- &--dark {
- .@{prefix-cls}-inner {
- transform: translateX(calc(100% + 2px));
+ &--dark {
+ .@{prefix-cls}-inner {
+ transform: translateX(calc(100% + 2px));
+ }
  }
  }
-}
 </style>

apps/admin/src/components/Button/src/BasicButton.vue

@@ -1,5 +1,8 @@
 <template>
  <Button v-bind="getBindValue" :class="getButtonClass" @click="onClick">
+ <template #icon>
+ <slot name="icon"></slot>
+ </template>
  <template #default="data">
  <Icon :icon="preIcon" v-if="preIcon" :size="iconSize" />
  <slot v-bind="data || {}"></slot>
@@ -10,14 +13,14 @@
 
 <script lang="ts" setup>
  import { Button } from 'ant-design-vue';
- import { computed, unref } from 'vue';
+ import { ComponentOptionsMixin, computed, unref } from 'vue';
  import Icon from '@/components/Icon/Icon.vue';
  import { buttonProps } from './props';
  import { useAttrs } from '@vben/hooks';
 
  defineOptions({
  name: 'AButton',
- extends: Button,
+ extends: Button as ComponentOptionsMixin,
  inheritAttrs: false,
  });
 

apps/admin/src/components/Button/src/props.ts

@@ -22,5 +22,5 @@ export const buttonProps = {
  * @default: 14
  */
  iconSize: { type: Number, default: 14 },
- onClick: { type: Function as PropType<(...args) => any>, default: null },
+ onClick: { type: [Function, Array] as PropType<(() => any) | (() => any)[]>, default: null },
 };

apps/admin/src/components/CardList/src/CardList.vue

@@ -39,8 +39,7 @@
  </div>
  </template>
  <template #actions>
- <!-- <SettingOutlined key="setting" />-->
- <EditOutlined key="edit" />
+ <EditOutlined />
  <Dropdown
  :trigger="['hover']"
  :dropMenuList="[
@@ -55,13 +54,13 @@
  ]"
  popconfirm
  >
- <EllipsisOutlined key="ellipsis" />
+ <EllipsisOutlined />
  </Dropdown>
  </template>
 
  <CardMeta>
  <template #title>
- <TypographyText :content="item.name" :ellipsis="{ tooltip: item.address }" />
+ <TypographyParagraph :content="item.name" :ellipsis="{ tooltip: item.address }" />
  </template>
  <template #avatar>
  <Avatar :src="item.avatar" />
@@ -93,7 +92,7 @@
 
  const ListItem = List.Item;
  const CardMeta = Card.Meta;
- const TypographyText = Typography.Text;
+ const TypographyParagraph = Typography.Paragraph;
  // 获取slider属性
  const sliderProp = computed(() => useSlider(4));
  // 组件接收参数
@@ -157,22 +156,22 @@
  pageSize,
  current: page,
  total,
- showTotal: (total) => `总 ${total} 条`,
+ showTotal: (total: number) => `总 ${total} 条`,
  onChange: pageChange,
  onShowSizeChange: pageSizeChange,
  });
 
- function pageChange(p, pz) {
+ function pageChange(p: number, pz: number) {
  page.value = p;
  pageSize.value = pz;
  fetch();
  }
- function pageSizeChange(_current, size) {
+ function pageSizeChange(_current, size: number) {
  pageSize.value = size;
  fetch();
  }
 
- async function handleDelete(id) {
+ async function handleDelete(id: number) {
  emit('delete', id);
  }
 </script>

apps/admin/src/components/CodeEditor/src/CodeEditor.vue

@@ -5,6 +5,7 @@
  @change="handleValueChange"
  :mode="mode"
  :readonly="readonly"
+ :bordered="bordered"
  />
  </div>
 </template>
@@ -26,6 +27,7 @@
  },
  readonly: { type: Boolean },
  autoFormat: { type: Boolean, default: true },
+ bordered: { type: Boolean, default: false },
  });
 
  const emit = defineEmits(['change', 'update:value', 'format-error']);

apps/admin/src/components/CodeEditor/src/codemirror/CodeMirror.vue

@@ -1,5 +1,9 @@
 <template>
- <div class="relative !h-full w-full overflow-hidden" ref="el"></div>
+ <div
+ class="relative !h-full w-full overflow-hidden"
+ :class="{ 'ant-input': props.bordered, 'css-dev-only-do-not-override-kqecok': props.bordered }"
+ ref="el"
+ ></div>
 </template>
 
 <script lang="ts" setup>
@@ -39,6 +43,7 @@
  },
  value: { type: String, default: '' },
  readonly: { type: Boolean, default: false },
+ bordered: { type: Boolean, default: false },
  });
 
  const emit = defineEmits(['change']);

apps/admin/src/components/Container/src/ScrollContainer.vue

@@ -1,5 +1,10 @@
 <template>
- <Scrollbar ref="scrollbarRef" class="scroll-container" v-bind="$attrs">
+ <Scrollbar
+ ref="scrollbarRef"
+ class="scroll-container"
+ :scrollHeight="scrollHeight"
+ v-bind="$attrs"
+ >
  <slot></slot>
  </Scrollbar>
 </template>
@@ -13,6 +18,9 @@
  export default defineComponent({
  name: 'ScrollContainer',
  components: { Scrollbar },
+ props: {
+ scrollHeight: { type: Number },
+ },
  setup() {
  const scrollbarRef = ref<Nullable<ScrollbarType>>(null);
 

apps/admin/src/components/ContextMenu/src/ContextMenu.vue

@@ -59,12 +59,12 @@
  const left = body.clientWidth < x + menuWidth ? x - menuWidth : x;
  const top = body.clientHeight < y + menuHeight ? y - menuHeight : y;
  return {
- ...styles,
  position: 'absolute',
  width: `${width}px`,
  left: `${left + 1}px`,
  top: `${top + 1}px`,
  zIndex: 9999,
+ ...styles, // Not the first, fix options.styles.width not working
  };
  });
 
@@ -127,11 +127,15 @@
  }
  const { items } = props;
  return (
- <div class={prefixCls}>
- <Menu inlineIndent={12} mode="vertical" ref={wrapRef} style={unref(getStyle)}>
- {renderMenuItem(items)}
- </Menu>
- </div>
+ <Menu
+ inlineIndent={12}
+ mode="vertical"
+ class={prefixCls}
+ ref={wrapRef}
+ style={unref(getStyle)}
+ >
+ {renderMenuItem(items)}
+ </Menu>
  );
  };
  },
@@ -147,7 +151,7 @@
  .item-style() {
  li {
  display: inline-block;
- width: 100%;
+ width: 100% !important;
  height: @default-height;
  margin: 0 !important;
  line-height: @default-height;
@@ -157,6 +161,8 @@
  }
 
  > div {
+ width: 100% !important;
+ height: 100% !important;
  margin: 0 !important;
  }
 
@@ -176,10 +182,12 @@
  width: 156px;
  margin: 0;
  border: 1px solid rgb(0 0 0 / 8%);
- border-radius: 0.25rem;
+ border-radius: 8px;
  background-clip: padding-box;
  background-color: @component-background;
- box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 10%),
+ box-shadow:
+ 0 2px 2px 0 rgb(0 0 0 / 14%),
+ 0 3px 1px -2px rgb(0 0 0 / 10%),
  0 1px 5px 0 rgb(0 0 0 / 6%);
  list-style: none;
  user-select: none;