mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-30 09:24:46 +08:00
perf: 大优化，移除 @pureadmin/components , 打包大小未启用压缩前减少 0.4 MB , 首屏请求减少 2.3 MB 的资源
This commit is contained in:
xiaoxian521
parent
63f2540745
commit
4f786d6262
@ -84,9 +84,6 @@ menus:
|
||||
hsIconSelect: Icon Select
|
||||
hsTimeline: Time Line
|
||||
hsLineTree: LineTree
|
||||
hsAntTabs: Imitate Antdv Tabs
|
||||
hsAntAnchor: Imitate Antdv Anchor
|
||||
hsAntTreeSelect: Imitate Antdv TreeSelector
|
||||
hsList: List Page
|
||||
hsListCard: Card List Page
|
||||
hsDebounce: Debounce & Throttle
|
||||
|
||||
@ -84,9 +84,6 @@ menus:
|
||||
hsIconSelect: 图标选择器
|
||||
hsTimeline: 时间线
|
||||
hsLineTree: 树形连接线
|
||||
hsAntTabs: 仿antdv标签页
|
||||
hsAntAnchor: 仿antdv锚点
|
||||
hsAntTreeSelect: 仿antdv树型选择器
|
||||
hsList: 列表页
|
||||
hsListCard: 卡片列表页
|
||||
hsDebounce: 防抖节流
|
||||
@ -100,8 +97,8 @@ menus:
|
||||
hsExecl: 导出Excel
|
||||
hsInfiniteScroll: 表格无限滚动
|
||||
hsdanmaku: 弹幕组件
|
||||
hsPureTableBase: 基础用法
|
||||
hsPureTableHigh: 高级用法
|
||||
hsPureTableBase: 基础用法（23个示例）
|
||||
hsPureTableHigh: 高级用法（8个示例）
|
||||
hsTree: 大数据树业务组件
|
||||
status:
|
||||
hsLoad: 加载中...
|
||||
|
||||
@ -34,7 +34,6 @@
|
||||
"@howdyjs/mouse-menu": "^2.0.5",
|
||||
"@logicflow/core": "^1.1.30",
|
||||
"@logicflow/extension": "^1.1.30",
|
||||
"@pureadmin/components": "^1.1.0",
|
||||
"@pureadmin/descriptions": "^1.1.0",
|
||||
"@pureadmin/table": "^1.8.0",
|
||||
"@pureadmin/utils": "^1.6.7",
|
||||
|
||||
508
pnpm-lock.yaml
generated
508
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -2,25 +2,16 @@
|
||||
import { ref } from "vue";
|
||||
import { noticesData } from "./data";
|
||||
import NoticeList from "./noticeList.vue";
|
||||
import { Tabs, TabPane } from "@pureadmin/components";
|
||||
|
||||
const dropdownDom = ref();
|
||||
const activeKey = ref(noticesData[0].key);
|
||||
|
||||
const notices = ref(noticesData);
|
||||
|
||||
const noticesNum = ref(0);
|
||||
notices.value.forEach(notice => {
|
||||
noticesNum.value += notice.list.length;
|
||||
});
|
||||
const notices = ref(noticesData);
|
||||
const activeKey = ref(noticesData[0].key);
|
||||
|
||||
function tabClick() {
|
||||
(dropdownDom as any).value.handleOpen();
|
||||
}
|
||||
notices.value.map(v => (noticesNum.value += v.list.length));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dropdown ref="dropdownDom" trigger="click" placement="bottom-end">
|
||||
<el-dropdown trigger="click" placement="bottom-end">
|
||||
<span class="dropdown-badge navbar-bg-hover select-none">
|
||||
<el-badge :value="noticesNum" :max="99">
|
||||
<span class="header-notice-icon">
|
||||
@ -30,34 +21,25 @@ function tabClick() {
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<Tabs
|
||||
centered
|
||||
class="dropdown-tabs"
|
||||
:tabBarStyle="{ marginLeft: notices?.length > 4 ? '8px' : '0' }"
|
||||
v-model:activeKey="activeKey"
|
||||
@tabClick="tabClick"
|
||||
>
|
||||
<el-tabs :stretch="true" v-model="activeKey" class="dropdown-tabs">
|
||||
<template v-for="item in notices" :key="item.key">
|
||||
<TabPane :tab="`${item.name}(${item.list.length})`">
|
||||
<el-tab-pane
|
||||
:label="`${item.name}(${item.list.length})`"
|
||||
:name="`${item.key}`"
|
||||
>
|
||||
<el-scrollbar max-height="330px">
|
||||
<div class="noticeList-container">
|
||||
<NoticeList :list="item.list" />
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</TabPane>
|
||||
</el-tab-pane>
|
||||
</template>
|
||||
</Tabs>
|
||||
</el-tabs>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.ant-tabs-dropdown {
|
||||
z-index: 2900 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dropdown-badge {
|
||||
display: flex;
|
||||
@ -73,30 +55,28 @@ function tabClick() {
|
||||
}
|
||||
|
||||
.dropdown-tabs {
|
||||
width: 336px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
|
||||
border-radius: 4px;
|
||||
width: 330px;
|
||||
|
||||
.noticeList-container {
|
||||
padding: 15px 24px 0 24px;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__header) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__nav-scroll) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__nav-wrap)::after {
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
:deep(.noticeList-container) {
|
||||
padding: 15px 24px 0 24px;
|
||||
// 如果上面的 notices 长度大于 3 请注释掉下面代码
|
||||
:deep(.el-tabs__nav-wrap) {
|
||||
padding: 0 36px 0 36px;
|
||||
}
|
||||
|
||||
// 如果上面的 notices 长度大于 3 请注释掉下面代码
|
||||
:deep(.el-tabs__active-bar) {
|
||||
margin: 0 36px 0 36px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-tabs-nav) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -20,9 +20,6 @@ import "./style/reset.scss";
|
||||
// 导入公共样式
|
||||
import "./style/index.scss";
|
||||
import "element-plus/dist/index.css";
|
||||
import "@pureadmin/components/dist/index.css";
|
||||
import "@pureadmin/components/dist/theme.css";
|
||||
import "@pureadmin/components/dist/dark.scss";
|
||||
// 导入字体图标
|
||||
import "./assets/iconfont/iconfont.js";
|
||||
import "./assets/iconfont/iconfont.css";
|
||||
|
||||
@ -66,30 +66,6 @@ export default {
|
||||
title: $t("menus.hsLineTree")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/able/antTabs",
|
||||
name: "AntTabs",
|
||||
component: () => import("@/views/able/ant-tabs.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsAntTabs")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/able/antAnchor",
|
||||
name: "AntAnchor",
|
||||
component: () => import("@/views/able/ant-anchor.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsAntAnchor")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/able/antTreeSelect",
|
||||
name: "AntTreeSelect",
|
||||
component: () => import("@/views/able/ant-treeSelect.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsAntTreeSelect")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/able/debounce",
|
||||
name: "Debounce",
|
||||
|
||||
@ -28,11 +28,6 @@ html.dark {
|
||||
filter: invert(0.9) hue-rotate(180deg);
|
||||
}
|
||||
|
||||
.ant-tabs {
|
||||
background: var(--el-bg-color);
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
/* 标签页 */
|
||||
.tags-view {
|
||||
.arrow-left,
|
||||
|
||||
33
src/utils/message.ts
Normal file
33
src/utils/message.ts
Normal file
@ -0,0 +1,33 @@
|
||||
import { type MessageHandler, ElMessage } from "element-plus";
|
||||
|
||||
// 更多配置请看：https://element-plus.org/zh-CN/component/message.html#message-%E9%85%8D%E7%BD%AE%E9%A1%B9
|
||||
|
||||
type messageTypes = "success" | "info" | "warning" | "error";
|
||||
|
||||
/**
|
||||
* `element-plus` 的 `info` 消息类型
|
||||
*/
|
||||
const message = (
|
||||
message: string,
|
||||
type = "info" as messageTypes,
|
||||
showClose = true,
|
||||
duration = 2000,
|
||||
center = false,
|
||||
grouping = false
|
||||
): MessageHandler => {
|
||||
return ElMessage({
|
||||
message,
|
||||
type,
|
||||
showClose,
|
||||
duration,
|
||||
center,
|
||||
grouping
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 关闭 `element-plus` 的所有消息实例
|
||||
*/
|
||||
const closeAllMessage = (): void => ElMessage.closeAll();
|
||||
|
||||
export { message, closeAllMessage };
|
||||
@ -1,72 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { Anchor, AnchorLink } from "@pureadmin/components";
|
||||
|
||||
defineOptions({
|
||||
name: "AntAnchor"
|
||||
});
|
||||
|
||||
function handleAnchorClick(e, link) {
|
||||
e.preventDefault();
|
||||
const srcolls = document.getElementById(link.href);
|
||||
srcolls.scrollIntoView({ block: "start", behavior: "smooth" });
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
仿antdv锚点，采用
|
||||
<el-link
|
||||
href="https://www.npmjs.com/package/@pureadmin/components"
|
||||
target="_blank"
|
||||
style="font-size: 16px; margin: 0 4px 5px"
|
||||
>
|
||||
@pureadmin/components
|
||||
</el-link>
|
||||
，完全兼容antdv的
|
||||
<el-link
|
||||
href="https://next.antdv.com/components/anchor-cn"
|
||||
target="_blank"
|
||||
style="font-size: 16px; margin: 0 4px 5px"
|
||||
>
|
||||
Anchor
|
||||
</el-link>
|
||||
写法
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="w-[400px]">
|
||||
<Anchor class="float-left mt-[200px]" @click="handleAnchorClick">
|
||||
<AnchorLink href="one" title="测试one" />
|
||||
<AnchorLink href="two" title="测试two" />
|
||||
<AnchorLink href="three" title="测试three" />
|
||||
</Anchor>
|
||||
|
||||
<el-scrollbar class="float-right overflow-auto" height="600px">
|
||||
<header
|
||||
id="one"
|
||||
class="w-[200px] h-[600px] text-cyan-50 flex justify-center items-center text-4xl"
|
||||
style="background: #409eff"
|
||||
>
|
||||
测试one
|
||||
</header>
|
||||
<header
|
||||
id="two"
|
||||
class="w-[200px] h-[600px] text-cyan-50 flex justify-center items-center text-4xl"
|
||||
style="background: #67c23a"
|
||||
>
|
||||
测试two
|
||||
</header>
|
||||
<header
|
||||
id="three"
|
||||
class="w-[200px] h-[600px] text-cyan-50 flex justify-center items-center text-4xl"
|
||||
style="background: #f56c6c"
|
||||
>
|
||||
测试three
|
||||
</header>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
@ -1,56 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { Tabs, TabPane } from "@pureadmin/components";
|
||||
|
||||
defineOptions({
|
||||
name: "AntTabs"
|
||||
});
|
||||
|
||||
const mode = ref("top");
|
||||
const activeKey = ref(1);
|
||||
const callback = (val: string) => {
|
||||
console.log(val);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
仿antdv标签页，采用
|
||||
<el-link
|
||||
href="https://www.npmjs.com/package/@pureadmin/components"
|
||||
target="_blank"
|
||||
style="font-size: 16px; margin: 0 4px 5px"
|
||||
>
|
||||
@pureadmin/components
|
||||
</el-link>
|
||||
，完全兼容antdv的
|
||||
<el-link
|
||||
href="https://next.antdv.com/components/tabs-cn"
|
||||
target="_blank"
|
||||
style="font-size: 16px; margin: 0 4px 5px"
|
||||
>
|
||||
Tabs
|
||||
</el-link>
|
||||
写法
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-radio-group v-model="mode" size="small" class="mb-2">
|
||||
<el-radio label="top" border>Horizontal</el-radio>
|
||||
<el-radio label="left" border>Vertical</el-radio>
|
||||
</el-radio-group>
|
||||
<Tabs
|
||||
v-model:activeKey="activeKey"
|
||||
:tab-position="mode"
|
||||
:style="{ height: '200px' }"
|
||||
@tabScroll="callback"
|
||||
>
|
||||
<TabPane v-for="i in 30" :key="i" :tab="`Tab-${i}`">
|
||||
Content of tab {{ i }}
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</el-card>
|
||||
</template>
|
||||
@ -1,217 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { TreeSelect } from "@pureadmin/components";
|
||||
|
||||
defineOptions({
|
||||
name: "AntTreeSelect"
|
||||
});
|
||||
|
||||
const value1 = ref<string>("");
|
||||
const treeData1 = ref([
|
||||
{
|
||||
title: "parent 1",
|
||||
value: "parent 1",
|
||||
children: [
|
||||
{
|
||||
title: "parent 1-0",
|
||||
value: "parent 1-0",
|
||||
children: [
|
||||
{
|
||||
title: "my leaf",
|
||||
value: "leaf1"
|
||||
},
|
||||
{
|
||||
title: "your leaf",
|
||||
value: "leaf2"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "parent 1-1",
|
||||
value: "parent 1-1"
|
||||
}
|
||||
]
|
||||
}
|
||||
]);
|
||||
|
||||
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
|
||||
|
||||
function dig(path = "0", level = 3) {
|
||||
const list = [];
|
||||
for (let i = 0; i < 10; i += 1) {
|
||||
const value = `${path}-${i}`;
|
||||
const treeNode = {
|
||||
title: value,
|
||||
value
|
||||
};
|
||||
|
||||
if (level > 0) {
|
||||
(treeNode as any).children = dig(value, level - 1);
|
||||
}
|
||||
|
||||
list.push(treeNode);
|
||||
}
|
||||
return list;
|
||||
}
|
||||
|
||||
const checkedKeys = ref<string[]>(["0-0-0", "0-0-1"]);
|
||||
|
||||
const value2 = ref<string[]>(["0-0-0"]);
|
||||
const treeData2 = [
|
||||
{
|
||||
title: "Node1",
|
||||
value: "0-0",
|
||||
children: [
|
||||
{
|
||||
title: "Child Node1",
|
||||
value: "0-0-0"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Node2",
|
||||
value: "0-1",
|
||||
|
||||
children: [
|
||||
{
|
||||
title: "Child Node3",
|
||||
value: "0-1-0",
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
title: "Child Node4",
|
||||
value: "0-1-1"
|
||||
},
|
||||
{
|
||||
title: "Child Node5",
|
||||
value: "0-1-2"
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const value3 = ref<string>();
|
||||
const treeData3 = ref([
|
||||
{ id: 1, pId: 0, value: "1", title: "Expand to load" },
|
||||
{ id: 2, pId: 0, value: "2", title: "Expand to load" },
|
||||
{ id: 3, pId: 0, value: "3", title: "Tree Node", isLeaf: true }
|
||||
]);
|
||||
const genTreeNode = (parentId: number, isLeaf = false) => {
|
||||
const random = Math.random().toString(36).substring(2, 6);
|
||||
return {
|
||||
id: random,
|
||||
pId: parentId,
|
||||
value: random,
|
||||
title: isLeaf ? "Tree Node" : "Expand to load",
|
||||
isLeaf
|
||||
};
|
||||
};
|
||||
const onLoadData = treeNode => {
|
||||
return new Promise(resolve => {
|
||||
const { id } = treeNode.dataRef;
|
||||
setTimeout(() => {
|
||||
treeData3.value = (treeData3 as any).value.concat([
|
||||
genTreeNode(id, false),
|
||||
genTreeNode(id, true)
|
||||
]);
|
||||
resolve(true);
|
||||
}, 300);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
仿antdv树选择，采用
|
||||
<el-link
|
||||
href="https://www.npmjs.com/package/@pureadmin/components"
|
||||
target="_blank"
|
||||
style="font-size: 16px; margin: 0 4px 5px"
|
||||
>
|
||||
@pureadmin/components
|
||||
</el-link>
|
||||
，完全兼容antdv的
|
||||
<el-link
|
||||
href="https://next.antdv.com/components/tree-select-cn"
|
||||
target="_blank"
|
||||
style="font-size: 16px; margin: 0 4px 5px"
|
||||
>
|
||||
TreeSelect
|
||||
</el-link>
|
||||
写法
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="flex justify-around flex-wrap">
|
||||
<div>
|
||||
<span>线性样式：</span>
|
||||
<TreeSelect
|
||||
class="w-[200px]"
|
||||
v-model:value="value1"
|
||||
show-search
|
||||
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
|
||||
placeholder="Please select"
|
||||
allow-clear
|
||||
:tree-line="true"
|
||||
tree-default-expand-all
|
||||
:tree-data="treeData1"
|
||||
>
|
||||
<template #title="{ value: val, title }">
|
||||
<b v-if="val === 'parent 1-1'" style="color: #08c">sss</b>
|
||||
<template v-else>{{ title }}</template>
|
||||
</template>
|
||||
</TreeSelect>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span>虚拟滚动：</span>
|
||||
<TreeSelect
|
||||
class="w-[200px] mt-6"
|
||||
v-model:value="checkedKeys"
|
||||
tree-checkable
|
||||
tree-default-expand-all
|
||||
:show-checked-strategy="SHOW_PARENT"
|
||||
:height="233"
|
||||
:tree-data="dig()"
|
||||
:max-tag-count="10"
|
||||
>
|
||||
<template #title="{ title, value }">
|
||||
<span v-if="value === '0-0-1-0'" style="color: #1890ff">
|
||||
{{ title }}
|
||||
</span>
|
||||
<template v-else>{{ title }}</template>
|
||||
</template>
|
||||
</TreeSelect>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span>可勾选：</span>
|
||||
<TreeSelect
|
||||
class="w-[200px]"
|
||||
v-model:value="value2"
|
||||
:tree-data="treeData2"
|
||||
tree-checkable
|
||||
allow-clear
|
||||
:show-checked-strategy="SHOW_PARENT"
|
||||
placeholder="Please select"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span>异步加载：</span>
|
||||
<TreeSelect
|
||||
class="w-[200px]"
|
||||
v-model:value="value3"
|
||||
tree-data-simple-mode
|
||||
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
|
||||
:tree-data="treeData3"
|
||||
placeholder="Please select"
|
||||
:load-data="onLoadData"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
@ -2,8 +2,8 @@
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { ref, reactive } from "vue";
|
||||
import Motion from "../utils/motion";
|
||||
import { message } from "@/utils/message";
|
||||
import { phoneRules } from "../utils/rule";
|
||||
import { message } from "@pureadmin/components";
|
||||
import type { FormInstance } from "element-plus";
|
||||
import { $t, transformI18n } from "@/plugins/i18n";
|
||||
import { useVerifyCode } from "../utils/verifyCode";
|
||||
@ -26,7 +26,7 @@ const onLogin = async (formEl: FormInstance | undefined) => {
|
||||
if (valid) {
|
||||
// 模拟登录请求，需根据实际开发进行修改
|
||||
setTimeout(() => {
|
||||
message.success(transformI18n($t("login.loginSuccess")));
|
||||
message(transformI18n($t("login.loginSuccess")), "success");
|
||||
loading.value = false;
|
||||
}, 2000);
|
||||
} else {
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { ref, reactive } from "vue";
|
||||
import Motion from "../utils/motion";
|
||||
import { message } from "@/utils/message";
|
||||
import { updateRules } from "../utils/rule";
|
||||
import { message } from "@pureadmin/components";
|
||||
import type { FormInstance } from "element-plus";
|
||||
import { useVerifyCode } from "../utils/verifyCode";
|
||||
import { $t, transformI18n } from "@/plugins/i18n";
|
||||
@ -45,12 +45,12 @@ const onUpdate = async (formEl: FormInstance | undefined) => {
|
||||
if (checked.value) {
|
||||
// 模拟请求，需根据实际开发进行修改
|
||||
setTimeout(() => {
|
||||
message.success(transformI18n($t("login.registerSuccess")));
|
||||
message(transformI18n($t("login.registerSuccess")), "success");
|
||||
loading.value = false;
|
||||
}, 2000);
|
||||
} else {
|
||||
loading.value = false;
|
||||
message.warning(transformI18n($t("login.tickPrivacy")));
|
||||
message(transformI18n($t("login.tickPrivacy")), "warning");
|
||||
}
|
||||
} else {
|
||||
loading.value = false;
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { ref, reactive } from "vue";
|
||||
import Motion from "../utils/motion";
|
||||
import { message } from "@/utils/message";
|
||||
import { updateRules } from "../utils/rule";
|
||||
import { message } from "@pureadmin/components";
|
||||
import type { FormInstance } from "element-plus";
|
||||
import { useVerifyCode } from "../utils/verifyCode";
|
||||
import { $t, transformI18n } from "@/plugins/i18n";
|
||||
@ -42,7 +42,7 @@ const onUpdate = async (formEl: FormInstance | undefined) => {
|
||||
if (valid) {
|
||||
// 模拟请求，需根据实际开发进行修改
|
||||
setTimeout(() => {
|
||||
message.success(transformI18n($t("login.passwordUpdateReg")));
|
||||
message(transformI18n($t("login.passwordUpdateReg")), "success");
|
||||
loading.value = false;
|
||||
}, 2000);
|
||||
} else {
|
||||
|
||||
@ -10,6 +10,7 @@ import {
|
||||
import { useI18n } from "vue-i18n";
|
||||
import Motion from "./utils/motion";
|
||||
import { useRouter } from "vue-router";
|
||||
import { message } from "@/utils/message";
|
||||
import { loginRules } from "./utils/rule";
|
||||
import phone from "./components/phone.vue";
|
||||
import TypeIt from "@/components/ReTypeit";
|
||||
@ -18,7 +19,6 @@ import regist from "./components/regist.vue";
|
||||
import update from "./components/update.vue";
|
||||
import { initRouter } from "@/router/utils";
|
||||
import { useNav } from "@/layout/hooks/useNav";
|
||||
import { message } from "@pureadmin/components";
|
||||
import type { FormInstance } from "element-plus";
|
||||
import { $t, transformI18n } from "@/plugins/i18n";
|
||||
import { operates, thirdParty } from "./utils/enums";
|
||||
@ -72,8 +72,8 @@ const onLogin = async (formEl: FormInstance | undefined) => {
|
||||
if (res.success) {
|
||||
// 获取后端路由
|
||||
initRouter().then(() => {
|
||||
message.success("登录成功");
|
||||
router.push("/");
|
||||
message("登录成功", "success");
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { message } from "@pureadmin/components";
|
||||
import { message } from "@/utils/message";
|
||||
import { tableData } from "../data";
|
||||
|
||||
// 如果您不习惯tsx写法，可以传slot，然后在template里写
|
||||
@ -56,11 +56,14 @@ export function useColumns() {
|
||||
];
|
||||
|
||||
const handleEdit = (index: number, row) => {
|
||||
message.success(`您编辑了第 ${index} 行，数据为：${JSON.stringify(row)}`);
|
||||
message(
|
||||
`您编辑了第 ${index} 行，数据为：${JSON.stringify(row)}`,
|
||||
"success"
|
||||
);
|
||||
};
|
||||
|
||||
const handleDelete = (index: number, row) => {
|
||||
message.error(`您删除了第 ${index} 行，数据为：${JSON.stringify(row)}`);
|
||||
message(`您删除了第 ${index} 行，数据为：${JSON.stringify(row)}`, "info");
|
||||
};
|
||||
|
||||
return {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { message } from "@pureadmin/components";
|
||||
import { message } from "@/utils/message";
|
||||
import { tableData } from "../data";
|
||||
import { ref, computed } from "vue";
|
||||
|
||||
@ -15,11 +15,14 @@ export function useColumns() {
|
||||
);
|
||||
|
||||
const handleEdit = (index: number, row) => {
|
||||
message.success(`您编辑了第 ${index} 行，数据为：${JSON.stringify(row)}`);
|
||||
message(
|
||||
`您编辑了第 ${index} 行，数据为：${JSON.stringify(row)}`,
|
||||
"success"
|
||||
);
|
||||
};
|
||||
|
||||
const handleDelete = (index: number, row) => {
|
||||
message.error(`您删除了第 ${index} 行，数据为：${JSON.stringify(row)}`);
|
||||
message(`您删除了第 ${index} 行，数据为：${JSON.stringify(row)}`, "info");
|
||||
};
|
||||
|
||||
const columns: TableColumnList = [
|
||||
|
||||
@ -1,10 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { list } from "./high/list";
|
||||
import { Tabs, TabPane } from "@pureadmin/components";
|
||||
|
||||
defineOptions({
|
||||
name: "PureTableHigh"
|
||||
});
|
||||
|
||||
const selected = ref(0);
|
||||
|
||||
function tabClick({ index }) {
|
||||
selected.value = index;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -32,21 +38,30 @@ defineOptions({
|
||||
:closable="false"
|
||||
/>
|
||||
|
||||
<Tabs :destroyInactiveTabPane="true">
|
||||
<TabPane v-for="item of list" :key="item.key">
|
||||
<template #tab>
|
||||
<el-tooltip :content="item.content" placement="top-end">
|
||||
<span>{{ item.title }}</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<component :is="item.component" />
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
<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>{{ item.title }}</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<component v-if="selected == index" :is="item.component" />
|
||||
</el-tab-pane>
|
||||
</template>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:deep(.ant-tabs-content-holder) {
|
||||
:deep(.el-tabs__nav-wrap)::after {
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__header) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { ref } from "vue";
|
||||
import { tableDataDrag } from "../data";
|
||||
import { clone } from "@pureadmin/utils";
|
||||
import { message } from "@pureadmin/components";
|
||||
import { message } from "@/utils/message";
|
||||
import { CustomMouseMenu } from "@howdyjs/mouse-menu";
|
||||
|
||||
export function useColumns() {
|
||||
@ -33,10 +33,11 @@ export function useColumns() {
|
||||
label: "编辑",
|
||||
tips: "Edit",
|
||||
fn: row =>
|
||||
message.success(
|
||||
message(
|
||||
`您编辑了第 ${
|
||||
dataList.value.findIndex(v => v.id === row.id) + 1
|
||||
} 行，数据为：${JSON.stringify(row)}`
|
||||
} 行，数据为：${JSON.stringify(row)}`,
|
||||
"success"
|
||||
)
|
||||
}
|
||||
]
|
||||
|
||||
@ -5,9 +5,9 @@ import {
|
||||
type EchartOptions
|
||||
} from "@pureadmin/utils";
|
||||
import { tableDataDrag } from "../data";
|
||||
import { message } from "@/utils/message";
|
||||
import { templateRef } from "@vueuse/core";
|
||||
import { ref, type Ref, computed } from "vue";
|
||||
import { message } from "@pureadmin/components";
|
||||
|
||||
export function useColumns() {
|
||||
const dataList = ref(clone(tableDataDrag, true).splice(0, 4));
|
||||
@ -76,8 +76,9 @@ export function useColumns() {
|
||||
{
|
||||
name: "click",
|
||||
callback: ({ data: { name, value } }) => {
|
||||
message.success(
|
||||
`您点击了第 ${i + 1} 行，图表标题为${name}，图表数据为：${value}`
|
||||
message(
|
||||
`您点击了第 ${i + 1} 行，图表标题为${name}，图表数据为：${value}`,
|
||||
"success"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { tableDataEdit } from "../data";
|
||||
import { message } from "@/utils/message";
|
||||
import { ref, computed, Transition } from "vue";
|
||||
import { message } from "@pureadmin/components";
|
||||
import { clone, delay } from "@pureadmin/utils";
|
||||
|
||||
// 温馨提示：编辑整行方法雷同，将cellRenderer后面渲染的组件抽出来做对应处理即可
|
||||
@ -109,10 +109,11 @@ export function useColumns() {
|
||||
|
||||
function onSure(index) {
|
||||
dataList.value[index].id = inputValMap.value[index].value;
|
||||
message.success(
|
||||
message(
|
||||
`您编辑了第 ${index + 1} 行，编辑后数据为：${JSON.stringify(
|
||||
dataList.value[index]
|
||||
)}`
|
||||
)}`,
|
||||
"success"
|
||||
);
|
||||
// 编辑状态关闭
|
||||
editStatus.value[index] = Object.assign({}, editStatus.value[index], {
|
||||
|
||||
@ -2,7 +2,7 @@ import { ref } from "vue";
|
||||
import { utils, writeFile } from "xlsx";
|
||||
import { tableDataDrag } from "../data";
|
||||
import { clone } from "@pureadmin/utils";
|
||||
import { message } from "@pureadmin/components";
|
||||
import { message } from "@/utils/message";
|
||||
|
||||
export function useColumns() {
|
||||
const dataList = ref(clone(tableDataDrag, true));
|
||||
@ -39,7 +39,7 @@ export function useColumns() {
|
||||
const workBook = utils.book_new();
|
||||
utils.book_append_sheet(workBook, workSheet, "数据报表");
|
||||
writeFile(workBook, "pure-admin-table.xlsx");
|
||||
message.success("导出成功");
|
||||
message("导出成功", "success");
|
||||
};
|
||||
|
||||
return {
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { list } from "./base/list";
|
||||
import { Tabs, TabPane } from "@pureadmin/components";
|
||||
|
||||
defineOptions({
|
||||
name: "PureTable"
|
||||
@ -33,21 +32,30 @@ defineOptions({
|
||||
:closable="false"
|
||||
/>
|
||||
|
||||
<Tabs :destroyInactiveTabPane="true">
|
||||
<TabPane v-for="item of list" :key="item.key">
|
||||
<template #tab>
|
||||
<el-tooltip :content="item.content" placement="top-end">
|
||||
<span>{{ item.title }}</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<component :is="item.component" />
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
<el-tabs>
|
||||
<template v-for="(item, index) of list" :key="item.key">
|
||||
<el-tab-pane>
|
||||
<template #label>
|
||||
<el-tooltip
|
||||
:content="`（第 ${index + 1} 个示例）${item.content}`"
|
||||
placement="top-end"
|
||||
>
|
||||
<span>{{ item.title }}</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<component :is="item.component" />
|
||||
</el-tab-pane>
|
||||
</template>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:deep(.ant-tabs-content-holder) {
|
||||
:deep(.el-tabs__nav-wrap)::after {
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__header) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { ref } from "vue";
|
||||
import dayjs from "dayjs";
|
||||
import { message } from "@/utils/message";
|
||||
import { ElMessageBox } from "element-plus";
|
||||
import { Switch, message } from "@pureadmin/components";
|
||||
|
||||
export function useColumns() {
|
||||
const switchLoadMap = ref({});
|
||||
@ -53,14 +53,15 @@ export function useColumns() {
|
||||
prop: "status",
|
||||
width: 130,
|
||||
cellRenderer: scope => (
|
||||
<Switch
|
||||
<el-switch
|
||||
size={scope.props.size === "small" ? "small" : "default"}
|
||||
loading={switchLoadMap.value[scope.index]?.loading}
|
||||
v-model:checked={scope.row.status}
|
||||
checkedValue={1}
|
||||
unCheckedValue={0}
|
||||
checked-children="已开启"
|
||||
un-checked-children="已关闭"
|
||||
v-model={scope.row.status}
|
||||
active-value={1}
|
||||
inactive-value={0}
|
||||
active-text="已开启"
|
||||
inactive-text="已关闭"
|
||||
inline-prompt
|
||||
onChange={() => onChange(scope as any)}
|
||||
/>
|
||||
)
|
||||
@ -112,7 +113,7 @@ export function useColumns() {
|
||||
loading: false
|
||||
}
|
||||
);
|
||||
message.success("已成功修改角色状态");
|
||||
message("已成功修改角色状态", "success");
|
||||
}, 300);
|
||||
})
|
||||
.catch(() => {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { ref } from "vue";
|
||||
import dayjs from "dayjs";
|
||||
import { message } from "@/utils/message";
|
||||
import { ElMessageBox } from "element-plus";
|
||||
import { Switch, message } from "@pureadmin/components";
|
||||
|
||||
export function useColumns() {
|
||||
const switchLoadMap = ref({});
|
||||
@ -58,14 +58,15 @@ export function useColumns() {
|
||||
prop: "status",
|
||||
width: 130,
|
||||
cellRenderer: scope => (
|
||||
<Switch
|
||||
<el-switch
|
||||
size={scope.props.size === "small" ? "small" : "default"}
|
||||
loading={switchLoadMap.value[scope.index]?.loading}
|
||||
v-model:checked={scope.row.status}
|
||||
checkedValue={1}
|
||||
unCheckedValue={0}
|
||||
checked-children="已开启"
|
||||
un-checked-children="已关闭"
|
||||
v-model={scope.row.status}
|
||||
active-value={1}
|
||||
inactive-value={0}
|
||||
active-text="已开启"
|
||||
inactive-text="已关闭"
|
||||
inline-prompt
|
||||
onChange={() => onChange(scope as any)}
|
||||
/>
|
||||
)
|
||||
@ -117,7 +118,7 @@ export function useColumns() {
|
||||
loading: false
|
||||
}
|
||||
);
|
||||
message.success("已成功修改用户状态");
|
||||
message("已成功修改用户状态", "success");
|
||||
}, 300);
|
||||
})
|
||||
.catch(() => {
|
||||
|
||||
@ -1,16 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from "vue";
|
||||
import { clone } from "@pureadmin/utils";
|
||||
import { transformI18n } from "@/plugins/i18n";
|
||||
import { TreeSelect } from "@pureadmin/components";
|
||||
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
|
||||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||
import {
|
||||
deleteChildren,
|
||||
getNodeByUniqueId,
|
||||
appendFieldByUniqueId
|
||||
} from "@/utils/tree";
|
||||
import { useDetail } from "./hooks";
|
||||
import { ref, computed } from "vue";
|
||||
import { clone } from "@pureadmin/utils";
|
||||
import { transformI18n } from "@/plugins/i18n";
|
||||
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
|
||||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||
|
||||
defineOptions({
|
||||
name: "Tabs"
|
||||
@ -25,14 +24,15 @@ const treeData = computed(() => {
|
||||
});
|
||||
});
|
||||
|
||||
const value = ref<string[]>([]);
|
||||
const currentValues = ref<string[]>([]);
|
||||
|
||||
const multiTags = computed(() => {
|
||||
return useMultiTagsStoreHook()?.multiTags;
|
||||
});
|
||||
|
||||
function onCloseTags() {
|
||||
value.value.forEach(uniqueId => {
|
||||
if (currentValues.value.length === 0) return;
|
||||
currentValues.value.forEach(uniqueId => {
|
||||
const currentPath =
|
||||
getNodeByUniqueId(treeData.value, uniqueId).redirect ??
|
||||
getNodeByUniqueId(treeData.value, uniqueId).path;
|
||||
@ -77,32 +77,27 @@ function onCloseTags() {
|
||||
</div>
|
||||
|
||||
<el-divider />
|
||||
<TreeSelect
|
||||
<el-tree-select
|
||||
class="w-[300px]"
|
||||
v-model:value="value"
|
||||
show-search
|
||||
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
|
||||
node-key="uniqueId"
|
||||
placeholder="请选择要关闭的标签"
|
||||
:fieldNames="{
|
||||
children: 'children',
|
||||
key: 'uniqueId',
|
||||
value: 'uniqueId'
|
||||
}"
|
||||
allow-clear
|
||||
clearable
|
||||
multiple
|
||||
tree-default-expand-all
|
||||
:tree-data="treeData"
|
||||
filterable
|
||||
default-expand-all
|
||||
:props="{
|
||||
label: data => transformI18n(data.meta.title),
|
||||
value: 'uniqueId',
|
||||
children: 'children',
|
||||
disabled: 'disabled'
|
||||
}"
|
||||
:data="treeData"
|
||||
v-model="currentValues"
|
||||
>
|
||||
<template #tagRender="{ closable, onClose, option }">
|
||||
<el-tag class="mr-[3px]" :closable="closable" @close="onClose">
|
||||
{{ transformI18n(option.meta.title) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
|
||||
<template #title="{ data }">
|
||||
<template #default="{ data }">
|
||||
<span>{{ transformI18n(data.meta.title) }}</span>
|
||||
</template>
|
||||
</TreeSelect>
|
||||
</el-tree-select>
|
||||
<el-button class="m-2" @click="onCloseTags">关闭标签</el-button>
|
||||
|
||||
<el-divider />
|
||||
|
||||
5
types/shims-vue.d.ts
vendored
5
types/shims-vue.d.ts
vendored
@ -9,8 +9,7 @@ declare module "*.scss" {
|
||||
export default scss;
|
||||
}
|
||||
|
||||
declare module "vuedraggable/src/vuedraggable";
|
||||
declare module "vue-virtual-scroller";
|
||||
declare module "@pureadmin/components";
|
||||
declare module "@pureadmin/theme";
|
||||
declare module "vue-virtual-scroller";
|
||||
declare module "vuedraggable/src/vuedraggable";
|
||||
declare module "@pureadmin/theme/dist/browser-utils";
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user