20260807230157
This commit is contained in:
1 parent
a07b1b6fdb
commit
fa510854b4
7 files changed
+135
-57
No files matched your search
@@ -876,7 +876,6 @@ defineExpose({
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--fms-border, #e5e7eb);
|
||||
border-radius: 6px;
|
||||
background: var(--fms-surface, #fff);
|
||||
}
|
||||
|
||||
@@ -244,8 +244,7 @@ watch(() => props.queryItems, initializeDrafts, { immediate: true });
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid var(--fms-border, #e5e7eb);
|
||||
padding: 8px 0;
|
||||
background: var(--fms-surface, #fff);
|
||||
}
|
||||
|
||||
|
||||
@@ -253,6 +253,8 @@ const customVars = {
|
||||
"--header-row-height": `${headerRowHeight}px`,
|
||||
"--row-height": `${rowHeight}px`,
|
||||
"--footer-row-height": "36px",
|
||||
"--th-bgc": "#fff",
|
||||
"--tf-bgc": "#fff",
|
||||
};
|
||||
|
||||
// 选择列:已选状态管理 + 渲染逻辑全部内聚在 createSelectionColumn 中
|
||||
@@ -498,10 +500,10 @@ defineExpose({
|
||||
:data-source="dataSource"
|
||||
:drag-row-config="{ mode: rowDraggable ? 'insert' : 'none' }"
|
||||
:row-key="rowKey"
|
||||
:bordered="props.editable ? true : 'body-h'"
|
||||
:no-data-full="noDataFull"
|
||||
:show-overflow="showOverflow"
|
||||
:area-selection="editable"
|
||||
:bordered="'h'"
|
||||
@area-selection-change="handleAreaSelectionChange"
|
||||
@row-order-change="handleRowOrderChange"
|
||||
>
|
||||
@@ -529,6 +531,14 @@ defineExpose({
|
||||
<!-- 非 scoped 全局样式:选择列原生 checkbox 外观模拟 antdv-next Checkbox,
|
||||
避免每行创建 Checkbox 组件实例导致的滚动性能退化 -->
|
||||
<style lang="scss">
|
||||
/* 双类选择器 .fms-table__inner.stk-table 权重 (0,2,1) > 库默认 .stk-table (0,1,1) */
|
||||
.fms-table__inner.stk-table {
|
||||
th,
|
||||
td {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.fms-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -454,8 +454,8 @@ onMounted(() => {
|
||||
color: #3f3f46;
|
||||
font-weight: 500;
|
||||
box-shadow:
|
||||
0 1px 3px rgb(0 0 0 / 4%),
|
||||
0 2px 4px rgb(0 0 0 / 3%);
|
||||
0 1px 2px rgb(0 0 0 / 2%),
|
||||
0 1px 1px rgb(0 0 0 / 1%);
|
||||
}
|
||||
|
||||
&.collapsed {
|
||||
|
||||
@@ -149,6 +149,20 @@ function handleTabKeydown(event, index) {
|
||||
focusAdjacentTab(index, event.key === "ArrowLeft" ? -1 : 1);
|
||||
}
|
||||
|
||||
function handleWheel(event) {
|
||||
const track = trackRef.value;
|
||||
if (!track || track.scrollWidth <= track.clientWidth) return;
|
||||
const delta =
|
||||
Math.abs(event.deltaY) >= Math.abs(event.deltaX) ? event.deltaY : event.deltaX;
|
||||
if (!delta) return;
|
||||
event.preventDefault();
|
||||
track.scrollLeft += delta;
|
||||
}
|
||||
|
||||
function refreshTab(key) {
|
||||
appStore.refreshRoute(key);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -166,12 +180,12 @@ function handleTabKeydown(event, index) {
|
||||
</button>
|
||||
|
||||
<!-- 标签轨道 -->
|
||||
<div ref="trackRef" class="tab-track" role="tablist" @scroll.passive="updateScrollState">
|
||||
<div ref="trackRef" class="tab-track" role="tablist" @scroll.passive="updateScrollState" @wheel="handleWheel">
|
||||
<div
|
||||
v-for="(item, index) in tabItems"
|
||||
:key="item.key"
|
||||
class="tab-item"
|
||||
:class="{ 'tab-item--active': item.key === activeTab }"
|
||||
:class="{ 'tab-item--active': item.key === activeTab, 'tab-item--closable': item.closable }"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
@@ -182,6 +196,7 @@ function handleTabKeydown(event, index) {
|
||||
:tabindex="item.key === activeTab ? 0 : -1"
|
||||
@click="changeTab(item.key)"
|
||||
@keydown="handleTabKeydown($event, index)"
|
||||
@dblclick.prevent="refreshTab(item.key)"
|
||||
>
|
||||
<span>{{ getDisplayTabLabel(item) }}</span>
|
||||
</button>
|
||||
@@ -274,8 +289,9 @@ function handleTabKeydown(event, index) {
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- 标签项(应用 tab 药丸式) ---- */
|
||||
/* ---- 标签项(浅灰高亮,与侧栏选中语言统一) ---- */
|
||||
.tab-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex: none;
|
||||
min-width: 72px;
|
||||
@@ -283,32 +299,34 @@ function handleTabKeydown(event, index) {
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
background: #f4f4f5;
|
||||
color: #71717a;
|
||||
transition:
|
||||
background-color 0.15s ease,
|
||||
color 0.15s ease;
|
||||
|
||||
background: #f4f4f5;
|
||||
|
||||
&:hover {
|
||||
background: #ebebeb;
|
||||
background: #f4f4f5;
|
||||
color: #3f3f46;
|
||||
}
|
||||
|
||||
/* 选中态:实心深色药丸,应用 tab 的醒目语言 */
|
||||
/* 选中态:纯白凸起药丸(inset 描边 + 轻投影,边缘利落不脏);关闭 X 作为会话标签的强区分信号 */
|
||||
&--active {
|
||||
color: #ffffff;
|
||||
color: #27272a;
|
||||
font-weight: 500;
|
||||
background: #18181b;
|
||||
background: #ffffff;
|
||||
box-shadow:
|
||||
inset 0 0 0 1px #e4e4e7,
|
||||
0 1px 2px rgb(0 0 0 / 6%),
|
||||
0 1px 1px rgb(0 0 0 / 4%);
|
||||
|
||||
&:hover {
|
||||
background: #27272a;
|
||||
color: #ffffff;
|
||||
background: #ffffff;
|
||||
color: #27272a;
|
||||
}
|
||||
|
||||
.tab-item__close:hover {
|
||||
background: rgb(255 255 255 / 12%);
|
||||
background: rgb(0 0 0 / 8%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -330,6 +348,7 @@ function handleTabKeydown(event, index) {
|
||||
padding: 0 8px;
|
||||
font-size: 13px;
|
||||
overflow: hidden;
|
||||
transition: padding-right 0.15s ease;
|
||||
|
||||
span {
|
||||
white-space: nowrap;
|
||||
@@ -338,16 +357,30 @@ function handleTabKeydown(event, index) {
|
||||
}
|
||||
}
|
||||
|
||||
/* 仅可关闭标签预留右侧 X 空间;不可关闭(如工作台)保持对称居中 */
|
||||
&--closable &__select {
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
&__close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 2px;
|
||||
bottom: 0;
|
||||
display: grid;
|
||||
flex: none;
|
||||
width: 22px;
|
||||
padding: 0;
|
||||
place-items: center;
|
||||
border-radius: 4px;
|
||||
color: #a1a1aa;
|
||||
transition:
|
||||
background-color 0.15s ease,
|
||||
color 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
background: rgb(0 0 0 / 8%);
|
||||
color: #71717a;
|
||||
}
|
||||
|
||||
.lucide {
|
||||
|
||||
@@ -89,7 +89,9 @@ function handleClick() {
|
||||
background: #f4f4f5;
|
||||
color: #3f3f46;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 1px 3px rgb(0 0 0 / 4%), 0 2px 4px rgb(0 0 0 / 3%);
|
||||
box-shadow:
|
||||
0 1px 2px rgb(0 0 0 / 2%),
|
||||
0 1px 1px rgb(0 0 0 / 1%);
|
||||
}
|
||||
|
||||
/* ---- 可展开的父级按钮 ---- */
|
||||
|
||||
@@ -1138,7 +1138,34 @@ void permissionStore
|
||||
<main class="mm-main">
|
||||
<FmsLoadingOverlay :loading="configLoading">
|
||||
<template v-if="selectedModule">
|
||||
<!-- 顶部栏:tabs + 开关 + 操作 -->
|
||||
<!-- 顶部操作栏:模块级操作(保存 / 启用 / 显示菜单),独立于 tab 导航 -->
|
||||
<div class="mm-action-bar">
|
||||
<a-button
|
||||
v-if="canManage('update')"
|
||||
type="primary"
|
||||
:loading="configSaving"
|
||||
:disabled="configLoading || configSyncing"
|
||||
@click="saveAll"
|
||||
>
|
||||
保存
|
||||
</a-button>
|
||||
<div class="mm-action-bar__switches">
|
||||
<label class="mm-switch"><span>启用</span><a-switch
|
||||
:checked="drafts.module?.b_canuse === 1"
|
||||
:disabled="busy"
|
||||
@update:checked="(v) => onSetField('b_canuse', v ? 1 : 0)"
|
||||
/></label>
|
||||
<template v-if="drafts.module?.b_module_type !== 'data'">
|
||||
<label class="mm-switch"><span>显示菜单</span><a-switch
|
||||
:checked="drafts.module?.b_canmenu === 1"
|
||||
:disabled="busy || ['data', 'data_category'].includes(drafts.module?.b_module_type)"
|
||||
@update:checked="(v) => onSetField('b_canmenu', v ? 1 : 0)"
|
||||
/></label>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 顶部栏:tab 导航 -->
|
||||
<div class="mm-tab-bar">
|
||||
<nav class="mm-tab-nav">
|
||||
<button
|
||||
@@ -1152,29 +1179,6 @@ void permissionStore
|
||||
{{ tab.tab }}
|
||||
</button>
|
||||
</nav>
|
||||
<div class="mm-tab-bar__right">
|
||||
<label class="mm-switch"><span>启用</span><a-checkbox
|
||||
:checked="drafts.module?.b_canuse === 1"
|
||||
:disabled="busy"
|
||||
@update:checked="(v) => onSetField('b_canuse', v ? 1 : 0)"
|
||||
/></label>
|
||||
<template v-if="drafts.module?.b_module_type !== 'data'">
|
||||
<label class="mm-switch"><span>显示菜单</span><a-checkbox
|
||||
:checked="drafts.module?.b_canmenu === 1"
|
||||
:disabled="busy || ['data', 'data_category'].includes(drafts.module?.b_module_type)"
|
||||
@update:checked="(v) => onSetField('b_canmenu', v ? 1 : 0)"
|
||||
/></label>
|
||||
</template>
|
||||
<a-button
|
||||
v-if="canManage('update')"
|
||||
type="primary"
|
||||
:loading="configSaving"
|
||||
:disabled="configLoading || configSyncing"
|
||||
@click="saveAll"
|
||||
>
|
||||
保存
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 面板内容 -->
|
||||
@@ -1353,20 +1357,32 @@ void permissionStore
|
||||
background: var(--fms-surface);
|
||||
}
|
||||
|
||||
/* ---- 顶部栏:tabs + 开关 + 操作 ---- */
|
||||
/* ---- 顶部操作栏:模块级操作(启用 / 显示菜单 / 保存),独立于 tab 导航 ---- */
|
||||
.mm-action-bar {
|
||||
display: flex;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 16px;
|
||||
min-height: 48px;
|
||||
padding: 0 20px;
|
||||
|
||||
&__switches {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- 顶部栏:tab 导航 ---- */
|
||||
.mm-tab-bar {
|
||||
display: flex;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
height: 44px;
|
||||
padding: 0 20px;
|
||||
|
||||
&__right {
|
||||
display: flex;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
border-bottom: 1px solid #e4e4e7;
|
||||
}
|
||||
|
||||
.mm-switch {
|
||||
@@ -1383,12 +1399,19 @@ void permissionStore
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
align-self: stretch;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: inline-flex;
|
||||
height: 32px;
|
||||
align-self: stretch;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
border: 0;
|
||||
@@ -1397,6 +1420,7 @@ void permissionStore
|
||||
color: #71717a;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
position: relative;
|
||||
transition:
|
||||
background-color 0.15s ease,
|
||||
color 0.15s ease;
|
||||
@@ -1407,13 +1431,24 @@ void permissionStore
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #f4f4f5;
|
||||
color: #0a0a0a;
|
||||
color: #3f3f46;
|
||||
font-weight: 500;
|
||||
background: transparent;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
right: 12px;
|
||||
bottom: -1px;
|
||||
height: 2px;
|
||||
border-radius: 2px;
|
||||
background: #3f3f46;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #ebebeb;
|
||||
color: #0a0a0a;
|
||||
background: #f4f4f5;
|
||||
color: #3f3f46;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user