Merge branch 'main' into feat-user-settings

2025-12-09 14:40:27 +08:00 · 2024-04-07 10:39:06 +08:00
parent 4261790258 c0a1b918aa
commit dd09fda703
159 changed files with 2697 additions and 1489 deletions
--- a/src/components/ReAnimateSelector/index.ts
+++ b/src/components/ReAnimateSelector/index.ts
@@ -1,5 +1,5 @@
-import reAnimateSelector from "./src/index.vue";
 import { withInstall } from "@pureadmin/utils";
+import reAnimateSelector from "./src/index.vue";

 /** [animate.css](https://animate.style/) 选择器组件 */
 export const ReAnimateSelector = withInstall(reAnimateSelector);
--- a/src/components/ReBarcode/index.ts
+++ b/src/components/ReBarcode/index.ts
@@ -1,5 +1,5 @@
-import reBarcode from "./src/index.vue";
 import { withInstall } from "@pureadmin/utils";
+import reBarcode from "./src/index.vue";

 /** 条形码组件 */
 export const ReBarcode = withInstall(reBarcode);
--- a/src/components/ReCountTo/src/normal/index.tsx
+++ b/src/components/ReCountTo/src/normal/index.tsx
@@ -1,10 +1,10 @@
 import {
-  defineComponent,
-  reactive,
-  computed,
  watch,
+  unref,
+  computed,
+  reactive,
  onMounted,
-  unref
+  defineComponent
 } from "vue";
 import { countToProps } from "./props";
 import { isNumber } from "@pureadmin/utils";
--- a/src/components/ReCountTo/src/normal/props.ts
+++ b/src/components/ReCountTo/src/normal/props.ts
@@ -1,5 +1,6 @@
 import type { PropType } from "vue";
 import propTypes from "@/utils/propTypes";
+
 export const countToProps = {
  startVal: propTypes.number.def(0),
  endVal: propTypes.number.def(2020),
--- a/src/components/ReCountTo/src/rebound/index.tsx
+++ b/src/components/ReCountTo/src/rebound/index.tsx
@@ -1,9 +1,9 @@
 import "./rebound.css";
 import {
-  defineComponent,
  ref,
  unref,
  onBeforeMount,
+  defineComponent,
  onBeforeUnmount
 } from "vue";
 import { reboundProps } from "./props";
--- a/src/components/ReCountTo/src/rebound/props.ts
+++ b/src/components/ReCountTo/src/rebound/props.ts
@@ -1,5 +1,6 @@
 import type { PropType } from "vue";
 import propTypes from "@/utils/propTypes";
+
 export const reboundProps = {
  delay: propTypes.number.def(1),
  blur: propTypes.number.def(2),
--- a/src/components/ReCropper/src/index.tsx
+++ b/src/components/ReCropper/src/index.tsx
@@ -6,10 +6,10 @@ import { useEventListener } from "@vueuse/core";
 import { longpress } from "@/directives/longpress";
 import { useTippy, directive as tippy } from "vue-tippy";
 import {
+  type PropType,
  ref,
  unref,
  computed,
-  type PropType,
  onMounted,
  onUnmounted,
  defineComponent
--- a/src/components/ReDialog/index.ts
+++ b/src/components/ReDialog/index.ts
@@ -51,8 +51,8 @@ const closeAllDialog = () => {

 /** 千万别忘了在下面这三处引入并注册下，放心注册，不使用`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#L13
- * https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L20
+ * 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);

--- a/src/components/ReDialog/index.vue
+++ b/src/components/ReDialog/index.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import {
-  closeDialog,
-  dialogStore,
  type EventType,
  type ButtonProps,
-  type DialogOptions
+  type DialogOptions,
+  closeDialog,
+  dialogStore
 } from "./index";
 import { ref, computed } from "vue";
 import { isFunction } from "@pureadmin/utils";
@@ -37,6 +37,7 @@ const footerButtons = computed(() => {
            type: "primary",
            text: true,
            bg: true,
+            popconfirm: options?.popconfirm,
            btnClick: ({ dialog: { options, index } }) => {
              const done = () =>
                closeDialog(options, index, { command: "sure" });
@@ -149,19 +150,34 @@ function handleClose(
        <component :is="options?.footerRenderer({ options, index })" />
      </template>
      <span v-else>
-        <el-button
-          v-for="(btn, key) in footerButtons(options)"
-          :key="key"
-          v-bind="btn"
-          @click="
-            btn.btnClick({
-              dialog: { options, index },
-              button: { btn, index: key }
-            })
-          "
-        >
-          {{ btn?.label }}
-        </el-button>
+        <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"
+            @click="
+              btn.btnClick({
+                dialog: { options, index },
+                button: { btn, index: key }
+              })
+            "
+          >
+            {{ btn?.label }}
+          </el-button>
+        </template>
      </span>
    </template>
  </el-dialog>
--- a/src/components/ReDialog/type.ts
+++ b/src/components/ReDialog/type.ts
@@ -11,6 +11,13 @@ 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 = {
@@ -58,6 +65,34 @@ type DialogProps = {
  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;
@@ -86,6 +121,8 @@ type ButtonProps = {
  round?: boolean;
  /** 是否为圆形按钮，默认 `false` */
  circle?: boolean;
+  /** 确认按钮的 `Popconfirm` 气泡确认框相关配置 */
+  popconfirm?: Popconfirm;
  /** 是否为加载中状态，默认 `false` */
  loading?: boolean;
  /** 自定义加载中状态图标组件 */
@@ -123,6 +160,8 @@ interface DialogOptions extends DialogProps {
  props?: any;
  /** 是否隐藏 `Dialog` 按钮操作区的内容 */
  hideFooter?: boolean;
+  /** 确认按钮的 `Popconfirm` 气泡确认框相关配置 */
+  popconfirm?: Popconfirm;
  /**
   * @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}
--- a/src/components/ReFlicker/index.ts
+++ b/src/components/ReFlicker/index.ts
@@ -1,5 +1,5 @@
 import "./index.css";
-import { h, defineComponent, type Component } from "vue";
+import { type Component, h, defineComponent } from "vue";

 export interface attrsType {
  width?: string;
--- a/src/components/ReFlop/src/filpper.tsx
+++ b/src/components/ReFlop/src/filpper.tsx
@@ -1,6 +1,6 @@
-import { defineComponent, ref } from "vue";
-import propTypes from "@/utils/propTypes";
 import "./filpper.css";
+import propTypes from "@/utils/propTypes";
+import { defineComponent, ref } from "vue";

 const props = {
  // front paper text
--- a/src/components/ReFlop/src/index.vue
+++ b/src/components/ReFlop/src/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref, unref, nextTick, onUnmounted } from "vue";
 import flippers from "./filpper";
+import { ref, unref, nextTick, onUnmounted } from "vue";

 const timer = ref(null);
 const flipObjs = ref([]);
--- a/src/components/ReFlowChart/src/Control.vue
+++ b/src/components/ReFlowChart/src/Control.vue
@@ -105,27 +105,24 @@ onMounted(() => {
        @mouseenter.prevent="onEnter(key)"
        @mouseleave.prevent="focusIndex = -1"
      >
-        <el-tooltip
-          :content="item.text"
-          :visible="focusIndex === key"
-          placement="right"
+        <button
+          :ref="'controlButton' + key"
+          v-tippy="{
+            content: item.text
+          }"
+          :disabled="item.disabled"
+          :style="{
+            cursor: item.disabled === false ? 'pointer' : 'not-allowed',
+            color: item.disabled === false ? '' : '#00000040',
+            background: 'transparent'
+          }"
+          @click="onControl(item, key)"
        >
-          <button
-            :ref="'controlButton' + key"
-            :disabled="item.disabled"
-            :style="{
-              cursor: item.disabled === false ? 'pointer' : 'not-allowed',
-              color: item.disabled === false ? '' : '#00000040',
-              background: 'transparent'
-            }"
-            @click="onControl(item, key)"
-          >
-            <span
-              :class="'iconfont ' + item.icon"
-              :style="{ fontSize: `${item.size}px` }"
-            />
-          </button>
-        </el-tooltip>
+          <span
+            :class="'iconfont ' + item.icon"
+            :style="{ fontSize: `${item.size}px` }"
+          />
+        </button>
      </li>
    </ul>
  </div>
--- a/src/components/ReIcon/src/offlineIcon.ts
+++ b/src/components/ReIcon/src/offlineIcon.ts
@@ -31,6 +31,7 @@ import Links from "@iconify-icons/ri/links-fill";
 import Search from "@iconify-icons/ri/search-line";
 import FlUser from "@iconify-icons/ri/admin-line";
 import Setting from "@iconify-icons/ri/settings-3-line";
+import MindMap from "@iconify-icons/ri/mind-map";
 import BarChart from "@iconify-icons/ri/bar-chart-horizontal-line";
 import LoginLog from "@iconify-icons/ri/window-line";
 import Artboard from "@iconify-icons/ri/artboard-line";
@@ -54,6 +55,7 @@ addIcon("ri:table-line", Table);
 addIcon("ri:search-line", Search);
 addIcon("ri:admin-line", FlUser);
 addIcon("ri:settings-3-line", Setting);
+addIcon("ri:mind-map", MindMap);
 addIcon("ri:bar-chart-horizontal-line", BarChart);
 addIcon("ri:window-line", LoginLog);
 addIcon("ri:file-search-line", SystemLog);
--- a/src/components/RePureTableBar/src/bar.tsx
+++ b/src/components/RePureTableBar/src/bar.tsx
@@ -1,3 +1,5 @@
+import Sortable from "sortablejs";
+import { transformI18n } from "@/plugins/i18n";
 import { useEpThemeStoreHook } from "@/store/modules/epTheme";
 import { defineComponent, ref, computed, type PropType, nextTick } from "vue";
 import {
@@ -8,7 +10,6 @@ import {
  getKeyList
 } from "@pureadmin/utils";

-import Sortable from "sortablejs";
 import DragIcon from "./svg/drag.svg?component";
 import ExpandIcon from "./svg/expand.svg?component";
 import RefreshIcon from "./svg/refresh.svg?component";
@@ -118,6 +119,7 @@ export default defineComponent({
    }

    function handleCheckedColumnsChange(value: string[]) {
+      checkedColumns.value = value;
      const checkedCount = value.length;
      checkAll.value = checkedCount === checkColumnList.length;
      isIndeterminate.value =
@@ -125,7 +127,9 @@ export default defineComponent({
    }

    function handleCheckColumnListChange(val: boolean, label: string) {
-      dynamicColumns.value.filter(item => item.label === label)[0].hide = !val;
+      dynamicColumns.value.filter(
+        item => transformI18n(item.label) === transformI18n(label)
+      )[0].hide = !val;
    }

    async function onReset() {
@@ -198,7 +202,9 @@ export default defineComponent({
    };

    const isFixedColumn = (label: string) => {
-      return dynamicColumns.value.filter(item => item.label === label)[0].fixed
+      return dynamicColumns.value.filter(
+        item => transformI18n(item.label) === transformI18n(label)
+      )[0].fixed
        ? true
        : false;
    };
@@ -293,7 +299,7 @@ export default defineComponent({
                <div class="pt-[6px] pl-[11px]">
                  <el-scrollbar max-height="36vh">
                    <el-checkbox-group
-                      v-model={checkedColumns.value}
+                      modelValue={checkedColumns.value}
                      onChange={value => handleCheckedColumnsChange(value)}
                    >
                      <el-space
@@ -301,7 +307,7 @@ export default defineComponent({
                        alignment="flex-start"
                        size={0}
                      >
-                        {checkColumnList.map(item => {
+                        {checkColumnList.map((item, index) => {
                          return (
                            <div class="flex items-center">
                              <DragIcon
@@ -316,17 +322,18 @@ export default defineComponent({
                                }) => rowDrop(event)}
                              />
                              <el-checkbox
-                                key={item}
+                                key={index}
+                                label={item}
                                value={item}
                                onChange={value =>
                                  handleCheckColumnListChange(value, item)
                                }
                              >
                                <span
-                                  title={item}
+                                  title={transformI18n(item)}
                                  class="inline-block w-[120px] truncate hover:text-text_color_primary"
                                >
-                                  {item}
+                                  {transformI18n(item)}
                                </span>
                              </el-checkbox>
                            </div>
--- a/src/components/ReQrcode/src/index.tsx
+++ b/src/components/ReQrcode/src/index.tsx
@@ -1,10 +1,10 @@
 import {
+  type PropType,
  ref,
  unref,
  watch,
  nextTick,
  computed,
-  type PropType,
  defineComponent
 } from "vue";
 import "./index.scss";
--- a/src/components/ReSeamlessScroll/src/index.vue
+++ b/src/components/ReSeamlessScroll/src/index.vue
@@ -1,6 +1,12 @@
 <script setup lang="ts">
-import { computed, ref, unref, nextTick } from "vue";
-import type { CSSProperties, PropType } from "vue";
+import {
+  type PropType,
+  type CSSProperties,
+  ref,
+  unref,
+  nextTick,
+  computed
+} from "vue";
 import {
  tryOnMounted,
  tryOnUnmounted,
--- a/src/components/ReSegmented/src/index.tsx
+++ b/src/components/ReSegmented/src/index.tsx
@@ -34,9 +34,14 @@ const props = {
    type: Boolean,
    default: false
  },
-  /** 控件尺寸	 */
+  /** 控件尺寸 */
  size: {
    type: String as PropType<"small" | "default" | "large">
+  },
+  /** 是否全局禁用，默认 `false` */
+  disabled: {
+    type: Boolean,
+    default: false
  }
 };

@@ -57,7 +62,7 @@ export default defineComponent({
      : ref(0);

    function handleChange({ option, index }, event: Event) {
-      if (option.disabled) return;
+      if (props.disabled || option.disabled) return;
      event.preventDefault();
      isNumber(props.modelValue)
        ? emit("update:modelValue", index)
@@ -67,6 +72,7 @@ export default defineComponent({
    }

    function handleMouseenter({ option, index }, event: Event) {
+      if (props.disabled) return;
      event.preventDefault();
      curMouseActive.value = index;
      if (option.disabled || curIndex.value === index) {
@@ -79,6 +85,7 @@ export default defineComponent({
    }

    function handleMouseleave(_, event: Event) {
+      if (props.disabled) return;
      event.preventDefault();
      curMouseActive.value = -1;
    }
@@ -124,14 +131,16 @@ export default defineComponent({
            ref={`labelRef${index}`}
            class={[
              "pure-segmented-item",
-              option?.disabled && "pure-segmented-item-disabled"
+              (props.disabled || option?.disabled) &&
+                "pure-segmented-item-disabled"
            ]}
            style={{
              background:
                curMouseActive.value === index ? segmentedItembg.value : "",
-              color:
-                !option.disabled &&
-                (curIndex.value === index || curMouseActive.value === index)
+              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)"
--- a/src/components/ReSelector/src/index.tsx
+++ b/src/components/ReSelector/src/index.tsx
@@ -1,13 +1,13 @@
+import "./index.css";
 import {
-  defineComponent,
+  unref,
  computed,
  nextTick,
  onBeforeMount,
-  getCurrentInstance,
-  unref
+  defineComponent,
+  getCurrentInstance
 } from "vue";
 import { addClass, removeClass, toggleClass } from "@pureadmin/utils";
-import "./index.css";

 const stayClass = "stay"; //鼠标点击
 const activeClass = "hs-on"; //鼠标移动上去
--- a/src/components/ReSplitPane/index.tsx
+++ b/src/components/ReSplitPane/index.tsx
@@ -1,6 +1,6 @@
-import { defineComponent, ref, unref, computed, type PropType } from "vue";
-import resizer from "./resizer";
 import "./index.css";
+import resizer from "./resizer";
+import { type PropType, defineComponent, ref, unref, computed } from "vue";

 export interface ContextProps {
  minPercent: number;
--- a/src/components/ReSplitPane/resizer.tsx
+++ b/src/components/ReSplitPane/resizer.tsx
@@ -1,5 +1,5 @@
-import { computed, unref, defineComponent } from "vue";
 import "./resizer.css";
+import { computed, unref, defineComponent } from "vue";

 export default defineComponent({
  name: "Resizer",
--- a/src/components/ReText/src/index.vue
+++ b/src/components/ReText/src/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { h, onMounted, ref, useSlots } from "vue";
-import { useTippy, type TippyOptions } from "vue-tippy";
+import { type TippyOptions, useTippy } from "vue-tippy";

 const props = defineProps({
  // 行数
--- a/src/components/ReTreeLine/index.ts
+++ b/src/components/ReTreeLine/index.ts
@@ -1,8 +1,7 @@
 // 参考https://www.npmjs.com/package/element-tree-line (主要是替换需要通过函数传参的方式去注册组件，并添加更好的类型支持，并移除this.$scopedSlots，在3.x中,将所有this.$scopedSlots替换为this.$slots)
-import { isFunction } from "@pureadmin/utils";
-import { h, defineComponent } from "vue";
-import type { PropType } from "vue";
 import "./index.scss";
+import { isFunction } from "@pureadmin/utils";
+import { type PropType, h, defineComponent } from "vue";
 import type {
  TreeNode,
  TreeData,
--- a/src/components/ReTypeit/src/index.tsx
+++ b/src/components/ReTypeit/src/index.tsx
@@ -1,6 +1,6 @@
 import type { El } from "typeit/dist/types";
 import TypeIt, { type Options as TypeItOptions } from "typeit";
-import { ref, defineComponent, onMounted, type PropType } from "vue";
+import { type PropType, ref, defineComponent, onMounted } from "vue";

 // 打字机效果组件（配置项详情请查阅 https://www.typeitjs.com/docs/vanilla/usage#options）
 export default defineComponent({
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -1,5 +1,5 @@
-import type { App } from "vue";
 import axios from "axios";
+import type { App } from "vue";

 let config: object = {};
 const { VITE_PUBLIC_PATH } = import.meta.env;
--- a/src/directives/optimize/index.ts
+++ b/src/directives/optimize/index.ts
@@ -1,9 +1,9 @@
 import {
-  isFunction,
-  isObject,
  isArray,
+  throttle,
  debounce,
-  throttle
+  isObject,
+  isFunction
 } from "@pureadmin/utils";
 import { useEventListener } from "@vueuse/core";
 import type { Directive, DirectiveBinding } from "vue";
--- a/src/layout/components/navbar.vue
+++ b/src/layout/components/navbar.vue
@@ -106,14 +106,14 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
                :icon="LogoutCircleRLine"
                style="margin: 5px"
              />
-              {{ t("buttons.hsLoginOut") }}
+              {{ t("buttons.pureLoginOut") }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <span
        class="set-icon navbar-bg-hover"
-        :title="t('buttons.hssystemSet')"
+        :title="t('buttons.pureSystemSet')"
        @click="onPanel"
      >
        <IconifyIconOffline :icon="Setting" />
--- a/src/layout/components/sidebar/horizontal.vue
+++ b/src/layout/components/sidebar/horizontal.vue
@@ -119,14 +119,14 @@ nextTick(() => {
                :icon="LogoutCircleRLine"
                style="margin: 5px"
              />
-              {{ t("buttons.hsLoginOut") }}
+              {{ t("buttons.pureLoginOut") }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <span
        class="set-icon navbar-bg-hover"
-        :title="t('buttons.hssystemSet')"
+        :title="t('buttons.pureSystemSet')"
        @click="onPanel"
      >
        <IconifyIconOffline :icon="Setting" />
--- a/src/layout/components/sidebar/mixNav.vue
+++ b/src/layout/components/sidebar/mixNav.vue
@@ -152,14 +152,14 @@ watch(
                :icon="LogoutCircleRLine"
                style="margin: 5px"
              />
-              {{ t("buttons.hsLoginOut") }}
+              {{ t("buttons.pureLoginOut") }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <span
        class="set-icon navbar-bg-hover"
-        :title="t('buttons.hssystemSet')"
+        :title="t('buttons.pureSystemSet')"
        @click="onPanel"
      >
        <IconifyIconOffline :icon="Setting" />
--- a/src/layout/components/tag/index.vue
+++ b/src/layout/components/tag/index.vue
@@ -333,10 +333,10 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
      setTimeout(() => {
        if (pureSetting.hiddenSideBar) {
          tagsViews[6].icon = ExitFullscreen;
-          tagsViews[6].text = $t("buttons.hscontentExitFullScreen");
+          tagsViews[6].text = $t("buttons.pureContentExitFullScreen");
        } else {
          tagsViews[6].icon = Fullscreen;
-          tagsViews[6].text = $t("buttons.hscontentFullScreen");
+          tagsViews[6].text = $t("buttons.pureContentFullScreen");
        }
      }, 100);
      break;
--- a/src/layout/frameView.vue
+++ b/src/layout/frameView.vue
@@ -71,7 +71,7 @@ onMounted(() => {
  <div
    v-loading="loading"
    class="frame"
-    :element-loading-text="t('status.hsLoad')"
+    :element-loading-text="t('status.pureLoad')"
  >
    <iframe ref="frameRef" :src="frameSrc" class="frame-iframe" />
  </div>
--- a/src/layout/hooks/useTag.ts
+++ b/src/layout/hooks/useTag.ts
@@ -64,49 +64,49 @@ export function useTags() {
  const tagsViews = reactive<Array<tagsViewsType>>([
    {
      icon: RefreshRight,
-      text: $t("buttons.hsreload"),
+      text: $t("buttons.pureReload"),
      divided: false,
      disabled: false,
      show: true
    },
    {
      icon: Close,
-      text: $t("buttons.hscloseCurrentTab"),
+      text: $t("buttons.pureCloseCurrentTab"),
      divided: false,
      disabled: multiTags.value.length > 1 ? false : true,
      show: true
    },
    {
      icon: CloseLeftTags,
-      text: $t("buttons.hscloseLeftTabs"),
+      text: $t("buttons.pureCloseLeftTabs"),
      divided: true,
      disabled: multiTags.value.length > 1 ? false : true,
      show: true
    },
    {
      icon: CloseRightTags,
-      text: $t("buttons.hscloseRightTabs"),
+      text: $t("buttons.pureCloseRightTabs"),
      divided: false,
      disabled: multiTags.value.length > 1 ? false : true,
      show: true
    },
    {
      icon: CloseOtherTags,
-      text: $t("buttons.hscloseOtherTabs"),
+      text: $t("buttons.pureCloseOtherTabs"),
      divided: true,
      disabled: multiTags.value.length > 2 ? false : true,
      show: true
    },
    {
      icon: CloseAllTags,
-      text: $t("buttons.hscloseAllTabs"),
+      text: $t("buttons.pureCloseAllTabs"),
      divided: false,
      disabled: multiTags.value.length > 1 ? false : true,
      show: true
    },
    {
      icon: Fullscreen,
-      text: $t("buttons.hscontentFullScreen"),
+      text: $t("buttons.pureContentFullScreen"),
      divided: true,
      disabled: false,
      show: true
--- a/src/layout/types.ts
+++ b/src/layout/types.ts
@@ -7,7 +7,7 @@ export const routerArrays: Array<RouteConfigs> =
        {
          path: "/welcome",
          meta: {
-            title: "menus.hshome",
+            title: "menus.pureHome",
            icon: "ep:home-filled"
          }
        }
--- a/src/router/enums.ts
+++ b/src/router/enums.ts
@@ -22,8 +22,9 @@ const home = 0, // 平台规定只有 home 路由的 rank 才能为 0 ，所以
  formdesign = 19,
  board = 20,
  ppt = 21,
-  guide = 22,
-  menuoverflow = 23;
+  mind = 22,
+  guide = 23,
+  menuoverflow = 24;

 export {
  home,
@@ -48,6 +49,7 @@ export {
  formdesign,
  board,
  ppt,
+  mind,
  guide,
  menuoverflow
 };
--- a/src/router/modules/able.ts
+++ b/src/router/modules/able.ts
@@ -6,17 +6,25 @@ export default {
  redirect: "/able/watermark",
  meta: {
    icon: "ri:ubuntu-fill",
-    title: $t("menus.hsAble"),
+    title: $t("menus.pureAble"),
    rank: able
  },
  children: [
+    {
+      path: "/able/mqtt-client",
+      name: "MqttClient",
+      component: () => import("@/views/able/mqtt-client.vue"),
+      meta: {
+        title: $t("menus.pureMqtt"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    },
    {
      path: "/able/verify",
      name: "Verify",
      component: () => import("@/views/able/verify.vue"),
      meta: {
-        title: $t("menus.hsVerify"),
-        extraIcon: "IF-pure-iconfont-new svg"
+        title: $t("menus.pureVerify")
      }
    },
    {
@@ -24,7 +32,7 @@ export default {
      name: "WaterMark",
      component: () => import("@/views/able/watermark.vue"),
      meta: {
-        title: $t("menus.hsWatermark")
+        title: $t("menus.pureWatermark")
      }
    },
    {
@@ -32,7 +40,7 @@ export default {
      name: "Print",
      component: () => import("@/views/able/print/index.vue"),
      meta: {
-        title: $t("menus.hsPrint")
+        title: $t("menus.purePrint")
      }
    },
    {
@@ -40,7 +48,7 @@ export default {
      name: "Download",
      component: () => import("@/views/able/download.vue"),
      meta: {
-        title: $t("menus.hsDownload")
+        title: $t("menus.pureDownload")
      }
    },
    {
@@ -48,7 +56,7 @@ export default {
      name: "Excel",
      component: () => import("@/views/able/excel.vue"),
      meta: {
-        title: $t("menus.hsExcel")
+        title: $t("menus.pureExcel")
      }
    },
    {
@@ -56,8 +64,7 @@ export default {
      name: "Ripple",
      component: () => import("@/views/able/ripple.vue"),
      meta: {
-        title: $t("menus.hsRipple"),
-        extraIcon: "IF-pure-iconfont-new svg"
+        title: $t("menus.pureRipple")
      }
    },
    {
@@ -65,7 +72,7 @@ export default {
      name: "Debounce",
      component: () => import("@/views/able/debounce.vue"),
      meta: {
-        title: $t("menus.hsDebounce")
+        title: $t("menus.pureDebounce")
      }
    },
    {
@@ -73,7 +80,7 @@ export default {
      name: "Directives",
      component: () => import("@/views/able/directives.vue"),
      meta: {
-        title: $t("menus.hsOptimize")
+        title: $t("menus.pureOptimize")
      }
    },
    {
@@ -81,7 +88,7 @@ export default {
      name: "Draggable",
      component: () => import("@/views/able/draggable.vue"),
      meta: {
-        title: $t("menus.hsdraggable"),
+        title: $t("menus.pureDraggable"),
        transition: {
          enterTransition: "animate__zoomIn",
          leaveTransition: "animate__zoomOut"
@@ -93,7 +100,7 @@ export default {
      name: "Word",
      component: () => import("@/views/able/word.vue"),
      meta: {
-        title: $t("menus.hsWord")
+        title: $t("menus.pureWord")
      }
    },
    {
@@ -101,7 +108,7 @@ export default {
      name: "Excels",
      component: () => import("@/views/able/excels.vue"),
      meta: {
-        title: $t("menus.hsExcels")
+        title: $t("menus.pureExcels")
      }
    },
    {
@@ -109,7 +116,7 @@ export default {
      name: "Pdf",
      component: () => import("@/views/able/pdf.vue"),
      meta: {
-        title: $t("menus.hsPdf")
+        title: $t("menus.purePdf")
      }
    },
    {
@@ -117,7 +124,7 @@ export default {
      name: "BarCode",
      component: () => import("@/views/able/barcode.vue"),
      meta: {
-        title: $t("menus.hsBarcode")
+        title: $t("menus.pureBarcode")
      }
    },
    {
@@ -125,7 +132,7 @@ export default {
      name: "QrCode",
      component: () => import("@/views/able/qrcode.vue"),
      meta: {
-        title: $t("menus.hsQrcode")
+        title: $t("menus.pureQrcode")
      }
    },
    {
@@ -133,7 +140,7 @@ export default {
      name: "MapPage",
      component: () => import("@/views/able/map.vue"),
      meta: {
-        title: $t("menus.hsmap"),
+        title: $t("menus.pureMap"),
        keepAlive: true,
        transition: {
          name: "fade"
@@ -145,7 +152,7 @@ export default {
      name: "Wavesurfer",
      component: () => import("@/views/able/wavesurfer/index.vue"),
      meta: {
-        title: $t("menus.hsWavesurfer")
+        title: $t("menus.pureWavesurfer")
      }
    },
    {
@@ -153,7 +160,7 @@ export default {
      name: "VideoPage",
      component: () => import("@/views/able/video.vue"),
      meta: {
-        title: $t("menus.hsvideo")
+        title: $t("menus.pureVideo")
      }
    },
    {
@@ -161,7 +168,7 @@ export default {
      name: "VideoFrame",
      component: () => import("@/views/able/video-frame/index.vue"),
      meta: {
-        title: $t("menus.hsVideoFrame")
+        title: $t("menus.pureVideoFrame")
      }
    },
    {
@@ -169,7 +176,7 @@ export default {
      name: "Danmaku",
      component: () => import("@/views/able/danmaku/index.vue"),
      meta: {
-        title: $t("menus.hsdanmaku")
+        title: $t("menus.pureDanmaku")
      }
    },
    {
@@ -177,7 +184,7 @@ export default {
      name: "InfiniteScroll",
      component: () => import("@/views/able/infinite-scroll.vue"),
      meta: {
-        title: $t("menus.hsInfiniteScroll")
+        title: $t("menus.pureInfiniteScroll")
      }
    },
    {
@@ -185,7 +192,7 @@ export default {
      name: "MenuTree",
      component: () => import("@/views/able/menu-tree.vue"),
      meta: {
-        title: $t("menus.hsMenuTree")
+        title: $t("menus.pureMenuTree")
      }
    },
    {
@@ -193,7 +200,7 @@ export default {
      name: "LineTree",
      component: () => import("@/views/able/line-tree.vue"),
      meta: {
-        title: $t("menus.hsLineTree")
+        title: $t("menus.pureLineTree")
      }
    },
    {
@@ -201,7 +208,7 @@ export default {
      name: "Typeit",
      component: () => import("@/views/able/typeit.vue"),
      meta: {
-        title: $t("menus.hstypeit")
+        title: $t("menus.pureTypeit")
      }
    },
    {
@@ -209,7 +216,7 @@ export default {
      name: "Sensitive",
      component: () => import("@/views/able/sensitive.vue"),
      meta: {
-        title: $t("menus.hsSensitive")
+        title: $t("menus.pureSensitive")
      }
    },
    {
@@ -217,7 +224,7 @@ export default {
      name: "Pinyin",
      component: () => import("@/views/able/pinyin.vue"),
      meta: {
-        title: $t("menus.hsPinyin")
+        title: $t("menus.purePinyin")
      }
    }
  ]
--- a/src/router/modules/about.ts
+++ b/src/router/modules/about.ts
@@ -6,7 +6,7 @@ export default {
  redirect: "/about/index",
  meta: {
    icon: "ri:file-info-line",
-    title: $t("menus.hsAbout"),
+    title: $t("menus.pureAbout"),
    rank: about
  },
  children: [
@@ -15,7 +15,7 @@ export default {
      name: "About",
      component: () => import("@/views/about/index.vue"),
      meta: {
-        title: $t("menus.hsAbout")
+        title: $t("menus.pureAbout")
      }
    }
  ]
--- a/src/router/modules/board.ts
+++ b/src/router/modules/board.ts
@@ -7,7 +7,7 @@ export default {
  redirect: "/board/index",
  meta: {
    icon: "ri:artboard-line",
-    title: $t("menus.hsboard"),
+    title: $t("menus.pureBoard"),
    rank: board
  },
  children: [
@@ -16,7 +16,8 @@ export default {
      name: "FrameBoard",
      component: IFrame,
      meta: {
-        title: $t("menus.hsboard"),
+        title: $t("menus.pureBoard"),
+        keepAlive: true,
        frameSrc: "https://songlh.top/paint-board/"
      }
    }
--- a/src/router/modules/components.ts
+++ b/src/router/modules/components.ts
@@ -6,7 +6,7 @@ export default {
  redirect: "/components/dialog",
  meta: {
    icon: "ep:menu",
-    title: $t("menus.hscomponents"),
+    title: $t("menus.pureComponents"),
    rank: components
  },
  children: [
@@ -15,7 +15,7 @@ export default {
      name: "DialogPage",
      component: () => import("@/views/components/dialog/index.vue"),
      meta: {
-        title: $t("menus.hsdialog")
+        title: $t("menus.pureDialog")
      }
    },
    {
@@ -23,7 +23,7 @@ export default {
      name: "Message",
      component: () => import("@/views/components/message.vue"),
      meta: {
-        title: $t("menus.hsmessage")
+        title: $t("menus.pureMessage")
      }
    },
    {
@@ -31,7 +31,7 @@ export default {
      name: "PureUpload",
      component: () => import("@/views/components/upload/index.vue"),
      meta: {
-        title: $t("menus.hsUpload")
+        title: $t("menus.pureUpload")
      }
    },
    {
@@ -39,7 +39,7 @@ export default {
      name: "CheckCard",
      component: () => import("@/views/components/check-card.vue"),
      meta: {
-        title: $t("menus.hsCheckCard"),
+        title: $t("menus.pureCheckCard"),
        extraIcon: "IF-pure-iconfont-new svg"
      }
    },
@@ -48,7 +48,7 @@ export default {
      name: "DatePicker",
      component: () => import("@/views/components/date-picker.vue"),
      meta: {
-        title: $t("menus.hsDatePicker")
+        title: $t("menus.pureDatePicker")
      }
    },
    {
@@ -56,7 +56,7 @@ export default {
      name: "DateTimePicker",
      component: () => import("@/views/components/datetime-picker.vue"),
      meta: {
-        title: $t("menus.hsDateTimePicker")
+        title: $t("menus.pureDateTimePicker")
      }
    },
    {
@@ -64,7 +64,7 @@ export default {
      name: "TimePicker",
      component: () => import("@/views/components/time-picker.vue"),
      meta: {
-        title: $t("menus.hsTimePicker")
+        title: $t("menus.pureTimePicker")
      }
    },
    {
@@ -72,7 +72,7 @@ export default {
      name: "IconSelect",
      component: () => import("@/views/components/icon-select.vue"),
      meta: {
-        title: $t("menus.hsIconSelect")
+        title: $t("menus.pureIconSelect")
      }
    },
    {
@@ -80,7 +80,7 @@ export default {
      name: "AnimateCss",
      component: () => import("@/views/components/animatecss.vue"),
      meta: {
-        title: $t("menus.hsanimatecss")
+        title: $t("menus.pureAnimatecss")
      }
    },
    {
@@ -88,7 +88,7 @@ export default {
      name: "Cropping",
      component: () => import("@/views/components/cropping/index.vue"),
      meta: {
-        title: $t("menus.hscropping")
+        title: $t("menus.pureCropping")
      }
    },
    {
@@ -96,7 +96,7 @@ export default {
      name: "Segmented",
      component: () => import("@/views/components/segmented.vue"),
      meta: {
-        title: $t("menus.hssegmented")
+        title: $t("menus.pureSegmented")
      }
    },
    {
@@ -104,7 +104,7 @@ export default {
      name: "PureText",
      component: () => import("@/views/components/text.vue"),
      meta: {
-        title: $t("menus.hsText"),
+        title: $t("menus.pureText"),
        extraIcon: "IF-pure-iconfont-new svg"
      }
    },
@@ -113,7 +113,7 @@ export default {
      name: "PureButton",
      component: () => import("@/views/components/el-button.vue"),
      meta: {
-        title: $t("menus.hsElButton")
+        title: $t("menus.pureElButton")
      }
    },
    {
@@ -121,7 +121,7 @@ export default {
      name: "CheckButton",
      component: () => import("@/views/components/check-button.vue"),
      meta: {
-        title: $t("menus.hsCheckButton"),
+        title: $t("menus.pureCheckButton"),
        extraIcon: "IF-pure-iconfont-new svg"
      }
    },
@@ -130,7 +130,7 @@ export default {
      name: "ButtonPage",
      component: () => import("@/views/components/button.vue"),
      meta: {
-        title: $t("menus.hsbutton")
+        title: $t("menus.pureButton")
      }
    },
    {
@@ -138,7 +138,7 @@ export default {
      name: "PureProgress",
      component: () => import("@/views/components/progress.vue"),
      meta: {
-        title: $t("menus.hsProgress")
+        title: $t("menus.pureProgress")
      }
    },
    {
@@ -146,7 +146,7 @@ export default {
      name: "PureTag",
      component: () => import("@/views/components/tag.vue"),
      meta: {
-        title: $t("menus.hsTag")
+        title: $t("menus.pureTag")
      }
    },
    {
@@ -154,7 +154,7 @@ export default {
      name: "Statistic",
      component: () => import("@/views/components/statistic.vue"),
      meta: {
-        title: $t("menus.hsStatistic")
+        title: $t("menus.pureStatistic")
      }
    },
    {
@@ -162,7 +162,7 @@ export default {
      name: "Collapse",
      component: () => import("@/views/components/collapse.vue"),
      meta: {
-        title: $t("menus.hsCollapse")
+        title: $t("menus.pureCollapse")
      }
    },
    {
@@ -170,7 +170,7 @@ export default {
      name: "Cascader",
      component: () => import("@/views/components/cascader.vue"),
      meta: {
-        title: $t("menus.hsCascader")
+        title: $t("menus.pureCascader")
      }
    },
    {
@@ -178,7 +178,7 @@ export default {
      name: "ColorPicker",
      component: () => import("@/views/components/color-picker.vue"),
      meta: {
-        title: $t("menus.hsColorPicker")
+        title: $t("menus.pureColorPicker")
      }
    },
    {
@@ -186,7 +186,7 @@ export default {
      name: "Selector",
      component: () => import("@/views/components/selector.vue"),
      meta: {
-        title: $t("menus.hsselector")
+        title: $t("menus.pureSelector")
      }
    },
    {
@@ -194,7 +194,7 @@ export default {
      name: "Waterfall",
      component: () => import("@/views/components/waterfall/index.vue"),
      meta: {
-        title: $t("menus.hswaterfall")
+        title: $t("menus.pureWaterfall")
      }
    },
    {
@@ -202,7 +202,7 @@ export default {
      name: "SplitPane",
      component: () => import("@/views/components/split-pane.vue"),
      meta: {
-        title: $t("menus.hssplitPane")
+        title: $t("menus.pureSplitPane")
      }
    },
    {
@@ -210,7 +210,7 @@ export default {
      name: "Swiper",
      component: () => import("@/views/components/swiper.vue"),
      meta: {
-        title: $t("menus.hsSwiper")
+        title: $t("menus.pureSwiper")
      }
    },
    {
@@ -218,7 +218,7 @@ export default {
      name: "TimeLine",
      component: () => import("@/views/components/timeline.vue"),
      meta: {
-        title: $t("menus.hsTimeline")
+        title: $t("menus.pureTimeline")
      }
    },
    {
@@ -226,7 +226,7 @@ export default {
      name: "CountTo",
      component: () => import("@/views/components/count-to.vue"),
      meta: {
-        title: $t("menus.hscountTo")
+        title: $t("menus.pureCountTo")
      }
    },
    {
@@ -234,7 +234,7 @@ export default {
      name: "ContextMenu",
      component: () => import("@/views/components/contextmenu/index.vue"),
      meta: {
-        title: $t("menus.hscontextmenu")
+        title: $t("menus.pureContextmenu")
      }
    },
    {
@@ -242,7 +242,7 @@ export default {
      name: "JsonEditor",
      component: () => import("@/views/components/json-editor.vue"),
      meta: {
-        title: $t("menus.hsjsoneditor")
+        title: $t("menus.pureJsonEditor")
      }
    },
    {
@@ -250,7 +250,7 @@ export default {
      name: "SeamlessScroll",
      component: () => import("@/views/components/seamless-scroll.vue"),
      meta: {
-        title: $t("menus.hsseamless")
+        title: $t("menus.pureSeamless")
      }
    },
    {
@@ -258,7 +258,7 @@ export default {
      name: "VirtualList",
      component: () => import("@/views/components/virtual-list/index.vue"),
      meta: {
-        title: $t("menus.hsVirtualList")
+        title: $t("menus.pureVirtualList")
      }
    }
  ]
--- a/src/router/modules/editor.ts
+++ b/src/router/modules/editor.ts
@@ -6,7 +6,7 @@ export default {
  redirect: "/editor/index",
  meta: {
    icon: "ep:edit",
-    title: $t("menus.hseditor"),
+    title: $t("menus.pureEditor"),
    rank: editor
  },
  children: [
@@ -15,7 +15,7 @@ export default {
      name: "Editor",
      component: () => import("@/views/editor/index.vue"),
      meta: {
-        title: $t("menus.hseditor"),
+        title: $t("menus.pureEditor"),
        keepAlive: true
      }
    }
--- a/src/router/modules/error.ts
+++ b/src/router/modules/error.ts
@@ -7,7 +7,7 @@ export default {
  meta: {
    icon: "ri:information-line",
    // showLink: false,
-    title: $t("menus.hsabnormal"),
+    title: $t("menus.pureAbnormal"),
    rank: error
  },
  children: [
@@ -16,7 +16,7 @@ export default {
      name: "403",
      component: () => import("@/views/error/403.vue"),
      meta: {
-        title: $t("menus.hsfourZeroOne")
+        title: $t("menus.pureFourZeroOne")
      }
    },
    {
@@ -24,7 +24,7 @@ export default {
      name: "404",
      component: () => import("@/views/error/404.vue"),
      meta: {
-        title: $t("menus.hsfourZeroFour")
+        title: $t("menus.pureFourZeroFour")
      }
    },
    {
@@ -32,7 +32,7 @@ export default {
      name: "500",
      component: () => import("@/views/error/500.vue"),
      meta: {
-        title: $t("menus.hsFive")
+        title: $t("menus.pureFive")
      }
    }
  ]
--- a/src/router/modules/flowchart.ts
+++ b/src/router/modules/flowchart.ts
@@ -6,7 +6,7 @@ export default {
  redirect: "/flow-chart/index",
  meta: {
    icon: "ep:set-up",
-    title: $t("menus.hsflowChart"),
+    title: $t("menus.pureFlowChart"),
    rank: flowchart
  },
  children: [
@@ -15,7 +15,7 @@ export default {
      name: "FlowChart",
      component: () => import("@/views/flow-chart/index.vue"),
      meta: {
-        title: $t("menus.hsflowChart")
+        title: $t("menus.pureFlowChart")
      }
    }
  ]
--- a/src/router/modules/form.ts
+++ b/src/router/modules/form.ts
@@ -6,7 +6,7 @@ export default {
  redirect: "/form/index",
  meta: {
    icon: "ri:edit-box-line",
-    title: $t("menus.hsSchemaForm"),
+    title: $t("menus.pureSchemaForm"),
    rank: form
  },
  children: [
@@ -15,7 +15,7 @@ export default {
      name: "SchemaForm",
      component: () => import("@/views/schema-form/index.vue"),
      meta: {
-        title: $t("menus.hsSchemaForm"),
+        title: $t("menus.pureSchemaForm"),
        extraIcon: "IF-pure-iconfont-new svg"
      }
    }
--- a/src/router/modules/formdesign.ts
+++ b/src/router/modules/formdesign.ts
@@ -7,7 +7,7 @@ export default {
  redirect: "/form-design/index",
  meta: {
    icon: "ri:terminal-window-line",
-    title: $t("menus.hsFormDesign"),
+    title: $t("menus.pureFormDesign"),
    rank: formdesign
  },
  children: [
@@ -16,7 +16,8 @@ export default {
      name: "FormDesign",
      component: IFrame,
      meta: {
-        title: $t("menus.hsFormDesign"),
+        title: $t("menus.pureFormDesign"),
+        keepAlive: true,
        frameSrc:
          "https://haixin-fang.github.io/vue-form-design/playground/index.html",
        frameLoading: false
--- a/src/router/modules/ganttastic.ts
+++ b/src/router/modules/ganttastic.ts
@@ -6,7 +6,7 @@ export default {
  redirect: "/ganttastic/index",
  meta: {
    icon: "ri:bar-chart-horizontal-line",
-    title: $t("menus.hsGanttastic"),
+    title: $t("menus.pureGanttastic"),
    rank: ganttastic
  },
  children: [
@@ -15,7 +15,7 @@ export default {
      name: "Ganttastic",
      component: () => import("@/views/ganttastic/index.vue"),
      meta: {
-        title: $t("menus.hsGanttastic"),
+        title: $t("menus.pureGanttastic"),
        extraIcon: "IF-pure-iconfont-new svg"
      }
    }
--- a/src/router/modules/guide.ts
+++ b/src/router/modules/guide.ts
@@ -6,7 +6,7 @@ export default {
  redirect: "/guide/index",
  meta: {
    icon: "ep:guide",
-    title: $t("menus.hsguide"),
+    title: $t("menus.pureGuide"),
    rank: guide
  },
  children: [
@@ -15,7 +15,7 @@ export default {
      name: "Guide",
      component: () => import("@/views/guide/index.vue"),
      meta: {
-        title: $t("menus.hsguide")
+        title: $t("menus.pureGuide")
      }
    }
  ]
--- a/src/router/modules/home.ts
+++ b/src/router/modules/home.ts
@@ -10,7 +10,7 @@ export default {
  redirect: "/welcome",
  meta: {
    icon: "ep:home-filled",
-    title: $t("menus.hshome"),
+    title: $t("menus.pureHome"),
    rank: home
  },
  children: [
@@ -19,7 +19,7 @@ export default {
      name: "Welcome",
      component: () => import("@/views/welcome/index.vue"),
      meta: {
-        title: $t("menus.hshome"),
+        title: $t("menus.pureHome"),
        showLink: VITE_HIDE_HOME === "true" ? false : true
      }
    }
--- a/src/router/modules/list.ts
+++ b/src/router/modules/list.ts
@@ -6,7 +6,7 @@ export default {
  redirect: "/list/card",
  meta: {
    icon: "ri:list-check",
-    title: $t("menus.hsList"),
+    title: $t("menus.pureList"),
    rank: list
  },
  children: [
@@ -16,7 +16,7 @@ export default {
      component: () => import("@/views/list/card/index.vue"),
      meta: {
        icon: "ri:bank-card-line",
-        title: $t("menus.hsListCard"),
+        title: $t("menus.pureListCard"),
        showParent: true
      }
    }
--- a/src/router/modules/menuoverflow.ts
+++ b/src/router/modules/menuoverflow.ts
@@ -5,7 +5,7 @@ export default {
  path: "/menuoverflow",
  redirect: "/menuoverflow/index",
  meta: {
-    title: $t("menus.hsMenuoverflow"),
+    title: $t("menus.pureMenuOverflow"),
    rank: menuoverflow
  },
  children: [
@@ -14,7 +14,7 @@ export default {
      name: "MenuOverflow",
      component: () => import("@/views/menuoverflow/index.vue"),
      meta: {
-        title: $t("menus.hsChildMenuoverflow"),
+        title: $t("menus.pureChildMenuOverflow"),
        showParent: true
      }
    }
--- a/src/router/modules/mind.ts
+++ b/src/router/modules/mind.ts
@@ -0,0 +1,25 @@
+import { $t } from "@/plugins/i18n";
+import { mind } from "@/router/enums";
+const IFrame = () => import("@/layout/frameView.vue");
+
+export default {
+  path: "/mind-map",
+  redirect: "/mind-map/index",
+  meta: {
+    icon: "ri:mind-map",
+    title: $t("menus.pureMindMap"),
+    rank: mind
+  },
+  children: [
+    {
+      path: "/mind-map/index",
+      name: "FrameMindMap",
+      component: IFrame,
+      meta: {
+        title: $t("menus.pureMindMap"),
+        keepAlive: true,
+        frameSrc: "https://wanglin2.github.io/mind-map/#/"
+      }
+    }
+  ]
+} satisfies RouteConfigsTable;
--- a/src/router/modules/nested.ts
+++ b/src/router/modules/nested.ts
@@ -5,7 +5,7 @@ export default {
  path: "/nested",
  redirect: "/nested/menu1/menu1-1",
  meta: {
-    title: $t("menus.hsmenus"),
+    title: $t("menus.pureMenus"),
    icon: "ep:histogram",
    rank: nested
  },
@@ -13,7 +13,7 @@ export default {
    {
      path: "/nested/menu1",
      meta: {
-        title: $t("menus.hsmenu1"),
+        title: $t("menus.pureMenu1"),
        keepAlive: true
      },
      redirect: "/nested/menu1/menu1-1",
@@ -23,7 +23,7 @@ export default {
          component: () => import("@/views/nested/menu1/menu1-1/index.vue"),
          name: "Menu1-1",
          meta: {
-            title: $t("menus.hsmenu1-1"),
+            title: $t("menus.pureMenu1-1"),
            keepAlive: true
          }
        },
@@ -31,7 +31,7 @@ export default {
          path: "/nested/menu1/menu1-2",
          redirect: "/nested/menu1/menu1-2/menu1-2-1",
          meta: {
-            title: $t("menus.hsmenu1-2"),
+            title: $t("menus.pureMenu1-2"),
            keepAlive: true
          },
          children: [
@@ -41,7 +41,7 @@ export default {
                import("@/views/nested/menu1/menu1-2/menu1-2-1/index.vue"),
              name: "Menu1-2-1",
              meta: {
-                title: $t("menus.hsmenu1-2-1"),
+                title: $t("menus.pureMenu1-2-1"),
                keepAlive: true
              }
            },
@@ -51,7 +51,7 @@ export default {
                import("@/views/nested/menu1/menu1-2/menu1-2-2/index.vue"),
              name: "Menu1-2-2",
              meta: {
-                title: $t("menus.hsmenu1-2-2"),
+                title: $t("menus.pureMenu1-2-2"),
                keepAlive: true
              }
            }
@@ -62,7 +62,7 @@ export default {
          component: () => import("@/views/nested/menu1/menu1-3/index.vue"),
          name: "Menu1-3",
          meta: {
-            title: $t("menus.hsmenu1-3"),
+            title: $t("menus.pureMenu1-3"),
            keepAlive: true
          }
        }
@@ -73,7 +73,7 @@ export default {
      name: "Menu2",
      component: () => import("@/views/nested/menu2/index.vue"),
      meta: {
-        title: $t("menus.hsmenu2"),
+        title: $t("menus.pureMenu2"),
        keepAlive: true
      }
    }
--- a/src/router/modules/ppt.ts
+++ b/src/router/modules/ppt.ts
@@ -16,6 +16,7 @@ export default {
      component: IFrame,
      meta: {
        title: "PPT",
+        keepAlive: true,
        frameSrc: "https://pipipi-pikachu.github.io/PPTist/",
        frameLoading: false
      }
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -7,7 +7,7 @@ export default [
    name: "Login",
    component: () => import("@/views/login/index.vue"),
    meta: {
-      title: $t("menus.hslogin"),
+      title: $t("menus.pureLogin"),
      showLink: false,
      rank: 101
    }
@@ -16,7 +16,7 @@ export default [
    path: "/redirect",
    component: Layout,
    meta: {
-      title: $t("status.hsLoad"),
+      title: $t("status.pureLoad"),
      showLink: false,
      rank: 102
    },
@@ -34,7 +34,7 @@ export default [
    name: "Empty",
    component: () => import("@/views/empty/index.vue"),
    meta: {
-      title: $t("menus.hsempty"),
+      title: $t("menus.pureEmpty"),
      showLink: false,
      rank: 103
    }
--- a/src/router/modules/result.ts
+++ b/src/router/modules/result.ts
@@ -6,7 +6,7 @@ export default {
  redirect: "/result/success",
  meta: {
    icon: "ri:checkbox-circle-line",
-    title: $t("menus.hsResult"),
+    title: $t("menus.pureResult"),
    rank: result
  },
  children: [
@@ -15,7 +15,7 @@ export default {
      name: "Success",
      component: () => import("@/views/result/success.vue"),
      meta: {
-        title: $t("menus.hsSuccess")
+        title: $t("menus.pureSuccess")
      }
    },
    {
@@ -23,7 +23,7 @@ export default {
      name: "Fail",
      component: () => import("@/views/result/fail.vue"),
      meta: {
-        title: $t("menus.hsFail")
+        title: $t("menus.pureFail")
      }
    }
  ]
--- a/src/router/modules/table.ts
+++ b/src/router/modules/table.ts
@@ -6,7 +6,7 @@ export default {
  redirect: "/table/index",
  meta: {
    icon: "ri:table-line",
-    title: $t("menus.hstable"),
+    title: $t("menus.pureTable"),
    rank: table
  },
  children: [
@@ -15,7 +15,7 @@ export default {
      name: "PureTable",
      component: () => import("@/views/table/index.vue"),
      meta: {
-        title: $t("menus.hsPureTableBase")
+        title: $t("menus.pureTableBase")
      }
    },
    {
@@ -23,7 +23,7 @@ export default {
      name: "PureTableHigh",
      component: () => import("@/views/table/high.vue"),
      meta: {
-        title: $t("menus.hsPureTableHigh")
+        title: $t("menus.pureTableHigh")
      }
    },
    {
@@ -31,7 +31,7 @@ export default {
      name: "PureTableEdit",
      component: () => import("@/views/table/edit.vue"),
      meta: {
-        title: $t("menus.hsPureTableEdit"),
+        title: $t("menus.pureTableEdit"),
        extraIcon: "IF-pure-iconfont-new svg"
      }
    },
@@ -40,7 +40,7 @@ export default {
      name: "VxeTable",
      component: () => import("@/views/table/virtual.vue"),
      meta: {
-        title: $t("menus.hsVxeTable"),
+        title: $t("menus.pureVxeTable"),
        extraIcon: "IF-pure-iconfont-new svg"
      }
    }
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -55,10 +55,8 @@ export const useUserStore = defineStore({
      return new Promise<UserResult>((resolve, reject) => {
        getLogin(data)
          .then(data => {
-            if (data) {
-              setToken(data.data);
-              resolve(data);
-            }
+            if (data?.success) setToken(data.data);
+            resolve(data);
          })
          .catch(error => {
            reject(error);
--- a/src/views/able/barcode.vue
+++ b/src/views/able/barcode.vue
@@ -44,6 +44,13 @@ const barcodes = [
          </el-link>
          生成）
        </div>
+        <el-link
+          class="mt-2"
+          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/barcode.vue"
+          target="_blank"
+        >
+          代码位置 src/views/able/barcode.vue
+        </el-link>
      </template>
      <el-row :gutter="12">
        <template v-for="(item, index) in barcodes" :key="index">
--- a/src/views/able/danmaku/index.vue
+++ b/src/views/able/danmaku/index.vue
@@ -116,6 +116,13 @@ function addDanmu() {
          </el-link>
        </span>
      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/danmaku"
+        target="_blank"
+      >
+        代码位置 src/views/able/danmaku
+      </el-link>
    </template>
    <div class="flex gap-5">
      <vue-danmaku
--- a/src/views/able/debounce.vue
+++ b/src/views/able/debounce.vue
@@ -19,7 +19,14 @@ const throttleClick = throttle(handle);
  <div>
    <el-card class="mb-5" shadow="never">
      <template #header>
-        <div class="font-medium">防抖：debounce</div>
+        <p class="font-medium">防抖：debounce</p>
+        <el-link
+          class="mt-2"
+          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/debounce.vue"
+          target="_blank"
+        >
+          代码位置 src/views/able/debounce.vue
+        </el-link>
      </template>
      <div class="mb-5">
        所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n
--- a/src/views/able/directives.vue
+++ b/src/views/able/directives.vue
@@ -56,7 +56,14 @@ function onReset() {
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
-        <span class="font-medium">自定义防抖、截流、文本复制、长按指令</span>
+        <p class="font-medium">自定义防抖、截流、文本复制、长按指令</p>
+        <el-link
+          class="mt-2"
+          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/directives.vue"
+          target="_blank"
+        >
+          代码位置 src/views/able/directives.vue
+        </el-link>
      </div>
    </template>
    <div class="mb-2">
--- a/src/views/able/download.vue
+++ b/src/views/able/download.vue
@@ -28,7 +28,14 @@ function down() {
 <template>
  <el-card shadow="never">
    <template #header>
-      <span class="font-medium">文件下载功能</span>
+      <p class="font-medium">文件下载功能</p>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/download.vue"
+        target="_blank"
+      >
+        代码位置 src/views/able/download.vue
+      </el-link>
    </template>
    <div class="flex flex-wrap">
      <el-button
--- a/src/views/able/draggable.vue
+++ b/src/views/able/draggable.vue
@@ -68,6 +68,13 @@ onMounted(() => {
          </el-link>
        </span>
      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/draggable.vue"
+        target="_blank"
+      >
+        代码位置 src/views/able/draggable.vue
+      </el-link>
    </template>
    <div class="drag-container">
      <!-- grid列表拖拽 -->
--- a/src/views/able/excel.vue
+++ b/src/views/able/excel.vue
@@ -72,16 +72,21 @@ const exportExcel = () => {
  <el-card shadow="never">
    <template #header>
      <div class="font-medium">
-        导出Excel（
        <el-link
          href="https://github.com/SheetJS/sheetjs"
          target="_blank"
          style="margin: 0 5px 4px 0; font-size: 16px"
        >
-          github地址
+          导出Excel
        </el-link>
-        ）
      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/excel.vue"
+        target="_blank"
+      >
+        代码位置 src/views/able/excel.vue
+      </el-link>
    </template>
    <el-button type="primary" @click="exportExcel">导出Excel</el-button>
    <div class="h-[25rem] mt-3">
--- a/src/views/able/infinite-scroll.vue
+++ b/src/views/able/infinite-scroll.vue
@@ -35,16 +35,21 @@ const load = () => {
  <el-card shadow="never">
    <template #header>
      <div class="font-medium">
-        表格无限滚动（
        <el-link
          href="https://github.com/yujinpan/el-table-infinite-scroll"
          target="_blank"
          style="margin: 0 5px 4px 0; font-size: 16px"
        >
-          github地址
+          表格无限滚动
        </el-link>
-        ）
      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/infinite-scroll.vue"
+        target="_blank"
+      >
+        代码位置 src/views/able/infinite-scroll.vue
+      </el-link>
    </template>
    <p class="mb-2">{{ isBottom ? "已加载全部页" : `加载到第 ${page} 页` }}</p>
    <el-table
--- a/src/views/able/line-tree.vue
+++ b/src/views/able/line-tree.vue
@@ -25,9 +25,16 @@ const dataProps = {
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
-        <span class="font-medium">
-          扩展elemenet-plus的树形组件包括虚拟树组件，支持连接线
-        </span>
+        <p class="font-medium">
+          扩展 Elemenet Plus 的树形组件包括虚拟树组件，支持连接线
+        </p>
+        <el-link
+          class="mt-2"
+          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/line-tree.vue"
+          target="_blank"
+        >
+          代码位置 src/views/able/line-tree.vue
+        </el-link>
      </div>
    </template>

--- a/src/views/able/menu-tree.vue
+++ b/src/views/able/menu-tree.vue
@@ -47,7 +47,7 @@ const filterMethod = (query: string, node: treeNode) => {
    <template #header>
      <div class="card-header">
        <span class="font-medium">
-          菜单树结构（采用element-plus的
+          菜单树结构（采用 Element Plus 的
          <el-link
            href="https://element-plus.gitee.io/zh-CN/component/tree-v2.html"
            target="_blank"
@@ -59,6 +59,13 @@ const filterMethod = (query: string, node: treeNode) => {
          组件并支持国际化）
        </span>
      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/menu-tree.vue"
+        target="_blank"
+      >
+        代码位置 src/views/able/menu-tree.vue
+      </el-link>
    </template>
    <el-input
      v-model="query"
--- a/src/views/able/mqtt-client.vue
+++ b/src/views/able/mqtt-client.vue
@@ -0,0 +1,400 @@
+<script setup lang="ts">
+// vue 3 + vite use MQTT.js refer to https://github.com/mqttjs/MQTT.js/issues/1269
+import * as mqtt from "mqtt/dist/mqtt.min";
+import { reactive, ref, onUnmounted } from "vue";
+
+const protocol = location.protocol === "https:" ? "wss" : "ws";
+const port = protocol === "wss" ? 8084 : 8083;
+
+// https://github.com/mqttjs/MQTT.js#qos
+const qosList = [0, 1, 2];
+
+const connection = reactive({
+  protocol,
+  host: "broker.emqx.io",
+  port,
+  clientId: "emqx_vue3_" + Math.random().toString(16).substring(2, 8),
+  username: "emqx_test",
+  password: "emqx_test",
+  clean: true,
+  connectTimeout: 30 * 1000, // ms
+  reconnectPeriod: 4000 // ms
+  // for more options and details, please refer to https://github.com/mqttjs/MQTT.js#mqttclientstreambuilder-options
+});
+
+// 订阅 topic/mqttx 主题
+const subscription = ref({
+  topic: "topic/mqttx",
+  qos: 0 as any
+});
+
+// 发布 topic/browser 主题
+const publish = ref({
+  topic: "topic/browser",
+  qos: 0 as any,
+  payload: '{ "msg": "Hello, I am browser." }'
+});
+
+let client = ref({
+  connected: false
+} as mqtt.MqttClient);
+
+const receivedMessages = ref("");
+const subscribedSuccess = ref(false);
+const btnLoadingType = ref("");
+const retryTimes = ref(0);
+
+const initData = () => {
+  client.value = {
+    connected: false
+  } as mqtt.MqttClient;
+  retryTimes.value = 0;
+  btnLoadingType.value = "";
+  subscribedSuccess.value = false;
+};
+
+const handleOnReConnect = () => {
+  retryTimes.value += 1;
+  if (retryTimes.value > 5) {
+    try {
+      client.value.end();
+      initData();
+      console.log("connection maxReconnectTimes limit, stop retry");
+    } catch (error) {
+      console.log("handleOnReConnect catch error:", error);
+    }
+  }
+};
+
+const createConnection = () => {
+  try {
+    btnLoadingType.value = "connect";
+    const { protocol, host, port, ...options } = connection;
+    const connectUrl = `${protocol}://${host}:${port}/mqtt`;
+    // 连接MQTT 服务器
+    client.value = mqtt.connect(connectUrl, options);
+
+    if (client.value.on) {
+      // https://github.com/mqttjs/MQTT.js#event-connect
+      client.value.on("connect", () => {
+        btnLoadingType.value = "";
+        console.log("connection successful");
+      });
+
+      // https://github.com/mqttjs/MQTT.js#event-reconnect
+      client.value.on("reconnect", handleOnReConnect);
+
+      // https://github.com/mqttjs/MQTT.js#event-error
+      client.value.on("error", error => {
+        console.log("connection error:", error);
+      });
+
+      // https://github.com/mqttjs/MQTT.js#event-message
+      client.value.on("message", (topic: string, message) => {
+        receivedMessages.value = receivedMessages.value.concat(
+          message.toString()
+        );
+        console.log(`received message: ${message} from topic: ${topic}`);
+      });
+    }
+  } catch (error) {
+    btnLoadingType.value = "";
+    console.log("mqtt.connect error:", error);
+  }
+};
+
+// subscribe topic
+// https://github.com/mqttjs/MQTT.js#mqttclientsubscribetopictopic-arraytopic-object-options-callback
+const doSubscribe = () => {
+  btnLoadingType.value = "subscribe";
+  const { topic, qos } = subscription.value;
+  client.value.subscribe(
+    topic,
+    { qos },
+    (error: Error, granted: mqtt.ISubscriptionGrant[]) => {
+      btnLoadingType.value = "";
+      if (error) {
+        console.log("subscribe error:", error);
+        return;
+      }
+      subscribedSuccess.value = true;
+      console.log("subscribe successfully:", granted);
+    }
+  );
+};
+
+// unsubscribe topic
+// https://github.com/mqttjs/MQTT.js#mqttclientunsubscribetopictopic-array-options-callback
+const doUnSubscribe = () => {
+  btnLoadingType.value = "unsubscribe";
+  const { topic, qos } = subscription.value;
+  client.value.unsubscribe(topic, { qos }, error => {
+    btnLoadingType.value = "";
+    subscribedSuccess.value = false;
+    if (error) {
+      console.log("unsubscribe error:", error);
+      return;
+    }
+    console.log(`unsubscribed topic: ${topic}`);
+  });
+};
+
+// publish message
+// https://github.com/mqttjs/MQTT.js#mqttclientpublishtopic-message-options-callback
+const doPublish = () => {
+  btnLoadingType.value = "publish";
+  const { topic, qos, payload } = publish.value;
+  client.value.publish(topic, payload, { qos }, error => {
+    btnLoadingType.value = "";
+    if (error) {
+      console.log("publish error:", error);
+      return;
+    }
+    console.log(`published message: ${payload}`);
+  });
+};
+
+// disconnect
+// https://github.com/mqttjs/MQTT.js#mqttclientendforce-options-callback
+const destroyConnection = () => {
+  if (client.value.connected) {
+    btnLoadingType.value = "disconnect";
+    try {
+      client.value.end(false, () => {
+        initData();
+        console.log("disconnected successfully");
+      });
+    } catch (error) {
+      btnLoadingType.value = "";
+      console.log("disconnect error:", error);
+    }
+  }
+};
+
+const handleProtocolChange = (value: string) => {
+  connection.port = value === "wss" ? 8084 : 8083;
+};
+
+onUnmounted(() => {
+  try {
+    if (client.value.end) {
+      client.value.end();
+      console.log("disconnected successfully");
+    }
+  } catch (error) {
+    console.log(error);
+  }
+});
+</script>
+
+<template>
+  <el-card shadow="never" :body-style="{ padding: '20px' }">
+    <template #header>
+      <div>
+        基于
+        <el-link
+          type="primary"
+          :underline="false"
+          href="https://github.com/mqttjs/MQTT.js"
+          target="_blank"
+        >
+          MQTT.js
+        </el-link>
+        和 免费的公共MQTT代理
+        <el-link
+          type="primary"
+          :underline="false"
+          href="broker.emqx.io"
+          target="_blank"
+        >
+          EMQX
+        </el-link>
+        实现的一套 MQTT 客户端
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/mqtt-client.vue"
+        target="_blank"
+      >
+        代码位置 src/views/able/mqtt-client.vue
+      </el-link>
+    </template>
+
+    <el-card shadow="never">
+      <h1>设置</h1>
+      <el-form label-position="top" :model="connection">
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item prop="protocol" label="协议">
+              <el-select
+                v-model="connection.protocol"
+                @change="handleProtocolChange"
+              >
+                <el-option label="ws://" value="ws" />
+                <el-option label="wss://" value="wss" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="host" label="主机">
+              <el-input v-model="connection.host" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="port" label="端口">
+              <el-input
+                v-model.number="connection.port"
+                type="number"
+                placeholder="8083/8084"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="clientId" label="客户端ID">
+              <el-input v-model="connection.clientId" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="username" label="用户名">
+              <el-input v-model="connection.username" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="password" label="密码">
+              <el-input v-model="connection.password" />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="24">
+            <el-button
+              type="primary"
+              :disabled="client.connected"
+              :loading="btnLoadingType === 'connect'"
+              @click="createConnection"
+            >
+              {{ client.connected ? "已连接" : "连接" }}
+            </el-button>
+
+            <el-button
+              v-if="client.connected"
+              type="danger"
+              :loading="btnLoadingType === 'disconnect'"
+              @click="destroyConnection"
+            >
+              断开连接
+            </el-button>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
+    <el-card shadow="never" class="mt-4">
+      <h1>订阅</h1>
+      <el-form label-position="top" :model="subscription">
+        <el-row :gutter="20" :align="'middle'">
+          <el-col :span="8">
+            <el-form-item prop="topic" label="主题">
+              <el-input
+                v-model="subscription.topic"
+                :disabled="subscribedSuccess"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="qos" label="通信质量">
+              <el-select
+                v-model="subscription.qos"
+                :disabled="subscribedSuccess"
+              >
+                <el-option
+                  v-for="qos in qosList"
+                  :key="qos"
+                  :label="qos"
+                  :value="qos"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <el-button
+              type="primary"
+              class="sub-btn"
+              :loading="btnLoadingType === 'subscribe'"
+              :disabled="!client.connected || subscribedSuccess"
+              @click="doSubscribe"
+            >
+              {{ subscribedSuccess ? "已订阅" : "订阅" }}
+            </el-button>
+            <el-button
+              v-if="subscribedSuccess"
+              type="primary"
+              class="sub-btn"
+              :loading="btnLoadingType === 'unsubscribe'"
+              :disabled="!client.connected"
+              @click="doUnSubscribe"
+            >
+              取消订阅
+            </el-button>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
+    <el-card shadow="never" class="mt-4">
+      <h1>发布</h1>
+      <el-form label-position="top" :model="publish">
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item prop="topic">
+              <template #label>
+                <span>主题</span>
+                <el-text type="info" size="small">
+                  可将订阅主题设置为topic/browser，测试MQTT的自发自收。
+                </el-text>
+              </template>
+              <el-input v-model="publish.topic" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="payload" label="有效载荷">
+              <el-input v-model="publish.payload" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item prop="qos" label="通信质量">
+              <el-select v-model="publish.qos">
+                <el-option
+                  v-for="qos in qosList"
+                  :key="qos"
+                  :label="qos"
+                  :value="qos"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <el-col :span="24">
+        <el-button
+          type="primary"
+          :loading="btnLoadingType === 'publish'"
+          :disabled="!client.connected"
+          @click="doPublish"
+        >
+          发布
+        </el-button>
+      </el-col>
+    </el-card>
+    <el-card shadow="never" class="mt-4">
+      <h1>接收</h1>
+      <el-col :span="24">
+        <el-input
+          v-model="receivedMessages"
+          type="textarea"
+          :rows="3"
+          readonly
+        />
+      </el-col>
+    </el-card>
+  </el-card>
+</template>
--- a/src/views/able/pdf.vue
+++ b/src/views/able/pdf.vue
@@ -38,21 +38,26 @@ const onPrint = () => {
  <el-card shadow="never">
    <template #header>
      <div class="font-medium">
-        PDF预览（
        <el-link
          href="https://github.com/hrynko/vue-pdf-embed"
          target="_blank"
          style="margin: 0 5px 4px 0; font-size: 16px"
        >
-          github地址
+          PDF预览
        </el-link>
-        ）
      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/pdf.vue"
+        target="_blank"
+      >
+        代码位置 src/views/able/pdf.vue
+      </el-link>
    </template>
    <div
      v-loading="loading"
-      class="h-[calc(100vh-239px)]"
-      :element-loading-text="t('status.hsLoad')"
+      class="h-[calc(100vh-295px)]"
+      :element-loading-text="t('status.pureLoad')"
    >
      <div class="flex justify-between items-center h-9">
        <div v-if="showAllPages" class="font-medium ml-1.25 text-xl">
@@ -73,28 +78,28 @@ const onPrint = () => {
          <el-checkbox v-model="showAllPages" @change="showAllPagesChange">
            显示所有页面
          </el-checkbox>
-          <el-tooltip
-            effect="dark"
-            :content="`翻转（当前角度${rotations[currentRotation]}度）`"
-            placement="top"
-          >
-            <IconifyIconOnline
-              icon="ic:baseline-rotate-90-degrees-ccw"
-              class="cursor-pointer outline-transparent"
-              @click="
-                currentRotation === 3
-                  ? (currentRotation = 0)
-                  : (currentRotation += 1)
-              "
-            />
-          </el-tooltip>
-          <el-tooltip effect="dark" content="打印" placement="top">
-            <IconifyIconOnline
-              icon="ri:printer-line"
-              class="cursor-pointer outline-transparent"
-              @click="onPrint"
-            />
-          </el-tooltip>
+          <IconifyIconOnline
+            v-tippy="{
+              maxWidth: 'none',
+              content: `翻转（当前角度${rotations[currentRotation]}度）`
+            }"
+            icon="ic:baseline-rotate-90-degrees-ccw"
+            class="cursor-pointer outline-transparent"
+            @click="
+              currentRotation === 3
+                ? (currentRotation = 0)
+                : (currentRotation += 1)
+            "
+          />
+          <IconifyIconOnline
+            v-tippy="{
+              maxWidth: 'none',
+              content: '打印'
+            }"
+            icon="ri:printer-line"
+            class="cursor-pointer outline-transparent"
+            @click="onPrint"
+          />
        </div>
      </div>
      <el-scrollbar>
--- a/src/views/able/pinyin.vue
+++ b/src/views/able/pinyin.vue
@@ -10,7 +10,14 @@ defineOptions({
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
-        <span class="font-medium">汉语拼音</span>
+        <p class="font-medium">汉语拼音</p>
+        <el-link
+          class="mt-2"
+          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/pinyin.vue"
+          target="_blank"
+        >
+          代码位置 src/views/able/pinyin.vue
+        </el-link>
      </div>
    </template>
    <p v-html="html('带 音 调')" />
--- a/src/views/able/print/index.vue
+++ b/src/views/able/print/index.vue
@@ -81,25 +81,30 @@ const tableData: User[] = [
    <template #header>
      <div class="card-header">
        <span class="font-medium">打印功能（报表、图表、图片）</span>
-        <div class="flex">
-          <el-select
-            v-model="value"
-            class="!w-[100px] mr-2"
-            placeholder="Select"
-            size="small"
-          >
-            <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
-          <el-button size="small" type="primary" @click="onPrint">
-            打印
-          </el-button>
-        </div>
+        <el-select
+          v-model="value"
+          class="!w-[100px] mr-2"
+          placeholder="Select"
+          size="small"
+        >
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <el-button size="small" type="primary" @click="onPrint">
+          打印
+        </el-button>
      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/print"
+        target="_blank"
+      >
+        代码位置 src/views/able/print
+      </el-link>
    </template>
    <el-row :gutter="24">
      <el-col
@@ -196,10 +201,4 @@ const tableData: User[] = [
 :deep(.el-table__row.success-row) {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
 }
-
-.card-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
 </style>
--- a/src/views/able/qrcode.vue
+++ b/src/views/able/qrcode.vue
@@ -36,6 +36,13 @@ const disabledClick = () => {
          </el-link>
          生成）
        </div>
+        <el-link
+          class="mt-2"
+          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/qrcode.vue"
+          target="_blank"
+        >
+          代码位置 src/views/able/qrcode.vue
+        </el-link>
      </template>
      <el-row :gutter="20" justify="space-between">
        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
--- a/src/views/able/ripple.vue
+++ b/src/views/able/ripple.vue
@@ -7,7 +7,14 @@ defineOptions({
 <template>
  <el-card shadow="never">
    <template #header>
-      <div class="font-medium">波纹(Ripple)</div>
+      <p class="font-medium">波纹(Ripple)</p>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/ripple.vue"
+        target="_blank"
+      >
+        代码位置 src/views/able/ripple.vue
+      </el-link>
    </template>
    <div class="mb-5">组件中的波纹</div>
    <el-alert
--- a/src/views/able/sensitive.vue
+++ b/src/views/able/sensitive.vue
@@ -21,7 +21,14 @@ function onInput() {
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
-        <span class="font-medium">敏感词过滤</span>
+        <p class="font-medium">敏感词过滤</p>
+        <el-link
+          class="mt-2"
+          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/sensitive.vue"
+          target="_blank"
+        >
+          代码位置 src/views/able/sensitive.vue
+        </el-link>
      </div>
    </template>
    <div class="flex flex-wrap gap-2 my-2">
--- a/src/views/able/typeit.vue
+++ b/src/views/able/typeit.vue
@@ -14,7 +14,14 @@ const options: TypeItOptions = {
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
-        <span class="font-medium"> 打字机组件 </span>
+        <p class="font-medium">打字机组件</p>
+        <el-link
+          class="mt-2"
+          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/typeit.vue"
+          target="_blank"
+        >
+          代码位置 src/views/able/typeit.vue
+        </el-link>
      </div>
    </template>
    <TypeIt :options="options" />
--- a/src/views/able/verify.vue
+++ b/src/views/able/verify.vue
@@ -17,16 +17,21 @@ function onFail() {
  <el-card shadow="never">
    <template #header>
      <div class="font-medium">
-        拼图人机验证、右滑拼图验证（
        <el-link
          href="https://github.com/javaLuo/vue-puzzle-vcode/tree/vue3"
          target="_blank"
          style="margin: 0 5px 4px 0; font-size: 16px"
        >
-          github地址
+          拼图人机验证、右滑拼图验证
        </el-link>
-        ）
      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/verify.vue"
+        target="_blank"
+      >
+        代码位置 src/views/able/verify.vue
+      </el-link>
    </template>
    <div class="bg-[rgba(15,23,42,0.2)] p-6 w-[360px]">
      <Vcode :show="isShow" type="inside" @fail="onFail" @success="onSuccess" />
--- a/src/views/able/video-frame/index.vue
+++ b/src/views/able/video-frame/index.vue
@@ -134,6 +134,13 @@ onBeforeUnmount(() => {
            工具，可以在浏览器内进行视频和音频录制、转换和流式传输等，不过通过一些实践，对于时长较长的视频性能还是不太行，不过用于时长较短的短视频还是可以上生产的
          </p>
        </span>
+        <el-link
+          class="mt-2"
+          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/video-frame"
+          target="_blank"
+        >
+          代码位置 src/views/able/video-frame
+        </el-link>
      </div>
    </template>
    <div class="flex flex-wrap">
--- a/src/views/able/video.vue
+++ b/src/views/able/video.vue
@@ -48,6 +48,13 @@ onMounted(() => {
          </el-link>
        </span>
      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/video.vue"
+        target="_blank"
+      >
+        代码位置 src/views/able/video.vue
+      </el-link>
    </template>
    <div id="mse" />
  </el-card>
--- a/src/views/able/watermark.vue
+++ b/src/views/able/watermark.vue
@@ -36,16 +36,22 @@ onBeforeUnmount(() => {
    <template #header>
      <div class="card-header">
        <span class="font-medium">
-          页面水印
          <el-link
            href="https://pure-admin-utils.netlify.app/hooks/useWatermark/useWatermark"
            target="_blank"
            style="margin: 0 5px 4px 0; font-size: 16px"
          >
-            （查看更详细的使用文档）
+            页面水印
          </el-link>
        </span>
      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/watermark.vue"
+        target="_blank"
+      >
+        代码位置 src/views/able/watermark.vue
+      </el-link>
    </template>
    <el-space wrap class="!mb-2">
      <span> 请输入要创建水印的值：</span>
@@ -120,9 +126,7 @@ onBeforeUnmount(() => {
      <el-button plain @click="clear">清除整页水印</el-button>
    </el-space>

-    <el-divider />
-
-    <div ref="local" class="w-1/2 h-[200px] border border-sky-500" />
+    <div ref="local" class="w-1/2 h-[200px] border border-sky-500 mt-4" />

    <el-space wrap class="mt-6">
      <el-button
@@ -190,8 +194,9 @@ onBeforeUnmount(() => {
      <el-button plain @click="clearLocal">清除局部水印</el-button>
    </el-space>

-    <el-divider />
-
-    <div ref="preventLocal" class="w-1/2 h-[200px] border border-indigo-500" />
+    <div
+      ref="preventLocal"
+      class="w-1/2 h-[200px] border border-indigo-500 mt-4"
+    />
  </el-card>
 </template>
--- a/src/views/able/wavesurfer/index.vue
+++ b/src/views/able/wavesurfer/index.vue
@@ -93,6 +93,13 @@ onBeforeUnmount(() => {
          </span>
        </span>
      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/wavesurfer"
+        target="_blank"
+      >
+        代码位置 src/views/able/wavesurfer
+      </el-link>
    </template>
    <div
      v-loading="loading"
--- a/src/views/components/animatecss.vue
+++ b/src/views/components/animatecss.vue
@@ -28,6 +28,13 @@ watch(animate, () => {
          选择器
        </span>
      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/animatecss.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/animatecss.vue
+      </el-link>
    </template>
    <ReAnimateSelector v-model="animate" class="!w-[200px]" />
  </el-card>
--- a/src/views/components/button.vue
+++ b/src/views/components/button.vue
@@ -16,6 +16,13 @@ const url = ref(`${VITE_PUBLIC_PATH}html/button.html`);
      <div class="card-header">
        <span class="font-medium">通过 iframe 引入按钮页面</span>
      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/button.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/button.vue
+      </el-link>
    </template>
    <iframe :src="url" frameborder="0" class="iframe w-full h-[60vh]" />
  </el-card>
--- a/src/views/components/cascader.vue
+++ b/src/views/components/cascader.vue
@@ -25,7 +25,16 @@ const handleChange = value => {

 <template>
  <el-card shadow="never">
-    <template #header> <p class="font-medium">区域级联选择器</p> </template>
+    <template #header>
+      <p class="font-medium">区域级联选择器</p>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/cascader.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/cascader.vue
+      </el-link>
+    </template>
    <el-row :gutter="24">
      <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
        <div class="flex flex-col items-center justify-center">
--- a/src/views/components/check-button.vue
+++ b/src/views/components/check-button.vue
@@ -93,7 +93,7 @@ watch(size, val =>
      <div class="card-header">
        <el-space wrap :size="40">
          <span style="font-size: 16px; font-weight: 800"> 可选按钮 </span>
-          <el-radio-group v-model="size" size="small">
+          <el-radio-group v-model="size">
            <el-radio value="large">大尺寸</el-radio>
            <el-radio value="default">默认尺寸</el-radio>
            <el-radio value="small">小尺寸</el-radio>
@@ -101,6 +101,13 @@ watch(size, val =>
          </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/check-button.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/check-button.vue
+      </el-link>
    </template>
    <p class="mb-2">单选（紧凑风格的按钮样式）</p>
    <el-radio-group
--- a/src/views/components/check-card.vue
+++ b/src/views/components/check-card.vue
@@ -52,7 +52,7 @@ watch(size, val =>
          >
            多选卡片组
          </el-link>
-          <el-radio-group v-model="size" size="small">
+          <el-radio-group v-model="size">
            <el-radio value="large">大尺寸</el-radio>
            <el-radio value="default">默认尺寸</el-radio>
            <el-radio value="small">小尺寸</el-radio>
@@ -60,6 +60,13 @@ watch(size, val =>
          </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/check-card.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/check-card.vue
+      </el-link>
    </template>

    <p class="mb-2 mt-4">单选</p>
--- a/src/views/components/collapse.vue
+++ b/src/views/components/collapse.vue
@@ -41,6 +41,13 @@ const handleChange = (val: string[]) => {
          </el-link>
        </el-space>
      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/collapse.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/collapse.vue
+      </el-link>
    </template>

    <p class="mb-2">基础用法</p>
--- a/src/views/components/color-picker.vue
+++ b/src/views/components/color-picker.vue
@@ -56,7 +56,7 @@ function onClick() {
          >
            颜色选择器
          </el-link>
-          <el-radio-group v-model="size" size="small">
+          <el-radio-group v-model="size">
            <el-radio value="large">大尺寸</el-radio>
            <el-radio value="default">默认尺寸</el-radio>
            <el-radio value="small">小尺寸</el-radio>
@@ -64,6 +64,13 @@ function onClick() {
          </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.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/color-picker.vue
+      </el-link>
    </template>

    <p class="mb-2">不同尺寸、选择透明度、预定义颜色</p>
--- a/src/views/components/contextmenu/index.vue
+++ b/src/views/components/contextmenu/index.vue
@@ -13,7 +13,14 @@ defineOptions({
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
-        <span class="font-medium">右键菜单</span>
+        <p class="font-medium">右键菜单</p>
+        <el-link
+          class="mt-2"
+          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/contextmenu"
+          target="_blank"
+        >
+          代码位置 src/views/components/contextmenu
+        </el-link>
      </div>
    </template>
    <el-row :gutter="24">
--- a/src/views/components/count-to.vue
+++ b/src/views/components/count-to.vue
@@ -10,7 +10,14 @@ defineOptions({
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
-        <span class="font-medium">数字动画</span>
+        <p class="font-medium">数字动画</p>
+        <el-link
+          class="mt-2"
+          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/count-to.vue"
+          target="_blank"
+        >
+          代码位置 src/views/components/count-to.vue
+        </el-link>
      </div>
    </template>
    <ReNormalCountTo
--- a/src/views/components/cropping/index.vue
+++ b/src/views/components/cropping/index.vue
@@ -41,6 +41,13 @@ onBeforeUnmount(() => {
          进行二次封装（提示：右键下面左侧裁剪区可开启功能菜单）
        </span>
      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/cropping"
+        target="_blank"
+      >
+        代码位置 src/views/components/cropping
+      </el-link>
    </template>
    <div v-loading="!showPopover" element-loading-background="transparent">
      <el-popover
--- a/src/views/components/date-picker.vue
+++ b/src/views/components/date-picker.vue
@@ -143,7 +143,7 @@ watch(size, val =>
          >
            日期选择器
          </el-link>
-          <el-radio-group v-model="size" size="small">
+          <el-radio-group v-model="size">
            <el-radio value="large">大尺寸</el-radio>
            <el-radio value="default">默认尺寸</el-radio>
            <el-radio value="small">小尺寸</el-radio>
@@ -151,6 +151,13 @@ watch(size, val =>
          </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/date-picker.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/date-picker.vue
+      </el-link>
    </template>

    <p class="mb-2">选择某一天</p>
--- a/src/views/components/datetime-picker.vue
+++ b/src/views/components/datetime-picker.vue
@@ -169,7 +169,7 @@ watch(size, val =>
          >
            日期时间选择器
          </el-link>
-          <el-radio-group v-model="size" size="small">
+          <el-radio-group v-model="size">
            <el-radio value="large">大尺寸</el-radio>
            <el-radio value="default">默认尺寸</el-radio>
            <el-radio value="small">小尺寸</el-radio>
@@ -177,6 +177,13 @@ watch(size, val =>
          </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/datetime-picker.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/datetime-picker.vue
+      </el-link>
    </template>

    <p class="mb-2">日期和时间点</p>
--- a/src/views/components/dialog/index.vue
+++ b/src/views/components/dialog/index.vue
@@ -280,6 +280,16 @@ function onUpdateClick() {
  });
 }

+// popconfirm 确认框
+function onPopconfirmClick() {
+  addDialog({
+    width: "30%",
+    title: "popconfirm确认框示例",
+    popconfirm: { title: "是否确认修改当前数据" },
+    contentRenderer: () => <p>点击右下方确定按钮看看效果吧</p>
+  });
+}
+
 // 结合Form表单（第一种方式，弹框关闭立刻恢复初始值）通过 props 属性接收子组件的 prop 并赋值
 function onFormOneClick() {
  addDialog({
@@ -447,7 +457,7 @@ function onBeforeSureClick() {
    <template #header>
      <div class="card-header">
        <span class="font-medium">
-          二次封装 element-plus 的
+          二次封装 Element Plus 的
          <el-link
            href="https://element-plus.org/zh-CN/component/dialog.html"
            target="_blank"
@@ -465,6 +475,12 @@ function onBeforeSureClick() {
          ）
        </span>
      </div>
+      <el-link
+        href="https://github.com/pure-admin/vue-pure-admin/tree/main/src/views/components/dialog"
+        target="_blank"
+      >
+        代码位置 src/views/components/dialog
+      </el-link>
    </template>
    <el-space wrap>
      <el-button @click="onBaseClick"> 基础用法 </el-button>
@@ -490,6 +506,7 @@ function onBeforeSureClick() {
      <el-button @click="onCloseCallBackClick"> 关闭后的回调 </el-button>
      <el-button @click="onNestingClick"> 嵌套的弹框 </el-button>
      <el-button @click="onUpdateClick"> 更改弹框自身属性值 </el-button>
+      <el-button @click="onPopconfirmClick">popconfirm确认框</el-button>
    </el-space>
    <el-divider />
    <el-space wrap>
--- a/src/views/components/el-button.vue
+++ b/src/views/components/el-button.vue
@@ -67,7 +67,7 @@ watch(size, val =>
          >
            Button 按钮
          </el-link>
-          <el-radio-group v-model="size" size="small">
+          <el-radio-group v-model="size">
            <el-radio value="large">大尺寸</el-radio>
            <el-radio value="default">默认尺寸</el-radio>
            <el-radio value="small">小尺寸</el-radio>
@@ -75,6 +75,13 @@ watch(size, val =>
          </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/el-button.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/el-button.vue
+      </el-link>
    </template>

    <p class="mb-2">基础按钮</p>
--- a/src/views/components/icon-select.vue
+++ b/src/views/components/icon-select.vue
@@ -15,6 +15,13 @@ const icon = ref("ep:add-location");
      <div class="card-header">
        <span class="font-medium">图标选择器</span>
      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/icon-select.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/icon-select.vue
+      </el-link>
    </template>
    <IconSelect v-model="icon" class="w-[200px]" />
  </el-card>
--- a/src/views/components/json-editor.vue
+++ b/src/views/components/json-editor.vue
@@ -97,6 +97,13 @@ watch(
          </el-link>
        </span>
      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/json-editor.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/json-editor.vue
+      </el-link>
    </template>
    <vue-json-pretty
      v-model:data="state.data"
--- a/src/views/components/message.vue
+++ b/src/views/components/message.vue
@@ -16,9 +16,16 @@ defineOptions({
      <div class="card-header">
        <span class="font-medium"> 消息提示 </span>
      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/message.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/message.vue
+      </el-link>
    </template>

-    <h4 class="mb-4">element-plus 的消息提示，点击弹出提示信息</h4>
+    <h4 class="mb-4">Element Plus 的消息提示，点击弹出提示信息</h4>

    <el-space wrap>
      <el-button
--- a/src/views/components/progress.vue
+++ b/src/views/components/progress.vue
@@ -23,6 +23,13 @@ const format = percentage => (percentage === 100 ? "Full" : `${percentage}%`);
          进度条
        </el-link>
      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/progress.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/progress.vue
+      </el-link>
    </template>

    <p class="mb-4">直线进度条动画</p>
--- a/src/views/components/seamless-scroll.vue
+++ b/src/views/components/seamless-scroll.vue
@@ -105,6 +105,13 @@ function changeDirection(val) {
            </span>
          </el-button>
        </div>
+        <el-link
+          class="mt-2"
+          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/seamless-scroll.vue"
+          target="_blank"
+        >
+          代码位置 src/views/components/seamless-scroll.vue
+        </el-link>
      </template>
      <SeamlessScroll
        ref="scroll"
--- a/src/views/components/segmented.vue
+++ b/src/views/components/segmented.vue
@@ -204,13 +204,20 @@ watch(size, val => (dynamicSize.value = size.value));
      <div class="card-header">
        <el-space wrap :size="40">
          <span style="font-size: 16px; font-weight: 800"> 分段控制器 </span>
-          <el-radio-group v-model="size" size="small">
+          <el-radio-group v-model="size">
            <el-radio value="large">大尺寸</el-radio>
            <el-radio value="default">默认尺寸</el-radio>
            <el-radio value="small">小尺寸</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/segmented.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/segmented.vue
+      </el-link>
    </template>
    <el-scrollbar>
      <p class="mb-2">
@@ -233,6 +240,9 @@ watch(size, val => (dynamicSize.value = size.value));
      <p class="mb-2">禁用</p>
      <Segmented :options="optionsDisabled" :size="dynamicSize" />
      <el-divider />
+      <p class="mb-2">全局禁用</p>
+      <Segmented :options="optionsBasis" :size="dynamicSize" disabled />
+      <el-divider />
      <p class="mb-2">block 属性(将宽度调整为父元素宽度)</p>
      <Segmented :options="optionsBlock" block :size="dynamicSize" />
      <el-divider />
--- a/src/views/components/selector.vue
+++ b/src/views/components/selector.vue
@@ -34,7 +34,14 @@ const selectedVal = ({ left, right }): void => {
      shadow="never"
    >
      <template #header>
-        <span class="font-medium">{{ item.title }}</span>
+        <p class="font-medium">{{ item.title }}</p>
+        <el-link
+          class="mt-2"
+          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/selector.vue"
+          target="_blank"
+        >
+          代码位置 src/views/components/selector.vue
+        </el-link>
      </template>
      <Selector
        :HsKey="key"
--- a/Show More
+++ b/Show More