提交
This commit is contained in:
zlwu committed
1 parent
d84f4b944c
commit
7c838cfb2d
249 files changed
+50600
-18556
No files matched your search
@@ -3,7 +3,7 @@
|
||||
height: 100vh;
|
||||
user-select: none;
|
||||
scrollbar-width: none;
|
||||
border-right: none;
|
||||
border-right: 1px solid var(--mint-border, #d9e8e2);
|
||||
background: var(--mint-surface, #fff);
|
||||
|
||||
&.layout-sidebar-portal {
|
||||
@@ -106,18 +106,18 @@
|
||||
overflow: hidden;
|
||||
background: var(--mint-surface, #fff);
|
||||
|
||||
// 长菜单名完整展示：侧栏宽度不变，内容区可横向滚动
|
||||
// 长菜单名在侧栏内省略展示（对齐 zkxw Fresh Mint 侧栏）
|
||||
:deep(.el-scrollbar__wrap) {
|
||||
overflow-x: auto !important;
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
|
||||
:deep(.el-scrollbar__view) {
|
||||
width: max-content;
|
||||
min-width: 100%;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
:deep(.el-scrollbar__bar.is-horizontal) {
|
||||
height: 4px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media only screen and (width <= 640px) {
|
||||
|
||||
@@ -10,16 +10,23 @@ $popup-menu-padding: 8px;
|
||||
$popup-menu-margin: 5px;
|
||||
$popup-menu-radius: 6px;
|
||||
|
||||
// 通用菜单项样式（min-width 保证短标题仍铺满侧栏；width: max-content 允许长标题撑开以配合横向滚动）
|
||||
// 通用菜单项样式（宽度铺满侧栏，长标题省略）
|
||||
@mixin menu-item-base {
|
||||
width: max-content;
|
||||
min-width: calc(100% - 12px);
|
||||
margin-left: 6px;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
margin-left: 0;
|
||||
border-radius: 8px;
|
||||
|
||||
.menu-icon {
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
.menu-name {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
// 通用 hover 样式
|
||||
@@ -31,17 +38,26 @@ $popup-menu-radius: 6px;
|
||||
}
|
||||
|
||||
// 通用选中样式
|
||||
@mixin menu-active($color, $bg-color, $icon-color: var(--theme-color)) {
|
||||
@mixin menu-active($color, $bg-color, $icon-color: $color) {
|
||||
.el-menu-item.is-active {
|
||||
color: $color !important;
|
||||
background-color: $bg-color;
|
||||
font-weight: 600;
|
||||
|
||||
&:hover {
|
||||
background-color: $bg-color !important;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
.art-svg-icon {
|
||||
color: $icon-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
span,
|
||||
.menu-name {
|
||||
color: $color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -107,16 +123,8 @@ $popup-menu-radius: 6px;
|
||||
// 菜单折叠样式
|
||||
.menu-left-close {
|
||||
.header {
|
||||
.header-brand {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.header-brand-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -149,28 +157,44 @@ $popup-menu-radius: 6px;
|
||||
// 菜单高度
|
||||
.el-sub-menu__title,
|
||||
.el-menu-item {
|
||||
position: relative;
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
height: $menu-height !important;
|
||||
margin-bottom: 2px;
|
||||
line-height: $menu-height !important;
|
||||
overflow: visible !important;
|
||||
overflow: hidden !important;
|
||||
|
||||
.menu-title-wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.menu-name {
|
||||
flex-shrink: 0;
|
||||
flex-shrink: 1;
|
||||
min-width: 0;
|
||||
font-size: $menu-font-size !important;
|
||||
font-weight: 500;
|
||||
// Fresh Mint：菜单文字使用主文本色
|
||||
color: var(--mint-text, #1e293b);
|
||||
// Fresh Mint：默认菜单项为中性色（demo `.nav a`）
|
||||
color: var(--mint-text-muted, #64748b);
|
||||
text-rendering: geometricprecision;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.el-sub-menu > .el-sub-menu__title {
|
||||
font-size: 12px !important;
|
||||
font-weight: 700;
|
||||
color: var(--mint-text, #1e293b) !important;
|
||||
color: var(--mint-text-muted, #64748b) !important;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
@@ -184,46 +208,48 @@ $popup-menu-radius: 6px;
|
||||
.el-sub-menu .el-menu {
|
||||
margin: 2px 0 6px 10px;
|
||||
padding: 2px 0 2px 8px !important;
|
||||
border-left: 2px solid var(--mint-border, #d9e8e2);
|
||||
border-left: 2px solid var(--mint-border, #c5e0d4);
|
||||
}
|
||||
|
||||
// 菜单折叠
|
||||
.el-menu--collapse {
|
||||
.el-sub-menu.is-active {
|
||||
.el-sub-menu__title {
|
||||
background-color: var(--primary, #10b981);
|
||||
|
||||
.menu-icon {
|
||||
.art-svg-icon {
|
||||
// 选中菜单图标颜色
|
||||
color: var(--theme-color) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu-item.is-active {
|
||||
background-color: var(--primary, #10b981);
|
||||
color: #fff !important;
|
||||
|
||||
span,
|
||||
.menu-name,
|
||||
.menu-icon .art-svg-icon {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------- Design theme menu ----------------------
|
||||
.el-menu-design {
|
||||
@include theme-menu-base;
|
||||
@include menu-active(
|
||||
var(--mint-primary-dark, #059669),
|
||||
var(--mint-primary-bg, #ecfdf5),
|
||||
var(--mint-primary-dark, #059669)
|
||||
);
|
||||
@include menu-active(#fff, var(--primary, #10b981), #fff);
|
||||
@include menu-hover($hover-bg-color);
|
||||
|
||||
.el-menu-item,
|
||||
.el-sub-menu__title {
|
||||
color: var(--mint-text, #1e293b) !important;
|
||||
}
|
||||
|
||||
// 选中态：以浅底+图标强化为主，文字保持中性色（对齐 fresh-mint demo）
|
||||
.el-menu-item.is-active span {
|
||||
color: var(--mint-primary-dark, #059669) !important;
|
||||
font-weight: 600 !important;
|
||||
color: var(--mint-text-muted, #334155) !important;
|
||||
}
|
||||
|
||||
.el-sub-menu__icon-arrow {
|
||||
color: var(--mint-text);
|
||||
color: var(--mint-text-muted, #64748b);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -248,24 +274,25 @@ $popup-menu-radius: 6px;
|
||||
}
|
||||
|
||||
.el-menu-item.is-active {
|
||||
background-color: var(--mint-primary-bg, #ecfdf5);
|
||||
color: var(--mint-primary-dark, #059669) !important;
|
||||
background-color: var(--primary, #10b981);
|
||||
color: #fff !important;
|
||||
font-weight: 600;
|
||||
|
||||
span {
|
||||
color: var(--mint-primary-dark, #059669) !important;
|
||||
span,
|
||||
.menu-name {
|
||||
color: #fff !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.art-svg-icon {
|
||||
color: var(--mint-primary-dark, #059669) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
@include menu-hover($hover-bg-color);
|
||||
|
||||
.el-sub-menu__icon-arrow {
|
||||
color: var(--mint-text);
|
||||
color: var(--mint-text-muted, #64748b);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -290,6 +317,22 @@ $popup-menu-radius: 6px;
|
||||
@include popup-menu-base(var(--art-gray-200), var(--art-gray-900), var(--art-gray-200));
|
||||
}
|
||||
|
||||
.menu-left-design-popper,
|
||||
.menu-left-light-popper {
|
||||
.el-menu--popup {
|
||||
.el-menu-item.is-active {
|
||||
color: #fff !important;
|
||||
background-color: var(--primary, #10b981) !important;
|
||||
|
||||
span,
|
||||
.menu-name,
|
||||
.art-svg-icon {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 暗黑模式菜单样式
|
||||
.dark {
|
||||
.el-menu--vertical,
|
||||
@@ -304,8 +347,19 @@ $popup-menu-radius: 6px;
|
||||
color: var(--art-gray-800) !important;
|
||||
}
|
||||
|
||||
// 选中的文字颜色跟图标颜色
|
||||
.el-menu-item.is-active {
|
||||
// 选中的文字颜色跟图标颜色（design / light 为深绿底白字）
|
||||
.el-menu-design,
|
||||
.el-menu-light {
|
||||
.el-menu-item.is-active {
|
||||
span,
|
||||
.menu-name,
|
||||
.menu-icon .art-svg-icon {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu-dark .el-menu-item.is-active {
|
||||
span,
|
||||
.menu-icon .art-svg-icon {
|
||||
color: var(--theme-color) !important;
|
||||
|
||||
@@ -49,22 +49,25 @@
|
||||
.portal-header {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 72px;
|
||||
padding: 0 20px;
|
||||
height: 56px;
|
||||
padding: 0 var(--mint-content-padding, 24px);
|
||||
user-select: none;
|
||||
background: var(--default-bg-color, #fff);
|
||||
border-bottom: 1px solid var(--art-card-border, #d9e8e2);
|
||||
background: var(--mint-surface, #fff);
|
||||
border-bottom: 1px solid var(--mint-border, #d9e8e2);
|
||||
}
|
||||
|
||||
.portal-header-brand {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
gap: 10px;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
margin-right: 12px;
|
||||
padding-right: 16px;
|
||||
cursor: pointer;
|
||||
border-right: 1px solid var(--mint-border, #d9e8e2);
|
||||
}
|
||||
|
||||
.portal-header-logo {
|
||||
@@ -72,18 +75,19 @@
|
||||
}
|
||||
|
||||
.portal-header-title {
|
||||
max-width: 180px;
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 1.35;
|
||||
color: var(--mint-text, #1e293b);
|
||||
white-space: nowrap;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.portal-header-nav {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-left: 24px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.portal-header-actions {
|
||||
|
||||
@@ -95,9 +95,9 @@
|
||||
.portal-top-nav-list {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: 10px;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
min-height: 56px;
|
||||
min-height: 48px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
@@ -106,11 +106,13 @@
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
gap: 4px;
|
||||
gap: 2px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 72px;
|
||||
padding: 8px 12px;
|
||||
min-width: 64px;
|
||||
height: 48px;
|
||||
padding: 4px 10px;
|
||||
margin: 0 2px;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
@@ -120,27 +122,24 @@
|
||||
color 0.2s ease;
|
||||
|
||||
&__icon {
|
||||
font-size: 22px;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
color: var(--mint-text-muted, #64748b);
|
||||
}
|
||||
|
||||
&__label {
|
||||
max-width: 88px;
|
||||
max-width: 80px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 12px;
|
||||
line-height: 1.3;
|
||||
color: var(--mint-text, #1e293b);
|
||||
font-size: 13px;
|
||||
line-height: 1.2;
|
||||
color: var(--mint-text-muted, #64748b);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&:hover:not(.is-active) {
|
||||
background: var(--primary-bg, #ecfdf5);
|
||||
|
||||
.portal-top-nav-card__icon,
|
||||
.portal-top-nav-card__label {
|
||||
color: var(--primary-dark, #059669);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
@@ -149,6 +148,7 @@
|
||||
.portal-top-nav-card__icon,
|
||||
.portal-top-nav-card__label {
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -480,7 +480,7 @@
|
||||
<style scoped>
|
||||
.worktab-strip {
|
||||
position: relative;
|
||||
padding: 0 24px 12px !important;
|
||||
padding: 0 24px 4px !important;
|
||||
background: var(--mint-surface);
|
||||
overflow: visible !important;
|
||||
}
|
||||
@@ -495,7 +495,7 @@
|
||||
z-index: 1;
|
||||
max-width: 220px;
|
||||
padding: 10px 16px !important;
|
||||
margin-bottom: -11px;
|
||||
margin-bottom: -7px;
|
||||
overflow: hidden;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
|
||||
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div
|
||||
class="filter-date-shortcuts list-toolbar-date-shortcuts"
|
||||
role="group"
|
||||
:aria-label="ariaLabel"
|
||||
>
|
||||
<el-button
|
||||
v-for="item in shortcutItems"
|
||||
:key="item.type"
|
||||
size="small"
|
||||
class="btn-ghost date-shortcut-btn"
|
||||
:class="{ 'is-active': active === item.type }"
|
||||
@click="emit('change', item.type)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { DateShortcutType } from '@/composables/useListDateShortcut'
|
||||
|
||||
defineProps<{
|
||||
active: DateShortcutType
|
||||
ariaLabel?: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
change: [type: DateShortcutType]
|
||||
}>()
|
||||
|
||||
const shortcutItems: Array<{ type: DateShortcutType; label: string }> = [
|
||||
{ type: 'all', label: '全部' },
|
||||
{ type: 'yesterday', label: '昨日' },
|
||||
{ type: 'today', label: '今日' },
|
||||
{ type: 'tomorrow', label: '明日' },
|
||||
{ type: 'week', label: '本周' }
|
||||
]
|
||||
</script>
|
||||
@@ -169,7 +169,7 @@
|
||||
// 默认分页常量
|
||||
const DEFAULT_PAGINATION_OPTIONS: PaginationOptions = {
|
||||
pageSizes: [10, 20, 30, 50, 100],
|
||||
align: 'center',
|
||||
align: 'right',
|
||||
background: true,
|
||||
layout: layout.value,
|
||||
hideOnSinglePage: false,
|
||||
|
||||
Reference in new issue
Block a user