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

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>

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

@@ -12,16 +12,21 @@ defineOptions({
<el-card shadow="never">
<template #header>
<div class="font-medium">
虚拟列表（
<el-link
href="https://github.com/Akryum/vue-virtual-scroller/tree/next/packages/vue-virtual-scroller"
target="_blank"
style="margin: 0 5px 4px 0; font-size: 16px"
>
github地址
虚拟列表
</el-link>
）
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/virtual-list"
target="_blank"
>
代码位置 src/views/components/virtual-list
</el-link>
</template>
<div class="w-full flex justify-around flex-wrap">
<vertical-list class="h-[500px] w-[500px]" />

3
src/views/components/waterfall/index.vue
View File

@@ -92,7 +92,7 @@ onMounted(() => {
</script>
<template>
<el-scrollbar max-height="calc(100vh - 90px)" class="content">
<el-scrollbar max-height="calc(100vh - 120px)" class="content">
<Waterfall :list="list" v-bind="options">
<template #item="{ item, url, index }">
<div
@@ -139,6 +139,7 @@ onMounted(() => {
<el-backtop
title="回到顶部"
:right="35"
:bottom="50"
:visibility-height="400"
target=".content .el-scrollbar__wrap"
>

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

@@ -24,6 +24,13 @@ const activeNames = ref("1");
</el-link>
</span>
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/editor"
target="_blank"
>
代码位置 src/views/editor
</el-link>
</template>
<el-collapse v-model="activeNames" accordion>
<el-collapse-item title="基础用法" name="1">

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

@@ -76,6 +76,13 @@ onMounted(() => {
</el-link>
</span>
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/flow-chart"
target="_blank"
>
代码位置 src/views/flow-chart
</el-link>
</template>
<div class="logic-flow-view">
<!-- 辅助工具栏 -->
@@ -108,7 +115,7 @@ onMounted(() => {
<style scoped>
#turbo {
width: 100%;
height: 70vh;
height: 65vh;
}
.logic-flow-view {

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

@@ -86,6 +86,13 @@ const onTour = () => {
引导页常用于引导式介绍项目的基本功能或亮点
</span>
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/guide/index.vue"
target="_blank"
>
代码位置 src/views/guide/index.vue
</el-link>
</template>
<el-button @click="onGuide"> 打开引导页 (intro.js) </el-button>
<el-button @click="onTour"> 打开引导页 (el-tour) </el-button>

6
src/views/list/card/components/Card.vue
View File

@@ -107,9 +107,9 @@ const cardLogoClass = computed(() => [
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
font-size: 32px;
width: 46px;
height: 46px;
font-size: 26px;
color: #0052d9;
background: #e0ebff;
border-radius: 50%;

2
src/views/list/card/index.vue
View File

@@ -92,7 +92,7 @@ const handleManageProduct = product => {
</script>
<template>
<div class="main">
<div>
<div class="w-full flex justify-between mb-4">
<el-button
:icon="useRenderIcon(AddFill)"

16
src/views/login/components/phone.vue
View File

@@ -27,7 +27,9 @@ const onLogin = async (formEl: FormInstance | undefined) => {
if (valid) {
// 模拟登录请求，需根据实际开发进行修改
setTimeout(() => {
message(transformI18n($t("login.loginSuccess")), { type: "success" });
message(transformI18n($t("login.pureLoginSuccess")), {
type: "success"
});
loading.value = false;
}, 2000);
} else {
@@ -50,7 +52,7 @@ function onBack() {
<el-input
v-model="ruleForm.phone"
clearable
:placeholder="t('login.phone')"
:placeholder="t('login.purePhone')"
:prefix-icon="useRenderIcon(Iphone)"
/>
</el-form-item>
@@ -62,7 +64,7 @@ function onBack() {
<el-input
v-model="ruleForm.verifyCode"
clearable
:placeholder="t('login.smsVerifyCode')"
:placeholder="t('login.pureSmsVerifyCode')"
:prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
/>
<el-button
@@ -72,8 +74,8 @@ function onBack() {
>
{{
text.length > 0
? text + t("login.info")
: t("login.getVerifyCode")
? text + t("login.pureInfo")
: t("login.pureGetVerifyCode")
}}
</el-button>
</div>
@@ -89,7 +91,7 @@ function onBack() {
:loading="loading"
@click="onLogin(ruleFormRef)"
>
{{ t("login.login") }}
{{ t("login.pureLogin") }}
</el-button>
</el-form-item>
</Motion>
@@ -97,7 +99,7 @@ function onBack() {
<Motion :delay="200">
<el-form-item>
<el-button class="w-full" size="default" @click="onBack">
{{ t("login.back") }}
{{ t("login.pureBack") }}
</el-button>
</el-form-item>
</Motion>

8
src/views/login/components/qrCode.vue
View File

@@ -8,10 +8,12 @@ const { t } = useI18n();
</script>
<template>
<Motion class="-mt-2 -mb-2"> <ReQrcode :text="t('login.test')" /> </Motion>
<Motion class="-mt-2 -mb-2">
<ReQrcode :text="t('login.pureTest')" />
</Motion>
<Motion :delay="100">
<el-divider>
<p class="text-gray-500 text-xs">{{ t("login.tip") }}</p>
<p class="text-gray-500 text-xs">{{ t("login.pureTip") }}</p>
</el-divider>
</Motion>
<Motion :delay="150">
@@ -19,7 +21,7 @@ const { t } = useI18n();
class="w-full mt-4"
@click="useUserStoreHook().SET_CURRENTPAGE(0)"
>
{{ t("login.back") }}
{{ t("login.pureBack") }}
</el-button>
</Motion>
</template>

36
src/views/login/components/regist.vue
View File

@@ -29,9 +29,11 @@ const repeatPasswordRule = [
{
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error(transformI18n($t("login.passwordSureReg"))));
callback(new Error(transformI18n($t("login.purePassWordSureReg"))));
} else if (ruleForm.password !== value) {
callback(new Error(transformI18n($t("login.passwordDifferentReg"))));
callback(
new Error(transformI18n($t("login.purePassWordDifferentReg")))
);
} else {
callback();
}
@@ -48,14 +50,16 @@ const onUpdate = async (formEl: FormInstance | undefined) => {
if (checked.value) {
// 模拟请求，需根据实际开发进行修改
setTimeout(() => {
message(transformI18n($t("login.registerSuccess")), {
message(transformI18n($t("login.pureRegisterSuccess")), {
type: "success"
});
loading.value = false;
}, 2000);
} else {
loading.value = false;
message(transformI18n($t("login.tickPrivacy")), { type: "warning" });
message(transformI18n($t("login.pureTickPrivacy")), {
type: "warning"
});
}
} else {
loading.value = false;
@@ -82,7 +86,7 @@ function onBack() {
:rules="[
{
required: true,
message: transformI18n($t('login.usernameReg')),
message: transformI18n($t('login.pureUsernameReg')),
trigger: 'blur'
}
]"
@@ -91,7 +95,7 @@ function onBack() {
<el-input
v-model="ruleForm.username"
clearable
:placeholder="t('login.username')"
:placeholder="t('login.pureUsername')"
:prefix-icon="useRenderIcon(User)"
/>
</el-form-item>
@@ -102,7 +106,7 @@ function onBack() {
<el-input
v-model="ruleForm.phone"
clearable
:placeholder="t('login.phone')"
:placeholder="t('login.purePhone')"
:prefix-icon="useRenderIcon(Iphone)"
/>
</el-form-item>
@@ -114,7 +118,7 @@ function onBack() {
<el-input
v-model="ruleForm.verifyCode"
clearable
:placeholder="t('login.smsVerifyCode')"
:placeholder="t('login.pureSmsVerifyCode')"
:prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
/>
<el-button
@@ -124,8 +128,8 @@ function onBack() {
>
{{
text.length > 0
? text + t("login.info")
: t("login.getVerifyCode")
? text + t("login.pureInfo")
: t("login.pureGetVerifyCode")
}}
</el-button>
</div>
@@ -138,7 +142,7 @@ function onBack() {
v-model="ruleForm.password"
clearable
show-password
:placeholder="t('login.password')"
:placeholder="t('login.purePassword')"
:prefix-icon="useRenderIcon(Lock)"
/>
</el-form-item>
@@ -150,7 +154,7 @@ function onBack() {
v-model="ruleForm.repeatPassword"
clearable
show-password
:placeholder="t('login.sure')"
:placeholder="t('login.pureSure')"
:prefix-icon="useRenderIcon(Lock)"
/>
</el-form-item>
@@ -159,10 +163,10 @@ function onBack() {
<Motion :delay="300">
<el-form-item>
<el-checkbox v-model="checked">
{{ t("login.readAccept") }}
{{ t("login.pureReadAccept") }}
</el-checkbox>
<el-button link type="primary">
{{ t("login.privacyPolicy") }}
{{ t("login.purePrivacyPolicy") }}
</el-button>
</el-form-item>
</Motion>
@@ -176,7 +180,7 @@ function onBack() {
:loading="loading"
@click="onUpdate(ruleFormRef)"
>
{{ t("login.definite") }}
{{ t("login.pureDefinite") }}
</el-button>
</el-form-item>
</Motion>
@@ -184,7 +188,7 @@ function onBack() {
<Motion :delay="400">
<el-form-item>
<el-button class="w-full" size="default" @click="onBack">
{{ t("login.back") }}
{{ t("login.pureBack") }}
</el-button>
</el-form-item>
</Motion>

24
src/views/login/components/update.vue
View File

@@ -26,9 +26,11 @@ const repeatPasswordRule = [
{
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error(transformI18n($t("login.passwordSureReg"))));
callback(new Error(transformI18n($t("login.purePassWordSureReg"))));
} else if (ruleForm.password !== value) {
callback(new Error(transformI18n($t("login.passwordDifferentReg"))));
callback(
new Error(transformI18n($t("login.purePassWordDifferentReg")))
);
} else {
callback();
}
@@ -44,7 +46,7 @@ const onUpdate = async (formEl: FormInstance | undefined) => {
if (valid) {
// 模拟请求，需根据实际开发进行修改
setTimeout(() => {
message(transformI18n($t("login.passwordUpdateReg")), {
message(transformI18n($t("login.purePassWordUpdateReg")), {
type: "success"
});
loading.value = false;
@@ -74,7 +76,7 @@ function onBack() {
<el-input
v-model="ruleForm.phone"
clearable
:placeholder="t('login.phone')"
:placeholder="t('login.purePhone')"
:prefix-icon="useRenderIcon(Iphone)"
/>
</el-form-item>
@@ -86,7 +88,7 @@ function onBack() {
<el-input
v-model="ruleForm.verifyCode"
clearable
:placeholder="t('login.smsVerifyCode')"
:placeholder="t('login.pureSmsVerifyCode')"
:prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
/>
<el-button
@@ -96,8 +98,8 @@ function onBack() {
>
{{
text.length > 0
? text + t("login.info")
: t("login.getVerifyCode")
? text + t("login.pureInfo")
: t("login.pureGetVerifyCode")
}}
</el-button>
</div>
@@ -110,7 +112,7 @@ function onBack() {
v-model="ruleForm.password"
clearable
show-password
:placeholder="t('login.password')"
:placeholder="t('login.purePassword')"
:prefix-icon="useRenderIcon(Lock)"
/>
</el-form-item>
@@ -122,7 +124,7 @@ function onBack() {
v-model="ruleForm.repeatPassword"
clearable
show-password
:placeholder="t('login.sure')"
:placeholder="t('login.pureSure')"
:prefix-icon="useRenderIcon(Lock)"
/>
</el-form-item>
@@ -137,7 +139,7 @@ function onBack() {
:loading="loading"
@click="onUpdate(ruleFormRef)"
>
{{ t("login.definite") }}
{{ t("login.pureDefinite") }}
</el-button>
</el-form-item>
</Motion>
@@ -145,7 +147,7 @@ function onBack() {
<Motion :delay="300">
<el-form-item>
<el-button class="w-full" size="default" @click="onBack">
{{ t("login.back") }}
{{ t("login.pureBack") }}
</el-button>
</el-form-item>
</Motion>

33
src/views/login/index.vue
View File

@@ -184,7 +184,7 @@ watch(loginDay, value => {
:rules="[
{
required: true,
message: transformI18n($t('login.usernameReg')),
message: transformI18n($t('login.pureUsernameReg')),
trigger: 'blur'
}
]"
@@ -193,7 +193,7 @@ watch(loginDay, value => {
<el-input
v-model="ruleForm.username"
clearable
:placeholder="t('login.username')"
:placeholder="t('login.pureUsername')"
:prefix-icon="useRenderIcon(User)"
/>
</el-form-item>
@@ -205,7 +205,7 @@ watch(loginDay, value => {
v-model="ruleForm.password"
clearable
show-password
:placeholder="t('login.password')"
:placeholder="t('login.purePassword')"
:prefix-icon="useRenderIcon(Lock)"
/>
</el-form-item>
@@ -216,7 +216,7 @@ watch(loginDay, value => {
<el-input
v-model="ruleForm.verifyCode"
clearable
:placeholder="t('login.verifyCode')"
:placeholder="t('login.pureVerifyCode')"
:prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
>
<template v-slot:append>
@@ -244,14 +244,15 @@ watch(loginDay, value => {
<option value="7">7</option>
<option value="30">30</option>
</select>
{{ t("login.remember") }}
<el-tooltip
effect="dark"
placement="top"
:content="t('login.rememberInfo')"
>
<IconifyIconOffline :icon="Info" class="ml-1" />
</el-tooltip>
{{ t("login.pureRemember") }}
<IconifyIconOffline
v-tippy="{
content: t('login.pureRememberInfo'),
placement: 'top'
}"
:icon="Info"
class="ml-1"
/>
</span>
</el-checkbox>
<el-button
@@ -259,7 +260,7 @@ watch(loginDay, value => {
type="primary"
@click="useUserStoreHook().SET_CURRENTPAGE(4)"
>
{{ t("login.forget") }}
{{ t("login.pureForget") }}
</el-button>
</div>
<el-button
@@ -270,7 +271,7 @@ watch(loginDay, value => {
:disabled="disabled"
@click="onLogin(ruleFormRef)"
>
{{ t("login.login") }}
{{ t("login.pureLogin") }}
</el-button>
</el-form-item>
</Motion>
@@ -295,7 +296,9 @@ watch(loginDay, value => {
<Motion v-if="currentPage === 0" :delay="350">
<el-form-item>
<el-divider>
<p class="text-gray-500 text-xs">{{ t("login.thirdLogin") }}</p>
<p class="text-gray-500 text-xs">
{{ t("login.pureThirdLogin") }}
</p>
</el-divider>
<div class="w-full flex justify-evenly">
<span

14
src/views/login/utils/enums.ts
View File

@@ -2,31 +2,31 @@ import { $t } from "@/plugins/i18n";
const operates = [
{
title: $t("login.phoneLogin")
title: $t("login.purePhoneLogin")
},
{
title: $t("login.qRCodeLogin")
title: $t("login.pureQRCodeLogin")
},
{
title: $t("login.register")
title: $t("login.pureRegister")
}
];
const thirdParty = [
{
title: $t("login.weChatLogin"),
title: $t("login.pureWeChatLogin"),
icon: "wechat"
},
{
title: $t("login.alipayLogin"),
title: $t("login.pureAlipayLogin"),
icon: "alipay"
},
{
title: $t("login.qqLogin"),
title: $t("login.pureQQLogin"),
icon: "qq"
},
{
title: $t("login.weiboLogin"),
title: $t("login.pureWeiBoLogin"),
icon: "weibo"
}
];

30
src/views/login/utils/rule.ts
View File

@@ -17,9 +17,9 @@ const loginRules = reactive<FormRules>({
{
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error(transformI18n($t("login.passwordReg"))));
callback(new Error(transformI18n($t("login.purePassWordReg"))));
} else if (!REGEXP_PWD.test(value)) {
callback(new Error(transformI18n($t("login.passwordRuleReg"))));
callback(new Error(transformI18n($t("login.purePassWordRuleReg"))));
} else {
callback();
}
@@ -31,9 +31,11 @@ const loginRules = reactive<FormRules>({
{
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error(transformI18n($t("login.verifyCodeReg"))));
callback(new Error(transformI18n($t("login.pureVerifyCodeReg"))));
} else if (useUserStoreHook().verifyCode !== value) {
callback(new Error(transformI18n($t("login.verifyCodeCorrectReg"))));
callback(
new Error(transformI18n($t("login.pureVerifyCodeCorrectReg")))
);
} else {
callback();
}
@@ -49,9 +51,9 @@ const phoneRules = reactive<FormRules>({
{
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error(transformI18n($t("login.phoneReg"))));
callback(new Error(transformI18n($t("login.purePhoneReg"))));
} else if (!isPhone(value)) {
callback(new Error(transformI18n($t("login.phoneCorrectReg"))));
callback(new Error(transformI18n($t("login.purePhoneCorrectReg"))));
} else {
callback();
}
@@ -63,9 +65,9 @@ const phoneRules = reactive<FormRules>({
{
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error(transformI18n($t("login.verifyCodeReg"))));
callback(new Error(transformI18n($t("login.pureVerifyCodeReg"))));
} else if (!REGEXP_SIX.test(value)) {
callback(new Error(transformI18n($t("login.verifyCodeSixReg"))));
callback(new Error(transformI18n($t("login.pureVerifyCodeSixReg"))));
} else {
callback();
}
@@ -81,9 +83,9 @@ const updateRules = reactive<FormRules>({
{
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error(transformI18n($t("login.phoneReg"))));
callback(new Error(transformI18n($t("login.purePhoneReg"))));
} else if (!isPhone(value)) {
callback(new Error(transformI18n($t("login.phoneCorrectReg"))));
callback(new Error(transformI18n($t("login.purePhoneCorrectReg"))));
} else {
callback();
}
@@ -95,9 +97,9 @@ const updateRules = reactive<FormRules>({
{
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error(transformI18n($t("login.verifyCodeReg"))));
callback(new Error(transformI18n($t("login.pureVerifyCodeReg"))));
} else if (!REGEXP_SIX.test(value)) {
callback(new Error(transformI18n($t("login.verifyCodeSixReg"))));
callback(new Error(transformI18n($t("login.pureVerifyCodeSixReg"))));
} else {
callback();
}
@@ -109,9 +111,9 @@ const updateRules = reactive<FormRules>({
{
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error(transformI18n($t("login.passwordReg"))));
callback(new Error(transformI18n($t("login.purePassWordReg"))));
} else if (!REGEXP_PWD.test(value)) {
callback(new Error(transformI18n($t("login.passwordRuleReg"))));
callback(new Error(transformI18n($t("login.purePassWordRuleReg"))));
} else {
callback();
}

4
src/views/nested/menu1/menu1-1/index.vue
View File

@@ -12,8 +12,8 @@ const { t } = useI18n();
<template>
<div class="dark:text-white">
<p>{{ t("menus.hsmenu1") }}</p>
<p style="text-indent: 2em">{{ t("menus.hsmenu1-1") }}</p>
<p>{{ t("menus.pureMenu1") }}</p>
<p style="text-indent: 2em">{{ t("menus.pureMenu1-1") }}</p>
<el-input v-model="input" />
</div>
</template>

6
src/views/nested/menu1/menu1-2/menu1-2-1/index.vue
View File

@@ -12,9 +12,9 @@ const { t } = useI18n();
<template>
<div class="dark:text-white">
<p>{{ t("menus.hsmenu1") }}</p>
<p style="text-indent: 2em">{{ t("menus.hsmenu1-2") }}</p>
<p style="text-indent: 4em">{{ t("menus.hsmenu1-2-1") }}</p>
<p>{{ t("menus.pureMenu1") }}</p>
<p style="text-indent: 2em">{{ t("menus.pureMenu1-2") }}</p>
<p style="text-indent: 4em">{{ t("menus.pureMenu1-2-1") }}</p>
<el-input v-model="input" />
</div>
</template>

6
src/views/nested/menu1/menu1-2/menu1-2-2/index.vue
View File

@@ -14,9 +14,9 @@ const { query } = useRoute();
<template>
<div class="dark:text-white">
<p>{{ t("menus.hsmenu1") }}</p>
<p style="text-indent: 2em">{{ t("menus.hsmenu1-2") }}</p>
<p style="text-indent: 4em">{{ t("menus.hsmenu1-2-2") }}</p>
<p>{{ t("menus.pureMenu1") }}</p>
<p style="text-indent: 2em">{{ t("menus.pureMenu1-2") }}</p>
<p style="text-indent: 4em">{{ t("menus.pureMenu1-2-2") }}</p>
<el-input v-model="input" />
<div v-if="query.text" class="mt-4">

4
src/views/nested/menu1/menu1-3/index.vue
View File

@@ -12,8 +12,8 @@ const { t } = useI18n();
<template>
<div class="dark:text-white">
<p>{{ t("menus.hsmenu1") }}</p>
<p style="text-indent: 2em">{{ t("menus.hsmenu1-3") }}</p>
<p>{{ t("menus.pureMenu1") }}</p>
<p style="text-indent: 2em">{{ t("menus.pureMenu1-3") }}</p>
<el-input v-model="input" />
</div>
</template>

2
src/views/nested/menu2/index.vue
View File

@@ -12,7 +12,7 @@ const { t } = useI18n();
<template>
<div class="dark:text-white">
<p>{{ t("menus.hsmenu2") }}</p>
<p>{{ t("menus.pureMenu2") }}</p>
<el-input v-model="input" />
</div>
</template>

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

@@ -13,6 +13,13 @@ defineOptions({
<el-card shadow="never" class="mb-2">
<template #header>
<div class="card-header">组件方式判断权限</div>
<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>
<el-space wrap>
<Auth value="permission:btn:add">

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

@@ -52,6 +52,13 @@ function onChange() {
<div class="card-header">
<span>当前角色：{{ username }}</span>
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/permission/page/index.vue"
target="_blank"
>
代码位置 src/views/permission/page/index.vue
</el-link>
</template>
<el-select v-model="username" class="!w-[160px]" @change="onChange">
<el-option

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

@@ -13,6 +13,13 @@ const { columns } = useColumns();
<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/result/fail.vue"
target="_blank"
>
代码位置 src/views/result/fail.vue
</el-link>
</template>
<el-result
icon="error"

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

@@ -27,6 +27,13 @@ const columns = [
<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/result/success.vue"
target="_blank"
>
代码位置 src/views/result/success.vue
</el-link>
</template>
<el-result
icon="success"

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

@@ -14,7 +14,7 @@ function tabClick({ index }) {
</script>
<template>
<el-card shadow="never" :body-style="{ height: 'calc(100vh - 180px)' }">
<el-card shadow="never" :body-style="{ height: 'calc(100vh - 260px)' }">
<template #header>
<div class="card-header">
<span class="font-medium">
@@ -29,18 +29,27 @@ function tabClick({ index }) {
，维护整体表单只需操作 columns 配置即可
</span>
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/schema-form"
target="_blank"
>
代码位置 src/views/schema-form
</el-link>
</template>
<el-tabs @tab-click="tabClick">
<template v-for="(item, index) of list" :key="item.key">
<el-tab-pane :lazy="true">
<template #label>
<el-tooltip
:content="`（第 ${index + 1} 个示例）${item.content}`"
placement="top-end"
<span
v-tippy="{
maxWidth: 'none',
content: `（第 ${index + 1} 个示例）${item.content}`
}"
>
<span>{{ item.title }}</span>
</el-tooltip>
{{ item.title }}
</span>
</template>
<component :is="item.component" v-if="selected == index" />
</el-tab-pane>

2
src/views/system/menu/README.md
View File

@@ -1,5 +1,3 @@
<!-- 初版，持续完善中 -->
## 字段含义
| 字段 | 说明 |

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

@@ -18,7 +18,7 @@ function tabClick({ index }) {
<template #header>
<div class="card-header">
<span class="font-medium">
可编辑用法全部采用 tsx 语法，充分发挥
可编辑用法全部采用 TSX 语法，充分发挥
<el-link
href="https://github.com/pure-admin/pure-admin-table"
target="_blank"
@@ -29,6 +29,13 @@ function tabClick({ index }) {
的灵活性，维护整体表格只需操作 columns 配置即可
</span>
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/table/edit"
target="_blank"
>
代码位置 src/views/table/edit
</el-link>
</template>
<el-alert
@@ -42,12 +49,14 @@ function tabClick({ index }) {
<template v-for="(item, index) of list" :key="item.key">
<el-tab-pane :lazy="true">
<template #label>
<el-tooltip
:content="`（第 ${index + 1} 个示例）${item.content}`"
placement="top-end"
<span
v-tippy="{
maxWidth: 'none',
content: `（第 ${index + 1} 个示例）${item.content}`
}"
>
<span>{{ item.title }}</span>
</el-tooltip>
{{ item.title }}
</span>
</template>
<component :is="item.component" v-if="selected == index" />
</el-tab-pane>
@@ -66,7 +75,7 @@ function tabClick({ index }) {
}
:deep(.el-alert__title) {
font-size: 16px;
font-size: 15px;
}
:deep(.el-tabs__nav-next),

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

@@ -18,7 +18,7 @@ function tabClick({ index }) {
<template #header>
<div class="card-header">
<span class="font-medium">
高级用法全部采用 tsx 语法，充分发挥
高级用法全部采用 TSX 语法，充分发挥
<el-link
href="https://github.com/pure-admin/pure-admin-table"
target="_blank"
@@ -29,6 +29,13 @@ function tabClick({ index }) {
的灵活性，维护整体表格只需操作 columns 配置即可
</span>
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/table/high"
target="_blank"
>
代码位置 src/views/table/high
</el-link>
</template>
<el-alert
@@ -42,12 +49,14 @@ function tabClick({ index }) {
<template v-for="(item, index) of list" :key="item.key">
<el-tab-pane :lazy="true">
<template #label>
<el-tooltip
:content="`（第 ${index + 1} 个示例）${item.content}`"
placement="top-end"
<span
v-tippy="{
maxWidth: 'none',
content: `（第 ${index + 1} 个示例）${item.content}`
}"
>
<span>{{ item.title }}</span>
</el-tooltip>
{{ item.title }}
</span>
</template>
<component :is="item.component" v-if="selected == index" />
</el-tab-pane>
@@ -66,7 +75,7 @@ function tabClick({ index }) {
}
:deep(.el-alert__title) {
font-size: 16px;
font-size: 15px;
}
:deep(.el-tabs__nav-next),

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

@@ -18,7 +18,7 @@ function tabClick({ index }) {
<template #header>
<div class="card-header">
<span class="font-medium">
二次封装 element-plus 的
二次封装 Element Plus 的
<el-link
href="https://element-plus.org/zh-CN/component/table.html"
target="_blank"
@@ -37,6 +37,13 @@ function tabClick({ index }) {
</el-link>
</span>
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/table/base"
target="_blank"
>
代码位置 src/views/table/base
</el-link>
</template>
<el-alert
@@ -50,12 +57,14 @@ function tabClick({ index }) {
<template v-for="(item, index) of list" :key="item.key">
<el-tab-pane :lazy="true">
<template #label>
<el-tooltip
:content="`（第 ${index + 1} 个示例）${item.content}`"
placement="top-end"
<span
v-tippy="{
maxWidth: 'none',
content: `（第 ${index + 1} 个示例）${item.content}`
}"
>
<span>{{ item.title }}</span>
</el-tooltip>
{{ item.title }}
</span>
</template>
<component :is="item.component" v-if="selected == index" />
</el-tab-pane>
@@ -74,7 +83,7 @@ function tabClick({ index }) {
}
:deep(.el-alert__title) {
font-size: 16px;
font-size: 15px;
}
:deep(.el-tabs__nav-next),

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

@@ -28,18 +28,27 @@ function tabClick({ index }) {
</el-link>
</span>
</div>
<el-link
class="mt-2"
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/table/virtual"
target="_blank"
>
代码位置 src/views/table/virtual
</el-link>
</template>
<el-tabs @tab-click="tabClick">
<template v-for="(item, index) of list" :key="item.key">
<el-tab-pane :lazy="true">
<template #label>
<el-tooltip
:content="`（第 ${index + 1} 个示例）${item.content}`"
placement="top-end"
<span
v-tippy="{
maxWidth: 'none',
content: `（第 ${index + 1} 个示例）${item.content}`
}"
>
<span>{{ item.title }}</span>
</el-tooltip>
{{ item.title }}
</span>
</template>
<component :is="item.component" v-if="selected == index" />
</el-tab-pane>

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

@@ -49,6 +49,13 @@ function onCloseTags() {
<el-card shadow="never">
<template #header>
<div class="font-medium">标签页复用，超出限制自动关闭</div>
<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>
<div class="flex flex-wrap items-center">
<p>query传参模式：</p>