twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-06-08 01:17:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: 撤销更改

Browse Source
This commit is contained in:
fxzer 2024-04-03 09:37:35 +08:00
parent d685a18b9e
commit f97eefb898
69 changed files with 823 additions and 1104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/ReCodePath/index.ts Normal file
View File

@ -0,0 +1,7 @@
import { withInstall } from "@pureadmin/utils";
import reCodePath from "./src/index.vue";
/** 代码位置组件 */
export const ReCodePath = withInstall(reCodePath);
export default ReCodePath;

39
src/components/ReCodePath/src/index.vue Normal file
View File

@ -0,0 +1,39 @@
<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { useRoute } from "vue-router";
import { defineProps, computed } from "vue";
const props = defineProps<{
path?: string; // 自定义路径
isDir?: boolean; // 是否目录
}>();
const { t } = useI18n();
const rotue = useRoute();
const title = computed(() => {
return t(rotue.meta.title);
});
const path = computed(() => {
return props.path || (props.isDir ? rotue.path : rotue.path + ".vue");
});
</script>
<template>
<div>
<p class="font-medium">
<slot name="title">
{{ title }}
</slot>
</p>
<el-link
class="mt-2"
:href="`https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/${path}`"
target="_blank"
>
代码位置 src/views{{ path }}
</el-link>
</div>
</template>

2
src/router/modules/able.ts
View File

@ -60,7 +60,7 @@ export default {
} }
}, },
{ {
path: "/components/ripple", path: "/able/ripple",
name: "Ripple", name: "Ripple",
component: () => import("@/views/able/ripple.vue"), component: () => import("@/views/able/ripple.vue"),
meta: { meta: {

34
src/views/able/barcode.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import ReCodePath from "@/components/ReCodePath";
import ReBarcode from "@/components/ReBarcode"; import ReBarcode from "@/components/ReBarcode";
defineOptions({ defineOptions({
@ -33,24 +34,21 @@ const barcodes = [
<div> <div>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="font-medium"> <ReCodePath>
条形码（基于 <template #title>
<el-link <div>
href="https://lindell.me/JsBarcode/" 条形码（基于
target="_blank" <el-link
style="margin: 0 5px 4px 0; font-size: 16px" href="https://lindell.me/JsBarcode/"
> target="_blank"
JsBarcode style="margin: 0 5px 4px 0; font-size: 16px"
</el-link> >
生成） JsBarcode
</div> </el-link>
<el-link 生成）
class="mt-2" </div>
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/barcode.vue" </template>
target="_blank" </ReCodePath>
>
代码位置 src/views/able/barcode.vue
</el-link>
</template> </template>
<el-row :gutter="12"> <el-row :gutter="12">
<template v-for="(item, index) in barcodes" :key="index"> <template v-for="(item, index) in barcodes" :key="index">

33
src/views/able/danmaku/index.vue
View File

@ -104,25 +104,20 @@ function addDanmu() {
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath is-dir>
<span class="font-medium"> <template #title>
弹幕组件，采用开源的 <span>
<el-link 弹幕组件，采用开源的
href="https://github.com/hellodigua/vue-danmaku/tree/vue3" <el-link
target="_blank" href="https://github.com/hellodigua/vue-danmaku/tree/vue3"
style="margin: 0 4px 5px; font-size: 16px" target="_blank"
> style="margin: 0 4px 5px; font-size: 16px"
vue3-danmaku >
</el-link> vue3-danmaku
</span> </el-link>
</div> </span>
<el-link </template>
class="mt-2" </ReCodePath>
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/danmaku"
target="_blank"
>
代码位置 src/views/able/danmaku
</el-link>
</template> </template>
<div class="flex gap-5"> <div class="flex gap-5">
<vue-danmaku <vue-danmaku

10
src/views/able/debounce.vue
View File

@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { message } from "@/utils/message"; import { message } from "@/utils/message";
import ReCodePath from "@/components/ReCodePath";
import { debounce, throttle } from "@pureadmin/utils"; import { debounce, throttle } from "@pureadmin/utils";
defineOptions({ defineOptions({
@ -20,13 +21,8 @@ const throttleClick = throttle(handle);
<el-card class="mb-5" shadow="never"> <el-card class="mb-5" shadow="never">
<template #header> <template #header>
<p class="font-medium">防抖：debounce</p> <p class="font-medium">防抖：debounce</p>
<el-link
class="mt-2" <ReCodePath path="/able/debounce.vue" />
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> </template>
<div class="mb-5"> <div class="mb-5">
所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n

11
src/views/able/directives.vue
View File

@ -55,16 +55,7 @@ function onReset() {
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath />
<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> </template>
<div class="mb-2"> <div class="mb-2">
防抖指令（连续输入，只会执行第一次点击事件，立即执行） 防抖指令（连续输入，只会执行第一次点击事件，立即执行）

10
src/views/able/download.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import ReCodePath from "@/components/ReCodePath";
import { import {
downloadByOnlineUrl, downloadByOnlineUrl,
downloadByBase64, downloadByBase64,
@ -28,14 +29,7 @@ function down() {
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<p class="font-medium">文件下载功能</p> <ReCodePath />
<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> </template>
<div class="flex flex-wrap"> <div class="flex flex-wrap">
<el-button <el-button

35
src/views/able/draggable.vue
View File

@ -56,25 +56,22 @@ onMounted(() => {
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath>
<span class="font-medium"> <template #title>
拖拽组件，采用开源的 <div class="card-header">
<el-link <span class="font-medium">
href="https://sortablejs.github.io/vue.draggable.next/#/simple" 拖拽组件，采用开源的
target="_blank" <el-link
style="margin: 0 4px 5px; font-size: 16px" href="https://sortablejs.github.io/vue.draggable.next/#/simple"
> target="_blank"
vuedraggable style="margin: 0 4px 5px; font-size: 16px"
</el-link> >
</span> vuedraggable
</div> </el-link>
<el-link </span>
class="mt-2" </div>
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/draggable.vue" </template>
target="_blank" </ReCodePath>
>
代码位置 src/views/able/draggable.vue
</el-link>
</template> </template>
<div class="drag-container"> <div class="drag-container">
<!-- grid列表拖拽 --> <!-- grid列表拖拽 -->

30
src/views/able/excel.vue
View File

@ -71,22 +71,20 @@ const exportExcel = () => {
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="font-medium"> <ReCodePath>
<el-link <template #title>
href="https://github.com/SheetJS/sheetjs" <span class="font-medium">
target="_blank" 导出Excel，采用开源的
style="margin: 0 5px 4px 0; font-size: 16px" <el-link
> href="https://github.com/SheetJS/sheetjs"
导出Excel target="_blank"
</el-link> style="margin: 0 5px 4px 0; font-size: 16px"
</div> >
<el-link SheetJS
class="mt-2" </el-link>
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/excel.vue" </span>
target="_blank" </template>
> </ReCodePath>
代码位置 src/views/able/excel.vue
</el-link>
</template> </template>
<el-button type="primary" @click="exportExcel">导出Excel</el-button> <el-button type="primary" @click="exportExcel">导出Excel</el-button>
<div class="h-[25rem] mt-3"> <div class="h-[25rem] mt-3">

29
src/views/able/infinite-scroll.vue
View File

@ -34,22 +34,19 @@ const load = () => {
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="font-medium"> <ReCodePath>
<el-link <template #title>
href="https://github.com/yujinpan/el-table-infinite-scroll" <div class="font-medium">
target="_blank" <el-link
style="margin: 0 5px 4px 0; font-size: 16px" 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 </el-link>
class="mt-2" </div>
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/infinite-scroll.vue" </template>
target="_blank" </ReCodePath>
>
代码位置 src/views/able/infinite-scroll.vue
</el-link>
</template> </template>
<p class="mb-2">{{ isBottom ? "已加载全部页" : `加载到第 ${page} 页` }}</p> <p class="mb-2">{{ isBottom ? "已加载全部页" : `加载到第 ${page} 页` }}</p>
<el-table <el-table

13
src/views/able/line-tree.vue
View File

@ -24,18 +24,7 @@ const dataProps = {
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath />
<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> </template>
<el-row :gutter="24"> <el-row :gutter="24">

38
src/views/able/menu-tree.vue
View File

@ -8,6 +8,7 @@ import { extractPathList, deleteChildren } from "@/utils/tree";
import { usePermissionStoreHook } from "@/store/modules/permission"; import { usePermissionStoreHook } from "@/store/modules/permission";
import type { TreeNode } from "element-plus/es/components/tree-v2/src/types"; import type { TreeNode } from "element-plus/es/components/tree-v2/src/types";
import NodeTree from "@iconify-icons/ri/node-tree"; import NodeTree from "@iconify-icons/ri/node-tree";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "MenuTree" name: "MenuTree"
@ -45,27 +46,22 @@ const filterMethod = (query: string, node: treeNode) => {
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath>
<span class="font-medium"> <template #title>
菜单树结构（采用 Element Plus 的 <span class="font-medium">
<el-link 菜单树结构（采用 Element Plus 的
href="https://element-plus.gitee.io/zh-CN/component/tree-v2.html" <el-link
target="_blank" href="https://element-plus.gitee.io/zh-CN/component/tree-v2.html"
:icon="useRenderIcon(NodeTree)" target="_blank"
style="margin: 0 5px 4px 0; font-size: 16px" :icon="useRenderIcon(NodeTree)"
> style="margin: 0 5px 4px 0; font-size: 16px"
Tree V2 >
</el-link> Tree V2
组件并支持国际化） </el-link>
</span> 组件并支持国际化）
</div> </span>
<el-link </template>
class="mt-2" </ReCodePath>
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> </template>
<el-input <el-input
v-model="query" v-model="query"

54
src/views/able/mqtt-client.vue
View File

@ -2,6 +2,7 @@
// vue 3 + vite use MQTT.js refer to https://github.com/mqttjs/MQTT.js/issues/1269 // 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 * as mqtt from "mqtt/dist/mqtt.min";
import { reactive, ref, onUnmounted } from "vue"; import { reactive, ref, onUnmounted } from "vue";
import ReCodePath from "@/components/ReCodePath";
const protocol = location.protocol === "https:" ? "wss" : "ws"; const protocol = location.protocol === "https:" ? "wss" : "ws";
const port = protocol === "wss" ? 8084 : 8083; const port = protocol === "wss" ? 8084 : 8083;
@ -190,34 +191,31 @@ onUnmounted(() => {
<template> <template>
<el-card shadow="never" :body-style="{ padding: '20px' }"> <el-card shadow="never" :body-style="{ padding: '20px' }">
<template #header> <template #header>
<div> <ReCodePath>
基于 <template #title>
<el-link <div>
type="primary" 基于
:underline="false" <el-link
href="https://github.com/mqttjs/MQTT.js" type="primary"
target="_blank" :underline="false"
> href="https://github.com/mqttjs/MQTT.js"
MQTT.js target="_blank"
</el-link> >
和 免费的公共MQTT代理 MQTT.js
<el-link </el-link>
type="primary" 和 免费的公共MQTT代理
:underline="false" <el-link
href="broker.emqx.io" type="primary"
target="_blank" :underline="false"
> href="broker.emqx.io"
EMQX target="_blank"
</el-link> >
实现的一套 MQTT 客户端 EMQX
</div> </el-link>
<el-link 实现的一套 MQTT 客户端
class="mt-2" </div>
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/mqtt-client.vue" </template>
target="_blank" </ReCodePath>
>
代码位置 src/views/able/mqtt-client.vue
</el-link>
</template> </template>
<el-card shadow="never"> <el-card shadow="never">

29
src/views/able/pdf.vue
View File

@ -2,6 +2,7 @@
import { ref } from "vue"; import { ref } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import VuePdfEmbed from "vue-pdf-embed"; import VuePdfEmbed from "vue-pdf-embed";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "Pdf" name: "Pdf"
@ -37,22 +38,18 @@ const onPrint = () => {
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="font-medium"> <ReCodePath>
<el-link <template #title>
href="https://github.com/hrynko/vue-pdf-embed" PDF预览 基于
target="_blank" <el-link
style="margin: 0 5px 4px 0; font-size: 16px" href="https://github.com/hrynko/vue-pdf-embed"
> target="_blank"
PDF预览 style="margin: 0 5px 4px 0; font-size: 16px"
</el-link> >
</div> vue-pdf-embed
<el-link </el-link>
class="mt-2" </template>
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/pdf.vue" </ReCodePath>
target="_blank"
>
代码位置 src/views/able/pdf.vue
</el-link>
</template> </template>
<div <div
v-loading="loading" v-loading="loading"

13
src/views/able/pinyin.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { html } from "pinyin-pro"; import { html } from "pinyin-pro";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "Pinyin" name: "Pinyin"
}); });
@ -9,16 +9,7 @@ defineOptions({
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath />
<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> </template>
<p v-html="html('带 音 调')" /> <p v-html="html('带 音 调')" />
<p class="mt-2" v-html="html('不 带 音 调', { toneType: 'none' })" /> <p class="mt-2" v-html="html('不 带 音 调', { toneType: 'none' })" />

8
src/views/able/print/index.vue
View File

@ -98,13 +98,7 @@ const tableData: User[] = [
打印 打印
</el-button> </el-button>
</div> </div>
<el-link <ReCodePath is-dir />
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> </template>
<el-row :gutter="24"> <el-row :gutter="24">
<el-col <el-col

35
src/views/able/qrcode.vue
View File

@ -2,7 +2,7 @@
import { ref, unref } from "vue"; import { ref, unref } from "vue";
import { message } from "@/utils/message"; import { message } from "@/utils/message";
import ReQrcode from "@/components/ReQrcode"; import ReQrcode from "@/components/ReQrcode";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "QrCode" name: "QrCode"
}); });
@ -25,24 +25,21 @@ const disabledClick = () => {
<div> <div>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="font-medium"> <ReCodePath>
二维码（基于 <template #title>
<el-link <div class="font-medium">
href="https://github.com/soldair/node-qrcode" 二维码（基于
target="_blank" <el-link
style="margin: 0 5px 4px 0; font-size: 16px" href="https://github.com/soldair/node-qrcode"
> target="_blank"
qrcode style="margin: 0 5px 4px 0; font-size: 16px"
</el-link> >
生成） qrcode
</div> </el-link>
<el-link 生成）
class="mt-2" </div>
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/qrcode.vue" </template>
target="_blank" </ReCodePath>
>
代码位置 src/views/able/qrcode.vue
</el-link>
</template> </template>
<el-row :gutter="20" justify="space-between"> <el-row :gutter="20" justify="space-between">
<el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24"> <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">

10
src/views/able/ripple.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "Ripple" name: "Ripple"
}); });
@ -7,14 +8,7 @@ defineOptions({
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<p class="font-medium">波纹(Ripple)</p> <ReCodePath />
<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> </template>
<div class="mb-5">组件中的波纹</div> <div class="mb-5">组件中的波纹</div>
<el-alert <el-alert

12
src/views/able/sensitive.vue
View File

@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from "vue"; import { ref } from "vue";
import Mint from "mint-filter"; import Mint from "mint-filter";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "Sensitive" name: "Sensitive"
@ -20,16 +21,7 @@ function onInput() {
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath />
<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> </template>
<div class="flex flex-wrap gap-2 my-2"> <div class="flex flex-wrap gap-2 my-2">
<span>自定义敏感词</span> <span>自定义敏感词</span>

12
src/views/able/typeit.vue
View File

@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { TypeIt, type TypeItOptions } from "@/components/ReTypeit"; import { TypeIt, type TypeItOptions } from "@/components/ReTypeit";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "Typeit" name: "Typeit"
@ -13,16 +14,7 @@ const options: TypeItOptions = {
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath />
<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> </template>
<TypeIt :options="options" /> <TypeIt :options="options" />
</el-card> </el-card>

30
src/views/able/verify.vue
View File

@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from "vue"; import { ref } from "vue";
import Vcode from "vue3-puzzle-vcode"; import Vcode from "vue3-puzzle-vcode";
import ReCodePath from "@/components/ReCodePath";
const isShow = ref(true); const isShow = ref(true);
@ -16,22 +17,19 @@ function onFail() {
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="font-medium"> <ReCodePath>
<el-link <template #title>
href="https://github.com/javaLuo/vue-puzzle-vcode/tree/vue3" <div class="font-medium">
target="_blank" 拼图人机验证、右滑拼图验证 基于
style="margin: 0 5px 4px 0; font-size: 16px" <el-link
> href="https://github.com/javaLuo/vue-puzzle-vcode/tree/vue3"
拼图人机验证、右滑拼图验证 target="_blank"
</el-link> style="margin: 0 5px 4px 0; font-size: 16px"
</div> >vue3-puzzle-vcode
<el-link </el-link>
class="mt-2" </div>
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/verify.vue" </template>
target="_blank" </ReCodePath>
>
代码位置 src/views/able/verify.vue
</el-link>
</template> </template>
<div class="bg-[rgba(15,23,42,0.2)] p-6 w-[360px]"> <div class="bg-[rgba(15,23,42,0.2)] p-6 w-[360px]">
<Vcode :show="isShow" type="inside" @fail="onFail" @success="onSuccess" /> <Vcode :show="isShow" type="inside" @fail="onFail" @success="onSuccess" />

8
src/views/able/video-frame/index.vue
View File

@ -134,13 +134,7 @@ onBeforeUnmount(() => {
工具，可以在浏览器内进行视频和音频录制、转换和流式传输等，不过通过一些实践，对于时长较长的视频性能还是不太行，不过用于时长较短的短视频还是可以上生产的 工具，可以在浏览器内进行视频和音频录制、转换和流式传输等，不过通过一些实践，对于时长较长的视频性能还是不太行，不过用于时长较短的短视频还是可以上生产的
</p> </p>
</span> </span>
<el-link <ReCodePath is-dir />
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> </div>
</template> </template>
<div class="flex flex-wrap"> <div class="flex flex-wrap">

36
src/views/able/video.vue
View File

@ -3,6 +3,7 @@ import { onMounted } from "vue";
import { deviceDetection } from "@pureadmin/utils"; import { deviceDetection } from "@pureadmin/utils";
import { useRenderIcon } from "@/components/ReIcon/src/hooks"; import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import VideoPlay from "@iconify-icons/ep/video-play"; import VideoPlay from "@iconify-icons/ep/video-play";
import ReCodePath from "@/components/ReCodePath";
import Player from "xgplayer"; import Player from "xgplayer";
import "xgplayer/dist/index.min.css"; import "xgplayer/dist/index.min.css";
@ -35,26 +36,21 @@ onMounted(() => {
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath>
<span class="font-medium"> <template #title>
视频组件，采用开源的 <span class="font-medium">
<el-link 视频组件，采用开源的
href="https://v3.h5player.bytedance.com/" <el-link
target="_blank" href="https://v3.h5player.bytedance.com/"
:icon="useRenderIcon(VideoPlay)" target="_blank"
style="margin: 0 4px 5px; font-size: 16px" :icon="useRenderIcon(VideoPlay)"
> style="margin: 0 4px 5px; font-size: 16px"
西瓜播放器 >
</el-link> 西瓜播放器
</span> </el-link>
</div> </span>
<el-link </template>
class="mt-2" </ReCodePath>
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> </template>
<div id="mse" /> <div id="mse" />
</el-card> </el-card>

16
src/views/able/watermark.vue
View File

@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, nextTick, onBeforeUnmount } from "vue"; import { ref, onMounted, nextTick, onBeforeUnmount } from "vue";
import { useWatermark } from "@pureadmin/utils"; import { useWatermark } from "@pureadmin/utils";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "WaterMark" name: "WaterMark"
@ -34,8 +35,8 @@ onBeforeUnmount(() => {
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath>
<span class="font-medium"> <template #title>
<el-link <el-link
href="https://pure-admin-utils.netlify.app/hooks/useWatermark/useWatermark" href="https://pure-admin-utils.netlify.app/hooks/useWatermark/useWatermark"
target="_blank" target="_blank"
@ -43,15 +44,8 @@ onBeforeUnmount(() => {
> >
页面水印 页面水印
</el-link> </el-link>
</span> </template>
</div> </ReCodePath>
<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> </template>
<el-space wrap class="!mb-2"> <el-space wrap class="!mb-2">
<span> 请输入要创建水印的值：</span> <span> 请输入要创建水印的值：</span>

37
src/views/able/wavesurfer/index.vue
View File

@ -78,28 +78,23 @@ onBeforeUnmount(() => {
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath is-dir>
<span class="font-medium"> <template #title>
音频可视化，采用开源的 <span>
<el-link 音频可视化，采用开源的
href="https://wavesurfer-js.org/" <el-link
target="_blank" href="https://wavesurfer-js.org/"
style="margin: 0 4px 5px; font-size: 16px" target="_blank"
> style="margin: 0 4px 5px; font-size: 16px"
wavesurfer.js >
</el-link> wavesurfer.js
<span class="text-[red]"> </el-link>
（温馨提示：音频默认最大声音，播放时请调低电脑声音，以免影响到您） <span class="text-[red]">
（温馨提示：音频默认最大声音，播放时请调低电脑声音，以免影响到您）
</span>
</span> </span>
</span> </template>
</div> </ReCodePath>
<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> </template>
<div <div
v-loading="loading" v-loading="loading"

34
src/views/components/animatecss.vue
View File

@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, watch } from "vue"; import { ref, watch } from "vue";
import ReAnimateSelector from "@/components/ReAnimateSelector"; import ReAnimateSelector from "@/components/ReAnimateSelector";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "AnimateCss" name: "AnimateCss"
@ -16,25 +17,20 @@ watch(animate, () => {
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath>
<span class="font-medium"> <template #title>
<el-link <span>
href="https://animate.style/" <el-link
target="_blank" href="https://animate.style/"
style="margin: 0 4px 5px; font-size: 16px" target="_blank"
> style="margin: 0 4px 5px; font-size: 16px"
animate.css >
</el-link> animate.css
选择器 </el-link>
</span> 选择器
</div> </span>
<el-link </template>
class="mt-2" </ReCodePath>
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> </template>
<ReAnimateSelector v-model="animate" class="!w-[200px]" /> <ReAnimateSelector v-model="animate" class="!w-[200px]" />
</el-card> </el-card>

13
src/views/components/button.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from "vue"; import { ref } from "vue";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "ButtonPage" name: "ButtonPage"
}); });
@ -13,16 +13,7 @@ const url = ref(`${VITE_PUBLIC_PATH}html/button.html`);
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath />
<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> </template>
<iframe :src="url" frameborder="0" class="iframe w-full h-[60vh]" /> <iframe :src="url" frameborder="0" class="iframe w-full h-[60vh]" />
</el-card> </el-card>

10
src/views/components/cascader.vue
View File

@ -8,6 +8,7 @@ import {
CodeToText CodeToText
} from "@/utils/chinaArea"; } from "@/utils/chinaArea";
import { ref } from "vue"; import { ref } from "vue";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "Cascader" name: "Cascader"
@ -26,14 +27,7 @@ const handleChange = value => {
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<p class="font-medium">区域级联选择器</p> <ReCodePath />
<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> </template>
<el-row :gutter="24"> <el-row :gutter="24">
<el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24"> <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">

32
src/views/components/check-button.vue
View File

@ -2,6 +2,7 @@
import { ref, watch } from "vue"; import { ref, watch } from "vue";
import { message } from "@/utils/message"; import { message } from "@/utils/message";
import { getKeyList } from "@pureadmin/utils"; import { getKeyList } from "@pureadmin/utils";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "CheckButton" name: "CheckButton"
@ -90,24 +91,19 @@ watch(size, val =>
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath>
<el-space wrap :size="40"> <template #title>
<span style="font-size: 16px; font-weight: 800"> 可选按钮 </span> <el-space wrap :size="40">
<el-radio-group v-model="size"> <span style="font-size: 16px; font-weight: 800"> 可选按钮 </span>
<el-radio value="large">大尺寸</el-radio> <el-radio-group v-model="size">
<el-radio value="default">默认尺寸</el-radio> <el-radio value="large">大尺寸</el-radio>
<el-radio value="small">小尺寸</el-radio> <el-radio value="default">默认尺寸</el-radio>
<el-radio value="disabled">禁用</el-radio> <el-radio value="small">小尺寸</el-radio>
</el-radio-group> <el-radio value="disabled">禁用</el-radio>
</el-space> </el-radio-group>
</div> </el-space>
<el-link </template>
class="mt-2" </ReCodePath>
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> </template>
<p class="mb-2">单选（紧凑风格的按钮样式）</p> <p class="mb-2">单选（紧凑风格的按钮样式）</p>
<el-radio-group <el-radio-group

50
src/views/components/check-card.vue
View File

@ -3,6 +3,7 @@ import { ref, watch } from "vue";
// https://plus-pro-components.com/components/check-card-group.html // https://plus-pro-components.com/components/check-card-group.html
import "plus-pro-components/es/components/check-card-group/style/css"; import "plus-pro-components/es/components/check-card-group/style/css";
import { PlusCheckCardGroup } from "plus-pro-components"; import { PlusCheckCardGroup } from "plus-pro-components";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "CheckCard" name: "CheckCard"
@ -40,33 +41,28 @@ watch(size, val =>
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath>
<el-space wrap :size="40"> <template #title>
<el-link <el-space wrap :size="40">
v-tippy="{ <el-link
content: '点击查看详细文档' v-tippy="{
}" content: '点击查看详细文档'
href="https://plus-pro-components.com/components/check-card-group.html" }"
target="_blank" href="https://plus-pro-components.com/components/check-card-group.html"
style="font-size: 16px; font-weight: 800" target="_blank"
> style="font-size: 16px; font-weight: 800"
多选卡片组 >
</el-link> 多选卡片组
<el-radio-group v-model="size"> </el-link>
<el-radio value="large">大尺寸</el-radio> <el-radio-group v-model="size">
<el-radio value="default">默认尺寸</el-radio> <el-radio value="large">大尺寸</el-radio>
<el-radio value="small">小尺寸</el-radio> <el-radio value="default">默认尺寸</el-radio>
<el-radio value="disabled">禁用</el-radio> <el-radio value="small">小尺寸</el-radio>
</el-radio-group> <el-radio value="disabled">禁用</el-radio>
</el-space> </el-radio-group>
</div> </el-space>
<el-link </template>
class="mt-2" </ReCodePath>
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> </template>
<p class="mb-2 mt-4">单选</p> <p class="mb-2 mt-4">单选</p>

39
src/views/components/collapse.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from "vue"; import { ref } from "vue";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "Collapse" name: "Collapse"
}); });
@ -27,27 +27,22 @@ const handleChange = (val: string[]) => {
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath>
<el-space wrap :size="40"> <template #title>
<el-link <el-space wrap :size="40">
v-tippy="{ <el-link
content: '点击查看详细文档' v-tippy="{
}" content: '点击查看详细文档'
href="https://element-plus.org/zh-CN/component/collapse.html" }"
target="_blank" href="https://element-plus.org/zh-CN/component/collapse.html"
style="font-size: 16px; font-weight: 800" target="_blank"
> style="font-size: 16px; font-weight: 800"
折叠面板 >
</el-link> 折叠面板
</el-space> </el-link>
</div> </el-space>
<el-link </template>
class="mt-2" </ReCodePath>
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> </template>
<p class="mb-2">基础用法</p> <p class="mb-2">基础用法</p>

51
src/views/components/color-picker.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, watch } from "vue"; import { ref, watch } from "vue";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "ColorPicker" name: "ColorPicker"
}); });
@ -44,33 +44,28 @@ function onClick() {
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath>
<el-space wrap :size="40"> <template #title>
<el-link <el-space wrap :size="40">
v-tippy="{ <el-link
content: '点击查看详细文档' v-tippy="{
}" content: '点击查看详细文档'
href="https://element-plus.org/zh-CN/component/color-picker.html" }"
target="_blank" href="https://element-plus.org/zh-CN/component/color-picker.html"
style="font-size: 16px; font-weight: 800" target="_blank"
> style="font-size: 16px; font-weight: 800"
颜色选择器 >
</el-link> 颜色选择器
<el-radio-group v-model="size"> </el-link>
<el-radio value="large">大尺寸</el-radio> <el-radio-group v-model="size">
<el-radio value="default">默认尺寸</el-radio> <el-radio value="large">大尺寸</el-radio>
<el-radio value="small">小尺寸</el-radio> <el-radio value="default">默认尺寸</el-radio>
<el-radio value="disabled">禁用</el-radio> <el-radio value="small">小尺寸</el-radio>
</el-radio-group> <el-radio value="disabled">禁用</el-radio>
</el-space> </el-radio-group>
</div> </el-space>
<el-link </template>
class="mt-2" </ReCodePath>
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> </template>
<p class="mb-2">不同尺寸、选择透明度、预定义颜色</p> <p class="mb-2">不同尺寸、选择透明度、预定义颜色</p>

12
src/views/components/contextmenu/index.vue
View File

@ -3,6 +3,7 @@ import basic from "./basic.vue";
import menuGroup from "./menuGroup.vue"; import menuGroup from "./menuGroup.vue";
import menuDynamic from "./menuDynamic.vue"; import menuDynamic from "./menuDynamic.vue";
import "v-contextmenu/dist/themes/default.css"; import "v-contextmenu/dist/themes/default.css";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "ContextMenu" name: "ContextMenu"
@ -12,16 +13,7 @@ defineOptions({
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath is-dir />
<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> </template>
<el-row :gutter="24"> <el-row :gutter="24">
<el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="10"> <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="10">

12
src/views/components/count-to.vue
View File

@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { ReNormalCountTo, ReboundCountTo } from "@/components/ReCountTo"; import { ReNormalCountTo, ReboundCountTo } from "@/components/ReCountTo";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "CountTo" name: "CountTo"
@ -9,16 +10,7 @@ defineOptions({
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath />
<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> </template>
<ReNormalCountTo <ReNormalCountTo
prefix="$" prefix="$"

36
src/views/components/cropping/index.vue
View File

@ -3,6 +3,7 @@ import avatar from "./avatar.png";
import { ref, onBeforeUnmount } from "vue"; import { ref, onBeforeUnmount } from "vue";
import ReCropper from "@/components/ReCropper"; import ReCropper from "@/components/ReCropper";
import { formatBytes } from "@pureadmin/utils"; import { formatBytes } from "@pureadmin/utils";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "Cropping" name: "Cropping"
@ -28,26 +29,21 @@ onBeforeUnmount(() => {
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath>
<span class="font-medium"> <template #title>
图片裁剪，基于开源的 <span class="font-medium">
<el-link 图片裁剪，基于开源的
href="https://fengyuanchen.github.io/cropperjs/" <el-link
target="_blank" href="https://fengyuanchen.github.io/cropperjs/"
style="margin: 0 4px 5px; font-size: 16px" target="_blank"
> style="margin: 0 4px 5px; font-size: 16px"
cropperjs >
</el-link> cropperjs
进行二次封装（提示：右键下面左侧裁剪区可开启功能菜单） </el-link>
</span> 进行二次封装（提示：右键下面左侧裁剪区可开启功能菜单）
</div> </span>
<el-link </template>
class="mt-2" </ReCodePath>
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/cropping"
target="_blank"
>
代码位置 src/views/components/cropping
</el-link>
</template> </template>
<div v-loading="!showPopover" element-loading-background="transparent"> <div v-loading="!showPopover" element-loading-background="transparent">
<el-popover <el-popover

50
src/views/components/date-picker.vue
View File

@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, watch } from "vue"; import { ref, watch } from "vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks"; import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "DatePicker" name: "DatePicker"
@ -131,33 +132,28 @@ watch(size, val =>
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath>
<el-space wrap :size="40"> <template #title>
<el-link <el-space wrap :size="40">
v-tippy="{ <el-link
content: '点击查看详细文档' v-tippy="{
}" content: '点击查看详细文档'
href="https://element-plus.org/zh-CN/component/date-picker.html" }"
target="_blank" href="https://element-plus.org/zh-CN/component/date-picker.html"
style="font-size: 16px; font-weight: 800" target="_blank"
> style="font-size: 16px; font-weight: 800"
日期选择器 >
</el-link> 日期选择器
<el-radio-group v-model="size"> </el-link>
<el-radio value="large">大尺寸</el-radio> <el-radio-group v-model="size">
<el-radio value="default">默认尺寸</el-radio> <el-radio value="large">大尺寸</el-radio>
<el-radio value="small">小尺寸</el-radio> <el-radio value="default">默认尺寸</el-radio>
<el-radio value="disabled">禁用</el-radio> <el-radio value="small">小尺寸</el-radio>
</el-radio-group> <el-radio value="disabled">禁用</el-radio>
</el-space> </el-radio-group>
</div> </el-space>
<el-link </template>
class="mt-2" </ReCodePath>
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> </template>
<p class="mb-2">选择某一天</p> <p class="mb-2">选择某一天</p>

8
src/views/components/datetime-picker.vue
View File

@ -177,13 +177,7 @@ watch(size, val =>
</el-radio-group> </el-radio-group>
</el-space> </el-space>
</div> </div>
<el-link <ReCodePath />
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> </template>
<p class="mb-2">日期和时间点</p> <p class="mb-2">日期和时间点</p>

51
src/views/components/dialog/index.vue
View File

@ -4,6 +4,7 @@ import { h, createVNode, ref } from "vue";
import { message } from "@/utils/message"; import { message } from "@/utils/message";
import formPrimitive from "./formPrimitive.vue"; import formPrimitive from "./formPrimitive.vue";
import forms, { type FormProps } from "./form.vue"; import forms, { type FormProps } from "./form.vue";
import ReCodePath from "@/components/ReCodePath";
import { cloneDeep, debounce } from "@pureadmin/utils"; import { cloneDeep, debounce } from "@pureadmin/utils";
import { import {
addDialog, addDialog,
@ -445,32 +446,30 @@ function onBeforeSureClick() {
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath is-dir>
<span class="font-medium"> <template #title>
二次封装 Element Plus 的 <div class="card-header">
<el-link <span class="font-medium">
href="https://element-plus.org/zh-CN/component/dialog.html" 二次封装 Element Plus 的
target="_blank" <el-link
style="margin: 0 4px 5px; font-size: 16px" href="https://element-plus.org/zh-CN/component/dialog.html"
> target="_blank"
Dialog style="margin: 0 4px 5px; font-size: 16px"
</el-link> >
，采用函数式调用弹框组件（更多操作实例请参考 Dialog
<span </el-link>
class="cursor-pointer text-primary" ，采用函数式调用弹框组件（更多操作实例请参考
@click="router.push({ name: 'SystemDept' })" <span
> class="cursor-pointer text-primary"
系统管理页面 @click="router.push({ name: 'SystemDept' })"
</span> >
） 系统管理页面
</span> </span>
</div> ）
<el-link </span>
href="https://github.com/pure-admin/vue-pure-admin/tree/main/src/views/components/dialog" </div>
target="_blank" </template>
> </ReCodePath>
代码位置 src/views/components/dialog
</el-link>
</template> </template>
<el-space wrap> <el-space wrap>
<el-button @click="onBaseClick"> 基础用法 </el-button> <el-button @click="onBaseClick"> 基础用法 </el-button>

50
src/views/components/el-button.vue
View File

@ -2,6 +2,7 @@
import { ref, watch } from "vue"; import { ref, watch } from "vue";
import { useDark } from "@pureadmin/utils"; import { useDark } from "@pureadmin/utils";
import { useRenderIcon } from "@/components/ReIcon/src/hooks"; import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "PureButton" name: "PureButton"
@ -55,33 +56,28 @@ watch(size, val =>
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath>
<el-space wrap :size="40"> <template #title>
<el-link <el-space wrap :size="40">
v-tippy="{ <el-link
content: '点击查看详细文档' v-tippy="{
}" content: '点击查看详细文档'
href="https://element-plus.org/zh-CN/component/button.html" }"
target="_blank" href="https://element-plus.org/zh-CN/component/button.html"
style="font-size: 16px; font-weight: 800" target="_blank"
> style="font-size: 16px; font-weight: 800"
Button 按钮 >
</el-link> Button 按钮
<el-radio-group v-model="size"> </el-link>
<el-radio value="large">大尺寸</el-radio> <el-radio-group v-model="size">
<el-radio value="default">默认尺寸</el-radio> <el-radio value="large">大尺寸</el-radio>
<el-radio value="small">小尺寸</el-radio> <el-radio value="default">默认尺寸</el-radio>
<el-radio value="disabled">禁用</el-radio> <el-radio value="small">小尺寸</el-radio>
</el-radio-group> <el-radio value="disabled">禁用</el-radio>
</el-space> </el-radio-group>
</div> </el-space>
<el-link </template>
class="mt-2" </ReCodePath>
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> </template>
<p class="mb-2">基础按钮</p> <p class="mb-2">基础按钮</p>

13
src/views/components/icon-select.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from "vue"; import { ref } from "vue";
import { IconSelect } from "@/components/ReIcon"; import { IconSelect } from "@/components/ReIcon";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "IconSelect" name: "IconSelect"
}); });
@ -12,16 +12,7 @@ const icon = ref("ep:add-location");
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath />
<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> </template>
<IconSelect v-model="icon" class="w-[200px]" /> <IconSelect v-model="icon" class="w-[200px]" />
</el-card> </el-card>

56
src/views/components/json-editor.vue
View File

@ -2,6 +2,7 @@
import { reactive, watch } from "vue"; import { reactive, watch } from "vue";
import "vue-json-pretty/lib/styles.css"; import "vue-json-pretty/lib/styles.css";
import VueJsonPretty from "vue-json-pretty"; import VueJsonPretty from "vue-json-pretty";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "JsonEditor" name: "JsonEditor"
@ -74,36 +75,31 @@ watch(
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath>
<span class="font-medium"> <template #title>
JSON编辑器，采用开源的 <span>
<el-link JSON编辑器，采用开源的
href="https://github.com/leezng/vue-json-pretty" <el-link
target="_blank" href="https://github.com/leezng/vue-json-pretty"
style="margin: 0 4px 5px; font-size: 16px" target="_blank"
> style="margin: 0 4px 5px; font-size: 16px"
vue-json-pretty >
</el-link> vue-json-pretty
（支持大数据量）。 </el-link>
</span> （支持大数据量）。
<span class="font-medium"> </span>
当然还有一款代码编辑器推荐（这里就不做演示了），采用开源的 <span class="font-medium">
<el-link 当然还有一款代码编辑器推荐（这里就不做演示了），采用开源的
href="https://github.com/surmon-china/vue-codemirror" <el-link
target="_blank" href="https://github.com/surmon-china/vue-codemirror"
style="margin: 0 4px 5px; font-size: 16px" target="_blank"
> style="margin: 0 4px 5px; font-size: 16px"
codemirror6 >
</el-link> codemirror6
</span> </el-link>
</div> </span>
<el-link </template>
class="mt-2" </ReCodePath>
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> </template>
<vue-json-pretty <vue-json-pretty
v-model:data="state.data" v-model:data="state.data"

12
src/views/components/message.vue
View File

@ -4,6 +4,7 @@ import hot from "@/assets/svg/hot.svg?component";
import { message, closeAllMessage } from "@/utils/message"; import { message, closeAllMessage } from "@/utils/message";
import { useRenderIcon } from "@/components/ReIcon/src/hooks"; import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Check from "@iconify-icons/ep/check"; import Check from "@iconify-icons/ep/check";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "Message" name: "Message"
@ -13,16 +14,7 @@ defineOptions({
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath />
<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> </template>
<h4 class="mb-4">Element Plus 的消息提示，点击弹出提示信息</h4> <h4 class="mb-4">Element Plus 的消息提示，点击弹出提示信息</h4>

34
src/views/components/progress.vue
View File

@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { useRenderIcon } from "@/components/ReIcon/src/hooks"; import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "PureProgress" name: "PureProgress"
@ -11,25 +12,20 @@ const format = percentage => (percentage === 100 ? "Full" : `${percentage}%`);
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath>
<el-link <template #title>
v-tippy="{ <el-link
content: '点击查看详细文档' v-tippy="{
}" content: '点击查看详细文档'
href="https://element-plus.org/zh-CN/component/progress.html" }"
target="_blank" href="https://element-plus.org/zh-CN/component/progress.html"
style="font-size: 16px; font-weight: 800" target="_blank"
> style="font-size: 16px; font-weight: 800"
进度条 >
</el-link> 进度条
</div> </el-link>
<el-link </template>
class="mt-2" </ReCodePath>
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> </template>
<p class="mb-4">直线进度条动画</p> <p class="mb-4">直线进度条动画</p>

112
src/views/components/seamless-scroll.vue
View File

@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, unref } from "vue"; import { ref, reactive, unref } from "vue";
import SeamlessScroll from "@/components/ReSeamlessScroll"; import SeamlessScroll from "@/components/ReSeamlessScroll";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "SeamlessScroll" name: "SeamlessScroll"
@ -52,66 +53,65 @@ function changeDirection(val) {
<el-space wrap> <el-space wrap>
<el-card class="box-card" shadow="never"> <el-card class="box-card" shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath>
<span class="font-medium">无缝滚动</span> <template #title>
<el-button <span class="font-medium">无缝滚动</span>
class="button" <el-button
link class="button"
type="primary" link
@click="changeDirection('top')" type="primary"
> @click="changeDirection('top')"
<span
:style="{ color: classOption.direction === 'top' ? 'red' : '' }"
> >
向上滚动 <span
</span> :style="{ color: classOption.direction === 'top' ? 'red' : '' }"
</el-button> >
<el-button 向上滚动
class="button" </span>
link </el-button>
type="primary" <el-button
@click="changeDirection('bottom')" class="button"
> link
<span type="primary"
:style="{ @click="changeDirection('bottom')"
color: classOption.direction === 'bottom' ? 'red' : ''
}"
> >
向下滚动 <span
</span> :style="{
</el-button> color: classOption.direction === 'bottom' ? 'red' : ''
<el-button }"
class="button" >
link 向下滚动
type="primary" </span>
@click="changeDirection('left')" </el-button>
> <el-button
<span class="button"
:style="{ color: classOption.direction === 'left' ? 'red' : '' }" link
type="primary"
@click="changeDirection('left')"
> >
向左滚动 <span
</span> :style="{
</el-button> color: classOption.direction === 'left' ? 'red' : ''
<el-button }"
class="button" >
link 向左滚动
type="primary" </span>
@click="changeDirection('right')" </el-button>
> <el-button
<span class="button"
:style="{ color: classOption.direction === 'right' ? 'red' : '' }" link
type="primary"
@click="changeDirection('right')"
> >
向右滚动 <span
</span> :style="{
</el-button> color: classOption.direction === 'right' ? 'red' : ''
</div> }"
<el-link >
class="mt-2" 向右滚动
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/seamless-scroll.vue" </span>
target="_blank" </el-button>
> </template>
代码位置 src/views/components/seamless-scroll.vue </ReCodePath>
</el-link>
</template> </template>
<SeamlessScroll <SeamlessScroll
ref="scroll" ref="scroll"

30
src/views/components/segmented.vue
View File

@ -4,6 +4,7 @@ import { message } from "@/utils/message";
import HomeFilled from "@iconify-icons/ep/home-filled"; import HomeFilled from "@iconify-icons/ep/home-filled";
import { useRenderIcon } from "@/components/ReIcon/src/hooks"; import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Segmented, { type OptionsType } from "@/components/ReSegmented"; import Segmented, { type OptionsType } from "@/components/ReSegmented";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "Segmented" name: "Segmented"
@ -201,23 +202,18 @@ watch(size, val => (dynamicSize.value = size.value));
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath>
<el-space wrap :size="40"> <template #title>
<span style="font-size: 16px; font-weight: 800"> 分段控制器 </span> <el-space wrap :size="40">
<el-radio-group v-model="size"> <span style="font-size: 16px; font-weight: 800"> 分段控制器 </span>
<el-radio value="large">大尺寸</el-radio> <el-radio-group v-model="size">
<el-radio value="default">默认尺寸</el-radio> <el-radio value="large">大尺寸</el-radio>
<el-radio value="small">小尺寸</el-radio> <el-radio value="default">默认尺寸</el-radio>
</el-radio-group> <el-radio value="small">小尺寸</el-radio>
</el-space> </el-radio-group>
</div> </el-space>
<el-link </template>
class="mt-2" </ReCodePath>
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> </template>
<el-scrollbar> <el-scrollbar>
<p class="mb-2"> <p class="mb-2">

10
src/views/components/selector.vue
View File

@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from "vue"; import { ref } from "vue";
import Selector from "@/components/ReSelector"; import Selector from "@/components/ReSelector";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "Selector" name: "Selector"
@ -34,14 +35,7 @@ const selectedVal = ({ left, right }): void => {
shadow="never" shadow="never"
> >
<template #header> <template #header>
<p class="font-medium">{{ item.title }}</p> <ReCodePath />
<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> </template>
<Selector <Selector
:HsKey="key" :HsKey="key"

10
src/views/components/split-pane.vue
View File

@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import splitpane, { ContextProps } from "@/components/ReSplitPane"; import splitpane, { ContextProps } from "@/components/ReSplitPane";
import { reactive } from "vue"; import { reactive } from "vue";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "SplitPane" name: "SplitPane"
@ -23,14 +24,7 @@ const settingTB: ContextProps = reactive({
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <div class="card-header">
<p class="font-medium">切割面板</p> <ReCodePath />
<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> </div>
</template> </template>
<div class="split-pane"> <div class="split-pane">

34
src/views/components/statistic.vue
View File

@ -3,6 +3,7 @@ import { ref } from "vue";
import dayjs from "dayjs"; import dayjs from "dayjs";
import ReCol from "@/components/ReCol"; import ReCol from "@/components/ReCol";
import { useTransition } from "@vueuse/core"; import { useTransition } from "@vueuse/core";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "Statistic" name: "Statistic"
@ -27,25 +28,20 @@ function reset() {
<div> <div>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath>
<el-link <template #title>
v-tippy="{ <el-link
content: '点击查看详细文档' v-tippy="{
}" content: '点击查看详细文档'
href="https://element-plus.org/zh-CN/component/statistic.html" }"
target="_blank" href="https://element-plus.org/zh-CN/component/statistic.html"
style="font-size: 16px; font-weight: 800" target="_blank"
> style="font-size: 16px; font-weight: 800"
统计组件 >
</el-link> 统计组件
</div> </el-link>
<el-link </template>
class="mt-2" </ReCodePath>
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> </template>
<el-row :gutter="24"> <el-row :gutter="24">

28
src/views/components/swiper.vue
View File

@ -5,6 +5,7 @@ import "swiper/css/pagination";
import SwiperCore from "swiper"; import SwiperCore from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue"; import { Swiper, SwiperSlide } from "swiper/vue";
import { Autoplay, Navigation, Pagination } from "swiper/modules"; import { Autoplay, Navigation, Pagination } from "swiper/modules";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "Swiper" name: "Swiper"
@ -87,22 +88,17 @@ const swiperExample: any[] = [
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="font-medium"> <ReCodePath>
<el-link <template #title>
href="https://github.com/nolimits4web/swiper" <el-link
target="_blank" href="https://github.com/nolimits4web/swiper"
style="margin: 0 5px 4px 0; font-size: 16px" target="_blank"
> style="margin: 0 5px 4px 0; font-size: 16px"
Swiper插件 >
</el-link> Swiper插件
</div> </el-link>
<el-link </template>
class="mt-2" </ReCodePath>
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> </template>
<el-row :gutter="10"> <el-row :gutter="10">
<el-col v-for="item in swiperExample" :key="item.id" :span="12"> <el-col v-for="item in swiperExample" :key="item.id" :span="12">

48
src/views/components/tag.vue
View File

@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, nextTick } from "vue"; import { ref, nextTick } from "vue";
import { cloneDeep, isAllEmpty } from "@pureadmin/utils"; import { cloneDeep, isAllEmpty } from "@pureadmin/utils";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "PureTag" name: "PureTag"
@ -66,32 +67,27 @@ const handleInputConfirm = () => {
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath>
<el-space wrap :size="40"> <template #title>
<el-link <el-space wrap :size="40">
v-tippy="{ <el-link
content: '点击查看详细文档' v-tippy="{
}" content: '点击查看详细文档'
href="https://element-plus.org/zh-CN/component/tag.html" }"
target="_blank" href="https://element-plus.org/zh-CN/component/tag.html"
style="font-size: 16px; font-weight: 800" target="_blank"
> style="font-size: 16px; font-weight: 800"
Tag 标签 >
</el-link> Tag 标签
<el-radio-group v-model="size"> </el-link>
<el-radio value="large">大尺寸</el-radio> <el-radio-group v-model="size">
<el-radio value="default">默认尺寸</el-radio> <el-radio value="large">大尺寸</el-radio>
<el-radio value="small">小尺寸</el-radio> <el-radio value="default">默认尺寸</el-radio>
</el-radio-group> <el-radio value="small">小尺寸</el-radio>
</el-space> </el-radio-group>
</div> </el-space>
<el-link </template>
class="mt-2" </ReCodePath>
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> </template>
<p class="mb-2">基础按钮</p> <p class="mb-2">基础按钮</p>

52
src/views/components/text.vue
View File

@ -2,6 +2,7 @@
import dayjs from "dayjs"; import dayjs from "dayjs";
import { ref } from "vue"; import { ref } from "vue";
import { ReText } from "@/components/ReText"; import { ReText } from "@/components/ReText";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "PureText" name: "PureText"
@ -18,34 +19,29 @@ const changeTooltipContent = () => {
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath>
<span class="font-medium"> <template #title>
文本省略，基于 <span>
<el-link 文本省略，基于
href="https://element-plus.org/zh-CN/component/text.html" <el-link
target="_blank" href="https://element-plus.org/zh-CN/component/text.html"
style="margin: 0 4px 5px; font-size: 16px" target="_blank"
> style="margin: 0 4px 5px; font-size: 16px"
el-text >
</el-link> el-text
和 </el-link>
<el-link 和
href="https://vue-tippy.netlify.app/basic-usage" <el-link
target="_blank" href="https://vue-tippy.netlify.app/basic-usage"
style="margin: 0 4px 5px; font-size: 16px" target="_blank"
> style="margin: 0 4px 5px; font-size: 16px"
VueTippy >
</el-link> VueTippy
自动省略后显示 Tooltip 提示， 支持多行省略 </el-link>
</span> 自动省略后显示 Tooltip 提示， 支持多行省略
</div> </span>
<el-link </template>
class="mt-2" </ReCodePath>
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> </template>
<p class="mb-2">基础用法</p> <p class="mb-2">基础用法</p>

50
src/views/components/time-picker.vue
View File

@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, watch } from "vue"; import { ref, watch } from "vue";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "TimePicker" name: "TimePicker"
@ -56,33 +57,28 @@ const endTime = ref("");
<div> <div>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath>
<el-space wrap :size="40"> <template #title>
<el-link <el-space wrap :size="40">
v-tippy="{ <el-link
content: '点击查看详细文档' v-tippy="{
}" content: '点击查看详细文档'
href="https://element-plus.org/zh-CN/component/time-picker.html" }"
target="_blank" href="https://element-plus.org/zh-CN/component/time-picker.html"
style="font-size: 16px; font-weight: 800" target="_blank"
> style="font-size: 16px; font-weight: 800"
时间选择器 >
</el-link> 时间选择器
<el-radio-group v-model="size"> </el-link>
<el-radio value="large">大尺寸</el-radio> <el-radio-group v-model="size">
<el-radio value="default">默认尺寸</el-radio> <el-radio value="large">大尺寸</el-radio>
<el-radio value="small">小尺寸</el-radio> <el-radio value="default">默认尺寸</el-radio>
<el-radio value="disabled">禁用</el-radio> <el-radio value="small">小尺寸</el-radio>
</el-radio-group> <el-radio value="disabled">禁用</el-radio>
</el-space> </el-radio-group>
</div> </el-space>
<el-link </template>
class="mt-2" </ReCodePath>
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> </template>
<p class="mb-2">日期和时间点</p> <p class="mb-2">日期和时间点</p>

12
src/views/components/timeline.vue
View File

@ -4,6 +4,7 @@ import { randomGradient } from "@pureadmin/utils";
import { useRenderFlicker } from "@/components/ReFlicker"; import { useRenderFlicker } from "@/components/ReFlicker";
import { useRenderIcon } from "@/components/ReIcon/src/hooks"; import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Iphone from "@iconify-icons/ep/iphone"; import Iphone from "@iconify-icons/ep/iphone";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "TimeLine" name: "TimeLine"
@ -55,16 +56,7 @@ const activities = [
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath />
<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> </template>
<div class="flex"> <div class="flex">
<el-timeline> <el-timeline>

34
src/views/components/upload/index.vue
View File

@ -7,6 +7,7 @@ import { useRouter } from "vue-router";
import { message } from "@/utils/message"; import { message } from "@/utils/message";
import type { UploadFile } from "element-plus"; import type { UploadFile } from "element-plus";
import { getKeyList, extractFields, downloadByData } from "@pureadmin/utils"; import { getKeyList, extractFields, downloadByData } from "@pureadmin/utils";
import ReCodePath from "@/components/ReCodePath";
import Add from "@iconify-icons/ep/plus"; import Add from "@iconify-icons/ep/plus";
import Eye from "@iconify-icons/ri/eye-line"; import Eye from "@iconify-icons/ri/eye-line";
@ -103,25 +104,20 @@ const onDownload = () => {
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath>
<el-link <template #title>
v-tippy="{ <el-link
content: '点击查看详细文档' v-tippy="{
}" content: '点击查看详细文档'
href="https://element-plus.org/zh-CN/component/upload.html" }"
target="_blank" href="https://element-plus.org/zh-CN/component/upload.html"
style="font-size: 16px; font-weight: 800" target="_blank"
> style="font-size: 16px; font-weight: 800"
文件上传 >
</el-link> 文件上传
</div> </el-link>
<el-link </template>
class="mt-2" </ReCodePath>
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/upload"
target="_blank"
>
代码位置 src/views/components/upload
</el-link>
</template> </template>
<el-button class="mb-4" text bg @click="onDownload"> <el-button class="mb-4" text bg @click="onDownload">

28
src/views/components/virtual-list/index.vue
View File

@ -2,6 +2,7 @@
import verticalList from "./vertical.vue"; import verticalList from "./vertical.vue";
import horizontalList from "./horizontal.vue"; import horizontalList from "./horizontal.vue";
import "vue-virtual-scroller/dist/vue-virtual-scroller.css"; import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "VirtualList" name: "VirtualList"
@ -11,22 +12,17 @@ defineOptions({
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="font-medium"> <ReCodePath>
<el-link <template #title>
href="https://github.com/Akryum/vue-virtual-scroller/tree/next/packages/vue-virtual-scroller" <el-link
target="_blank" href="https://github.com/Akryum/vue-virtual-scroller/tree/next/packages/vue-virtual-scroller"
style="margin: 0 5px 4px 0; font-size: 16px" target="_blank"
> style="margin: 0 5px 4px 0; font-size: 16px"
虚拟列表 >
</el-link> 虚拟列表
</div> </el-link>
<el-link </template>
class="mt-2" </ReCodePath>
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> </template>
<div class="w-full flex justify-around flex-wrap"> <div class="w-full flex justify-around flex-wrap">
<vertical-list class="h-[500px] w-[500px]" /> <vertical-list class="h-[500px] w-[500px]" />

34
src/views/editor/index.vue
View File

@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from "vue"; import { ref } from "vue";
import { Base, Multi, PicUpload } from "./components"; import { Base, Multi, PicUpload } from "./components";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "Editor" name: "Editor"
@ -12,25 +13,20 @@ const activeNames = ref("1");
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath>
<span class="font-medium"> <template #title>
编辑器组件，采用开源的 <span>
<el-link 编辑器组件，采用开源的
href="https://www.wangeditor.com" <el-link
target="_blank" href="https://www.wangeditor.com"
style="margin: 0 4px 5px; font-size: 16px" target="_blank"
> style="margin: 0 4px 5px; font-size: 16px"
Wangeditor >
</el-link> Wangeditor
</span> </el-link>
</div> </span>
<el-link </template>
class="mt-2" </ReCodePath>
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/editor"
target="_blank"
>
代码位置 src/views/editor
</el-link>
</template> </template>
<el-collapse v-model="activeNames" accordion> <el-collapse v-model="activeNames" accordion>
<el-collapse-item title="基础用法" name="1"> <el-collapse-item title="基础用法" name="1">

34
src/views/flow-chart/index.vue
View File

@ -9,6 +9,7 @@ import { BpmnNode } from "@/components/ReFlowChart/src/config";
import { Snapshot, BpmnElement, Menu } from "@logicflow/extension"; import { Snapshot, BpmnElement, Menu } from "@logicflow/extension";
import { Control, NodePanel, DataDialog } from "@/components/ReFlowChart"; import { Control, NodePanel, DataDialog } from "@/components/ReFlowChart";
import { toLogicflowData } from "@/components/ReFlowChart/src/adpterForTurbo"; import { toLogicflowData } from "@/components/ReFlowChart/src/adpterForTurbo";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "FlowChart" name: "FlowChart"
@ -64,25 +65,20 @@ onMounted(() => {
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath>
<span class="font-medium"> <template #title>
流程图组件，采用开源的 <span>
<el-link 流程图组件，采用开源的
href="https://site.logic-flow.cn/docs/#/zh/guide/start" <el-link
target="_blank" href="https://site.logic-flow.cn/docs/#/zh/guide/start"
style="margin: 0 4px 5px; font-size: 16px" target="_blank"
> style="margin: 0 4px 5px; font-size: 16px"
LogicFlow >
</el-link> LogicFlow
</span> </el-link>
</div> </span>
<el-link </template>
class="mt-2" </ReCodePath>
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/flow-chart"
target="_blank"
>
代码位置 src/views/flow-chart
</el-link>
</template> </template>
<div class="logic-flow-view"> <div class="logic-flow-view">
<!-- 辅助工具栏 --> <!-- 辅助工具栏 -->

16
src/views/guide/index.vue
View File

@ -2,6 +2,7 @@
import { ref } from "vue"; import { ref } from "vue";
import intro from "intro.js"; import intro from "intro.js";
import "intro.js/minified/introjs.min.css"; import "intro.js/minified/introjs.min.css";
import ReCodePath from "@/components/ReCodePath";
type GuideStep = { type GuideStep = {
element: string | HTMLElement; element: string | HTMLElement;
@ -81,18 +82,9 @@ const onTour = () => {
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath>
<span class="font-medium"> <template #title> 引导页常用于引导式介绍项目的基本功能或亮点 </template>
引导页常用于引导式介绍项目的基本功能或亮点 </ReCodePath>
</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> </template>
<el-button @click="onGuide"> 打开引导页 (intro.js) </el-button> <el-button @click="onGuide"> 打开引导页 (intro.js) </el-button>
<el-button @click="onTour"> 打开引导页 (el-tour) </el-button> <el-button @click="onTour"> 打开引导页 (el-tour) </el-button>

10
src/views/permission/button/index.vue
View File

@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { hasAuth, getAuths } from "@/router/utils"; import { hasAuth, getAuths } from "@/router/utils";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "PermissionButton" name: "PermissionButton"
@ -12,14 +13,7 @@ defineOptions({
<el-card shadow="never" class="mb-2"> <el-card shadow="never" class="mb-2">
<template #header> <template #header>
<div class="card-header">组件方式判断权限</div> <ReCodePath />
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/permission/button/index.vue"
target="_blank"
>
代码位置 src/views/permission/button/index.vue
</el-link>
</template> </template>
<el-space wrap> <el-space wrap>
<Auth value="permission:btn:add"> <Auth value="permission:btn:add">

1
src/views/permission/page/index.vue
View File

@ -4,6 +4,7 @@ import { storageLocal } from "@pureadmin/utils";
import { type CSSProperties, ref, computed } from "vue"; import { type CSSProperties, ref, computed } from "vue";
import { useUserStoreHook } from "@/store/modules/user"; import { useUserStoreHook } from "@/store/modules/user";
import { usePermissionStoreHook } from "@/store/modules/permission"; import { usePermissionStoreHook } from "@/store/modules/permission";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "PermissionPage" name: "PermissionPage"

13
src/views/result/fail.vue
View File

@ -1,5 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { useColumns } from "./columns"; import { useColumns } from "./columns";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "Fail" name: "Fail"
}); });
@ -10,16 +12,7 @@ const { columns } = useColumns();
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath />
<span class="font-medium">失败页</span>
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/result/fail.vue"
target="_blank"
>
代码位置 src/views/result/fail.vue
</el-link>
</template> </template>
<el-result <el-result
icon="error" icon="error"

13
src/views/result/success.vue
View File

@ -1,4 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "Success" name: "Success"
}); });
@ -24,16 +26,7 @@ const columns = [
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath />
<span class="font-medium">成功页</span>
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/result/success.vue"
target="_blank"
>
代码位置 src/views/result/success.vue
</el-link>
</template> </template>
<el-result <el-result
icon="success" icon="success"

36
src/views/schema-form/index.vue
View File

@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from "vue"; import { ref } from "vue";
import { list } from "./list"; import { list } from "./list";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "SchemaForm" name: "SchemaForm"
@ -16,26 +17,21 @@ function tabClick({ index }) {
<template> <template>
<el-card shadow="never" :body-style="{ height: 'calc(100vh - 260px)' }"> <el-card shadow="never" :body-style="{ height: 'calc(100vh - 260px)' }">
<template #header> <template #header>
<div class="card-header"> <ReCodePath path="/schema-form" is-dir>
<span class="font-medium"> <template #title>
JSON 格式配置表单，采用优秀开源的 <span>
<el-link JSON 格式配置表单，采用优秀开源的
href="https://plus-pro-components.com/components/form.html" <el-link
target="_blank" href="https://plus-pro-components.com/components/form.html"
style="margin: 0 4px 5px; font-size: 16px" target="_blank"
> style="margin: 0 4px 5px; font-size: 16px"
PlusProComponents >
</el-link> PlusProComponents
，维护整体表单只需操作 columns 配置即可 </el-link>
</span> ，维护整体表单只需操作 columns 配置即可
</div> </span>
<el-link </template>
class="mt-2" </ReCodePath>
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/schema-form"
target="_blank"
>
代码位置 src/views/schema-form
</el-link>
</template> </template>
<el-tabs @tab-click="tabClick"> <el-tabs @tab-click="tabClick">

36
src/views/table/edit.vue
View File

@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from "vue"; import { ref } from "vue";
import { list } from "./edit/list"; import { list } from "./edit/list";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "PureTableEdit" name: "PureTableEdit"
@ -16,26 +17,21 @@ function tabClick({ index }) {
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath>
<span class="font-medium"> <template #title>
可编辑用法全部采用 TSX 语法，充分发挥 <span>
<el-link 可编辑用法全部采用 TSX 语法，充分发挥
href="https://github.com/pure-admin/pure-admin-table" <el-link
target="_blank" href="https://github.com/pure-admin/pure-admin-table"
style="margin: 0 4px 5px; font-size: 16px" target="_blank"
> style="margin: 0 4px 5px; font-size: 16px"
@pureadmin/table >
</el-link> @pureadmin/table
的灵活性，维护整体表格只需操作 columns 配置即可 </el-link>
</span> 的灵活性，维护整体表格只需操作 columns 配置即可
</div> </span>
<el-link </template>
class="mt-2" </ReCodePath>
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/table/edit"
target="_blank"
>
代码位置 src/views/table/edit
</el-link>
</template> </template>
<el-alert <el-alert

36
src/views/table/high.vue
View File

@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from "vue"; import { ref } from "vue";
import { list } from "./high/list"; import { list } from "./high/list";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "PureTableHigh" name: "PureTableHigh"
@ -16,26 +17,21 @@ function tabClick({ index }) {
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath>
<span class="font-medium"> <template #title>
高级用法全部采用 TSX 语法，充分发挥 <span class="font-medium">
<el-link 高级用法全部采用 TSX 语法，充分发挥
href="https://github.com/pure-admin/pure-admin-table" <el-link
target="_blank" href="https://github.com/pure-admin/pure-admin-table"
style="margin: 0 4px 5px; font-size: 16px" target="_blank"
> style="margin: 0 4px 5px; font-size: 16px"
@pureadmin/table >
</el-link> @pureadmin/table
的灵活性，维护整体表格只需操作 columns 配置即可 </el-link>
</span> 的灵活性，维护整体表格只需操作 columns 配置即可
</div> </span>
<el-link </template>
class="mt-2" </ReCodePath>
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/table/high"
target="_blank"
>
代码位置 src/views/table/high
</el-link>
</template> </template>
<el-alert <el-alert

52
src/views/table/index.vue
View File

@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from "vue"; import { ref } from "vue";
import { list } from "./base/list"; import { list } from "./base/list";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "PureTable" name: "PureTable"
@ -16,34 +17,29 @@ function tabClick({ index }) {
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath is-dir>
<span class="font-medium"> <template #title>
二次封装 Element Plus 的 <span class="font-medium">
<el-link 二次封装 Element Plus 的
href="https://element-plus.org/zh-CN/component/table.html" <el-link
target="_blank" href="https://element-plus.org/zh-CN/component/table.html"
style="margin: 0 4px 5px; font-size: 16px" target="_blank"
> style="margin: 0 4px 5px; font-size: 16px"
el-table >
</el-link> el-table
完全兼容 api 并提供灵活的配置项以及完善的类型提示，不用将代码都写在 </el-link>
template 里了 完全兼容 api 并提供灵活的配置项以及完善的类型提示，不用将代码都写在
<el-link template 里了
href="https://github.com/pure-admin/pure-admin-table" <el-link
target="_blank" href="https://github.com/pure-admin/pure-admin-table"
style="margin: 0 4px 5px; font-size: 16px" target="_blank"
> style="margin: 0 4px 5px; font-size: 16px"
@pureadmin/table 源码 >
</el-link> @pureadmin/table 源码
</span> </el-link>
</div> </span>
<el-link </template>
class="mt-2" </ReCodePath>
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/table/base"
target="_blank"
>
代码位置 src/views/table/base
</el-link>
</template> </template>
<el-alert <el-alert

34
src/views/table/virtual.vue
View File

@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from "vue"; import { ref } from "vue";
import { list } from "./virtual/list"; import { list } from "./virtual/list";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "VxeTable" name: "VxeTable"
@ -16,25 +17,20 @@ function tabClick({ index }) {
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="card-header"> <ReCodePath>
<span class="font-medium"> <template #title>
虚拟滚动采用 <span>
<el-link 虚拟滚动采用
href="https://vxetable.cn/#/table/scroll/scroll" <el-link
target="_blank" href="https://vxetable.cn/#/table/scroll/scroll"
style="margin: 0 4px 5px; font-size: 16px" target="_blank"
> style="margin: 0 4px 5px; font-size: 16px"
vxe-table >
</el-link> vxe-table
</span> </el-link>
</div> </span>
<el-link </template>
class="mt-2" </ReCodePath>
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/table/virtual"
target="_blank"
>
代码位置 src/views/table/virtual
</el-link>
</template> </template>
<el-tabs @tab-click="tabClick"> <el-tabs @tab-click="tabClick">

10
src/views/tabs/index.vue
View File

@ -10,6 +10,7 @@ import { clone } from "@pureadmin/utils";
import { transformI18n } from "@/plugins/i18n"; import { transformI18n } from "@/plugins/i18n";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags"; import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import { usePermissionStoreHook } from "@/store/modules/permission"; import { usePermissionStoreHook } from "@/store/modules/permission";
import ReCodePath from "@/components/ReCodePath";
defineOptions({ defineOptions({
name: "Tabs" name: "Tabs"
@ -48,14 +49,7 @@ function onCloseTags() {
<template> <template>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<div class="font-medium">标签页复用，超出限制自动关闭</div> <ReCodePath />
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/tabs"
target="_blank"
>
代码位置 src/views/tabs
</el-link>
</template> </template>
<div class="flex flex-wrap items-center"> <div class="flex flex-wrap items-center">
<p>query传参模式：</p> <p>query传参模式：</p>