twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-11-15 14:03:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: 重构国际化文件命名规范以及演示页加上代码位置提示 (#1034)

Browse Source 
* refactor: 重构国际化文件命名规范以及演示页加上代码位置提示
This commit is contained in:
xiaoming
2024-03-27 10:21:15 +08:00
committed by GitHub
parent 52103ab52d
commit fbacf8e85e
136 changed files with 1651 additions and 1173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ReAnimateSelector/index.ts
View File

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

2
src/components/ReBarcode/index.ts
View File

@@ -1,5 +1,5 @@
import reBarcode from "./src/index.vue";
import { withInstall } from "@pureadmin/utils";
import reBarcode from "./src/index.vue";
/** 条形码组件 */
export const ReBarcode = withInstall(reBarcode);

8
src/components/ReCountTo/src/normal/index.tsx
View File

@@ -1,10 +1,10 @@
import {
defineComponent,
reactive,
computed,
watch,
unref,
computed,
reactive,
onMounted,
unref
defineComponent
} from "vue";
import { countToProps } from "./props";
import { isNumber } from "@pureadmin/utils";

1
src/components/ReCountTo/src/normal/props.ts
View File

@@ -1,5 +1,6 @@
import type { PropType } from "vue";
import propTypes from "@/utils/propTypes";
export const countToProps = {
startVal: propTypes.number.def(0),
endVal: propTypes.number.def(2020),

2
src/components/ReCountTo/src/rebound/index.tsx
View File

@@ -1,9 +1,9 @@
import "./rebound.css";
import {
defineComponent,
ref,
unref,
onBeforeMount,
defineComponent,
onBeforeUnmount
} from "vue";
import { reboundProps } from "./props";

1
src/components/ReCountTo/src/rebound/props.ts
View File

@@ -1,5 +1,6 @@
import type { PropType } from "vue";
import propTypes from "@/utils/propTypes";
export const reboundProps = {
delay: propTypes.number.def(1),
blur: propTypes.number.def(2),

2
src/components/ReCropper/src/index.tsx
View File

@@ -6,10 +6,10 @@ import { useEventListener } from "@vueuse/core";
import { longpress } from "@/directives/longpress";
import { useTippy, directive as tippy } from "vue-tippy";
import {
type PropType,
ref,
unref,
computed,
type PropType,
onMounted,
onUnmounted,
defineComponent

4
src/components/ReDialog/index.ts
View File

@@ -51,8 +51,8 @@ const closeAllDialog = () => {
/** 千万别忘了在下面这三处引入并注册下，放心注册，不使用`addDialog`调用就不会被挂载
* https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L4
* https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L13
* https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L20
* https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L12
* https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L22
*/
const ReDialog = withInstall(reDialog);

6
src/components/ReDialog/index.vue
View File

@@ -1,10 +1,10 @@
<script setup lang="ts">
import {
closeDialog,
dialogStore,
type EventType,
type ButtonProps,
type DialogOptions
type DialogOptions,
closeDialog,
dialogStore
} from "./index";
import { ref, computed } from "vue";
import { isFunction } from "@pureadmin/utils";

2
src/components/ReFlicker/index.ts
View File

@@ -1,5 +1,5 @@
import "./index.css";
import { h, defineComponent, type Component } from "vue";
import { type Component, h, defineComponent } from "vue";
export interface attrsType {
width?: string;

4
src/components/ReFlop/src/filpper.tsx
View File

@@ -1,6 +1,6 @@
import { defineComponent, ref } from "vue";
import propTypes from "@/utils/propTypes";
import "./filpper.css";
import propTypes from "@/utils/propTypes";
import { defineComponent, ref } from "vue";
const props = {
// front paper text

2
src/components/ReFlop/src/index.vue
View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import { ref, unref, nextTick, onUnmounted } from "vue";
import flippers from "./filpper";
import { ref, unref, nextTick, onUnmounted } from "vue";
const timer = ref(null);
const flipObjs = ref([]);

37
src/components/ReFlowChart/src/Control.vue
View File

@@ -105,27 +105,24 @@ onMounted(() => {
@mouseenter.prevent="onEnter(key)"
@mouseleave.prevent="focusIndex = -1"
>
<el-tooltip
:content="item.text"
:visible="focusIndex === key"
placement="right"
<button
:ref="'controlButton' + key"
v-tippy="{
content: item.text
}"
:disabled="item.disabled"
:style="{
cursor: item.disabled === false ? 'pointer' : 'not-allowed',
color: item.disabled === false ? '' : '#00000040',
background: 'transparent'
}"
@click="onControl(item, key)"
>
<button
:ref="'controlButton' + key"
:disabled="item.disabled"
:style="{
cursor: item.disabled === false ? 'pointer' : 'not-allowed',
color: item.disabled === false ? '' : '#00000040',
background: 'transparent'
}"
@click="onControl(item, key)"
>
<span
:class="'iconfont ' + item.icon"
:style="{ fontSize: `${item.size}px` }"
/>
</button>
</el-tooltip>
<span
:class="'iconfont ' + item.icon"
:style="{ fontSize: `${item.size}px` }"
/>
</button>
</li>
</ul>
</div>

2
src/components/ReQrcode/src/index.tsx
View File

@@ -1,10 +1,10 @@
import {
type PropType,
ref,
unref,
watch,
nextTick,
computed,
type PropType,
defineComponent
} from "vue";
import "./index.scss";

10
src/components/ReSeamlessScroll/src/index.vue
View File

@@ -1,6 +1,12 @@
<script setup lang="ts">
import { computed, ref, unref, nextTick } from "vue";
import type { CSSProperties, PropType } from "vue";
import {
type PropType,
type CSSProperties,
ref,
unref,
nextTick,
computed
} from "vue";
import {
tryOnMounted,
tryOnUnmounted,

8
src/components/ReSelector/src/index.tsx
View File

@@ -1,13 +1,13 @@
import "./index.css";
import {
defineComponent,
unref,
computed,
nextTick,
onBeforeMount,
getCurrentInstance,
unref
defineComponent,
getCurrentInstance
} from "vue";
import { addClass, removeClass, toggleClass } from "@pureadmin/utils";
import "./index.css";
const stayClass = "stay"; //鼠标点击
const activeClass = "hs-on"; //鼠标移动上去

4
src/components/ReSplitPane/index.tsx
View File

@@ -1,6 +1,6 @@
import { defineComponent, ref, unref, computed, type PropType } from "vue";
import resizer from "./resizer";
import "./index.css";
import resizer from "./resizer";
import { type PropType, defineComponent, ref, unref, computed } from "vue";
export interface ContextProps {
minPercent: number;

2
src/components/ReSplitPane/resizer.tsx
View File

@@ -1,5 +1,5 @@
import { computed, unref, defineComponent } from "vue";
import "./resizer.css";
import { computed, unref, defineComponent } from "vue";
export default defineComponent({
name: "Resizer",

2
src/components/ReText/src/index.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts" setup>
import { h, onMounted, ref, useSlots } from "vue";
import { useTippy, type TippyOptions } from "vue-tippy";
import { type TippyOptions, useTippy } from "vue-tippy";
const props = defineProps({
// 行数

5
src/components/ReTreeLine/index.ts
View File

@@ -1,8 +1,7 @@
// 参考https://www.npmjs.com/package/element-tree-line (主要是替换需要通过函数传参的方式去注册组件，并添加更好的类型支持，并移除this.$scopedSlots，在3.x中,将所有this.$scopedSlots替换为this.$slots)
import { isFunction } from "@pureadmin/utils";
import { h, defineComponent } from "vue";
import type { PropType } from "vue";
import "./index.scss";
import { isFunction } from "@pureadmin/utils";
import { type PropType, h, defineComponent } from "vue";
import type {
TreeNode,
TreeData,

2
src/components/ReTypeit/src/index.tsx
View File

@@ -1,6 +1,6 @@
import type { El } from "typeit/dist/types";
import TypeIt, { type Options as TypeItOptions } from "typeit";
import { ref, defineComponent, onMounted, type PropType } from "vue";
import { type PropType, ref, defineComponent, onMounted } from "vue";
// 打字机效果组件（配置项详情请查阅 https://www.typeitjs.com/docs/vanilla/usage#options）
export default defineComponent({

2
src/config/index.ts
View File

@@ -1,5 +1,5 @@
import type { App } from "vue";
import axios from "axios";
import type { App } from "vue";
let config: object = {};
const { VITE_PUBLIC_PATH } = import.meta.env;

6
src/directives/optimize/index.ts
View File

@@ -1,9 +1,9 @@
import {
isFunction,
isObject,
isArray,
throttle,
debounce,
throttle
isObject,
isFunction
} from "@pureadmin/utils";
import { useEventListener } from "@vueuse/core";
import type { Directive, DirectiveBinding } from "vue";

4
src/layout/components/navbar.vue
View File

@@ -96,14 +96,14 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
:icon="LogoutCircleRLine"
style="margin: 5px"
/>
{{ t("buttons.hsLoginOut") }}
{{ t("buttons.pureLoginOut") }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<span
class="set-icon navbar-bg-hover"
:title="t('buttons.hssystemSet')"
:title="t('buttons.pureSystemSet')"
@click="onPanel"
>
<IconifyIconOffline :icon="Setting" />

4
src/layout/components/sidebar/horizontal.vue
View File

@@ -113,14 +113,14 @@ nextTick(() => {
:icon="LogoutCircleRLine"
style="margin: 5px"
/>
{{ t("buttons.hsLoginOut") }}
{{ t("buttons.pureLoginOut") }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<span
class="set-icon navbar-bg-hover"
:title="t('buttons.hssystemSet')"
:title="t('buttons.pureSystemSet')"
@click="onPanel"
>
<IconifyIconOffline :icon="Setting" />

4
src/layout/components/sidebar/mixNav.vue
View File

@@ -146,14 +146,14 @@ watch(
:icon="LogoutCircleRLine"
style="margin: 5px"
/>
{{ t("buttons.hsLoginOut") }}
{{ t("buttons.pureLoginOut") }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<span
class="set-icon navbar-bg-hover"
:title="t('buttons.hssystemSet')"
:title="t('buttons.pureSystemSet')"
@click="onPanel"
>
<IconifyIconOffline :icon="Setting" />

4
src/layout/components/tag/index.vue
View File

@@ -333,10 +333,10 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
setTimeout(() => {
if (pureSetting.hiddenSideBar) {
tagsViews[6].icon = ExitFullscreen;
tagsViews[6].text = $t("buttons.hscontentExitFullScreen");
tagsViews[6].text = $t("buttons.pureContentExitFullScreen");
} else {
tagsViews[6].icon = Fullscreen;
tagsViews[6].text = $t("buttons.hscontentFullScreen");
tagsViews[6].text = $t("buttons.pureContentFullScreen");
}
}, 100);
break;

2
src/layout/frameView.vue
View File

@@ -71,7 +71,7 @@ onMounted(() => {
<div
v-loading="loading"
class="frame"
:element-loading-text="t('status.hsLoad')"
:element-loading-text="t('status.pureLoad')"
>
<iframe ref="frameRef" :src="frameSrc" class="frame-iframe" />
</div>

14
src/layout/hooks/useTag.ts
View File

@@ -64,49 +64,49 @@ export function useTags() {
const tagsViews = reactive<Array<tagsViewsType>>([
{
icon: RefreshRight,
text: $t("buttons.hsreload"),
text: $t("buttons.pureReload"),
divided: false,
disabled: false,
show: true
},
{
icon: Close,
text: $t("buttons.hscloseCurrentTab"),
text: $t("buttons.pureCloseCurrentTab"),
divided: false,
disabled: multiTags.value.length > 1 ? false : true,
show: true
},
{
icon: CloseLeftTags,
text: $t("buttons.hscloseLeftTabs"),
text: $t("buttons.pureCloseLeftTabs"),
divided: true,
disabled: multiTags.value.length > 1 ? false : true,
show: true
},
{
icon: CloseRightTags,
text: $t("buttons.hscloseRightTabs"),
text: $t("buttons.pureCloseRightTabs"),
divided: false,
disabled: multiTags.value.length > 1 ? false : true,
show: true
},
{
icon: CloseOtherTags,
text: $t("buttons.hscloseOtherTabs"),
text: $t("buttons.pureCloseOtherTabs"),
divided: true,
disabled: multiTags.value.length > 2 ? false : true,
show: true
},
{
icon: CloseAllTags,
text: $t("buttons.hscloseAllTabs"),
text: $t("buttons.pureCloseAllTabs"),
divided: false,
disabled: multiTags.value.length > 1 ? false : true,
show: true
},
{
icon: Fullscreen,
text: $t("buttons.hscontentFullScreen"),
text: $t("buttons.pureContentFullScreen"),
divided: true,
disabled: false,
show: true

2
src/layout/types.ts
View File

@@ -7,7 +7,7 @@ export const routerArrays: Array<RouteConfigs> =
{
path: "/welcome",
meta: {
title: "menus.hshome",
title: "menus.pureHome",
icon: "ep:home-filled"
}
}

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

@@ -6,16 +6,16 @@ export default {
redirect: "/able/watermark",
meta: {
icon: "ri:ubuntu-fill",
title: $t("menus.hsAble"),
title: $t("menus.pureAble"),
rank: able
},
children: [
{
path: "/components/mqtt-client",
path: "/able/mqtt-client",
name: "MqttClient",
component: () => import("@/views/able/mqtt-client.vue"),
meta: {
title: $t("menus.hsMqtt"),
title: $t("menus.pureMqtt"),
extraIcon: "IF-pure-iconfont-new svg"
}
},
@@ -24,7 +24,7 @@ export default {
name: "Verify",
component: () => import("@/views/able/verify.vue"),
meta: {
title: $t("menus.hsVerify")
title: $t("menus.pureVerify")
}
},
{
@@ -32,7 +32,7 @@ export default {
name: "WaterMark",
component: () => import("@/views/able/watermark.vue"),
meta: {
title: $t("menus.hsWatermark")
title: $t("menus.pureWatermark")
}
},
{
@@ -40,7 +40,7 @@ export default {
name: "Print",
component: () => import("@/views/able/print/index.vue"),
meta: {
title: $t("menus.hsPrint")
title: $t("menus.purePrint")
}
},
{
@@ -48,7 +48,7 @@ export default {
name: "Download",
component: () => import("@/views/able/download.vue"),
meta: {
title: $t("menus.hsDownload")
title: $t("menus.pureDownload")
}
},
{
@@ -56,7 +56,7 @@ export default {
name: "Excel",
component: () => import("@/views/able/excel.vue"),
meta: {
title: $t("menus.hsExcel")
title: $t("menus.pureExcel")
}
},
{
@@ -64,7 +64,7 @@ export default {
name: "Ripple",
component: () => import("@/views/able/ripple.vue"),
meta: {
title: $t("menus.hsRipple")
title: $t("menus.pureRipple")
}
},
{
@@ -72,7 +72,7 @@ export default {
name: "Debounce",
component: () => import("@/views/able/debounce.vue"),
meta: {
title: $t("menus.hsDebounce")
title: $t("menus.pureDebounce")
}
},
{
@@ -80,7 +80,7 @@ export default {
name: "Directives",
component: () => import("@/views/able/directives.vue"),
meta: {
title: $t("menus.hsOptimize")
title: $t("menus.pureOptimize")
}
},
{
@@ -88,7 +88,7 @@ export default {
name: "Draggable",
component: () => import("@/views/able/draggable.vue"),
meta: {
title: $t("menus.hsdraggable"),
title: $t("menus.pureDraggable"),
transition: {
enterTransition: "animate__zoomIn",
leaveTransition: "animate__zoomOut"
@@ -100,7 +100,7 @@ export default {
name: "Word",
component: () => import("@/views/able/word.vue"),
meta: {
title: $t("menus.hsWord")
title: $t("menus.pureWord")
}
},
{
@@ -108,7 +108,7 @@ export default {
name: "Excels",
component: () => import("@/views/able/excels.vue"),
meta: {
title: $t("menus.hsExcels")
title: $t("menus.pureExcels")
}
},
{
@@ -116,7 +116,7 @@ export default {
name: "Pdf",
component: () => import("@/views/able/pdf.vue"),
meta: {
title: $t("menus.hsPdf")
title: $t("menus.purePdf")
}
},
{
@@ -124,7 +124,7 @@ export default {
name: "BarCode",
component: () => import("@/views/able/barcode.vue"),
meta: {
title: $t("menus.hsBarcode")
title: $t("menus.pureBarcode")
}
},
{
@@ -132,7 +132,7 @@ export default {
name: "QrCode",
component: () => import("@/views/able/qrcode.vue"),
meta: {
title: $t("menus.hsQrcode")
title: $t("menus.pureQrcode")
}
},
{
@@ -140,7 +140,7 @@ export default {
name: "MapPage",
component: () => import("@/views/able/map.vue"),
meta: {
title: $t("menus.hsmap"),
title: $t("menus.pureMap"),
keepAlive: true,
transition: {
name: "fade"
@@ -152,7 +152,7 @@ export default {
name: "Wavesurfer",
component: () => import("@/views/able/wavesurfer/index.vue"),
meta: {
title: $t("menus.hsWavesurfer")
title: $t("menus.pureWavesurfer")
}
},
{
@@ -160,7 +160,7 @@ export default {
name: "VideoPage",
component: () => import("@/views/able/video.vue"),
meta: {
title: $t("menus.hsvideo")
title: $t("menus.pureVideo")
}
},
{
@@ -168,7 +168,7 @@ export default {
name: "VideoFrame",
component: () => import("@/views/able/video-frame/index.vue"),
meta: {
title: $t("menus.hsVideoFrame")
title: $t("menus.pureVideoFrame")
}
},
{
@@ -176,7 +176,7 @@ export default {
name: "Danmaku",
component: () => import("@/views/able/danmaku/index.vue"),
meta: {
title: $t("menus.hsdanmaku")
title: $t("menus.pureDanmaku")
}
},
{
@@ -184,7 +184,7 @@ export default {
name: "InfiniteScroll",
component: () => import("@/views/able/infinite-scroll.vue"),
meta: {
title: $t("menus.hsInfiniteScroll")
title: $t("menus.pureInfiniteScroll")
}
},
{
@@ -192,7 +192,7 @@ export default {
name: "MenuTree",
component: () => import("@/views/able/menu-tree.vue"),
meta: {
title: $t("menus.hsMenuTree")
title: $t("menus.pureMenuTree")
}
},
{
@@ -200,7 +200,7 @@ export default {
name: "LineTree",
component: () => import("@/views/able/line-tree.vue"),
meta: {
title: $t("menus.hsLineTree")
title: $t("menus.pureLineTree")
}
},
{
@@ -208,7 +208,7 @@ export default {
name: "Typeit",
component: () => import("@/views/able/typeit.vue"),
meta: {
title: $t("menus.hstypeit")
title: $t("menus.pureTypeit")
}
},
{
@@ -216,7 +216,7 @@ export default {
name: "Sensitive",
component: () => import("@/views/able/sensitive.vue"),
meta: {
title: $t("menus.hsSensitive")
title: $t("menus.pureSensitive")
}
},
{
@@ -224,7 +224,7 @@ export default {
name: "Pinyin",
component: () => import("@/views/able/pinyin.vue"),
meta: {
title: $t("menus.hsPinyin")
title: $t("menus.purePinyin")
}
}
]

4
src/router/modules/about.ts
View File

@@ -6,7 +6,7 @@ export default {
redirect: "/about/index",
meta: {
icon: "ri:file-info-line",
title: $t("menus.hsAbout"),
title: $t("menus.pureAbout"),
rank: about
},
children: [
@@ -15,7 +15,7 @@ export default {
name: "About",
component: () => import("@/views/about/index.vue"),
meta: {
title: $t("menus.hsAbout")
title: $t("menus.pureAbout")
}
}
]

4
src/router/modules/board.ts
View File

@@ -7,7 +7,7 @@ export default {
redirect: "/board/index",
meta: {
icon: "ri:artboard-line",
title: $t("menus.hsboard"),
title: $t("menus.pureBoard"),
rank: board
},
children: [
@@ -16,7 +16,7 @@ export default {
name: "FrameBoard",
component: IFrame,
meta: {
title: $t("menus.hsboard"),
title: $t("menus.pureBoard"),
frameSrc: "https://songlh.top/paint-board/"
}
}

64
src/router/modules/components.ts
View File

@@ -6,7 +6,7 @@ export default {
redirect: "/components/dialog",
meta: {
icon: "ep:menu",
title: $t("menus.hscomponents"),
title: $t("menus.pureComponents"),
rank: components
},
children: [
@@ -15,7 +15,7 @@ export default {
name: "DialogPage",
component: () => import("@/views/components/dialog/index.vue"),
meta: {
title: $t("menus.hsdialog")
title: $t("menus.pureDialog")
}
},
{
@@ -23,7 +23,7 @@ export default {
name: "Message",
component: () => import("@/views/components/message.vue"),
meta: {
title: $t("menus.hsmessage")
title: $t("menus.pureMessage")
}
},
{
@@ -31,7 +31,7 @@ export default {
name: "PureUpload",
component: () => import("@/views/components/upload/index.vue"),
meta: {
title: $t("menus.hsUpload")
title: $t("menus.pureUpload")
}
},
{
@@ -39,7 +39,7 @@ export default {
name: "CheckCard",
component: () => import("@/views/components/check-card.vue"),
meta: {
title: $t("menus.hsCheckCard"),
title: $t("menus.pureCheckCard"),
extraIcon: "IF-pure-iconfont-new svg"
}
},
@@ -48,7 +48,7 @@ export default {
name: "DatePicker",
component: () => import("@/views/components/date-picker.vue"),
meta: {
title: $t("menus.hsDatePicker")
title: $t("menus.pureDatePicker")
}
},
{
@@ -56,7 +56,7 @@ export default {
name: "DateTimePicker",
component: () => import("@/views/components/datetime-picker.vue"),
meta: {
title: $t("menus.hsDateTimePicker")
title: $t("menus.pureDateTimePicker")
}
},
{
@@ -64,7 +64,7 @@ export default {
name: "TimePicker",
component: () => import("@/views/components/time-picker.vue"),
meta: {
title: $t("menus.hsTimePicker")
title: $t("menus.pureTimePicker")
}
},
{
@@ -72,7 +72,7 @@ export default {
name: "IconSelect",
component: () => import("@/views/components/icon-select.vue"),
meta: {
title: $t("menus.hsIconSelect")
title: $t("menus.pureIconSelect")
}
},
{
@@ -80,7 +80,7 @@ export default {
name: "AnimateCss",
component: () => import("@/views/components/animatecss.vue"),
meta: {
title: $t("menus.hsanimatecss")
title: $t("menus.pureAnimatecss")
}
},
{
@@ -88,7 +88,7 @@ export default {
name: "Cropping",
component: () => import("@/views/components/cropping/index.vue"),
meta: {
title: $t("menus.hscropping")
title: $t("menus.pureCropping")
}
},
{
@@ -96,7 +96,7 @@ export default {
name: "Segmented",
component: () => import("@/views/components/segmented.vue"),
meta: {
title: $t("menus.hssegmented")
title: $t("menus.pureSegmented")
}
},
{
@@ -104,7 +104,7 @@ export default {
name: "PureText",
component: () => import("@/views/components/text.vue"),
meta: {
title: $t("menus.hsText"),
title: $t("menus.pureText"),
extraIcon: "IF-pure-iconfont-new svg"
}
},
@@ -113,7 +113,7 @@ export default {
name: "PureButton",
component: () => import("@/views/components/el-button.vue"),
meta: {
title: $t("menus.hsElButton")
title: $t("menus.pureElButton")
}
},
{
@@ -121,7 +121,7 @@ export default {
name: "CheckButton",
component: () => import("@/views/components/check-button.vue"),
meta: {
title: $t("menus.hsCheckButton"),
title: $t("menus.pureCheckButton"),
extraIcon: "IF-pure-iconfont-new svg"
}
},
@@ -130,7 +130,7 @@ export default {
name: "ButtonPage",
component: () => import("@/views/components/button.vue"),
meta: {
title: $t("menus.hsbutton")
title: $t("menus.pureButton")
}
},
{
@@ -138,7 +138,7 @@ export default {
name: "PureProgress",
component: () => import("@/views/components/progress.vue"),
meta: {
title: $t("menus.hsProgress")
title: $t("menus.pureProgress")
}
},
{
@@ -146,7 +146,7 @@ export default {
name: "PureTag",
component: () => import("@/views/components/tag.vue"),
meta: {
title: $t("menus.hsTag")
title: $t("menus.pureTag")
}
},
{
@@ -154,7 +154,7 @@ export default {
name: "Statistic",
component: () => import("@/views/components/statistic.vue"),
meta: {
title: $t("menus.hsStatistic")
title: $t("menus.pureStatistic")
}
},
{
@@ -162,7 +162,7 @@ export default {
name: "Collapse",
component: () => import("@/views/components/collapse.vue"),
meta: {
title: $t("menus.hsCollapse")
title: $t("menus.pureCollapse")
}
},
{
@@ -170,7 +170,7 @@ export default {
name: "Cascader",
component: () => import("@/views/components/cascader.vue"),
meta: {
title: $t("menus.hsCascader")
title: $t("menus.pureCascader")
}
},
{
@@ -178,7 +178,7 @@ export default {
name: "ColorPicker",
component: () => import("@/views/components/color-picker.vue"),
meta: {
title: $t("menus.hsColorPicker")
title: $t("menus.pureColorPicker")
}
},
{
@@ -186,7 +186,7 @@ export default {
name: "Selector",
component: () => import("@/views/components/selector.vue"),
meta: {
title: $t("menus.hsselector")
title: $t("menus.pureSelector")
}
},
{
@@ -194,7 +194,7 @@ export default {
name: "Waterfall",
component: () => import("@/views/components/waterfall/index.vue"),
meta: {
title: $t("menus.hswaterfall")
title: $t("menus.pureWaterfall")
}
},
{
@@ -202,7 +202,7 @@ export default {
name: "SplitPane",
component: () => import("@/views/components/split-pane.vue"),
meta: {
title: $t("menus.hssplitPane")
title: $t("menus.pureSplitPane")
}
},
{
@@ -210,7 +210,7 @@ export default {
name: "Swiper",
component: () => import("@/views/components/swiper.vue"),
meta: {
title: $t("menus.hsSwiper")
title: $t("menus.pureSwiper")
}
},
{
@@ -218,7 +218,7 @@ export default {
name: "TimeLine",
component: () => import("@/views/components/timeline.vue"),
meta: {
title: $t("menus.hsTimeline")
title: $t("menus.pureTimeline")
}
},
{
@@ -226,7 +226,7 @@ export default {
name: "CountTo",
component: () => import("@/views/components/count-to.vue"),
meta: {
title: $t("menus.hscountTo")
title: $t("menus.pureCountTo")
}
},
{
@@ -234,7 +234,7 @@ export default {
name: "ContextMenu",
component: () => import("@/views/components/contextmenu/index.vue"),
meta: {
title: $t("menus.hscontextmenu")
title: $t("menus.pureContextmenu")
}
},
{
@@ -242,7 +242,7 @@ export default {
name: "JsonEditor",
component: () => import("@/views/components/json-editor.vue"),
meta: {
title: $t("menus.hsjsoneditor")
title: $t("menus.pureJsonEditor")
}
},
{
@@ -250,7 +250,7 @@ export default {
name: "SeamlessScroll",
component: () => import("@/views/components/seamless-scroll.vue"),
meta: {
title: $t("menus.hsseamless")
title: $t("menus.pureSeamless")
}
},
{
@@ -258,7 +258,7 @@ export default {
name: "VirtualList",
component: () => import("@/views/components/virtual-list/index.vue"),
meta: {
title: $t("menus.hsVirtualList")
title: $t("menus.pureVirtualList")
}
}
]

4
src/router/modules/editor.ts
View File

@@ -6,7 +6,7 @@ export default {
redirect: "/editor/index",
meta: {
icon: "ep:edit",
title: $t("menus.hseditor"),
title: $t("menus.pureEditor"),
rank: editor
},
children: [
@@ -15,7 +15,7 @@ export default {
name: "Editor",
component: () => import("@/views/editor/index.vue"),
meta: {
title: $t("menus.hseditor"),
title: $t("menus.pureEditor"),
keepAlive: true
}
}

8
src/router/modules/error.ts
View File

@@ -7,7 +7,7 @@ export default {
meta: {
icon: "ri:information-line",
// showLink: false,
title: $t("menus.hsabnormal"),
title: $t("menus.pureAbnormal"),
rank: error
},
children: [
@@ -16,7 +16,7 @@ export default {
name: "403",
component: () => import("@/views/error/403.vue"),
meta: {
title: $t("menus.hsfourZeroOne")
title: $t("menus.pureFourZeroOne")
}
},
{
@@ -24,7 +24,7 @@ export default {
name: "404",
component: () => import("@/views/error/404.vue"),
meta: {
title: $t("menus.hsfourZeroFour")
title: $t("menus.pureFourZeroFour")
}
},
{
@@ -32,7 +32,7 @@ export default {
name: "500",
component: () => import("@/views/error/500.vue"),
meta: {
title: $t("menus.hsFive")
title: $t("menus.pureFive")
}
}
]

4
src/router/modules/flowchart.ts
View File

@@ -6,7 +6,7 @@ export default {
redirect: "/flow-chart/index",
meta: {
icon: "ep:set-up",
title: $t("menus.hsflowChart"),
title: $t("menus.pureFlowChart"),
rank: flowchart
},
children: [
@@ -15,7 +15,7 @@ export default {
name: "FlowChart",
component: () => import("@/views/flow-chart/index.vue"),
meta: {
title: $t("menus.hsflowChart")
title: $t("menus.pureFlowChart")
}
}
]

4
src/router/modules/form.ts
View File

@@ -6,7 +6,7 @@ export default {
redirect: "/form/index",
meta: {
icon: "ri:edit-box-line",
title: $t("menus.hsSchemaForm"),
title: $t("menus.pureSchemaForm"),
rank: form
},
children: [
@@ -15,7 +15,7 @@ export default {
name: "SchemaForm",
component: () => import("@/views/schema-form/index.vue"),
meta: {
title: $t("menus.hsSchemaForm"),
title: $t("menus.pureSchemaForm"),
extraIcon: "IF-pure-iconfont-new svg"
}
}

4
src/router/modules/formdesign.ts
View File

@@ -7,7 +7,7 @@ export default {
redirect: "/form-design/index",
meta: {
icon: "ri:terminal-window-line",
title: $t("menus.hsFormDesign"),
title: $t("menus.pureFormDesign"),
rank: formdesign
},
children: [
@@ -16,7 +16,7 @@ export default {
name: "FormDesign",
component: IFrame,
meta: {
title: $t("menus.hsFormDesign"),
title: $t("menus.pureFormDesign"),
frameSrc:
"https://haixin-fang.github.io/vue-form-design/playground/index.html",
frameLoading: false

4
src/router/modules/ganttastic.ts
View File

@@ -6,7 +6,7 @@ export default {
redirect: "/ganttastic/index",
meta: {
icon: "ri:bar-chart-horizontal-line",
title: $t("menus.hsGanttastic"),
title: $t("menus.pureGanttastic"),
rank: ganttastic
},
children: [
@@ -15,7 +15,7 @@ export default {
name: "Ganttastic",
component: () => import("@/views/ganttastic/index.vue"),
meta: {
title: $t("menus.hsGanttastic"),
title: $t("menus.pureGanttastic"),
extraIcon: "IF-pure-iconfont-new svg"
}
}

4
src/router/modules/guide.ts
View File

@@ -6,7 +6,7 @@ export default {
redirect: "/guide/index",
meta: {
icon: "ep:guide",
title: $t("menus.hsguide"),
title: $t("menus.pureGuide"),
rank: guide
},
children: [
@@ -15,7 +15,7 @@ export default {
name: "Guide",
component: () => import("@/views/guide/index.vue"),
meta: {
title: $t("menus.hsguide")
title: $t("menus.pureGuide")
}
}
]

4
src/router/modules/home.ts
View File

@@ -10,7 +10,7 @@ export default {
redirect: "/welcome",
meta: {
icon: "ep:home-filled",
title: $t("menus.hshome"),
title: $t("menus.pureHome"),
rank: home
},
children: [
@@ -19,7 +19,7 @@ export default {
name: "Welcome",
component: () => import("@/views/welcome/index.vue"),
meta: {
title: $t("menus.hshome"),
title: $t("menus.pureHome"),
showLink: VITE_HIDE_HOME === "true" ? false : true
}
}

4
src/router/modules/list.ts
View File

@@ -6,7 +6,7 @@ export default {
redirect: "/list/card",
meta: {
icon: "ri:list-check",
title: $t("menus.hsList"),
title: $t("menus.pureList"),
rank: list
},
children: [
@@ -16,7 +16,7 @@ export default {
component: () => import("@/views/list/card/index.vue"),
meta: {
icon: "ri:bank-card-line",
title: $t("menus.hsListCard"),
title: $t("menus.pureListCard"),
showParent: true
}
}

4
src/router/modules/menuoverflow.ts
View File

@@ -5,7 +5,7 @@ export default {
path: "/menuoverflow",
redirect: "/menuoverflow/index",
meta: {
title: $t("menus.hsMenuoverflow"),
title: $t("menus.pureMenuOverflow"),
rank: menuoverflow
},
children: [
@@ -14,7 +14,7 @@ export default {
name: "MenuOverflow",
component: () => import("@/views/menuoverflow/index.vue"),
meta: {
title: $t("menus.hsChildMenuoverflow"),
title: $t("menus.pureChildMenuOverflow"),
showParent: true
}
}

16
src/router/modules/nested.ts
View File

@@ -5,7 +5,7 @@ export default {
path: "/nested",
redirect: "/nested/menu1/menu1-1",
meta: {
title: $t("menus.hsmenus"),
title: $t("menus.pureMenus"),
icon: "ep:histogram",
rank: nested
},
@@ -13,7 +13,7 @@ export default {
{
path: "/nested/menu1",
meta: {
title: $t("menus.hsmenu1"),
title: $t("menus.pureMenu1"),
keepAlive: true
},
redirect: "/nested/menu1/menu1-1",
@@ -23,7 +23,7 @@ export default {
component: () => import("@/views/nested/menu1/menu1-1/index.vue"),
name: "Menu1-1",
meta: {
title: $t("menus.hsmenu1-1"),
title: $t("menus.pureMenu1-1"),
keepAlive: true
}
},
@@ -31,7 +31,7 @@ export default {
path: "/nested/menu1/menu1-2",
redirect: "/nested/menu1/menu1-2/menu1-2-1",
meta: {
title: $t("menus.hsmenu1-2"),
title: $t("menus.pureMenu1-2"),
keepAlive: true
},
children: [
@@ -41,7 +41,7 @@ export default {
import("@/views/nested/menu1/menu1-2/menu1-2-1/index.vue"),
name: "Menu1-2-1",
meta: {
title: $t("menus.hsmenu1-2-1"),
title: $t("menus.pureMenu1-2-1"),
keepAlive: true
}
},
@@ -51,7 +51,7 @@ export default {
import("@/views/nested/menu1/menu1-2/menu1-2-2/index.vue"),
name: "Menu1-2-2",
meta: {
title: $t("menus.hsmenu1-2-2"),
title: $t("menus.pureMenu1-2-2"),
keepAlive: true
}
}
@@ -62,7 +62,7 @@ export default {
component: () => import("@/views/nested/menu1/menu1-3/index.vue"),
name: "Menu1-3",
meta: {
title: $t("menus.hsmenu1-3"),
title: $t("menus.pureMenu1-3"),
keepAlive: true
}
}
@@ -73,7 +73,7 @@ export default {
name: "Menu2",
component: () => import("@/views/nested/menu2/index.vue"),
meta: {
title: $t("menus.hsmenu2"),
title: $t("menus.pureMenu2"),
keepAlive: true
}
}

6
src/router/modules/remaining.ts
View File

@@ -7,7 +7,7 @@ export default [
name: "Login",
component: () => import("@/views/login/index.vue"),
meta: {
title: $t("menus.hslogin"),
title: $t("menus.pureLogin"),
showLink: false,
rank: 101
}
@@ -16,7 +16,7 @@ export default [
path: "/redirect",
component: Layout,
meta: {
title: $t("status.hsLoad"),
title: $t("status.pureLoad"),
showLink: false,
rank: 102
},
@@ -34,7 +34,7 @@ export default [
name: "Empty",
component: () => import("@/views/empty/index.vue"),
meta: {
title: $t("menus.hsempty"),
title: $t("menus.pureEmpty"),
showLink: false,
rank: 103
}

6
src/router/modules/result.ts
View File

@@ -6,7 +6,7 @@ export default {
redirect: "/result/success",
meta: {
icon: "ri:checkbox-circle-line",
title: $t("menus.hsResult"),
title: $t("menus.pureResult"),
rank: result
},
children: [
@@ -15,7 +15,7 @@ export default {
name: "Success",
component: () => import("@/views/result/success.vue"),
meta: {
title: $t("menus.hsSuccess")
title: $t("menus.pureSuccess")
}
},
{
@@ -23,7 +23,7 @@ export default {
name: "Fail",
component: () => import("@/views/result/fail.vue"),
meta: {
title: $t("menus.hsFail")
title: $t("menus.pureFail")
}
}
]

10
src/router/modules/table.ts
View File

@@ -6,7 +6,7 @@ export default {
redirect: "/table/index",
meta: {
icon: "ri:table-line",
title: $t("menus.hstable"),
title: $t("menus.pureTable"),
rank: table
},
children: [
@@ -15,7 +15,7 @@ export default {
name: "PureTable",
component: () => import("@/views/table/index.vue"),
meta: {
title: $t("menus.hsPureTableBase")
title: $t("menus.pureTableBase")
}
},
{
@@ -23,7 +23,7 @@ export default {
name: "PureTableHigh",
component: () => import("@/views/table/high.vue"),
meta: {
title: $t("menus.hsPureTableHigh")
title: $t("menus.pureTableHigh")
}
},
{
@@ -31,7 +31,7 @@ export default {
name: "PureTableEdit",
component: () => import("@/views/table/edit.vue"),
meta: {
title: $t("menus.hsPureTableEdit"),
title: $t("menus.pureTableEdit"),
extraIcon: "IF-pure-iconfont-new svg"
}
},
@@ -40,7 +40,7 @@ export default {
name: "VxeTable",
component: () => import("@/views/table/virtual.vue"),
meta: {
title: $t("menus.hsVxeTable"),
title: $t("menus.pureVxeTable"),
extraIcon: "IF-pure-iconfont-new svg"
}
}

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

@@ -44,6 +44,13 @@ const barcodes = [
</el-link>
生成）
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/barcode.vue"
target="_blank"
>
代码位置 src/views/able/barcode.vue
</el-link>
</template>
<el-row :gutter="12">
<template v-for="(item, index) in barcodes" :key="index">

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

@@ -116,6 +116,13 @@ function addDanmu() {
</el-link>
</span>
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/danmaku"
target="_blank"
>
代码位置 src/views/able/danmaku
</el-link>
</template>
<div class="flex gap-5">
<vue-danmaku

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

@@ -19,7 +19,14 @@ const throttleClick = throttle(handle);
<div>
<el-card class="mb-5" shadow="never">
<template #header>
<div class="font-medium">防抖：debounce</div>
<p class="font-medium">防抖：debounce</p>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/debounce.vue"
target="_blank"
>
代码位置 src/views/able/debounce.vue
</el-link>
</template>
<div class="mb-5">
所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n

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

@@ -56,7 +56,14 @@ function onReset() {
<el-card shadow="never">
<template #header>
<div class="card-header">
<span class="font-medium">自定义防抖、截流、文本复制、长按指令</span>
<p class="font-medium">自定义防抖、截流、文本复制、长按指令</p>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/directives.vue"
target="_blank"
>
代码位置 src/views/able/directives.vue
</el-link>
</div>
</template>
<div class="mb-2">

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

@@ -28,7 +28,14 @@ function down() {
<template>
<el-card shadow="never">
<template #header>
<span class="font-medium">文件下载功能</span>
<p class="font-medium">文件下载功能</p>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/download.vue"
target="_blank"
>
代码位置 src/views/able/download.vue
</el-link>
</template>
<div class="flex flex-wrap">
<el-button

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

@@ -68,6 +68,13 @@ onMounted(() => {
</el-link>
</span>
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/draggable.vue"
target="_blank"
>
代码位置 src/views/able/draggable.vue
</el-link>
</template>
<div class="drag-container">
<!-- grid列表拖拽 -->

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

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

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

@@ -35,16 +35,21 @@ const load = () => {
<el-card shadow="never">
<template #header>
<div class="font-medium">
表格无限滚动（
<el-link
href="https://github.com/yujinpan/el-table-infinite-scroll"
target="_blank"
style="margin: 0 5px 4px 0; font-size: 16px"
>
github地址
表格无限滚动
</el-link>
）
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/infinite-scroll.vue"
target="_blank"
>
代码位置 src/views/able/infinite-scroll.vue
</el-link>
</template>
<p class="mb-2">{{ isBottom ? "已加载全部页" : `加载到第 ${page} 页` }}</p>
<el-table

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

@@ -25,9 +25,16 @@ const dataProps = {
<el-card shadow="never">
<template #header>
<div class="card-header">
<span class="font-medium">
扩展elemenet-plus的树形组件包括虚拟树组件，支持连接线
</span>
<p class="font-medium">
扩展 Elemenet Plus 的树形组件包括虚拟树组件，支持连接线
</p>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/line-tree.vue"
target="_blank"
>
代码位置 src/views/able/line-tree.vue
</el-link>
</div>
</template>

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

@@ -47,7 +47,7 @@ const filterMethod = (query: string, node: treeNode) => {
<template #header>
<div class="card-header">
<span class="font-medium">
菜单树结构（采用element-plus的
菜单树结构（采用 Element Plus 的
<el-link
href="https://element-plus.gitee.io/zh-CN/component/tree-v2.html"
target="_blank"
@@ -59,6 +59,13 @@ const filterMethod = (query: string, node: treeNode) => {
组件并支持国际化）
</span>
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/menu-tree.vue"
target="_blank"
>
代码位置 src/views/able/menu-tree.vue
</el-link>
</template>
<el-input
v-model="query"

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

@@ -190,203 +190,211 @@ onUnmounted(() => {
<template>
<el-card shadow="never" :body-style="{ padding: '20px' }">
<template #header>
基于
<div>
基于
<el-link
type="primary"
:underline="false"
href="https://github.com/mqttjs/MQTT.js"
target="_blank"
>
MQTT.js
</el-link>
和 免费的公共MQTT代理
<el-link
type="primary"
:underline="false"
href="broker.emqx.io"
target="_blank"
>
EMQX
</el-link>
实现的一套 MQTT 客户端
</div>
<el-link
type="primary"
:underline="false"
href="https://github.com/mqttjs/MQTT.js"
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/mqtt-client.vue"
target="_blank"
>
MQTT.js
代码位置 src/views/able/mqtt-client.vue
</el-link>
和 免费的公共MQTT代理
<el-link
type="primary"
:underline="false"
href="broker.emqx.io"
target="_blank"
>
EMQX
</el-link>
实现的一套 MQTT 客户端。
</template>
<template #default>
<el-card shadow="never">
<h1>设置</h1>
<el-form label-position="top" :model="connection">
<el-row :gutter="20">
<el-col :span="8">
<el-form-item prop="protocol" label="协议">
<el-select
v-model="connection.protocol"
@change="handleProtocolChange"
>
<el-option label="ws://" value="ws" />
<el-option label="wss://" value="wss" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item prop="host" label="主机">
<el-input v-model="connection.host" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item prop="port" label="端口">
<el-input
v-model.number="connection.port"
type="number"
placeholder="8083/8084"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item prop="clientId" label="客户端ID">
<el-input v-model="connection.clientId" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item prop="username" label="用户名">
<el-input v-model="connection.username" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item prop="password" label="密码">
<el-input v-model="connection.password" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-button
type="primary"
:disabled="client.connected"
:loading="btnLoadingType === 'connect'"
@click="createConnection"
<el-card shadow="never">
<h1>设置</h1>
<el-form label-position="top" :model="connection">
<el-row :gutter="20">
<el-col :span="8">
<el-form-item prop="protocol" label="协议">
<el-select
v-model="connection.protocol"
@change="handleProtocolChange"
>
{{ client.connected ? "已连接" : "连接" }}
</el-button>
<el-option label="ws://" value="ws" />
<el-option label="wss://" value="wss" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item prop="host" label="主机">
<el-input v-model="connection.host" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item prop="port" label="端口">
<el-input
v-model.number="connection.port"
type="number"
placeholder="8083/8084"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item prop="clientId" label="客户端ID">
<el-input v-model="connection.clientId" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item prop="username" label="用户名">
<el-input v-model="connection.username" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item prop="password" label="密码">
<el-input v-model="connection.password" />
</el-form-item>
</el-col>
<el-button
v-if="client.connected"
type="danger"
:loading="btnLoadingType === 'disconnect'"
@click="destroyConnection"
<el-col :span="24">
<el-button
type="primary"
:disabled="client.connected"
:loading="btnLoadingType === 'connect'"
@click="createConnection"
>
{{ client.connected ? "已连接" : "连接" }}
</el-button>
<el-button
v-if="client.connected"
type="danger"
:loading="btnLoadingType === 'disconnect'"
@click="destroyConnection"
>
断开连接
</el-button>
</el-col>
</el-row>
</el-form>
</el-card>
<el-card shadow="never" class="mt-4">
<h1>订阅</h1>
<el-form label-position="top" :model="subscription">
<el-row :gutter="20" :align="'middle'">
<el-col :span="8">
<el-form-item prop="topic" label="主题">
<el-input
v-model="subscription.topic"
:disabled="subscribedSuccess"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item prop="qos" label="通信质量">
<el-select
v-model="subscription.qos"
:disabled="subscribedSuccess"
>
断开连接
</el-button>
</el-col>
</el-row>
</el-form>
</el-card>
<el-card shadow="never" class="mt-4">
<h1>订阅</h1>
<el-form label-position="top" :model="subscription">
<el-row :gutter="20" :align="'middle'">
<el-col :span="8">
<el-form-item prop="topic" label="主题">
<el-input
v-model="subscription.topic"
:disabled="subscribedSuccess"
<el-option
v-for="qos in qosList"
:key="qos"
:label="qos"
:value="qos"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item prop="qos" label="通信质量">
<el-select
v-model="subscription.qos"
:disabled="subscribedSuccess"
>
<el-option
v-for="qos in qosList"
:key="qos"
:label="qos"
:value="qos"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col>
<el-button
type="primary"
class="sub-btn"
:loading="btnLoadingType === 'subscribe'"
:disabled="!client.connected || subscribedSuccess"
@click="doSubscribe"
>
{{ subscribedSuccess ? "已订阅" : "订阅" }}
</el-button>
<el-button
v-if="subscribedSuccess"
type="primary"
class="sub-btn"
:loading="btnLoadingType === 'unsubscribe'"
:disabled="!client.connected"
@click="doUnSubscribe"
>
取消订阅
</el-button>
</el-col>
</el-row>
</el-form>
</el-card>
<el-card shadow="never" class="mt-4">
<h1>发布</h1>
<el-form label-position="top" :model="publish">
<el-row :gutter="20">
<el-col :span="8">
<el-form-item prop="topic">
<template #label>
<span>主题</span>
<el-text type="info" size="small">
可将订阅主题设置为topic/browser，测试MQTT的自发自收。
</el-text>
</template>
<el-input v-model="publish.topic" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item prop="payload" label="有效载荷">
<el-input v-model="publish.payload" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item prop="qos" label="通信质量">
<el-select v-model="publish.qos">
<el-option
v-for="qos in qosList"
:key="qos"
:label="qos"
:value="qos"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-col :span="24">
<el-button
type="primary"
:loading="btnLoadingType === 'publish'"
:disabled="!client.connected"
@click="doPublish"
>
发布
</el-button>
</el-col>
</el-card>
<el-card shadow="never" class="mt-4">
<h1>接收</h1>
<el-col :span="24">
<el-input
v-model="receivedMessages"
type="textarea"
:rows="3"
readonly
/>
</el-col>
</el-card>
</template>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col>
<el-button
type="primary"
class="sub-btn"
:loading="btnLoadingType === 'subscribe'"
:disabled="!client.connected || subscribedSuccess"
@click="doSubscribe"
>
{{ subscribedSuccess ? "已订阅" : "订阅" }}
</el-button>
<el-button
v-if="subscribedSuccess"
type="primary"
class="sub-btn"
:loading="btnLoadingType === 'unsubscribe'"
:disabled="!client.connected"
@click="doUnSubscribe"
>
取消订阅
</el-button>
</el-col>
</el-row>
</el-form>
</el-card>
<el-card shadow="never" class="mt-4">
<h1>发布</h1>
<el-form label-position="top" :model="publish">
<el-row :gutter="20">
<el-col :span="8">
<el-form-item prop="topic">
<template #label>
<span>主题</span>
<el-text type="info" size="small">
可将订阅主题设置为topic/browser，测试MQTT的自发自收。
</el-text>
</template>
<el-input v-model="publish.topic" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item prop="payload" label="有效载荷">
<el-input v-model="publish.payload" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item prop="qos" label="通信质量">
<el-select v-model="publish.qos">
<el-option
v-for="qos in qosList"
:key="qos"
:label="qos"
:value="qos"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-col :span="24">
<el-button
type="primary"
:loading="btnLoadingType === 'publish'"
:disabled="!client.connected"
@click="doPublish"
>
发布
</el-button>
</el-col>
</el-card>
<el-card shadow="never" class="mt-4">
<h1>接收</h1>
<el-col :span="24">
<el-input
v-model="receivedMessages"
type="textarea"
:rows="3"
readonly
/>
</el-col>
</el-card>
</el-card>
</template>

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

@@ -38,21 +38,26 @@ const onPrint = () => {
<el-card shadow="never">
<template #header>
<div class="font-medium">
PDF预览（
<el-link
href="https://github.com/hrynko/vue-pdf-embed"
target="_blank"
style="margin: 0 5px 4px 0; font-size: 16px"
>
github地址
PDF预览
</el-link>
）
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/pdf.vue"
target="_blank"
>
代码位置 src/views/able/pdf.vue
</el-link>
</template>
<div
v-loading="loading"
class="h-[calc(100vh-239px)]"
:element-loading-text="t('status.hsLoad')"
class="h-[calc(100vh-295px)]"
:element-loading-text="t('status.pureLoad')"
>
<div class="flex justify-between items-center h-9">
<div v-if="showAllPages" class="font-medium ml-1.25 text-xl">
@@ -73,28 +78,28 @@ const onPrint = () => {
<el-checkbox v-model="showAllPages" @change="showAllPagesChange">
显示所有页面
</el-checkbox>
<el-tooltip
effect="dark"
:content="`翻转（当前角度${rotations[currentRotation]}度）`"
placement="top"
>
<IconifyIconOnline
icon="ic:baseline-rotate-90-degrees-ccw"
class="cursor-pointer outline-transparent"
@click="
currentRotation === 3
? (currentRotation = 0)
: (currentRotation += 1)
"
/>
</el-tooltip>
<el-tooltip effect="dark" content="打印" placement="top">
<IconifyIconOnline
icon="ri:printer-line"
class="cursor-pointer outline-transparent"
@click="onPrint"
/>
</el-tooltip>
<IconifyIconOnline
v-tippy="{
maxWidth: 'none',
content: `翻转（当前角度${rotations[currentRotation]}度）`
}"
icon="ic:baseline-rotate-90-degrees-ccw"
class="cursor-pointer outline-transparent"
@click="
currentRotation === 3
? (currentRotation = 0)
: (currentRotation += 1)
"
/>
<IconifyIconOnline
v-tippy="{
maxWidth: 'none',
content: '打印'
}"
icon="ri:printer-line"
class="cursor-pointer outline-transparent"
@click="onPrint"
/>
</div>
</div>
<el-scrollbar>

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

@@ -10,7 +10,14 @@ defineOptions({
<el-card shadow="never">
<template #header>
<div class="card-header">
<span class="font-medium">汉语拼音</span>
<p class="font-medium">汉语拼音</p>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/pinyin.vue"
target="_blank"
>
代码位置 src/views/able/pinyin.vue
</el-link>
</div>
</template>
<p v-html="html('带 音 调')" />

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

@@ -81,25 +81,30 @@ const tableData: User[] = [
<template #header>
<div class="card-header">
<span class="font-medium">打印功能（报表、图表、图片）</span>
<div class="flex">
<el-select
v-model="value"
class="!w-[100px] mr-2"
placeholder="Select"
size="small"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-button size="small" type="primary" @click="onPrint">
打印
</el-button>
</div>
<el-select
v-model="value"
class="!w-[100px] mr-2"
placeholder="Select"
size="small"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-button size="small" type="primary" @click="onPrint">
打印
</el-button>
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/print"
target="_blank"
>
代码位置 src/views/able/print
</el-link>
</template>
<el-row :gutter="24">
<el-col
@@ -196,10 +201,4 @@ const tableData: User[] = [
:deep(.el-table__row.success-row) {
--el-table-tr-bg-color: var(--el-color-success-light-9);
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
}
</style>

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

@@ -36,6 +36,13 @@ const disabledClick = () => {
</el-link>
生成）
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/qrcode.vue"
target="_blank"
>
代码位置 src/views/able/qrcode.vue
</el-link>
</template>
<el-row :gutter="20" justify="space-between">
<el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">

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

@@ -7,7 +7,14 @@ defineOptions({
<template>
<el-card shadow="never">
<template #header>
<div class="font-medium">波纹(Ripple)</div>
<p class="font-medium">波纹(Ripple)</p>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/ripple.vue"
target="_blank"
>
代码位置 src/views/able/ripple.vue
</el-link>
</template>
<div class="mb-5">组件中的波纹</div>
<el-alert

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

@@ -21,7 +21,14 @@ function onInput() {
<el-card shadow="never">
<template #header>
<div class="card-header">
<span class="font-medium">敏感词过滤</span>
<p class="font-medium">敏感词过滤</p>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/sensitive.vue"
target="_blank"
>
代码位置 src/views/able/sensitive.vue
</el-link>
</div>
</template>
<div class="flex flex-wrap gap-2 my-2">

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

@@ -14,7 +14,14 @@ const options: TypeItOptions = {
<el-card shadow="never">
<template #header>
<div class="card-header">
<span class="font-medium"> 打字机组件 </span>
<p class="font-medium">打字机组件</p>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/typeit.vue"
target="_blank"
>
代码位置 src/views/able/typeit.vue
</el-link>
</div>
</template>
<TypeIt :options="options" />

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

@@ -17,16 +17,21 @@ function onFail() {
<el-card shadow="never">
<template #header>
<div class="font-medium">
拼图人机验证、右滑拼图验证（
<el-link
href="https://github.com/javaLuo/vue-puzzle-vcode/tree/vue3"
target="_blank"
style="margin: 0 5px 4px 0; font-size: 16px"
>
github地址
拼图人机验证、右滑拼图验证
</el-link>
）
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/verify.vue"
target="_blank"
>
代码位置 src/views/able/verify.vue
</el-link>
</template>
<div class="bg-[rgba(15,23,42,0.2)] p-6 w-[360px]">
<Vcode :show="isShow" type="inside" @fail="onFail" @success="onSuccess" />

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

@@ -134,6 +134,13 @@ onBeforeUnmount(() => {
工具，可以在浏览器内进行视频和音频录制、转换和流式传输等，不过通过一些实践，对于时长较长的视频性能还是不太行，不过用于时长较短的短视频还是可以上生产的
</p>
</span>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/video-frame"
target="_blank"
>
代码位置 src/views/able/video-frame
</el-link>
</div>
</template>
<div class="flex flex-wrap">

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

@@ -48,6 +48,13 @@ onMounted(() => {
</el-link>
</span>
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/video.vue"
target="_blank"
>
代码位置 src/views/able/video.vue
</el-link>
</template>
<div id="mse" />
</el-card>

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

@@ -36,16 +36,22 @@ onBeforeUnmount(() => {
<template #header>
<div class="card-header">
<span class="font-medium">
页面水印
<el-link
href="https://pure-admin-utils.netlify.app/hooks/useWatermark/useWatermark"
target="_blank"
style="margin: 0 5px 4px 0; font-size: 16px"
>
（查看更详细的使用文档）
页面水印
</el-link>
</span>
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/watermark.vue"
target="_blank"
>
代码位置 src/views/able/watermark.vue
</el-link>
</template>
<el-space wrap class="!mb-2">
<span> 请输入要创建水印的值：</span>
@@ -120,9 +126,7 @@ onBeforeUnmount(() => {
<el-button plain @click="clear">清除整页水印</el-button>
</el-space>
<el-divider />
<div ref="local" class="w-1/2 h-[200px] border border-sky-500" />
<div ref="local" class="w-1/2 h-[200px] border border-sky-500 mt-4" />
<el-space wrap class="mt-6">
<el-button
@@ -190,8 +194,9 @@ onBeforeUnmount(() => {
<el-button plain @click="clearLocal">清除局部水印</el-button>
</el-space>
<el-divider />
<div ref="preventLocal" class="w-1/2 h-[200px] border border-indigo-500" />
<div
ref="preventLocal"
class="w-1/2 h-[200px] border border-indigo-500 mt-4"
/>
</el-card>
</template>

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

@@ -93,6 +93,13 @@ onBeforeUnmount(() => {
</span>
</span>
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/able/wavesurfer"
target="_blank"
>
代码位置 src/views/able/wavesurfer
</el-link>
</template>
<div
v-loading="loading"

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

@@ -28,6 +28,13 @@ watch(animate, () => {
选择器
</span>
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/animatecss.vue"
target="_blank"
>
代码位置 src/views/components/animatecss.vue
</el-link>
</template>
<ReAnimateSelector v-model="animate" class="!w-[200px]" />
</el-card>

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

@@ -16,6 +16,13 @@ const url = ref(`${VITE_PUBLIC_PATH}html/button.html`);
<div class="card-header">
<span class="font-medium">通过 iframe 引入按钮页面</span>
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/button.vue"
target="_blank"
>
代码位置 src/views/components/button.vue
</el-link>
</template>
<iframe :src="url" frameborder="0" class="iframe w-full h-[60vh]" />
</el-card>

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

@@ -25,7 +25,16 @@ const handleChange = value => {
<template>
<el-card shadow="never">
<template #header> <p class="font-medium">区域级联选择器</p> </template>
<template #header>
<p class="font-medium">区域级联选择器</p>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/cascader.vue"
target="_blank"
>
代码位 src/views/components/cascader.vue
</el-link>
</template>
<el-row :gutter="24">
<el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
<div class="flex flex-col items-center justify-center">

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

@@ -93,7 +93,7 @@ watch(size, val =>
<div class="card-header">
<el-space wrap :size="40">
<span style="font-size: 16px; font-weight: 800"> 可选按钮 </span>
<el-radio-group v-model="size" size="small">
<el-radio-group v-model="size">
<el-radio value="large">大尺寸</el-radio>
<el-radio value="default">默认尺寸</el-radio>
<el-radio value="small">小尺寸</el-radio>
@@ -101,6 +101,13 @@ watch(size, val =>
</el-radio-group>
</el-space>
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/check-button.vue"
target="_blank"
>
代码位置 src/views/components/check-button.vue
</el-link>
</template>
<p class="mb-2">单选（紧凑风格的按钮样式）</p>
<el-radio-group

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

@@ -52,7 +52,7 @@ watch(size, val =>
>
多选卡片组
</el-link>
<el-radio-group v-model="size" size="small">
<el-radio-group v-model="size">
<el-radio value="large">大尺寸</el-radio>
<el-radio value="default">默认尺寸</el-radio>
<el-radio value="small">小尺寸</el-radio>
@@ -60,6 +60,13 @@ watch(size, val =>
</el-radio-group>
</el-space>
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/check-card.vue"
target="_blank"
>
代码位置 src/views/components/check-card.vue
</el-link>
</template>
<p class="mb-2 mt-4">单选</p>

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

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

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

@@ -56,7 +56,7 @@ function onClick() {
>
颜色选择器
</el-link>
<el-radio-group v-model="size" size="small">
<el-radio-group v-model="size">
<el-radio value="large">大尺寸</el-radio>
<el-radio value="default">默认尺寸</el-radio>
<el-radio value="small">小尺寸</el-radio>
@@ -64,6 +64,13 @@ function onClick() {
</el-radio-group>
</el-space>
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/color-picker.vue"
target="_blank"
>
代码位置 src/views/components/color-picker.vue
</el-link>
</template>
<p class="mb-2">不同尺寸、选择透明度、预定义颜色</p>

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

@@ -13,7 +13,14 @@ defineOptions({
<el-card shadow="never">
<template #header>
<div class="card-header">
<span class="font-medium">右键菜单</span>
<p class="font-medium">右键菜单</p>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/contextmenu"
target="_blank"
>
代码位置 src/views/components/contextmenu
</el-link>
</div>
</template>
<el-row :gutter="24">

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

@@ -10,7 +10,14 @@ defineOptions({
<el-card shadow="never">
<template #header>
<div class="card-header">
<span class="font-medium">数字动画</span>
<p class="font-medium">数字动画</p>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/count-to.vue"
target="_blank"
>
代码位置 src/views/components/count-to.vue
</el-link>
</div>
</template>
<ReNormalCountTo

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

@@ -41,6 +41,13 @@ onBeforeUnmount(() => {
进行二次封装（提示：右键下面左侧裁剪区可开启功能菜单）
</span>
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/cropping"
target="_blank"
>
代码位置 src/views/components/cropping
</el-link>
</template>
<div v-loading="!showPopover" element-loading-background="transparent">
<el-popover

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

@@ -143,7 +143,7 @@ watch(size, val =>
>
日期选择器
</el-link>
<el-radio-group v-model="size" size="small">
<el-radio-group v-model="size">
<el-radio value="large">大尺寸</el-radio>
<el-radio value="default">默认尺寸</el-radio>
<el-radio value="small">小尺寸</el-radio>
@@ -151,6 +151,13 @@ watch(size, val =>
</el-radio-group>
</el-space>
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/date-picker.vue"
target="_blank"
>
代码位置 src/views/components/date-picker.vue
</el-link>
</template>
<p class="mb-2">选择某一天</p>

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

@@ -169,7 +169,7 @@ watch(size, val =>
>
日期时间选择器
</el-link>
<el-radio-group v-model="size" size="small">
<el-radio-group v-model="size">
<el-radio value="large">大尺寸</el-radio>
<el-radio value="default">默认尺寸</el-radio>
<el-radio value="small">小尺寸</el-radio>
@@ -177,6 +177,13 @@ watch(size, val =>
</el-radio-group>
</el-space>
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/datetime-picker.vue"
target="_blank"
>
代码位置 src/views/components/datetime-picker.vue
</el-link>
</template>
<p class="mb-2">日期和时间点</p>

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

@@ -447,7 +447,7 @@ function onBeforeSureClick() {
<template #header>
<div class="card-header">
<span class="font-medium">
二次封装 element-plus 的
二次封装 Element Plus 的
<el-link
href="https://element-plus.org/zh-CN/component/dialog.html"
target="_blank"
@@ -465,6 +465,12 @@ function onBeforeSureClick() {
）
</span>
</div>
<el-link
href="https://github.com/pure-admin/vue-pure-admin/tree/main/src/views/components/dialog"
target="_blank"
>
代码位置 src/views/components/dialog
</el-link>
</template>
<el-space wrap>
<el-button @click="onBaseClick"> 基础用法 </el-button>

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

@@ -67,7 +67,7 @@ watch(size, val =>
>
Button 按钮
</el-link>
<el-radio-group v-model="size" size="small">
<el-radio-group v-model="size">
<el-radio value="large">大尺寸</el-radio>
<el-radio value="default">默认尺寸</el-radio>
<el-radio value="small">小尺寸</el-radio>
@@ -75,6 +75,13 @@ watch(size, val =>
</el-radio-group>
</el-space>
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/el-button.vue"
target="_blank"
>
代码位置 src/views/components/el-button.vue
</el-link>
</template>
<p class="mb-2">基础按钮</p>

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

@@ -15,6 +15,13 @@ const icon = ref("ep:add-location");
<div class="card-header">
<span class="font-medium">图标选择器</span>
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/icon-select.vue"
target="_blank"
>
代码位置 src/views/components/icon-select.vue
</el-link>
</template>
<IconSelect v-model="icon" class="w-[200px]" />
</el-card>

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

@@ -97,6 +97,13 @@ watch(
</el-link>
</span>
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/json-editor.vue"
target="_blank"
>
代码位置 src/views/components/json-editor.vue
</el-link>
</template>
<vue-json-pretty
v-model:data="state.data"

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

@@ -16,9 +16,16 @@ defineOptions({
<div class="card-header">
<span class="font-medium"> 消息提示 </span>
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/message.vue"
target="_blank"
>
代码位置 src/views/components/message.vue
</el-link>
</template>
<h4 class="mb-4">element-plus 的消息提示，点击弹出提示信息</h4>
<h4 class="mb-4">Element Plus 的消息提示，点击弹出提示信息</h4>
<el-space wrap>
<el-button

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

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

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

@@ -105,6 +105,13 @@ function changeDirection(val) {
</span>
</el-button>
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/seamless-scroll.vue"
target="_blank"
>
代码位置 src/views/components/seamless-scroll.vue
</el-link>
</template>
<SeamlessScroll
ref="scroll"

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

@@ -204,13 +204,20 @@ watch(size, val => (dynamicSize.value = size.value));
<div class="card-header">
<el-space wrap :size="40">
<span style="font-size: 16px; font-weight: 800"> 分段控制器 </span>
<el-radio-group v-model="size" size="small">
<el-radio-group v-model="size">
<el-radio value="large">大尺寸</el-radio>
<el-radio value="default">默认尺寸</el-radio>
<el-radio value="small">小尺寸</el-radio>
</el-radio-group>
</el-space>
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/segmented.vue"
target="_blank"
>
代码位置 src/views/components/segmented.vue
</el-link>
</template>
<el-scrollbar>
<p class="mb-2">

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

@@ -34,7 +34,14 @@ const selectedVal = ({ left, right }): void => {
shadow="never"
>
<template #header>
<span class="font-medium">{{ item.title }}</span>
<p class="font-medium">{{ item.title }}</p>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/selector.vue"
target="_blank"
>
代码位置 src/views/components/selector.vue
</el-link>
</template>
<Selector
:HsKey="key"

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

@@ -23,7 +23,14 @@ const settingTB: ContextProps = reactive({
<el-card shadow="never">
<template #header>
<div class="card-header">
<span class="font-medium">切割面板</span>
<p class="font-medium">切割面板</p>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/split-pane.vue"
target="_blank"
>
代码位置 src/views/components/split-pane.vue
</el-link>
</div>
</template>
<div class="split-pane">
@@ -57,7 +64,7 @@ const settingTB: ContextProps = reactive({
<style lang="scss" scoped>
.split-pane {
width: 100%;
height: calc(100vh - 260px);
height: calc(100vh - 300px);
font-size: 50px;
text-align: center;
border: 1px solid #e5e6eb;

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

@@ -39,6 +39,13 @@ function reset() {
统计组件
</el-link>
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/statistic.vue"
target="_blank"
>
代码位 src/views/components/statistic.vue
</el-link>
</template>
<el-row :gutter="24">

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

@@ -88,16 +88,21 @@ const swiperExample: any[] = [
<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地址
Swiper插件
</el-link>
）
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/swiper.vue"
target="_blank"
>
代码位置 src/views/components/swiper.vue
</el-link>
</template>
<el-row :gutter="10">
<el-col v-for="item in swiperExample" :key="item.id" :span="12">

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

@@ -78,13 +78,20 @@ const handleInputConfirm = () => {
>
Tag 标签
</el-link>
<el-radio-group v-model="size" size="small">
<el-radio-group v-model="size">
<el-radio value="large">大尺寸</el-radio>
<el-radio value="default">默认尺寸</el-radio>
<el-radio value="small">小尺寸</el-radio>
</el-radio-group>
</el-space>
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/tag.vue"
target="_blank"
>
代码位置 src/views/components/tag.vue
</el-link>
</template>
<p class="mb-2">基础按钮</p>

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

@@ -39,6 +39,13 @@ const changeTooltipContent = () => {
自动省略后显示 Tooltip 提示， 支持多行省略
</span>
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/text.vue"
target="_blank"
>
代码位置 src/views/components/text.vue
</el-link>
</template>
<p class="mb-2">基础用法</p>

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

@@ -68,7 +68,7 @@ const endTime = ref("");
>
时间选择器
</el-link>
<el-radio-group v-model="size" size="small">
<el-radio-group v-model="size">
<el-radio value="large">大尺寸</el-radio>
<el-radio value="default">默认尺寸</el-radio>
<el-radio value="small">小尺寸</el-radio>
@@ -76,6 +76,13 @@ const endTime = ref("");
</el-radio-group>
</el-space>
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/time-picker.vue"
target="_blank"
>
代码位置 src/views/components/time-picker.vue
</el-link>
</template>
<p class="mb-2">日期和时间点</p>

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

@@ -56,7 +56,14 @@ const activities = [
<el-card shadow="never">
<template #header>
<div class="card-header">
<span class="font-medium">时间线</span>
<p class="font-medium">时间线</p>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/timeline.vue"
target="_blank"
>
代码位置 src/views/components/timeline.vue
</el-link>
</div>
</template>
<div class="flex">
@@ -82,7 +89,7 @@ const activities = [
placement="bottom"
>
<div class="message">
vue-pure-admin 是一款开源免费且开箱即用的中后台管理系统模版
vue-pure-admin 第{{ activities.length - index }}个版本发布啦
</div>
</el-timeline-item>
</el-timeline>

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

@@ -114,14 +114,19 @@ const onDownload = () => {
>
文件上传
</el-link>
<span class="header-right">
<el-button class="ml-1" text bg @click="onDownload">
点击下载安全文件进行上传测试
</el-button>
</span>
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/upload"
target="_blank"
>
代码位置 src/views/components/upload
</el-link>
</template>
<el-button class="mb-4" text bg @click="onDownload">
点击下载安全文件进行上传测试
</el-button>
<p class="mb-4">
综合示例<span class="text-[14px]">
（ <span class="text-[red]">自动上传</span>

Some files were not shown because too many files have changed in this diff Show More