diff --git a/src/pages/system/logs/index.module.less b/src/pages/system/logs/index.module.less new file mode 100644 index 0000000..158a6ae --- /dev/null +++ b/src/pages/system/logs/index.module.less @@ -0,0 +1,33 @@ +.cell { + display: flex; + align-items: center; + gap: 6px; + width: 100%; + cursor: default; +} + +.text { + flex: 1; + min-width: 0; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + line-height: 1.5; + word-break: break-all; + color: rgba(0, 0, 0, 0.88); +} + +.view { + flex-shrink: 0; + color: #1677ff; + cursor: pointer; + user-select: none; + line-height: 1.5; + white-space: nowrap; + + &:hover { + opacity: 0.85; + } +} diff --git a/src/pages/system/logs/index.tsx b/src/pages/system/logs/index.tsx index 4db4962..421eda5 100644 --- a/src/pages/system/logs/index.tsx +++ b/src/pages/system/logs/index.tsx @@ -1,11 +1,81 @@ -import { defineComponent } from 'vue'; -import { Button, Input, Table, DatePicker, Form, Space, Select, Pagination } from 'ant-design-vue'; +import { defineComponent, ref, nextTick } from 'vue'; +import { + Button, + Input, + Table, + DatePicker, + Form, + Space, + Select, + Pagination, + Modal, +} from 'ant-design-vue'; import { useLogModel, ACTION_TYPE_OPTIONS, ACTION_TYPE_MAP } from './model/useLogModel'; -import { useContainerSize } from '@/hooks'; +import { useContainerSize, useState, useEffect } from '@/hooks'; import pageStyles from '@/assets/styles/pageLayout.module.less'; +import cellStyles from './index.module.less'; const { RangePicker } = DatePicker; +/** + * 操作内容单元格:最多 2 行截断,溢出时显示"查看"按钮 + */ +const LogContentCell = defineComponent({ + name: 'LogContentCell', + props: { text: { type: String, required: true } }, + setup(props) { + const textRef = ref(null); + const [overflow, setOverflow] = useState(false); + const [modalOpen, setModalOpen] = useState(false); + + const checkOverflow = () => { + const el = textRef.value; + if (el) setOverflow(el.scrollHeight > el.clientHeight); + }; + + let observer: ResizeObserver | null = null; + useEffect(() => { + if (!textRef.value) return; + nextTick(checkOverflow); + observer = new ResizeObserver(checkOverflow); + observer.observe(textRef.value); + return () => { + observer?.disconnect(); + observer = null; + }; + }, [() => textRef.value]); + + return () => { + const raw = props.text; + return ( +
+
+ {raw} +
+ {overflow.value ? ( + setModalOpen(true)}> + 查看 + + ) : null} + setModalOpen(false)} + > +
+ {raw} +
+
+
+ ); + }; + }, +}); + /** * bodyCell 渲染 */ @@ -13,6 +83,10 @@ function renderBodyCell({ column, text }: { column: any; text: any }) { if (column.key === 'type') { return {ACTION_TYPE_MAP[text as number] || text || '--'}; } + if (column.dataIndex === 'content') { + const raw = text || ''; + return raw ? : --; + } return {text || '--'}; } diff --git a/src/pages/system/logs/model/useLogModel.ts b/src/pages/system/logs/model/useLogModel.ts index 850702f..dffae7a 100644 --- a/src/pages/system/logs/model/useLogModel.ts +++ b/src/pages/system/logs/model/useLogModel.ts @@ -103,7 +103,7 @@ export function useLogModel() { const columns = [ { title: '操作类型', dataIndex: 'type', key: 'type', width: 140 }, { title: '操作人', dataIndex: 'nickname', key: 'nickname', width: 140 }, - { title: '操作内容', dataIndex: 'content', key: 'content', minWidth: 360 }, + { title: '操作内容', dataIndex: 'content', key: 'content', width: 480 }, { title: '操作时间', dataIndex: 'createDate', key: 'createDate', width: 180 }, ]; diff --git a/src/pages/system/params/components/ParamFormModal.tsx b/src/pages/system/params/components/ParamFormModal.tsx index d2c6f9e..4448462 100644 --- a/src/pages/system/params/components/ParamFormModal.tsx +++ b/src/pages/system/params/components/ParamFormModal.tsx @@ -104,13 +104,13 @@ export default defineComponent({ - { formData.paramValue = val?.target?.value ?? val ?? ''; }} placeholder="请输入参数值" - allowClear + rows={2} /> @@ -123,7 +123,7 @@ export default defineComponent({ placeholder="请输入备注说明(选填,最多200字)" maxlength={200} showCount - rows={3} + rows={4} /> diff --git a/src/pages/system/params/index.tsx b/src/pages/system/params/index.tsx index fcc58c6..5cc7933 100644 --- a/src/pages/system/params/index.tsx +++ b/src/pages/system/params/index.tsx @@ -8,11 +8,14 @@ import pageStyles from '@/assets/styles/pageLayout.module.less'; import cellStyles from './index.module.less'; /** - * 参数值单元格:最多 2 行截断,溢出时显示"查看"按钮 + * 文本单元格:最多 2 行截断,溢出时显示"查看"按钮 */ -const ParamValueCell = defineComponent({ - name: 'ParamValueCell', - props: { text: { type: String, required: true } }, +const TruncatedTextCell = defineComponent({ + name: 'TruncatedTextCell', + props: { + text: { type: String, required: true }, + modalTitle: { type: String, required: true }, + }, setup(props) { const textRef = ref(null); const [overflow, setOverflow] = useState(false); @@ -49,7 +52,7 @@ const ParamValueCell = defineComponent({ ) : null} ); } - // 参数值列:两行截断 + 查看弹窗 - if (column.dataIndex === 'paramValue') { + // 参数值 / 备注列:两行截断 + 查看弹窗 + if (column.dataIndex === 'paramValue' || column.dataIndex === 'remark') { const raw = text || ''; - return raw ? : --; - } - // 备注列:空值显示 -- - if (column.dataIndex === 'remark' && !text) { - return --; + const modalTitle = column.dataIndex === 'paramValue' ? '参数值' : '备注说明'; + return raw ? : --; } return {text ?? '--'}; } diff --git a/src/pages/system/params/model/useParamsColumns.ts b/src/pages/system/params/model/useParamsColumns.ts index 9a7f1d2..4b5ff89 100644 --- a/src/pages/system/params/model/useParamsColumns.ts +++ b/src/pages/system/params/model/useParamsColumns.ts @@ -28,7 +28,7 @@ export function useParamsColumns() { title: '备注说明', dataIndex: 'remark', key: 'remark', - minWidth: 240, + width: 240, }, ];