perf: 优化演示页面

src/views/able/cascader.vue

@@ -1,158 +0,0 @@
-<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> </template>
-    <el-row :gutter="20">
-      <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
-        <div class="flex flex-col items-center justify-center">
-          <span class="imp">
-            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="imp">
-            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="imp">
-            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="imp">
-            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>
-
-<style scoped lang="scss">
-.imp {
-  color: var(--el-color-primary);
-}
-</style>

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 };

src/views/able/danmaku/index.vue

@@ -0,0 +1,215 @@
+<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>
+    </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>

src/views/able/draggable.vue

@@ -0,0 +1,223 @@
+<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>
+    </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>

src/views/able/icon-select.vue

@@ -1,21 +0,0 @@
-<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>
-    </template>
-    <IconSelect v-model="icon" />
-  </el-card>
-</template>

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>

src/views/able/swiper.vue

@@ -1,123 +0,0 @@
-<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">
-        Swiper插件（
-        <el-link
-          href="https://github.com/nolimits4web/swiper"
-          target="_blank"
-          style="margin: 0 5px 4px 0; font-size: 16px"
-        >
-          github地址
-        </el-link>
-        ）
-      </div>
-    </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>

src/views/able/timeline.vue

@@ -1,107 +0,0 @@
-<script setup lang="ts">
-import { markRaw } from "vue";
-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
-  },
-  {
-    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">
-        <span class="font-medium">时间线</span>
-      </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是基于Vue3.0+TypeScript+Vite+Element-Plus编写的一套后台管理系统
-          </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>

src/views/able/typeit.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import TypeIt from "@/components/ReTypeit";
+
+defineOptions({
+  name: "Typeit"
+});
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium"> 打字机组件 </span>
+      </div>
+    </template>
+    <TypeIt :values="['test1', 'test2', 'test3']" />
+  </el-card>
+</template>

src/views/able/video.vue

@@ -0,0 +1,60 @@
+<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>
+    </template>
+    <div id="mse" />
+  </el-card>
+</template>
+
+<style scoped>
+#mse {
+  flex: auto;
+}
+</style>

src/views/able/virtual-list/horizontal.vue

@@ -1,92 +0,0 @@
-<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>

src/views/able/virtual-list/index.vue

@@ -1,31 +0,0 @@
-<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"
-        >
-          github地址
-        </el-link>
-        ）
-      </div>
-    </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>

src/views/able/virtual-list/vertical.vue

@@ -1,79 +0,0 @@
-<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>