feat: 初始化仓库

2025-02-10 20:21:23 +08:00
commit a5f04356ee
225 changed files with 24988 additions and 0 deletions
--- a/src/components/ReAuth/index.ts
+++ b/src/components/ReAuth/index.ts
@@ -0,0 +1,5 @@
+import auth from "./src/auth";
+
+const Auth = auth;
+
+export { Auth };
--- a/src/components/ReAuth/src/auth.tsx
+++ b/src/components/ReAuth/src/auth.tsx
@@ -0,0 +1,20 @@
+import { defineComponent, Fragment } from "vue";
+import { hasAuth } from "@/router/utils";
+
+export default defineComponent({
+  name: "Auth",
+  props: {
+    value: {
+      type: undefined,
+      default: []
+    }
+  },
+  setup(props, { slots }) {
+    return () => {
+      if (!slots) return null;
+      return hasAuth(props.value) ? (
+        <Fragment>{slots.default?.()}</Fragment>
+      ) : null;
+    };
+  }
+});
--- a/src/components/ReCol/index.ts
+++ b/src/components/ReCol/index.ts
@@ -0,0 +1,29 @@
+import { ElCol } from "element-plus";
+import { h, defineComponent } from "vue";
+
+// 封装element-plus的el-col组件
+export default defineComponent({
+  name: "ReCol",
+  props: {
+    value: {
+      type: Number,
+      default: 24
+    }
+  },
+  render() {
+    const attrs = this.$attrs;
+    const val = this.value;
+    return h(
+      ElCol,
+      {
+        xs: val,
+        sm: val,
+        md: val,
+        lg: val,
+        xl: val,
+        ...attrs
+      },
+      { default: () => this.$slots.default() }
+    );
+  }
+});
--- a/src/components/ReDialog/index.ts
+++ b/src/components/ReDialog/index.ts
@@ -0,0 +1,69 @@
+import { ref } from "vue";
+import reDialog from "./index.vue";
+import { useTimeoutFn } from "@vueuse/core";
+import { withInstall } from "@pureadmin/utils";
+import type {
+  EventType,
+  ArgsType,
+  DialogProps,
+  ButtonProps,
+  DialogOptions
+} from "./type";
+
+const dialogStore = ref<Array<DialogOptions>>([]);
+
+/** 打开弹框 */
+const addDialog = (options: DialogOptions) => {
+  const open = () =>
+    dialogStore.value.push(Object.assign(options, { visible: true }));
+  if (options?.openDelay) {
+    useTimeoutFn(() => {
+      open();
+    }, options.openDelay);
+  } else {
+    open();
+  }
+};
+
+/** 关闭弹框 */
+const closeDialog = (options: DialogOptions, index: number, args?: any) => {
+  dialogStore.value[index].visible = false;
+  options.closeCallBack && options.closeCallBack({ options, index, args });
+
+  const closeDelay = options?.closeDelay ?? 200;
+  useTimeoutFn(() => {
+    dialogStore.value.splice(index, 1);
+  }, closeDelay);
+};
+
+/**
+ * @description 更改弹框自身属性值
+ * @param value 属性值
+ * @param key 属性，默认`title`
+ * @param index 弹框索引（默认`0`，代表只有一个弹框，对于嵌套弹框要改哪个弹框的属性值就把该弹框索引赋给`index`）
+ */
+const updateDialog = (value: any, key = "title", index = 0) => {
+  dialogStore.value[index][key] = value;
+};
+
+/** 关闭所有弹框 */
+const closeAllDialog = () => {
+  dialogStore.value = [];
+};
+
+/** 千万别忘了在下面这三处引入并注册下，放心注册，不使用`addDialog`调用就不会被挂载
+ * https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L4
+ * https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L12
+ * https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L22
+ */
+const ReDialog = withInstall(reDialog);
+
+export type { EventType, ArgsType, DialogProps, ButtonProps, DialogOptions };
+export {
+  ReDialog,
+  dialogStore,
+  addDialog,
+  closeDialog,
+  updateDialog,
+  closeAllDialog
+};
--- a/src/components/ReDialog/index.vue
+++ b/src/components/ReDialog/index.vue
@@ -0,0 +1,206 @@
+<script setup lang="ts">
+import {
+  type EventType,
+  type ButtonProps,
+  type DialogOptions,
+  closeDialog,
+  dialogStore
+} from "./index";
+import { ref, computed } from "vue";
+import { isFunction } from "@pureadmin/utils";
+import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
+import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
+
+defineOptions({
+  name: "ReDialog"
+});
+
+const sureBtnMap = ref({});
+const fullscreen = ref(false);
+
+const footerButtons = computed(() => {
+  return (options: DialogOptions) => {
+    return options?.footerButtons?.length > 0
+      ? options.footerButtons
+      : ([
+          {
+            label: "取消",
+            text: true,
+            bg: true,
+            btnClick: ({ dialog: { options, index } }) => {
+              const done = () =>
+                closeDialog(options, index, { command: "cancel" });
+              if (options?.beforeCancel && isFunction(options?.beforeCancel)) {
+                options.beforeCancel(done, { options, index });
+              } else {
+                done();
+              }
+            }
+          },
+          {
+            label: "确定",
+            type: "primary",
+            text: true,
+            bg: true,
+            popconfirm: options?.popconfirm,
+            btnClick: ({ dialog: { options, index } }) => {
+              if (options?.sureBtnLoading) {
+                sureBtnMap.value[index] = Object.assign(
+                  {},
+                  sureBtnMap.value[index],
+                  {
+                    loading: true
+                  }
+                );
+              }
+              const closeLoading = () => {
+                if (options?.sureBtnLoading) {
+                  sureBtnMap.value[index].loading = false;
+                }
+              };
+              const done = () => {
+                closeLoading();
+                closeDialog(options, index, { command: "sure" });
+              };
+              if (options?.beforeSure && isFunction(options?.beforeSure)) {
+                options.beforeSure(done, { options, index, closeLoading });
+              } else {
+                done();
+              }
+            }
+          }
+        ] as Array<ButtonProps>);
+  };
+});
+
+const fullscreenClass = computed(() => {
+  return [
+    "el-icon",
+    "el-dialog__close",
+    "-translate-x-2",
+    "cursor-pointer",
+    "hover:!text-[red]"
+  ];
+});
+
+function eventsCallBack(
+  event: EventType,
+  options: DialogOptions,
+  index: number,
+  isClickFullScreen = false
+) {
+  if (!isClickFullScreen) fullscreen.value = options?.fullscreen ?? false;
+  if (options?.[event] && isFunction(options?.[event])) {
+    return options?.[event]({ options, index });
+  }
+}
+
+function handleClose(
+  options: DialogOptions,
+  index: number,
+  args = { command: "close" }
+) {
+  closeDialog(options, index, args);
+  eventsCallBack("close", options, index);
+}
+</script>
+
+<template>
+  <el-dialog
+    v-for="(options, index) in dialogStore"
+    :key="index"
+    v-bind="options"
+    v-model="options.visible"
+    class="pure-dialog"
+    :fullscreen="fullscreen ? true : options?.fullscreen ? true : false"
+    @closed="handleClose(options, index)"
+    @opened="eventsCallBack('open', options, index)"
+    @openAutoFocus="eventsCallBack('openAutoFocus', options, index)"
+    @closeAutoFocus="eventsCallBack('closeAutoFocus', options, index)"
+  >
+    <!-- header -->
+    <template
+      v-if="options?.fullscreenIcon || options?.headerRenderer"
+      #header="{ close, titleId, titleClass }"
+    >
+      <div
+        v-if="options?.fullscreenIcon"
+        class="flex items-center justify-between"
+      >
+        <span :id="titleId" :class="titleClass">{{ options?.title }}</span>
+        <i
+          v-if="!options?.fullscreen"
+          :class="fullscreenClass"
+          @click="
+            () => {
+              fullscreen = !fullscreen;
+              eventsCallBack(
+                'fullscreenCallBack',
+                { ...options, fullscreen },
+                index,
+                true
+              );
+            }
+          "
+        >
+          <IconifyIconOffline
+            class="pure-dialog-svg"
+            :icon="
+              options?.fullscreen
+                ? ExitFullscreen
+                : fullscreen
+                  ? ExitFullscreen
+                  : Fullscreen
+            "
+          />
+        </i>
+      </div>
+      <component
+        :is="options?.headerRenderer({ close, titleId, titleClass })"
+        v-else
+      />
+    </template>
+    <component
+      v-bind="options?.props"
+      :is="options.contentRenderer({ options, index })"
+      @close="args => handleClose(options, index, args)"
+    />
+    <!-- footer -->
+    <template v-if="!options?.hideFooter" #footer>
+      <template v-if="options?.footerRenderer">
+        <component :is="options?.footerRenderer({ options, index })" />
+      </template>
+      <span v-else>
+        <template v-for="(btn, key) in footerButtons(options)" :key="key">
+          <el-popconfirm
+            v-if="btn.popconfirm"
+            v-bind="btn.popconfirm"
+            @confirm="
+              btn.btnClick({
+                dialog: { options, index },
+                button: { btn, index: key }
+              })
+            "
+          >
+            <template #reference>
+              <el-button v-bind="btn">{{ btn?.label }}</el-button>
+            </template>
+          </el-popconfirm>
+          <el-button
+            v-else
+            v-bind="btn"
+            :loading="key === 1 && sureBtnMap[index]?.loading"
+            @click="
+              btn.btnClick({
+                dialog: { options, index },
+                button: { btn, index: key }
+              })
+            "
+          >
+            {{ btn?.label }}
+          </el-button>
+        </template>
+      </span>
+    </template>
+  </el-dialog>
+</template>
--- a/src/components/ReDialog/type.ts
+++ b/src/components/ReDialog/type.ts
@@ -0,0 +1,275 @@
+import type { CSSProperties, VNode, Component } from "vue";
+
+type DoneFn = (cancel?: boolean) => void;
+type EventType =
+  | "open"
+  | "close"
+  | "openAutoFocus"
+  | "closeAutoFocus"
+  | "fullscreenCallBack";
+type ArgsType = {
+  /** `cancel` 点击取消按钮、`sure` 点击确定按钮、`close` 点击右上角关闭按钮或空白页或按下了esc键 */
+  command: "cancel" | "sure" | "close";
+};
+type ButtonType =
+  | "primary"
+  | "success"
+  | "warning"
+  | "danger"
+  | "info"
+  | "text";
+
+/** https://element-plus.org/zh-CN/component/dialog.html#attributes */
+type DialogProps = {
+  /** `Dialog` 的显示与隐藏 */
+  visible?: boolean;
+  /** `Dialog` 的标题 */
+  title?: string;
+  /** `Dialog` 的宽度，默认 `50%` */
+  width?: string | number;
+  /** 是否为全屏 `Dialog`（会一直处于全屏状态，除非弹框关闭），默认 `false`，`fullscreen` 和 `fullscreenIcon` 都传时只有 `fullscreen` 会生效 */
+  fullscreen?: boolean;
+  /** 是否显示全屏操作图标，默认 `false`，`fullscreen` 和 `fullscreenIcon` 都传时只有 `fullscreen` 会生效 */
+  fullscreenIcon?: boolean;
+  /** `Dialog CSS` 中的 `margin-top` 值，默认 `15vh` */
+  top?: string;
+  /** 是否需要遮罩层，默认 `true` */
+  modal?: boolean;
+  /** `Dialog` 自身是否插入至 `body` 元素上。嵌套的 `Dialog` 必须指定该属性并赋值为 `true`，默认 `false` */
+  appendToBody?: boolean;
+  /** 是否在 `Dialog` 出现时将 `body` 滚动锁定，默认 `true` */
+  lockScroll?: boolean;
+  /** `Dialog` 的自定义类名 */
+  class?: string;
+  /** `Dialog` 的自定义样式 */
+  style?: CSSProperties;
+  /** `Dialog` 打开的延时时间，单位毫秒，默认 `0` */
+  openDelay?: number;
+  /** `Dialog` 关闭的延时时间，单位毫秒，默认 `0` */
+  closeDelay?: number;
+  /** 是否可以通过点击 `modal` 关闭 `Dialog`，默认 `true` */
+  closeOnClickModal?: boolean;
+  /** 是否可以通过按下 `ESC` 关闭 `Dialog`，默认 `true` */
+  closeOnPressEscape?: boolean;
+  /** 是否显示关闭按钮，默认 `true` */
+  showClose?: boolean;
+  /** 关闭前的回调，会暂停 `Dialog` 的关闭. 回调函数内执行 `done` 参数方法的时候才是真正关闭对话框的时候 */
+  beforeClose?: (done: DoneFn) => void;
+  /** 为 `Dialog` 启用可拖拽功能，默认 `false` */
+  draggable?: boolean;
+  /** 是否让 `Dialog` 的 `header` 和 `footer` 部分居中排列，默认 `false` */
+  center?: boolean;
+  /** 是否水平垂直对齐对话框，默认 `false` */
+  alignCenter?: boolean;
+  /** 当关闭 `Dialog` 时，销毁其中的元素，默认 `false` */
+  destroyOnClose?: boolean;
+};
+
+//element-plus.org/zh-CN/component/popconfirm.html#attributes
+type Popconfirm = {
+  /** 标题 */
+  title?: string;
+  /** 确定按钮文字 */
+  confirmButtonText?: string;
+  /** 取消按钮文字 */
+  cancelButtonText?: string;
+  /** 确定按钮类型，默认 `primary` */
+  confirmButtonType?: ButtonType;
+  /** 取消按钮类型，默认 `text` */
+  cancelButtonType?: ButtonType;
+  /** 自定义图标，默认 `QuestionFilled` */
+  icon?: string | Component;
+  /** `Icon` 颜色，默认 `#f90` */
+  iconColor?: string;
+  /** 是否隐藏 `Icon`，默认 `false` */
+  hideIcon?: boolean;
+  /** 关闭时的延迟，默认 `200` */
+  hideAfter?: number;
+  /** 是否将 `popover` 的下拉列表插入至 `body` 元素，默认 `true` */
+  teleported?: boolean;
+  /** 当 `popover` 组件长时间不触发且 `persistent` 属性设置为 `false` 时, `popover` 将会被删除，默认 `false` */
+  persistent?: boolean;
+  /** 弹层宽度，最小宽度 `150px`，默认 `150` */
+  width?: string | number;
+};
+
+type BtnClickDialog = {
+  options?: DialogOptions;
+  index?: number;
+};
+type BtnClickButton = {
+  btn?: ButtonProps;
+  index?: number;
+};
+/** https://element-plus.org/zh-CN/component/button.html#button-attributes */
+type ButtonProps = {
+  /** 按钮文字 */
+  label: string;
+  /** 按钮尺寸 */
+  size?: "large" | "default" | "small";
+  /** 按钮类型 */
+  type?: "primary" | "success" | "warning" | "danger" | "info";
+  /** 是否为朴素按钮，默认 `false` */
+  plain?: boolean;
+  /** 是否为文字按钮，默认 `false` */
+  text?: boolean;
+  /** 是否显示文字按钮背景颜色，默认 `false` */
+  bg?: boolean;
+  /** 是否为链接按钮，默认 `false` */
+  link?: boolean;
+  /** 是否为圆角按钮，默认 `false` */
+  round?: boolean;
+  /** 是否为圆形按钮，默认 `false` */
+  circle?: boolean;
+  /** 确定按钮的 `Popconfirm` 气泡确认框相关配置 */
+  popconfirm?: Popconfirm;
+  /** 是否为加载中状态，默认 `false` */
+  loading?: boolean;
+  /** 自定义加载中状态图标组件 */
+  loadingIcon?: string | Component;
+  /** 按钮是否为禁用状态，默认 `false` */
+  disabled?: boolean;
+  /** 图标组件 */
+  icon?: string | Component;
+  /** 是否开启原生 `autofocus` 属性，默认 `false` */
+  autofocus?: boolean;
+  /** 原生 `type` 属性，默认 `button` */
+  nativeType?: "button" | "submit" | "reset";
+  /** 自动在两个中文字符之间插入空格 */
+  autoInsertSpace?: boolean;
+  /** 自定义按钮颜色, 并自动计算 `hover` 和 `active` 触发后的颜色 */
+  color?: string;
+  /** `dark` 模式, 意味着自动设置 `color` 为 `dark` 模式的颜色，默认 `false` */
+  dark?: boolean;
+  /** 自定义元素标签 */
+  tag?: string | Component;
+  /** 点击按钮后触发的回调 */
+  btnClick?: ({
+    dialog,
+    button
+  }: {
+    /** 当前 `Dialog` 信息 */
+    dialog: BtnClickDialog;
+    /** 当前 `button` 信息 */
+    button: BtnClickButton;
+  }) => void;
+};
+
+interface DialogOptions extends DialogProps {
+  /** 内容区组件的 `props`，可通过 `defineProps` 接收 */
+  props?: any;
+  /** 是否隐藏 `Dialog` 按钮操作区的内容 */
+  hideFooter?: boolean;
+  /** 确定按钮的 `Popconfirm` 气泡确认框相关配置 */
+  popconfirm?: Popconfirm;
+  /** 点击确定按钮后是否开启 `loading` 加载动画 */
+  sureBtnLoading?: boolean;
+  /**
+   * @description 自定义对话框标题的内容渲染器
+   * @see {@link https://element-plus.org/zh-CN/component/dialog.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%A4%B4%E9%83%A8}
+   */
+  headerRenderer?: ({
+    close,
+    titleId,
+    titleClass
+  }: {
+    close: Function;
+    titleId: string;
+    titleClass: string;
+  }) => VNode | Component;
+  /** 自定义内容渲染器 */
+  contentRenderer?: ({
+    options,
+    index
+  }: {
+    options: DialogOptions;
+    index: number;
+  }) => VNode | Component;
+  /** 自定义按钮操作区的内容渲染器，会覆盖`footerButtons`以及默认的 `取消` 和 `确定` 按钮 */
+  footerRenderer?: ({
+    options,
+    index
+  }: {
+    options: DialogOptions;
+    index: number;
+  }) => VNode | Component;
+  /** 自定义底部按钮操作 */
+  footerButtons?: Array<ButtonProps>;
+  /** `Dialog` 打开后的回调 */
+  open?: ({
+    options,
+    index
+  }: {
+    options: DialogOptions;
+    index: number;
+  }) => void;
+  /** `Dialog` 关闭后的回调（只有点击右上角关闭按钮或空白页或按下了esc键关闭页面时才会触发） */
+  close?: ({
+    options,
+    index
+  }: {
+    options: DialogOptions;
+    index: number;
+  }) => void;
+  /** `Dialog` 关闭后的回调。 `args` 返回的 `command` 值解析：`cancel` 点击取消按钮、`sure` 点击确定按钮、`close` 点击右上角关闭按钮或空白页或按下了esc键  */
+  closeCallBack?: ({
+    options,
+    index,
+    args
+  }: {
+    options: DialogOptions;
+    index: number;
+    args: any;
+  }) => void;
+  /** 点击全屏按钮时的回调 */
+  fullscreenCallBack?: ({
+    options,
+    index
+  }: {
+    options: DialogOptions;
+    index: number;
+  }) => void;
+  /** 输入焦点聚焦在 `Dialog` 内容时的回调 */
+  openAutoFocus?: ({
+    options,
+    index
+  }: {
+    options: DialogOptions;
+    index: number;
+  }) => void;
+  /** 输入焦点从 `Dialog` 内容失焦时的回调 */
+  closeAutoFocus?: ({
+    options,
+    index
+  }: {
+    options: DialogOptions;
+    index: number;
+  }) => void;
+  /** 点击底部取消按钮的回调，会暂停 `Dialog` 的关闭. 回调函数内执行 `done` 参数方法的时候才是真正关闭对话框的时候 */
+  beforeCancel?: (
+    done: Function,
+    {
+      options,
+      index
+    }: {
+      options: DialogOptions;
+      index: number;
+    }
+  ) => void;
+  /** 点击底部确定按钮的回调，会暂停 `Dialog` 的关闭. 回调函数内执行 `done` 参数方法的时候才是真正关闭对话框的时候 */
+  beforeSure?: (
+    done: Function,
+    {
+      options,
+      index,
+      closeLoading
+    }: {
+      options: DialogOptions;
+      index: number;
+      /** 关闭确定按钮的 `loading` 加载动画 */
+      closeLoading: Function;
+    }
+  ) => void;
+}
+
+export type { EventType, ArgsType, DialogProps, ButtonProps, DialogOptions };
--- a/src/components/ReIcon/index.ts
+++ b/src/components/ReIcon/index.ts
@@ -0,0 +1,12 @@
+import iconifyIconOffline from "./src/iconifyIconOffline";
+import iconifyIconOnline from "./src/iconifyIconOnline";
+import fontIcon from "./src/iconfont";
+
+/** 本地图标组件 */
+const IconifyIconOffline = iconifyIconOffline;
+/** 在线图标组件 */
+const IconifyIconOnline = iconifyIconOnline;
+/** `iconfont`组件 */
+const FontIcon = fontIcon;
+
+export { IconifyIconOffline, IconifyIconOnline, FontIcon };
--- a/src/components/ReIcon/src/hooks.ts
+++ b/src/components/ReIcon/src/hooks.ts
@@ -0,0 +1,61 @@
+import type { iconType } from "./types";
+import { h, defineComponent, type Component } from "vue";
+import { IconifyIconOnline, IconifyIconOffline, FontIcon } from "../index";
+
+/**
+ * 支持 `iconfont`、自定义 `svg` 以及 `iconify` 中所有的图标
+ * @see 点击查看文档图标篇 {@link https://pure-admin.cn/pages/icon/}
+ * @param icon 必传 图标
+ * @param attrs 可选 iconType 属性
+ * @returns Component
+ */
+export function useRenderIcon(icon: any, attrs?: iconType): Component {
+  // iconfont
+  const ifReg = /^IF-/;
+  // typeof icon === "function" 属于SVG
+  if (ifReg.test(icon)) {
+    // iconfont
+    const name = icon.split(ifReg)[1];
+    const iconName = name.slice(
+      0,
+      name.indexOf(" ") == -1 ? name.length : name.indexOf(" ")
+    );
+    const iconType = name.slice(name.indexOf(" ") + 1, name.length);
+    return defineComponent({
+      name: "FontIcon",
+      render() {
+        return h(FontIcon, {
+          icon: iconName,
+          iconType,
+          ...attrs
+        });
+      }
+    });
+  } else if (typeof icon === "function" || typeof icon?.render === "function") {
+    // svg
+    return attrs ? h(icon, { ...attrs }) : icon;
+  } else if (typeof icon === "object") {
+    return defineComponent({
+      name: "OfflineIcon",
+      render() {
+        return h(IconifyIconOffline, {
+          icon: icon,
+          ...attrs
+        });
+      }
+    });
+  } else {
+    // 通过是否存在 : 符号来判断是在线还是本地图标，存在即是在线图标，反之
+    return defineComponent({
+      name: "Icon",
+      render() {
+        const IconifyIcon =
+          icon && icon.includes(":") ? IconifyIconOnline : IconifyIconOffline;
+        return h(IconifyIcon, {
+          icon: icon,
+          ...attrs
+        });
+      }
+    });
+  }
+}
--- a/src/components/ReIcon/src/iconfont.ts
+++ b/src/components/ReIcon/src/iconfont.ts
@@ -0,0 +1,48 @@
+import { h, defineComponent } from "vue";
+
+// 封装iconfont组件，默认`font-class`引用模式，支持`unicode`引用、`font-class`引用、`symbol`引用 （https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.20&helptype=code）
+export default defineComponent({
+  name: "FontIcon",
+  props: {
+    icon: {
+      type: String,
+      default: ""
+    }
+  },
+  render() {
+    const attrs = this.$attrs;
+    if (Object.keys(attrs).includes("uni") || attrs?.iconType === "uni") {
+      return h(
+        "i",
+        {
+          class: "iconfont",
+          ...attrs
+        },
+        this.icon
+      );
+    } else if (
+      Object.keys(attrs).includes("svg") ||
+      attrs?.iconType === "svg"
+    ) {
+      return h(
+        "svg",
+        {
+          class: "icon-svg",
+          "aria-hidden": true
+        },
+        {
+          default: () => [
+            h("use", {
+              "xlink:href": `#${this.icon}`
+            })
+          ]
+        }
+      );
+    } else {
+      return h("i", {
+        class: `iconfont ${this.icon}`,
+        ...attrs
+      });
+    }
+  }
+});
--- a/src/components/ReIcon/src/iconifyIconOffline.ts
+++ b/src/components/ReIcon/src/iconifyIconOffline.ts
@@ -0,0 +1,30 @@
+import { h, defineComponent } from "vue";
+import { Icon as IconifyIcon, addIcon } from "@iconify/vue/dist/offline";
+
+// Iconify Icon在Vue里本地使用（用于内网环境）
+export default defineComponent({
+  name: "IconifyIconOffline",
+  components: { IconifyIcon },
+  props: {
+    icon: {
+      default: null
+    }
+  },
+  render() {
+    if (typeof this.icon === "object") addIcon(this.icon, this.icon);
+    const attrs = this.$attrs;
+    return h(
+      IconifyIcon,
+      {
+        icon: this.icon,
+        style: attrs?.style
+          ? Object.assign(attrs.style, { outline: "none" })
+          : { outline: "none" },
+        ...attrs
+      },
+      {
+        default: () => []
+      }
+    );
+  }
+});
--- a/src/components/ReIcon/src/iconifyIconOnline.ts
+++ b/src/components/ReIcon/src/iconifyIconOnline.ts
@@ -0,0 +1,30 @@
+import { h, defineComponent } from "vue";
+import { Icon as IconifyIcon } from "@iconify/vue";
+
+// Iconify Icon在Vue里在线使用（用于外网环境）
+export default defineComponent({
+  name: "IconifyIconOnline",
+  components: { IconifyIcon },
+  props: {
+    icon: {
+      type: String,
+      default: ""
+    }
+  },
+  render() {
+    const attrs = this.$attrs;
+    return h(
+      IconifyIcon,
+      {
+        icon: `${this.icon}`,
+        style: attrs?.style
+          ? Object.assign(attrs.style, { outline: "none" })
+          : { outline: "none" },
+        ...attrs
+      },
+      {
+        default: () => []
+      }
+    );
+  }
+});
--- a/src/components/ReIcon/src/offlineIcon.ts
+++ b/src/components/ReIcon/src/offlineIcon.ts
@@ -0,0 +1,14 @@
+// 这里存放本地图标，在 src/layout/index.vue 文件中加载，避免在首启动加载
+import { addIcon } from "@iconify/vue/dist/offline";
+
+// 本地菜单图标，后端在路由的 icon 中返回对应的图标字符串并且前端在此处使用 addIcon 添加即可渲染菜单图标
+// @iconify-icons/ep
+import Lollipop from "@iconify-icons/ep/lollipop";
+import HomeFilled from "@iconify-icons/ep/home-filled";
+addIcon("ep:lollipop", Lollipop);
+addIcon("ep:home-filled", HomeFilled);
+// @iconify-icons/ri
+import Search from "@iconify-icons/ri/search-line";
+import InformationLine from "@iconify-icons/ri/information-line";
+addIcon("ri:search-line", Search);
+addIcon("ri:information-line", InformationLine);
--- a/src/components/ReIcon/src/types.ts
+++ b/src/components/ReIcon/src/types.ts
@@ -0,0 +1,20 @@
+export interface iconType {
+  // iconify (https://docs.iconify.design/icon-components/vue/#properties)
+  inline?: boolean;
+  width?: string | number;
+  height?: string | number;
+  horizontalFlip?: boolean;
+  verticalFlip?: boolean;
+  flip?: string;
+  rotate?: number | string;
+  color?: string;
+  horizontalAlign?: boolean;
+  verticalAlign?: boolean;
+  align?: string;
+  onLoad?: Function;
+  includes?: Function;
+  // svg 需要什么SVG属性自行添加
+  fill?: string;
+  // all icon
+  style?: object;
+}
--- a/src/components/ReImageVerify/index.ts
+++ b/src/components/ReImageVerify/index.ts
@@ -0,0 +1,7 @@
+import reImageVerify from "./src/index.vue";
+import { withInstall } from "@pureadmin/utils";
+
+/** 图形验证码组件 */
+export const ReImageVerify = withInstall(reImageVerify);
+
+export default ReImageVerify;
--- a/src/components/ReImageVerify/src/hooks.ts
+++ b/src/components/ReImageVerify/src/hooks.ts
@@ -0,0 +1,85 @@
+import { ref, onMounted } from "vue";
+
+/**
+ * 绘制图形验证码
+ * @param width - 图形宽度
+ * @param height - 图形高度
+ */
+export const useImageVerify = (width = 120, height = 40) => {
+  const domRef = ref<HTMLCanvasElement>();
+  const imgCode = ref("");
+
+  function setImgCode(code: string) {
+    imgCode.value = code;
+  }
+
+  function getImgCode() {
+    if (!domRef.value) return;
+    imgCode.value = draw(domRef.value, width, height);
+  }
+
+  onMounted(() => {
+    getImgCode();
+  });
+
+  return {
+    domRef,
+    imgCode,
+    setImgCode,
+    getImgCode
+  };
+};
+
+function randomNum(min: number, max: number) {
+  const num = Math.floor(Math.random() * (max - min) + min);
+  return num;
+}
+
+function randomColor(min: number, max: number) {
+  const r = randomNum(min, max);
+  const g = randomNum(min, max);
+  const b = randomNum(min, max);
+  return `rgb(${r},${g},${b})`;
+}
+
+function draw(dom: HTMLCanvasElement, width: number, height: number) {
+  let imgCode = "";
+
+  const NUMBER_STRING = "0123456789";
+
+  const ctx = dom.getContext("2d");
+  if (!ctx) return imgCode;
+
+  ctx.fillStyle = randomColor(180, 230);
+  ctx.fillRect(0, 0, width, height);
+  for (let i = 0; i < 4; i += 1) {
+    const text = NUMBER_STRING[randomNum(0, NUMBER_STRING.length)];
+    imgCode += text;
+    const fontSize = randomNum(18, 41);
+    const deg = randomNum(-30, 30);
+    ctx.font = `${fontSize}px Simhei`;
+    ctx.textBaseline = "top";
+    ctx.fillStyle = randomColor(80, 150);
+    ctx.save();
+    ctx.translate(30 * i + 15, 15);
+    ctx.rotate((deg * Math.PI) / 180);
+    ctx.fillText(text, -15 + 5, -15);
+    ctx.restore();
+  }
+  for (let i = 0; i < 5; i += 1) {
+    ctx.beginPath();
+    ctx.moveTo(randomNum(0, width), randomNum(0, height));
+    ctx.lineTo(randomNum(0, width), randomNum(0, height));
+    ctx.strokeStyle = randomColor(180, 230);
+    ctx.closePath();
+    ctx.stroke();
+  }
+  for (let i = 0; i < 41; i += 1) {
+    ctx.beginPath();
+    ctx.arc(randomNum(0, width), randomNum(0, height), 1, 0, 2 * Math.PI);
+    ctx.closePath();
+    ctx.fillStyle = randomColor(150, 200);
+    ctx.fill();
+  }
+  return imgCode;
+}
--- a/src/components/ReImageVerify/src/index.vue
+++ b/src/components/ReImageVerify/src/index.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { watch } from "vue";
+import { useImageVerify } from "./hooks";
+
+defineOptions({
+  name: "ReImageVerify"
+});
+
+interface Props {
+  code?: string;
+}
+
+interface Emits {
+  (e: "update:code", code: string): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  code: ""
+});
+
+const emit = defineEmits<Emits>();
+
+const { domRef, imgCode, setImgCode, getImgCode } = useImageVerify();
+
+watch(
+  () => props.code,
+  newValue => {
+    setImgCode(newValue);
+  }
+);
+watch(imgCode, newValue => {
+  emit("update:code", newValue);
+});
+
+defineExpose({ getImgCode });
+</script>
+
+<template>
+  <canvas
+    ref="domRef"
+    width="120"
+    height="40"
+    class="cursor-pointer"
+    @click="getImgCode"
+  />
+</template>
--- a/src/components/RePerms/index.ts
+++ b/src/components/RePerms/index.ts
@@ -0,0 +1,5 @@
+import perms from "./src/perms";
+
+const Perms = perms;
+
+export { Perms };
--- a/src/components/RePerms/src/perms.tsx
+++ b/src/components/RePerms/src/perms.tsx
@@ -0,0 +1,20 @@
+import { defineComponent, Fragment } from "vue";
+import { hasPerms } from "@/utils/auth";
+
+export default defineComponent({
+  name: "Perms",
+  props: {
+    value: {
+      type: undefined,
+      default: []
+    }
+  },
+  setup(props, { slots }) {
+    return () => {
+      if (!slots) return null;
+      return hasPerms(props.value) ? (
+        <Fragment>{slots.default?.()}</Fragment>
+      ) : null;
+    };
+  }
+});
--- a/src/components/RePureTableBar/index.ts
+++ b/src/components/RePureTableBar/index.ts
@@ -0,0 +1,5 @@
+import pureTableBar from "./src/bar";
+import { withInstall } from "@pureadmin/utils";
+
+/** 配合 `@pureadmin/table` 实现快速便捷的表格操作 https://github.com/pure-admin/pure-admin-table */
+export const PureTableBar = withInstall(pureTableBar);
--- a/src/components/RePureTableBar/src/bar.tsx
+++ b/src/components/RePureTableBar/src/bar.tsx
@@ -0,0 +1,398 @@
+import Sortable from "sortablejs";
+import { transformI18n } from "@/plugins/i18n";
+import { useEpThemeStoreHook } from "@/store/modules/epTheme";
+import {
+  type PropType,
+  ref,
+  unref,
+  computed,
+  nextTick,
+  defineComponent,
+  getCurrentInstance
+} from "vue";
+import {
+  delay,
+  cloneDeep,
+  isBoolean,
+  isFunction,
+  getKeyList
+} from "@pureadmin/utils";
+
+import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
+import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
+import DragIcon from "@/assets/table-bar/drag.svg?component";
+import ExpandIcon from "@/assets/table-bar/expand.svg?component";
+import RefreshIcon from "@/assets/table-bar/refresh.svg?component";
+import SettingIcon from "@/assets/table-bar/settings.svg?component";
+import CollapseIcon from "@/assets/table-bar/collapse.svg?component";
+
+const props = {
+  /** 头部最左边的标题 */
+  title: {
+    type: String,
+    default: "列表"
+  },
+  /** 对于树形表格，如果想启用展开和折叠功能，传入当前表格的ref即可 */
+  tableRef: {
+    type: Object as PropType<any>
+  },
+  /** 需要展示的列 */
+  columns: {
+    type: Array as PropType<TableColumnList>,
+    default: () => []
+  },
+  isExpandAll: {
+    type: Boolean,
+    default: true
+  },
+  tableKey: {
+    type: [String, Number] as PropType<string | number>,
+    default: "0"
+  }
+};
+
+export default defineComponent({
+  name: "PureTableBar",
+  props,
+  emits: ["refresh", "fullscreen"],
+  setup(props, { emit, slots, attrs }) {
+    const size = ref("default");
+    const loading = ref(false);
+    const checkAll = ref(true);
+    const isFullscreen = ref(false);
+    const isIndeterminate = ref(false);
+    const instance = getCurrentInstance()!;
+    const isExpandAll = ref(props.isExpandAll);
+    const filterColumns = cloneDeep(props?.columns).filter(column =>
+      isBoolean(column?.hide)
+        ? !column.hide
+        : !(isFunction(column?.hide) && column?.hide())
+    );
+    let checkColumnList = getKeyList(cloneDeep(props?.columns), "label");
+    const checkedColumns = ref(getKeyList(cloneDeep(filterColumns), "label"));
+    const dynamicColumns = ref(cloneDeep(props?.columns));
+
+    const getDropdownItemStyle = computed(() => {
+      return s => {
+        return {
+          background:
+            s === size.value ? useEpThemeStoreHook().epThemeColor : "",
+          color: s === size.value ? "#fff" : "var(--el-text-color-primary)"
+        };
+      };
+    });
+
+    const iconClass = computed(() => {
+      return [
+        "text-black",
+        "dark:text-white",
+        "duration-100",
+        "hover:!text-primary",
+        "cursor-pointer",
+        "outline-none"
+      ];
+    });
+
+    const topClass = computed(() => {
+      return [
+        "flex",
+        "justify-between",
+        "pt-[3px]",
+        "px-[11px]",
+        "border-b-[1px]",
+        "border-solid",
+        "border-[#dcdfe6]",
+        "dark:border-[#303030]"
+      ];
+    });
+
+    function onReFresh() {
+      loading.value = true;
+      emit("refresh");
+      delay(500).then(() => (loading.value = false));
+    }
+
+    function onExpand() {
+      isExpandAll.value = !isExpandAll.value;
+      toggleRowExpansionAll(props.tableRef.data, isExpandAll.value);
+    }
+
+    function onFullscreen() {
+      isFullscreen.value = !isFullscreen.value;
+      emit("fullscreen", isFullscreen.value);
+    }
+
+    function toggleRowExpansionAll(data, isExpansion) {
+      data.forEach(item => {
+        props.tableRef.toggleRowExpansion(item, isExpansion);
+        if (item.children !== undefined && item.children !== null) {
+          toggleRowExpansionAll(item.children, isExpansion);
+        }
+      });
+    }
+
+    function handleCheckAllChange(val: boolean) {
+      checkedColumns.value = val ? checkColumnList : [];
+      isIndeterminate.value = false;
+      dynamicColumns.value.map(column =>
+        val ? (column.hide = false) : (column.hide = true)
+      );
+    }
+
+    function handleCheckedColumnsChange(value: string[]) {
+      checkedColumns.value = value;
+      const checkedCount = value.length;
+      checkAll.value = checkedCount === checkColumnList.length;
+      isIndeterminate.value =
+        checkedCount > 0 && checkedCount < checkColumnList.length;
+    }
+
+    function handleCheckColumnListChange(val: boolean, label: string) {
+      dynamicColumns.value.filter(
+        item => transformI18n(item.label) === transformI18n(label)
+      )[0].hide = !val;
+    }
+
+    async function onReset() {
+      checkAll.value = true;
+      isIndeterminate.value = false;
+      dynamicColumns.value = cloneDeep(props?.columns);
+      checkColumnList = [];
+      checkColumnList = await getKeyList(cloneDeep(props?.columns), "label");
+      checkedColumns.value = getKeyList(cloneDeep(filterColumns), "label");
+    }
+
+    const dropdown = {
+      dropdown: () => (
+        <el-dropdown-menu class="translation">
+          <el-dropdown-item
+            style={getDropdownItemStyle.value("large")}
+            onClick={() => (size.value = "large")}
+          >
+            宽松
+          </el-dropdown-item>
+          <el-dropdown-item
+            style={getDropdownItemStyle.value("default")}
+            onClick={() => (size.value = "default")}
+          >
+            默认
+          </el-dropdown-item>
+          <el-dropdown-item
+            style={getDropdownItemStyle.value("small")}
+            onClick={() => (size.value = "small")}
+          >
+            紧凑
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      )
+    };
+
+    /** 列展示拖拽排序 */
+    const rowDrop = (event: { preventDefault: () => void }) => {
+      event.preventDefault();
+      nextTick(() => {
+        const wrapper: HTMLElement = (
+          instance?.proxy?.$refs[`GroupRef${unref(props.tableKey)}`] as any
+        ).$el.firstElementChild;
+        Sortable.create(wrapper, {
+          animation: 300,
+          handle: ".drag-btn",
+          onEnd: ({ newIndex, oldIndex, item }) => {
+            const targetThElem = item;
+            const wrapperElem = targetThElem.parentNode as HTMLElement;
+            const oldColumn = dynamicColumns.value[oldIndex];
+            const newColumn = dynamicColumns.value[newIndex];
+            if (oldColumn?.fixed || newColumn?.fixed) {
+              // 当前列存在fixed属性 则不可拖拽
+              const oldThElem = wrapperElem.children[oldIndex] as HTMLElement;
+              if (newIndex > oldIndex) {
+                wrapperElem.insertBefore(targetThElem, oldThElem);
+              } else {
+                wrapperElem.insertBefore(
+                  targetThElem,
+                  oldThElem ? oldThElem.nextElementSibling : oldThElem
+                );
+              }
+              return;
+            }
+            const currentRow = dynamicColumns.value.splice(oldIndex, 1)[0];
+            dynamicColumns.value.splice(newIndex, 0, currentRow);
+          }
+        });
+      });
+    };
+
+    const isFixedColumn = (label: string) => {
+      return dynamicColumns.value.filter(
+        item => transformI18n(item.label) === transformI18n(label)
+      )[0].fixed
+        ? true
+        : false;
+    };
+
+    const rendTippyProps = (content: string) => {
+      // https://vue-tippy.netlify.app/props
+      return {
+        content,
+        offset: [0, 18],
+        duration: [300, 0],
+        followCursor: true,
+        hideOnClick: "toggle"
+      };
+    };
+
+    const reference = {
+      reference: () => (
+        <SettingIcon
+          class={["w-[16px]", iconClass.value]}
+          v-tippy={rendTippyProps("列设置")}
+        />
+      )
+    };
+
+    return () => (
+      <>
+        <div
+          {...attrs}
+          class={[
+            "w-[99/100]",
+            "px-2",
+            "pb-2",
+            "bg-bg_color",
+            isFullscreen.value
+              ? ["!w-full", "!h-full", "z-[2002]", "fixed", "inset-0"]
+              : "mt-2"
+          ]}
+        >
+          <div class="flex justify-between w-full h-[60px] p-4">
+            {slots?.title ? (
+              slots.title()
+            ) : (
+              <p class="font-bold truncate">{props.title}</p>
+            )}
+            <div class="flex items-center justify-around">
+              {slots?.buttons ? (
+                <div class="flex mr-4">{slots.buttons()}</div>
+              ) : null}
+              {props.tableRef?.size ? (
+                <>
+                  <ExpandIcon
+                    class={["w-[16px]", iconClass.value]}
+                    style={{
+                      transform: isExpandAll.value ? "none" : "rotate(-90deg)"
+                    }}
+                    v-tippy={rendTippyProps(
+                      isExpandAll.value ? "折叠" : "展开"
+                    )}
+                    onClick={() => onExpand()}
+                  />
+                  <el-divider direction="vertical" />
+                </>
+              ) : null}
+              <RefreshIcon
+                class={[
+                  "w-[16px]",
+                  iconClass.value,
+                  loading.value ? "animate-spin" : ""
+                ]}
+                v-tippy={rendTippyProps("刷新")}
+                onClick={() => onReFresh()}
+              />
+              <el-divider direction="vertical" />
+              <el-dropdown
+                v-slots={dropdown}
+                trigger="click"
+                v-tippy={rendTippyProps("密度")}
+              >
+                <CollapseIcon class={["w-[16px]", iconClass.value]} />
+              </el-dropdown>
+              <el-divider direction="vertical" />
+
+              <el-popover
+                v-slots={reference}
+                placement="bottom-start"
+                popper-style={{ padding: 0 }}
+                width="200"
+                trigger="click"
+              >
+                <div class={[topClass.value]}>
+                  <el-checkbox
+                    class="!-mr-1"
+                    label="列展示"
+                    v-model={checkAll.value}
+                    indeterminate={isIndeterminate.value}
+                    onChange={value => handleCheckAllChange(value)}
+                  />
+                  <el-button type="primary" link onClick={() => onReset()}>
+                    重置
+                  </el-button>
+                </div>
+
+                <div class="pt-[6px] pl-[11px]">
+                  <el-scrollbar max-height="36vh">
+                    <el-checkbox-group
+                      ref={`GroupRef${unref(props.tableKey)}`}
+                      modelValue={checkedColumns.value}
+                      onChange={value => handleCheckedColumnsChange(value)}
+                    >
+                      <el-space
+                        direction="vertical"
+                        alignment="flex-start"
+                        size={0}
+                      >
+                        {checkColumnList.map((item, index) => {
+                          return (
+                            <div class="flex items-center">
+                              <DragIcon
+                                class={[
+                                  "drag-btn w-[16px] mr-2",
+                                  isFixedColumn(item)
+                                    ? "!cursor-no-drop"
+                                    : "!cursor-grab"
+                                ]}
+                                onMouseenter={(event: {
+                                  preventDefault: () => void;
+                                }) => rowDrop(event)}
+                              />
+                              <el-checkbox
+                                key={index}
+                                label={item}
+                                value={item}
+                                onChange={value =>
+                                  handleCheckColumnListChange(value, item)
+                                }
+                              >
+                                <span
+                                  title={transformI18n(item)}
+                                  class="inline-block w-[120px] truncate hover:text-text_color_primary"
+                                >
+                                  {transformI18n(item)}
+                                </span>
+                              </el-checkbox>
+                            </div>
+                          );
+                        })}
+                      </el-space>
+                    </el-checkbox-group>
+                  </el-scrollbar>
+                </div>
+              </el-popover>
+              <el-divider direction="vertical" />
+
+              <iconifyIconOffline
+                class={["w-[16px]", iconClass.value]}
+                icon={isFullscreen.value ? ExitFullscreen : Fullscreen}
+                v-tippy={isFullscreen.value ? "退出全屏" : "全屏"}
+                onClick={() => onFullscreen()}
+              />
+            </div>
+          </div>
+          {slots.default({
+            size: size.value,
+            dynamicColumns: dynamicColumns.value
+          })}
+        </div>
+      </>
+    );
+  }
+});
--- a/src/components/ReQrcode/index.ts
+++ b/src/components/ReQrcode/index.ts
@@ -0,0 +1,7 @@
+import reQrcode from "./src/index";
+import { withInstall } from "@pureadmin/utils";
+
+/** 二维码组件 */
+export const ReQrcode = withInstall(reQrcode);
+
+export default ReQrcode;
--- a/src/components/ReQrcode/src/index.scss
+++ b/src/components/ReQrcode/src/index.scss
@@ -0,0 +1,9 @@
+.qrcode {
+  &--disabled {
+    background: rgb(255 255 255 / 95%);
+
+    & > div {
+      transform: translate(-50%, -50%);
+    }
+  }
+}
--- a/src/components/ReQrcode/src/index.tsx
+++ b/src/components/ReQrcode/src/index.tsx
@@ -0,0 +1,261 @@
+import {
+  type PropType,
+  ref,
+  unref,
+  watch,
+  nextTick,
+  computed,
+  defineComponent
+} from "vue";
+import "./index.scss";
+import propTypes from "@/utils/propTypes";
+import { isString, cloneDeep } from "@pureadmin/utils";
+import QRCode, { type QRCodeRenderersOptions } from "qrcode";
+import RefreshRight from "@iconify-icons/ep/refresh-right";
+
+interface QrcodeLogo {
+  src?: string;
+  logoSize?: number;
+  bgColor?: string;
+  borderSize?: number;
+  crossOrigin?: string;
+  borderRadius?: number;
+  logoRadius?: number;
+}
+
+const props = {
+  // img 或者 canvas,img不支持logo嵌套
+  tag: propTypes.string
+    .validate((v: string) => ["canvas", "img"].includes(v))
+    .def("canvas"),
+  // 二维码内容
+  text: {
+    type: [String, Array] as PropType<string | Recordable[]>,
+    default: null
+  },
+  // qrcode.js配置项
+  options: {
+    type: Object as PropType<QRCodeRenderersOptions>,
+    default: (): QRCodeRenderersOptions => ({})
+  },
+  // 宽度
+  width: propTypes.number.def(200),
+  // logo
+  logo: {
+    type: [String, Object] as PropType<Partial<QrcodeLogo> | string>,
+    default: (): QrcodeLogo | string => ""
+  },
+  // 是否过期
+  disabled: propTypes.bool.def(false),
+  // 过期提示内容
+  disabledText: propTypes.string.def("")
+};
+
+export default defineComponent({
+  name: "ReQrcode",
+  props,
+  emits: ["done", "click", "disabled-click"],
+  setup(props, { emit }) {
+    const { toCanvas, toDataURL } = QRCode;
+    const loading = ref(true);
+    const wrapRef = ref<Nullable<HTMLCanvasElement | HTMLImageElement>>(null);
+    const renderText = computed(() => String(props.text));
+    const wrapStyle = computed(() => {
+      return {
+        width: props.width + "px",
+        height: props.width + "px"
+      };
+    });
+    const initQrcode = async () => {
+      await nextTick();
+      const options = cloneDeep(props.options || {});
+      if (props.tag === "canvas") {
+        // 容错率，默认对内容少的二维码采用高容错率，内容多的二维码采用低容错率
+        options.errorCorrectionLevel =
+          options.errorCorrectionLevel ||
+          getErrorCorrectionLevel(unref(renderText));
+        const _width: number = await getOriginWidth(unref(renderText), options);
+        options.scale =
+          props.width === 0 ? undefined : (props.width / _width) * 4;
+        const canvasRef: any = await toCanvas(
+          unref(wrapRef) as HTMLCanvasElement,
+          unref(renderText),
+          options
+        );
+        if (props.logo) {
+          const url = await createLogoCode(canvasRef);
+          emit("done", url);
+          loading.value = false;
+        } else {
+          emit("done", canvasRef.toDataURL());
+          loading.value = false;
+        }
+      } else {
+        const url = await toDataURL(renderText.value, {
+          errorCorrectionLevel: "H",
+          width: props.width,
+          ...options
+        });
+        (unref(wrapRef) as any).src = url;
+        emit("done", url);
+        loading.value = false;
+      }
+    };
+    watch(
+      () => renderText.value,
+      val => {
+        if (!val) return;
+        initQrcode();
+      },
+      {
+        deep: true,
+        immediate: true
+      }
+    );
+    const createLogoCode = (canvasRef: HTMLCanvasElement) => {
+      const canvasWidth = canvasRef.width;
+      const logoOptions: QrcodeLogo = Object.assign(
+        {
+          logoSize: 0.15,
+          bgColor: "#ffffff",
+          borderSize: 0.05,
+          crossOrigin: "anonymous",
+          borderRadius: 8,
+          logoRadius: 0
+        },
+        isString(props.logo) ? {} : props.logo
+      );
+      const {
+        logoSize = 0.15,
+        bgColor = "#ffffff",
+        borderSize = 0.05,
+        crossOrigin = "anonymous",
+        borderRadius = 8,
+        logoRadius = 0
+      } = logoOptions;
+      const logoSrc = isString(props.logo) ? props.logo : props.logo.src;
+      const logoWidth = canvasWidth * logoSize;
+      const logoXY = (canvasWidth * (1 - logoSize)) / 2;
+      const logoBgWidth = canvasWidth * (logoSize + borderSize);
+      const logoBgXY = (canvasWidth * (1 - logoSize - borderSize)) / 2;
+      const ctx = canvasRef.getContext("2d");
+      if (!ctx) return;
+      // logo 底色
+      canvasRoundRect(ctx)(
+        logoBgXY,
+        logoBgXY,
+        logoBgWidth,
+        logoBgWidth,
+        borderRadius
+      );
+      ctx.fillStyle = bgColor;
+      ctx.fill();
+      // logo
+      const image = new Image();
+      if (crossOrigin || logoRadius) {
+        image.setAttribute("crossOrigin", crossOrigin);
+      }
+      (image as any).src = logoSrc;
+      // 使用image绘制可以避免某些跨域情况
+      const drawLogoWithImage = (image: HTMLImageElement) => {
+        ctx.drawImage(image, logoXY, logoXY, logoWidth, logoWidth);
+      };
+      // 使用canvas绘制以获得更多的功能
+      const drawLogoWithCanvas = (image: HTMLImageElement) => {
+        const canvasImage = document.createElement("canvas");
+        canvasImage.width = logoXY + logoWidth;
+        canvasImage.height = logoXY + logoWidth;
+        const imageCanvas = canvasImage.getContext("2d");
+        if (!imageCanvas || !ctx) return;
+        imageCanvas.drawImage(image, logoXY, logoXY, logoWidth, logoWidth);
+        canvasRoundRect(ctx)(logoXY, logoXY, logoWidth, logoWidth, logoRadius);
+        if (!ctx) return;
+        const fillStyle = ctx.createPattern(canvasImage, "no-repeat");
+        if (fillStyle) {
+          ctx.fillStyle = fillStyle;
+          ctx.fill();
+        }
+      };
+      // 将 logo绘制到 canvas上
+      return new Promise((resolve: any) => {
+        image.onload = () => {
+          logoRadius ? drawLogoWithCanvas(image) : drawLogoWithImage(image);
+          resolve(canvasRef.toDataURL());
+        };
+      });
+    };
+    // 得到原QrCode的大小，以便缩放得到正确的QrCode大小
+    const getOriginWidth = async (
+      content: string,
+      options: QRCodeRenderersOptions
+    ) => {
+      const _canvas = document.createElement("canvas");
+      await toCanvas(_canvas, content, options);
+      return _canvas.width;
+    };
+    // 对于内容少的QrCode，增大容错率
+    const getErrorCorrectionLevel = (content: string) => {
+      if (content.length > 36) {
+        return "M";
+      } else if (content.length > 16) {
+        return "Q";
+      } else {
+        return "H";
+      }
+    };
+    // 用于绘制圆角
+    const canvasRoundRect = (ctx: CanvasRenderingContext2D) => {
+      return (x: number, y: number, w: number, h: number, r: number) => {
+        const minSize = Math.min(w, h);
+        if (r > minSize / 2) {
+          r = minSize / 2;
+        }
+        ctx.beginPath();
+        ctx.moveTo(x + r, y);
+        ctx.arcTo(x + w, y, x + w, y + h, r);
+        ctx.arcTo(x + w, y + h, x, y + h, r);
+        ctx.arcTo(x, y + h, x, y, r);
+        ctx.arcTo(x, y, x + w, y, r);
+        ctx.closePath();
+        return ctx;
+      };
+    };
+    const clickCode = () => {
+      emit("click");
+    };
+    const disabledClick = () => {
+      emit("disabled-click");
+    };
+    return () => (
+      <>
+        <div
+          v-loading={unref(loading)}
+          class="qrcode relative inline-block"
+          style={unref(wrapStyle)}
+        >
+          {props.tag === "canvas" ? (
+            <canvas ref={wrapRef} onClick={clickCode}></canvas>
+          ) : (
+            <img ref={wrapRef} onClick={clickCode}></img>
+          )}
+          {props.disabled && (
+            <div
+              class="qrcode--disabled absolute top-0 left-0 flex w-full h-full items-center justify-center"
+              onClick={disabledClick}
+            >
+              <div class="absolute top-[50%] left-[50%] font-bold">
+                <iconify-icon-offline
+                  class="cursor-pointer"
+                  icon={RefreshRight}
+                  width="30"
+                  color="var(--el-color-primary)"
+                />
+                <div>{props.disabledText}</div>
+              </div>
+            </div>
+          )}
+        </div>
+      </>
+    );
+  }
+});
--- a/src/components/ReSegmented/index.ts
+++ b/src/components/ReSegmented/index.ts
@@ -0,0 +1,8 @@
+import reSegmented from "./src/index";
+import { withInstall } from "@pureadmin/utils";
+
+/** 分段控制器组件 */
+export const ReSegmented = withInstall(reSegmented);
+
+export default ReSegmented;
+export type { OptionsType } from "./src/type";
--- a/src/components/ReSegmented/src/index.css
+++ b/src/components/ReSegmented/src/index.css
@@ -0,0 +1,157 @@
+.pure-segmented {
+  --pure-control-padding-horizontal: 12px;
+  --pure-control-padding-horizontal-sm: 8px;
+  --pure-segmented-track-padding: 2px;
+  --pure-segmented-line-width: 1px;
+
+  --pure-segmented-border-radius-small: 4px;
+  --pure-segmented-border-radius-base: 6px;
+  --pure-segmented-border-radius-large: 8px;
+
+  box-sizing: border-box;
+  display: inline-block;
+  padding: var(--pure-segmented-track-padding);
+  font-size: var(--el-font-size-base);
+  color: rgba(0, 0, 0, 0.65);
+  background-color: rgb(0 0 0 / 4%);
+  border-radius: var(--pure-segmented-border-radius-base);
+}
+
+.pure-segmented-block {
+  display: flex;
+}
+
+.pure-segmented-block .pure-segmented-item {
+  flex: 1;
+  min-width: 0;
+}
+
+.pure-segmented-block .pure-segmented-item > .pure-segmented-item-label > span {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* small */
+.pure-segmented.pure-segmented--small {
+  border-radius: var(--pure-segmented-border-radius-small);
+}
+.pure-segmented.pure-segmented--small .pure-segmented-item {
+  border-radius: var(--el-border-radius-small);
+}
+.pure-segmented.pure-segmented--small .pure-segmented-item > div {
+  min-height: calc(
+    var(--el-component-size-small) - var(--pure-segmented-track-padding) * 2
+  );
+  line-height: calc(
+    var(--el-component-size-small) - var(--pure-segmented-track-padding) * 2
+  );
+  padding: 0
+    calc(
+      var(--pure-control-padding-horizontal-sm) -
+        var(--pure-segmented-line-width)
+    );
+}
+
+/* large */
+.pure-segmented.pure-segmented--large {
+  border-radius: var(--pure-segmented-border-radius-large);
+}
+.pure-segmented.pure-segmented--large .pure-segmented-item {
+  border-radius: calc(
+    var(--el-border-radius-base) + var(--el-border-radius-small)
+  );
+}
+.pure-segmented.pure-segmented--large .pure-segmented-item > div {
+  min-height: calc(
+    var(--el-component-size-large) - var(--pure-segmented-track-padding) * 2
+  );
+  line-height: calc(
+    var(--el-component-size-large) - var(--pure-segmented-track-padding) * 2
+  );
+  padding: 0
+    calc(
+      var(--pure-control-padding-horizontal) - var(--pure-segmented-line-width)
+    );
+  font-size: var(--el-font-size-medium);
+}
+
+/* default */
+.pure-segmented-item {
+  position: relative;
+  text-align: center;
+  cursor: pointer;
+  border-radius: var(--el-border-radius-base);
+  transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.pure-segmented .pure-segmented-item > div {
+  min-height: calc(
+    var(--el-component-size) - var(--pure-segmented-track-padding) * 2
+  );
+  line-height: calc(
+    var(--el-component-size) - var(--pure-segmented-track-padding) * 2
+  );
+  padding: 0
+    calc(
+      var(--pure-control-padding-horizontal) - var(--pure-segmented-line-width)
+    );
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  transition: 0.1s;
+}
+
+.pure-segmented-group {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  justify-items: flex-start;
+  width: 100%;
+}
+
+.pure-segmented-item-selected {
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  display: none;
+  width: 0;
+  height: 100%;
+  padding: 4px 0;
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow:
+    0 2px 8px -2px rgb(0 0 0 / 5%),
+    0 1px 4px -1px rgb(0 0 0 / 7%),
+    0 0 1px rgb(0 0 0 / 7%);
+  transition:
+    transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1),
+    width 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
+  will-change: transform, width;
+}
+
+.pure-segmented-item > input {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.pure-segmented-item-label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pure-segmented-item-icon svg {
+  width: 16px;
+  height: 16px;
+}
+
+.pure-segmented-item-disabled {
+  color: rgba(0, 0, 0, 0.25);
+  cursor: not-allowed;
+}
--- a/src/components/ReSegmented/src/index.tsx
+++ b/src/components/ReSegmented/src/index.tsx
@@ -0,0 +1,216 @@
+import "./index.css";
+import type { OptionsType } from "./type";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import {
+  useDark,
+  isNumber,
+  isFunction,
+  useResizeObserver
+} from "@pureadmin/utils";
+import {
+  type PropType,
+  h,
+  ref,
+  toRef,
+  watch,
+  nextTick,
+  defineComponent,
+  getCurrentInstance
+} from "vue";
+
+const props = {
+  options: {
+    type: Array<OptionsType>,
+    default: () => []
+  },
+  /** 默认选中，按照第一个索引为 `0` 的模式，可选（`modelValue`只有传`number`类型时才为响应式） */
+  modelValue: {
+    type: undefined,
+    require: false,
+    default: "0"
+  },
+  /** 将宽度调整为父元素宽度	 */
+  block: {
+    type: Boolean,
+    default: false
+  },
+  /** 控件尺寸 */
+  size: {
+    type: String as PropType<"small" | "default" | "large">
+  },
+  /** 是否全局禁用，默认 `false` */
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  /** 当内容发生变化时，设置 `resize` 可使其自适应容器位置 */
+  resize: {
+    type: Boolean,
+    default: false
+  }
+};
+
+export default defineComponent({
+  name: "ReSegmented",
+  props,
+  emits: ["change", "update:modelValue"],
+  setup(props, { emit }) {
+    const width = ref(0);
+    const translateX = ref(0);
+    const { isDark } = useDark();
+    const initStatus = ref(false);
+    const curMouseActive = ref(-1);
+    const segmentedItembg = ref("");
+    const instance = getCurrentInstance()!;
+    const curIndex = isNumber(props.modelValue)
+      ? toRef(props, "modelValue")
+      : ref(0);
+
+    function handleChange({ option, index }, event: Event) {
+      if (props.disabled || option.disabled) return;
+      event.preventDefault();
+      isNumber(props.modelValue)
+        ? emit("update:modelValue", index)
+        : (curIndex.value = index);
+      segmentedItembg.value = "";
+      emit("change", { index, option });
+    }
+
+    function handleMouseenter({ option, index }, event: Event) {
+      if (props.disabled) return;
+      event.preventDefault();
+      curMouseActive.value = index;
+      if (option.disabled || curIndex.value === index) {
+        segmentedItembg.value = "";
+      } else {
+        segmentedItembg.value = isDark.value
+          ? "#1f1f1f"
+          : "rgba(0, 0, 0, 0.06)";
+      }
+    }
+
+    function handleMouseleave(_, event: Event) {
+      if (props.disabled) return;
+      event.preventDefault();
+      curMouseActive.value = -1;
+    }
+
+    function handleInit(index = curIndex.value) {
+      nextTick(() => {
+        const curLabelRef = instance?.proxy?.$refs[`labelRef${index}`] as ElRef;
+        if (!curLabelRef) return;
+        width.value = curLabelRef.clientWidth;
+        translateX.value = curLabelRef.offsetLeft;
+        initStatus.value = true;
+      });
+    }
+
+    function handleResizeInit() {
+      useResizeObserver(".pure-segmented", () => {
+        nextTick(() => {
+          handleInit(curIndex.value);
+        });
+      });
+    }
+
+    (props.block || props.resize) && handleResizeInit();
+
+    watch(
+      () => curIndex.value,
+      index => {
+        nextTick(() => {
+          handleInit(index);
+        });
+      },
+      {
+        immediate: true
+      }
+    );
+
+    watch(() => props.size, handleResizeInit, {
+      immediate: true
+    });
+
+    const rendLabel = () => {
+      return props.options.map((option, index) => {
+        return (
+          <label
+            ref={`labelRef${index}`}
+            class={[
+              "pure-segmented-item",
+              (props.disabled || option?.disabled) &&
+                "pure-segmented-item-disabled"
+            ]}
+            style={{
+              background:
+                curMouseActive.value === index ? segmentedItembg.value : "",
+              color: props.disabled
+                ? null
+                : !option.disabled &&
+                    (curIndex.value === index || curMouseActive.value === index)
+                  ? isDark.value
+                    ? "rgba(255, 255, 255, 0.85)"
+                    : "rgba(0,0,0,.88)"
+                  : ""
+            }}
+            onMouseenter={event => handleMouseenter({ option, index }, event)}
+            onMouseleave={event => handleMouseleave({ option, index }, event)}
+            onClick={event => handleChange({ option, index }, event)}
+          >
+            <input type="radio" name="segmented" />
+            <div
+              class="pure-segmented-item-label"
+              v-tippy={{
+                content: option?.tip,
+                zIndex: 41000
+              }}
+            >
+              {option.icon && !isFunction(option.label) ? (
+                <span
+                  class="pure-segmented-item-icon"
+                  style={{ marginRight: option.label ? "6px" : 0 }}
+                >
+                  {h(
+                    useRenderIcon(option.icon, {
+                      ...option?.iconAttrs
+                    })
+                  )}
+                </span>
+              ) : null}
+              {option.label ? (
+                isFunction(option.label) ? (
+                  h(option.label)
+                ) : (
+                  <span>{option.label}</span>
+                )
+              ) : null}
+            </div>
+          </label>
+        );
+      });
+    };
+
+    return () => (
+      <div
+        class={{
+          "pure-segmented": true,
+          "pure-segmented-block": props.block,
+          "pure-segmented--large": props.size === "large",
+          "pure-segmented--small": props.size === "small"
+        }}
+      >
+        <div class="pure-segmented-group">
+          <div
+            class="pure-segmented-item-selected"
+            style={{
+              width: `${width.value}px`,
+              transform: `translateX(${translateX.value}px)`,
+              display: initStatus.value ? "block" : "none"
+            }}
+          ></div>
+          {rendLabel()}
+        </div>
+      </div>
+    );
+  }
+});
--- a/src/components/ReSegmented/src/type.ts
+++ b/src/components/ReSegmented/src/type.ts
@@ -0,0 +1,20 @@
+import type { VNode, Component } from "vue";
+import type { iconType } from "@/components/ReIcon/src/types.ts";
+
+export interface OptionsType {
+  /** 文字 */
+  label?: string | (() => VNode | Component);
+  /**
+   * @description 图标，采用平台内置的 `useRenderIcon` 函数渲染
+   * @see {@link 用法参考 https://pure-admin.cn/pages/icon/#%E9%80%9A%E7%94%A8%E5%9B%BE%E6%A0%87-userendericon-hooks }
+   */
+  icon?: string | Component;
+  /** 图标属性、样式配置 */
+  iconAttrs?: iconType;
+  /** 值 */
+  value?: any;
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** `tooltip` 提示 */
+  tip?: string;
+}
--- a/src/components/ReText/index.ts
+++ b/src/components/ReText/index.ts
@@ -0,0 +1,7 @@
+import reText from "./src/index.vue";
+import { withInstall } from "@pureadmin/utils";
+
+/** 支持`Tooltip`提示的文本省略组件 */
+export const ReText = withInstall(reText);
+
+export default ReText;
--- a/src/components/ReText/src/index.vue
+++ b/src/components/ReText/src/index.vue
@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+import { h, onMounted, ref, useSlots } from "vue";
+import { type TippyOptions, useTippy } from "vue-tippy";
+
+defineOptions({
+  name: "ReText"
+});
+
+const props = defineProps({
+  // 行数
+  lineClamp: {
+    type: [String, Number]
+  },
+  tippyProps: {
+    type: Object as PropType<TippyOptions>,
+    default: () => ({})
+  }
+});
+
+const $slots = useSlots();
+
+const textRef = ref();
+const tippyFunc = ref();
+
+const isTextEllipsis = (el: HTMLElement) => {
+  if (!props.lineClamp) {
+    // 单行省略判断
+    return el.scrollWidth > el.clientWidth;
+  } else {
+    // 多行省略判断
+    return el.scrollHeight > el.clientHeight;
+  }
+};
+
+const getTippyProps = () => ({
+  content: h($slots.content || $slots.default),
+  ...props.tippyProps
+});
+
+function handleHover(event: MouseEvent) {
+  if (isTextEllipsis(event.target as HTMLElement)) {
+    tippyFunc.value.setProps(getTippyProps());
+    tippyFunc.value.enable();
+  } else {
+    tippyFunc.value.disable();
+  }
+}
+
+onMounted(() => {
+  tippyFunc.value = useTippy(textRef.value?.$el, getTippyProps());
+});
+</script>
+
+<template>
+  <el-text
+    v-bind="{
+      truncated: !lineClamp,
+      lineClamp,
+      ...$attrs
+    }"
+    ref="textRef"
+    @mouseover.self="handleHover"
+  >
+    <slot />
+  </el-text>
+</template>
--- a/src/components/ReTypeit/index.ts
+++ b/src/components/ReTypeit/index.ts
@@ -0,0 +1,8 @@
+import typeIt from "./src/index";
+import type { Options as TypeItOptions } from "typeit";
+
+const TypeIt = typeIt;
+
+export { TypeIt, TypeItOptions };
+
+export default TypeIt;
--- a/src/components/ReTypeit/src/index.tsx
+++ b/src/components/ReTypeit/src/index.tsx
@@ -0,0 +1,56 @@
+import type { El } from "typeit/dist/types";
+import TypeIt, { type Options as TypeItOptions } from "typeit";
+import { type PropType, ref, defineComponent, onMounted } from "vue";
+
+// 打字机效果组件（配置项详情请查阅 https://www.typeitjs.com/docs/vanilla/usage#options）
+export default defineComponent({
+  name: "TypeIt",
+  props: {
+    options: {
+      type: Object as PropType<TypeItOptions>,
+      default: () => ({}) as TypeItOptions
+    }
+  },
+  setup(props, { slots, expose }) {
+    /**
+     * 输出错误信息
+     * @param message 错误信息
+     */
+    function throwError(message: string) {
+      throw new TypeError(message);
+    }
+
+    /**
+     * 获取浏览器默认语言
+     */
+    function getBrowserLanguage() {
+      return navigator.language;
+    }
+
+    const typedItRef = ref<Element | null>(null);
+
+    onMounted(() => {
+      const $typed = typedItRef.value!.querySelector(".type-it") as El;
+
+      if (!$typed) {
+        const errorMsg =
+          getBrowserLanguage() === "zh-CN"
+            ? "请确保有且只有一个具有class属性为 'type-it' 的元素"
+            : "Please make sure that there is only one element with a Class attribute with 'type-it'";
+        throwError(errorMsg);
+      }
+
+      const typeIt = new TypeIt($typed, props.options).go();
+
+      expose({
+        typeIt
+      });
+    });
+
+    return () => (
+      <div ref={typedItRef}>
+        {slots.default?.() ?? <span class="type-it"></span>}
+      </div>
+    );
+  }
+});