mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-07 00:47:19 +08:00
feat: add @pureadmin/components
This commit is contained in:
xiaoxian521
parent
c9026a45cc
commit
8d539d4c21
@ -30,6 +30,7 @@
|
||||
"@ctrl/tinycolor": "^3.4.0",
|
||||
"@logicflow/core": "0.7.1",
|
||||
"@logicflow/extension": "0.7.1",
|
||||
"@pureadmin/components": "^0.0.9",
|
||||
"@vueuse/core": "^7.7.0",
|
||||
"@vueuse/motion": "^2.0.0-beta.9",
|
||||
"@vueuse/shared": "^7.7.0",
|
||||
|
||||
47
pnpm-lock.yaml
generated
47
pnpm-lock.yaml
generated
@ -12,6 +12,7 @@ specifiers:
|
||||
"@iconify/vue": ^3.1.3
|
||||
"@logicflow/core": 0.7.1
|
||||
"@logicflow/extension": 0.7.1
|
||||
"@pureadmin/components": ^0.0.9
|
||||
"@types/element-resize-detector": 1.1.3
|
||||
"@types/js-cookie": ^3.0.1
|
||||
"@types/lodash-es": ^4.17.6
|
||||
@ -104,6 +105,7 @@ dependencies:
|
||||
"@ctrl/tinycolor": 3.4.0
|
||||
"@logicflow/core": 0.7.1
|
||||
"@logicflow/extension": 0.7.1
|
||||
"@pureadmin/components": 0.0.9_vue@3.2.31
|
||||
"@vueuse/core": 7.7.0_vue@3.2.31
|
||||
"@vueuse/motion": 2.0.0-beta.9_vue@3.2.31
|
||||
"@vueuse/shared": 7.7.0_vue@3.2.31
|
||||
@ -218,6 +220,37 @@ packages:
|
||||
"@jridgewell/trace-mapping": 0.3.4
|
||||
dev: true
|
||||
|
||||
/@ant-design/colors/5.1.1:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-Txy4KpHrp3q4XZdfgOBqLl+lkQIc3tEvHXOimRN1giX1AEC7mGtyrO9p8iRGJ3FLuVMGa2gNEzQyghVymLttKQ==
|
||||
}
|
||||
dependencies:
|
||||
"@ctrl/tinycolor": 3.4.0
|
||||
dev: false
|
||||
|
||||
/@ant-design/icons-svg/4.2.1:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-EB0iwlKDGpG93hW8f85CTJTs4SvMX7tt5ceupvhALp1IF44SeUFOMhKUOYqpsoYWQKAOuTRDMqn75rEaKDp0Xw==
|
||||
}
|
||||
dev: false
|
||||
|
||||
/@ant-design/icons-vue/6.0.1_vue@3.2.31:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-HigIgEVV6bbcrz2A92/qDzi/aKWB5EC6b6E1mxMB6aQA7ksiKY+gi4U94TpqyEIIhR23uaDrjufJ+xCZQ+vx6Q==
|
||||
}
|
||||
peerDependencies:
|
||||
vue: ">=3.0.3"
|
||||
dependencies:
|
||||
"@ant-design/colors": 5.1.1
|
||||
"@ant-design/icons-svg": 4.2.1
|
||||
"@types/lodash": 4.14.179
|
||||
lodash: 4.17.21
|
||||
vue: 3.2.31
|
||||
dev: false
|
||||
|
||||
/@antfu/utils/0.5.0:
|
||||
resolution:
|
||||
{
|
||||
@ -1110,6 +1143,19 @@ packages:
|
||||
}
|
||||
dev: false
|
||||
|
||||
/@pureadmin/components/0.0.9_vue@3.2.31:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-WCxmnKRDwB+51aEFHr5snIytDCjJuovucfQhVJroQleFYsFga+aYKwmvIRFutOkqVa5hndUXLcUm9k8oTKngcQ==
|
||||
}
|
||||
peerDependencies:
|
||||
vue: ^3.2.0
|
||||
dependencies:
|
||||
"@ant-design/icons-svg": 4.2.1
|
||||
"@ant-design/icons-vue": 6.0.1_vue@3.2.31
|
||||
vue: 3.2.31
|
||||
dev: false
|
||||
|
||||
/@rollup/plugin-node-resolve/13.1.3:
|
||||
resolution:
|
||||
{
|
||||
@ -1202,7 +1248,6 @@ packages:
|
||||
{
|
||||
integrity: sha512-uwc1x90yCKqGcIOAT6DwOSuxnrAbpkdPsUOZtwrXb4D/6wZs+6qG7QnIawDuZWg0sWpxl+ltIKCaLoMlna678w==
|
||||
}
|
||||
dev: true
|
||||
|
||||
/@types/minimatch/3.0.5:
|
||||
resolution:
|
||||
|
||||
@ -1,8 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import NoticeList from "./noticeList.vue";
|
||||
import { noticesData } from "./data";
|
||||
import NoticeList from "./noticeList.vue";
|
||||
import { templateRef } from "@vueuse/core";
|
||||
import { Tabs, TabPane } from "@pureadmin/components";
|
||||
|
||||
const dropdownDom = templateRef<ElRef | null>("dropdownDom", null);
|
||||
const activeName = ref(noticesData[0].name);
|
||||
const notices = ref(noticesData);
|
||||
|
||||
@ -10,10 +13,15 @@ let noticesNum = ref(0);
|
||||
notices.value.forEach(notice => {
|
||||
noticesNum.value += notice.list.length;
|
||||
});
|
||||
|
||||
function tabClick() {
|
||||
// @ts-expect-error
|
||||
dropdownDom.value.handleOpen();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dropdown trigger="click" placement="bottom-end">
|
||||
<el-dropdown ref="dropdownDom" trigger="click" placement="bottom-end">
|
||||
<span class="dropdown-badge">
|
||||
<el-badge :value="noticesNum" :max="99">
|
||||
<el-icon class="header-notice-icon"
|
||||
@ -23,25 +31,33 @@ notices.value.forEach(notice => {
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-tabs v-model="activeName" class="dropdown-tabs">
|
||||
<Tabs
|
||||
centered
|
||||
class="dropdown-tabs"
|
||||
v-model:activeName="activeName"
|
||||
@tabClick="tabClick"
|
||||
>
|
||||
<template v-for="item in notices" :key="item.key">
|
||||
<el-tab-pane
|
||||
:label="`${item.name}(${item.list.length})`"
|
||||
:name="item.name"
|
||||
>
|
||||
<TabPane :tab="`${item.name}(${item.list.length})`">
|
||||
<el-scrollbar max-height="330px">
|
||||
<div class="noticeList-container">
|
||||
<NoticeList :list="item.list" />
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</el-tab-pane>
|
||||
</TabPane>
|
||||
</template>
|
||||
</el-tabs>
|
||||
</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;
|
||||
@ -79,4 +95,8 @@ notices.value.forEach(notice => {
|
||||
padding: 15px 24px 0 24px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-tabs-nav) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -10,8 +10,8 @@ const props = defineProps({
|
||||
});
|
||||
|
||||
const titleRef = ref(null);
|
||||
const descriptionRef = ref(null);
|
||||
const titleTooltip = ref(false);
|
||||
const descriptionRef = ref(null);
|
||||
const descriptionTooltip = ref(false);
|
||||
|
||||
function hoverTitle() {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { PropType } from "vue";
|
||||
import NoticeItem from "./noticeItem.vue";
|
||||
import { ListItem } from "./data";
|
||||
import NoticeItem from "./noticeItem.vue";
|
||||
|
||||
const props = defineProps({
|
||||
list: {
|
||||
|
||||
@ -13,6 +13,7 @@ import "animate.css";
|
||||
import "virtual:windi.css";
|
||||
// 导入公共样式
|
||||
import "./style/index.scss";
|
||||
import "@pureadmin/components/dist/index.min.css";
|
||||
// 导入字体图标
|
||||
import "./assets/iconfont/iconfont.js";
|
||||
import "./assets/iconfont/iconfont.css";
|
||||
|
||||
@ -93,3 +93,29 @@ ul {
|
||||
.mobile-spacing {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// @pureadmin/components 样式覆盖
|
||||
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
|
||||
color: var(--el-color-primary) !important;
|
||||
}
|
||||
.ant-tabs-ink-bar {
|
||||
background: var(--el-color-primary) !important;
|
||||
}
|
||||
.ant-tabs-tab,
|
||||
.ant-tabs-tab-btn {
|
||||
&:hover {
|
||||
color: var(--el-color-primary) !important;
|
||||
}
|
||||
}
|
||||
// .ant-tabs-tab-btn:focus,
|
||||
// .ant-tabs-tab-remove:focus,
|
||||
// .ant-tabs-tab-btn:active,
|
||||
// .ant-tabs-tab-remove:active {
|
||||
// color: var(--el-color-primary) !important;
|
||||
// }
|
||||
// .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
|
||||
// color: var(--el-color-primary) !important;
|
||||
// }
|
||||
// .ant-tabs-card > div > .ant-tabs-nav .ant-tabs-tab-active {
|
||||
// color: var(--el-color-primary) !important;
|
||||
// }
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user