diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index 352fd110..1339db98 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -445,6 +445,7 @@ li{ display: flex; align-items: baseline; justify-content: center; + text-align: left; .el-icon-warning-outline{ margin-right: 6px; font-size: 18px; diff --git a/src/views/course/ManageListRemote.vue b/src/views/course/ManageListRemote.vue index cd39484b..38fcc8b1 100644 --- a/src/views/course/ManageListRemote.vue +++ b/src/views/course/ManageListRemote.vue @@ -102,6 +102,7 @@ :props="resOwnerCascaderProps" :show-all-levels="false" @change="handleResOwnerChange" + @input.native="limitResOwnerInput" filterable > @@ -181,7 +182,7 @@ {{ formatSysTypeChain(scope.row) }} - + @@ -471,6 +472,10 @@ export default { checkStrictly: true // 允许选择任意一级选项 }; }, + // 动态计算“授课教师”列的最小宽度,避免固定 260px + teacherColumnWidth() { + return this.calcColumnWidth('授课教师', 'teacherName'); + } }, data() { return { @@ -629,6 +634,26 @@ export default { toggleAdvancedFilter() { this.showAdvancedFilter = !this.showAdvancedFilter; }, + // 计算文本宽度(通过隐藏 span 获取实际宽度) + getTextWidth(text = '') { + if (typeof document === 'undefined') return 0; + const span = document.createElement('span'); + span.innerText = text; + span.style.cssText = 'position:absolute;visibility:hidden;font-size:14px;font-family:inherit;white-space:nowrap;'; + document.body.appendChild(span); + const { width } = span.getBoundingClientRect(); + document.body.removeChild(span); + return Math.ceil(width); + }, + // 计算列宽(头+内容取最大值,加 padding,并控制最小值) + calcColumnWidth(label, prop, padding = 24, min = 260, max = Infinity) { + const contents = (this.pageData || []).map(row => this.getTextWidth((row && row[prop]) || '')); + const maxContentWidth = contents.length ? Math.max(...contents) : 0; + const labelWidth = this.getTextWidth(label || ''); + const baseWidth = Math.max(maxContentWidth, labelWidth) + padding; + const clamped = Math.max(min, Math.min(baseWidth, max)); + return `${clamped}px`; + }, applyAppScrollbarStyle() { if (this.scrollbarStyleApplied || typeof document === 'undefined') return; if (document.getElementById('app-scrollbar-style')) { @@ -787,6 +812,15 @@ export default { this.$refs.creatorSelect.query = limited; } }, + limitResOwnerInput(event) { + const limited = (event && event.target && event.target.value ? event.target.value : '').slice(0, 200); + if (event && event.target && event.target.value !== limited) { + event.target.value = limited; + } + if (this.$refs.resOwnerCascader) { + this.$refs.resOwnerCascader.inputValue = limited; + } + }, handleTopSort() { if (this.$refs.topSorter) { this.$refs.topSorter.open(); @@ -1582,7 +1616,7 @@ export default { if (row.isPermission && row.status != 2) { actions.push({ key: 'edit', label: '编辑', className: 'action-link--primary' }); } - if (this.showSetTopFeature && row.published) { + if (row.published) { actions.push({ key: 'qrcode', label: '二维码', className: 'action-link--primary' }); } if (row.isPermission && !this.forChoose && row.published) { @@ -1597,9 +1631,9 @@ export default { // 更多里的动作 if (row.isPermission && row.published) { actions.push({ key: 'copy', label: '复制', className: 'action-link--primary' }); - actions.push({ key: 'toggleEnable', label: row.enabled ? '停用' : '启用', className: 'action-link--bold' }); + actions.push({ key: 'toggleEnable', label: row.enabled ? '停用' : '启用', className: 'action-link--primary' }); if (this.showSetTopFeature) { - actions.push({ key: 'toggleTop', label: row.isTop ? '取消置顶' : '置顶', className: '' }); + actions.push({ key: 'toggleTop', label: row.isTop ? '取消置顶' : '置顶', className: 'action-link--primary' }); } } return actions; @@ -1762,11 +1796,6 @@ export default { background-image: url('~@/assets/images/svg/search_active.svg'); } -.icon-btn--search:hover, -.icon-btn--search:active { - // background-image: url('~@/assets/images/svg/search_active.svg'); -} - .icon-btn--reset { background-image: url('~@/assets/images/svg/reset.svg'); background-size: 15px 15px;