feat: 添加颜色选择器面板组件 (#1242)

locales/en.yaml

@@ -108,6 +108,7 @@ menus:
   pureTypeit: Typeit
   pureJsonEditor: JSON Editor
   pureColorPicker: Color Picker
+  pureColorPickerPanel: Color PickerPanel
   pureDatePicker: Date Picker
   pureDateTimePicker: DateTimePicker
   pureTimePicker: TimePicker

locales/zh-CN.yaml

@@ -108,6 +108,7 @@ menus:
   pureTypeit: 打字机
   pureJsonEditor: JSON编辑器
   pureColorPicker: 颜色选择器
+  pureColorPickerPanel: 颜色选择器面板
   pureDatePicker: 日期选择器
   pureDateTimePicker: 日期时间选择器
   pureTimePicker: 时间选择器

package.json

@@ -72,7 +72,7 @@
     "deep-chat": "^2.2.2",
     "echarts": "^6.0.0",
     "el-table-infinite-scroll": "^3.0.7",
-    "element-plus": "^2.11.4",
+    "element-plus": "^2.11.7",
     "highlight.js": "^11.11.1",
     "intro.js": "^7.2.0",
     "js-cookie": "^3.0.5",

pnpm-lock.yaml

@@ -25,10 +25,10 @@ importers:
         version: 1.2.28
       '@pureadmin/descriptions':
         specifier: ^1.2.1
-        version: 1.2.1(echarts@6.0.0)(element-plus@2.11.4(vue@3.5.22(typescript@5.9.3)))(typescript@5.9.3)
+        version: 1.2.1(echarts@6.0.0)(element-plus@2.11.7(vue@3.5.22(typescript@5.9.3)))(typescript@5.9.3)
       '@pureadmin/table':
         specifier: ^3.3.0
-        version: 3.3.0(element-plus@2.11.4(vue@3.5.22(typescript@5.9.3)))(typescript@5.9.3)
+        version: 3.3.0(element-plus@2.11.7(vue@3.5.22(typescript@5.9.3)))(typescript@5.9.3)
       '@pureadmin/utils':
         specifier: ^2.6.2
         version: 2.6.2(echarts@6.0.0)(vue@3.5.22(typescript@5.9.3))
@@ -84,8 +84,8 @@ importers:
         specifier: ^3.0.7
         version: 3.0.7(typescript@5.9.3)
       element-plus:
-        specifier: ^2.11.4
-        version: 2.11.4(vue@3.5.22(typescript@5.9.3))
+        specifier: ^2.11.7
+        version: 2.11.7(vue@3.5.22(typescript@5.9.3))
       highlight.js:
         specifier: ^11.11.1
         version: 11.11.1
@@ -124,7 +124,7 @@ importers:
         version: 3.27.0
       plus-pro-components:
         specifier: ^0.1.29
-        version: 0.1.29(element-plus@2.11.4(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))
+        version: 0.1.29(element-plus@2.11.7(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))
       qrcode:
         specifier: ^1.5.4
         version: 1.5.4
@@ -2842,8 +2842,8 @@ packages:
   electron-to-chromium@1.5.234:
     resolution: {integrity: sha512-RXfEp2x+VRYn8jbKfQlRImzoJU01kyDvVPBmG39eU2iuRVhuS6vQNocB8J0/8GrIMLnPzgz4eW6WiRnJkTuNWg==}
 
-  element-plus@2.11.4:
-    resolution: {integrity: sha512-sLq+Ypd0cIVilv8wGGMEGvzRVBBsRpJjnAS5PsI/1JU1COZXqzH3N1UYMUc/HCdvdjf6dfrBy80Sj7KcACsT7w==}
+  element-plus@2.11.7:
+    resolution: {integrity: sha512-Bh47wuzsqaNBNDkbtlOlZER1cGcOB8GsXp/+C9b95MOrk0wvoHUV4NKKK7xMkfYNFYdYysQ752oMhnExgAL6+g==}
     peerDependencies:
       vue: ^3.2.0
 
@@ -2929,9 +2929,6 @@ packages:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
 
-  escape-html@1.0.3:
-    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
-
   escape-string-regexp@2.0.0:
     resolution: {integrity: sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==}
     engines: {node: '>=8'}
@@ -6793,19 +6790,19 @@ snapshots:
 
   '@popperjs/core@2.11.8': {}
 
-  '@pureadmin/descriptions@1.2.1(echarts@6.0.0)(element-plus@2.11.4(vue@3.5.22(typescript@5.9.3)))(typescript@5.9.3)':
+  '@pureadmin/descriptions@1.2.1(echarts@6.0.0)(element-plus@2.11.7(vue@3.5.22(typescript@5.9.3)))(typescript@5.9.3)':
     dependencies:
       '@element-plus/icons-vue': 2.3.2(vue@3.5.22(typescript@5.9.3))
       '@pureadmin/utils': 2.6.2(echarts@6.0.0)(vue@3.5.22(typescript@5.9.3))
-      element-plus: 2.11.4(vue@3.5.22(typescript@5.9.3))
+      element-plus: 2.11.7(vue@3.5.22(typescript@5.9.3))
       vue: 3.5.22(typescript@5.9.3)
     transitivePeerDependencies:
       - echarts
       - typescript
 
-  '@pureadmin/table@3.3.0(element-plus@2.11.4(vue@3.5.22(typescript@5.9.3)))(typescript@5.9.3)':
+  '@pureadmin/table@3.3.0(element-plus@2.11.7(vue@3.5.22(typescript@5.9.3)))(typescript@5.9.3)':
     dependencies:
-      element-plus: 2.11.4(vue@3.5.22(typescript@5.9.3))
+      element-plus: 2.11.7(vue@3.5.22(typescript@5.9.3))
       vue: 3.5.22(typescript@5.9.3)
     transitivePeerDependencies:
       - typescript
@@ -8277,7 +8274,7 @@ snapshots:
   el-table-infinite-scroll@3.0.7(typescript@5.9.3):
     dependencies:
       core-js: 3.46.0
-      element-plus: 2.11.4(vue@3.5.22(typescript@5.9.3))
+      element-plus: 2.11.7(vue@3.5.22(typescript@5.9.3))
       vue: 3.5.22(typescript@5.9.3)
     transitivePeerDependencies:
       - '@vue/composition-api'
@@ -8285,7 +8282,7 @@ snapshots:
 
   electron-to-chromium@1.5.234: {}
 
-  element-plus@2.11.4(vue@3.5.22(typescript@5.9.3)):
+  element-plus@2.11.7(vue@3.5.22(typescript@5.9.3)):
     dependencies:
       '@ctrl/tinycolor': 3.6.1
       '@element-plus/icons-vue': 2.3.2(vue@3.5.22(typescript@5.9.3))
@@ -8296,7 +8293,6 @@ snapshots:
       '@vueuse/core': 9.13.0(vue@3.5.22(typescript@5.9.3))
       async-validator: 4.2.5
       dayjs: 1.11.18
-      escape-html: 1.0.3
       lodash: 4.17.21
       lodash-es: 4.17.21
       lodash-unified: 1.0.3(@types/lodash-es@4.17.12)(lodash-es@4.17.21)(lodash@4.17.21)
@@ -8430,8 +8426,6 @@ snapshots:
 
   escalade@3.2.0: {}
 
-  escape-html@1.0.3: {}
-
   escape-string-regexp@2.0.0: {}
 
   escape-string-regexp@4.0.0: {}
@@ -9991,10 +9985,10 @@ snapshots:
       exsolve: 1.0.7
       pathe: 2.0.3
 
-  plus-pro-components@0.1.29(element-plus@2.11.4(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3)):
+  plus-pro-components@0.1.29(element-plus@2.11.7(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3)):
     dependencies:
       '@element-plus/icons-vue': 2.3.2(vue@3.5.22(typescript@5.9.3))
-      element-plus: 2.11.4(vue@3.5.22(typescript@5.9.3))
+      element-plus: 2.11.7(vue@3.5.22(typescript@5.9.3))
       lodash-es: 4.17.21
       sortablejs: 1.15.6
       vue: 3.5.22(typescript@5.9.3)

src/components/ReDialog/type.ts

@@ -35,8 +35,20 @@ type DialogProps = {
   top?: string;
   /** 是否需要遮罩层，默认 `true` */
   modal?: boolean;
+  /** 是否允许穿透遮罩层，默认 `false`。使用时需将 `modal` 属性设置为 `false` */
+  modalPenetrable?: boolean;
+  /** 遮罩的自定义类名 */
+  modalClass?: string;
+  /** `header` 部分的自定义 `class` 名 */
+  headerClass?: string;
+  /** `body` 部分的自定义 `class` 名 */
+  bodyClass?: string;
+  /** `footer` 部分的自定义 `class` 名 */
+  footerClass?: string;
   /** `Dialog` 自身是否插入至 `body` 元素上。嵌套的 `Dialog` 必须指定该属性并赋值为 `true`，默认 `false` */
   appendToBody?: boolean;
+  /** `Dialog` 挂载到哪个 `DOM` 元素，该属性会覆盖 `append-to-body` 属性，默认 `body` */
+  appendTo?: string | HTMLElement;
   /** 是否在 `Dialog` 出现时将 `body` 滚动锁定，默认 `true` */
   lockScroll?: boolean;
   /** `Dialog` 的自定义类名 */
@@ -57,12 +69,22 @@ type DialogProps = {
   beforeClose?: (done: DoneFn) => void;
   /** 为 `Dialog` 启用可拖拽功能，默认 `false` */
   draggable?: boolean;
+  /** 拖动范围可以超出可视区，默认 `false` */
+  overflow?: boolean;
   /** 是否让 `Dialog` 的 `header` 和 `footer` 部分居中排列，默认 `false` */
   center?: boolean;
   /** 是否水平垂直对齐对话框，默认 `false` */
   alignCenter?: boolean;
   /** 当关闭 `Dialog` 时，销毁其中的元素，默认 `false` */
   destroyOnClose?: boolean;
+  /** 自定义关闭图标，默认 `Close` */
+  closeIcon?: string | Component;
+  /** 和原生的 `CSS` 的 `z-index` 相同，改变 `z` 轴的顺序 */
+  zIndex?: number;
+  /** `header` 的 `aria-level` 属性 */
+  headerAriaLevel?: string;
+  /** 对话框动画的自定义过渡配置。可以是一个字符串（过渡名称），也可以是一个包含 `Vue` 过渡属性的对象，默认 `dialog-fade` */
+  transition?: string | object;
 };
 
 //element-plus.org/zh-CN/component/popconfirm.html#attributes

src/components/ReDrawer/type.ts

@@ -6,7 +6,6 @@ type ArgsType = {
   /** `cancel` 点击取消按钮、`sure` 点击确定按钮、`close` 点击右上角关闭按钮或空白页或按下了 `esc` 键 */
   command: "cancel" | "sure" | "close";
 };
-
 type ButtonType =
   | "primary"
   | "success"
@@ -20,11 +19,11 @@ type DrawerProps = {
   visible?: boolean;
   /** `Drawer` 自身是否插入至 `body` 元素上。嵌套的 `Drawer` 必须指定该属性并赋值为 `true`，默认 `false` */
   appendToBody?: boolean;
-  /** 挂载到哪个 `DOM` 元素 将覆盖 `appendToBody` */
+  /** 挂载到哪个 `DOM` 元素，会覆盖 `appendToBody` 属性，默认 `body` */
   appendTo?: string;
   /** 是否在 `Drawer` 出现时将 `body` 滚动锁定，默认 `true` */
   lockScroll?: boolean;
-  /** 关闭前的回调，会暂停 `Drawer` 的关闭 回调函数内执行 `done` 参数方法的时候才是真正关闭对话框的时候 */
+  /** 关闭前的回调，会暂停 `Drawer` 的关闭，回调函数内执行 `done` 参数方法的时候才是真正关闭对话框的时候 */
   beforeClose?: (done: DoneFn) => void;
   /** 是否可以通过点击 `modal` 关闭 `Drawer` ，默认 `true` */
   closeOnClickModal?: boolean;
@@ -44,9 +43,13 @@ type DrawerProps = {
   destroyOnClose?: boolean;
   /** 是否需要遮罩层，默认 `true` */
   modal?: boolean;
+  /** 是否允许穿透遮罩层，默认 `false`。使用时需将 `modal` 属性设置为 `false` */
+  modalPenetrable?: boolean;
   /** `Drawer` 打开的方向，默认 `rtl` */
   direction?: "rtl" | "ltr" | "ttb" | "btt";
-  /** `Drawer` 窗体的大小, 当使用 `number` 类型时, 以像素为单位, 当使用 `string` 类型时, 请传入 `'x%'`, 否则便会以 `number` 类型解释 */
+  /** 是否启用可调整大小的功能，默认 `false` */
+  resizable?: boolean;
+  /** `Drawer` 窗体的大小, 当使用 `number` 类型时, 以像素为单位, 当使用 `string` 类型时, 请传入 `'x%'`, 否则便会以 `number` 类型解释，默认 `30%` */
   size?: string | number;
   /** `Drawer` 的标题 */
   title?: string;
@@ -54,6 +57,12 @@ type DrawerProps = {
   withHeader?: boolean;
   /** 遮罩层的自定义类名 */
   modalClass?: string;
+  /** `header` 部分的自定义 `class` 名 */
+  headerClass?: string;
+  /** `body` 部分的自定义 `class` 名 */
+  bodyClass?: string;
+  /** `footer` 部分的自定义 `class` 名 */
+  footerClass?: string;
   /** 设置 `z-index` */
   zIndex?: number;
   /** `header` 的 `aria-level` 属性，默认 `2` */

src/components/RePureTableBar/src/bar.tsx

@@ -100,7 +100,7 @@ export default defineComponent({
         "pt-[3px]",
         "px-[11px]",
         "border-b-[1px]",
-        "border-solid",
+        "border-b-solid",
         "border-[#dcdfe6]",
         "dark:border-[#303030]"
       ];

src/components/ReVxeTableBar/src/bar.tsx

@@ -93,7 +93,7 @@ export default defineComponent({
         "pt-[3px]",
         "px-[11px]",
         "border-b-[1px]",
-        "border-solid",
+        "border-b-solid",
         "border-[#dcdfe6]",
         "dark:border-[#303030]"
       ];

src/plugins/elementPlus.ts

@@ -3,15 +3,13 @@ import type { App, Component } from "vue";
 import {
   /**
    * 为了方便演示平台将 element-plus 导出的所有组件引入，实际使用中如果你没用到哪个组件，将其注释掉就行
-   * 导出来源：https://github.com/element-plus/element-plus/blob/dev/packages/element-plus/component.ts#L111-L211
+   * 导出来源：https://github.com/element-plus/element-plus/blob/dev/packages/element-plus/component.ts#L116-L226
    * */
   ElAffix,
   ElAlert,
   ElAutocomplete,
   ElAutoResizer,
   ElAvatar,
-  ElAnchor,
-  ElAnchorLink,
   ElBacktop,
   ElBadge,
   ElBreadcrumb,
@@ -32,6 +30,7 @@ import {
   ElCollapse,
   ElCollapseItem,
   ElCollapseTransition,
+  ElColorPickerPanel,
   ElColorPicker,
   ElConfigProvider,
   ElContainer,
@@ -40,6 +39,7 @@ import {
   ElHeader,
   ElMain,
   ElDatePicker,
+  ElDatePickerPanel,
   ElDescriptions,
   ElDescriptionsItem,
   ElDialog,
@@ -56,6 +56,7 @@ import {
   ElImageViewer,
   ElInput,
   ElInputNumber,
+  ElInputTag,
   ElLink,
   ElMenu,
   ElMenuItem,
@@ -107,17 +108,22 @@ import {
   ElWatermark,
   ElTour,
   ElTourStep,
+  ElAnchor,
+  ElAnchorLink,
   ElSegmented,
+  ElMention,
+  ElSplitter,
+  ElSplitterPanel,
   /**
    * 为了方便演示平台将 element-plus 导出的所有插件引入，实际使用中如果你没用到哪个插件，将其注释掉就行
    * 导出来源：https://github.com/element-plus/element-plus/blob/dev/packages/element-plus/plugin.ts#L11-L16
    * */
-  ElLoading, // v-loading 指令
   ElInfiniteScroll, // v-infinite-scroll 指令
-  ElPopoverDirective, // v-popover 指令
+  ElLoading, // v-loading 指令
   ElMessage, // $message 全局属性对象globalProperties
   ElMessageBox, // $msgbox、$alert、$confirm、$prompt 全局属性对象globalProperties
-  ElNotification // $notify 全局属性对象globalProperties
+  ElNotification, // $notify 全局属性对象globalProperties
+  ElPopoverDirective // v-popover 指令
 } from "element-plus";
 
 const components = [
@@ -126,8 +132,6 @@ const components = [
   ElAutocomplete,
   ElAutoResizer,
   ElAvatar,
-  ElAnchor,
-  ElAnchorLink,
   ElBacktop,
   ElBadge,
   ElBreadcrumb,
@@ -148,6 +152,7 @@ const components = [
   ElCollapse,
   ElCollapseItem,
   ElCollapseTransition,
+  ElColorPickerPanel,
   ElColorPicker,
   ElConfigProvider,
   ElContainer,
@@ -156,6 +161,7 @@ const components = [
   ElHeader,
   ElMain,
   ElDatePicker,
+  ElDatePickerPanel,
   ElDescriptions,
   ElDescriptionsItem,
   ElDialog,
@@ -172,6 +178,7 @@ const components = [
   ElImageViewer,
   ElInput,
   ElInputNumber,
+  ElInputTag,
   ElLink,
   ElMenu,
   ElMenuItem,
@@ -223,16 +230,21 @@ const components = [
   ElWatermark,
   ElTour,
   ElTourStep,
-  ElSegmented
+  ElAnchor,
+  ElAnchorLink,
+  ElSegmented,
+  ElMention,
+  ElSplitter,
+  ElSplitterPanel
 ];
 
 const plugins = [
-  ElLoading,
   ElInfiniteScroll,
-  ElPopoverDirective,
+  ElLoading,
   ElMessage,
   ElMessageBox,
-  ElNotification
+  ElNotification,
+  ElPopoverDirective
 ];
 
 /** 按需引入`element-plus` */

src/router/modules/components.ts

@@ -119,8 +119,7 @@ export default {
       name: "PureSlider",
       component: () => import("@/views/components/slider/index.vue"),
       meta: {
-        title: $t("menus.pureSlider"),
-        extraIcon: "IF-pure-iconfont-new svg"
+        title: $t("menus.pureSlider")
       }
     },
     {
@@ -195,6 +194,15 @@ export default {
         title: $t("menus.pureColorPicker")
       }
     },
+    {
+      path: "/components/color-picker-panel",
+      name: "ColorPickerPanel",
+      component: () => import("@/views/components/color-picker-panel.vue"),
+      meta: {
+        title: $t("menus.pureColorPickerPanel"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    },
     {
       path: "/components/selector",
       name: "Selector",

src/style/sidebar.scss

@@ -172,10 +172,6 @@
     .is-active > .el-sub-menu__title,
     .is-active.submenu-title-noDropdown {
       color: var(--pure-theme-sub-menu-active-text) !important;
-
-      i {
-        color: var(--pure-theme-sub-menu-active-text) !important;
-      }
     }
 
     .is-active {
@@ -270,10 +266,6 @@
     .is-active > .el-sub-menu__title,
     .is-active.submenu-title-noDropdown {
       color: var(--pure-theme-sub-menu-active-text) !important;
-
-      i {
-        color: var(--pure-theme-sub-menu-active-text) !important;
-      }
     }
 
     /* 子菜单中还有子菜单 */
@@ -374,10 +366,6 @@
     .is-active > .el-sub-menu__title,
     .is-active.submenu-title-noDropdown {
       color: var(--pure-theme-sub-menu-active-text) !important;
-
-      i {
-        color: var(--pure-theme-sub-menu-active-text) !important;
-      }
     }
 
     .nest-menu .el-sub-menu > .el-sub-menu__title,
@@ -541,10 +529,6 @@
     .is-active > .el-sub-menu__title,
     .is-active.submenu-title-noDropdown {
       color: var(--pure-theme-sub-menu-active-text) !important;
-
-      i {
-        color: var(--pure-theme-sub-menu-active-text) !important;
-      }
     }
 
     .is-active {

src/utils/message.ts

@@ -4,6 +4,13 @@ import { type MessageHandler, ElMessage } from "element-plus";
 
 type messageStyle = "el" | "antd";
 type messageTypes = "info" | "success" | "warning" | "error";
+type messagePlacement =
+  | "top"
+  | "top-left"
+  | "top-right"
+  | "bottom"
+  | "bottom-left"
+  | "bottom-right";
 
 interface MessageParams {
   /** 消息类型，可选 `info` 、`success` 、`warning` 、`error` ，默认 `info` */
@@ -20,8 +27,10 @@ interface MessageParams {
   duration?: number;
   /** 是否显示关闭按钮，默认值 `false` */
   showClose?: boolean;
-  /** `Message` 距离窗口顶部的偏移量，默认 `16` */
+  /** `Message` 消息距离窗口边缘的偏移量，默认 `16` */
   offset?: number;
+  /** `Message` 消息放置位置，默认 `top` */
+  placement?: messagePlacement;
   /** 设置组件的根元素，默认 `document.body` */
   appendTo?: string | HTMLElement;
   /** 合并内容相同的消息，不支持 `VNode` 类型的消息，默认值 `false` */
@@ -56,6 +65,7 @@ const message = (
       duration = 2000,
       showClose = false,
       offset = 16,
+      placement = "top",
       appendTo = document.body,
       grouping = false,
       repeatNum = 1,
@@ -71,6 +81,7 @@ const message = (
       duration,
       showClose,
       offset,
+      placement,
       appendTo,
       grouping,
       repeatNum,

src/views/components/color-picker-panel.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+defineOptions({
+  name: "ColorPickerPanel"
+});
+
+const disabled = ref(false);
+const color = ref("rgba(255, 69, 0, 0.68)");
+const predefineColors = [
+  "#ff4500",
+  "#ff8c00",
+  "#ffd700",
+  "#90ee90",
+  "#00ced1",
+  "#1e90ff",
+  "#c71585",
+  "rgba(255, 69, 0, 0.68)",
+  "rgb(255, 120, 0)",
+  "hsv(51, 100, 98)",
+  "hsva(120, 40, 94, 0.5)",
+  "hsl(181, 100%, 37%)",
+  "hsla(209, 100%, 56%, 0.73)",
+  "#c7158577"
+];
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <el-space wrap :size="40">
+          <el-link
+            v-tippy="{
+              content: '点击查看详细文档'
+            }"
+            href="https://element-plus.org/zh-CN/component/color-picker-panel.html"
+            target="_blank"
+            style="font-size: 16px; font-weight: 800"
+          >
+            颜色选择器面板
+          </el-link>
+          <el-radio-group v-model="disabled">
+            <el-radio :value="false">启用</el-radio>
+            <el-radio :value="true">禁用</el-radio>
+          </el-radio-group>
+        </el-space>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/color-picker-panel.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/color-picker-panel.vue
+      </el-link>
+    </template>
+
+    <div class="mb-2">选择透明度、预定义颜色、无边框</div>
+    <el-color-picker-panel
+      v-model="color"
+      show-alpha
+      :border="false"
+      :disabled="disabled"
+      :predefine="predefineColors"
+    />
+    <el-divider />
+  </el-card>
+</template>

src/views/components/dialog/index.vue

@@ -463,6 +463,16 @@ function onSureBtnLoading() {
     }
   });
 }
+
+// 自定义动画
+function onTransitionClick(title, transition) {
+  addDialog({
+    width: "30%",
+    title,
+    transition,
+    contentRenderer: () => <p>{JSON.stringify(transition)}</p>
+  });
+}
 </script>
 
 <template>
@@ -551,5 +561,112 @@ function onSureBtnLoading() {
         点击底部确定按钮可开启按钮动画
       </el-button>
     </el-space>
+    <el-divider />
+    <el-space wrap>
+      <el-button
+        @click="onTransitionClick('淡入淡出动画（默认）', 'dialog-fade')"
+      >
+        淡入淡出动画（默认）
+      </el-button>
+      <el-button @click="onTransitionClick('缩放动画', 'dialog-scale')">
+        缩放动画
+      </el-button>
+      <el-button @click="onTransitionClick('滑动动画', 'dialog-slide')">
+        滑动动画
+      </el-button>
+      <el-button @click="onTransitionClick('弹跳动画', 'dialog-bounce')">
+        弹跳动画
+      </el-button>
+      <el-button
+        @click="
+          onTransitionClick('自定义动画事件处理器（可配置对象）', {
+            name: 'dialog-custom-object',
+            appear: true,
+            mode: 'out-in',
+            duration: 500
+          })
+        "
+      >
+        自定义动画事件处理器（可配置对象）
+      </el-button>
+    </el-space>
   </el-card>
 </template>
+
+<style>
+/* Scale Animation */
+.dialog-scale-enter-active,
+.dialog-scale-leave-active,
+.dialog-scale-enter-active .el-dialog,
+.dialog-scale-leave-active .el-dialog {
+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+.dialog-scale-enter-from,
+.dialog-scale-leave-to {
+  opacity: 0;
+}
+
+.dialog-scale-enter-from .el-dialog,
+.dialog-scale-leave-to .el-dialog {
+  opacity: 0;
+  transform: scale(0.5);
+}
+
+/* Slide Animation */
+.dialog-slide-enter-active,
+.dialog-slide-leave-active,
+.dialog-slide-enter-active .el-dialog,
+.dialog-slide-leave-active .el-dialog {
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.dialog-slide-enter-from,
+.dialog-slide-leave-to {
+  opacity: 0;
+}
+
+.dialog-slide-enter-from .el-dialog,
+.dialog-slide-leave-to .el-dialog {
+  opacity: 0;
+  transform: translateY(-100px);
+}
+
+/* Bounce Animation */
+.dialog-bounce-enter-active,
+.dialog-bounce-leave-active,
+.dialog-bounce-enter-active .el-dialog,
+.dialog-bounce-leave-active .el-dialog {
+  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.dialog-bounce-enter-from,
+.dialog-bounce-leave-to {
+  opacity: 0;
+}
+
+.dialog-bounce-enter-from .el-dialog,
+.dialog-bounce-leave-to .el-dialog {
+  opacity: 0;
+  transform: scale(0.3) translateY(-50px);
+}
+
+/* Object Configuration Animation */
+.dialog-custom-object-enter-active,
+.dialog-custom-object-leave-active,
+.dialog-custom-object-enter-active .el-dialog,
+.dialog-custom-object-leave-active .el-dialog {
+  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.dialog-custom-object-enter-from,
+.dialog-custom-object-leave-to {
+  opacity: 0;
+}
+
+.dialog-custom-object-enter-from .el-dialog,
+.dialog-custom-object-leave-to .el-dialog {
+  opacity: 0;
+  transform: rotate(180deg) scale(0.5);
+}
+</style>

src/views/components/drawer/index.vue

@@ -422,6 +422,17 @@ function onSureBtnLoading() {
     }
   });
 }
+
+function onResizableClick(title, content, direction) {
+  addDrawer({
+    title,
+    direction,
+    resizable: true, // 启用可调整大小的功能
+    contentRenderer: () => (
+      <p class="text-[var(--el-color-primary)]">{content}</p> // jsx 语法 （注意在.vue文件启用jsx语法，需要在script开启lang="tsx"）
+    )
+  });
+}
 </script>
 
 <template>
@@ -498,5 +509,28 @@ function onSureBtnLoading() {
         点击底部确定按钮可开启按钮动画
       </el-button>
     </el-space>
+    <el-divider />
+    <el-space wrap>
+      <el-button
+        @click="onResizableClick('从左侧打开', '拖动抽屉右侧边缘', 'ltr')"
+      >
+        拖拽调整大小（从左侧打开）
+      </el-button>
+      <el-button
+        @click="onResizableClick('从右侧打开', '拖动抽屉左侧边缘', 'rtl')"
+      >
+        拖拽调整大小（从右侧打开）
+      </el-button>
+      <el-button
+        @click="onResizableClick('从顶部打开', '拖动抽屉底部边缘', 'ttb')"
+      >
+        拖拽调整大小（从顶部打开）
+      </el-button>
+      <el-button
+        @click="onResizableClick('从底部打开', '拖动抽屉顶部边缘', 'btt')"
+      >
+        拖拽调整大小（从底部打开）
+      </el-button>
+    </el-space>
   </el-card>
 </template>

src/views/components/message.vue

@@ -199,6 +199,31 @@ defineOptions({
 
     <el-divider />
 
+    <h4 class="mb-4!">
+      控制消息出现的位置，消息可以显示在窗口的顶部(默认) 或其他位置
+    </h4>
+
+    <el-space wrap>
+      <el-button @click="message('顶部中间')"> 顶部中间 </el-button>
+      <el-button @click="message('顶部左侧', { placement: 'top-left' })">
+        顶部左侧
+      </el-button>
+      <el-button @click="message('顶部右侧', { placement: 'top-right' })">
+        顶部右侧
+      </el-button>
+      <el-button @click="message('底部中间', { placement: 'bottom' })">
+        底部中间
+      </el-button>
+      <el-button @click="message('底部左侧', { placement: 'bottom-left' })">
+        底部左侧
+      </el-button>
+      <el-button @click="message('底部右侧', { placement: 'bottom-right' })">
+        底部右侧
+      </el-button>
+    </el-space>
+
+    <el-divider />
+
     <el-button @click="closeAllMessage"> 关闭所有消息提示 </el-button>
   </el-card>
 </template>