feat:新增pure-admin前端

Yi.Pure.Vue3/src/views/able/barcode.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import ReBarcode from "@/components/ReBarcode";
+
+defineOptions({
+  name: "BarCode"
+});
+
+const barcodes = [
+  {
+    text: "CODE128",
+    type: "CODE128",
+    options: {}
+  },
+  {
+    text: "CODE39",
+    type: "CODE39",
+    options: {
+      lineColor: "#990000"
+    }
+  },
+  {
+    text: "123456",
+    type: "pharmacode",
+    options: {
+      background: "#eee",
+      width: 5
+    }
+  }
+];
+</script>
+
+<template>
+  <div>
+    <el-card shadow="never">
+      <template #header>
+        <div class="font-medium">
+          条形码（基于
+          <el-link
+            href="https://lindell.me/JsBarcode/"
+            target="_blank"
+            style="margin: 0 5px 4px 0; font-size: 16px"
+          >
+            JsBarcode
+          </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">
+          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
+            <el-card shadow="hover" class="flex justify-center">
+              <ReBarcode
+                :text="item.text"
+                :type="item.type"
+                :options="item.options"
+              />
+            </el-card>
+          </el-col>
+        </template>
+      </el-row>
+    </el-card>
+  </div>
+</template>

Yi.Pure.Vue3/src/views/able/danmaku/danmu.ts

@@ -0,0 +1,35 @@
+const customDanmus = [
+  {
+    avatar:
+      "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIADIAMgMBIgACEQEDEQH/xAAbAAEAAgMBAQAAAAAAAAAAAAAFBAYBAgMAB//aAAgBAQAAAAD7HU4ObhMC3AnlYvY8ISwA+6WDOd4/RA96FVeF66BOVWB3TsAOgZC27wv/xAAYAQEBAQEBAAAAAAAAAAAAAAACAwQAAf/aAAgBAhAAAAC3sw8uyRDQPV//xAAYAQADAQEAAAAAAAAAAAAAAAAAAgMBBP/aAAgBAxAAAACQ7LfmoUTNvFf/xAA0EAACAQMBBAcHAwUAAAAAAAABAgMABBESBRMxQRAhIjJRYbEUIzRCUnOBM3KSU2KRoeH/2gAIAQEAAT8AmmSCJpHOAoq6vZp8lmITkgonSQCMZxikkdGDxsVbxFbK2l7TGUkwHQfy6Ln4if7jetbcdglvH9TFv40hD71CGzlQpAyACRkt4VcxojxOdIj06GzwA5VKkilGUdjUcNxD9XlwI5g1Bfm0u4nC5UHDeYNWu0LS4B3D6mHHIwaufiJ/uN61tm6Et6GPCIbv8mtqi4gtrFkzjeuxIGRq+TP4orI1jpK+8MHAfVprYcM8kVysmoIGiwG8UfVgVcwh1ecDGiYcvlNWk7W9zDKucqwyPEVOczzfvb1q/wBkXWqR4Sja8nDHGCajAEagHIAx/jourmK0haaV9KrWyrFZLRZJ07MqNhc8Q3M/irfZFlaOGQF2HzOc1cACeYD+o3r0XptYEJKAyMx06TgsxOaupr+MhkIQk6TlfPlkVNCIxBc3A9onLjRG/WtWV1BPFlRp09TpzBHLoufiJ/uN69G05JLxt8C2ksQpTiAMHIq0mQz6HnMnZwurBwBRhKTLLK5Y6Oz/AGf9qwla3u4TykBRh/sdFx8RN9xvWpri43Unv5O6fmNSSSCHGtsb0DGfKrFm3zdZ7o9RUskhMnbbu+NLJJrh7bfqJz869onxjfSY/callk3knvG7x51//8QAIxEAAgEEAQMFAAAAAAAAAAAAAQIRAAMSMRAEIXETMjNBUf/aAAgBAgEBPwBMUTNv3tSdQrgZDYpwMmx0N8PdFv0iBMAyKS4QroF99JcxDhhMntwxgUCoJIER90jZCeG2PBpvjNWtHzx//8QAIBEAAgICAgIDAAAAAAAAAAAAAQIAERASAyEyM0GBkf/aAAgBAwEBPwBtmbURuErdRb1W/nCIW3vqMgJVr8YyWVIyvYG/5CKwJze36jY//9k=",
+    name: "美绪",
+    text: "马什么梅？"
+  },
+  {
+    avatar:
+      "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIADIAMgMBIgACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAAABQIDBAEGB//aAAgBAQAAAAD65hzG3WLcATfCbHYQ9IY0uiEfRkU1IOr+RoUG1ornWj7Y6//EABgBAQADAQAAAAAAAAAAAAAAAAQAAgUD/9oACAECEAAAACEf3IJba51tGDNq/wD/xAAYAQEAAwEAAAAAAAAAAAAAAAAEAQMFAv/aAAgBAxAAAABSg0MWQdj+c6VozP/EAC0QAAIBAwMBBgUFAAAAAAAAAAECEQADBBASMUEiUVJhcZEFExQhgSAyQoKx/9oACAEBAAE/AKu5oEi2A3meKOXf8cfgV9Xe2kEgyOeCKsZSXAqs0XP91z7+wC3MSCzeg/RbuG06uO8T6a5kNkOOu0CpUXWQMdo4kQRPQihPd9tH+4jXIw0yDukq0RNHFu2/iOVku0pfx7foHt91MttbMyN7njqQDo3BPkdWEqRJEjkV8QOV2LVq2xBBlkoq+y181CrgHn1nXHffZQ+UH8aEwCaEoJP9qzbe+ySOUO7XCuxca2f5CR6jS477H7bftPWt7+NvekdzbWXYyo60rvtXtHgda3v4j71Yd/qLPaPJ6+Vb38be9f/EACYRAAECBAQHAQAAAAAAAAAAAAECAwAEEBIREzFSITNBQlFhgXL/2gAIAQIBAT8AffKDYjXqYznd5hhwuI46ijjOOaSfaYUm232Ik9F/KKQFRMN2LHgiJVdrmG6s32fYa5iP0Kf/xAAmEQABAgQFBAMAAAAAAAAAAAABAgMAEBESBBNCUoEhMTNhUXFy/9oACAEDAQE/AGGAoXK4EZLWwQ+2G19Oxk28RlhI9GEqur9xi9HMm3C2qtAfRhhy9J+axiUXIrtnhdfEOeNf5Mv/2Q==",
+    name: "博士",
+    text: "马东什么？"
+  },
+  {
+    avatar:
+      "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIADIAMgMBIgACEQEDEQH/xAAxAAACAgMBAAAAAAAAAAAAAAAABgQFAQIHAwEBAAMBAAAAAAAAAAAAAAAAAwABAgT/2gAMAwEAAhADEAAAAI7CsPnN1VeZ0okpTbSWASKzwmMPRy3PuuWhpv4KvQ7pcJYTUb+hdLQYWJoaVU+RU3jcXiaoegAhWOAPeeaBd1wGtf/EAC4QAAIBAwIEBAUFAQAAAAAAAAECAwAEEQUhBhASMRMiQWEUI3KBoSAzQlFSkv/aAAgBAQABPwDTxidHHbdTyZGjdkcYYelBGKM4HlUgH7/osXInRfQsK0q18abxGHkj/JrV0KXrEfzUGtLiE0F1G48r4GfcVJDJFI0TbMp52W91D9VXt42mWQCu0QUqHZQC7SyDIRA22QO5NXkFyLeFpnWRggYsMZw/+ioAPsRVlOtrpsshx+6d2OFGw3J/oVK897YR6nbfORCTkp0OVQ7lRk5Aq5gMZSVR8qVepfbPpy0jDSRyEZxIg/6JrjKJytlEEJ63uJD7ttXB6Tn41bhW8Mwxxjqzt3OBWrx+Bw9fQsRvIgBzjYutcP3F8upWVmZZltvjFPQW22BqeAJpHh+kWyeyhsL+KXS9RcB1WLpYZGSc4NcKwxTrcRy+qrj2IJIqe3S5AEsSOAcgMobB+9Lb9KhVAAHYCntRIjI6hkYYZWGQRUGm2ltMssVsiSKCAVGMZqWFZ4fDY4XYn7ULaEgF182N/Me9cIuI3kY9gFodLAEHINFgKDKdqwK1LVotOMSsnWz5JAPYUeJZyTiKMVwv2n+la08npcZOBjke3LVWZtRuizE4kI5f/8QAIBEBAAIBAgcAAAAAAAAAAAAAAQARAwIQEiAhMTJBcf/aAAgBAgEBPwDL5HzkadfX0RDjmTSUJtks1MqWpVypk7uxt//EACARAQABAwMFAAAAAAAAAAAAAAEAAhEhAxATEiIxYXH/2gAIAQMBAT8A0m1L9l+2++Sg9sF45p1N7M6iUJYwM5GYW4ZmZT4Njb//2Q==",
+    name: "柚子",
+    text: "什么冬梅？"
+  }
+];
+
+const danmus = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
+
+const getDanmuData = () => {
+  return danmus.map((text, index) => {
+    const _index = index % 3;
+    return {
+      avatar: customDanmus[_index].avatar,
+      name: customDanmus[_index].name,
+      text
+    };
+  });
+};
+
+export { customDanmus, danmus, getDanmuData };

Yi.Pure.Vue3/src/views/able/danmaku/index.vue

@@ -0,0 +1,222 @@
+<script setup lang="ts">
+import { danmus as danmusData, getDanmuData } from "./danmu.js";
+import { onMounted, onUnmounted, reactive, ref } from "vue";
+import VueDanmaku from "vue3-danmaku";
+
+defineOptions({
+  name: "Danmaku"
+});
+
+const danmaku = ref();
+const danmus = ref<any[]>(getDanmuData());
+const danmuMsg = ref<string>("");
+let timer = 0;
+const config = reactive({
+  channels: 5, // 轨道数量，为0则弹幕轨道数会撑满容器
+  useSlot: true, // 是否开启slot
+  loop: true, // 是否开启弹幕循环
+  speeds: 200, // 弹幕速度，实际为弹幕滚动完一整屏的秒数，值越小速度越快
+  fontSize: 20, // 文本模式下的字号
+  top: 10, // 弹幕轨道间的垂直间距
+  right: 0, // 同一轨道弹幕的水平间距
+  debounce: 100, // 弹幕刷新频率（多少毫秒插入一条弹幕，建议不小于50）
+  randomChannel: true // 随机弹幕轨道
+});
+
+onMounted(() => {
+  window.onresize = () => resizeHandler();
+});
+
+onUnmounted(() => {
+  window.onresize = null;
+});
+
+function play(type: string) {
+  switch (type) {
+    case "play":
+      danmaku.value.play();
+      break;
+    case "pause":
+      danmaku.value.pause();
+      break;
+    case "stop":
+      danmaku.value.stop();
+      break;
+    case "show":
+      danmaku.value.show();
+      break;
+    case "hide":
+      danmaku.value.hide();
+      break;
+    case "reset":
+      danmaku.value.reset();
+      break;
+    default:
+      break;
+  }
+}
+
+function switchSlot(slot: boolean) {
+  config.useSlot = slot;
+  danmus.value = slot ? getDanmuData() : danmusData;
+
+  setTimeout(() => {
+    danmaku.value.stop();
+    danmaku.value.play();
+  });
+}
+function speedsChange(val: number) {
+  if (config.speeds <= 10 && val === -10) {
+    return;
+  }
+  config.speeds += val;
+  danmaku.value.reset();
+}
+function fontChange(val: number) {
+  config.fontSize += val;
+  danmaku.value.reset();
+}
+function channelChange(val: number) {
+  if (!config.channels && val === -1) {
+    return;
+  }
+  config.channels += val;
+}
+function resizeHandler() {
+  if (timer) clearTimeout(timer);
+  timer = window.setTimeout(() => {
+    danmaku.value.resize();
+  }, 500);
+}
+function addDanmu() {
+  if (!danmuMsg.value) return;
+  const _danmuMsg = config.useSlot
+    ? {
+        avatar: "https://i.loli.net/2021/01/17/xpwbm3jKytfaNOD.jpg",
+        name: "你",
+        text: danmuMsg.value
+      }
+    : danmuMsg.value;
+  danmaku.value.add(_danmuMsg);
+  danmuMsg.value = "";
+}
+</script>
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          弹幕组件，采用开源的
+          <el-link
+            href="https://github.com/hellodigua/vue-danmaku/tree/vue3"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            vue3-danmaku
+          </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
+        ref="danmaku"
+        v-model:danmus="danmus"
+        class="demo"
+        isSuspend
+        v-bind="config"
+      >
+        <!-- 弹幕slot -->
+        <template v-slot:dm="{ danmu, index }">
+          <div class="danmu-item">
+            <img class="img" :src="danmu.avatar" />
+            <span>{{ index }}{{ danmu.name }}：</span>
+            <span>{{ danmu.text }}</span>
+          </div>
+        </template>
+      </vue-danmaku>
+      <div class="main">
+        <p>
+          播放：
+          <el-button @click="play('play')">播放</el-button>
+          <el-button @click="play('pause')">暂停</el-button>
+          <el-button @click="play('stop')">停止</el-button>
+        </p>
+        <p>
+          模式：
+          <el-button @click="switchSlot(true)">弹幕 slot</el-button>
+          <el-button @click="switchSlot(false)">普通文本</el-button>
+        </p>
+        <p>
+          显示：
+          <el-button @click="play('show')">显示</el-button>
+          <el-button @click="play('hide')">隐藏</el-button>
+        </p>
+        <p>
+          速度：
+          <el-button @click="speedsChange(-10)">减速</el-button>
+          <el-button @click="speedsChange(10)">增速</el-button>
+          <span class="ml-5">当前速度：{{ config.speeds }}像素/s</span>
+        </p>
+        <p>
+          字号：
+          <el-button :disabled="config.useSlot" @click="fontChange(-1)">
+            缩小
+          </el-button>
+          <el-button :disabled="config.useSlot" @click="fontChange(1)">
+            放大
+          </el-button>
+          <span class="ml-5">当前字号：{{ config.fontSize }}px</span>
+        </p>
+        <p>
+          轨道：
+          <el-button @click="channelChange(-1)">-1</el-button>
+          <el-button @click="channelChange(1)">+1</el-button>
+          <el-button @click="channelChange(-config.channels)"> 填满 </el-button>
+          <span class="ml-5">当前轨道：{{ config.channels }}</span>
+        </p>
+        <p class="flex">
+          <el-input
+            v-model="danmuMsg"
+            type="text"
+            placeholder="输入评论后，回车发送弹幕"
+            @keyup.enter="addDanmu"
+          />
+        </p>
+      </div>
+    </div>
+  </el-card>
+</template>
+<style lang="scss" scoped>
+.demo {
+  flex: 1;
+  height: 600px;
+  background: linear-gradient(45deg, #5ac381, #20568b);
+
+  .danmu-item {
+    display: flex;
+    align-items: center;
+
+    .img {
+      width: 25px;
+      height: 25px;
+      margin-right: 5px;
+      border-radius: 50%;
+    }
+  }
+}
+
+.main {
+  flex: 1;
+
+  p {
+    margin-top: 10px;
+  }
+}
+</style>

Yi.Pure.Vue3/src/views/able/debounce.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { message } from "@/utils/message";
+import { debounce, throttle } from "@pureadmin/utils";
+
+defineOptions({
+  name: "Debounce"
+});
+
+const handle = () => message("恭喜你，这是一条成功消息", { type: "success" });
+
+const immediateDebounce = debounce(handle, 1000, true);
+
+const debounceClick = debounce(handle, 1000);
+
+const throttleClick = throttle(handle);
+</script>
+
+<template>
+  <div>
+    <el-card class="mb-5" shadow="never">
+      <template #header>
+        <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
+        秒内又触发了事件，则会重新计算函数执行时间。
+      </div>
+      <el-button @click="immediateDebounce">
+        连续点击我，只会执行第一次点击事件，立即执行
+      </el-button>
+      <el-button @click="debounceClick">
+        连续点击我，只会执行最后一次点击事件，延后执行
+      </el-button>
+    </el-card>
+    <el-card shadow="never">
+      <template #header>
+        <div class="font-medium">节流：throttle</div>
+      </template>
+      <div class="mb-5">
+        所谓节流，就是指连续触发事件但是在 n
+        秒中只执行一次函数。节流会稀释函数的执行频率。
+      </div>
+      <el-button @click="throttleClick">
+        连续点击我，每一秒只会执行一次点击事件
+      </el-button>
+    </el-card>
+  </div>
+</template>

Yi.Pure.Vue3/src/views/able/directives.vue

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { message } from "@/utils/message";
+
+defineOptions({
+  name: "Directives"
+});
+
+const search = ref("");
+const searchTwo = ref("");
+const searchThree = ref("");
+const searchFour = ref("");
+const searchFive = ref("");
+const searchSix = ref("copy");
+const text = ref("可复制的文本");
+const long = ref(false);
+const cbText = ref("");
+const idx = ref(0);
+
+function onInput() {
+  message(search.value);
+}
+function onInputTwo() {
+  message(searchTwo.value);
+}
+function onInputThree({ name, sex }) {
+  message(`${name}${sex}${searchThree.value}`);
+}
+
+function onInputFour() {
+  message(searchFour.value);
+}
+function onInputFive({ name, sex }) {
+  message(`${name}${sex}${searchFive.value}`);
+}
+
+function onLongpress() {
+  long.value = true;
+}
+function onCustomLongpress() {
+  long.value = true;
+}
+function onCbLongpress() {
+  idx.value += 1;
+  long.value = true;
+  cbText.value = `持续回调${idx.value}次`;
+}
+function onReset() {
+  long.value = false;
+  cbText.value = "";
+  idx.value = 0;
+}
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <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">
+      防抖指令（连续输入，只会执行第一次点击事件，立即执行）
+      <el-input
+        v-model="search"
+        v-optimize="{
+          event: 'input',
+          fn: onInput,
+          immediate: true,
+          timeout: 1000
+        }"
+        class="!w-[200px]"
+        clearable
+        @clear="onInput"
+      />
+    </div>
+    <div class="mb-2">
+      防抖指令（连续输入，只会执行最后一次事件，延后执行）
+      <el-input
+        v-model="searchTwo"
+        v-optimize="{ event: 'input', fn: onInputTwo, timeout: 400 }"
+        class="!w-[200px]"
+        clearable
+      />
+    </div>
+    <div>
+      防抖指令（连续输入，只会执行最后一次事件，延后执行，传参用法）
+      <el-input
+        v-model="searchThree"
+        v-optimize="{
+          event: 'input',
+          fn: onInputThree,
+          timeout: 400,
+          params: { name: '小明', sex: '男' }
+        }"
+        class="!w-[200px]"
+        clearable
+      />
+    </div>
+
+    <el-divider />
+
+    <div class="mb-2">
+      节流指令（连续输入，每一秒只会执行一次事件）
+      <el-input
+        v-model="searchFour"
+        v-optimize:throttle="{ event: 'input', fn: onInputFour, timeout: 1000 }"
+        class="!w-[200px]"
+        clearable
+      />
+    </div>
+    <div>
+      节流指令（连续输入，每一秒只会执行一次事件，传参用法）
+      <el-input
+        v-model="searchFive"
+        v-optimize:throttle="{
+          event: 'input',
+          fn: onInputFive,
+          params: { name: '小明', sex: '男' }
+        }"
+        class="!w-[200px]"
+        clearable
+      />
+    </div>
+
+    <el-divider />
+
+    <div class="mb-2">
+      文本复制指令（双击输入框内容即可复制）
+      <el-input v-model="searchSix" v-copy="searchSix" class="!w-[200px]" />
+    </div>
+    <div>
+      文本复制指令（自定义触发事件，单击复制）
+      <span v-copy:click="text" class="text-sky-500">{{ text }}</span>
+    </div>
+
+    <el-divider />
+    <el-space wrap>
+      长按指令
+      <el-button v-longpress="onLongpress">长按（默认500ms）</el-button>
+      <el-button v-longpress:1000="onCustomLongpress">
+        自定义长按时长（1000ms）
+      </el-button>
+      <el-button v-longpress:2000:200="onCbLongpress">
+        2秒后每200ms持续回调
+      </el-button>
+      <el-button @click="onReset"> 重置状态 </el-button>
+      <el-tag :type="long ? 'success' : 'info'" class="ml-2" size="large">
+        {{ long ? "当前为长按状态" : "当前非长按状态" }}
+      </el-tag>
+      <el-tag v-if="cbText" type="danger" class="ml-2" size="large">
+        {{ cbText }}
+      </el-tag>
+    </el-space>
+  </el-card>
+</template>

Yi.Pure.Vue3/src/views/able/download.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import {
+  downloadByOnlineUrl,
+  downloadByBase64,
+  downloadByData,
+  downloadByUrl
+} from "@pureadmin/utils";
+import axios from "axios";
+
+defineOptions({
+  name: "Download"
+});
+
+const base64 =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALEAAAAwCAYAAABexZu4AAAAAXNSR0IArs4c6QAAC5pJREFUeF7tnQ9wFNUdx7+/vQQsiOb2orHyp0JuQ/1TpFVbS+2I7RS1aqdlKu2oU2WqQvbQFmtrO7QFpp22U0ZhgNuQInXa6rTFKo5oi3XGPzNqiwIWBDTZS2Boi8aQDQxYId7tr/M2CZNc7u69vdtLLrI7k2GG/b3fe+/3Pvu737597/cIRVw1ydaZEWAmE13MwEwCojj5R+PA/B4IxwA6RuD3uPff3UzYRhneU/X++7s7vn/xe0VUHRYJLTDEAqRqk5qV+2q0senbANwKYKZquVxyBHQy0eNw+XEnYfy9FF0jWbZmjT1bVv/hu4wXZDK57st0V42pbjm04Ly3i9FdzjKnr7bPqiJcWKiOYm2ST6cSxHqyZRkocivA5wVvAH7NMRs+raR34+4xNR1jZ1VrJ7Z1Ji46plSmTEJRy36eACnEbgZX+R00Vd2OaSiNX5lMkFOtbtksq4+BF7pN4yqZnOr9gkbQ19uT8AEeAHCjqkLfckRvOI3xGYXKCa+kRehegL8A4CN9sq8A2qOOWb/Kd50BFFAFLYR4qLGHDWLdap0P0G8DGO+CKgi0rsuMN+YTija1XU/sbs6rhPmPTqLhpnK3M1t/CHFui1eMJ44lW29jooeGAwwm3NLdaDySq67aDZ0T3BOH3wJwbqG2cET7fPeC+peGo739dYQQVzDEsWTbZUzuq8MFhEvpqYcbz9+fqz49aX8bhAcV2rLBMY3bFeQCEwkhrlCI61bsHN8zftyLBFwS2GgXVrTHMY2L8onoVmszQHcqtKWwnnX2BewiKdNDGhLOQmOvTE7cDyGuUIhjVurHDP6ZyiAGJFPQg+pW6jGA58rrYscxG2L55HpfDPG8TI+fl7AQ4gqEONrcdialM6+DaKpssIfcJ7wFF7tAfICAA3DpgKtpaWL3HCLUMXMdiOoYqBs0LcW43UkYG/LVF2tKLWLmNdL2SF7uQoilFgxMYERf7HTL/i6Alb56w+5ykLbFMY1/+innQaW5s92eMasOL556OF/ZM9fan9I0vELA2IL6JQ9DCLGf0SlNduQg3sgR/VDbDoALztcO6p6GC1Xjx1LMEk3avyTCDwvoeMYxjWsK1RFCXMoI+Cs7YhDH1rXNZdd9TLW5THRFd2P8ZVX5UuV6vxhqS7P1EOORyJjI9969Y1pHCHGpVg6m/IhBHG1K/ZyYl6h0g4AlXabxCxXZIGX0ZOoaBl8JwuXE2A7CVsc0HlWpI/TEKlYKRmbEINYt+xkAc2TdYGB7t2lcKpOrtPshxMM3IiMD8VLW9LqUWEzTvyYhb48ZtKDbjP9m+EwSTE0hxMHYUUVLMRDrydQsIDOHNS1GzLUgisHlQwy0E1O7y2gvtIiKate1Xeq67msKDTzomMZEBbnARHx8/p6XK7Q4e317XbonczFAM0C8opSG9aRx9rG7jc5+HZU4TxxN2kkQLijUTw042mUaX5HZQvRPJkPsvugkpi8bKKcKcSRSfZObPrGASbuZgLisLoB2gTObsusT5Uh1ao2AzSqdlzdGXSLfC90QDewu7+9cbfP+j3Km56cswAXE3+nqNeaXzP4QUokQqwAkeqiyhFNFV67VaKrlVJax5hmNIV9nSU/aD4CwWDrQA0CRygYkUAzEymV8trEUiH1WBYpgqcogZ8OoAlAlQOzXHtnyDKS6TcPo/3+KJu3fEeFbMsVM2g3djfVPyeSCvK8M5IAHTLmMz4YWC7HPanyJn6oQ9xnpUcc05nnhRKzJ3syM62XW0zTtskML67cVkvMAKvJiihzMfmlUBjKE2LP6qeKJT3pgjW7tWhj/PelN9itgfFbGXkTTGjoX1tv55JSBK1DREM+S5yNHoZhYb7KXglH0w5SveaEnHmqZYmNiGWs+7j/nmMYXSbdSLQA3yApWE9V1NMbfDSHutYDqi53MrqXcP8XDiV7TMV0rZicOAci7jLHfyHoap6XuNk5UPMSq3tsnPaEnDt4TE/A6AzuI+aWMS97GCNJwtWStzOCGMO4XEEt3p4pSThqnYRRALNqaa7u76nrifGxnT7aHnhgoIZz4mwb6ySEzvj2vU7TsbjGUCr5mJ+lWa5eYLpYJZ0/2Z8tXSkycqx8j+cVOZtdS7o/acEJhuja6ru3L5LpPq9iHopZtq3wxyUQQP7LAaKv0cCKEWD7sI/2xAwoQi17oVuurAF0m65EIJ8SC9s/IBDMuLjmyyNgRQuzzxY6wDK7rK8kJk3blh/pjhzLE9p8AfEPGpoD4rwCulQnK9p+F4URuC8rslquUarz9YQ4nej2xfT+Ae2RsUixpP8yEm2WCYLrXScSF0rxXvvxhKi9V3stjVlom5QdD8mSPZEwcQpwDF3VPrLRljqJW62oC3SWHuPhMO8ozICHE3jCEnriXxpjV8lWGtknGJil7O6DVMY3pMoW57ocQ+8uMGULcS5GebJ8DyogNGwUvqrVSl7jggmsi+jUU89PYF9uozUWHnjj0xANw1ZP210GQbkHz3pp1y/6vLN+ZkGOG1Z0wErInI/t+6IlDTzyICeWYuG0+4EqTWvZBrJYuihmdFMFsv1v1Q4hDiIuCONn6HRBJU/d6EEct+xYC/qDoYQvmPQtj4sEWKCYEC2Pi/hc7tbRqHsQ1a/d+TNOqc2amzAWl3yTJoSeuLE9M5E7qapwuQsi8l8qYFb12QjGciFn2DgY+KXOuJ78kRS17LQHK8a7ogKZpa7oW1j8uq0TFIEJHueaJo02pz4mVUrJ2QpIOa2B5VW85zJ5Y7FofL+unSptUxqycEOtrW78EjVTOczl6EmJ9tX0BqrDV/8ZKeo3ALQzaT8StYPdthhZlUBTgKBhTiGDKDFtOiGut9ukuMiJZt+wSCVkulwn1hWAVd2aHbqX2qZ2rQiscM/6DfP3Um+yrwdgis0MpEFf/7/iKQidoKe/9BHYO+qYfs+xfMXCfrPHlul8uTzyhuaW2OqOd3G4vaf/LGvBrYtrbmYinvHNLTmCys8j4R+V7YrUFM14/2F2uRaqeihw99qY77owJGUqLQ4XEAyyS6EiXIXgqchwgo+LB++x4kEBPZjL8Z1Sl94tE67GmFpESYiKY5jNooRJnTM2DII6u2j2Fxpy2FeBzlBQELFQuiEUzfRg3d6+y4rhKDCdE3gnVX70ghq5EiINoAth1rxuyusrnTEUgDelXUmaIN5Z0CtRogFh2SE+go1WyJw6iNe2OadTnXCIYs+wEA2uDqMWPjnJCHLVSdxK42U97BsmOBoi9ROnubhAmFd1PHwUrwBMvdkxjVd51rjHL/hEDw5r9spwQn/Hgv/WqnuNvqHyZzDmOowBiL2xqsheDvbMHy36NJMQMeqLbjH9NdLLwYYyWfaOXHUhhS3/JFmPe5CQaBp3Pobw4SXHeMdpk30yMh4tq6yiBuC/+Ly10GmggRgcIdbls5h9iehrg64qy/+BCe6BhXv+XY6UdB97T7eKeMv1MPZZJ474jdw/d+hQ0xN4AJ+05IIiE4v5ytI0iiAMC+TjAawESx8GJh2LI5R9izBNHVzBhCRgfLxLmQQBLPfHASsTB09URnktEwltKcxlLGriFiZ+PUOS5QlmF+hazi4Ma8x7G6K3nICRUE26LdkXXvPkJqqoSJ6beBHEojsqVBXHMsp9k4AZZUdkG21zlVXXL9sr1JYsUefamyNo54P4eAM8yIg91m9N2eZlFP8i8kxPiHAvCCs4CVWOyc4fxHxHaRXqO30HgbwKketj9QbC7Xqsa25x9MLuSJ87ugAB6rOZewRSZxuBpBExjwlkERAUj3p/3M8QdAL3DQAeBO5h4ezrjPnt00fldPoxaNtGalftqImN7ZgPa5Sz6AHh9AZAB0AJGi0gsThG84HfRU9kaXYRiXYSFvXPAE8E8EUTnEjCRAbHTvb03D3Bmnwt64nCi4V9FVFF0EW+5JTDL+5UXfy4me/+e5EfbC3L/kuHjzx0xZ4ht/EOu/wNFbO2YhmAeMQAAAABJRU5ErkJggg==";
+
+function down() {
+  axios
+    .get("https://xiaoxian521.github.io/hyperlink/img/pure.png", {
+      responseType: "blob"
+    })
+    .then(({ data }) => {
+      downloadByData(data, "test-data.png");
+    });
+}
+</script>
+
+<template>
+  <el-card shadow="never">
+    <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/able/download.vue"
+        target="_blank"
+      >
+        代码位置 src/views/able/download.vue
+      </el-link>
+    </template>
+    <div class="flex flex-wrap">
+      <el-button
+        @click="
+          downloadByOnlineUrl(
+            'https://xiaoxian521.github.io/hyperlink/img/pure.png',
+            'test-url.png'
+          )
+        "
+      >
+        下载在线图片
+      </el-button>
+
+      <el-button @click="downloadByBase64(base64, 'test-base64.png')">
+        基于 base64 下载图片
+      </el-button>
+
+      <el-button
+        @click="
+          downloadByUrl(
+            'https://github.com/xiaoxian521/xiaoxian521/archive/refs/heads/main.zip',
+            'xiaoxian521.zip'
+          )
+        "
+      >
+        根据文件地址下载文件
+      </el-button>
+
+      <el-button @click="down"> 根据后台接口文件流下载 </el-button>
+    </div>
+  </el-card>
+</template>

Yi.Pure.Vue3/src/views/able/draggable.vue

@@ -0,0 +1,230 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import Sortable, { Swap } from "sortablejs";
+import draggable from "vuedraggable/src/vuedraggable";
+import { useAppStoreHook } from "@/store/modules/app";
+
+defineOptions({
+  name: "Draggable"
+});
+
+const { setSortSwap } = useAppStoreHook();
+
+const gridLists = ref<Array<Object>>([
+  { grid: "cn", num: 1 },
+  { grid: "cn", num: 2 },
+  { grid: "cn", num: 3 },
+  { grid: "cn", num: 4 },
+  { grid: "cn", num: 5 },
+  { grid: "cn", num: 6 },
+  { grid: "cn", num: 7 },
+  { grid: "cn", num: 8 },
+  { grid: "cn", num: 9 }
+]);
+
+const lists = ref<Array<Object>>([
+  { people: "cn", id: 1, name: "www.itxst.com" },
+  { people: "cn", id: 2, name: "www.baidu.com" },
+  { people: "cn", id: 3, name: "www.taobao.com" },
+  { people: "cn", id: 4, name: "www.google.com" }
+]);
+
+const cutLists = ref([
+  { people: "cn", id: 1, name: "cut1" },
+  { people: "cn", id: 2, name: "cut2" },
+  { people: "cn", id: 3, name: "cut3" },
+  { people: "cn", id: 4, name: "cut4" }
+]);
+
+const change = (evt): void => {
+  console.log("evt: ", evt);
+};
+
+onMounted(() => {
+  if (!useAppStoreHook().sortSwap) Sortable.mount(new Swap());
+  setSortSwap(true);
+  new Sortable(document.querySelector(".cut-container"), {
+    swap: true,
+    forceFallback: true,
+    chosenClass: "chosen",
+    swapClass: "highlight",
+    animation: 300
+  });
+});
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          拖拽组件，采用开源的
+          <el-link
+            href="https://sortablejs.github.io/vue.draggable.next/#/simple"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            vuedraggable
+          </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列表拖拽 -->
+      <el-row :gutter="25">
+        <el-col :xs="25" :sm="8" :md="8" :lg="8">
+          <el-card shadow="never">
+            <template #header>
+              <div class="card-header">
+                <span>grid列表拖拽</span>
+              </div>
+            </template>
+            <draggable
+              v-model="gridLists"
+              class="grid-container"
+              item-key="grid"
+              animation="300"
+              chosenClass="chosen"
+              forceFallback="true"
+            >
+              <template #item="{ element }">
+                <div :class="'item' + ' ' + 'item-' + element.num">
+                  {{ element.num }}
+                </div>
+              </template>
+            </draggable>
+          </el-card>
+        </el-col>
+
+        <el-col :xs="25" :sm="8" :md="8" :lg="8">
+          <el-card shadow="never">
+            <template #header>
+              <div class="card-header">
+                <span>单列拖拽</span>
+              </div>
+            </template>
+            <!-- 单列拖拽 -->
+            <draggable
+              v-model="lists"
+              item-key="name"
+              chosen-class="chosen"
+              force-fallback="true"
+              animation="300"
+              @change="change"
+            >
+              <template #item="{ element, index }">
+                <div class="item-single">{{ element.name }} {{ index }}</div>
+              </template>
+            </draggable>
+          </el-card>
+        </el-col>
+
+        <el-col :xs="25" :sm="8" :md="8" :lg="8">
+          <el-card shadow="never">
+            <template #header>
+              <div class="card-header">
+                <span>拖拽实现元素位置交换</span>
+              </div>
+            </template>
+            <!-- 拖拽实现元素位置切换 -->
+            <div class="cut-container">
+              <div
+                v-for="(item, index) in cutLists"
+                :key="index"
+                class="item-cut"
+              >
+                <p>{{ item.name }}</p>
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+  </el-card>
+</template>
+
+<style lang="scss" scoped>
+/* grid列表拖拽 */
+.grid-container {
+  display: grid;
+  grid-template-rows: 33.3% 33.3% 33.3%;
+  grid-template-columns: 33.3% 33.3% 33.3%;
+}
+
+.item-single {
+  height: 77px;
+  font-size: 1.5em;
+  line-height: 85px;
+  text-align: center;
+  cursor: move;
+  border: 1px solid #e5e4e9;
+}
+
+.item-cut {
+  height: 77px;
+  font-size: 1.5em;
+  line-height: 77px;
+  text-align: center;
+  cursor: move;
+  border: 1px solid #e5e4e9;
+}
+
+.item {
+  font-size: 2em;
+  line-height: 100px;
+  text-align: center;
+  cursor: move;
+  border: 1px solid #e5e4e9;
+
+  @media screen and (width <= 750px) {
+    line-height: 90px;
+  }
+}
+
+.item-1 {
+  background-color: #ef342a;
+}
+
+.item-2 {
+  background-color: #f68f26;
+}
+
+.item-3 {
+  background-color: #4ba946;
+}
+
+.item-4 {
+  background-color: #0376c2;
+}
+
+.item-5 {
+  background-color: #c077af;
+}
+
+.item-6 {
+  background-color: #f8d29d;
+}
+
+.item-7 {
+  background-color: #b5a87f;
+}
+
+.item-8 {
+  background-color: #d0e4a9;
+}
+
+.item-9 {
+  background-color: #4dc7ec;
+}
+
+.chosen {
+  border: solid 2px #3089dc !important;
+}
+</style>

Yi.Pure.Vue3/src/views/able/excel.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { utils, writeFile } from "xlsx";
+
+defineOptions({
+  name: "Excel"
+});
+
+interface DataItem {
+  readonly id: string;
+  [propName: string]: string;
+}
+
+interface Columns {
+  dataKey: string;
+  key: string;
+  title: string;
+  width?: number;
+  [propName: string]: string | number;
+}
+
+const generateColumns = (length = 10, prefix = "column-", props?: any) =>
+  Array.from({ length }).map((_, columnIndex) => ({
+    ...props,
+    key: `${prefix}${columnIndex}`,
+    dataKey: `${prefix}${columnIndex}`,
+    title: `Column ${columnIndex}`,
+    width: 150
+  }));
+
+const generateData = (
+  columns: ReturnType<typeof generateColumns>,
+  length = 200,
+  prefix = "row-"
+) =>
+  Array.from({ length }).map((_, rowIndex) => {
+    return columns.reduce(
+      (rowData, column, columnIndex) => {
+        rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`;
+        return rowData;
+      },
+      {
+        id: `${prefix}${rowIndex}`,
+        parentId: null
+      }
+    );
+  });
+
+const columns = generateColumns(10);
+const data = generateData(columns, 1000);
+
+const exportExcel = () => {
+  const res: string[][] = data.map((item: DataItem) => {
+    const arr = [];
+    columns.forEach((column: Columns) => {
+      arr.push(item[column.dataKey]);
+    });
+    return arr;
+  });
+  const titleList: string[] = [];
+  columns.forEach((column: Columns) => {
+    titleList.push(column.title);
+  });
+  res.unshift(titleList);
+  const workSheet = utils.aoa_to_sheet(res);
+  const workBook = utils.book_new();
+  utils.book_append_sheet(workBook, workSheet, "数据报表");
+  writeFile(workBook, "tableV2.xlsx");
+};
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="font-medium">
+        <el-link
+          href="https://github.com/SheetJS/sheetjs"
+          target="_blank"
+          style="margin: 0 5px 4px 0; font-size: 16px"
+        >
+          导出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">
+      <el-auto-resizer>
+        <template #default="{ height, width }">
+          <el-table-v2
+            :columns="columns"
+            :data="data"
+            :width="width"
+            :height="height"
+            fixed
+          />
+        </template>
+      </el-auto-resizer>
+    </div>
+  </el-card>
+</template>

Yi.Pure.Vue3/src/views/able/infinite-scroll.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { default as vElTableInfiniteScroll } from "el-table-infinite-scroll";
+
+defineOptions({
+  name: "InfiniteScroll"
+});
+
+const dataTemplate = new Array(10).fill({
+  date: "2022-08-24",
+  name: "RealityBoy",
+  age: "18"
+});
+
+const data = ref([]);
+const page = ref(0);
+const total = ref(10);
+const isBottom = ref(false);
+
+const load = () => {
+  if (isBottom.value) return;
+
+  page.value++;
+  if (page.value <= total.value) {
+    data.value = data.value.concat(dataTemplate);
+  }
+
+  if (page.value === total.value) {
+    isBottom.value = true;
+  }
+};
+</script>
+
+<template>
+  <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"
+        >
+          表格无限滚动
+        </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
+      v-el-table-infinite-scroll="load"
+      border
+      height="435px"
+      :data="data"
+      :infinite-scroll-disabled="isBottom"
+    >
+      <el-table-column width="80" type="index" label="序号" />
+      <el-table-column prop="date" label="日期" />
+      <el-table-column prop="name" label="名称" />
+      <el-table-column prop="age" label="年龄" />
+    </el-table>
+  </el-card>
+</template>

Yi.Pure.Vue3/src/views/able/line-tree.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { clone } from "@pureadmin/utils";
+import { transformI18n } from "@/plugins/i18n";
+import ElTreeLine from "@/components/ReTreeLine";
+import { extractPathList, deleteChildren } from "@/utils/tree";
+import { usePermissionStoreHook } from "@/store/modules/permission";
+
+defineOptions({
+  name: "LineTree"
+});
+
+const menusTree = clone(usePermissionStoreHook().wholeMenus, true);
+const menusData = computed(() => {
+  return deleteChildren(menusTree);
+});
+const expandedKeys = extractPathList(menusData.value);
+const dataProps = {
+  value: "uniqueId",
+  children: "children"
+};
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <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>
+
+    <el-row :gutter="24">
+      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="mb-[20px]">
+        <el-card shadow="never">
+          <template #header>
+            <div class="card-header">普通树结构</div>
+          </template>
+          <div class="max-h-[550px] overflow-y-auto">
+            <el-tree
+              :data="menusData"
+              :props="dataProps"
+              show-checkbox
+              default-expand-all
+              node-key="uniqueId"
+              :indent="30"
+              ><template v-slot:default="{ node }">
+                <el-tree-line :node="node" :showLabelLine="true">
+                  <template v-slot:node-label>
+                    <span class="text-sm">
+                      {{ transformI18n(node.data.meta.title) }}
+                    </span>
+                  </template>
+                </el-tree-line>
+              </template>
+            </el-tree>
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+        <el-card shadow="never">
+          <template #header>
+            <div class="card-header">虚拟树结构</div>
+          </template>
+          <div class="max-h-[550px] overflow-y-auto">
+            <el-tree-v2
+              :data="menusData"
+              :props="dataProps"
+              show-checkbox
+              :height="550"
+              :default-expanded-keys="expandedKeys"
+            >
+              <template v-slot:default="{ node }">
+                <el-tree-line
+                  :node="node"
+                  :treeData="menusData"
+                  :showLabelLine="true"
+                  :indent="30"
+                >
+                  <template v-slot:node-label>
+                    <span class="text-sm">
+                      {{ transformI18n(node.data.meta.title) }}
+                    </span>
+                  </template>
+                </el-tree-line>
+              </template>
+            </el-tree-v2>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </el-card>
+</template>

Yi.Pure.Vue3/src/views/able/map.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { Amap } from "@/components/ReMap";
+
+defineOptions({
+  name: "MapPage"
+});
+</script>
+
+<template>
+  <Amap />
+</template>
+
+<style scoped>
+.main-content {
+  margin: 2px 0 0 !important;
+}
+</style>

Yi.Pure.Vue3/src/views/able/menu-tree.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { clone } from "@pureadmin/utils";
+import type { ElTreeV2 } from "element-plus";
+import { transformI18n } from "@/plugins/i18n";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { extractPathList, deleteChildren } from "@/utils/tree";
+import { usePermissionStoreHook } from "@/store/modules/permission";
+import type { TreeNode } from "element-plus/es/components/tree-v2/src/types";
+import NodeTree from "@iconify-icons/ri/node-tree";
+
+defineOptions({
+  name: "MenuTree"
+});
+
+interface treeNode extends TreeNode {
+  meta: {
+    title: string;
+  };
+}
+
+const query = ref("");
+const dataProps = ref({
+  value: "uniqueId",
+  children: "children"
+});
+const treeRef = ref<InstanceType<typeof ElTreeV2>>();
+const menusTree = clone(usePermissionStoreHook().wholeMenus, true);
+
+const menusData = computed(() => {
+  return deleteChildren(menusTree);
+});
+
+const expandedKeys = extractPathList(menusData.value);
+
+const onQueryChanged = (query: string) => {
+  (treeRef as any).value!.filter(query);
+};
+
+const filterMethod = (query: string, node: treeNode) => {
+  return transformI18n(node.meta.title)!.indexOf(query) !== -1;
+};
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          菜单树结构（采用 Element Plus 的
+          <el-link
+            href="https://element-plus.gitee.io/zh-CN/component/tree-v2.html"
+            target="_blank"
+            :icon="useRenderIcon(NodeTree)"
+            style="margin: 0 5px 4px 0; font-size: 16px"
+          >
+            Tree V2
+          </el-link>
+          组件并支持国际化）
+        </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"
+      class="mb-4"
+      placeholder="请输入关键字查找"
+      clearable
+      @input="onQueryChanged"
+    />
+    <el-tree-v2
+      ref="treeRef"
+      :data="menusData"
+      :props="dataProps"
+      show-checkbox
+      :height="500"
+      :filter-method="filterMethod"
+      :default-expanded-keys="expandedKeys"
+    >
+      <template #default="{ data }">
+        <span>{{ transformI18n(data.meta.title) }}</span>
+      </template>
+    </el-tree-v2>
+  </el-card>
+</template>

Yi.Pure.Vue3/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>

Yi.Pure.Vue3/src/views/able/pdf.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+import VuePdfEmbed from "vue-pdf-embed";
+
+defineOptions({
+  name: "Pdf"
+});
+
+const { t } = useI18n();
+const pdfRef = ref<any>();
+const pageCount = ref(1);
+const loading = ref(true);
+const currentPage = ref(1);
+const currentRotation = ref(0);
+const showAllPages = ref(false);
+const rotations = [0, 90, 180, 270];
+
+const source =
+  "https://xiaoxian521.github.io/hyperlink/pdf/Cookie%E5%92%8CSession%E5%8C%BA%E5%88%AB%E7%94%A8%E6%B3%95.pdf";
+
+const handleDocumentRender = () => {
+  loading.value = false;
+  pageCount.value = pdfRef.value.doc.numPages;
+};
+
+const showAllPagesChange = () => {
+  currentPage.value = showAllPages.value ? null : 1;
+};
+
+const onPrint = () => {
+  // 如果在打印时，打印页面是本身的两倍，在打印配置 页面 设置 仅限页码为奇数的页面 即可
+  pdfRef.value.print();
+};
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="font-medium">
+        <el-link
+          href="https://github.com/hrynko/vue-pdf-embed"
+          target="_blank"
+          style="margin: 0 5px 4px 0; font-size: 16px"
+        >
+          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-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">
+          共{{ pageCount }}页
+        </div>
+        <div v-else>
+          <el-pagination
+            v-model:current-page="currentPage"
+            background
+            layout="prev, slot, next"
+            :page-size="1"
+            :total="pageCount"
+          >
+            {{ currentPage }} / {{ pageCount }}
+          </el-pagination>
+        </div>
+        <div class="w-[170px] flex-bc">
+          <el-checkbox v-model="showAllPages" @change="showAllPagesChange">
+            显示所有页面
+          </el-checkbox>
+          <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>
+        <vue-pdf-embed
+          ref="pdfRef"
+          class="h-full container overflow-auto"
+          :rotation="rotations[currentRotation]"
+          :page="currentPage"
+          :source="source"
+          @rendered="handleDocumentRender"
+        />
+      </el-scrollbar>
+    </div>
+  </el-card>
+</template>

Yi.Pure.Vue3/src/views/able/pinyin.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { html } from "pinyin-pro";
+
+defineOptions({
+  name: "Pinyin"
+});
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <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('带 音 调')" />
+    <p class="mt-2" v-html="html('不 带 音 调', { toneType: 'none' })" />
+    <p class="mt-2 custom" v-html="html('自 定 义 样 式')" />
+  </el-card>
+</template>
+
+<style lang="scss" scoped>
+.custom {
+  /* 汉字的样式 */
+  :deep(.py-chinese-item) {
+    color: #409eff;
+  }
+
+  /* 拼音的样式 */
+  :deep(.py-pinyin-item) {
+    color: #f56c6c;
+  }
+}
+</style>

Yi.Pure.Vue3/src/views/able/print/index.vue

@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import Print from "@/utils/print";
+import pieChart from "./pieChart.vue";
+
+defineOptions({
+  name: "Print"
+});
+
+interface User {
+  date: string;
+  name: string;
+  age: number;
+  address: string;
+}
+
+const value = ref("1");
+
+const options = [
+  {
+    value: "1",
+    el: ".el-table",
+    label: "Table"
+  },
+  {
+    value: "2",
+    el: ".echart",
+    label: "Echart"
+  },
+  {
+    value: "3",
+    el: ".img",
+    label: "Image"
+  }
+];
+
+function onPrint() {
+  const el = options.filter(v => v.value === value.value)[0]?.el;
+  Print(el).toPrint;
+}
+
+const tableRowClassName = ({ rowIndex }: { row: User; rowIndex: number }) => {
+  if (rowIndex === 1) {
+    return "warning-row";
+  } else if (rowIndex === 3) {
+    return "success-row";
+  }
+  return "";
+};
+
+const tableData: User[] = [
+  {
+    date: "2016-05-03",
+    name: "Tom",
+    age: 18,
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    age: 18,
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    age: 18,
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    age: 18,
+    address: "No. 189, Grove St, Los Angeles"
+  }
+];
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">打印功能（报表、图表、图片）</span>
+        <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
+        v-motion
+        :xs="24"
+        :sm="24"
+        :md="24"
+        :lg="24"
+        :xl="24"
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 200
+          }
+        }"
+      >
+        <p class="font-medium text-lg text-center">Table</p>
+        <el-table
+          border
+          :data="tableData"
+          :row-class-name="tableRowClassName"
+          class="el-table w-full mt-[10px]"
+        >
+          <el-table-column prop="date" label="Date" />
+          <el-table-column prop="name" label="Name" />
+          <el-table-column prop="age" label="age" />
+          <el-table-column prop="address" label="Address" />
+        </el-table>
+      </el-col>
+
+      <el-col
+        v-motion
+        :xs="11"
+        :sm="11"
+        :md="11"
+        :lg="11"
+        :xl="11"
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 200
+          }
+        }"
+      >
+        <p class="font-medium text-lg text-center">Echart</p>
+        <pieChart class="echart mt-[10px]" />
+      </el-col>
+
+      <el-col
+        v-motion
+        :xs="11"
+        :sm="11"
+        :md="11"
+        :lg="11"
+        :xl="11"
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 200
+          }
+        }"
+      >
+        <p class="font-medium text-lg text-center">Image</p>
+        <img
+          src="https://pure-admin-utils.netlify.app/logo.png"
+          alt="avatars"
+          class="img mt-[10px] m-auto"
+        />
+      </el-col>
+    </el-row>
+  </el-card>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-table__row.warning-row) {
+  --el-table-tr-bg-color: var(--el-color-warning-light-9);
+}
+
+:deep(.el-table__row.success-row) {
+  --el-table-tr-bg-color: var(--el-color-success-light-9);
+}
+</style>

Yi.Pure.Vue3/src/views/able/print/pieChart.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { useDark, useECharts } from "@pureadmin/utils";
+
+const { isDark } = useDark();
+
+const theme = computed(() => (isDark.value ? "dark" : "light"));
+
+const pieChartRef = ref();
+const { setOptions } = useECharts(pieChartRef, {
+  theme
+});
+
+setOptions({
+  tooltip: {
+    trigger: "item"
+  },
+  legend: {
+    icon: "circle",
+    //@ts-expect-error
+    right: true
+  },
+  series: [
+    {
+      name: "饼图",
+      type: "pie",
+      top: "20%",
+      radius: "80%",
+      center: ["40%", "50%"],
+      color: ["#e6a23c", "#f56c6c", "#53a7ff"],
+      data: [
+        { value: 400, name: "watchers" },
+        { value: 1600, name: "forks" },
+        { value: 7200, name: "star" }
+      ]
+    }
+  ]
+});
+</script>
+
+<template>
+  <div ref="pieChartRef" style="width: 100%; height: 35vh" />
+</template>

Yi.Pure.Vue3/src/views/able/qrcode.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { ref, unref } from "vue";
+import { message } from "@/utils/message";
+import ReQrcode from "@/components/ReQrcode";
+
+defineOptions({
+  name: "QrCode"
+});
+
+const qrcodeText = "vue-pure-admin";
+
+const asyncTitle = ref("");
+setTimeout(() => {
+  asyncTitle.value = unref(qrcodeText);
+}, 3000);
+const codeClick = () => {
+  message("点击事件", { type: "info" });
+};
+const disabledClick = () => {
+  message("失效", { type: "info" });
+};
+</script>
+
+<template>
+  <div>
+    <el-card shadow="never">
+      <template #header>
+        <div class="font-medium">
+          二维码（基于
+          <el-link
+            href="https://github.com/soldair/node-qrcode"
+            target="_blank"
+            style="margin: 0 5px 4px 0; font-size: 16px"
+          >
+            qrcode
+          </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">
+          <el-card shadow="hover" class="mb-[10px] text-center">
+            <div class="font-bold">基础用法</div>
+            <ReQrcode :text="qrcodeText" />
+          </el-card>
+        </el-col>
+        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
+          <el-card shadow="hover" class="mb-[10px] text-center">
+            <div class="font-bold">img标签</div>
+            <ReQrcode :text="qrcodeText" tag="img" />
+          </el-card>
+        </el-col>
+        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
+          <el-card shadow="hover" class="mb-[10px] text-center">
+            <div class="font-bold">样式配置</div>
+            <ReQrcode
+              :text="qrcodeText"
+              :options="{
+                color: {
+                  dark: '#55D187',
+                  light: '#2d8cf0'
+                }
+              }"
+            />
+          </el-card>
+        </el-col>
+        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
+          <el-card shadow="hover" class="mb-[10px] text-center">
+            <div class="font-bold">点击事件</div>
+            <ReQrcode :text="qrcodeText" @click="codeClick" />
+          </el-card>
+        </el-col>
+        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
+          <el-card shadow="hover" class="mb-[10px] text-center">
+            <div class="font-bold">异步内容</div>
+            <ReQrcode :text="asyncTitle" />
+          </el-card>
+        </el-col>
+        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
+          <el-card shadow="hover" class="mb-[10px] text-center">
+            <div class="font-bold">失效</div>
+            <ReQrcode
+              :text="qrcodeText"
+              disabled
+              @disabled-click="disabledClick"
+            />
+          </el-card>
+        </el-col>
+        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
+          <el-card shadow="hover" class="mb-[10px] text-center">
+            <div class="font-bold">logo配置</div>
+            <ReQrcode
+              :text="qrcodeText"
+              logo="https://avatars.githubusercontent.com/u/44761321?v=4"
+            />
+          </el-card>
+        </el-col>
+        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
+          <el-card shadow="hover" class="mb-[10px] text-center">
+            <div class="font-bold">logo样式</div>
+            <ReQrcode
+              :text="qrcodeText"
+              :logo="{
+                src: 'https://avatars.githubusercontent.com/u/44761321?v=4',
+                logoSize: 0.2,
+                borderSize: 0.05,
+                borderRadius: 50,
+                bgColor: 'blue'
+              }"
+            />
+          </el-card>
+        </el-col>
+        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
+          <el-card shadow="hover" class="mb-[10px] text-center">
+            <div class="font-bold">大小配置</div>
+            <ReQrcode :text="qrcodeText" :width="100" />
+          </el-card>
+        </el-col>
+      </el-row>
+    </el-card>
+  </div>
+</template>

Yi.Pure.Vue3/src/views/able/ripple.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+defineOptions({
+  name: "Ripple"
+});
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <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
+      title="v-ripple在某些组件中使用波纹特效会异常，这是因为v-ripple指令只能作用于当前元素，某些组件有多层元素嵌套，且目标元素没在顶层，所以会导致特效异常"
+      type="warning"
+      :closable="false"
+    />
+    <el-space wrap class="my-5">
+      <el-button v-ripple>Default</el-button>
+      <el-button v-ripple type="primary">Primary</el-button>
+      <el-button v-ripple type="success">Success</el-button>
+      <el-button v-ripple type="info">Info</el-button>
+      <el-button v-ripple type="warning">Warning</el-button>
+      <el-button v-ripple type="danger">Danger</el-button>
+    </el-space>
+    <el-card v-ripple class="mb-5 w-[510px] select-none" shadow="hover">
+      卡片
+    </el-card>
+
+    <div class="mb-5">
+      只要在组件或HTML元素上使用v-ripple指令，就可以启用基本的ripple功能
+    </div>
+    <div
+      v-ripple
+      class="mb-5 text-center shadow-md rounded-md p-8 text-lg select-none"
+    >
+      HTML元素
+    </div>
+    <span
+      v-ripple
+      class="inline-block shadow-md rounded-md p-8 text-lg select-none"
+    >
+      行内元素需要添加display: block或display: inline-block才能生效
+    </span>
+
+    <div class="my-5">
+      当使用v-ripple.center时，将始终从目标的中心处产生波纹
+    </div>
+    <div
+      v-ripple.center
+      class="mb-5 text-center shadow-md rounded-md p-8 text-lg select-none"
+    >
+      始终从中心触发波纹
+    </div>
+
+    <div class="mb-5">
+      使用v-ripple="{ class: '' }"添加类来自定义波纹颜色，支持tailwindcss
+    </div>
+    <el-alert
+      title="自定义样式生效为文字颜色，例如：color: 'red';"
+      type="warning"
+      :closable="false"
+    />
+    <div
+      v-ripple="{ class: 'text-red-500' }"
+      class="my-5 text-center shadow-md rounded-md p-4 text-lg select-none"
+    >
+      自定义波纹颜色
+    </div>
+  </el-card>
+</template>

Yi.Pure.Vue3/src/views/able/sensitive.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import Mint from "mint-filter";
+
+defineOptions({
+  name: "Sensitive"
+});
+
+// 自定义敏感词字典
+const words = ["脑残", "废物", "白痴", "三八", "智障"];
+
+const modelValue = ref();
+const mint = new Mint(words);
+
+function onInput() {
+  modelValue.value = mint.filter(modelValue.value).text;
+}
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <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">
+      <span>自定义敏感词</span>
+      <el-tag
+        v-for="(word, index) in words"
+        :key="index"
+        type="warning"
+        class="mx-1"
+        effect="dark"
+        round
+      >
+        {{ word }}
+      </el-tag>
+    </div>
+    <el-input v-model="modelValue" @input="onInput" />
+    <p class="mt-2">{{ modelValue }}</p>
+  </el-card>
+</template>

Yi.Pure.Vue3/src/views/able/typeit.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { TypeIt, type TypeItOptions } from "@/components/ReTypeit";
+
+defineOptions({
+  name: "Typeit"
+});
+
+const options: TypeItOptions = {
+  strings: ["test1", "test2", "test3"]
+};
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <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" />
+  </el-card>
+</template>

Yi.Pure.Vue3/src/views/able/verify.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import Vcode from "vue3-puzzle-vcode";
+
+const isShow = ref(true);
+
+function onSuccess() {
+  console.log("验证成功");
+}
+
+function onFail() {
+  console.log("验证失败");
+}
+</script>
+
+<template>
+  <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"
+        >
+          拼图人机验证、右滑拼图验证
+        </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" />
+    </div>
+  </el-card>
+</template>

Yi.Pure.Vue3/src/views/able/video-frame/canvasRenderer.ts

@@ -0,0 +1,185 @@
+// import { throttle } from "@pureadmin/utils";
+import { emitter } from "@/utils/mitt";
+
+export class CanvasRenderer {
+  private canvas: HTMLCanvasElement;
+  private ctx: CanvasRenderingContext2D;
+  private images: {
+    img: HTMLImageElement;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  }[];
+  private container: HTMLElement;
+  private positionX: number;
+  private isDragging: boolean;
+  private startX: number;
+
+  constructor(containerId: string) {
+    this.canvas = document.createElement("canvas");
+    this.ctx = this.canvas.getContext("2d")!;
+    this.images = [];
+    this.positionX = 0;
+    this.isDragging = false;
+    this.startX = 0;
+
+    this.container = document.getElementById(containerId);
+    if (this.container) {
+      this.container.appendChild(this.canvas);
+      this.canvas.width = this.container.clientWidth;
+      this.canvas.height = this.container.clientHeight;
+    }
+  }
+
+  public addImage(
+    url: string,
+    x: number,
+    y: number,
+    width: number,
+    height: number
+  ) {
+    const img = new Image();
+    img.src = url;
+
+    this.images.push({
+      img,
+      x,
+      y,
+      width,
+      height
+    });
+
+    this.render();
+  }
+
+  public render() {
+    this.clearRect();
+
+    this.images.forEach(imgProps => {
+      const x = imgProps.x + this.positionX;
+      this.ctx.drawImage(
+        imgProps.img,
+        x,
+        imgProps.y,
+        imgProps.width,
+        imgProps.height
+      );
+    });
+  }
+
+  public clearImages() {
+    this.images = [];
+  }
+
+  public clearRect() {
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+  }
+
+  public drawTick(event) {
+    this.render();
+
+    // 当前勾选图片的索引
+    const index =
+      Math.ceil(
+        (Math.abs(this.positionX) + event.offsetX) / this.images[0].width
+      ) - 1;
+    const x = event.offsetX;
+    const y = event.offsetY;
+
+    // 绘制样式
+    this.ctx.strokeStyle = "red";
+    this.ctx.lineWidth = 4;
+    this.ctx.lineCap = "round";
+
+    // 绘制对勾
+    this.ctx.beginPath();
+    this.ctx.moveTo(x - 10, y);
+    this.ctx.lineTo(x, y + 10);
+    this.ctx.lineTo(x + 15, y - 10);
+    this.ctx.stroke();
+
+    emitter.emit("imageInfo", this.images[index]);
+  }
+
+  public addListener() {
+    if (!this.canvas) return;
+    this.canvas.addEventListener("click", this.handleClick);
+    this.canvas.addEventListener("mousedown", this.handleMouseDown);
+    this.canvas.addEventListener("mousemove", this.handleMouseMove);
+    this.canvas.addEventListener("mouseup", this.handleMouseUp);
+    this.canvas.addEventListener("touchstart", this.handleTouchStart);
+    this.canvas.addEventListener("touchmove", this.handleTouchMove);
+    this.canvas.addEventListener("touchend", this.handleTouchEnd);
+    // window.addEventListener("resize", throttle(this.handleWindowResize, 200));
+  }
+
+  private handleClick = (event: MouseEvent) => {
+    this.drawTick(event);
+  };
+
+  private handleMouseDown = (event: MouseEvent) => {
+    this.startDrag(event.clientX);
+  };
+
+  private handleMouseMove = (event: MouseEvent) => {
+    this.drag(event.clientX);
+  };
+
+  private handleMouseUp = () => {
+    this.endDrag();
+  };
+
+  private handleTouchStart = (event: TouchEvent) => {
+    if (event.touches.length === 1) {
+      event.preventDefault();
+      this.startDrag(event.touches[0].clientX);
+    }
+  };
+
+  private handleTouchMove = (event: TouchEvent) => {
+    if (event.touches.length === 1) {
+      event.preventDefault();
+      this.drag(event.touches[0].clientX);
+    }
+  };
+
+  private handleTouchEnd = () => {
+    this.endDrag();
+  };
+
+  private startDrag(clientX: number) {
+    this.canvas.style.cursor = "grabbing";
+    this.canvas.style.userSelect = "none";
+
+    this.startX = clientX;
+    this.isDragging = true;
+  }
+
+  private drag(clientX: number) {
+    if (!this.isDragging) return;
+
+    const deltaX = clientX - this.startX;
+    const maxPositionX =
+      this.images.length * this.images[0].width - this.container.clientWidth;
+    this.positionX = Math.max(
+      Math.min(this.positionX + deltaX, 0),
+      -maxPositionX
+    );
+    this.startX = clientX;
+
+    this.render();
+  }
+
+  private endDrag() {
+    this.canvas.style.cursor = "grab";
+    this.canvas.style.userSelect = "auto";
+    this.isDragging = false;
+  }
+
+  // private handleWindowResize = () => {
+  //   this.canvas.width = this.container.clientWidth;
+  //   this.canvas.height = this.container.clientHeight;
+  //   this.render();
+  // };
+}

Yi.Pure.Vue3/src/views/able/video-frame/index.vue

@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import { emitter } from "@/utils/mitt";
+import { useLoader } from "@pureadmin/utils";
+import { CanvasRenderer } from "./canvasRenderer";
+import { ref, onMounted, onBeforeUnmount } from "vue";
+
+defineOptions({
+  name: "VideoFrame"
+});
+
+const num = 200;
+const curImg = ref("");
+const renderer = ref();
+const captureUtil = ref();
+const loading = ref(false);
+const { loadScript } = useLoader();
+
+const { VITE_PUBLIC_PATH } = import.meta.env;
+const getPath = path => `${VITE_PUBLIC_PATH}wasm/${path}`;
+const src = getPath("index.js");
+const workerPath = getPath("capture.worker.js");
+const wasmPath = getPath("capture.worker.wasm");
+
+loadScript({
+  src
+}).then(mgs => {
+  if (mgs[0].message === "加载成功") {
+    // @ts-expect-error
+    captureUtil.value = cheetahCapture.initCapture({
+      workerPath,
+      wasmPath
+    });
+  }
+});
+
+onMounted(() => {
+  renderer.value = new CanvasRenderer("canvas-container");
+  emitter.on("imageInfo", info => (curImg.value = info.img.src));
+});
+
+function beforeUpload(file) {
+  curImg.value = "";
+  loading.value = true;
+  renderer.value.clearImages();
+  // api参考 https://github.com/wanwu/cheetah-capture#api
+  captureUtil.value.then(res => {
+    res.capture({
+      // 视频文件
+      file,
+      // 抽取指定数目的帧图片，传递`number`是按照数目抽帧，传递数组是指定抽帧的时间，单位毫秒（抽帧策略：https://github.com/wanwu/cheetah-capture/issues/6#issuecomment-1634384486）
+      info: 16,
+      // 当抽帧结果变化的回调
+      onChange: (list, { url }) => {
+        renderer.value.addImage(url, num * list.url.length, 0, num, num);
+      },
+      // 当抽帧结束并成功的回调
+      onSuccess: () => {
+        renderer.value.addListener();
+        // 默认选中第一张
+        renderer.value.drawTick({ offsetX: num / 2, offsetY: num / 2 });
+        loading.value = false;
+      },
+      // 当抽帧过程出现错误的回调
+      onError: () => {
+        loading.value = false;
+      }
+    });
+  });
+
+  return false;
+}
+
+onBeforeUnmount(() => {
+  // 解绑`imageInfo`公共事件，防止多次触发
+  emitter.off("imageInfo");
+});
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          <p>
+            基于自定义编译
+            <el-link
+              href="https://github.com/FFmpeg/FFmpeg"
+              target="_blank"
+              style="margin: 0 4px 5px; font-size: 16px"
+            >
+              FFmpeg
+            </el-link>
+            的截帧工具，支持MP4、MOV、AVI、WebM、MKV等主流格式，支持
+            H.264（AVC）、H.265（HEVC）、MPEG-2、MPEG-4、VP8、VP9、WMV3编码格式
+          </p>
+          当然还可以支持更多视频格式，只要FFmpeg支持的，按理都能支持，您也可参考
+          <el-link
+            href="https://github.com/wanwu/cheetah-capture"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            cheetah-capture
+          </el-link>
+          和
+          <el-link
+            href="https://github.com/jordiwang/web-capture"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            web-capture
+          </el-link>
+          修改并编译wasm等文件（强烈推荐在Ubuntu系统进行编译）
+          <p>
+            mac系统推荐安装
+            <el-link
+              href="https://github.com/utmapp/UTM"
+              target="_blank"
+              style="margin: 0 4px 5px; font-size: 16px"
+            >
+              UTM
+            </el-link>
+            虚拟机，windows系统推荐安装VMware虚拟机
+          </p>
+          <p>
+            当然这只是一个视频帧截取工具，如果您想要更多操作可以研究下
+            <el-link
+              href="https://ffmpegwasm.netlify.app/"
+              target="_blank"
+              style="margin: 0 4px 5px; font-size: 16px"
+            >
+              ffmpeg.wasm
+            </el-link>
+            ，它是基于 FFmpeg 的纯 WebAssembly / JavaScript
+            工具，可以在浏览器内进行视频和音频录制、转换和流式传输等，不过通过一些实践，对于时长较长的视频性能还是不太行，不过用于时长较短的短视频还是可以上生产的
+          </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">
+      <el-upload
+        drag
+        :show-file-list="false"
+        accept=".mp4,.mov,.avi,.webm,.mkv"
+        :before-upload="beforeUpload"
+      >
+        <div class="el-upload__text">
+          可拖拽上传视频（默认截取16张帧图片，可在代码中自行修改）
+        </div>
+      </el-upload>
+      <el-image
+        v-if="curImg"
+        :src="curImg"
+        :preview-src-list="Array.of(curImg)"
+        class="w-[180px] h-[180px] ml-2 rounded-[6px]"
+      />
+    </div>
+    <div
+      id="canvas-container"
+      v-loading="loading"
+      element-loading-text="温馨提示：可左右拖拽图片并单击选取所需的帧图片"
+      class="w-full h-[200px] overflow-hidden mt-6"
+    />
+  </el-card>
+</template>
+
+<style scoped lang="scss">
+::v-deep(.el-upload-dragger) {
+  display: flex;
+  align-items: center;
+  height: 180px;
+}
+</style>

Yi.Pure.Vue3/src/views/able/video.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { onMounted } from "vue";
+import { deviceDetection } from "@pureadmin/utils";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import VideoPlay from "@iconify-icons/ep/video-play";
+
+import Player from "xgplayer";
+import "xgplayer/dist/index.min.css";
+
+defineOptions({
+  name: "VideoPage"
+});
+
+onMounted(() => {
+  new Player({
+    id: "mse",
+    lang: "zh",
+    // 默认静音
+    volume: 0,
+    autoplay: false,
+    screenShot: true,
+    videoAttributes: {
+      crossOrigin: "anonymous"
+    },
+    url: "//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/xgplayer-demo.mp4",
+    poster:
+      "//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
+    fluid: deviceDetection(),
+    //传入倍速可选数组
+    playbackRate: [0.5, 0.75, 1, 1.5, 2]
+  });
+});
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          视频组件，采用开源的
+          <el-link
+            href="https://v3.h5player.bytedance.com/"
+            target="_blank"
+            :icon="useRenderIcon(VideoPlay)"
+            style="margin: 0 4px 5px; 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/video.vue"
+        target="_blank"
+      >
+        代码位置 src/views/able/video.vue
+      </el-link>
+    </template>
+    <div id="mse" />
+  </el-card>
+</template>
+
+<style scoped>
+#mse {
+  flex: auto;
+}
+</style>

Yi.Pure.Vue3/src/views/able/watermark.vue

@@ -0,0 +1,202 @@
+<script setup lang="ts">
+import { ref, onMounted, nextTick, onBeforeUnmount } from "vue";
+import { useWatermark } from "@pureadmin/utils";
+
+defineOptions({
+  name: "WaterMark"
+});
+
+const local = ref();
+const preventLocal = ref();
+const color = ref("#409EFF");
+const value = ref("vue-pure-admin");
+const { setWatermark, clear } = useWatermark();
+const { setWatermark: setLocalWatermark, clear: clearLocal } =
+  useWatermark(local);
+const { setWatermark: setPreventLocalWatermark } = useWatermark(preventLocal);
+
+onMounted(() => {
+  nextTick(() => {
+    setPreventLocalWatermark("无法删除的水印", {
+      forever: true,
+      width: 180,
+      height: 70
+    });
+  });
+});
+
+onBeforeUnmount(() => {
+  // 在离开该页面时清除整页水印
+  clear();
+});
+</script>
+
+<template>
+  <el-card shadow="never">
+    <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>
+      <el-input v-model="value" class="mr-4" style="width: 200px" clearable />
+      <span>请选择要创建水印的颜色：</span>
+      <el-color-picker v-model="color" show-alpha />
+    </el-space>
+
+    <el-space wrap>
+      <el-button plain @click="setWatermark(value, { color })">
+        创建整页水印
+      </el-button>
+      <el-button
+        plain
+        @click="
+          setWatermark(value, {
+            gradient: [
+              { value: 0, color: 'magenta' },
+              { value: 0.5, color: 'blue' },
+              { value: 1.0, color: 'red' }
+            ]
+          })
+        "
+      >
+        创建整页渐变水印
+      </el-button>
+      <el-button
+        plain
+        @click="
+          setWatermark(value, {
+            rotate: 0,
+            gradient: [
+              { value: 0, color: 'magenta' },
+              { value: 0.5, color: 'blue' },
+              { value: 1.0, color: 'red' }
+            ]
+          })
+        "
+      >
+        创建整页渐变且水平90度的水印
+      </el-button>
+      <el-button
+        plain
+        @click="
+          setWatermark(value, {
+            gradient: [
+              { value: 0, color: 'magenta' },
+              { value: 0.5, color: 'blue' },
+              { value: 1.0, color: 'red' }
+            ],
+            shadowConfig: [20]
+          })
+        "
+      >
+        创建整页渐变且有阴影的水印
+      </el-button>
+      <el-button
+        plain
+        @click="
+          setWatermark(value, {
+            globalAlpha: 0.15, // 值越低越透明
+            gradient: [
+              { value: 0, color: 'magenta' },
+              { value: 0.5, color: 'blue' },
+              { value: 1.0, color: 'red' }
+            ]
+          })
+        "
+      >
+        创建整页高透明渐变水印
+      </el-button>
+      <el-button plain @click="clear">清除整页水印</el-button>
+    </el-space>
+
+    <div ref="local" class="w-1/2 h-[200px] border border-sky-500 mt-4" />
+
+    <el-space wrap class="mt-6">
+      <el-button
+        plain
+        @click="
+          setLocalWatermark('局部水印', {
+            color,
+            width: 140,
+            height: 65
+          })
+        "
+      >
+        创建局部水印
+      </el-button>
+      <el-button
+        plain
+        @click="
+          setLocalWatermark('局部水印', {
+            width: 140,
+            height: 65,
+            gradient: [
+              { value: 0, color: 'magenta' },
+              { value: 0.5, color: 'blue' },
+              { value: 1.0, color: 'red' }
+            ]
+          })
+        "
+      >
+        创建局部渐变水印
+      </el-button>
+      <el-button
+        plain
+        @click="
+          setLocalWatermark('局部水印', {
+            width: 140,
+            height: 65,
+            rotate: 0,
+            gradient: [
+              { value: 0, color: 'magenta' },
+              { value: 0.5, color: 'blue' },
+              { value: 1.0, color: 'red' }
+            ]
+          })
+        "
+      >
+        创建局部渐变且水平90度的水印
+      </el-button>
+      <el-button
+        plain
+        @click="
+          setLocalWatermark('局部水印', {
+            width: 140,
+            height: 65,
+            gradient: [
+              { value: 0, color: 'magenta' },
+              { value: 0.5, color: 'blue' },
+              { value: 1.0, color: 'red' }
+            ],
+            shadowConfig: [20]
+          })
+        "
+      >
+        创建局部渐变且有阴影的水印
+      </el-button>
+      <el-button plain @click="clearLocal">清除局部水印</el-button>
+    </el-space>
+
+    <div
+      ref="preventLocal"
+      class="w-1/2 h-[200px] border border-indigo-500 mt-4"
+    />
+  </el-card>
+</template>

Yi.Pure.Vue3/src/views/able/wavesurfer/index.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import WaveSurfer from "wavesurfer.js";
+import { getTime } from "@pureadmin/utils";
+import { Play, Pause, Forward, Rewind } from "./svg";
+import { ref, onMounted, onBeforeUnmount } from "vue";
+
+defineOptions({
+  name: "Wavesurfer"
+});
+
+const loading = ref(true);
+const wavesurfer = ref(null);
+const wavesurferRef = ref();
+// 音频总时长（格式化后 mm:ss）
+const totalTime = ref();
+// 音频总时长（单位秒）
+const totalSecondTime = ref();
+// 音频当前播放位置时长
+const curTime = ref();
+// 音频是否正在播放
+const isPlay = ref(false);
+
+const { VITE_PUBLIC_PATH } = import.meta.env;
+const url = `${VITE_PUBLIC_PATH}audio/海阔天空.mp3`;
+
+function init() {
+  wavesurfer.value = WaveSurfer.create({
+    container: wavesurferRef.value,
+    height: "auto",
+    waveColor: "rgb(200, 0, 200)",
+    progressColor: "rgb(100, 0, 100)",
+    cursorColor: "rgb(64, 158, 255)",
+    cursorWidth: 4,
+    // backend: "MediaElement",
+    url
+  });
+
+  // 音频被解码后触发
+  wavesurfer.value.on("decode", () => (loading.value = false));
+
+  // 当音频已解码并可以播放时触发
+  wavesurfer.value.on("ready", () => {
+    if (!wavesurfer.value) return;
+    const { decodedData } = wavesurfer.value;
+    totalSecondTime.value = decodedData.duration;
+    const { m, s } = getTime(decodedData.duration);
+    totalTime.value = `${m}:${s}`;
+    // 光标位置取中
+    wavesurfer.value.setTime(decodedData.duration / 2);
+    // 设置音频音量（范围0-1）
+    // wavesurfer.value.setVolume(1);
+  });
+
+  // 音频位置改变时，播放期间连续触发
+  wavesurfer.value.on("timeupdate", timer => {
+    if (timer > totalSecondTime.value) return;
+    const { m, s } = getTime(timer);
+    curTime.value = `${m}:${s}`;
+  });
+
+  // 音频播放时触发
+  wavesurfer.value.on("play", () => (isPlay.value = true));
+
+  // 音频暂停时触发
+  wavesurfer.value.on("pause", () => (isPlay.value = false));
+}
+
+onMounted(init);
+
+onBeforeUnmount(() => {
+  if (wavesurfer.value) {
+    wavesurfer.value.destroy();
+    wavesurfer.value = null;
+  }
+});
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          音频可视化，采用开源的
+          <el-link
+            href="https://wavesurfer-js.org/"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            wavesurfer.js
+          </el-link>
+          <span class="text-[red]">
+            （温馨提示：音频默认最大声音，播放时请调低电脑声音，以免影响到您）
+          </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"
+      class="w-8/12 !m-auto !mt-[20px]"
+      element-loading-background="transparent"
+    >
+      <div ref="wavesurferRef" />
+      <div v-show="totalTime" class="flex justify-between">
+        <span class="text-[#81888f]">00:00</span>
+        <h1 class="text-4xl mt-2">{{ curTime }}</h1>
+        <span class="text-[#81888f]">{{ totalTime }}</span>
+      </div>
+      <div v-show="totalTime" class="flex mt-2 w-[180px] justify-around m-auto">
+        <Rewind
+          v-tippy="{
+            content: '快退（可长按）',
+            placement: 'bottom'
+          }"
+          v-longpress:0:100="() => wavesurfer?.skip(-1)"
+          class="cursor-pointer"
+        />
+        <div
+          v-tippy="{
+            content: isPlay ? '暂停' : '播放',
+            placement: 'bottom'
+          }"
+          class="cursor-pointer"
+          @click="wavesurfer?.playPause()"
+        >
+          <Play v-if="isPlay" v-motion-pop />
+          <Pause v-else v-motion-pop />
+        </div>
+        <Forward
+          v-tippy="{
+            content: '快进（可长按）',
+            placement: 'bottom'
+          }"
+          v-longpress:0:100="() => wavesurfer?.skip(1)"
+          class="cursor-pointer"
+        />
+      </div>
+    </div>
+  </el-card>
+</template>

Yi.Pure.Vue3/src/views/able/wavesurfer/svg/forward.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path fill="#409EFF" d="M515.5 91.5C747.4 91.5 936 280.1 936 512S747.4 932.5 515.5 932.5 95 743.9 95 512 283.6 91.5 515.5 91.5m0-87C235.2 4.5 8 231.7 8 512s227.2 507.5 507.5 507.5S1023 792.3 1023 512 795.8 4.5 515.5 4.5"/><path fill="#81888f" d="m337.7 450.8 84.1 61.2-84.1 61.2zm-28.8-115c-30.1 0-58.2 23.8-58.2 58.1v236.2c0 34.3 28.1 58.1 58.2 58.1 11.5 0 23.3-3.5 33.9-11.2l162.4-118.1c31.9-23.2 31.9-70.7 0-93.8L342.8 347c-10.6-7.7-22.4-11.2-33.9-11.2"/><path fill="#81888f" d="m529.1 450.8 84.1 61.2-84.1 61.2zm-28.8-115c-30.1 0-58.2 23.8-58.2 58.1v236.2c0 34.3 28.1 58.1 58.2 58.1 11.5 0 23.3-3.5 33.9-11.2l162.4-118.1c31.9-23.2 31.9-70.7 0-93.8L534.2 347c-10.6-7.7-22.4-11.2-33.9-11.2"/><path fill="#81888f" d="M736.8 367c-24 0-43.5 19.5-43.5 43.5v203c0 24 19.5 43.5 43.5 43.5s43.5-19.5 43.5-43.5v-203c0-24-19.5-43.5-43.5-43.5"/></svg>

Yi.Pure.Vue3/src/views/able/wavesurfer/svg/index.ts

@@ -0,0 +1,15 @@
+import Play from "./play.svg?component";
+import Pause from "./pause.svg?component";
+import Forward from "./forward.svg?component";
+import Rewind from "./rewind.svg?component";
+
+export {
+  /** 播放 */
+  Play,
+  /** 暂停 */
+  Pause,
+  /** 快进 */
+  Forward,
+  /** 快退 */
+  Rewind
+};

Yi.Pure.Vue3/src/views/able/wavesurfer/svg/pause.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="icon" viewBox="0 0 1024 1024"><path fill="#f56c6c" d="M512 42.667C252.793 42.667 42.667 252.793 42.667 512S252.793 981.333 512 981.333 981.333 771.207 981.333 512 771.207 42.667 512 42.667M708.547 543.16l-266.667 176A37.333 37.333 0 0 1 384 688V336.033a37.333 37.333 0 0 1 57.893-31.16l266.667 176a37.333 37.333 0 0 1 0 62.32z"/></svg>

Yi.Pure.Vue3/src/views/able/wavesurfer/svg/play.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" class="icon" viewBox="0 0 1024 1024"><path fill="#409eff" d="M512 0C229.227 0 0 229.227 0 512s229.227 512 512 512 512-229.227 512-512S794.773 0 512 0m-33.023 704.742c0 34.191-25.028 62.18-55.617 62.18s-55.618-27.975-55.618-62.18V319.258c0-34.19 25.028-62.18 55.618-62.18s55.617 27.975 55.617 62.18zm170.328 0c0 34.191-25.027 62.18-55.617 62.18s-55.617-27.975-55.617-62.18V319.258c0-34.19 25.027-62.18 55.617-62.18s55.617 27.975 55.617 62.18z"/></svg>

Yi.Pure.Vue3/src/views/able/wavesurfer/svg/rewind.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path fill="#409EFF" d="M512 90.3c231.9 0 420.5 188.6 420.5 420.5S743.9 931.3 512 931.3 91.5 742.7 91.5 510.8 280.1 90.3 512 90.3m0-87C231.7 3.3 4.5 230.5 4.5 510.8s227.2 507.5 507.5 507.5 507.5-227.2 507.5-507.5S792.3 3.3 512 3.3"/><path fill="#81888f" d="M689.8 449.7V572l-84.1-61.2zm28.8-115.1c-11.5 0-23.3 3.5-33.9 11.2L522.3 463.9c-31.9 23.2-31.9 70.6 0 93.8l162.4 118.1c10.6 7.7 22.4 11.2 33.9 11.2 30.1 0 58.2-23.8 58.2-58.1V392.7c0-34.3-28.1-58.1-58.2-58.1"/><path fill="#81888f" d="M498.4 449.7V572l-84.1-61.2zm28.8-115.1c-11.5 0-23.3 3.5-33.9 11.2L330.9 463.9c-31.9 23.2-31.9 70.6 0 93.8l162.4 118.1c10.6 7.7 22.4 11.2 33.9 11.2 30.1 0 58.2-23.8 58.2-58.1V392.7c0-34.3-28.1-58.1-58.2-58.1"/><path fill="#81888f" d="M290.7 365.8c-24 0-43.5 19.5-43.5 43.5v203c0 24 19.5 43.5 43.5 43.5s43.5-19.5 43.5-43.5v-203c0-24-19.5-43.5-43.5-43.5"/></svg>

Yi.Pure.Vue3/src/views/about/columns.tsx

@@ -0,0 +1,108 @@
+export function useColumns() {
+  const { pkg, lastBuildTime } = __APP_INFO__;
+  const { version, engines } = pkg;
+  const columns = [
+    {
+      label: "当前版本",
+      minWidth: 100,
+      cellRenderer: () => {
+        return (
+          <el-tag size="large" class="!text-base">
+            {version}
+          </el-tag>
+        );
+      }
+    },
+    {
+      label: "最后编译时间",
+      minWidth: 120,
+      cellRenderer: () => {
+        return (
+          <el-tag size="large" class="!text-base">
+            {lastBuildTime}
+          </el-tag>
+        );
+      }
+    },
+    {
+      label: "推荐 node 版本",
+      minWidth: 140,
+      cellRenderer: () => {
+        return (
+          <el-tag size="large" class="!text-base">
+            {engines.node}
+          </el-tag>
+        );
+      }
+    },
+    {
+      label: "推荐 pnpm 版本",
+      minWidth: 140,
+      cellRenderer: () => {
+        return (
+          <el-tag size="large" class="!text-base">
+            {engines.pnpm}
+          </el-tag>
+        );
+      }
+    },
+    {
+      label: "完整版代码地址",
+      minWidth: 140,
+      className: "pure-version",
+      cellRenderer: () => {
+        return (
+          <a
+            href="https://github.com/pure-admin/vue-pure-admin"
+            target="_blank"
+          >
+            <span style="color: var(--el-color-primary)">完整版代码链接</span>
+          </a>
+        );
+      }
+    },
+    {
+      label: "精简版代码地址",
+      minWidth: 140,
+      className: "pure-version",
+      cellRenderer: () => {
+        return (
+          <a
+            href="https://github.com/pure-admin/pure-admin-thin"
+            target="_blank"
+          >
+            <span style="color: var(--el-color-primary)">精简版代码链接</span>
+          </a>
+        );
+      }
+    },
+    {
+      label: "文档地址",
+      minWidth: 100,
+      className: "pure-version",
+      cellRenderer: () => {
+        return (
+          <a href="https://pure-admin.github.io/pure-admin-doc" target="_blank">
+            <span style="color: var(--el-color-primary)">文档链接</span>
+          </a>
+        );
+      }
+    },
+    {
+      label: "预览地址",
+      minWidth: 100,
+      className: "pure-version",
+      cellRenderer: () => {
+        return (
+          <a href="https://pure-admin.github.io/vue-pure-admin" target="_blank">
+            <span style="color: var(--el-color-primary)">预览链接</span>
+          </a>
+        );
+      }
+    }
+  ];
+
+  return {
+    columns
+  };
+}

Yi.Pure.Vue3/src/views/about/index.vue

@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useColumns } from "./columns";
+
+export interface schemaItem {
+  field: string;
+  label: string;
+}
+
+defineOptions({
+  name: "About"
+});
+
+const { pkg } = __APP_INFO__;
+const { dependencies, devDependencies } = pkg;
+
+const schema: schemaItem[] = [];
+const devSchema: schemaItem[] = [];
+
+const { columns } = useColumns();
+
+const words = [
+  "@pureadmin/descriptions",
+  "@pureadmin/table",
+  "@pureadmin/utils",
+  "@vueuse/core",
+  "axios",
+  "dayjs",
+  "echarts",
+  "vue",
+  "element-plus",
+  "pinia",
+  "vue-i18n",
+  "vue-router",
+  "@iconify/vue",
+  "@vitejs/plugin-vue",
+  "@vitejs/plugin-vue-jsx",
+  "eslint",
+  "prettier",
+  "sass",
+  "stylelint",
+  "tailwindcss",
+  "typescript",
+  "vite",
+  "vue-tsc"
+];
+
+const getMainLabel = computed(
+  () => (label: string) => words.find(w => w === label) && "main-label"
+);
+
+Object.keys(dependencies).forEach(key => {
+  schema.push({ field: dependencies[key], label: key });
+});
+
+Object.keys(devDependencies).forEach(key => {
+  devSchema.push({ field: devDependencies[key], label: key });
+});
+</script>
+
+<template>
+  <div>
+    <el-card class="mb-4 box-card" shadow="never">
+      <span>
+        vue-pure-admin 是一款开源免费且开箱即用的中后台管理系统模版。完全采用
+        ECMAScript 模块（ESM）规范来编写和组织代码，使用了最新的
+        Vue3、Vite、Element-Plus、TypeScript、Pinia、Tailwindcss
+        等主流技术开发。
+      </span>
+    </el-card>
+
+    <el-card class="m-4 box-card" shadow="never">
+      <template #header>
+        <div class="card-header">
+          <span class="font-medium">平台信息</span>
+        </div>
+      </template>
+      <el-scrollbar>
+        <PureDescriptions border :columns="columns" :column="4" />
+      </el-scrollbar>
+    </el-card>
+
+    <el-card class="m-4 box-card" shadow="never">
+      <template #header>
+        <div class="card-header flex items-center">
+          <span class="font-medium">生产环境依赖</span>
+          <el-tag type="primary" effect="dark" size="small" round class="ml-1">
+            {{ schema.length }}
+          </el-tag>
+        </div>
+      </template>
+      <el-scrollbar>
+        <el-descriptions border size="small" :column="6">
+          <el-descriptions-item
+            v-for="(item, index) in schema"
+            :key="index"
+            :label="item.label"
+            :label-class-name="getMainLabel(item.label)"
+            class-name="pure-version"
+            label-align="right"
+          >
+            <a
+              :href="'https://www.npmjs.com/package/' + item.label"
+              target="_blank"
+            >
+              <span
+                :class="getMainLabel(item.label)"
+                style="color: var(--el-color-primary)"
+              >
+                {{ item.field }}
+              </span>
+            </a>
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-scrollbar>
+    </el-card>
+
+    <el-card class="m-4 box-card" shadow="never">
+      <template #header>
+        <div class="card-header flex items-center">
+          <span class="font-medium">开发环境依赖</span>
+          <el-tag type="primary" effect="dark" size="small" round class="ml-1">
+            {{ devSchema.length }}
+          </el-tag>
+        </div>
+      </template>
+      <el-scrollbar>
+        <el-descriptions border size="small" :column="5">
+          <el-descriptions-item
+            v-for="(item, index) in devSchema"
+            :key="index"
+            :label="item.label"
+            :label-class-name="getMainLabel(item.label)"
+            class-name="pure-version"
+            label-align="right"
+          >
+            <a
+              :href="'https://www.npmjs.com/package/' + item.label"
+              target="_blank"
+            >
+              <span
+                :class="getMainLabel(item.label)"
+                style="color: var(--el-color-primary)"
+              >
+                {{ item.field }}
+              </span>
+            </a>
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-scrollbar>
+    </el-card>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.main-label) {
+  font-size: 16px !important;
+  color: var(--el-color-danger) !important;
+}
+
+:deep(.pure-version) {
+  font-size: 14px !important;
+  font-weight: 600 !important;
+  opacity: 0.6;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.main-content {
+  margin: 0 !important;
+}
+</style>

Yi.Pure.Vue3/src/views/account-settings/components/AccountManagement.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { message } from "@/utils/message";
+import { deviceDetection } from "@pureadmin/utils";
+
+defineOptions({
+  name: "AccountManagement"
+});
+
+const list = ref([
+  {
+    title: "账户密码",
+    illustrate: "当前密码强度：强",
+    button: "修改"
+  },
+  {
+    title: "密保手机",
+    illustrate: "已经绑定手机：158****6789",
+    button: "修改"
+  },
+  {
+    title: "密保问题",
+    illustrate: "未设置密保问题，密保问题可有效保护账户安全",
+    button: "修改"
+  },
+  {
+    title: "备用邮箱",
+    illustrate: "已绑定邮箱：pure***@163.com",
+    button: "修改"
+  }
+]);
+
+function onClick(item) {
+  console.log("onClick", item.title);
+  message("请根据具体业务自行实现", { type: "success" });
+}
+</script>
+
+<template>
+  <div
+    :class="[
+      'min-w-[180px]',
+      deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]'
+    ]"
+  >
+    <h3 class="my-8">账户管理</h3>
+    <div v-for="(item, index) in list" :key="index">
+      <div class="flex items-center">
+        <div class="flex-1">
+          <p>{{ item.title }}</p>
+          <el-text class="mx-1" type="info">{{ item.illustrate }}</el-text>
+        </div>
+        <el-button type="primary" text @click="onClick(item)">
+          {{ item.button }}
+        </el-button>
+      </div>
+      <el-divider />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.el-divider--horizontal {
+  border-top: 0.1px var(--el-border-color) var(--el-border-style);
+}
+</style>

Yi.Pure.Vue3/src/views/account-settings/components/Preferences.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { message } from "@/utils/message";
+import { deviceDetection } from "@pureadmin/utils";
+
+defineOptions({
+  name: "Preferences"
+});
+
+const list = ref([
+  {
+    title: "账户密码",
+    illustrate: "其他用户的消息将以站内信的形式通知",
+    checked: true
+  },
+  {
+    title: "系统消息",
+    illustrate: "系统消息将以站内信的形式通知",
+    checked: true
+  },
+  {
+    title: "待办任务",
+    illustrate: "待办任务将以站内信的形式通知",
+    checked: true
+  }
+]);
+
+function onChange(val, item) {
+  console.log("onChange", val);
+  message(`${item.title}设置成功`, { type: "success" });
+}
+</script>
+
+<template>
+  <div
+    :class="[
+      'min-w-[180px]',
+      deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]'
+    ]"
+  >
+    <h3 class="my-8">偏好设置</h3>
+    <div v-for="(item, index) in list" :key="index">
+      <div class="flex items-center">
+        <div class="flex-1">
+          <p>{{ item.title }}</p>
+          <p class="wp-4">
+            <el-text class="mx-1" type="info">
+              {{ item.illustrate }}
+            </el-text>
+          </p>
+        </div>
+        <el-switch
+          v-model="item.checked"
+          inline-prompt
+          active-text="是"
+          inactive-text="否"
+          @change="val => onChange(val, item)"
+        />
+      </div>
+      <el-divider />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.el-divider--horizontal {
+  border-top: 0.1px var(--el-border-color) var(--el-border-style);
+}
+</style>

Yi.Pure.Vue3/src/views/account-settings/components/Profile.vue

@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import { reactive, ref } from "vue";
+import { formUpload } from "@/api/mock";
+import { message } from "@/utils/message";
+import { type UserInfo, getMine } from "@/api/user";
+import type { FormInstance, FormRules } from "element-plus";
+import ReCropperPreview from "@/components/ReCropperPreview";
+import { createFormData, deviceDetection } from "@pureadmin/utils";
+import uploadLine from "@iconify-icons/ri/upload-line";
+
+defineOptions({
+  name: "Profile"
+});
+
+const imgSrc = ref("");
+const cropperBlob = ref();
+const cropRef = ref();
+const uploadRef = ref();
+const isShow = ref(false);
+const userInfoFormRef = ref<FormInstance>();
+
+const userInfos = reactive({
+  avatar: "",
+  nickname: "",
+  email: "",
+  phone: "",
+  description: ""
+});
+
+const rules = reactive<FormRules<UserInfo>>({
+  nickname: [{ required: true, message: "昵称必填", trigger: "blur" }]
+});
+
+function queryEmail(queryString, callback) {
+  const emailList = [
+    { value: "@qq.com" },
+    { value: "@126.com" },
+    { value: "@163.com" }
+  ];
+  let results = [];
+  let queryList = [];
+  emailList.map(item =>
+    queryList.push({ value: queryString.split("@")[0] + item.value })
+  );
+  results = queryString
+    ? queryList.filter(
+        item =>
+          item.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
+      )
+    : queryList;
+  callback(results);
+}
+
+const onChange = uploadFile => {
+  const reader = new FileReader();
+  reader.onload = e => {
+    imgSrc.value = e.target.result as string;
+    isShow.value = true;
+  };
+  reader.readAsDataURL(uploadFile.raw);
+};
+
+const handleClose = () => {
+  cropRef.value.hidePopover();
+  uploadRef.value.clearFiles();
+  isShow.value = false;
+};
+
+const onCropper = ({ blob }) => (cropperBlob.value = blob);
+
+const handleSubmitImage = () => {
+  const formData = createFormData({
+    files: new File([cropperBlob.value], "avatar")
+  });
+  formUpload(formData)
+    .then(({ success, data }) => {
+      if (success) {
+        message("更新头像成功", { type: "success" });
+        handleClose();
+      } else {
+        message("更新头像失败");
+      }
+    })
+    .catch(error => {
+      message(`提交异常 ${error}`, { type: "error" });
+    });
+};
+
+// 更新信息
+const onSubmit = async (formEl: FormInstance) => {
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log(userInfos);
+      message("更新信息成功", { type: "success" });
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+
+getMine().then(res => {
+  Object.assign(userInfos, res.data);
+});
+</script>
+
+<template>
+  <div
+    :class="[
+      'min-w-[180px]',
+      deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]'
+    ]"
+  >
+    <h3 class="my-8">个人信息</h3>
+    <el-form
+      ref="userInfoFormRef"
+      label-position="top"
+      :rules="rules"
+      :model="userInfos"
+    >
+      <el-form-item label="头像">
+        <el-avatar :size="80" :src="userInfos.avatar" />
+        <el-upload
+          ref="uploadRef"
+          accept="image/*"
+          action="#"
+          :limit="1"
+          :auto-upload="false"
+          :show-file-list="false"
+          :on-change="onChange"
+        >
+          <el-button plain class="ml-4">
+            <IconifyIconOffline :icon="uploadLine" />
+            <span class="ml-2">更新头像</span>
+          </el-button>
+        </el-upload>
+      </el-form-item>
+      <el-form-item label="昵称" prop="nickname">
+        <el-input v-model="userInfos.nickname" placeholder="请输入昵称" />
+      </el-form-item>
+      <el-form-item label="邮箱" prop="email">
+        <el-autocomplete
+          v-model="userInfos.email"
+          :fetch-suggestions="queryEmail"
+          :trigger-on-focus="false"
+          placeholder="请输入邮箱"
+          clearable
+          class="w-full"
+        />
+      </el-form-item>
+      <el-form-item label="联系电话">
+        <el-input
+          v-model="userInfos.phone"
+          placeholder="请输入联系电话"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item label="简介">
+        <el-input
+          v-model="userInfos.description"
+          placeholder="请输入简介"
+          type="textarea"
+          :autosize="{ minRows: 6, maxRows: 8 }"
+          maxlength="56"
+          show-word-limit
+        />
+      </el-form-item>
+      <el-button type="primary" @click="onSubmit(userInfoFormRef)">
+        更新信息
+      </el-button>
+    </el-form>
+    <el-dialog
+      v-model="isShow"
+      width="40%"
+      title="编辑头像"
+      destroy-on-close
+      :closeOnClickModal="false"
+      :before-close="handleClose"
+      :fullscreen="deviceDetection()"
+    >
+      <ReCropperPreview ref="cropRef" :imgSrc="imgSrc" @cropper="onCropper" />
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button bg text @click="handleClose">取消</el-button>
+          <el-button bg text type="primary" @click="handleSubmitImage">
+            确定
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>

Yi.Pure.Vue3/src/views/account-settings/components/SecurityLog.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import dayjs from "dayjs";
+import { getMineLogs } from "@/api/user";
+import { reactive, ref, onMounted } from "vue";
+import { deviceDetection } from "@pureadmin/utils";
+import type { PaginationProps } from "@pureadmin/table";
+
+defineOptions({
+  name: "SecurityLog"
+});
+
+const loading = ref(true);
+const dataList = ref([]);
+const pagination = reactive<PaginationProps>({
+  total: 0,
+  pageSize: 10,
+  currentPage: 1,
+  background: true,
+  layout: "prev, pager, next"
+});
+const columns: TableColumnList = [
+  {
+    label: "详情",
+    prop: "summary",
+    minWidth: 140
+  },
+  {
+    label: "IP 地址",
+    prop: "ip",
+    minWidth: 100
+  },
+  {
+    label: "地点",
+    prop: "address",
+    minWidth: 140
+  },
+  {
+    label: "操作系统",
+    prop: "system",
+    minWidth: 100
+  },
+  {
+    label: "浏览器类型",
+    prop: "browser",
+    minWidth: 100
+  },
+  {
+    label: "时间",
+    prop: "operatingTime",
+    minWidth: 180,
+    formatter: ({ operatingTime }) =>
+      dayjs(operatingTime).format("YYYY-MM-DD HH:mm:ss")
+  }
+];
+
+async function onSearch() {
+  loading.value = true;
+  const { data } = await getMineLogs();
+  dataList.value = data.list;
+  pagination.total = data.total;
+  pagination.pageSize = data.pageSize;
+  pagination.currentPage = data.currentPage;
+
+  setTimeout(() => {
+    loading.value = false;
+  }, 200);
+}
+
+onMounted(() => {
+  onSearch();
+});
+</script>
+
+<template>
+  <div
+    :class="[
+      'min-w-[180px]',
+      deviceDetection() ? 'max-w-[100%]' : 'max-w-[70%]'
+    ]"
+  >
+    <h3 class="my-8">安全日志</h3>
+    <pure-table
+      row-key="id"
+      table-layout="auto"
+      :loading="loading"
+      :data="dataList"
+      :columns="columns"
+      :pagination="pagination"
+    />
+  </div>
+</template>

Yi.Pure.Vue3/src/views/account-settings/index.vue

@@ -0,0 +1,183 @@
+<script setup lang="ts">
+import { getMine } from "@/api/user";
+import { useRouter } from "vue-router";
+import { ref, onBeforeMount } from "vue";
+import { ReText } from "@/components/ReText";
+import Profile from "./components/Profile.vue";
+import Preferences from "./components/Preferences.vue";
+import SecurityLog from "./components/SecurityLog.vue";
+import { useGlobal, deviceDetection } from "@pureadmin/utils";
+import AccountManagement from "./components/AccountManagement.vue";
+import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
+import LaySidebarTopCollapse from "@/layout/components/lay-sidebar/components/SidebarTopCollapse.vue";
+
+import leftLine from "@iconify-icons/ri/arrow-left-s-line";
+import ProfileIcon from "@iconify-icons/ri/user-3-line";
+import PreferencesIcon from "@iconify-icons/ri/settings-3-line";
+import SecurityLogIcon from "@iconify-icons/ri/window-line";
+import AccountManagementIcon from "@iconify-icons/ri/profile-line";
+
+defineOptions({
+  name: "AccountSettings"
+});
+
+const router = useRouter();
+const isOpen = ref(deviceDetection() ? false : true);
+const { $storage } = useGlobal<GlobalPropertiesApi>();
+onBeforeMount(() => {
+  useDataThemeChange().dataThemeChange($storage.layout?.overallStyle);
+});
+
+const userInfo = ref({
+  avatar: "",
+  username: "",
+  nickname: ""
+});
+const panes = [
+  {
+    key: "profile",
+    label: "个人信息",
+    icon: ProfileIcon,
+    component: Profile
+  },
+  {
+    key: "preferences",
+    label: "偏好设置",
+    icon: PreferencesIcon,
+    component: Preferences
+  },
+  {
+    key: "securityLog",
+    label: "安全日志",
+    icon: SecurityLogIcon,
+    component: SecurityLog
+  },
+  {
+    key: "accountManagement",
+    label: "账户管理",
+    icon: AccountManagementIcon,
+    component: AccountManagement
+  }
+];
+const witchPane = ref("profile");
+
+getMine().then(res => {
+  userInfo.value = res.data;
+});
+</script>
+
+<template>
+  <el-container class="h-full">
+    <el-aside
+      v-if="isOpen"
+      class="pure-account-settings overflow-hidden px-2 dark:!bg-[var(--el-bg-color)] border-r-[1px] border-[var(--pure-border-color)]"
+      :width="deviceDetection() ? '180px' : '240px'"
+    >
+      <el-menu :default-active="witchPane" class="pure-account-settings-menu">
+        <el-menu-item
+          class="hover:!transition-all hover:!duration-200 hover:!text-base !h-[50px]"
+          @click="router.go(-1)"
+        >
+          <div class="flex items-center">
+            <IconifyIconOffline :icon="leftLine" />
+            <span class="ml-2">返回</span>
+          </div>
+        </el-menu-item>
+        <div class="flex items-center ml-8 mt-4 mb-4">
+          <el-avatar :size="48" :src="userInfo.avatar" />
+          <div class="ml-4 flex flex-col max-w-[130px]">
+            <ReText class="font-bold !self-baseline">
+              {{ userInfo.nickname }}
+            </ReText>
+            <ReText class="!self-baseline" type="info">
+              {{ userInfo.username }}
+            </ReText>
+          </div>
+        </div>
+        <el-menu-item
+          v-for="item in panes"
+          :key="item.key"
+          :index="item.key"
+          @click="
+            () => {
+              witchPane = item.key;
+              if (deviceDetection()) {
+                isOpen = !isOpen;
+              }
+            }
+          "
+        >
+          <div class="flex items-center z-10">
+            <el-icon><IconifyIconOffline :icon="item.icon" /></el-icon>
+            <span>{{ item.label }}</span>
+          </div>
+        </el-menu-item>
+      </el-menu>
+    </el-aside>
+    <el-main>
+      <LaySidebarTopCollapse
+        v-if="deviceDetection()"
+        class="px-0"
+        :is-active="isOpen"
+        @toggleClick="isOpen = !isOpen"
+      />
+      <component
+        :is="panes.find(item => item.key === witchPane).component"
+        :class="[!deviceDetection() && 'ml-[120px]']"
+      />
+    </el-main>
+  </el-container>
+</template>
+
+<style lang="scss">
+.pure-account-settings {
+  background: $menuBg;
+}
+
+.pure-account-settings-menu {
+  background-color: transparent;
+  border: none;
+
+  .el-menu-item {
+    height: 48px !important;
+    color: $menuText;
+    background-color: transparent !important;
+    transition: color 0.2s;
+
+    &:hover {
+      color: $menuTitleHover !important;
+    }
+
+    &.is-active {
+      color: #fff !important;
+
+      &:hover {
+        color: #fff !important;
+      }
+
+      &::before {
+        position: absolute;
+        inset: 0 8px;
+        margin: 4px 0;
+        clear: both;
+        content: "";
+        background: var(--el-color-primary);
+        border-radius: 3px;
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+body[layout] {
+  .el-menu--vertical .is-active {
+    color: #fff !important;
+    transition: color 0.2s;
+
+    &:hover {
+      color: #fff !important;
+    }
+  }
+}
+</style>

Yi.Pure.Vue3/src/views/components/animatecss.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import ReAnimateSelector from "@/components/ReAnimateSelector";
+
+defineOptions({
+  name: "AnimateCss"
+});
+
+const animate = ref("");
+
+watch(animate, () => {
+  console.log("animate", animate.value);
+});
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          <el-link
+            href="https://animate.style/"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            animate.css
+          </el-link>
+          选择器
+        </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>
+</template>

Yi.Pure.Vue3/src/views/components/button.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+defineOptions({
+  name: "ButtonPage"
+});
+
+const { VITE_PUBLIC_PATH } = import.meta.env;
+
+const url = ref(`${VITE_PUBLIC_PATH}html/button.html`);
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <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>
+</template>

Yi.Pure.Vue3/src/views/components/cascader.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import {
+  provinceAndCityDataPlus,
+  provinceAndCityData,
+  convertTextToCode,
+  regionDataPlus,
+  regionData,
+  CodeToText
+} from "@/utils/chinaArea";
+import { ref } from "vue";
+
+defineOptions({
+  name: "Cascader"
+});
+
+const selectedOptions1 = ref(["110000", "110100"]);
+const selectedOptions2 = ref(["120000", "120100", "120101"]);
+const selectedOptions3 = ref(["130000", ""]);
+const selectedOptions4 = ref(["120000", "120100", ""]);
+
+const handleChange = value => {
+  console.log(value);
+};
+</script>
+
+<template>
+  <el-card shadow="never">
+    <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">
+          <span class="text-[var(--el-color-primary)]">
+            1. 二级联动（不带“全部”选项）
+            <el-cascader
+              v-model="selectedOptions1"
+              :options="provinceAndCityData"
+              @change="handleChange"
+            />
+          </span>
+          <div class="leading-10">
+            <div>绑定值：{{ selectedOptions1 }}</div>
+            <div>
+              区域码转汉字：
+              {{ CodeToText[selectedOptions1[0]] }},
+              {{ CodeToText[selectedOptions1[1]] }}
+            </div>
+            <div>
+              汉字转区域码：
+              {{
+                convertTextToCode(
+                  CodeToText[selectedOptions1[0]],
+                  CodeToText[selectedOptions1[1]]
+                )
+              }}
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
+        <div class="flex flex-col items-center justify-center mt-3">
+          <span class="text-[var(--el-color-primary)]">
+            2. 二级联动（带有“全部”选项）
+            <el-cascader
+              v-model="selectedOptions3"
+              :options="provinceAndCityDataPlus"
+              @change="handleChange"
+            />
+          </span>
+          <div class="leading-10">
+            <div>绑定值：{{ selectedOptions3 }}</div>
+            <div>
+              区域码转汉字：
+              {{ CodeToText[selectedOptions3[0]] }},
+              {{ CodeToText[selectedOptions3[1]] }}
+            </div>
+            <div>
+              汉字转区域码：
+              {{
+                convertTextToCode(
+                  CodeToText[selectedOptions3[0]],
+                  CodeToText[selectedOptions3[1]]
+                )
+              }}
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
+        <div class="flex flex-col items-center justify-center mt-3">
+          <span class="text-[var(--el-color-primary)]">
+            3. 三级联动（不带“全部”选项）
+            <el-cascader
+              v-model="selectedOptions2"
+              :options="regionData"
+              @change="handleChange"
+            />
+          </span>
+          <div class="leading-10">
+            <div>绑定值：{{ selectedOptions2 }}</div>
+            <div>
+              区域码转汉字：
+              {{ CodeToText[selectedOptions2[0]] }},
+              {{ CodeToText[selectedOptions2[1]] }},
+              {{ CodeToText[selectedOptions2[2]] }}
+            </div>
+            <div>
+              汉字转区域码：
+              {{
+                convertTextToCode(
+                  CodeToText[selectedOptions2[0]],
+                  CodeToText[selectedOptions2[1]],
+                  CodeToText[selectedOptions2[2]]
+                )
+              }}
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
+        <div class="flex flex-col items-center justify-center mt-3">
+          <span class="text-[var(--el-color-primary)]">
+            4. 三级联动（带"全部选项"）
+            <el-cascader
+              v-model="selectedOptions4"
+              :options="regionDataPlus"
+              @change="handleChange"
+            />
+          </span>
+          <div class="leading-10">
+            <div>绑定值：{{ selectedOptions4 }}</div>
+            <div>
+              区域码转汉字：
+              {{ CodeToText[selectedOptions4[0]] }},
+              {{ CodeToText[selectedOptions4[1]] }},
+              {{ CodeToText[selectedOptions4[2]] }}
+            </div>
+            <div>
+              汉字转区域码：
+              {{
+                convertTextToCode(
+                  CodeToText[selectedOptions4[0]],
+                  CodeToText[selectedOptions4[1]],
+                  CodeToText[selectedOptions4[2]]
+                )
+              }}
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </el-card>
+</template>

Yi.Pure.Vue3/src/views/components/check-button.vue

@@ -0,0 +1,333 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { message } from "@/utils/message";
+import { getKeyList } from "@pureadmin/utils";
+
+defineOptions({
+  name: "CheckButton"
+});
+
+const spaceSize = ref(20);
+const size = ref("default");
+const dynamicSize = ref();
+const checked = ref(true);
+
+const radio = ref("wait");
+const radioBox = ref("complete");
+const radioCustom = ref("progress");
+
+const checkboxGroup = ref(["apple", "tomato"]);
+const checkboxGroupBox = ref(["cucumber", "onion", "blueberry"]);
+const checkboxGroupCustom = ref(["tomato", "watermelon", "strawberry"]);
+
+/** 单选（可控制间距的按钮样式） */
+const checkTag = ref([
+  {
+    title: "等待中",
+    checked: false
+  },
+  {
+    title: "进行中",
+    checked: true
+  },
+  {
+    title: "已完成",
+    checked: false
+  }
+]);
+const curTagMap = ref({});
+function onChecked(tag, index) {
+  if (size.value === "disabled") return;
+  curTagMap.value[index] = Object.assign({
+    ...tag,
+    checked: !tag.checked
+  });
+  checkTag.value.map(item => (item.checked = false));
+  checkTag.value[index].checked = curTagMap.value[index].checked;
+  const { title, checked } = curTagMap.value[index];
+  message(checked ? `已选中${title}` : `取消选中${title}`, {
+    type: "success"
+  });
+}
+
+/** 多选（可控制间距的按钮样式） */
+const checkGroupTag = ref([
+  {
+    title: "苹果",
+    checked: true
+  },
+  {
+    title: "西红柿",
+    checked: true
+  },
+  {
+    title: "香蕉",
+    checked: false
+  }
+]);
+const curTagGroupMap = ref({});
+function onGroupChecked(tag, index) {
+  if (size.value === "disabled") return;
+  curTagGroupMap.value[index] = Object.assign({
+    ...tag,
+    checked: !tag.checked
+  });
+  checkGroupTag.value[index].checked = curTagGroupMap.value[index].checked;
+}
+
+function onSingleChecked() {
+  if (size.value === "disabled") return;
+  checked.value = !checked.value;
+}
+
+watch(size, val =>
+  val === "disabled"
+    ? (dynamicSize.value = "default")
+    : (dynamicSize.value = size.value)
+);
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <el-space wrap :size="40">
+          <span style="font-size: 16px; font-weight: 800"> 可选按钮 </span>
+          <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 value="disabled">禁用</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/check-button.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/check-button.vue
+      </el-link>
+    </template>
+    <p class="mb-2">单选（紧凑风格的按钮样式）</p>
+    <el-radio-group
+      v-model="radio"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    >
+      <el-radio-button value="wait">等待中</el-radio-button>
+      <el-radio-button value="progress">进行中</el-radio-button>
+      <el-radio-button value="complete">已完成</el-radio-button>
+    </el-radio-group>
+    <el-divider />
+
+    <p class="mb-2">单选（带有边框）</p>
+    <el-radio-group
+      v-model="radioBox"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    >
+      <el-radio value="wait" border>等待中</el-radio>
+      <el-radio value="progress" border>进行中</el-radio>
+      <el-radio value="complete" border>已完成</el-radio>
+    </el-radio-group>
+    <el-divider />
+
+    <p class="mb-2">单选（自定义内容）</p>
+    <el-radio-group
+      v-model="radioCustom"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    >
+      <el-radio-button value="wait">
+        <span class="flex">
+          <IconifyIconOnline icon="ri:progress-8-fill" class="mr-1" />
+          等待中
+        </span>
+      </el-radio-button>
+      <el-radio-button value="progress">
+        <span class="flex">
+          <IconifyIconOnline icon="ri:progress-6-line" class="mr-1" />
+          进行中
+        </span>
+      </el-radio-button>
+      <el-radio-button value="complete">
+        <span class="flex">
+          <IconifyIconOnline icon="ri:progress-8-line" class="mr-1" />
+          已完成
+        </span>
+      </el-radio-button>
+    </el-radio-group>
+    <el-divider />
+
+    <p class="mb-2">多选（紧凑风格的按钮样式）</p>
+    <el-checkbox-group
+      v-model="checkboxGroup"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    >
+      <el-checkbox-button value="apple">苹果</el-checkbox-button>
+      <el-checkbox-button value="tomato">西红柿</el-checkbox-button>
+      <el-checkbox-button value="banana">香蕉</el-checkbox-button>
+    </el-checkbox-group>
+    <el-divider />
+
+    <p class="mb-2">多选（带有边框）</p>
+    <el-checkbox-group
+      v-model="checkboxGroupBox"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    >
+      <el-checkbox value="cucumber" border>黄瓜</el-checkbox>
+      <el-checkbox value="onion" border>洋葱</el-checkbox>
+      <el-checkbox value="blueberry" border>蓝莓</el-checkbox>
+    </el-checkbox-group>
+    <el-divider />
+
+    <p class="mb-2">多选（来点不一样的体验）</p>
+    <el-checkbox-group
+      v-model="checkboxGroupCustom"
+      class="pure-checkbox"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    >
+      <el-checkbox-button value="tomato">
+        <span class="flex">
+          <IconifyIconOnline icon="streamline-emojis:tomato" class="mr-1" />
+          番茄
+        </span>
+      </el-checkbox-button>
+      <el-checkbox-button value="watermelon">
+        <span class="flex">
+          <IconifyIconOnline
+            icon="streamline-emojis:watermelon-1"
+            class="mr-1"
+          />
+          西瓜
+        </span>
+      </el-checkbox-button>
+      <el-checkbox-button value="strawberry">
+        <span class="flex">
+          <IconifyIconOnline
+            icon="streamline-emojis:strawberry-1"
+            class="mr-1"
+          />
+          草莓
+        </span>
+      </el-checkbox-button>
+    </el-checkbox-group>
+    <el-divider />
+
+    <p>可控制间距的按钮样式</p>
+    <el-slider
+      v-model="spaceSize"
+      class="mb-2 !w-[300px]"
+      :show-tooltip="false"
+      :disabled="size === 'disabled'"
+    />
+    <p class="mb-2">单选</p>
+    <el-space wrap :size="spaceSize">
+      <el-check-tag
+        v-for="(tag, index) in checkTag"
+        :key="index"
+        :class="[
+          'select-none',
+          size === 'disabled' && 'tag-disabled',
+          tag.checked && 'is-active'
+        ]"
+        :checked="tag.checked"
+        @change="onChecked(tag, index)"
+      >
+        {{ tag.title }}
+      </el-check-tag>
+    </el-space>
+    <p class="mb-2 mt-4">
+      多选
+      {{
+        getKeyList(
+          checkGroupTag.filter(tag => tag.checked),
+          "title"
+        )
+      }}
+    </p>
+    <el-space wrap :size="spaceSize">
+      <el-check-tag
+        v-for="(tag, index) in checkGroupTag"
+        :key="index"
+        :class="[
+          'select-none',
+          size === 'disabled' && 'tag-disabled',
+          tag.checked && 'is-active'
+        ]"
+        :checked="tag.checked"
+        @change="onGroupChecked(tag, index)"
+      >
+        {{ tag.title }}
+      </el-check-tag>
+    </el-space>
+    <el-divider />
+
+    <p class="mb-2">单个可选按钮</p>
+    <el-check-tag
+      :class="[
+        'select-none',
+        size === 'disabled' && 'tag-disabled',
+        checked && 'is-active'
+      ]"
+      :checked="checked"
+      @change="onSingleChecked"
+    >
+      一个人也要努力 😊
+    </el-check-tag>
+  </el-card>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-divider--horizontal) {
+  margin: 17px 0;
+}
+
+:deep(.pure-checkbox) {
+  .el-checkbox-button {
+    /* 选中时的自定义样式 */
+    &.is-checked {
+      .el-checkbox-button__inner {
+        color: var(--el-color-primary);
+        background-color: var(--el-color-primary-light-8);
+        border-color: transparent;
+        border-left-color: #fff;
+      }
+    }
+
+    /* 禁用时的自定义样式 */
+    &.is-disabled {
+      .el-checkbox-button__inner {
+        color: var(--el-disabled-text-color);
+        background-color: var(
+          --el-button-disabled-bg-color,
+          var(--el-fill-color-blank)
+        );
+        border-color: var(
+          --el-button-disabled-border-color,
+          var(--el-border-color-light)
+        );
+      }
+    }
+  }
+}
+
+/** 可控制间距的按钮禁用样式 */
+.tag-disabled {
+  color: var(--el-disabled-text-color);
+  cursor: not-allowed;
+  background-color: var(--el-color-info-light-9);
+
+  &:hover {
+    background-color: var(--el-color-info-light-9);
+  }
+
+  &.is-active {
+    background-color: var(--el-color-primary-light-9);
+  }
+}
+</style>

Yi.Pure.Vue3/src/views/components/check-card.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+// https://plus-pro-components.com/components/check-card-group.html
+import "plus-pro-components/es/components/check-card-group/style/css";
+import { PlusCheckCardGroup } from "plus-pro-components";
+
+defineOptions({
+  name: "CheckCard"
+});
+
+const size = ref("default");
+const dynamicSize = ref();
+const list = ref("0");
+const list1 = ref([]);
+
+const options = [
+  {
+    title: "标题一",
+    value: "0",
+    description: "坚持梦想，成就不凡的自己",
+    avatar:
+      "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+  },
+  {
+    title: "标题二",
+    value: "1",
+    description: "每一次努力，都是成长的契机",
+    avatar:
+      "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg"
+  }
+];
+
+watch(size, val =>
+  val === "disabled"
+    ? (dynamicSize.value = "default")
+    : (dynamicSize.value = size.value)
+);
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <el-space wrap :size="40">
+          <el-link
+            v-tippy="{
+              content: '点击查看详细文档'
+            }"
+            href="https://plus-pro-components.com/components/check-card-group.html"
+            target="_blank"
+            style="font-size: 16px; font-weight: 800"
+          >
+            多选卡片组
+          </el-link>
+          <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 value="disabled">禁用</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/check-card.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/check-card.vue
+      </el-link>
+    </template>
+
+    <p class="mb-2 mt-4">单选</p>
+    <PlusCheckCardGroup
+      v-model="list"
+      :options="options"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    />
+
+    <p class="mb-2 mt-4">多选</p>
+    <PlusCheckCardGroup
+      v-model="list1"
+      :options="options"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+      multiple
+    />
+  </el-card>
+</template>

Yi.Pure.Vue3/src/views/components/collapse.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+defineOptions({
+  name: "Collapse"
+});
+
+const radio = ref();
+const collapseRef = ref();
+const activeNames = ref(["1", "2", "3", "4", "5"]);
+const isOpen = ref(true);
+
+function onClick() {
+  isOpen.value
+    ? (activeNames.value = [])
+    : radio.value === "accordion"
+      ? (activeNames.value = ["5"])
+      : (activeNames.value = ["1", "2", "3", "4", "5"]);
+  isOpen.value = !isOpen.value;
+}
+
+const handleChange = (val: string[]) => {
+  console.log(val);
+};
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <el-space wrap :size="40">
+          <el-link
+            v-tippy="{
+              content: '点击查看详细文档'
+            }"
+            href="https://element-plus.org/zh-CN/component/collapse.html"
+            target="_blank"
+            style="font-size: 16px; font-weight: 800"
+          >
+            折叠面板
+          </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>
+    <el-radio-group v-model="radio" class="mb-3">
+      <el-radio value="">可同时展开多个面板</el-radio>
+      <el-radio value="accordion">每次只能展开一个面板</el-radio>
+    </el-radio-group>
+    <el-button size="small" text bg class="ml-8 mb-1" @click="onClick">
+      外部触发打开、关闭
+    </el-button>
+    <el-collapse
+      ref="collapseRef"
+      v-model="activeNames"
+      class="w-[360px]"
+      :accordion="radio === 'accordion' ? true : false"
+      @change="handleChange"
+    >
+      <el-collapse-item title="周一" name="1">
+        周一启航，新的篇章
+      </el-collapse-item>
+      <el-collapse-item title="周二" name="2">
+        周二律动，携手共进
+      </el-collapse-item>
+      <el-collapse-item title="周三" name="3">
+        周三昂扬，激情不减
+      </el-collapse-item>
+      <el-collapse-item title="周四" name="4">
+        周四精进，事半功倍
+      </el-collapse-item>
+      <el-collapse-item name="5">
+        <template #title>
+          周五
+          <IconifyIconOnline
+            icon="streamline-emojis:beaming-face-with-smiling-eyes"
+            class="ml-1"
+            width="30"
+          />
+        </template>
+        周五喜悦，收尾归档
+      </el-collapse-item>
+    </el-collapse>
+  </el-card>
+</template>

Yi.Pure.Vue3/src/views/components/color-picker.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+
+defineOptions({
+  name: "ColorPicker"
+});
+
+const size = ref("default");
+const dynamicSize = ref();
+const isOpen = ref(false);
+const colorPickerRef = ref();
+
+const color = ref("rgba(255, 69, 0, 0.68)");
+const otherColor = ref("hsla(209, 100%, 56%, 0.73)");
+const predefineColors = ref([
+  "#ff4500",
+  "#ff8c00",
+  "#ffd700",
+  "#90ee90",
+  "#00ced1",
+  "#1e90ff",
+  "#c71585",
+  "rgba(255, 69, 0, 0.68)",
+  "rgb(255, 120, 0)",
+  "hsv(51, 100, 98)",
+  "hsva(120, 40, 94, 0.5)",
+  "hsl(181, 100%, 37%)",
+  "hsla(209, 100%, 56%, 0.73)",
+  "#c7158577"
+]);
+
+watch(size, val =>
+  val === "disabled"
+    ? (dynamicSize.value = "default")
+    : (dynamicSize.value = size.value)
+);
+
+function onClick() {
+  isOpen.value ? colorPickerRef.value.hide() : colorPickerRef.value.show();
+  isOpen.value = !isOpen.value;
+}
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <el-space wrap :size="40">
+          <el-link
+            v-tippy="{
+              content: '点击查看详细文档'
+            }"
+            href="https://element-plus.org/zh-CN/component/color-picker.html"
+            target="_blank"
+            style="font-size: 16px; font-weight: 800"
+          >
+            颜色选择器
+          </el-link>
+          <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 value="disabled">禁用</el-radio>
+          </el-radio-group>
+        </el-space>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/color-picker.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/color-picker.vue
+      </el-link>
+    </template>
+
+    <p class="mb-2">不同尺寸、选择透明度、预定义颜色</p>
+    <el-color-picker
+      v-model="color"
+      show-alpha
+      :predefine="predefineColors"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    />
+    <el-divider />
+
+    <p class="mb-2">外部触发器</p>
+    <el-space wrap>
+      <el-color-picker
+        ref="colorPickerRef"
+        v-model="otherColor"
+        show-alpha
+        :predefine="predefineColors"
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+      />
+      <el-button
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+        @click="onClick"
+      >
+        {{ isOpen ? "关闭" : "打开" }}
+      </el-button>
+    </el-space>
+  </el-card>
+</template>

Yi.Pure.Vue3/src/views/components/contextmenu/basic.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <p class="mb-2">基础用法</p>
+    <div v-contextmenu:contextmenu class="wrapper">
+      <code>右键点击此区域</code>
+    </div>
+
+    <v-contextmenu ref="contextmenu">
+      <v-contextmenu-item>GitHub</v-contextmenu-item>
+      <v-contextmenu-item>GitLab</v-contextmenu-item>
+
+      <v-contextmenu-divider />
+
+      <v-contextmenu-submenu title="蔬菜菜">
+        <v-contextmenu-item>土豆</v-contextmenu-item>
+
+        <v-contextmenu-submenu title="青菜">
+          <v-contextmenu-item>小油菜</v-contextmenu-item>
+          <v-contextmenu-item>空心菜</v-contextmenu-item>
+        </v-contextmenu-submenu>
+
+        <v-contextmenu-item>黄瓜</v-contextmenu-item>
+      </v-contextmenu-submenu>
+
+      <v-contextmenu-item disabled>菠萝蜜</v-contextmenu-item>
+
+      <v-contextmenu-divider />
+
+      <v-contextmenu-item>哈密瓜</v-contextmenu-item>
+    </v-contextmenu>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import {
+  directive,
+  Contextmenu,
+  ContextmenuItem,
+  ContextmenuDivider,
+  ContextmenuSubmenu,
+  ContextmenuGroup
+} from "v-contextmenu";
+
+export default defineComponent({
+  name: "ExampleSimple",
+
+  components: {
+    [Contextmenu.name]: Contextmenu,
+    [ContextmenuItem.name]: ContextmenuItem,
+    [ContextmenuDivider.name]: ContextmenuDivider,
+    [ContextmenuSubmenu.name]: ContextmenuSubmenu,
+    [ContextmenuGroup.name]: ContextmenuGroup
+  },
+
+  directives: {
+    contextmenu: directive
+  }
+});
+</script>
+
+<style scoped>
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 300px;
+  height: 200px;
+  background-color: rgb(90 167 164 / 20%);
+  border: 3px dashed rgb(90 167 164 / 90%);
+  border-radius: 8px;
+}
+</style>

Yi.Pure.Vue3/src/views/components/contextmenu/index.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import basic from "./basic.vue";
+import menuGroup from "./menuGroup.vue";
+import menuDynamic from "./menuDynamic.vue";
+import "v-contextmenu/dist/themes/default.css";
+
+defineOptions({
+  name: "ContextMenu"
+});
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-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/contextmenu"
+          target="_blank"
+        >
+          代码位置 src/views/components/contextmenu
+        </el-link>
+      </div>
+    </template>
+    <el-row :gutter="24">
+      <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="10">
+        <!-- 基础用法 -->
+        <basic />
+      </el-col>
+      <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="10">
+        <!-- 按钮组 -->
+        <menuGroup />
+      </el-col>
+      <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="10">
+        <!-- 动态菜单 -->
+        <menuDynamic />
+      </el-col>
+    </el-row>
+  </el-card>
+</template>

Yi.Pure.Vue3/src/views/components/contextmenu/menuDynamic.vue

@@ -0,0 +1,110 @@
+<template>
+  <div>
+    <p class="mb-2">动态菜单</p>
+    <div v-contextmenu:contextmenu class="wrapper">
+      <code>右键点击此区域</code>
+    </div>
+
+    <v-contextmenu ref="contextmenu">
+      <v-contextmenu-group title="操作">
+        <v-contextmenu-item :hide-on-click="false" @click="extra.push('item')">
+          添加菜单
+        </v-contextmenu-item>
+        <v-contextmenu-item :hide-on-click="false" @click="extra.push('group')">
+          添加菜单组
+        </v-contextmenu-item>
+        <v-contextmenu-item
+          :hide-on-click="false"
+          @click="extra.push('submenu')"
+        >
+          添加子菜单
+        </v-contextmenu-item>
+        <v-contextmenu-item :hide-on-click="false" @click="extra.pop()">
+          删除
+        </v-contextmenu-item>
+      </v-contextmenu-group>
+
+      <template v-for="(item, index) of extra" :key="index">
+        <v-contextmenu-divider />
+
+        <v-contextmenu-group
+          v-if="item === 'group'"
+          :title="`菜单组 ${index + 1}`"
+        >
+          <v-contextmenu-item>菜单1</v-contextmenu-item>
+          <v-contextmenu-item>菜单2</v-contextmenu-item>
+          <v-contextmenu-item>菜单3</v-contextmenu-item>
+        </v-contextmenu-group>
+
+        <v-contextmenu-submenu
+          v-else-if="item === 'submenu'"
+          :title="`子菜单 ${index + 1}`"
+        >
+          <v-contextmenu-item>菜单1</v-contextmenu-item>
+          <v-contextmenu-item>菜单2</v-contextmenu-item>
+          <v-contextmenu-item>菜单3</v-contextmenu-item>
+        </v-contextmenu-submenu>
+
+        <v-contextmenu-item v-else>菜单 {{ index + 1 }}</v-contextmenu-item>
+      </template>
+    </v-contextmenu>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import {
+  directive,
+  Contextmenu,
+  ContextmenuItem,
+  ContextmenuDivider,
+  ContextmenuSubmenu,
+  ContextmenuGroup
+} from "v-contextmenu";
+
+export default defineComponent({
+  name: "ExampleDynamic",
+
+  components: {
+    [Contextmenu.name]: Contextmenu,
+    [ContextmenuItem.name]: ContextmenuItem,
+    [ContextmenuDivider.name]: ContextmenuDivider,
+    [ContextmenuSubmenu.name]: ContextmenuSubmenu,
+    [ContextmenuGroup.name]: ContextmenuGroup
+  },
+
+  directives: {
+    contextmenu: directive
+  },
+
+  data() {
+    return {
+      extra: []
+    };
+  },
+
+  methods: {
+    addItem(type = "item") {
+      this.extra.push(type);
+    },
+    removeItem() {
+      this.extra.pop();
+    }
+  }
+});
+</script>
+
+<style scoped>
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 300px;
+  height: 200px;
+  margin-bottom: 30px;
+  background-color: rgb(90 167 164 / 20%);
+  border: 3px dashed rgb(90 167 164 / 90%);
+  border-radius: 8px;
+}
+</style>

Yi.Pure.Vue3/src/views/components/contextmenu/menuGroup.vue

@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <p class="mb-2">按钮组</p>
+    <div v-contextmenu:contextmenu class="wrapper">
+      <code>右键点击此区域</code>
+    </div>
+
+    <v-contextmenu ref="contextmenu">
+      <v-contextmenu-item>菜单</v-contextmenu-item>
+
+      <v-contextmenu-group>
+        <v-contextmenu-item>Github</v-contextmenu-item>
+        <v-contextmenu-item>Codepen</v-contextmenu-item>
+        <v-contextmenu-item disabled>Alipay</v-contextmenu-item>
+        <v-contextmenu-item>Wechat</v-contextmenu-item>
+      </v-contextmenu-group>
+
+      <v-contextmenu-divider />
+
+      <v-contextmenu-group title="按钮组">
+        <v-contextmenu-item>菜单1</v-contextmenu-item>
+        <v-contextmenu-item>菜单2</v-contextmenu-item>
+        <v-contextmenu-item disabled>菜单3</v-contextmenu-item>
+      </v-contextmenu-group>
+    </v-contextmenu>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import {
+  directive,
+  Contextmenu,
+  ContextmenuItem,
+  ContextmenuDivider,
+  ContextmenuSubmenu,
+  ContextmenuGroup
+} from "v-contextmenu";
+
+const ExampleSFC = defineComponent({
+  name: "ExampleSFC",
+
+  components: {
+    [Contextmenu.name]: Contextmenu,
+    [ContextmenuItem.name]: ContextmenuItem,
+    [ContextmenuDivider.name]: ContextmenuDivider,
+    [ContextmenuSubmenu.name]: ContextmenuSubmenu,
+    [ContextmenuGroup.name]: ContextmenuGroup
+  },
+
+  directives: {
+    contextmenu: directive
+  }
+});
+
+export default ExampleSFC;
+</script>
+
+<style scoped>
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 300px;
+  height: 200px;
+  background-color: rgb(90 167 164 / 20%);
+  border: 3px dashed rgb(90 167 164 / 90%);
+  border-radius: 8px;
+}
+</style>

Yi.Pure.Vue3/src/views/components/count-to.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { ReNormalCountTo, ReboundCountTo } from "@/components/ReCountTo";
+
+defineOptions({
+  name: "CountTo"
+});
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-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/count-to.vue"
+          target="_blank"
+        >
+          代码位置 src/views/components/count-to.vue
+        </el-link>
+      </div>
+    </template>
+    <ReNormalCountTo
+      prefix="$"
+      :duration="1000"
+      :color="'#409EFF'"
+      :fontSize="'2em'"
+      :startVal="1"
+      :endVal="1000"
+    />
+    <br />
+    <ul class="flex">
+      <ReboundCountTo
+        v-for="(num, inx) of [1, 6, 6, 6]"
+        :key="inx"
+        :i="num"
+        :blur="inx"
+        :delay="inx + 1"
+      />
+    </ul>
+  </el-card>
+</template>

Yi.Pure.Vue3/src/views/components/cropping/index.vue

@@ -0,0 +1,89 @@
+<script setup lang="tsx">
+import avatar from "./avatar.png";
+import { ref, onBeforeUnmount } from "vue";
+import ReCropper from "@/components/ReCropper";
+import { formatBytes } from "@pureadmin/utils";
+
+defineOptions({
+  name: "Cropping"
+});
+
+const infos = ref();
+const popoverRef = ref();
+const refCropper = ref();
+const showPopover = ref(false);
+const cropperImg = ref<string>("");
+
+function onCropper({ base64, blob, info }) {
+  console.log(blob);
+  infos.value = info;
+  cropperImg.value = base64;
+}
+
+onBeforeUnmount(() => {
+  popoverRef.value.hide();
+});
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          图片裁剪，基于开源的
+          <el-link
+            href="https://fengyuanchen.github.io/cropperjs/"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            cropperjs
+          </el-link>
+          进行二次封装（提示：右键下面左侧裁剪区可开启功能菜单）
+        </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
+        ref="popoverRef"
+        :visible="showPopover"
+        placement="right"
+        width="300px"
+      >
+        <template #reference>
+          <ReCropper
+            ref="refCropper"
+            class="w-[30vw]"
+            :src="avatar"
+            circled
+            @cropper="onCropper"
+            @readied="showPopover = true"
+          />
+        </template>
+        <div class="flex flex-wrap justify-center items-center text-center">
+          <el-image
+            v-if="cropperImg"
+            :src="cropperImg"
+            :preview-src-list="Array.of(cropperImg)"
+            fit="cover"
+          />
+          <div v-if="infos" class="mt-1">
+            <p>
+              图像大小：{{ parseInt(infos.width) }} ×
+              {{ parseInt(infos.height) }}像素
+            </p>
+            <p>
+              文件大小：{{ formatBytes(infos.size) }}（{{ infos.size }} 字节）
+            </p>
+          </div>
+        </div>
+      </el-popover>
+    </div>
+  </el-card>
+</template>

Yi.Pure.Vue3/src/views/components/date-picker.vue

@@ -0,0 +1,339 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+
+defineOptions({
+  name: "DatePicker"
+});
+
+const size = ref("default");
+const dynamicSize = ref();
+
+const value = ref("");
+const shortcuts = [
+  {
+    text: "今天",
+    value: new Date()
+  },
+  {
+    text: "昨天",
+    value: () => {
+      const date = new Date();
+      date.setTime(date.getTime() - 3600 * 1000 * 24);
+      return date;
+    }
+  },
+  {
+    text: "一周前",
+    value: () => {
+      const date = new Date();
+      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+      return date;
+    }
+  }
+];
+
+const disabledDate = (time: Date) => {
+  return time.getTime() > Date.now();
+};
+
+const value1 = ref("");
+const value2 = ref("");
+const value3 = ref("");
+const value4 = ref("");
+
+const value5 = ref("");
+const shortcuts1 = [
+  {
+    text: "上周",
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+      return [start, end];
+    }
+  },
+  {
+    text: "上个月",
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+      return [start, end];
+    }
+  },
+  {
+    text: "三个月前",
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+      return [start, end];
+    }
+  }
+];
+
+const value6 = ref("");
+const shortcuts2 = [
+  {
+    text: "本月",
+    value: [new Date(), new Date()]
+  },
+  {
+    text: "今年",
+    value: () => {
+      const end = new Date();
+      const start = new Date(new Date().getFullYear(), 0);
+      return [start, end];
+    }
+  },
+  {
+    text: "六个月前",
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setMonth(start.getMonth() - 6);
+      return [start, end];
+    }
+  }
+];
+
+const value7 = ref("");
+const dateFormat = ref("");
+
+const value8 = ref("");
+
+const value9 = ref("2023-10-30");
+const holidays = [
+  "2023-10-22",
+  "2023-10-23",
+  "2023-10-24",
+  "2023-10-25",
+  "2023-10-26",
+  "2023-10-27",
+  "2023-10-28",
+  "2023-10-29",
+  "2023-10-30",
+  "2023-10-31"
+];
+
+const isHoliday = ({ dayjs }) => {
+  return holidays.includes(dayjs.format("YYYY-MM-DD"));
+};
+
+watch(size, val =>
+  val === "disabled"
+    ? (dynamicSize.value = "default")
+    : (dynamicSize.value = size.value)
+);
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <el-space wrap :size="40">
+          <el-link
+            v-tippy="{
+              content: '点击查看详细文档'
+            }"
+            href="https://element-plus.org/zh-CN/component/date-picker.html"
+            target="_blank"
+            style="font-size: 16px; font-weight: 800"
+          >
+            日期选择器
+          </el-link>
+          <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 value="disabled">禁用</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/date-picker.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/date-picker.vue
+      </el-link>
+    </template>
+
+    <p class="mb-2">选择某一天</p>
+    <el-date-picker
+      v-model="value"
+      type="date"
+      class="!w-[160px]"
+      placeholder="请选择"
+      :disabled-date="disabledDate"
+      :shortcuts="shortcuts"
+      :popper-options="{
+        placement: 'bottom-start'
+      }"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    />
+
+    <p class="mb-2 mt-4">选择周、月、年或多个日期</p>
+    <el-space wrap>
+      <el-date-picker
+        v-model="value1"
+        type="week"
+        class="!w-[160px]"
+        format="YYYY年第ww周"
+        placeholder="选择某年中的某周"
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+      />
+      <el-date-picker
+        v-model="value2"
+        type="month"
+        class="!w-[160px]"
+        placeholder="选择某月"
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+      />
+      <el-date-picker
+        v-model="value3"
+        type="year"
+        class="!w-[160px]"
+        placeholder="选择某年"
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+      />
+      <el-date-picker
+        v-model="value4"
+        type="dates"
+        class="!w-[160px]"
+        placeholder="选择多个日期"
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+      />
+    </el-space>
+
+    <p class="mb-2 mt-4">选择一段时间</p>
+    <el-date-picker
+      v-model="value5"
+      type="daterange"
+      class="!w-[240px]"
+      unlink-panels
+      range-separator="至"
+      start-placeholder="开始时间"
+      end-placeholder="结束时间"
+      :shortcuts="shortcuts1"
+      :popper-options="{
+        placement: 'bottom-start' // 下拉面板出现的位置，或 'top-start'、'bottom-end'、'top-end' 等，具体看 https://popper.js.org/docs/v2/constructors/#options
+      }"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    />
+
+    <p class="mb-2 mt-4">选择月份范围</p>
+    <el-date-picker
+      v-model="value6"
+      type="monthrange"
+      unlink-panels
+      range-separator="至"
+      start-placeholder="开始月份"
+      end-placeholder="结束月份"
+      :shortcuts="shortcuts2"
+      :popper-options="{
+        placement: 'bottom-start'
+      }"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    />
+
+    <p class="mb-2 mt-4">日期格式</p>
+    <el-radio-group
+      v-model="dateFormat"
+      class="mb-2"
+      :disabled="size === 'disabled'"
+      @change="value7 = ''"
+    >
+      <el-radio value="">Date</el-radio>
+      <el-radio value="YYYY-MM-DD">年月日</el-radio>
+      <el-radio value="x">时间戳</el-radio>
+    </el-radio-group>
+    <br />
+    <el-space wrap>
+      <el-date-picker
+        v-model="value7"
+        type="date"
+        class="!w-[160px]"
+        placeholder="请选择日期"
+        format="YYYY/MM/DD"
+        :value-format="dateFormat"
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+      />
+      <span class="ml-2">{{ value7 }}</span>
+    </el-space>
+
+    <p class="mb-2 mt-4">自定义前缀</p>
+    <el-date-picker
+      v-model="value8"
+      type="date"
+      class="!w-[160px]"
+      placeholder="请选择日期"
+      :prefix-icon="useRenderIcon('twemoji:spiral-calendar')"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    />
+
+    <p class="mb-2 mt-4">自定义内容</p>
+    <el-date-picker
+      v-model="value9"
+      type="date"
+      placeholder="请选择日期"
+      format="YYYY/MM/DD"
+      value-format="YYYY-MM-DD"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    >
+      <template #default="cell">
+        <div class="cell" :class="{ current: cell.isCurrent }">
+          <span class="text">{{ cell.text }}</span>
+          <span v-if="isHoliday(cell)" class="holiday" />
+        </div>
+      </template>
+    </el-date-picker>
+  </el-card>
+</template>
+
+<style scoped>
+.cell {
+  box-sizing: border-box;
+  height: 30px;
+  padding: 3px 0;
+}
+
+.cell .text {
+  position: absolute;
+  left: 50%;
+  display: block;
+  width: 24px;
+  height: 24px;
+  margin: 0 auto;
+  line-height: 24px;
+  border-radius: 50%;
+  transform: translateX(-50%);
+}
+
+.cell.current .text {
+  color: #fff;
+  background: #626aef;
+}
+
+.cell .holiday {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 6px;
+  height: 6px;
+  background: var(--el-color-danger);
+  border-radius: 50%;
+  transform: translateX(-50%);
+}
+</style>

Yi.Pure.Vue3/src/views/components/datetime-picker.vue

@@ -0,0 +1,288 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+
+defineOptions({
+  name: "DateTimePicker"
+});
+
+const size = ref("default");
+const dynamicSize = ref();
+
+const value = ref("");
+const shortcuts = [
+  {
+    text: "今天",
+    value: new Date()
+  },
+  {
+    text: "昨天",
+    value: () => {
+      const date = new Date();
+      date.setTime(date.getTime() - 3600 * 1000 * 24);
+      return date;
+    }
+  },
+  {
+    text: "一周前",
+    value: () => {
+      const date = new Date();
+      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+      return date;
+    }
+  }
+];
+
+const value1 = ref("");
+const datetimeFormat = ref("");
+
+const value2 = ref("");
+const shortcuts1 = [
+  {
+    text: "上周",
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+      return [start, end];
+    }
+  },
+  {
+    text: "上个月",
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+      return [start, end];
+    }
+  },
+  {
+    text: "三个月前",
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+      return [start, end];
+    }
+  }
+];
+
+const value3 = ref("");
+const datePickerRef = ref();
+const placement = ref("auto");
+const checkTag = ref([
+  {
+    title: "auto", // https://popper.js.org/docs/v2/constructors/#options
+    checked: false
+  },
+  {
+    title: "auto-start",
+    checked: false
+  },
+  {
+    title: "auto-end",
+    checked: false
+  },
+  {
+    title: "top",
+    checked: false
+  },
+  {
+    title: "top-start",
+    checked: false
+  },
+  {
+    title: "top-end",
+    checked: false
+  },
+  {
+    title: "bottom",
+    checked: false
+  },
+  {
+    title: "bottom-start",
+    checked: false
+  },
+  {
+    title: "bottom-end",
+    checked: false
+  },
+  {
+    title: "right",
+    checked: false
+  },
+  {
+    title: "right-start",
+    checked: false
+  },
+  {
+    title: "right-end",
+    checked: false
+  },
+  {
+    title: "left",
+    checked: false
+  },
+  {
+    title: "left-start",
+    checked: false
+  },
+  {
+    title: "left-end",
+    checked: false
+  }
+]);
+const curTagMap = ref({});
+function onChecked(tag, index) {
+  if (size.value === "disabled") return;
+  placement.value = tag.title;
+  curTagMap.value[index] = Object.assign({
+    ...tag,
+    checked: !tag.checked
+  });
+  checkTag.value.map(item => (item.checked = false));
+  checkTag.value[index].checked = curTagMap.value[index].checked;
+  // 外部触发日期时间选择面板的打开与关闭
+  curTagMap.value[index].checked
+    ? datePickerRef.value.handleOpen()
+    : datePickerRef.value.handleClose();
+}
+
+watch(size, val =>
+  val === "disabled"
+    ? (dynamicSize.value = "default")
+    : (dynamicSize.value = size.value)
+);
+</script>
+
+<template>
+  <el-card shadow="never" :style="{ height: '100vh' }">
+    <template #header>
+      <div class="card-header">
+        <el-space wrap :size="40">
+          <el-link
+            v-tippy="{
+              content: '点击查看详细文档'
+            }"
+            href="https://element-plus.org/zh-CN/component/datetime-picker.html"
+            target="_blank"
+            style="font-size: 16px; font-weight: 800"
+          >
+            日期时间选择器
+          </el-link>
+          <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 value="disabled">禁用</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/datetime-picker.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/datetime-picker.vue
+      </el-link>
+    </template>
+
+    <p class="mb-2">日期和时间点</p>
+    <el-date-picker
+      v-model="value"
+      type="datetime"
+      class="!w-[200px]"
+      placeholder="请选择日期时间"
+      :shortcuts="shortcuts"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    />
+
+    <p class="mb-2 mt-4">日期时间格式</p>
+    <el-radio-group
+      v-model="datetimeFormat"
+      class="mb-2"
+      :disabled="size === 'disabled'"
+      @change="value1 = ''"
+    >
+      <el-radio value="">Date</el-radio>
+      <el-radio value="YYYY-MM-DD HH:mm:ss">年月日 时分秒</el-radio>
+      <el-radio value="x">时间戳</el-radio>
+    </el-radio-group>
+    <br />
+    <el-space wrap>
+      <el-date-picker
+        v-model="value1"
+        type="datetime"
+        class="!w-[200px]"
+        placeholder="请选择日期时间"
+        format="YYYY/MM/DD hh:mm:ss"
+        :value-format="datetimeFormat"
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+      />
+      <span class="ml-2">{{ value1 }}</span>
+    </el-space>
+
+    <p class="mb-2 mt-4">日期和时间范围</p>
+    <el-date-picker
+      v-model="value2"
+      type="datetimerange"
+      :shortcuts="shortcuts1"
+      range-separator="至"
+      start-placeholder="开始日期时间"
+      end-placeholder="结束日期时间"
+      :popper-options="{
+        placement: 'bottom-start'
+      }"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    />
+
+    <p class="mb-2 mt-4">
+      弹出面板位置可控（如果弹出位置不足以完整展示面板会自动调整位置）
+    </p>
+    <el-space wrap class="w-[400px]">
+      <el-check-tag
+        v-for="(tag, index) in checkTag"
+        :key="index"
+        :class="[
+          'select-none',
+          size === 'disabled' && 'tag-disabled',
+          tag.checked && 'is-active'
+        ]"
+        :checked="tag.checked"
+        @change="onChecked(tag, index)"
+      >
+        {{ tag.title }}
+      </el-check-tag>
+    </el-space>
+    <el-date-picker
+      ref="datePickerRef"
+      v-model="value3"
+      type="datetime"
+      class="ml-[15%]"
+      placeholder="请选择日期时间"
+      :popper-options="{
+        placement
+      }"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    />
+  </el-card>
+</template>
+
+<style lang="scss" scoped>
+.tag-disabled {
+  color: var(--el-disabled-text-color);
+  cursor: not-allowed;
+  background-color: var(--el-color-info-light-9);
+
+  &:hover {
+    background-color: var(--el-color-info-light-9);
+  }
+
+  &.is-active {
+    background-color: var(--el-color-primary-light-9);
+  }
+}
+</style>

Yi.Pure.Vue3/src/views/components/dialog/form.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+// 声明 props 类型
+export interface FormProps {
+  formInline: {
+    user: string;
+    region: string;
+  };
+}
+
+// 声明 props 默认值
+// 推荐阅读：https://cn.vuejs.org/guide/typescript/composition-api.html#typing-component-props
+const props = withDefaults(defineProps<FormProps>(), {
+  formInline: () => ({ user: "", region: "" })
+});
+
+// vue 规定所有的 prop 都遵循着单向绑定原则，直接修改 prop 时，Vue 会抛出警告。此处的写法仅仅是为了消除警告。
+// 因为对一个 reactive 对象执行 ref，返回 Ref 对象的 value 值仍为传入的 reactive 对象，
+// 即 newFormInline === props.formInline 为 true，所以此处代码的实际效果，仍是直接修改 props.formInline。
+// 但该写法仅适用于 props.formInline 是一个对象类型的情况，原始类型需抛出事件
+// 推荐阅读：https://cn.vuejs.org/guide/components/props.html#one-way-data-flow
+const newFormInline = ref(props.formInline);
+</script>
+
+<template>
+  <el-form :model="newFormInline">
+    <el-form-item label="姓名">
+      <el-input
+        v-model="newFormInline.user"
+        class="!w-[220px]"
+        placeholder="请输入姓名"
+      />
+    </el-form-item>
+    <el-form-item label="城市">
+      <el-select
+        v-model="newFormInline.region"
+        class="!w-[220px]"
+        placeholder="请选择城市"
+      >
+        <el-option label="上海" value="上海" />
+        <el-option label="浙江" value="浙江" />
+        <el-option label="深圳" value="深圳" />
+      </el-select>
+    </el-form-item>
+  </el-form>
+</template>

Yi.Pure.Vue3/src/views/components/dialog/formPrimitive.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { useVModel } from "@vueuse/core";
+
+// 声明 props 类型
+export interface FormProps {
+  data: string;
+}
+
+// 声明 props 默认值
+// 推荐阅读：https://cn.vuejs.org/guide/typescript/composition-api.html#typing-component-props
+const props = withDefaults(defineProps<FormProps>(), {
+  data: () => ""
+});
+
+// 使用 vueuse 的双向绑定工具
+const emit = defineEmits(["update:data"]);
+const data = useVModel(props, "data", emit);
+</script>
+
+<template>
+  <el-input v-model="data" class="!w-[220px]" placeholder="请输入内容" />
+</template>

Yi.Pure.Vue3/src/views/components/dialog/index.vue

@@ -0,0 +1,555 @@
+<script setup lang="tsx">
+import { useRouter } from "vue-router";
+import { h, createVNode, ref } from "vue";
+import { message } from "@/utils/message";
+import formPrimitive from "./formPrimitive.vue";
+import forms, { type FormProps } from "./form.vue";
+import { cloneDeep, debounce } from "@pureadmin/utils";
+import {
+  addDialog,
+  closeDialog,
+  updateDialog,
+  closeAllDialog
+} from "@/components/ReDialog";
+
+defineOptions({
+  name: "DialogPage"
+});
+
+const router = useRouter();
+
+function onBaseClick() {
+  addDialog({
+    title: "基础用法",
+    contentRenderer: () => <p>弹框内容-基础用法</p> // jsx 语法 （注意在.vue文件启用jsx语法，需要在script开启lang="tsx"）
+  });
+}
+
+function onDraggableClick() {
+  addDialog({
+    title: "可拖拽",
+    draggable: true,
+    contentRenderer: () => h("p", "弹框内容-可拖拽") // h 渲染函数 https://cn.vuejs.org/api/render-function.html#h
+  });
+}
+
+function onFullscreenClick() {
+  addDialog({
+    title: "全屏",
+    fullscreen: true,
+    contentRenderer: () => createVNode("p", null, "弹框内容-全屏") // createVNode 渲染函数 https://cn.vuejs.org/guide/extras/render-function.html#creating-vnodes
+  });
+}
+
+function onFullscreenIconClick() {
+  addDialog({
+    title: "全屏按钮和全屏事件",
+    fullscreenIcon: true,
+    fullscreenCallBack: ({ options, index }) =>
+      message(options.fullscreen ? "全屏" : "非全屏"),
+    contentRenderer: () => <p>弹框内容-全屏按钮和全屏事件</p>
+  });
+}
+
+function onModalClick() {
+  addDialog({
+    title: "无背景遮罩层",
+    modal: false,
+    contentRenderer: () => <p>弹框内容-无背景遮罩层</p>
+  });
+}
+
+function onStyleClick() {
+  addDialog({
+    title: "自定义弹出位置",
+    top: "60vh",
+    style: { marginRight: "20px" },
+    contentRenderer: () => <p>弹框内容-自定义弹出位置</p>
+  });
+}
+
+// 添加 600ms 防抖
+const onoOpenDelayClick = debounce(
+  () =>
+    addDialog({
+      title: "延时2秒打开弹框",
+      openDelay: 2000 - 600,
+      contentRenderer: () => <p>弹框内容-延时2秒打开弹框</p>
+    }),
+  600
+);
+
+function onCloseDelayClick() {
+  addDialog({
+    title: "延时2秒关闭弹框",
+    closeDelay: 2000,
+    contentRenderer: () => <p>弹框内容-延时2秒关闭弹框</p>
+  });
+}
+
+function onShowCloseClick() {
+  addDialog({
+    title: "不显示右上角关闭按钮图标",
+    showClose: false,
+    contentRenderer: () => <p>弹框内容-不显示右上角关闭按钮图标</p>
+  });
+}
+
+function onBeforeCloseClick() {
+  addDialog({
+    title: "禁止通过键盘ESC关闭",
+    closeOnPressEscape: false,
+    contentRenderer: () => <p>弹框内容-禁止通过键盘ESC关闭</p>
+  });
+}
+
+function onCloseOnClickModalClick() {
+  addDialog({
+    title: "禁止通过点击modal关闭",
+    closeOnClickModal: false,
+    contentRenderer: () => <p>弹框内容-禁止通过点击modal关闭</p>
+  });
+}
+
+function onHideFooterClick() {
+  addDialog({
+    title: "隐藏底部取消、确定按钮",
+    hideFooter: true,
+    contentRenderer: () => <p>弹框内容-隐藏底部取消、确定按钮</p>
+  });
+}
+
+function onHeaderRendererClick() {
+  addDialog({
+    title: "自定义头部",
+    showClose: false,
+    headerRenderer: ({ close, titleId, titleClass }) => (
+      // jsx 语法
+      <div class="flex flex-row justify-between">
+        <h4 id={titleId} class={titleClass}>
+          自定义头部
+        </h4>
+        <el-button type="danger" onClick={close}>
+          关闭
+        </el-button>
+      </div>
+    ),
+    contentRenderer: () => <p>弹框内容-自定义头部</p>
+  });
+}
+
+function onFooterRendererClick() {
+  addDialog({
+    title: "自定义底部",
+    footerRenderer: ({ options, index }) => (
+      <el-button onClick={() => closeDialog(options, index)}>
+        {options.title}-{index}
+      </el-button>
+    ),
+    contentRenderer: () => <p>弹框内容-自定义底部</p>
+  });
+}
+
+function onFooterButtonsClick() {
+  addDialog({
+    title: "自定义底部按钮",
+    footerButtons: [
+      {
+        label: "按钮1",
+        size: "small",
+        type: "success",
+        btnClick: ({ dialog: { options, index }, button }) => {
+          console.log(options, index, button);
+          closeDialog(options, index);
+        }
+      },
+      {
+        label: "按钮2",
+        text: true,
+        bg: true,
+        btnClick: ({ dialog: { options, index }, button }) => {
+          console.log(options, index, button);
+          closeDialog(options, index);
+        }
+      },
+      {
+        label: "按钮3",
+        size: "large",
+        type: "warning",
+        btnClick: ({ dialog: { options, index }, button }) => {
+          console.log(options, index, button);
+          closeDialog(options, index);
+        }
+      }
+    ],
+    contentRenderer: () => <p>弹框内容-自定义底部按钮</p>
+  });
+}
+
+function onOpenClick() {
+  addDialog({
+    title: "打开后的回调",
+    open: ({ options, index }) => message({ options, index } as any),
+    contentRenderer: () => <p>弹框内容-打开后的回调</p>
+  });
+}
+
+function onCloseCallBackClick() {
+  addDialog({
+    title: "关闭后的回调",
+    closeCallBack: ({ options, index, args }) => {
+      console.log(options, index, args);
+      let text = "";
+      if (args?.command === "cancel") {
+        text = "您点击了取消按钮";
+      } else if (args?.command === "sure") {
+        text = "您点击了确定按钮";
+      } else {
+        text = "您点击了右上角关闭按钮或空白页或按下了esc键";
+      }
+      message(text);
+    },
+    contentRenderer: () => <p>弹框内容-关闭后的回调</p>
+  });
+}
+
+// 这里为了演示方便，使用了嵌套写法，实际情况下最好把 addDialog 函数抽出来 套娃不可取
+function onNestingClick() {
+  addDialog({
+    title: "嵌套的弹框",
+    contentRenderer: ({ index }) => (
+      <el-button
+        onClick={() =>
+          addDialog({
+            title: `第${index + 1}个子弹框`,
+            width: "40%",
+            contentRenderer: ({ index }) => (
+              <el-button
+                onClick={() =>
+                  addDialog({
+                    title: `第${index + 1}个子弹框`,
+                    width: "30%",
+                    contentRenderer: () => (
+                      <>
+                        <el-button round onClick={() => closeAllDialog()}>
+                          哎呦，你干嘛，赶快关闭所有弹框
+                        </el-button>
+                      </>
+                    )
+                  })
+                }
+              >
+                点击打开第{index + 1}个子弹框
+              </el-button>
+            )
+          })
+        }
+      >
+        点击打开第{index + 1}个子弹框
+      </el-button>
+    )
+  });
+}
+
+// 满足在 contentRenderer 内容区更改弹框自身属性值的场景
+function onUpdateClick() {
+  const curPage = ref(1);
+  addDialog({
+    title: `第${curPage.value}页`,
+    contentRenderer: () => (
+      <>
+        <el-button
+          disabled={curPage.value > 1 ? false : true}
+          onClick={() => {
+            curPage.value -= 1;
+            updateDialog(`第${curPage.value}页`);
+          }}
+        >
+          上一页
+        </el-button>
+        <el-button
+          onClick={() => {
+            curPage.value += 1;
+            updateDialog(`第${curPage.value}页`);
+          }}
+        >
+          下一页
+        </el-button>
+      </>
+    )
+  });
+}
+
+// popconfirm 确认框
+function onPopconfirmClick() {
+  addDialog({
+    width: "30%",
+    title: "popconfirm确认框示例",
+    popconfirm: { title: "是否确认修改当前数据" },
+    contentRenderer: () => <p>点击右下方确定按钮看看效果吧</p>
+  });
+}
+
+// 结合Form表单（第一种方式，弹框关闭立刻恢复初始值）通过 props 属性接收子组件的 prop 并赋值
+function onFormOneClick() {
+  addDialog({
+    width: "30%",
+    title: "结合Form表单（第一种方式）",
+    contentRenderer: () => forms,
+    props: {
+      // 赋默认值
+      formInline: {
+        user: "菜虚鲲",
+        region: "浙江"
+      }
+    },
+    closeCallBack: ({ options, args }) => {
+      // options.props 是响应式的
+      const { formInline } = options.props as FormProps;
+      const text = `姓名：${formInline.user} 城市：${formInline.region}`;
+      if (args?.command === "cancel") {
+        // 您点击了取消按钮
+        message(`您点击了取消按钮，当前表单数据为 ${text}`);
+      } else if (args?.command === "sure") {
+        message(`您点击了确定按钮，当前表单数据为 ${text}`);
+      } else {
+        message(
+          `您点击了右上角关闭按钮或空白页或按下了esc键，当前表单数据为 ${text}`
+        );
+      }
+    }
+  });
+}
+
+// 结合Form表单（第二种方式）h 渲染函数 https://cn.vuejs.org/api/render-function.html#h
+const formInline = ref({
+  user: "菜虚鲲",
+  region: "浙江"
+});
+const resetFormInline = cloneDeep(formInline.value);
+function onFormTwoClick() {
+  addDialog({
+    width: "30%",
+    title: "结合Form表单（第二种方式）",
+    contentRenderer: () =>
+      h(forms, {
+        formInline: formInline.value
+      }),
+    closeCallBack: () => {
+      message(
+        `当前表单数据为 姓名：${formInline.value.user} 城市：${formInline.value.region}`
+      );
+      // 重置表单数据
+      formInline.value = cloneDeep(resetFormInline);
+    }
+  });
+}
+
+// 结合Form表单（第三种方式）createVNode 渲染函数 https://cn.vuejs.org/guide/extras/render-function.html#creating-vnodes
+const formThreeInline = ref({
+  user: "菜虚鲲",
+  region: "浙江"
+});
+const resetFormThreeInline = cloneDeep(formThreeInline.value);
+function onFormThreeClick() {
+  addDialog({
+    width: "30%",
+    title: "结合Form表单（第三种方式）",
+    contentRenderer: () =>
+      createVNode(forms, {
+        formInline: formThreeInline.value
+      }),
+    closeCallBack: () => {
+      message(
+        `当前表单数据为 姓名：${formThreeInline.value.user} 城市：${formThreeInline.value.region}`
+      );
+      // 重置表单数据
+      formThreeInline.value = cloneDeep(resetFormThreeInline);
+    }
+  });
+}
+
+// 结合Form表单（第四种方式）使用jsx语法
+// 需要注意的是如果 forms 没注册，这里 forms 注册了是因为上面 contentRenderer: () => forms、h(forms) 、createVNode(createVNode) 间接给注册了
+// 如果只使用了jsx语法，如下 `contentRenderer: () => <forms formInline={formFourInline.value} />` 是不会给 forms 组件进行注册的，需要在 `script` 中任意位置（最好是末尾）写上 forms 即可
+// 同理如果在 tsx 文件中，这么使用 `contentRenderer: () => <forms formInline={formFourInline.value} />`，也是不会给 forms 组件进行注册，需要在 return 中写上 forms
+const formFourInline = ref({
+  user: "菜虚鲲",
+  region: "浙江"
+});
+const resetFormFourInline = cloneDeep(formFourInline.value);
+function onFormFourClick() {
+  addDialog({
+    width: "30%",
+    title: "结合Form表单（第四种方式）",
+    contentRenderer: () => <forms formInline={formFourInline.value} />,
+    closeCallBack: () => {
+      message(
+        `当前表单数据为 姓名：${formFourInline.value.user} 城市：${formFourInline.value.region}`
+      );
+      // 重置表单数据
+      formFourInline.value = cloneDeep(resetFormFourInline);
+    }
+  });
+}
+
+// 子组件 prop 为 primitive 类型的 demo
+const formPrimitiveParam = ref("Hello World");
+const resetFormPrimitiveParam = ref(formPrimitiveParam.value);
+function onFormPrimitiveFormClick() {
+  addDialog({
+    width: "30%",
+    title: "子组件 prop 为 primitive 类型 demo",
+    contentRenderer: () =>
+      h(formPrimitive, {
+        data: formPrimitiveParam.value,
+        "onUpdate:data": val => (formPrimitiveParam.value = val)
+      }),
+    closeCallBack: () => {
+      message(`当前表单内容：${formPrimitiveParam.value}`);
+      // 重置表单数据
+      formPrimitiveParam.value = resetFormPrimitiveParam.value;
+    }
+  });
+}
+
+function onBeforeCancelClick() {
+  addDialog({
+    title: "点击底部取消按钮的回调",
+    contentRenderer: () => (
+      <p>弹框内容-点击底部取消按钮的回调（会暂停弹框的关闭）</p>
+    ),
+    beforeCancel: (done, { options, index }) => {
+      console.log(
+        "%coptions, index===>>>: ",
+        "color: MidnightBlue; background: Aquamarine; font-size: 20px;",
+        options,
+        index
+      );
+      // done(); // 需要关闭把注释解开即可
+    }
+  });
+}
+
+function onBeforeSureClick() {
+  addDialog({
+    title: "点击底部确定按钮的回调",
+    contentRenderer: () => (
+      <p>
+        弹框内容-点击底部确定按钮的回调（会暂停弹框的关闭，经常用于新增、修改弹框内容后调用接口）
+      </p>
+    ),
+    beforeSure: (done, { options, index }) => {
+      console.log(
+        "%coptions, index===>>>: ",
+        "color: MidnightBlue; background: Aquamarine; font-size: 20px;",
+        options,
+        index
+      );
+      // done(); // 需要关闭把注释解开即可
+    }
+  });
+}
+
+function onSureBtnLoading() {
+  addDialog({
+    sureBtnLoading: true,
+    title: "点击底部确定按钮可开启按钮动画",
+    contentRenderer: () => <p>弹框内容-点击底部确定按钮可开启按钮动画</p>,
+    beforeSure: (done, { closeLoading }) => {
+      // closeLoading() // 关闭确定按钮动画，不关闭弹框
+      // done() // 关闭确定按钮动画并关闭弹框
+      setTimeout(() => done(), 800);
+    }
+  });
+}
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          二次封装 Element Plus 的
+          <el-link
+            href="https://element-plus.org/zh-CN/component/dialog.html"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            Dialog
+          </el-link>
+          ，采用函数式调用弹框组件（更多操作实例请参考
+          <span
+            class="cursor-pointer text-primary"
+            @click="router.push({ name: 'SystemDept' })"
+          >
+            系统管理页面
+          </span>
+          ）
+        </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>
+      <el-button @click="onDraggableClick"> 可拖拽 </el-button>
+      <el-button @click="onFullscreenClick"> 全屏 </el-button>
+      <el-button @click="onFullscreenIconClick"> 全屏按钮和全屏事件 </el-button>
+      <el-button @click="onModalClick"> 无背景遮罩层 </el-button>
+      <el-button @click="onStyleClick"> 自定义弹出位置 </el-button>
+      <el-button @click="onoOpenDelayClick"> 延时2秒打开弹框 </el-button>
+      <el-button @click="onCloseDelayClick"> 延时2秒关闭弹框 </el-button>
+      <el-button @click="onShowCloseClick">
+        不显示右上角关闭按钮图标
+      </el-button>
+      <el-button @click="onBeforeCloseClick"> 禁止通过键盘ESC关闭 </el-button>
+      <el-button @click="onCloseOnClickModalClick">
+        禁止通过点击modal关闭
+      </el-button>
+      <el-button @click="onHideFooterClick"> 隐藏底部取消、确定按钮 </el-button>
+      <el-button @click="onHeaderRendererClick"> 自定义头部 </el-button>
+      <el-button @click="onFooterRendererClick"> 自定义底部 </el-button>
+      <el-button @click="onFooterButtonsClick"> 自定义底部按钮 </el-button>
+      <el-button @click="onOpenClick"> 打开后的回调 </el-button>
+      <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>
+      <el-button @click="onFormOneClick">
+        结合Form表单（第一种方式）
+      </el-button>
+      <el-button @click="onFormTwoClick">
+        结合Form表单（第二种方式）
+      </el-button>
+      <el-button @click="onFormThreeClick">
+        结合Form表单（第三种方式）
+      </el-button>
+      <el-button @click="onFormFourClick">
+        结合Form表单（第四种方式）
+      </el-button>
+      <el-button @click="onFormPrimitiveFormClick">
+        子组件 prop 为 primitive 类型
+      </el-button>
+    </el-space>
+    <el-divider />
+    <el-space wrap>
+      <el-button @click="onBeforeCancelClick">
+        点击底部取消按钮的回调（会暂停弹框的关闭）
+      </el-button>
+      <el-button @click="onBeforeSureClick">
+        点击底部确定按钮的回调（会暂停弹框的关闭，经常用于新增、修改弹框内容后调用接口）
+      </el-button>
+      <el-button @click="onSureBtnLoading">
+        点击底部确定按钮可开启按钮动画
+      </el-button>
+    </el-space>
+  </el-card>
+</template>

Yi.Pure.Vue3/src/views/components/el-button.vue

@@ -0,0 +1,242 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useDark } from "@pureadmin/utils";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+
+defineOptions({
+  name: "PureButton"
+});
+
+const { isDark } = useDark();
+const size = ref("default");
+const dynamicSize = ref();
+
+const baseRadio = ref("default");
+const buttonList = [
+  {
+    type: "",
+    text: "Default",
+    icon: "ep:search"
+  },
+  {
+    type: "primary",
+    text: "Primary",
+    icon: "ep:edit"
+  },
+  {
+    type: "success",
+    text: "Success",
+    icon: "ep:check"
+  },
+  {
+    type: "info",
+    text: "Info",
+    icon: "ep:message"
+  },
+  {
+    type: "warning",
+    text: "Warning",
+    icon: "ep:star"
+  },
+  {
+    type: "danger",
+    text: "Danger",
+    icon: "ep:delete"
+  }
+];
+
+watch(size, val =>
+  val === "disabled"
+    ? (dynamicSize.value = "default")
+    : (dynamicSize.value = size.value)
+);
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <el-space wrap :size="40">
+          <el-link
+            v-tippy="{
+              content: '点击查看详细文档'
+            }"
+            href="https://element-plus.org/zh-CN/component/button.html"
+            target="_blank"
+            style="font-size: 16px; font-weight: 800"
+          >
+            Button 按钮
+          </el-link>
+          <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 value="disabled">禁用</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/el-button.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/el-button.vue
+      </el-link>
+    </template>
+
+    <p class="mb-2">基础按钮</p>
+    <el-radio-group v-model="baseRadio" class="mb-3">
+      <el-radio label="default" value="default" />
+      <el-radio label="plain" value="plain" />
+      <el-radio label="round" value="round" />
+      <el-radio label="circle" value="circle" />
+      <el-radio label="link" value="link" />
+      <el-radio label="text" value="text" />
+      <el-radio label="text-bg" value="text-bg" />
+    </el-radio-group>
+    <br />
+    <el-space wrap>
+      <el-button
+        v-for="(button, index) in buttonList"
+        :key="index"
+        :type="button.type as any"
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+        :plain="baseRadio === 'plain'"
+        :round="baseRadio === 'round'"
+        :circle="baseRadio === 'circle'"
+        :link="baseRadio === 'link'"
+        :text="baseRadio === 'text' || baseRadio === 'text-bg'"
+        :bg="baseRadio === 'text-bg'"
+        :icon="useRenderIcon(button.icon)"
+      >
+        <template v-if="baseRadio !== 'circle'" #default>
+          <p>{{ button.text }}</p>
+        </template>
+      </el-button>
+    </el-space>
+    <el-divider />
+
+    <p class="mb-4">加载状态按钮</p>
+    <el-button
+      text
+      bg
+      type="primary"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+      :loading="size !== 'disabled'"
+    >
+      {{ size === "disabled" ? "停止加载" : "加载中" }}
+    </el-button>
+    <el-button
+      type="primary"
+      plain
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+      :loading-icon="useRenderIcon('ep:eleme')"
+      :loading="size !== 'disabled'"
+    >
+      {{ size === "disabled" ? "停止加载" : "加载中" }}
+    </el-button>
+    <el-button
+      type="primary"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+      :loading="size !== 'disabled'"
+    >
+      <template #loading>
+        <div class="custom-loading">
+          <svg class="circular" viewBox="-10, -10, 50, 50">
+            <path
+              class="path"
+              d="
+            M 30 15
+            L 28 17
+            M 25.61 25.61
+            A 15 15, 0, 0, 1, 15 30
+            A 15 15, 0, 1, 1, 27.99 7.5
+            L 15 15
+          "
+              style="fill: rgb(0 0 0 / 0%); stroke-width: 4px"
+            />
+          </svg>
+        </div>
+      </template>
+      {{ size === "disabled" ? "停止加载" : "加载中" }}
+    </el-button>
+    <el-divider />
+
+    <p class="mb-4">自定义元素标签。例如：按钮、div、链接</p>
+    <el-button :size="dynamicSize" :disabled="size === 'disabled'">
+      button 标签
+    </el-button>
+    <el-button
+      tag="div"
+      role="button"
+      tabindex="0"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    >
+      div 标签
+    </el-button>
+    <el-button
+      type="primary"
+      tag="a"
+      :href="
+        size === 'disabled'
+          ? 'javascript:void(0);'
+          : 'https://element-plus.org/zh-CN/component/button.html#tag'
+      "
+      :target="size === 'disabled' ? '_self' : '_blank'"
+      rel="noopener noreferrer"
+      :size="dynamicSize"
+      :disabled="size === 'disabled'"
+    >
+      a 链接
+    </el-button>
+    <el-divider />
+
+    <p class="mb-4">自定义颜色</p>
+    <el-space wrap>
+      <el-button
+        color="#626aef"
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+        :dark="isDark"
+      >
+        Default
+      </el-button>
+      <el-button
+        color="#626aef"
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+        :dark="isDark"
+        plain
+      >
+        Plain
+      </el-button>
+    </el-space>
+  </el-card>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-divider--horizontal) {
+  margin: 17px 0;
+}
+
+.el-button .custom-loading .circular {
+  width: 18px;
+  height: 18px;
+  margin-right: 6px;
+  animation: loading-rotate 2s linear infinite;
+}
+
+.el-button .custom-loading .circular .path {
+  stroke: var(--el-button-text-color);
+  stroke-dasharray: 90, 150;
+  stroke-dashoffset: 0;
+  stroke-linecap: round;
+  stroke-width: 2;
+  animation: loading-dash 1.5s ease-in-out infinite;
+}
+</style>

Yi.Pure.Vue3/src/views/components/icon-select.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { IconSelect } from "@/components/ReIcon";
+
+defineOptions({
+  name: "IconSelect"
+});
+
+const icon = ref("ep:add-location");
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <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>
+</template>

Yi.Pure.Vue3/src/views/components/json-editor.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { reactive, watch } from "vue";
+import "vue-json-pretty/lib/styles.css";
+import VueJsonPretty from "vue-json-pretty";
+
+defineOptions({
+  name: "JsonEditor"
+});
+
+const defaultData = {
+  status: 200,
+  text: "",
+  error: null,
+  config: undefined,
+  data: [
+    {
+      news_id: 51184,
+      title: "iPhone X Review: Innovative future with real black technology",
+      source: "Netease phone"
+    },
+    {
+      news_id: 51183,
+      title:
+        "Traffic paradise: How to design streets for people and unmanned vehicles in the future?",
+      source: "Netease smart",
+      link: "http://netease.smart/traffic-paradise/1235"
+    },
+    {
+      news_id: 51182,
+      title:
+        "Teslamask's American Business Relations: The government does not pay billions to build factories",
+      source: "AI Finance",
+      members: ["Daniel", "Mike", "John"]
+    }
+  ]
+};
+
+const state = reactive({
+  val: JSON.stringify(defaultData),
+  data: defaultData,
+  showLine: true,
+  showLineNumber: true,
+  showDoubleQuotes: true,
+  showLength: true,
+  editable: true,
+  showIcon: true,
+  editableTrigger: "click",
+  deep: 3
+});
+
+watch(
+  () => state.val,
+  newVal => {
+    try {
+      state.data = JSON.parse(newVal);
+    } catch (err) {
+      // console.log('JSON ERROR');
+    }
+  }
+);
+
+watch(
+  () => state.data,
+  newVal => {
+    try {
+      state.val = JSON.stringify(newVal);
+    } catch (err) {
+      // console.log('JSON ERROR');
+    }
+  }
+);
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          JSON编辑器，采用开源的
+          <el-link
+            href="https://github.com/leezng/vue-json-pretty"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            vue-json-pretty
+          </el-link>
+          （支持大数据量）。
+        </span>
+        <span class="font-medium">
+          当然还有一款代码编辑器推荐（这里就不做演示了），采用开源的
+          <el-link
+            href="https://github.com/surmon-china/vue-codemirror"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            codemirror6
+          </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"
+      :deep="state.deep"
+      :show-double-quotes="state.showDoubleQuotes"
+      :show-line="state.showLine"
+      :show-length="state.showLength"
+      :show-icon="state.showIcon"
+      :show-line-number="state.showLineNumber"
+      :editable="state.editable"
+      :editable-trigger="state.editableTrigger as any"
+    />
+  </el-card>
+</template>

Yi.Pure.Vue3/src/views/components/message.vue

@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import { h } from "vue";
+import hot from "@/assets/svg/hot.svg?component";
+import { message, closeAllMessage } from "@/utils/message";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Check from "@iconify-icons/ep/check";
+
+defineOptions({
+  name: "Message"
+});
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <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>
+
+    <el-space wrap>
+      <el-button
+        type="info"
+        @click="message('Info类型消息', { customClass: 'el' })"
+      >
+        Info
+      </el-button>
+      <el-button
+        type="success"
+        @click="
+          message('Success类型消息', { customClass: 'el', type: 'success' })
+        "
+      >
+        Success
+      </el-button>
+      <el-button
+        type="warning"
+        @click="
+          message('Warning类型消息', { customClass: 'el', type: 'warning' })
+        "
+      >
+        Warning
+      </el-button>
+      <el-button
+        type="danger"
+        @click="message('Error类型消息', { customClass: 'el', type: 'error' })"
+      >
+        Error
+      </el-button>
+      <el-button
+        @click="message('可关闭消息', { customClass: 'el', showClose: true })"
+      >
+        可关闭
+      </el-button>
+      <el-button
+        @click="
+          message('分组消息合并', {
+            customClass: 'el',
+            type: 'success',
+            grouping: true
+          })
+        "
+      >
+        分组消息合并
+      </el-button>
+      <el-button
+        @click="
+          message('自定义消息图标', {
+            customClass: 'el',
+            icon: useRenderIcon(Check)
+          })
+        "
+      >
+        自定义图标
+      </el-button>
+      <el-button
+        @click="
+          message('3秒后关闭', {
+            customClass: 'el',
+            duration: 3000,
+            onClose: () =>
+              message('消息已关闭', { customClass: 'el', type: 'success' })
+          })
+        "
+      >
+        自定义延时关闭时间并设置关闭后其他操作
+      </el-button>
+      <el-button
+        @click="
+          message(
+            h('p', null, [
+              h('span', null, 'Message can be '),
+              h('i', { style: 'color: teal' }, 'VNode')
+            ]),
+            { customClass: 'el' }
+          )
+        "
+      >
+        自定义内容
+      </el-button>
+      <el-button
+        @click="
+          message('<strong>This is <i>HTML</i> string</strong>', {
+            customClass: 'el',
+            dangerouslyUseHTMLString: true
+          })
+        "
+      >
+        HTML 片段作为正文内容
+      </el-button>
+    </el-space>
+
+    <el-divider />
+
+    <h4 class="mb-4">
+      类似 Ant Design 风格的消息提示，点击弹出提示信息（基于 ElMessage
+      样式改版，不会影响 ElMessage
+      原本样式，使用和打包大小成本极低并适配整体暗色风格）
+    </h4>
+
+    <el-space wrap>
+      <el-button type="info" @click="message('Info类型消息')">Info</el-button>
+      <el-button
+        type="success"
+        @click="message('Success类型消息', { type: 'success' })"
+      >
+        Success
+      </el-button>
+      <el-button
+        type="warning"
+        @click="message('Warning类型消息', { type: 'warning' })"
+      >
+        Warning
+      </el-button>
+      <el-button
+        type="danger"
+        @click="message('Error类型消息', { type: 'error' })"
+      >
+        Error
+      </el-button>
+      <el-button @click="message('可关闭消息', { showClose: true })">
+        可关闭
+      </el-button>
+      <el-button
+        @click="message('分组消息合并', { type: 'success', grouping: true })"
+      >
+        分组消息合并
+      </el-button>
+      <el-button
+        @click="
+          message('自定义消息图标', {
+            icon: hot
+          })
+        "
+      >
+        自定义图标
+      </el-button>
+      <el-button
+        @click="
+          message('3秒后关闭', {
+            duration: 3000,
+            onClose: () => message('消息已关闭', { type: 'success' })
+          })
+        "
+      >
+        自定义延时关闭时间并设置关闭后其他操作
+      </el-button>
+      <el-button
+        @click="
+          message(
+            h('p', null, [
+              h('span', null, 'Message can be '),
+              h('i', { style: 'color: teal' }, 'VNode')
+            ])
+          )
+        "
+      >
+        自定义内容
+      </el-button>
+      <el-button
+        @click="
+          message('<strong>This is <i>HTML</i> string</strong>', {
+            dangerouslyUseHTMLString: true
+          })
+        "
+      >
+        HTML 片段作为正文内容
+      </el-button>
+    </el-space>
+
+    <el-divider />
+
+    <el-button @click="closeAllMessage"> 关闭所有消息提示 </el-button>
+  </el-card>
+</template>

Yi.Pure.Vue3/src/views/components/progress.vue

@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+
+defineOptions({
+  name: "PureProgress"
+});
+
+const format = percentage => (percentage === 100 ? "Full" : `${percentage}%`);
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <el-link
+          v-tippy="{
+            content: '点击查看详细文档'
+          }"
+          href="https://element-plus.org/zh-CN/component/progress.html"
+          target="_blank"
+          style="font-size: 16px; font-weight: 800"
+        >
+          进度条
+        </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>
+    <div class="w-1/4">
+      <el-progress indeterminate :percentage="50" class="mb-4" />
+      <el-progress
+        indeterminate
+        :percentage="100"
+        :format="format"
+        class="mb-4"
+      />
+      <el-progress
+        indeterminate
+        :percentage="100"
+        status="success"
+        class="mb-4"
+      />
+      <el-progress
+        indeterminate
+        :percentage="100"
+        status="warning"
+        class="mb-4"
+      />
+      <el-progress
+        indeterminate
+        :percentage="50"
+        status="exception"
+        class="mb-4"
+      />
+    </div>
+
+    <p class="mb-4">进度条内显示百分比标识</p>
+    <div class="w-1/4">
+      <el-progress
+        :text-inside="true"
+        :stroke-width="26"
+        :percentage="70"
+        class="mb-4"
+      />
+      <el-progress
+        :text-inside="true"
+        :stroke-width="24"
+        :percentage="100"
+        status="success"
+        striped
+        striped-flow
+        :duration="70"
+        class="mb-4"
+      />
+      <el-progress
+        :text-inside="true"
+        :stroke-width="22"
+        :percentage="80"
+        status="warning"
+        class="mb-4"
+      />
+      <el-progress
+        :text-inside="true"
+        :stroke-width="20"
+        :percentage="50"
+        status="exception"
+        striped
+        striped-flow
+        class="mb-4"
+      />
+    </div>
+
+    <p class="mb-4">自定义内容</p>
+    <div class="w-1/4 demo-progress">
+      <el-progress :percentage="50">
+        <el-button text>自定义内容</el-button>
+      </el-progress>
+      <el-progress
+        :text-inside="true"
+        :stroke-width="20"
+        :percentage="50"
+        status="exception"
+      >
+        <span>自定义内容</span>
+      </el-progress>
+      <el-progress type="circle" :percentage="100" status="success">
+        <el-button type="success" :icon="useRenderIcon('ep:check')" circle />
+      </el-progress>
+      <el-progress type="dashboard" :percentage="80">
+        <template #default="{ percentage }">
+          <span class="percentage-value">{{ percentage }}%</span>
+          <span class="percentage-label">上升率</span>
+        </template>
+      </el-progress>
+    </div>
+  </el-card>
+</template>
+
+<style scoped>
+.percentage-value {
+  display: block;
+  margin-top: 10px;
+  font-size: 28px;
+}
+
+.percentage-label {
+  display: block;
+  margin-top: 10px;
+  font-size: 12px;
+}
+
+.demo-progress .el-progress--line {
+  width: 350px;
+  margin-bottom: 15px;
+}
+
+.demo-progress .el-progress--circle {
+  margin-right: 15px;
+}
+</style>

Yi.Pure.Vue3/src/views/components/seamless-scroll.vue

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import { ref, reactive, unref } from "vue";
+import SeamlessScroll from "@/components/ReSeamlessScroll";
+
+defineOptions({
+  name: "SeamlessScroll"
+});
+
+const scroll = ref();
+
+const listData = ref([
+  {
+    title: "无缝滚动第一行无缝滚动第一行！！！！！！！！！！"
+  },
+  {
+    title: "无缝滚动第二行无缝滚动第二行！！！！！！！！！！"
+  },
+  {
+    title: "无缝滚动第三行无缝滚动第三行！！！！！！！！！！"
+  },
+  {
+    title: "无缝滚动第四行无缝滚动第四行！！！！！！！！！！"
+  },
+  {
+    title: "无缝滚动第五行无缝滚动第五行！！！！！！！！！！"
+  },
+  {
+    title: "无缝滚动第六行无缝滚动第六行！！！！！！！！！！"
+  },
+  {
+    title: "无缝滚动第七行无缝滚动第七行！！！！！！！！！！"
+  },
+  {
+    title: "无缝滚动第八行无缝滚动第八行！！！！！！！！！！"
+  },
+  {
+    title: "无缝滚动第九行无缝滚动第九行！！！！！！！！！！"
+  }
+]);
+
+const classOption = reactive({
+  direction: "top"
+});
+
+function changeDirection(val) {
+  (unref(scroll) as any).reset();
+  unref(classOption).direction = val;
+}
+</script>
+
+<template>
+  <el-space wrap>
+    <el-card class="box-card" shadow="never">
+      <template #header>
+        <div class="card-header">
+          <span class="font-medium">无缝滚动</span>
+          <el-button
+            class="button"
+            link
+            type="primary"
+            @click="changeDirection('top')"
+          >
+            <span
+              :style="{ color: classOption.direction === 'top' ? 'red' : '' }"
+            >
+              向上滚动
+            </span>
+          </el-button>
+          <el-button
+            class="button"
+            link
+            type="primary"
+            @click="changeDirection('bottom')"
+          >
+            <span
+              :style="{
+                color: classOption.direction === 'bottom' ? 'red' : ''
+              }"
+            >
+              向下滚动
+            </span>
+          </el-button>
+          <el-button
+            class="button"
+            link
+            type="primary"
+            @click="changeDirection('left')"
+          >
+            <span
+              :style="{ color: classOption.direction === 'left' ? 'red' : '' }"
+            >
+              向左滚动
+            </span>
+          </el-button>
+          <el-button
+            class="button"
+            link
+            type="primary"
+            @click="changeDirection('right')"
+          >
+            <span
+              :style="{ color: classOption.direction === 'right' ? 'red' : '' }"
+            >
+              向右滚动
+            </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"
+        :data="listData"
+        :class-option="classOption"
+        class="warp"
+      >
+        <ul class="item">
+          <li v-for="(item, index) in listData" :key="index">
+            <span class="title" v-text="item.title" />
+          </li>
+        </ul>
+      </SeamlessScroll>
+    </el-card>
+  </el-space>
+</template>
+
+<style lang="scss" scoped>
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  span {
+    margin-right: 20px;
+  }
+}
+
+.warp {
+  width: 360px;
+  height: 270px;
+  margin: 0 auto;
+  overflow: hidden;
+
+  ul {
+    padding: 0;
+    margin: 0 auto;
+    list-style: none;
+
+    li,
+    a {
+      display: flex;
+      justify-content: space-between;
+      height: 30px;
+      font-size: 15px;
+      line-height: 30px;
+    }
+  }
+}
+</style>

Yi.Pure.Vue3/src/views/components/segmented.vue

@@ -0,0 +1,265 @@
+<script setup lang="tsx">
+import { h, ref, watch } from "vue";
+import { message } from "@/utils/message";
+import HomeFilled from "@iconify-icons/ep/home-filled";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Segmented, { type OptionsType } from "@/components/ReSegmented";
+
+defineOptions({
+  name: "Segmented"
+});
+
+/** 基础用法 */
+const value = ref(4); // 必须为number类型
+const size = ref("default");
+const dynamicSize = ref();
+
+const optionsBasis: Array<OptionsType> = [
+  {
+    label: "周一"
+  },
+  {
+    label: "周二"
+  },
+  {
+    label: "周三"
+  },
+  {
+    label: "周四"
+  },
+  {
+    label: "周五"
+  }
+];
+
+/** tooltip 提示 */
+const optionsTooltip: Array<OptionsType> = [
+  {
+    label: "周一",
+    tip: "周一启航，新的篇章"
+  },
+  {
+    label: "周二",
+    tip: "周二律动，携手共进"
+  },
+  {
+    label: "周三",
+    tip: "周三昂扬，激情不减"
+  },
+  {
+    label: "周四",
+    tip: "周四精进，事半功倍"
+  },
+  {
+    label: "周五",
+    tip: "周五喜悦，收尾归档"
+  }
+];
+
+/** 禁用 */
+const optionsDisabled: Array<OptionsType> = [
+  {
+    label: "周一"
+  },
+  {
+    label: "周二"
+  },
+  {
+    label: "周三",
+    disabled: true
+  },
+  {
+    label: "周四"
+  },
+  {
+    label: "周五",
+    disabled: true
+  }
+];
+
+/** block */
+const optionsBlock: Array<OptionsType> = [
+  {
+    label: "周一"
+  },
+  {
+    label: "周二"
+  },
+  {
+    label: "周三"
+  },
+  {
+    label: "周四"
+  },
+  {
+    label: "周五喜悦，收尾归档，周末倒计时",
+    tip: "周五喜悦，收尾归档，周末倒计时"
+  }
+];
+
+/** 可设置图标 */
+const optionsIcon: Array<OptionsType> = [
+  {
+    label: "周一",
+    icon: HomeFilled
+  },
+  {
+    label: "周二"
+  },
+  {
+    label: "周三",
+    icon: "ri:terminal-window-line"
+  },
+  {
+    label: "周四"
+  },
+  {
+    label: "周五",
+    icon: "streamline-emojis:2"
+  }
+];
+
+/** 只设置图标 */
+const optionsOnlyIcon: Array<OptionsType> = [
+  {
+    icon: HomeFilled
+  },
+  {
+    icon: "ri:terminal-window-line"
+  },
+  {
+    icon: "streamline-emojis:cow-face"
+  },
+  {
+    icon: "streamline-emojis:airplane"
+  },
+  {
+    icon: "streamline-emojis:2"
+  }
+];
+
+/** 自定义渲染 */
+const optionsLabel: Array<OptionsType> = [
+  {
+    label: () => (
+      <div>
+        {h(useRenderIcon(HomeFilled), {
+          class: "m-auto mt-1 w-[18px] h-[18px]"
+        })}
+        <p>周一</p>
+      </div>
+    )
+  },
+  {
+    label: () => (
+      <div>
+        {h(useRenderIcon("ri:terminal-window-line"), {
+          class: "m-auto mt-1 w-[18px] h-[18px]"
+        })}
+        <p>周二</p>
+      </div>
+    )
+  },
+  {
+    label: () => (
+      <div>
+        {h(useRenderIcon("streamline-emojis:cow-face"), {
+          class: "m-auto mt-1 w-[18px] h-[18px]"
+        })}
+        <p>周三</p>
+      </div>
+    )
+  }
+];
+
+const optionsChange: Array<OptionsType> = [
+  {
+    label: "周一",
+    value: 1
+  },
+  {
+    label: "周二",
+    value: 2
+  },
+  {
+    label: "周三",
+    value: 3
+  }
+];
+
+/** change 事件 */
+function onChange({ index, option }) {
+  const { label, value } = option;
+  message(`当前选中项索引为：${index}，名字为${label}，值为${value}`, {
+    type: "success"
+  });
+}
+
+watch(size, val => (dynamicSize.value = size.value));
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <el-space wrap :size="40">
+          <span style="font-size: 16px; font-weight: 800"> 分段控制器 </span>
+          <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">
+        基础用法（v-model）<span class="text-primary">
+          {{ optionsBasis[value].label }}
+        </span>
+      </p>
+      <Segmented v-model="value" :options="optionsBasis" :size="dynamicSize" />
+      <el-divider />
+      <p class="mb-2">tooltip 提示</p>
+      <Segmented :options="optionsTooltip" :size="dynamicSize" />
+      <el-divider />
+      <p class="mb-2">change 事件</p>
+      <Segmented
+        :options="optionsChange"
+        :size="dynamicSize"
+        @change="onChange"
+      />
+      <el-divider />
+      <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 />
+      <p class="mb-2">可设置图标</p>
+      <Segmented :options="optionsIcon" :size="dynamicSize" />
+      <el-divider />
+      <p class="mb-2">只设置图标</p>
+      <Segmented :options="optionsOnlyIcon" :size="dynamicSize" />
+      <el-divider />
+      <p class="mb-2">自定义渲染</p>
+      <Segmented :options="optionsLabel" :size="dynamicSize" />
+    </el-scrollbar>
+  </el-card>
+</template>
+
+<style scoped>
+:deep(.el-divider--horizontal) {
+  margin: 17px 0;
+}
+</style>

Yi.Pure.Vue3/src/views/components/selector.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import Selector from "@/components/ReSelector";
+
+defineOptions({
+  name: "Selector"
+});
+
+const selectRange = ref<string>("");
+const dataLists = ref([
+  {
+    title: "基础用法",
+    echo: [],
+    disabled: false
+  },
+  {
+    title: "回显模式",
+    echo: [2, 7],
+    disabled: true
+  }
+]);
+
+const selectedVal = ({ left, right }): void => {
+  selectRange.value = `${left}-${right}`;
+};
+</script>
+
+<template>
+  <div>
+    <el-card
+      v-for="(item, key) in dataLists"
+      :key="key"
+      class="mb-2"
+      shadow="never"
+    >
+      <template #header>
+        <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"
+        :echo="item.echo"
+        :disabled="item.disabled"
+        @selectedVal="selectedVal"
+      />
+      <h4 v-if="!item.disabled" class="mt-3">选中范围：{{ selectRange }}</h4>
+    </el-card>
+  </div>
+</template>

Yi.Pure.Vue3/src/views/components/split-pane.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import splitpane, { ContextProps } from "@/components/ReSplitPane";
+import { reactive } from "vue";
+
+defineOptions({
+  name: "SplitPane"
+});
+
+const settingLR: ContextProps = reactive({
+  minPercent: 20,
+  defaultPercent: 40,
+  split: "vertical"
+});
+
+const settingTB: ContextProps = reactive({
+  minPercent: 20,
+  defaultPercent: 40,
+  split: "horizontal"
+});
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-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/split-pane.vue"
+          target="_blank"
+        >
+          代码位置 src/views/components/split-pane.vue
+        </el-link>
+      </div>
+    </template>
+    <div class="split-pane">
+      <splitpane :splitSet="settingLR">
+        <!-- #paneL 表示指定该组件为左侧面板 -->
+        <template #paneL>
+          <!-- 自定义左侧面板的内容 -->
+          <el-scrollbar>
+            <div class="dv-a">A</div>
+          </el-scrollbar>
+        </template>
+        <!-- #paneR 表示指定该组件为右侧面板 -->
+        <template #paneR>
+          <!-- 再次将右侧面板进行拆分 -->
+          <splitpane :splitSet="settingTB">
+            <template #paneL>
+              <el-scrollbar><div class="dv-b">B</div></el-scrollbar>
+            </template>
+            <template #paneR>
+              <el-scrollbar>
+                <div class="dv-c">C</div>
+              </el-scrollbar>
+            </template>
+          </splitpane>
+        </template>
+      </splitpane>
+    </div>
+  </el-card>
+</template>
+
+<style lang="scss" scoped>
+.split-pane {
+  width: 100%;
+  height: calc(100vh - 300px);
+  font-size: 50px;
+  text-align: center;
+  border: 1px solid #e5e6eb;
+
+  .dv-a {
+    padding-top: 30vh;
+    color: rgba($color: dodgerblue, $alpha: 80%);
+  }
+
+  .dv-b {
+    padding-top: 10vh;
+    color: rgba($color: #000, $alpha: 80%);
+  }
+
+  .dv-c {
+    padding-top: 18vh;
+    color: rgba($color: #ce272d, $alpha: 80%);
+  }
+}
+</style>

Yi.Pure.Vue3/src/views/components/statistic.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import dayjs from "dayjs";
+import ReCol from "@/components/ReCol";
+import { useTransition } from "@vueuse/core";
+
+defineOptions({
+  name: "Statistic"
+});
+
+const value = ref(Date.now() + 1000 * 60 * 60 * 7);
+const value1 = ref(Date.now() + 1000 * 60 * 60 * 24 * 2);
+const value2 = ref(dayjs().add(1, "month").startOf("month"));
+
+const source = ref(0);
+const outputValue = useTransition(source, {
+  duration: 1500
+});
+source.value = 36000;
+
+function reset() {
+  value1.value = Date.now() + 1000 * 60 * 60 * 24 * 2;
+}
+</script>
+
+<template>
+  <div>
+    <el-card shadow="never">
+      <template #header>
+        <div class="card-header">
+          <el-link
+            v-tippy="{
+              content: '点击查看详细文档'
+            }"
+            href="https://element-plus.org/zh-CN/component/statistic.html"
+            target="_blank"
+            style="font-size: 16px; font-weight: 800"
+          >
+            统计组件
+          </el-link>
+        </div>
+        <el-link
+          class="mt-2"
+          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/statistic.vue"
+          target="_blank"
+        >
+          代码位置 src/views/components/statistic.vue
+        </el-link>
+      </template>
+
+      <el-row :gutter="24">
+        <re-col :value="6" :xs="24" :sm="24">
+          <el-statistic title="需求人数" :value="outputValue" />
+        </re-col>
+
+        <re-col :value="6" :xs="24" :sm="24">
+          <el-countdown title="距离答疑结束还剩" :value="value" />
+        </re-col>
+
+        <re-col :value="6" :xs="24" :sm="24">
+          <el-countdown
+            title="VIP到期时间还剩"
+            format="HH:mm:ss"
+            :value="value1"
+          />
+          <el-button class="mt-2" type="primary" text bg @click="reset">
+            重置
+          </el-button>
+        </re-col>
+
+        <re-col :value="6" :xs="24" :sm="24">
+          <el-countdown format="DD天 HH时 mm分 ss秒" :value="value2">
+            <template #title>
+              <div style="display: inline-flex; align-items: center">
+                <IconifyIconOnline icon="ep:calendar" class="mr-2" />
+                距离下个月还剩
+              </div>
+            </template>
+          </el-countdown>
+          <div class="mt-2">{{ value2.format("YYYY-MM-DD") }}</div>
+        </re-col>
+      </el-row>
+    </el-card>
+  </div>
+</template>
+
+<style scoped>
+.el-col {
+  text-align: center;
+}
+</style>

Yi.Pure.Vue3/src/views/components/swiper.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+import SwiperCore from "swiper";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import { Autoplay, Navigation, Pagination } from "swiper/modules";
+
+defineOptions({
+  name: "Swiper"
+});
+
+SwiperCore.use([Autoplay, Navigation, Pagination]);
+
+const swiperExample: any[] = [
+  { id: 0, label: "基础滑动", options: {} },
+  {
+    id: 1,
+    label: "按钮切换",
+    options: {
+      navigation: true
+    }
+  },
+  {
+    id: 2,
+    label: "分页器",
+    options: {
+      pagination: true
+    }
+  },
+  {
+    id: 3,
+    label: "分页器 / 动态指示点",
+    options: {
+      pagination: { dynamicBullets: true }
+    }
+  },
+  {
+    id: 4,
+    label: "分页器 / 进度条",
+    options: {
+      navigation: true,
+      pagination: {
+        type: "progressbar"
+      }
+    }
+  },
+  {
+    id: 5,
+    label: "分页器 / 分式",
+    options: {
+      navigation: true,
+      pagination: {
+        type: "fraction"
+      }
+    }
+  },
+  {
+    id: 6,
+    label: "一次显示多个Slides",
+    options: {
+      pagination: {
+        clickable: true
+      },
+      slidesPerView: 3,
+      spaceBetween: 30
+    }
+  },
+  {
+    id: 7,
+    label: "无限循环",
+    options: {
+      autoplay: {
+        delay: 2000,
+        disableOnInteraction: false
+      },
+      navigation: true,
+      pagination: {
+        clickable: true
+      },
+      loop: true
+    }
+  }
+];
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="font-medium">
+        <el-link
+          href="https://github.com/nolimits4web/swiper"
+          target="_blank"
+          style="margin: 0 5px 4px 0; font-size: 16px"
+        >
+          Swiper插件
+        </el-link>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/swiper.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/swiper.vue
+      </el-link>
+    </template>
+    <el-row :gutter="10">
+      <el-col v-for="item in swiperExample" :key="item.id" :span="12">
+        <h6 class="py-[16px] text-base">{{ item.label }}</h6>
+        <swiper v-bind="item.options">
+          <swiper-slide v-for="i in 5" :key="i">
+            <div
+              class="flex justify-center items-center h-[240px] border border-[#999]"
+            >
+              Slide{{ i }}
+            </div>
+          </swiper-slide>
+        </swiper>
+      </el-col>
+    </el-row>
+  </el-card>
+</template>
+
+<style scoped lang="scss">
+:deep(.el-card__body) {
+  padding-top: 0;
+}
+</style>

Yi.Pure.Vue3/src/views/components/tag.vue

@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import { ref, nextTick } from "vue";
+import { cloneDeep, isAllEmpty } from "@pureadmin/utils";
+
+defineOptions({
+  name: "PureTag"
+});
+
+const size = ref("default");
+const checked1 = ref(false);
+const checked2 = ref(false);
+const baseTag = ref("dark");
+const tagList = ref([
+  {
+    type: "primary",
+    text: "Primary"
+  },
+  {
+    type: "success",
+    text: "Success"
+  },
+  {
+    type: "info",
+    text: "Info"
+  },
+  {
+    type: "warning",
+    text: "Warning"
+  },
+  {
+    type: "danger",
+    text: "Danger"
+  }
+]);
+const handleClose = tag => {
+  tagList.value.splice(tagList.value.indexOf(tag), 1);
+};
+const copyTagList = cloneDeep(tagList.value);
+function onReset() {
+  tagList.value = cloneDeep(copyTagList);
+}
+
+/** 动态编辑标签 */
+const inputValue = ref("");
+const dynamicTags = ref(["Tag 1", "Tag 2", "Tag 3"]);
+const inputVisible = ref(false);
+const InputRef = ref();
+const handleDynamicClose = (tag: string) => {
+  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
+};
+const showInput = () => {
+  inputVisible.value = true;
+  nextTick(() => {
+    InputRef.value!.input!.focus();
+  });
+};
+const handleInputConfirm = () => {
+  if (!isAllEmpty(inputValue.value)) {
+    dynamicTags.value.push(inputValue.value);
+  }
+  inputVisible.value = false;
+  inputValue.value = "";
+};
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <el-space wrap :size="40">
+          <el-link
+            v-tippy="{
+              content: '点击查看详细文档'
+            }"
+            href="https://element-plus.org/zh-CN/component/tag.html"
+            target="_blank"
+            style="font-size: 16px; font-weight: 800"
+          >
+            Tag 标签
+          </el-link>
+          <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/tag.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/tag.vue
+      </el-link>
+    </template>
+
+    <p class="mb-2">基础按钮</p>
+    <el-radio-group v-model="baseTag" class="mb-3">
+      <el-radio label="dark" value="dark" />
+      <el-radio label="light" value="light" />
+      <el-radio label="plain" value="plain" />
+    </el-radio-group>
+    <br />
+    <el-space class="mb-3">
+      <el-checkbox
+        v-if="tagList.length > 0"
+        v-model="checked1"
+        label="可移除"
+      />
+      <el-button v-else size="small" text bg class="mr-6" @click="onReset">
+        重置
+      </el-button>
+      <el-button
+        v-if="checked1 && tagList.length > 0"
+        size="small"
+        text
+        bg
+        class="mr-6 ml-4"
+        @click="tagList = []"
+      >
+        移除全部
+      </el-button>
+      <el-checkbox v-model="checked2" label="圆形" />
+    </el-space>
+    <br />
+    <el-space wrap>
+      <el-tag
+        v-for="(tag, index) in tagList"
+        :key="index"
+        :type="tag.type as any"
+        :effect="baseTag as any"
+        :closable="checked1"
+        :round="checked2"
+        :size="size as any"
+        :disabled="size === 'disabled'"
+        @close="handleClose(tag)"
+      >
+        {{ tag.text }}
+      </el-tag>
+    </el-space>
+    <el-divider />
+
+    <p class="mb-2">动态编辑标签</p>
+    <el-tag
+      v-for="tag in dynamicTags"
+      :key="tag"
+      class="mx-1"
+      closable
+      :size="size as any"
+      :disable-transitions="false"
+      @close="handleDynamicClose(tag)"
+    >
+      {{ tag }}
+    </el-tag>
+    <el-input
+      v-if="inputVisible"
+      ref="InputRef"
+      v-model="inputValue"
+      class="ml-1 !w-20"
+      size="small"
+      @keyup.enter="handleInputConfirm"
+      @blur="handleInputConfirm"
+    />
+    <el-button
+      v-else
+      class="button-new-tag ml-1"
+      size="small"
+      @click="showInput"
+    >
+      新建标签
+    </el-button>
+  </el-card>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-divider--horizontal) {
+  margin: 17px 0;
+}
+</style>

Yi.Pure.Vue3/src/views/components/text.vue

@@ -0,0 +1,171 @@
+<script lang="ts" setup>
+import dayjs from "dayjs";
+import { ref } from "vue";
+import { ReText } from "@/components/ReText";
+
+defineOptions({
+  name: "PureText"
+});
+
+const customContent = ref("自定义tooltip内容");
+
+const changeTooltipContent = () => {
+  customContent.value =
+    "现在的时间是: " + dayjs().format("YYYY-MM-DD HH:mm:ss");
+};
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          文本省略，基于
+          <el-link
+            href="https://element-plus.org/zh-CN/component/text.html"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            el-text
+          </el-link>
+          和
+          <el-link
+            href="https://vue-tippy.netlify.app/basic-usage"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            VueTippy
+          </el-link>
+          自动省略后显示 Tooltip 提示， 支持多行省略
+        </span>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/text.vue"
+        target="_blank"
+      >
+        代码位置 src/views/components/text.vue
+      </el-link>
+    </template>
+
+    <p class="mb-2">基础用法</p>
+    <el-space wrap>
+      <ul class="content">
+        <li>
+          <ReText>
+            测试文本，这是一个稍微有点长的文本，过长省略后，鼠标悬浮会有tooltip提示
+          </ReText>
+          <ReText :lineClamp="2">
+            测试文本，这是一个稍微有点长的文本，lineClamp参数为2，即两行过长省略后，鼠标悬浮会有tooltip提示
+          </ReText>
+        </li>
+      </ul>
+    </el-space>
+
+    <el-divider />
+
+    <p class="mb-2">自定义 Tooltip 内容</p>
+    <div class="mb-2">
+      <el-button @click="changeTooltipContent">
+        点击切换下方 Tooltip 内容
+      </el-button>
+    </div>
+    <el-space wrap>
+      <ul class="content">
+        <li>
+          <ReText :tippyProps="{ content: customContent }">
+            props写法 -
+            测试文本，这是一个稍微有点长的文本，过长省略后，鼠标悬浮会有tooltip提示
+          </ReText>
+        </li>
+        <li>
+          <ReText>
+            <template #content>
+              <div>
+                <b>这是插槽写法: </b>
+                <div>{{ customContent }}</div>
+              </div>
+            </template>
+            插槽写法 -
+            测试文本，这是一个稍微有点长的文本，过长省略后，鼠标悬浮会有tooltip提示
+          </ReText>
+        </li>
+      </ul>
+    </el-space>
+
+    <el-divider />
+    <p class="mb-2">自定义 el-text 配置</p>
+    <el-space wrap>
+      <ul class="content">
+        <li>
+          <ReText type="primary" size="large">
+            测试文本，这是一个稍微有点长的文本，过长省略后，鼠标悬浮会有tooltip提示
+          </ReText>
+        </li>
+        <li>
+          <ReText :lineClamp="4" type="info">
+            测试文本，这是一个非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长的文本，lineClamp参数为4，即四行过长省略后，鼠标悬浮会有tooltip提示
+          </ReText>
+        </li>
+      </ul>
+    </el-space>
+
+    <el-divider />
+    <p class="mb-2">自定义 VueTippy 配置</p>
+    <el-space wrap>
+      <ul class="content">
+        <li>
+          <ReText
+            :tippyProps="{ offset: [0, -20], theme: 'light', arrow: false }"
+          >
+            偏移白色无箭头 -
+            测试文本，这是一个稍微有点长的文本，过长省略后，鼠标悬浮会有tooltip提示
+          </ReText>
+        </li>
+        <li>
+          <ReText :lineClamp="4" :tippyProps="{ followCursor: true }">
+            鼠标跟随 -
+            测试文本，这是一个非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长，非常非常长的文本，lineClamp参数为4，即四行过长省略后，鼠标悬浮会有tooltip提示
+          </ReText>
+        </li>
+      </ul>
+    </el-space>
+
+    <el-divider />
+    <p class="mb-2">组件嵌套: 不需要省略的需设置 truncated 为 false</p>
+    <el-space wrap>
+      <ul class="content">
+        <li>
+          <ReText tag="p" :lineClamp="2">
+            This is a paragraph. Paragraph start
+            <ReText :truncated="false">
+              【 This is ReText
+              <ReText tag="sup" size="small" :truncated="false">
+                superscript 】
+              </ReText>
+            </ReText>
+            <el-text>
+              【 This is El-Text
+              <el-text tag="sub" size="small"> subscript 】 </el-text>
+            </el-text>
+            <el-text tag="ins">【Inserted】</el-text>
+            <el-text tag="del">【Deleted】</el-text>
+            <el-text tag="mark">【Marked】</el-text>
+            Paragraph end.
+          </ReText>
+        </li>
+      </ul>
+    </el-space>
+  </el-card>
+</template>
+
+<style lang="scss" scoped>
+.content {
+  width: 400px;
+  padding: 15px;
+  overflow: hidden;
+  resize: horizontal;
+  background-color: var(--el-color-info-light-9);
+  border-radius: 8px;
+}
+</style>

Yi.Pure.Vue3/src/views/components/time-picker.vue

@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+
+defineOptions({
+  name: "TimePicker"
+});
+
+const size = ref("default");
+const dynamicSize = ref();
+
+/** 时间选择器 */
+const value = ref("");
+const value1 = ref("");
+const value3 = ref();
+
+const value2 = ref(new Date(2016, 9, 10, 18, 30));
+
+const makeRange = (start: number, end: number) => {
+  const result: number[] = [];
+  for (let i = start; i <= end; i++) {
+    result.push(i);
+  }
+  return result;
+};
+const disabledHours = () => {
+  return makeRange(0, 16).concat(makeRange(19, 23));
+};
+const disabledMinutes = (hour: number) => {
+  if (hour === 17) {
+    return makeRange(0, 29);
+  }
+  if (hour === 18) {
+    return makeRange(31, 59);
+  }
+};
+const disabledSeconds = (hour: number, minute: number) => {
+  if (hour === 18 && minute === 30) {
+    return makeRange(1, 59);
+  }
+};
+
+watch(size, val =>
+  val === "disabled"
+    ? (dynamicSize.value = "default")
+    : (dynamicSize.value = size.value)
+);
+
+/** 时间选择 */
+const value4 = ref("");
+const value5 = ref("");
+const startTime = ref("");
+const endTime = ref("");
+</script>
+
+<template>
+  <div>
+    <el-card shadow="never">
+      <template #header>
+        <div class="card-header">
+          <el-space wrap :size="40">
+            <el-link
+              v-tippy="{
+                content: '点击查看详细文档'
+              }"
+              href="https://element-plus.org/zh-CN/component/time-picker.html"
+              target="_blank"
+              style="font-size: 16px; font-weight: 800"
+            >
+              时间选择器
+            </el-link>
+            <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 value="disabled">禁用</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/time-picker.vue"
+          target="_blank"
+        >
+          代码位置 src/views/components/time-picker.vue
+        </el-link>
+      </template>
+
+      <p class="mb-2">日期和时间点</p>
+      <el-space wrap>
+        <p class="text-[15px]">鼠标滚轮进行选择</p>
+        <el-time-picker
+          v-model="value"
+          placeholder="请选择时间"
+          class="!w-[140px]"
+          :size="dynamicSize"
+          :disabled="size === 'disabled'"
+        />
+        <p class="text-[15px]">箭头进行选择</p>
+        <el-time-picker
+          v-model="value1"
+          arrow-control
+          placeholder="请选择时间"
+          class="!w-[140px]"
+          :size="dynamicSize"
+          :disabled="size === 'disabled'"
+        />
+      </el-space>
+      <el-divider />
+
+      <p class="mb-2">限制时间选择范围</p>
+      <el-time-picker
+        v-model="value2"
+        class="!w-[140px]"
+        :disabled-hours="disabledHours"
+        :disabled-minutes="disabledMinutes"
+        :disabled-seconds="disabledSeconds"
+        placeholder="Arbitrary time"
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+      />
+      <el-divider />
+
+      <p class="mb-2">任意时间范围</p>
+      <el-time-picker
+        v-model="value3"
+        class="!w-[220px]"
+        is-range
+        range-separator="至"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+      />
+    </el-card>
+
+    <el-card shadow="never" class="mt-4">
+      <template #header>
+        <div class="card-header">
+          <el-link
+            v-tippy="{
+              content: '点击查看详细文档'
+            }"
+            href="https://element-plus.org/zh-CN/component/time-select.html"
+            target="_blank"
+            style="font-size: 16px; font-weight: 800"
+          >
+            时间选择
+          </el-link>
+        </div>
+      </template>
+
+      <p class="mb-2">固定时间点</p>
+      <el-time-select
+        v-model="value4"
+        placeholder="请选择时间"
+        class="!w-[140px]"
+        start="08:30"
+        step="00:15"
+        end="18:30"
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+      />
+
+      <p class="mb-2 mt-4">时间格式</p>
+      <el-time-select
+        v-model="value5"
+        placeholder="请选择时间"
+        class="!w-[140px]"
+        start="00:00"
+        step="00:30"
+        end="23:59"
+        format="hh:mm A"
+        :size="dynamicSize"
+        :disabled="size === 'disabled'"
+      />
+
+      <p class="mb-2 mt-4">固定时间范围</p>
+      <el-space wrap>
+        <el-time-select
+          v-model="startTime"
+          placeholder="开始时间"
+          class="!w-[140px]"
+          :max-time="endTime"
+          start="08:30"
+          step="00:15"
+          end="18:30"
+          :size="dynamicSize"
+          :disabled="size === 'disabled'"
+        />
+        <el-time-select
+          v-model="endTime"
+          placeholder="结束时间"
+          class="!w-[140px]"
+          :min-time="startTime"
+          start="08:30"
+          step="00:15"
+          end="18:30"
+          :size="dynamicSize"
+          :disabled="size === 'disabled'"
+        />
+      </el-space>
+    </el-card>
+  </div>
+</template>

Yi.Pure.Vue3/src/views/components/timeline.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { markRaw } from "vue";
+import { randomGradient } from "@pureadmin/utils";
+import { useRenderFlicker } from "@/components/ReFlicker";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Iphone from "@iconify-icons/ep/iphone";
+
+defineOptions({
+  name: "TimeLine"
+});
+
+const { lastBuildTime } = __APP_INFO__;
+const activities = [
+  {
+    content: "支持圆点发光",
+    timestamp: lastBuildTime,
+    icon: markRaw(useRenderFlicker())
+  },
+  {
+    content: "支持方形发光",
+    timestamp: lastBuildTime,
+    icon: markRaw(useRenderFlicker({ borderRadius: 0, background: "#67C23A" }))
+  },
+  {
+    content: "支持渐变发光",
+    timestamp: lastBuildTime,
+    icon: markRaw(
+      useRenderFlicker({
+        background: randomGradient({
+          randomizeHue: true
+        })
+      })
+    )
+  },
+  {
+    content: "支持默认颜色",
+    timestamp: lastBuildTime
+  },
+  {
+    content: "支持自定义颜色",
+    timestamp: lastBuildTime,
+    color: "#F56C6C"
+  },
+  {
+    content: "支持自定义图标",
+    timestamp: lastBuildTime,
+    color: "transparent",
+    icon: useRenderIcon(Iphone, {
+      color: "#0bbd87"
+    })
+  }
+];
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-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/timeline.vue"
+          target="_blank"
+        >
+          代码位置 src/views/components/timeline.vue
+        </el-link>
+      </div>
+    </template>
+    <div class="flex">
+      <el-timeline>
+        <el-timeline-item
+          v-for="(activity, index) in activities"
+          :key="index"
+          :icon="activity.icon"
+          :color="activity.color"
+          :timestamp="activity.timestamp"
+        >
+          {{ activity.content }}
+        </el-timeline-item>
+      </el-timeline>
+
+      <el-timeline class="pl-40">
+        <el-timeline-item
+          v-for="(activity, index) in activities"
+          :key="index"
+          :icon="activity.icon"
+          :color="activity.color"
+          :timestamp="activity.timestamp"
+          placement="bottom"
+        >
+          <div class="message">
+            vue-pure-admin 第{{ activities.length - index }}个版本发布啦
+          </div>
+        </el-timeline-item>
+      </el-timeline>
+    </div>
+  </el-card>
+</template>
+
+<style scoped>
+.message {
+  position: relative;
+  box-sizing: border-box;
+  width: 200px;
+  padding: 5px 12px;
+  line-height: 18px;
+  color: #fff;
+  word-break: break-all;
+  background-color: var(--el-color-primary);
+  border-color: var(--el-color-primary);
+  border-radius: 6px;
+}
+
+.message::after {
+  position: absolute;
+  top: 8px;
+  left: -10px;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  content: "";
+  border-color: var(--el-color-primary) transparent transparent;
+  border-style: solid dashed dashed;
+  border-width: 10px;
+}
+</style>

Yi.Pure.Vue3/src/views/components/upload/form.vue

@@ -0,0 +1,94 @@
+<script lang="ts" setup>
+import { reactive, ref } from "vue";
+import { formUpload } from "@/api/mock";
+import { message } from "@/utils/message";
+import { createFormData } from "@pureadmin/utils";
+
+import UploadIcon from "@iconify-icons/ri/upload-2-line";
+
+const formRef = ref();
+const uploadRef = ref();
+const validateForm = reactive({
+  fileList: [],
+  date: ""
+});
+
+const submitForm = formEl => {
+  if (!formEl) return;
+  formEl.validate(valid => {
+    if (valid) {
+      // 多个 file 在一个接口同时上传
+      const formData = createFormData({
+        files: validateForm.fileList.map(file => ({ raw: file.raw })), // file 文件
+        date: validateForm.date // 别的字段
+      });
+      formUpload(formData)
+        .then(({ success }) => {
+          if (success) {
+            message("提交成功", { type: "success" });
+          } else {
+            message("提交失败");
+          }
+        })
+        .catch(error => {
+          message(`提交异常 ${error}`, { type: "error" });
+        });
+    } else {
+      return false;
+    }
+  });
+};
+
+const resetForm = formEl => {
+  if (!formEl) return;
+  formEl.resetFields();
+};
+</script>
+
+<template>
+  <el-form ref="formRef" :model="validateForm" label-width="82px">
+    <el-form-item
+      label="附件"
+      prop="fileList"
+      :rules="[{ required: true, message: '附件不能为空' }]"
+    >
+      <el-upload
+        ref="uploadRef"
+        v-model:file-list="validateForm.fileList"
+        drag
+        multiple
+        action="#"
+        class="!w-[200px]"
+        :auto-upload="false"
+      >
+        <div class="el-upload__text">
+          <IconifyIconOffline
+            :icon="UploadIcon"
+            width="26"
+            class="m-auto mb-2"
+          />
+          可点击或拖拽上传
+        </div>
+      </el-upload>
+    </el-form-item>
+    <el-form-item
+      label="日期"
+      prop="date"
+      :rules="[{ required: true, message: '日期不能为空' }]"
+    >
+      <el-date-picker
+        v-model="validateForm.date"
+        type="datetime"
+        class="!w-[200px]"
+        placeholder="请选择日期时间"
+        value-format="YYYY-MM-DD HH:mm:ss"
+      />
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" text bg @click="submitForm(formRef)">
+        提交
+      </el-button>
+      <el-button text bg @click="resetForm(formRef)">重置</el-button>
+    </el-form-item>
+  </el-form>
+</template>

Yi.Pure.Vue3/src/views/components/upload/index.vue

@@ -0,0 +1,318 @@
+<script setup lang="ts">
+import axios from "axios";
+import Sortable from "sortablejs";
+import UploadForm from "./form.vue";
+import { ref, computed } from "vue";
+import { useRouter } from "vue-router";
+import { message } from "@/utils/message";
+import type { UploadFile } from "element-plus";
+import { getKeyList, extractFields, downloadByData } from "@pureadmin/utils";
+
+import Add from "@iconify-icons/ep/plus";
+import Eye from "@iconify-icons/ri/eye-line";
+import Delete from "@iconify-icons/ri/delete-bin-7-line";
+
+defineOptions({
+  name: "PureUpload"
+});
+
+const fileList = ref([]);
+const router = useRouter();
+const curOpenImgIndex = ref(0);
+const dialogVisible = ref(false);
+
+const urlList = computed(() => getKeyList(fileList.value, "url"));
+const imgInfos = computed(() => extractFields(fileList.value, "name", "size"));
+
+const getImgUrl = name => new URL(`./imgs/${name}.jpg`, import.meta.url).href;
+const srcList = Array.from({ length: 3 }).map((_, index) => {
+  return getImgUrl(index + 1);
+});
+
+/** 上传文件前校验 */
+const onBefore = file => {
+  if (!["image/jpeg", "image/png", "image/gif"].includes(file.type)) {
+    message("只能上传图片");
+    return false;
+  }
+  const isExceed = file.size / 1024 / 1024 > 2;
+  if (isExceed) {
+    message(`单个图片大小不能超过2MB`);
+    return false;
+  }
+};
+
+/** 超出最大上传数时触发 */
+const onExceed = () => {
+  message("最多上传3张图片，请先删除在上传");
+};
+
+/** 移除上传的文件 */
+const handleRemove = (file: UploadFile) => {
+  fileList.value.splice(fileList.value.indexOf(file), 1);
+};
+
+/** 大图预览 */
+const handlePictureCardPreview = (file: UploadFile) => {
+  curOpenImgIndex.value = fileList.value.findIndex(img => img.uid === file.uid);
+  dialogVisible.value = true;
+};
+
+const getUploadItem = () => document.querySelectorAll("#pure-upload-item");
+
+/** 缩略图拖拽排序 */
+const imgDrop = uid => {
+  const CLASSNAME = "el-upload-list";
+  const _curIndex = fileList.value.findIndex(img => img.uid === uid);
+  getUploadItem()?.[_curIndex]?.classList?.add(`${CLASSNAME}__item-actions`);
+  const wrapper: HTMLElement = document.querySelector(`.${CLASSNAME}`);
+  Sortable.create(wrapper, {
+    handle: `.${CLASSNAME}__item`,
+    onEnd: ({ newIndex, oldIndex }) => {
+      const oldFile = fileList.value[oldIndex];
+      fileList.value.splice(oldIndex, 1);
+      fileList.value.splice(newIndex, 0, oldFile);
+      // fix: https://github.com/SortableJS/Sortable/issues/232 (firefox is ok, but chromium is bad. see https://bugs.chromium.org/p/chromium/issues/detail?id=410328)
+      getUploadItem().forEach(ele => {
+        ele.classList.remove(`${CLASSNAME}__item-actions`);
+      });
+    }
+  });
+};
+
+/** 下载图片 */
+const onDownload = () => {
+  [
+    { name: "巴旦木.jpeg", type: "img" },
+    { name: "恭喜发财.png", type: "img" },
+    { name: "可爱动物.gif", type: "gif" },
+    { name: "pure-upload.csv", type: "other" },
+    { name: "pure-upload.txt", type: "other" }
+  ].forEach(img => {
+    axios
+      .get(`https://xiaoxian521.github.io/hyperlink/${img.type}/${img.name}`, {
+        responseType: "blob"
+      })
+      .then(({ data }) => {
+        downloadByData(data, img.name);
+      });
+  });
+};
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <el-link
+          v-tippy="{
+            content: '点击查看详细文档'
+          }"
+          href="https://element-plus.org/zh-CN/component/upload.html"
+          target="_blank"
+          style="font-size: 16px; font-weight: 800"
+        >
+          文件上传
+        </el-link>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/upload"
+        target="_blank"
+      >
+        代码位置 src/views/components/upload
+      </el-link>
+    </template>
+
+    <el-button class="mb-4" text bg @click="onDownload">
+      点击下载安全文件进行上传测试
+    </el-button>
+    <p class="mb-4">
+      综合示例<span class="text-[14px]">
+        （ <span class="text-[red]">自动上传</span>
+        、拖拽上传、拖拽排序、设置请求头、上传进度、大图预览、多选文件、最大文件数量、文件类型限制、文件大小限制、删除文件）
+      </span>
+    </p>
+    <p v-show="fileList.length > 0" class="mb-4">
+      {{ imgInfos }}
+    </p>
+    <el-upload
+      v-model:file-list="fileList"
+      drag
+      multiple
+      class="pure-upload"
+      list-type="picture-card"
+      accept="image/jpeg,image/png,image/gif"
+      action="https://run.mocky.io/v3/3aa761d7-b0b3-4a03-96b3-6168d4f7467b"
+      :limit="3"
+      :headers="{ Authorization: 'eyJhbGciOiJIUzUxMiJ9.admin' }"
+      :on-exceed="onExceed"
+      :before-upload="onBefore"
+    >
+      <IconifyIconOffline :icon="Add" class="m-auto mt-4" width="30" />
+      <template #file="{ file }">
+        <div
+          v-if="file.status == 'ready' || file.status == 'uploading'"
+          class="mt-[35%] m-auto"
+        >
+          <p class="font-medium">文件上传中</p>
+          <el-progress
+            class="mt-2"
+            :stroke-width="2"
+            :text-inside="true"
+            :show-text="false"
+            :percentage="file.percentage"
+          />
+        </div>
+        <div v-else @mouseenter.stop="imgDrop(file.uid)">
+          <img
+            class="el-upload-list__item-thumbnail select-none"
+            :src="file.url"
+          />
+          <span
+            id="pure-upload-item"
+            :class="[
+              'el-upload-list__item-actions',
+              fileList.length > 1 && '!cursor-move'
+            ]"
+          >
+            <span
+              title="查看"
+              class="hover:text-primary"
+              @click="handlePictureCardPreview(file)"
+            >
+              <IconifyIconOffline
+                :icon="Eye"
+                class="hover:scale-125 duration-100"
+              />
+            </span>
+            <span
+              class="el-upload-list__item-delete"
+              @click="handleRemove(file)"
+            >
+              <span title="移除" class="hover:text-[var(--el-color-danger)]">
+                <IconifyIconOffline
+                  :icon="Delete"
+                  class="hover:scale-125 duration-100"
+                />
+              </span>
+            </span>
+          </span>
+        </div>
+      </template>
+    </el-upload>
+    <!-- 有时文档没写并不代表没有，多看源码好处多多😝 https://github.com/element-plus/element-plus/tree/dev/packages/components/image-viewer/src （emm...这让我想起刚开始写这个项目时，很多东西只有英文或者没有文档，需要看源码时，想笑🥹。那些美好时光都给这些坑了，giao） -->
+    <el-image-viewer
+      v-if="dialogVisible"
+      :initialIndex="curOpenImgIndex"
+      :url-list="urlList"
+      :zoom-rate="1.2"
+      :max-scale="7"
+      :min-scale="0.2"
+      @close="dialogVisible = false"
+      @switch="index => (curOpenImgIndex = index)"
+    />
+    <!-- 将自定义内容插入到body里，有了它在图片预览的时候，想插入个分页器或者别的东东在预览区某个位置就很方便咯（用户需求可以很灵活，开源组件库几乎不可能尽善尽美，很多时候寻找别的解决途径或许更好） -->
+    <teleport to="body">
+      <div
+        v-if="fileList[curOpenImgIndex] && dialogVisible"
+        effect="dark"
+        round
+        size="large"
+        type="info"
+        class="img-name"
+      >
+        <p class="text-[#fff] dark:text-black">
+          {{ fileList[curOpenImgIndex].name }}
+        </p>
+      </div>
+    </teleport>
+    <p class="el-upload__tip">
+      可拖拽上传最多3张单个不超过2MB且格式为jpeg/png/gif的图片
+    </p>
+    <el-divider />
+
+    <p class="mb-4 mt-4">
+      结合表单校验进行<span class="text-[red]">手动上传</span>
+      <span class="text-[14px]">
+        （可先打开浏览器控制台找到Network，然后填写表单内容后点击点提交观察请求变化）
+      </span>
+    </p>
+    <div class="flex justify-between">
+      <UploadForm />
+      <div>
+        <p class="text-center">上传接口相关截图</p>
+        <el-image
+          class="w-[200px] rounded-md"
+          :src="srcList[0]"
+          :preview-src-list="srcList"
+          fit="cover"
+        />
+      </div>
+    </div>
+    <el-divider />
+
+    <div class="flex flex-wrap">
+      <p>
+        裁剪、上传头像请参考
+        <span
+          class="font-bold text-[18x] cursor-pointer hover:text-[red]"
+          @click="router.push({ name: 'SystemUser' })"
+        >
+          系统管理-用户管理
+        </span>
+        表格操作栏中的上传头像功能
+      </p>
+      <p class="text-[red] text-[12px] flex flex-auto items-center justify-end">
+        免责声明：上传接口使用免费开源的
+        <el-link
+          href="https://designer.mocky.io/"
+          target="_blank"
+          style="font-size: 16px; font-weight: 800"
+        >
+          &nbsp;Mocky&nbsp;
+        </el-link>
+        <span class="font-bold text-[18x]"> 请不要上传重要信息 </span
+        >，如果造成任何损失，我们概不负责
+      </p>
+    </div>
+  </el-card>
+</template>
+
+<style lang="scss" scoped>
+:deep(.card-header) {
+  display: flex;
+
+  .header-right {
+    display: flex;
+    flex: auto;
+    align-items: center;
+    justify-content: flex-end;
+    font-size: 14px;
+  }
+}
+
+:deep(.pure-upload) {
+  .el-upload-dragger {
+    background-color: transparent;
+    border: none;
+  }
+}
+
+.img-name {
+  position: absolute;
+  bottom: 80px;
+  left: 50%;
+  z-index: 4000;
+  padding: 5px 23px;
+  background-color: var(--el-text-color-regular);
+  border-radius: 22px;
+  transform: translateX(-50%);
+
+  /** 将下面的 left: 50%; bottom: 80px; transform: translateX(-50%); 注释掉
+   *  解开下面 left: 40px; top: 40px; 注释，体验不一样的感觉。啊？还是差强人意，自己调整位置吧🥹
+   */
+  // left: 40px;
+  // top: 40px;
+}
+</style>

Yi.Pure.Vue3/src/views/components/virtual-list/horizontal.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { DynamicScroller, DynamicScrollerItem } from "vue-virtual-scroller";
+
+const items = ref([]);
+const search = ref("");
+
+for (let i = 0; i < 800; i++) {
+  items.value.push({
+    id: i
+  });
+}
+
+const filteredItems = computed(() => {
+  if (!search.value) return items.value;
+  const lowerCaseSearch = search.value;
+  return items.value.filter(i => i.id == lowerCaseSearch);
+});
+</script>
+
+<template>
+  <div class="dynamic-scroller-demo">
+    <div class="flex-ac mb-4 shadow-2xl">
+      水平模式 horizontal
+      <el-input
+        v-model="search"
+        class="mr-2 !w-[1/1.5]"
+        clearable
+        placeholder="Filter..."
+        style="width: 300px"
+      />
+    </div>
+
+    <DynamicScroller
+      :items="filteredItems"
+      :min-item-size="54"
+      direction="horizontal"
+      class="scroller"
+    >
+      <template #default="{ item, index, active }">
+        <DynamicScrollerItem
+          :item="item"
+          :active="active"
+          :size-dependencies="[item.id]"
+          :data-index="index"
+          :data-active="active"
+          :title="`Click to change message ${index}`"
+          :style="{
+            width: `${Math.max(130, Math.round((item.id?.length / 20) * 20))}px`
+          }"
+          class="message"
+        >
+          <div>
+            <IconifyIconOnline
+              icon="openmoji:beaming-face-with-smiling-eyes"
+              width="40"
+            />
+            <p class="text-center">{{ item.id }}</p>
+          </div>
+        </DynamicScrollerItem>
+      </template>
+    </DynamicScroller>
+  </div>
+</template>
+
+<style scoped>
+.dynamic-scroller-demo {
+  display: flex;
+  flex-direction: column;
+  height: 140px;
+  overflow: hidden;
+}
+
+.scroller {
+  flex: auto 1 1;
+  border: 1px solid var(--el-border-color);
+}
+
+.notice {
+  padding: 24px;
+  font-size: 20px;
+  color: #999;
+}
+
+.message {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-height: 32px;
+  padding: 12px;
+}
+</style>

Yi.Pure.Vue3/src/views/components/virtual-list/index.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import verticalList from "./vertical.vue";
+import horizontalList from "./horizontal.vue";
+import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
+
+defineOptions({
+  name: "VirtualList"
+});
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="font-medium">
+        <el-link
+          href="https://github.com/Akryum/vue-virtual-scroller/tree/next/packages/vue-virtual-scroller"
+          target="_blank"
+          style="margin: 0 5px 4px 0; font-size: 16px"
+        >
+          虚拟列表
+        </el-link>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/virtual-list"
+        target="_blank"
+      >
+        代码位置 src/views/components/virtual-list
+      </el-link>
+    </template>
+    <div class="w-full flex justify-around flex-wrap">
+      <vertical-list class="h-[500px] w-[500px]" />
+      <horizontal-list class="h-[500px] w-[500px]" />
+    </div>
+  </el-card>
+</template>

Yi.Pure.Vue3/src/views/components/virtual-list/vertical.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { DynamicScroller, DynamicScrollerItem } from "vue-virtual-scroller";
+
+const items = ref([]);
+const search = ref("");
+
+for (let i = 0; i < 800; i++) {
+  items.value.push({
+    id: i
+  });
+}
+
+const filteredItems = computed(() => {
+  if (!search.value) return items.value;
+  const lowerCaseSearch = search.value;
+  return items.value.filter(i => i.id == lowerCaseSearch);
+});
+</script>
+
+<template>
+  <div class="dynamic-scroller-demo">
+    <div class="flex-ac mb-4 shadow-2xl">
+      垂直模式 vertical
+      <el-input
+        v-model="search"
+        class="!w-[350px]"
+        clearable
+        placeholder="Filter..."
+      />
+    </div>
+
+    <DynamicScroller
+      :items="filteredItems"
+      :min-item-size="54"
+      class="scroller"
+    >
+      <template #default="{ item, index, active }">
+        <DynamicScrollerItem
+          :item="item"
+          :active="active"
+          :size-dependencies="[item.id]"
+          :data-index="index"
+          :data-active="active"
+          :title="`Click to change message ${index}`"
+          class="message"
+        >
+          <div class="flex items-center">
+            <IconifyIconOnline
+              icon="openmoji:beaming-face-with-smiling-eyes"
+              width="40"
+            />
+            <span>{{ item.id }}</span>
+          </div>
+        </DynamicScrollerItem>
+      </template>
+    </DynamicScroller>
+  </div>
+</template>
+
+<style scoped>
+.dynamic-scroller-demo {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.scroller {
+  flex: auto 1 1;
+  border: 1px solid var(--el-border-color);
+}
+
+.message {
+  box-sizing: border-box;
+  display: flex;
+  min-height: 32px;
+  padding: 12px;
+}
+</style>

Yi.Pure.Vue3/src/views/components/waterfall/api.ts

@@ -0,0 +1,38 @@
+export function randomID(length = 6) {
+  return Number(
+    Math.random().toString().substr(3, length) + Date.now()
+  ).toString(36);
+}
+
+const COLORS = ["#409EFF", "#67C23A", "#E6A23C", "#F56C6C", "#909399"];
+
+function getRandomNum(min: number, max: number) {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+function randomColor() {
+  return COLORS[getRandomNum(0, 4)];
+}
+
+const website = "https://www.getphotoblanket.com";
+
+export const getList = ({ page = 1, pageSize = 20 }) => {
+  const url = `${website}/products.json?page=${page}&limit=${pageSize}`;
+  return fetch(url)
+    .then(res => res.json())
+    .then(res => res.products)
+    .then(res => {
+      return res.map((item: any) => {
+        return {
+          id: randomID(),
+          star: false,
+          price: item.variants[0].price,
+          src: {
+            original: item.images[0].src
+          },
+          backgroundColor: randomColor(),
+          name: item.title
+        };
+      });
+    });
+};

Yi.Pure.Vue3/src/views/components/waterfall/index.vue

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { getList } from "./api";
+import error from "./error.png";
+import loading from "./loading.png";
+import { ElLoading } from "element-plus";
+import "vue-waterfall-plugin-next/dist/style.css";
+import InfiniteLoading from "v3-infinite-loading";
+import { onMounted, reactive, ref, nextTick } from "vue";
+import backTop from "@/assets/svg/back_top.svg?component";
+import { LazyImg, Waterfall } from "vue-waterfall-plugin-next";
+
+const options = reactive({
+  // 唯一key值
+  rowKey: "id",
+  // 卡片之间的间隙
+  gutter: 10,
+  // 是否有周围的gutter
+  hasAroundGutter: true,
+  // 卡片在PC上的宽度
+  width: 320,
+  // 自定义行显示个数，主要用于对移动端的适配
+  breakpoints: {
+    1200: {
+      // 当屏幕宽度小于等于1200
+      rowPerView: 4
+    },
+    800: {
+      // 当屏幕宽度小于等于800
+      rowPerView: 3
+    },
+    500: {
+      // 当屏幕宽度小于等于500
+      rowPerView: 2
+    }
+  },
+  // 动画效果 https://animate.style/
+  animationEffect: "animate__zoomInUp",
+  // 动画时间
+  animationDuration: 1000,
+  // 动画延迟
+  animationDelay: 300,
+  // 背景色
+  // backgroundColor: "#2C2E3A",
+  // 图片字段选择器，如果层级较深，使用 xxx.xxx.xxx 方式
+  imgSelector: "src.original",
+  // 加载配置
+  loadProps: {
+    loading,
+    error
+  },
+  // 是否懒加载
+  lazyload: true
+});
+
+const page = ref(1);
+const list = ref([]);
+const pageSize = ref();
+const loadingInstance = ref();
+
+/** 加载更多 */
+function handleLoadMore() {
+  loadingInstance.value = ElLoading.service({
+    target: ".content",
+    background: "transparent",
+    text: "加载中"
+  });
+  getList({
+    page: page.value,
+    pageSize: pageSize.value
+  }).then(res => {
+    setTimeout(() => {
+      list.value.push(...res);
+      page.value += 1;
+      nextTick(() => {
+        loadingInstance.value.close();
+      });
+    }, 500);
+  });
+}
+
+function handleDelete(item, index) {
+  list.value.splice(index, 1);
+}
+
+function handleClick(item) {
+  console.log(item);
+}
+
+onMounted(() => {
+  handleLoadMore();
+});
+</script>
+
+<template>
+  <el-scrollbar max-height="calc(100vh - 120px)" class="content">
+    <Waterfall :list="list" v-bind="options">
+      <template #item="{ item, url, index }">
+        <div
+          class="bg-gray-900 rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-linear hover:shadow-lg hover:shadow-gray-600 group"
+          @click="handleClick(item)"
+        >
+          <div class="overflow-hidden">
+            <LazyImg
+              :url="url"
+              class="cursor-pointer transition-all duration-300 ease-linear group-hover:scale-105"
+            />
+          </div>
+          <div class="px-4 pt-2 pb-4 border-t border-t-gray-800">
+            <h4 class="pb-4 text-gray-50 group-hover:text-yellow-300">
+              {{ item.name }}
+            </h4>
+            <div
+              class="pt-3 flex justify-between items-center border-t border-t-gray-600 border-opacity-50"
+            >
+              <div class="text-gray-50">$ {{ item.price }}</div>
+              <div>
+                <button
+                  class="px-3 h-7 rounded-full bg-red-500 text-sm text-white shadow-lg transition-all duration-300 hover:bg-red-600"
+                  @click.stop="handleDelete(item, index)"
+                >
+                  删除
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </Waterfall>
+
+    <!-- <div class="flex justify-center py-10">
+        <button
+          class="px-5 py-2 rounded-full bg-gray-700 text-md text-white cursor-pointer hover:bg-gray-800 transition-all duration-300"
+          @click="handleLoadMore"
+        >
+          加载更多
+        </button>
+      </div> -->
+
+    <el-backtop
+      title="回到顶部"
+      :right="35"
+      :bottom="50"
+      :visibility-height="400"
+      target=".content .el-scrollbar__wrap"
+    >
+      <backTop />
+    </el-backtop>
+
+    <!-- 加载更多 -->
+    <InfiniteLoading :firstload="false" @infinite="handleLoadMore" />
+  </el-scrollbar>
+</template>
+
+<style lang="scss" scoped>
+.main-content {
+  margin: 0 !important;
+}
+
+:deep(.el-loading-spinner .el-loading-text) {
+  font-size: 24px;
+}
+</style>

Yi.Pure.Vue3/src/views/editor/components/EditorBase.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+
+defineOptions({
+  name: "BaseEditor"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref("<p>你好</p>");
+
+// 模拟 ajax 异步获取内容
+onMounted(() => {
+  setTimeout(() => {
+    valueHtml.value = "<p>我是模拟的异步数据</p>";
+  }, 1500);
+});
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>

Yi.Pure.Vue3/src/views/editor/components/EditorMulti.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import ReCol from "@/components/ReCol";
+import { onBeforeUnmount, ref, shallowRef } from "vue";
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+
+defineOptions({
+  name: "MultiEditor"
+});
+
+// 模拟后端返回多个编辑器的数据
+const endEditorList = [
+  {
+    value: "<p>测试一</p>"
+  },
+  {
+    value: "<p>测试二</p>"
+  },
+  {
+    value: "<p>测试三</p>"
+  },
+  {
+    value: "<p>测试四</p>"
+  }
+];
+
+// 多个编辑器的情况下，前端必须进行处理，满足 Toolbar 组件的 editor 属性 所需的 shallowRef 格式
+const editorList = ref([]);
+endEditorList.forEach(edit => {
+  editorList.value.push({
+    value: edit.value,
+    // 编辑器实例，必须用 shallowRef
+    editorRef: shallowRef()
+  });
+});
+
+const mode = "default";
+
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+const editorConfig = { placeholder: "请输入内容..." };
+
+const handleCreated = (editor, index) => {
+  // 记录 editor 实例，重要！
+  editorList.value[index].editorRef = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  return editorList.value.map(edit => {
+    if (edit.editorRef == null) return;
+    edit.editorRef.destroy();
+  });
+});
+</script>
+
+<template>
+  <el-row :gutter="30" justify="space-around">
+    <re-col v-for="(edit, index) in editorList" :key="index" :value="11">
+      <div class="wangeditor">
+        <Toolbar
+          :editor="edit.editorRef"
+          :defaultConfig="toolbarConfig"
+          :mode="mode"
+          style="border-bottom: 1px solid #ccc"
+        />
+        <Editor
+          v-model="edit.value"
+          :defaultConfig="editorConfig"
+          :mode="mode"
+          style="height: 300px; overflow-y: hidden"
+          @onCreated="editor => handleCreated(editor, index)"
+        />
+      </div>
+    </re-col>
+  </el-row>
+</template>

Yi.Pure.Vue3/src/views/editor/components/EditorUpload.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { onBeforeUnmount, ref, shallowRef } from "vue";
+import "@wangeditor/editor/dist/css/style.css";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+
+defineOptions({
+  name: "picUpload"
+});
+
+const mode = "default";
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+
+// 内容 HTML
+const valueHtml = ref(
+  "<p>仅提供代码参考，暂不可上传图片，可根据实际业务改写</p>"
+);
+const toolbarConfig: any = { excludeKeys: "fullScreen" };
+const editorConfig = { placeholder: "请输入内容...", MENU_CONF: {} };
+
+// 更多详细配置看 https://www.wangeditor.com/v5/menu-config.html#%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87
+editorConfig.MENU_CONF["uploadImage"] = {
+  // 服务端上传地址，根据实际业务改写
+  server: "",
+  // form-data 的 fieldName，根据实际业务改写
+  fieldName: "file",
+  // 选择文件时的类型限制，根据实际业务改写
+  allowedFileTypes: ["image/png", "image/jpg", "image/jpeg"],
+  // 自定义插入图片
+  customInsert(res: any, insertFn) {
+    // res.data.url是后端返回的图片地址，根据实际业务改写
+    if (res.data.url) {
+      setTimeout(() => {
+        // insertFn插入图片进编辑器
+        insertFn(res.data.url);
+      }, 2000);
+    }
+  }
+};
+
+const handleCreated = editor => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
+
+<template>
+  <div class="wangeditor">
+    <Toolbar
+      :editor="editorRef"
+      :defaultConfig="toolbarConfig"
+      :mode="mode"
+      style="border-bottom: 1px solid #ccc"
+    />
+    <Editor
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      style="height: 500px; overflow-y: hidden"
+      @onCreated="handleCreated"
+    />
+  </div>
+</template>

Yi.Pure.Vue3/src/views/editor/components/index.ts

@@ -0,0 +1,3 @@
+export { default as EditorBase } from "./EditorBase.vue";
+export { default as EditorMulti } from "./EditorMulti.vue";
+export { default as EditorUpload } from "./EditorUpload.vue";

Yi.Pure.Vue3/src/views/editor/index.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { EditorBase, EditorMulti, EditorUpload } from "./components";
+
+defineOptions({
+  name: "Editor"
+});
+
+const activeNames = ref("1");
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          编辑器组件，采用开源的
+          <el-link
+            href="https://www.wangeditor.com"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            Wangeditor
+          </el-link>
+        </span>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/editor"
+        target="_blank"
+      >
+        代码位置 src/views/editor
+      </el-link>
+    </template>
+    <el-collapse v-model="activeNames" accordion>
+      <el-collapse-item title="基础用法" name="1">
+        <EditorBase v-if="activeNames === '1'" />
+      </el-collapse-item>
+      <el-collapse-item title="多个富文本" name="2">
+        <EditorMulti v-if="activeNames === '2'" />
+      </el-collapse-item>
+      <el-collapse-item title="自定义图片上传" name="3">
+        <EditorUpload v-if="activeNames === '3'" />
+      </el-collapse-item>
+    </el-collapse>
+  </el-card>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-collapse-item__header) {
+  padding-left: 10px;
+}
+</style>

Yi.Pure.Vue3/src/views/empty/index.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+import back from "@/assets/svg/back.svg?component";
+
+defineOptions({
+  name: "Empty"
+});
+
+const router = useRouter();
+</script>
+
+<template>
+  <div class="w-full h-full text-center">
+    <h1>业务内容模块</h1>
+    <p>使用场景：需要外嵌平台某个页面，不需要展示菜单导航以及额外模块</p>
+    <div class="back" title="返回上一页" @click="router.go(-1)">
+      <back class="w-[80px] h-[80px]" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.back {
+  position: relative;
+  top: 50%;
+  left: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 200px;
+  height: 200px;
+  cursor: pointer;
+  background: rgb(138 150 160 / 8%);
+  border-radius: 18px;
+  transform: translate(-50%, -50%);
+
+  &:hover {
+    background: rgb(138 150 160 / 20%);
+    transition: background 0.6s;
+  }
+}
+</style>

Yi.Pure.Vue3/src/views/error/403.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+import noAccess from "@/assets/status/403.svg?component";
+
+defineOptions({
+  name: "403"
+});
+
+const router = useRouter();
+</script>
+
+<template>
+  <div class="flex justify-center items-center h-[640px]">
+    <noAccess />
+    <div class="ml-12">
+      <p
+        v-motion
+        class="font-medium text-4xl mb-4 dark:text-white"
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 80
+          }
+        }"
+      >
+        403
+      </p>
+      <p
+        v-motion
+        class="mb-4 text-gray-500"
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 120
+          }
+        }"
+      >
+        抱歉，你无权访问该页面
+      </p>
+      <el-button
+        v-motion
+        type="primary"
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 160
+          }
+        }"
+        @click="router.push('/')"
+      >
+        返回首页
+      </el-button>
+    </div>
+  </div>
+</template>

Yi.Pure.Vue3/src/views/error/404.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+import noExist from "@/assets/status/404.svg?component";
+
+defineOptions({
+  name: "404"
+});
+
+const router = useRouter();
+</script>
+
+<template>
+  <div class="flex justify-center items-center h-[640px]">
+    <noExist />
+    <div class="ml-12">
+      <p
+        v-motion
+        class="font-medium text-4xl mb-4 dark:text-white"
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 80
+          }
+        }"
+      >
+        404
+      </p>
+      <p
+        v-motion
+        class="mb-4 text-gray-500"
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 120
+          }
+        }"
+      >
+        抱歉，你访问的页面不存在
+      </p>
+      <el-button
+        v-motion
+        type="primary"
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 160
+          }
+        }"
+        @click="router.push('/')"
+      >
+        返回首页
+      </el-button>
+    </div>
+  </div>
+</template>

Yi.Pure.Vue3/src/views/error/500.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+import noServer from "@/assets/status/500.svg?component";
+
+defineOptions({
+  name: "500"
+});
+
+const router = useRouter();
+</script>
+
+<template>
+  <div class="flex justify-center items-center h-[640px]">
+    <noServer />
+    <div class="ml-12">
+      <p
+        v-motion
+        class="font-medium text-4xl mb-4 dark:text-white"
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 80
+          }
+        }"
+      >
+        500
+      </p>
+      <p
+        v-motion
+        class="mb-4 text-gray-500"
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 120
+          }
+        }"
+      >
+        抱歉，服务器出错了
+      </p>
+      <el-button
+        v-motion
+        type="primary"
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 160
+          }
+        }"
+        @click="router.push('/')"
+      >
+        返回首页
+      </el-button>
+    </div>
+  </div>
+</template>

Yi.Pure.Vue3/src/views/flow-chart/dataTurbo.json

@@ -0,0 +1,240 @@
+{
+  "flowElementList": [
+    {
+      "incoming": [],
+      "outgoing": ["Flow_33inf2k"],
+      "dockers": [],
+      "type": 2,
+      "properties": {
+        "a": "efrwe",
+        "b": "wewe",
+        "name": "开始",
+        "x": 280,
+        "y": 200,
+        "text": {
+          "x": 280,
+          "y": 200,
+          "value": "开始"
+        },
+        "logicFlowType": "bpmn:startEvent"
+      },
+      "key": "Event_1d42u4p"
+    },
+    {
+      "incoming": ["Flow_379e0o9"],
+      "outgoing": [],
+      "dockers": [],
+      "type": 3,
+      "properties": {
+        "a": "efrwe",
+        "b": "wewe",
+        "name": "结束",
+        "x": 920,
+        "y": 200,
+        "text": {
+          "x": 920,
+          "y": 200,
+          "value": "结束"
+        },
+        "logicFlowType": "bpmn:endEvent"
+      },
+      "key": "Event_08p8i6q"
+    },
+    {
+      "incoming": ["Flow_0pfouf0"],
+      "outgoing": ["Flow_3918lhh"],
+      "dockers": [],
+      "type": 6,
+      "properties": {
+        "a": "efrwe",
+        "b": "wewe",
+        "name": "网关",
+        "x": 580,
+        "y": 200,
+        "text": {
+          "x": 580,
+          "y": 200,
+          "value": "网关"
+        },
+        "logicFlowType": "bpmn:exclusiveGateway"
+      },
+      "key": "Gateway_1fngqgj"
+    },
+    {
+      "incoming": ["Flow_33inf2k"],
+      "outgoing": ["Flow_0pfouf0"],
+      "dockers": [],
+      "type": 4,
+      "properties": {
+        "a": "efrwe",
+        "b": "wewe",
+        "name": "用户",
+        "x": 420,
+        "y": 200,
+        "text": {
+          "x": 420,
+          "y": 200,
+          "value": "用户"
+        },
+        "logicFlowType": "bpmn:userTask"
+      },
+      "key": "Activity_2mgtaia"
+    },
+    {
+      "incoming": ["Flow_3918lhh"],
+      "outgoing": ["Flow_379e0o9"],
+      "dockers": [],
+      "type": 5,
+      "properties": {
+        "a": "efrwe",
+        "b": "wewe",
+        "name": "服务",
+        "x": 760,
+        "y": 200,
+        "text": {
+          "x": 760,
+          "y": 200,
+          "value": "服务"
+        },
+        "logicFlowType": "bpmn:serviceTask"
+      },
+      "key": "Activity_1sp8qc8"
+    },
+    {
+      "incoming": ["Event_1d42u4p"],
+      "outgoing": ["Activity_2mgtaia"],
+      "type": 1,
+      "dockers": [],
+      "properties": {
+        "name": "边",
+        "text": {
+          "x": 331,
+          "y": 200,
+          "value": "边"
+        },
+        "startPoint": {
+          "x": 298,
+          "y": 200
+        },
+        "endPoint": {
+          "x": 370,
+          "y": 200
+        },
+        "pointsList": [
+          {
+            "x": 298,
+            "y": 200
+          },
+          {
+            "x": 370,
+            "y": 200
+          }
+        ],
+        "logicFlowType": "bpmn:sequenceFlow"
+      },
+      "key": "Flow_33inf2k"
+    },
+    {
+      "incoming": ["Activity_2mgtaia"],
+      "outgoing": ["Gateway_1fngqgj"],
+      "type": 1,
+      "dockers": [],
+      "properties": {
+        "name": "边2",
+        "text": {
+          "x": 507,
+          "y": 200,
+          "value": "边2"
+        },
+        "startPoint": {
+          "x": 470,
+          "y": 200
+        },
+        "endPoint": {
+          "x": 555,
+          "y": 200
+        },
+        "pointsList": [
+          {
+            "x": 470,
+            "y": 200
+          },
+          {
+            "x": 555,
+            "y": 200
+          }
+        ],
+        "logicFlowType": "bpmn:sequenceFlow"
+      },
+      "key": "Flow_0pfouf0"
+    },
+    {
+      "incoming": ["Gateway_1fngqgj"],
+      "outgoing": ["Activity_1sp8qc8"],
+      "type": 1,
+      "dockers": [],
+      "properties": {
+        "name": "边3",
+        "text": {
+          "x": 664,
+          "y": 200,
+          "value": "边3"
+        },
+        "startPoint": {
+          "x": 605,
+          "y": 200
+        },
+        "endPoint": {
+          "x": 710,
+          "y": 200
+        },
+        "pointsList": [
+          {
+            "x": 605,
+            "y": 200
+          },
+          {
+            "x": 710,
+            "y": 200
+          }
+        ],
+        "logicFlowType": "bpmn:sequenceFlow"
+      },
+      "key": "Flow_3918lhh"
+    },
+    {
+      "incoming": ["Activity_1sp8qc8"],
+      "outgoing": ["Event_08p8i6q"],
+      "type": 1,
+      "dockers": [],
+      "properties": {
+        "name": "边4",
+        "text": {
+          "x": 871,
+          "y": 200,
+          "value": "边4"
+        },
+        "startPoint": {
+          "x": 810,
+          "y": 200
+        },
+        "endPoint": {
+          "x": 902,
+          "y": 200
+        },
+        "pointsList": [
+          {
+            "x": 810,
+            "y": 200
+          },
+          {
+            "x": 902,
+            "y": 200
+          }
+        ],
+        "logicFlowType": "bpmn:sequenceFlow"
+      },
+      "key": "Flow_379e0o9"
+    }
+  ]
+}

Yi.Pure.Vue3/src/views/flow-chart/index.vue

@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import demoData from "./dataTurbo.json";
+import "@logicflow/core/dist/style/index.css";
+import "@logicflow/extension/lib/style/index.css";
+
+import LogicFlow from "@logicflow/core";
+import { ref, unref, onMounted } from "vue";
+import { BpmnNode } from "@/components/ReFlowChart/src/config";
+import { Snapshot, BpmnElement, Menu } from "@logicflow/extension";
+import { Control, NodePanel, DataDialog } from "@/components/ReFlowChart";
+import { toLogicflowData } from "@/components/ReFlowChart/src/adpterForTurbo";
+
+defineOptions({
+  name: "FlowChart"
+});
+
+const lf = ref(null);
+const graphData = ref(null);
+const dataVisible = ref<boolean>(false);
+const config = ref({
+  grid: true,
+  background: {
+    color: "#f7f9ff"
+  },
+  keyboard: {
+    enabled: true
+  }
+});
+const nodeList = BpmnNode;
+
+function initLf() {
+  // 画布配置
+  LogicFlow.use(Snapshot);
+  // 使用bpmn插件，引入bpmn元素，这些元素可以在turbo中转换后使用
+  LogicFlow.use(BpmnElement);
+  // 启动右键菜单
+  LogicFlow.use(Menu);
+  const domLf = new LogicFlow({
+    ...unref(config),
+    container: document.querySelector("#turbo")
+  });
+  lf.value = domLf;
+  // 设置边类型bpmn:sequenceFlow为默认类型
+  unref(lf).setDefaultEdgeType("bpmn:sequenceFlow");
+  onRender();
+}
+
+function onRender() {
+  // Turbo数据转换为LogicFlow内部识别的数据结构
+  const lFData = toLogicflowData(demoData);
+  lf.value.render(lFData);
+}
+
+function catData() {
+  graphData.value = unref(lf).getGraphData();
+  dataVisible.value = true;
+}
+
+onMounted(() => {
+  initLf();
+});
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          流程图组件，采用开源的
+          <el-link
+            href="https://site.logic-flow.cn/docs/#/zh/guide/start"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            LogicFlow
+          </el-link>
+        </span>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/flow-chart"
+        target="_blank"
+      >
+        代码位置 src/views/flow-chart
+      </el-link>
+    </template>
+    <div class="logic-flow-view">
+      <!-- 辅助工具栏 -->
+      <Control
+        v-if="lf"
+        class="demo-control"
+        :lf="lf"
+        :catTurboData="false"
+        @catData="catData"
+      />
+      <!-- 节点面板 -->
+      <NodePanel v-if="lf" :lf="lf" :nodeList="nodeList" />
+      <!-- 画布 -->
+      <div id="turbo" />
+      <!-- 数据查看面板 -->
+      <el-dialog
+        v-model="dataVisible"
+        class="flow-dialog"
+        title="数据"
+        width="50%"
+      >
+        <el-scrollbar>
+          <DataDialog :graphData="graphData" />
+        </el-scrollbar>
+      </el-dialog>
+    </div>
+  </el-card>
+</template>
+
+<style scoped>
+#turbo {
+  width: 100%;
+  height: 65vh;
+}
+
+.logic-flow-view {
+  position: relative;
+  margin: 10px;
+}
+
+.demo-title {
+  margin: 20px;
+  text-align: center;
+}
+
+.demo-control {
+  position: absolute;
+  top: 10px;
+  right: 20px;
+  z-index: 2;
+}
+
+.time-plus {
+  cursor: pointer;
+}
+
+.add-panel {
+  position: absolute;
+  z-index: 11;
+  padding: 10px 5px;
+  background-color: white;
+}
+
+.el-drawer__body {
+  z-index: 3;
+  height: 80%;
+  margin-top: -30px;
+  overflow: auto;
+}
+
+:deep(.flow-dialog) {
+  position: relative;
+  top: 5vh;
+  left: 0;
+  margin: 0 auto;
+  transform: none;
+}
+
+:deep(.flow-dialog) .el-dialog__body {
+  height: 85vh;
+  overflow: auto;
+}
+</style>

Yi.Pure.Vue3/src/views/ganttastic/index.vue

@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import { ref } from "vue";
+// https://zunnzunn.github.io/vue-ganttastic/introduction.html
+import { GGanttChart, GGanttRow } from "@infectoone/vue-ganttastic";
+
+const context = ref([
+  [
+    {
+      week: "星期一",
+      beginDate: "06:00",
+      endDate: "22:00",
+      ganttBarConfig: {
+        id: "0",
+        hasHandles: true,
+        label: "需求收集和分析  负责人：小张",
+        style: {
+          background: "#e96560"
+        }
+      }
+    }
+  ],
+  [
+    {
+      week: "星期二",
+      beginDate: "09:00",
+      endDate: "18:00",
+      ganttBarConfig: {
+        id: "1",
+        hasHandles: true,
+        label: "系统设计  负责人：小强",
+        style: {
+          background: "#5ccfa3"
+        }
+      }
+    }
+  ],
+  [
+    {
+      week: "星期三",
+      beginDate: "07:00",
+      endDate: "20:00",
+      ganttBarConfig: {
+        id: "2",
+        hasHandles: true,
+        label: "编码实现  负责人：老李",
+        style: {
+          background: "#77d6fa"
+        }
+      }
+    }
+  ],
+  [
+    {
+      week: "星期四",
+      beginDate: "06:00",
+      endDate: "21:00",
+      ganttBarConfig: {
+        id: "3",
+        hasHandles: true,
+        label: "编码实现  负责人：小明",
+        style: {
+          color: "#fff",
+          background: "#1b2a47"
+        }
+      }
+    }
+  ],
+  [
+    {
+      week: "星期五",
+      beginDate: "05:00",
+      endDate: "19:00",
+      ganttBarConfig: {
+        id: "4",
+        hasHandles: true,
+        label: "内部测试  负责人：小雪",
+        style: {
+          background: "#5ccfa3"
+        }
+      }
+    }
+  ],
+  [
+    {
+      week: "星期六",
+      beginDate: "10:00",
+      endDate: "22:00",
+      ganttBarConfig: {
+        id: "5",
+        hasHandles: true,
+        label: "系统优化和文档整理  负责人：小欣",
+        style: {
+          background: "#f8bc45"
+        }
+      }
+    }
+  ],
+  [
+    {
+      week: "星期天",
+      beginDate: "04:00",
+      endDate: "23:59",
+      ganttBarConfig: {
+        id: "6",
+        immobile: false,
+        hasHandles: false,
+        label: "部署和上线  负责人：老王",
+        style: {
+          background: "#f3953d"
+        }
+      }
+    }
+  ]
+]);
+
+function getWeekRange() {
+  const today = new Date();
+  const dayOfWeek = today.getDay();
+
+  const startDate = new Date(today);
+  startDate.setDate(today.getDate() - dayOfWeek + 1);
+
+  const endDate = new Date(startDate);
+  endDate.setDate(startDate.getDate() + 6);
+
+  const formatDate = date => {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+  };
+
+  const currentWeekStart = formatDate(startDate);
+  const currentWeekEnd = formatDate(endDate);
+
+  return {
+    currentWeekStart,
+    currentWeekEnd
+  };
+}
+
+const weekRangeInChina = getWeekRange();
+</script>
+
+<template>
+  <g-gantt-chart
+    chart-start="00:00"
+    chart-end="23:59"
+    precision="hour"
+    date-format="HH:mm"
+    bar-start="beginDate"
+    bar-end="endDate"
+    grid
+  >
+    <template #upper-timeunit>
+      <h1>
+        {{
+          `${weekRangeInChina.currentWeekStart} / ${weekRangeInChina.currentWeekEnd}`
+        }}
+      </h1>
+    </template>
+    <g-gantt-row
+      v-for="(item, index) in context"
+      :key="index"
+      :bars="item"
+      :label="item[0].week"
+      highlight-on-hover
+    />
+  </g-gantt-chart>
+</template>

Yi.Pure.Vue3/src/views/guide/index.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import intro from "intro.js";
+import "intro.js/minified/introjs.min.css";
+
+type GuideStep = {
+  element: string | HTMLElement;
+  title: string;
+  intro: string;
+  position: "left" | "right" | "top" | "bottom";
+};
+
+defineOptions({
+  name: "Guide"
+});
+
+const GUIDE_STEPS = [
+  {
+    element: document.querySelector(".sidebar-logo-container") as
+      | string
+      | HTMLElement,
+    title: "项目名称和Logo",
+    intro: "您可以在这里设置项目名称和Logo",
+    position: "left"
+  },
+  {
+    element: document.querySelector("#header-search") as string | HTMLElement,
+    title: "搜索菜单",
+    intro: "您可以在这里搜索想要查看的菜单",
+    position: "left"
+  },
+  {
+    element: document.querySelector("#header-translation") as
+      | string
+      | HTMLElement,
+    title: "国际化",
+    intro: "您可以在这里进行语言切换",
+    position: "left"
+  },
+  {
+    element: document.querySelector("#full-screen") as string | HTMLElement,
+    title: "全屏",
+    intro: "您可以在这里进行全屏切换",
+    position: "left"
+  },
+  {
+    element: document.querySelector("#header-notice") as string | HTMLElement,
+    title: "消息通知",
+    intro: "您可以在这里查看管理员发送的消息",
+    position: "left"
+  },
+  {
+    element: document.querySelector(".set-icon") as string | HTMLElement,
+    title: "系统配置",
+    intro: "您可以在这里查看系统配置",
+    position: "left"
+  },
+  {
+    element: document.querySelector(".tags-view") as string | HTMLElement,
+    title: "多标签页",
+    intro: "这里是您访问过的页面的历史",
+    position: "bottom"
+  }
+] as Partial<GuideStep>[];
+
+const tourOpen = ref(false);
+
+const onGuide = () => {
+  intro()
+    .setOptions({
+      steps: GUIDE_STEPS
+    })
+    .start();
+};
+
+const onTour = () => {
+  tourOpen.value = true;
+};
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <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/guide/index.vue"
+        target="_blank"
+      >
+        代码位置 src/views/guide/index.vue
+      </el-link>
+    </template>
+    <el-button @click="onGuide"> 打开引导页 (intro.js) </el-button>
+    <el-button @click="onTour"> 打开引导页 (el-tour) </el-button>
+
+    <el-tour v-model="tourOpen">
+      <el-tour-step
+        v-for="step in GUIDE_STEPS"
+        :key="step.title"
+        :target="() => step.element"
+        :title="step.title"
+        :description="step.intro"
+        :placement="step.position"
+      />
+    </el-tour>
+  </el-card>
+</template>

Yi.Pure.Vue3/src/views/list/card/components/ListCard.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { computed, PropType } from "vue";
+import shopIcon from "@/assets/svg/shop.svg?component";
+import laptopIcon from "@/assets/svg/laptop.svg?component";
+import serviceIcon from "@/assets/svg/service.svg?component";
+import calendarIcon from "@/assets/svg/calendar.svg?component";
+import userAvatarIcon from "@/assets/svg/user_avatar.svg?component";
+import More2Fill from "@iconify-icons/ri/more-2-fill";
+
+defineOptions({
+  name: "ReCard"
+});
+
+interface CardProductType {
+  type: number;
+  isSetup: boolean;
+  description: string;
+  name: string;
+}
+
+const props = defineProps({
+  product: {
+    type: Object as PropType<CardProductType>
+  }
+});
+
+const emit = defineEmits(["manage-product", "delete-item"]);
+
+const handleClickManage = (product: CardProductType) => {
+  emit("manage-product", product);
+};
+
+const handleClickDelete = (product: CardProductType) => {
+  emit("delete-item", product);
+};
+
+const cardClass = computed(() => [
+  "list-card-item",
+  { "list-card-item__disabled": !props.product.isSetup }
+]);
+
+const cardLogoClass = computed(() => [
+  "list-card-item_detail--logo",
+  { "list-card-item_detail--logo__disabled": !props.product.isSetup }
+]);
+</script>
+
+<template>
+  <div :class="cardClass">
+    <div class="list-card-item_detail bg-bg_color">
+      <el-row justify="space-between">
+        <div :class="cardLogoClass">
+          <shopIcon v-if="product.type === 1" />
+          <calendarIcon v-if="product.type === 2" />
+          <serviceIcon v-if="product.type === 3" />
+          <userAvatarIcon v-if="product.type === 4" />
+          <laptopIcon v-if="product.type === 5" />
+        </div>
+        <div class="list-card-item_detail--operation">
+          <el-tag
+            :color="product.isSetup ? '#00a870' : '#eee'"
+            effect="dark"
+            class="mx-1 list-card-item_detail--operation--tag"
+          >
+            {{ product.isSetup ? "已启用" : "已停用" }}
+          </el-tag>
+          <el-dropdown trigger="click" :disabled="!product.isSetup">
+            <IconifyIconOffline :icon="More2Fill" class="text-[24px]" />
+            <template #dropdown>
+              <el-dropdown-menu :disabled="!product.isSetup">
+                <el-dropdown-item @click="handleClickManage(product)">
+                  管理
+                </el-dropdown-item>
+                <el-dropdown-item @click="handleClickDelete(product)">
+                  删除
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
+      </el-row>
+      <p class="list-card-item_detail--name text-text_color_primary">
+        {{ product.name }}
+      </p>
+      <p class="list-card-item_detail--desc text-text_color_regular">
+        {{ product.description }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.list-card-item {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 12px;
+  overflow: hidden;
+  cursor: pointer;
+  border-radius: 3px;
+
+  &_detail {
+    flex: 1;
+    min-height: 140px;
+    padding: 24px 32px;
+
+    &--logo {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 46px;
+      height: 46px;
+      font-size: 26px;
+      color: #0052d9;
+      background: #e0ebff;
+      border-radius: 50%;
+
+      &__disabled {
+        color: #a1c4ff;
+      }
+    }
+
+    &--operation {
+      display: flex;
+      height: 100%;
+
+      &--tag {
+        border: 0;
+      }
+    }
+
+    &--name {
+      margin: 24px 0 8px;
+      font-size: 16px;
+      font-weight: 400;
+    }
+
+    &--desc {
+      display: -webkit-box;
+      height: 40px;
+      margin-bottom: 24px;
+      overflow: hidden;
+      font-size: 12px;
+      line-height: 20px;
+      text-overflow: ellipsis;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+  }
+
+  &__disabled {
+    .list-card-item_detail--name,
+    .list-card-item_detail--desc {
+      color: var(--el-text-color-disabled);
+    }
+
+    .list-card-item_detail--operation--tag {
+      color: #bababa;
+    }
+  }
+}
+</style>

Yi.Pure.Vue3/src/views/list/card/components/ListDialogForm.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { message } from "@/utils/message";
+import { FormInstance } from "element-plus";
+
+const SELECT_OPTIONS = [
+  { label: "网关", value: 1 },
+  { label: "人工智能", value: 2 },
+  { label: "CVM", value: 3 },
+  { label: "防火墙", value: 4 },
+  { label: "未知", value: 5 }
+];
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  data: {
+    type: Object,
+    default: () => {
+      return {};
+    }
+  }
+});
+
+const ruleFormRef = ref<FormInstance>();
+
+const formVisible = ref(false);
+const formData = ref(props.data);
+const textareaValue = ref("");
+
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  await formEl.validate(valid => {
+    if (valid) {
+      message("提交成功", { type: "success" });
+      formVisible.value = false;
+      resetForm(formEl);
+    }
+  });
+};
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+};
+
+const closeDialog = () => {
+  formVisible.value = false;
+  resetForm(ruleFormRef.value);
+};
+
+const emit = defineEmits(["update:visible"]);
+watch(
+  () => formVisible.value,
+  val => {
+    emit("update:visible", val);
+  }
+);
+
+watch(
+  () => props.visible,
+  val => {
+    formVisible.value = val;
+  }
+);
+
+watch(
+  () => props.data,
+  val => {
+    formData.value = val;
+  }
+);
+
+const rules = {
+  name: [{ required: true, message: "请输入产品名称", trigger: "blur" }]
+};
+</script>
+
+<template>
+  <el-dialog
+    v-model="formVisible"
+    title="新建产品"
+    :width="680"
+    draggable
+    :before-close="closeDialog"
+  >
+    <!-- 表单内容 -->
+    <el-form
+      ref="ruleFormRef"
+      :model="formData"
+      :rules="rules"
+      label-width="100px"
+    >
+      <el-form-item label="产品名称" prop="name">
+        <el-input
+          v-model="formData.name"
+          :style="{ width: '480px' }"
+          placeholder="请输入产品名称"
+        />
+      </el-form-item>
+      <el-form-item label="产品状态" prop="status">
+        <el-radio-group v-model="formData.status">
+          <el-radio value="0">已停用</el-radio>
+          <el-radio value="1">已启用</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="产品描述" prop="description">
+        <el-input
+          v-model="formData.description"
+          :style="{ width: '480px' }"
+          placeholder="请输入产品描述"
+        />
+      </el-form-item>
+      <el-form-item label="产品类型" prop="type">
+        <el-select
+          v-model="formData.type"
+          clearable
+          :style="{ width: '480px' }"
+        >
+          <el-option
+            v-for="(item, index) in SELECT_OPTIONS"
+            :key="index"
+            :value="item.value"
+            :label="item.label"
+          >
+            {{ item.label }}
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="mark">
+        <el-input
+          v-model="textareaValue"
+          type="textarea"
+          :style="{ width: '480px' }"
+          placeholder="请输入内容"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="closeDialog">取消</el-button>
+      <el-button type="primary" @click="submitForm(ruleFormRef)">
+        确定
+      </el-button>
+    </template>
+  </el-dialog>
+</template>