test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

style: 样式优化 

--bug=1035283 --user=吕梦园
https://www.tapd.cn/55049933/bugtrace/bugs/view/1155049933001035283
--bug=1035615 --user=吕梦园
https://www.tapd.cn/55049933/bugtrace/bugs/view/1155049933001035615
This commit is contained in:
teukkk 2024-12-11 15:08:49 +08:00 committed by Craftsman
parent 5bc0c853b2
commit ee155ac24f
9 changed files with 56 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/assets/style/global.less
View File

@ -216,3 +216,11 @@ body {
}
}
}
// 表格选中行样式
.selected-row-class.arco-table-tr {
background: var(--color-fill-1) !important;
.arco-table-td {
background: var(--color-fill-1) !important;
}
}

7
frontend/src/components/business/ms-batch-form/index.vue
View File

@ -194,15 +194,16 @@
class="minus"
:class="[
'flex',
'h-full',
'h-[32px]',
'w-[32px]',
'cursor-pointer',
'items-center',
'justify-center',
'text-[var(--color-text-4)]',
'mt-[8px]',
'hover:bg-[var(--color-text-n9)]',
'rounded',
]"
:style="{ 'margin-top': index === 0 && !props.isShowDrag ? '36px' : '' }"
:style="{ 'margin-top': index === 0 && !props.isShowDrag ? '30px' : '' }"
@click="removeField(index)"
>
<icon-minus-circle />

4
frontend/src/components/pure/ms-drawer/index.vue
View File

@ -19,8 +19,8 @@
<template #title>
<div class="flex items-center justify-between gap-[4px]">
<slot name="title">
<div class="flex flex-1 items-center justify-between">
<div class="flex items-center">
<div class="flex flex-1 items-center justify-between overflow-hidden">
<div class="flex items-center overflow-hidden">
<a-tooltip :disabled="!props.title" :content="props.title">
<span class="one-line-text max-w-[300px]"> {{ props.title }}</span>
</a-tooltip>

12
frontend/src/views/setting/organization/project/components/userDrawer.vue
View File

@ -8,6 +8,17 @@
:mask="false"
@cancel="handleCancel"
>
<template #headerLeft>
<a-tooltip :content="props.currentName">
<div class="ml-[8px] flex flex-1 overflow-hidden text-[var(--color-text-4)]">
(
<div class="one-line-text flex-1">
{{ props.currentName }}
</div>
)
</div>
</a-tooltip>
</template>
<div>
<div class="flex flex-row justify-between">
<a-button
@ -117,6 +128,7 @@
visible: boolean;
organizationId?: string;
projectId?: string;
currentName?: string;
}
const { t } = useI18n();
const props = defineProps<projectDrawerProps>();

9
frontend/src/views/setting/organization/project/orgProject.vue
View File

@ -17,7 +17,7 @@
@clear="fetchData"
></a-input-search>
</div>
<MsBaseTable v-bind="propsRes" v-on="propsEvent" @enable-change="enableChange">
<MsBaseTable v-bind="propsRes" :row-class="getRowClass" v-on="propsEvent" @enable-change="enableChange">
<template #revokeDelete="{ record }">
<a-tooltip class="ms-tooltip-white">
<template #content>
@ -271,6 +271,7 @@
const currentUserDrawer = reactive({
visible: false,
projectId: '',
currentName: '',
});
const tableActions: ActionsItem[] = [
@ -339,10 +340,16 @@
const showUserDrawer = (record: TableData) => {
currentUserDrawer.visible = true;
currentUserDrawer.projectId = record.id;
currentUserDrawer.currentName = record.name;
};
function getRowClass(record: TableData) {
return record.id === currentUserDrawer.projectId ? 'selected-row-class' : '';
}
const handleUserDrawerCancel = () => {
currentUserDrawer.visible = false;
currentUserDrawer.projectId = '';
};
const handleAddProjectModalCancel = (shouldSearch: boolean) => {

7
frontend/src/views/setting/system/organizationAndProject/components/systemOrganization.vue
View File

@ -1,5 +1,5 @@
<template>
<MsBaseTable v-bind="propsRes" v-on="propsEvent" @enable-change="enableChange">
<MsBaseTable v-bind="propsRes" :row-class="getRowClass" v-on="propsEvent" @enable-change="enableChange">
<template #revokeDelete="{ record }">
<a-tooltip class="ms-tooltip-white">
<template #content>
@ -325,8 +325,13 @@
currentUserDrawer.currentName = record.name;
};
function getRowClass(record: TableData) {
return record.id === currentUserDrawer.organizationId ? 'selected-row-class' : '';
}
const handleUserDrawerCancel = () => {
currentUserDrawer.visible = false;
currentUserDrawer.organizationId = '';
};
const handleAddOrgModalCancel = (shouldSearch: boolean) => {

6
frontend/src/views/setting/system/organizationAndProject/components/systemProject.vue
View File

@ -1,5 +1,5 @@
<template>
<MsBaseTable v-bind="propsRes" v-on="propsEvent" @enable-change="enableChange">
<MsBaseTable v-bind="propsRes" :row-class="getRowClass" v-on="propsEvent" @enable-change="enableChange">
<template #revokeDelete="{ record }">
<a-tooltip class="ms-tooltip-white">
<template #content>
@ -292,6 +292,10 @@
currentUserDrawer.currentName = record.name;
};
function getRowClass(record: TableData) {
return record.id === currentUserDrawer.projectId ? 'selected-row-class' : '';
}
const handleUserDrawerCancel = () => {
currentUserDrawer.visible = false;
currentUserDrawer.projectId = '';

11
frontend/src/views/setting/system/organizationAndProject/components/userDrawer.vue
View File

@ -9,6 +9,17 @@
:title="t('system.memberList')"
@cancel="handleCancel"
>
<template #headerLeft>
<a-tooltip :content="props.currentName">
<div class="ml-[8px] flex flex-1 overflow-hidden text-[var(--color-text-4)]">
(
<div class="one-line-text flex-1">
{{ props.currentName }}
</div>
)
</div>
</a-tooltip>
</template>
<div>
<div class="flex flex-row justify-between">
<a-button

6
frontend/src/views/test-plan/report/detail/component/system-card/testTableIndex.vue
View File

@ -177,10 +177,4 @@
@apply overflow-y-auto;
.ms-scroll-bar();
}
:deep(.selected-row-class.arco-table-tr) {
background: var(--color-fill-1) !important;
.arco-table-td {
background: var(--color-fill-1) !important;
}
}
</style>