@fmdevui/fm-dev 1.0.97 → 1.0.98

package/es/packages/core/ui/components/inpttable/index.vue3.mjs

@@ -0,0 +1,3 @@
+var undefined$1 = undefined;
+
+export { undefined$1 as default };

package/es/packages/core/ui/components/inpttable/index.vue4.mjs

@@ -0,0 +1,3 @@
+var undefined$1 = undefined;
+
+export { undefined$1 as default };

package/index.css

@@ -111,3 +111,132 @@
 }
 
 
+
+
+/**
+ * 查询表单层级控制
+ * 目的：确保查询表单在下拉框内容的最上层，防止被其他元素遮挡
+ * 场景：当查询表单内有下拉框、日期选择器等弹出组件时，需要确保它们能正常显示
+ */
+.query-form[data-v-fc87e7bb] {
+	z-index: 9999;
+}
+
+/**
+ * 隐藏下拉选择器的滚动条
+ * 目的：提升UI美观度，使用自定义的滚动方式
+ * 说明：使用 :deep 深度选择器穿透 scoped 限制，影响 Element Plus 内部元素
+ * 注意：display: none 而不是 visibility: hidden，完全移除滚动条占用的空间
+ */
+[data-v-fc87e7bb] .el-select-dropdown {
+.el-scrollbar > .el-scrollbar__bar {
+		display: none !important;
+}
+}
+
+/**
+ * 下拉框最小宽度限制
+ * 目的：确保下拉框有足够的宽度显示表格内容
+ * 值：400px 是经过测试的最小宽度，能够容纳常见的表格列
+ * 优先级：使用 !important 确保样式不被其他全局样式覆盖
+ */
+.popper-class[data-v-fc87e7bb] {
+	min-width: 400px !important;
+}
+
+/**
+ * 下拉框包裹器最大高度（scoped版本）
+ * 目的：限制下拉框内容区域的最大高度，防止超出屏幕
+ * 值：600px 是合理的最大高度，适配大部分屏幕分辨率
+ * 说明：使用双层 :deep 选择器穿透 Element Plus 的嵌套结构
+ */
+[data-v-fc87e7bb] .popper-class :deep(.el-select-dropdown__wrap) {
+	max-height: 600px !important;
+}
+
+
+/**
+ * 下拉框包裹器最大高度（全局版本）
+ * 目的：限制下拉框滚动区域的最大高度
+ * 值：450px 与 scoped 中的 600px 不同，这是考虑到实际显示效果的调整
+ * 
+ * 选择器说明：
+ * 1. .popper-class .el-select-dropdown__wrap - 针对当前组件的下拉框
+ * 2. .el-select-dropdown__wrap[max-height] - 针对带有 max-height 属性的下拉框
+ * 
+ * 优先级：使用 !important 确保覆盖 Element Plus 的默认样式
+ */
+.popper-class .el-select-dropdown__wrap,
+.el-select-dropdown__wrap[max-height] {
+	max-height: 450px !important;
+}
+
+/**
+ * 选中行的基础样式
+ * 目的：为选中的表格行添加视觉反馈，让用户清楚知道哪些行被选中
+ * 
+ * 样式设计：
+ * 1. 背景色：使用主题色的浅色版本（light-9），保持视觉柔和
+ * 2. 左边框：3px 实线，使用主题色，增强选中状态的识别度
+ * 
+ * 选择器说明：
+ * 1. .popper-class .selected-row - 下拉框内的选中行
+ * 2. .el-table .selected-row - 普通表格的选中行（保持一致性）
+ * 
+ * CSS变量：
+ * - var(--el-color-primary-light-9) - Element Plus 主题色的浅色版本
+ * - var(--el-color-primary) - Element Plus 主题色
+ */
+.popper-class .selected-row,
+.el-table .selected-row {
+	background-color: var(--el-color-primary-light-9) !important;
+	border-left: 3px solid var(--el-color-primary) !important;
+}
+
+/**
+ * 选中行的悬停样式
+ * 目的：当鼠标悬停在选中行上时，提供额外的视觉反馈
+ * 
+ * 样式设计：
+ * 1. 背景色：使用 light-8（比 light-9 稍深），表示交互状态
+ * 2. 保持左边框不变，维持选中状态的一致性
+ * 
+ * 交互说明：
+ * - 正常选中状态：light-9（较浅）
+ * - 悬停选中状态：light-8（稍深）
+ * - 形成层次感，提升用户体验
+ */
+.popper-class .selected-row:hover,
+.el-table .selected-row:hover {
+	background-color: var(--el-color-primary-light-8) !important;
+}
+
+/**
+ * 选中行的单元格样式（基础状态）
+ * 目的：确保表格单元格（td）也应用选中样式
+ * 
+ * 为什么需要单独设置：
+ * - Element Plus 表格的 td 元素有自己的背景色样式
+ * - 仅设置 tr 的背景色可能被 td 的样式覆盖
+ * - 必须显式设置 td 的背景色，确保选中效果完整显示
+ * 
+ * 优先级：使用 !important 确保覆盖 Element Plus 的默认 td 样式
+ */
+.popper-class .selected-row td,
+.el-table .selected-row td {
+	background-color: var(--el-color-primary-light-9) !important;
+}
+
+/**
+ * 选中行的单元格样式（悬停状态）
+ * 目的：当鼠标悬停时，单元格也要同步改变背景色
+ * 
+ * 重要性：
+ * - 与上面的 .selected-row:hover 配合使用
+ * - 确保悬停时，整行（包括所有单元格）的背景色都统一改变
+ * - 避免出现行背景色改变，但单元格背景色不变的视觉问题
+ */
+.popper-class .selected-row:hover td,
+.el-table .selected-row:hover td {
+	background-color: var(--el-color-primary-light-8) !important;
+}