From bac41f84265ae40d71eeec16ccf6fb9a9c9fb0d6 Mon Sep 17 00:00:00 2001
From: tuqin <tuqin@tuqin.cn>
Date: 星期二, 03 十一月 2026 22:24:12 +0800
Subject: [PATCH] style(bpm): 修复「发起流程」左侧分类栏超出卡片边界
---
src/views/bpm/processInstance/create/index.vue | 78 ++++++++++++++++++++++++++++++++++++++
1 files changed, 77 insertions(+), 1 deletions(-)
diff --git a/src/views/bpm/processInstance/create/index.vue b/src/views/bpm/processInstance/create/index.vue
index 638fed5..4dec5e2 100644
--- a/src/views/bpm/processInstance/create/index.vue
+++ b/src/views/bpm/processInstance/create/index.vue
@@ -208,7 +208,7 @@
</div>
</template>
- <div v-if="filteredProcessDefinitionList?.length" class="-ml-6">
+ <div v-if="filteredProcessDefinitionList?.length" class="process-tabs">
<Tabs v-model:active-key="activeCategory" tab-position="left">
<Tabs.TabPane
v-for="category in availableCategories"
@@ -301,4 +301,80 @@
.animate-bounce-once {
animation: bounce 0.5s ease;
}
+
+/**
+ * 宸︿晶娴佺▼鍒嗙被鏍忔牱寮忎慨姝ｏ細
+ * 鍒嗙被杈冨鏃讹紙濡� 22 涓級宸︿晶 tab 浼氫竴鐩村線涓嬫拺锛岃秴鍑哄崱鐗囪竟鐣屻��
+ * 杩欓噷鎶婂崱鐗囧唴瀹瑰尯鍥哄畾涓哄墿浣欓珮搴︼紝宸︿晶鍒嗙被鏍忎笌鍙充晶娴佺▼鍖哄悇鑷嫭绔嬫粴鍔ㄣ��
+ */
+:deep(.ant-card-body) {
+ display: flex;
+ flex-direction: column;
+ height: calc(100% - 57px);
+ min-height: 0;
+ overflow: hidden;
+}
+
+.process-tabs {
+ display: flex;
+ flex: 1;
+ min-height: 0;
+ overflow: hidden;
+
+ :deep(.ant-tabs) {
+ flex: 1;
+ min-height: 0;
+ overflow: hidden;
+ }
+
+ /* 宸︿晶鍒嗙被鏍忥細闄愰珮 + 鐙珛婊氬姩锛屼笉鍐嶆拺鐮村崱鐗� */
+ :deep(.ant-tabs-left) {
+ height: 100%;
+ min-height: 0;
+
+ > .ant-tabs-nav {
+ flex: 0 0 auto;
+ max-height: 100%;
+ padding-right: 4px;
+ overflow-x: hidden;
+ overflow-y: auto;
+ overscroll-behavior: contain;
+
+ /* 婊氬姩鏉℃敹缁嗕竴鐐癸紝閬垮厤鍗犵敤鏍囩瀹藉害 */
+ scrollbar-width: thin;
+
+ &::-webkit-scrollbar {
+ width: 4px;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background: rgb(0 0 0 / 15%);
+ border-radius: 2px;
+ }
+ }
+
+ .ant-tabs-nav-list {
+ width: 100%;
+ }
+
+ .ant-tabs-tab {
+ max-width: 200px;
+ padding: 8px 12px;
+
+ .ant-tabs-tab-btn {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ }
+
+ /* 鍙充晶娴佺▼鍗＄墖鍖猴細鐙珛婊氬姩 */
+ > .ant-tabs-content-holder {
+ min-height: 0;
+ overflow-x: hidden;
+ overflow-y: auto;
+ overscroll-behavior: contain;
+ }
+ }
+}
</style>
--
Gitblit v1.9.3