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

style(全局): 修改所有容器页面边距为16px并调整用例管理和用例评审创建风格

This commit is contained in:
xinxin.wu 2024-04-24 19:17:59 +08:00 committed by 刘瑞斌
parent cc22096cd4
commit 9db5b6f79a
29 changed files with 247 additions and 233 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/business/ms-user-group-comp/authTable.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="flex h-full flex-col gap-[24px] overflow-hidden">
<div class="flex h-full flex-col gap-[16px] overflow-hidden">
<div class="group-auth-table">
<a-table
:span-method="dataSpanMethod"
@ -488,7 +488,7 @@
.group-auth-table {
@apply flex-1 overflow-hidden;
padding: 0 24px;
padding: 0 16px;
:deep(.arco-table-container) {
border-top: 1px solid var(--color-text-n8) !important;
border-left: 1px solid var(--color-text-n8) !important;

4
frontend/src/components/business/ms-user-group-comp/msUserGroupLeft.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="flex flex-col px-[24px] pb-[24px]">
<div class="sticky top-0 z-[999] bg-white pb-[8px] pt-[24px]">
<div class="flex flex-col px-[16px] pb-[16px]">
<div class="sticky top-0 z-[999] bg-white pb-[8px] pt-[16px]">
<a-input-search
:placeholder="t('system.userGroup.searchHolder')"
allow-clear

2
frontend/src/components/business/ms-user-group-comp/userTable.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="px-[24px]">
<div class="px-[16px]">
<MsBaseTable v-bind="propsRes" v-on="propsEvent">
<template v-if="hasAnyPermission(props.updatePermission || [])" #quickCreate>
<MsConfirmUserSelector :ok-loading="okLoading" v-bind="userSelectorProps" @confirm="handleAddMember" />

6
frontend/src/components/pure/ms-card/index.vue
View File

@ -7,7 +7,7 @@
'relative',
props.isFullscreen || isFullScreen ? 'ms-card--fullScreen' : '',
props.autoHeight ? '' : 'h-full min-h-[500px]',
props.noContentPadding ? 'ms-card--noContentPadding' : 'p-[24px]',
props.noContentPadding ? 'ms-card--noContentPadding' : 'p-[16px]',
props.noBottomRadius ? 'ms-card--noBottomRadius' : '',
!props.hideFooter && !props.simple ? 'pb-[24px]' : '',
]"
@ -36,7 +36,7 @@
</div>
</div>
</a-scrollbar>
<div :class="{ 'px-[24px]': props.dividerHasPX }">
<div :class="{ 'px-[16px]': props.dividerHasPX }">
<a-divider v-if="!props.simple && !props.hideDivider" class="mb-[16px] mt-0" />
</div>
<div class="ms-card-container">
@ -195,7 +195,7 @@
&--noContentPadding {
border-radius: var(--border-radius-large);
.ms-card-header {
padding: 24px 24px 16px;
padding: 16px;
}
.arco-divider {
@apply mb-0;

1
frontend/src/locale/en-US/common.ts
View File

@ -16,6 +16,7 @@ export default {
'common.disable': 'Disable',
'common.close': 'Close',
'common.create': 'Create',
'common.newCreate': 'Create',
'common.update': 'Update',
'common.all': 'All',
'common.operation': 'Operation',

1
frontend/src/locale/zh-CN/common.ts
View File

@ -16,6 +16,7 @@ export default {
'common.disable': '禁用',
'common.close': '关闭',
'common.create': '创建',
'common.newCreate': '新建',
'common.update': '更新',
'common.all': '全部',
'common.operation': '操作',

2
frontend/src/views/api-test/components/requestComposition/response/index.vue
View File

@ -59,7 +59,7 @@
</div>
<a-spin
:loading="props.loading"
:class="[isResponseModel ? 'h-[381px] w-full' : 'h-[calc(100%-35px)] w-full px-[18px] pb-[18px]']"
:class="[isResponseModel ? 'h-[381px] w-full' : 'h-[calc(100%-35px)] w-full px-[16px] pb-[16px]']"
>
<edit
v-if="props.isEdit && activeResponseType === 'content' && innerResponseDefinition"

2
frontend/src/views/api-test/scenario/components/scenarioTable.vue
View File

@ -1,6 +1,6 @@
<template>
<div :class="['p-[8px_16px]', props.class]">
<div class="mb-[8px] flex items-center justify-between">
<div class="mb-[16px] flex items-center justify-between">
<div class="flex items-center"> </div>
<div class="items-right flex gap-[8px]">
<a-input-search

2
frontend/src/views/case-management/caseManagementFeature/components/caseTree.vue
View File

@ -361,7 +361,7 @@
};
}
return {
height: 'calc(100vh - 280px)',
height: 'calc(100vh - 240px)',
threshold: 200,
fixedSize: true,
buffer: 15,

46
frontend/src/views/case-management/caseManagementFeature/index.vue
View File

@ -1,27 +1,31 @@
<template>
<MsCard simple no-content-padding>
<div class="flex items-center border-b border-[var(--color-text-n8)] p-[8px_24px]">
<a-button v-permission="['FUNCTIONAL_CASE:READ+ADD']" type="primary" @click="caseDetail">
{{ t('caseManagement.featureCase.creatingCase') }}
</a-button>
<a-button v-permission="['FUNCTIONAL_CASE:READ+IMPORT']" class="mx-3" type="outline" @click="importCase('Excel')">
{{ t('caseManagement.featureCase.importExcel') }}
</a-button>
<!-- <a-button type="outline" @click="importCase('Xmind')">
{{ t('caseManagement.featureCase.importXmind') }}
</a-button> -->
</div>
<div class="pageWrap relative h-[calc(100%-49px)]">
<MsSplitBox>
<template #first>
<div class="p-[8px_24px] pb-0">
<div class="p-[16px] pb-0">
<div class="feature-case h-[100%]">
<a-input-search
<div class="mb-[16px] flex justify-between">
<a-input
v-model:model-value="groupKeyword"
:placeholder="t('caseManagement.featureCase.searchTip')"
:placeholder="t('caseManagement.caseReview.folderSearchPlaceholder')"
allow-clear
class="mb-[16px]"
></a-input-search>
:max-length="255"
/>
<a-dropdown position="br">
<a-button class="ml-2" type="primary">
{{ t('common.newCreate') }}
</a-button>
<template #content>
<a-doption v-permission="['FUNCTIONAL_CASE:READ+ADD']" @click="caseDetail">{{
t('caseManagement.featureCase.creatingCase')
}}</a-doption>
<a-doption v-permission="['FUNCTIONAL_CASE:READ+IMPORT']" @click="importCase('Excel')">{{
t('caseManagement.featureCase.importExcel')
}}</a-doption>
</template>
</a-dropdown>
</div>
<div class="case h-[38px]">
<div class="flex items-center" :class="getActiveClass('all')" @click="setActiveFolder('all')">
<MsIcon type="icon-icon_folder_filled1" class="folder-icon" />
@ -94,7 +98,7 @@
</div>
</template>
<template #second>
<div class="p-[8px_24px]">
<div class="p-[16px_16px]">
<CaseTable
ref="caseTableRef"
:active-folder="activeFolder"
@ -107,7 +111,6 @@
</div>
</template>
</MsSplitBox>
</div>
</MsCard>
<!-- </div> -->
<ExportExcelModal
@ -411,10 +414,6 @@
</script>
<style scoped lang="less">
.pageWrap {
min-width: 1000px;
border-radius: var(--border-radius-large);
@apply bg-white;
.case {
padding: 8px 4px;
border-radius: var(--border-radius-small);
@ -453,7 +452,6 @@
@apply flex cursor-pointer items-center rounded-full;
}
}
}
.recycle {
@apply absolute bottom-0 bg-white pb-4;
:deep(.arco-divider-horizontal) {

17
frontend/src/views/case-management/caseReview/components/index/moduleTree.vue
View File

@ -1,12 +1,17 @@
<template>
<div>
<div class="mb-[16px] flex justify-between">
<a-input
v-model:model-value="moduleKeyword"
:placeholder="t('caseManagement.caseReview.folderSearchPlaceholder')"
allow-clear
class="mb-[16px]"
:max-length="255"
/>
<a-button v-permission="['CASE_REVIEW:READ+ADD']" class="ml-2" type="primary" @click="emit('create')">
{{ t('common.newCreate') }}
</a-button>
</div>
<div v-if="!props.isModal" class="folder">
<div :class="getFolderClass('all')" @click="setActiveFolder('all')">
<MsIcon type="icon-icon_folder_filled1" class="folder-icon" />
@ -19,7 +24,13 @@
<MsIcon :type="isExpandAll ? 'icon-icon_folder_collapse1' : 'icon-icon_folder_expansion1'" />
</MsButton>
</a-tooltip>
<popConfirm v-if="hasAnyPermission(['CASE_REVIEW:READ+UPDATE'])" mode="add" :all-names="rootModulesName" parent-id="NONE" @add-finish="() => initModules()">
<popConfirm
v-if="hasAnyPermission(['CASE_REVIEW:READ+UPDATE'])"
mode="add"
:all-names="rootModulesName"
parent-id="NONE"
@add-finish="() => initModules()"
>
<MsButton type="icon" class="!mr-0 p-[2px]">
<MsIcon
type="icon-icon_create_planarity"
@ -121,7 +132,7 @@
modulesCount?: Record<string, number>; // 模块数量统计对象
isExpandAll?: boolean; // 是否展开所有节点
}>();
const emit = defineEmits(['init', 'folderNodeSelect']);
const emit = defineEmits(['init', 'folderNodeSelect', 'create']);
const appStore = useAppStore();
const { t } = useI18n();

22
frontend/src/views/case-management/caseReview/components/index/reviewTable.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="px-[24px] py-[8px]">
<div class="mb-[8px]">
<div class="p-[16px]">
<div class="mb-[16px]">
<MsAdvanceFilter
v-model:keyword="keyword"
:filter-config-list="filterConfigList"
@ -11,10 +11,15 @@
@refresh="searchReview"
>
<template #left>
<div class="flex items-center">
<!-- <div class="flex items-center">
<div class="mr-[4px] text-[var(--color-text-1)]">{{ t('caseManagement.caseReview.allReviews') }}</div>
<div class="text-[var(--color-text-4)]">({{ propsRes.msPagination?.total }})</div>
</div>
</div> -->
<a-radio-group v-model:model-value="innerShowType" type="button" class="file-show-type">
<a-radio value="all">{{ t('common.all') }}</a-radio>
<a-radio value="reviewByMe">{{ t('caseManagement.caseReview.waitMyReview') }}</a-radio>
<a-radio value="createByMe">{{ t('caseManagement.caseReview.myCreate') }}</a-radio>
</a-radio-group>
</template>
</MsAdvanceFilter>
</div>
@ -193,6 +198,7 @@
<script setup lang="ts">
import { onBeforeMount } from 'vue';
import { useRouter } from 'vue-router';
import { useVModel } from '@vueuse/core';
import { Message } from '@arco-design/web-vue';
import dayjs from 'dayjs';
@ -262,6 +268,8 @@
const reviewersFilters = ref<string[]>([]);
const reviewersFilterVisible = ref(false);
const innerShowType = useVModel(props, 'showType', emit);
onBeforeMount(async () => {
try {
const [userRes, memberRes] = await Promise.all([
@ -543,8 +551,8 @@
keyword: keyword.value,
projectId: appStore.currentProjectId,
moduleIds,
createByMe: props.showType === 'createByMe' ? userStore.id : undefined,
reviewByMe: props.showType === 'reviewByMe' ? userStore.id : undefined,
createByMe: innerShowType.value === 'createByMe' ? userStore.id : undefined,
reviewByMe: innerShowType.value === 'reviewByMe' ? userStore.id : undefined,
filter: { status: statusFilters.value, reviewers: reviewersFilters.value },
combine: filter
? {
@ -569,7 +577,7 @@
});
watch(
() => props.showType,
() => innerShowType.value,
() => {
searchReview();
}

17
frontend/src/views/case-management/caseReview/index.vue
View File

@ -1,19 +1,8 @@
<template>
<MsCard simple no-content-padding>
<div class="flex items-center justify-between border-b border-[var(--color-text-n8)] p-[8px_24px]">
<a-button v-permission="['CASE_REVIEW:READ+ADD']" type="primary" @click="goCreateReview">
{{ t('caseManagement.caseReview.create') }}
</a-button>
<a-radio-group v-model:model-value="showType" type="button" class="file-show-type">
<a-radio value="all">{{ t('common.all') }}</a-radio>
<a-radio value="reviewByMe">{{ t('caseManagement.caseReview.waitMyReview') }}</a-radio>
<a-radio value="createByMe">{{ t('caseManagement.caseReview.myCreate') }}</a-radio>
</a-radio-group>
</div>
<div class="relative h-[calc(100%-49px)]">
<MsSplitBox>
<template #first>
<div class="px-[24px] py-[16px]">
<div class="p-[16px]">
<ModuleTree
ref="folderTreeRef"
:show-type="showType"
@ -21,22 +10,22 @@
:is-expand-all="true"
@folder-node-select="handleFolderNodeSelect"
@init="initModuleTree"
@create="goCreateReview"
/>
</div>
</template>
<template #second>
<ReviewTable
v-model:show-type="showType"
:active-folder="activeFolderId"
:module-tree="moduleTree"
:tree-path-map="moduleTreePathMap"
:show-type="showType"
:offspring-ids="offspringIds"
@go-create="goCreateReview"
@init="initModuleCount"
/>
</template>
</MsSplitBox>
</div>
</MsCard>
</template>

2
frontend/src/views/project-management/environmental/components/AllParamBox.vue
View File

@ -128,7 +128,7 @@
<style lang="less" scoped>
.page {
transform: scale3d(1, 1, 1);
padding: 24px;
padding: 16px;
.no-content {
:deep(.arco-tabs-content) {
padding-top: 0;

4
frontend/src/views/project-management/environmental/components/EnvGroupBox.vue
View File

@ -208,7 +208,7 @@
height: 100%;
.header {
overflow-y: auto;
padding: 24px 24px 0;
padding: 16px 16px 0;
max-height: calc(100% - 100px);
background-color: #ffffff;
}
@ -219,7 +219,7 @@
z-index: 999;
display: flex;
justify-content: flex-end;
padding: 24px;
padding: 16px;
background-color: #ffffff;
box-shadow: 0 -1px 4px rgb(2 2 2 / 10%);
gap: 16px;

4
frontend/src/views/project-management/environmental/components/EnvParamBox.vue
View File

@ -325,11 +325,11 @@
transform: scale3d(1, 1, 1);
height: 100%;
.header {
padding: 24px 24px 0;
padding: 16px 16px 0;
}
.content {
overflow-y: auto;
padding: 0 24px;
padding: 0 16px;
height: 100%;
max-height: calc(100% - 320px);
background-color: #ffffff;

2
frontend/src/views/project-management/environmental/index.vue
View File

@ -2,7 +2,7 @@
<div class="page">
<MsSplitBox>
<template #first>
<div class="p-[24px]">
<div class="mr-[6px] p-[16px]">
<!-- TODO:这个版本环境不展示默认项目环境 -->
<!-- <div
><a-radio-group

2
frontend/src/views/project-management/fileManagement/components/rightBox.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="flex h-[calc(100vh-88px)] flex-col p-[24px]">
<div class="flex h-[calc(100vh-88px)] flex-col p-[16px]">
<div class="header">
<a-button v-permission="['PROJECT_FILE_MANAGEMENT:READ+ADD']" type="primary" @click="handleAddClick">
{{ t('project.fileManagement.addFile') }}

2
frontend/src/views/project-management/fileManagement/index.vue
View File

@ -2,7 +2,7 @@
<div class="page">
<MsSplitBox>
<template #first>
<div class="p-[24px]">
<div class="p-[16px]">
<div class="folder" @click="setActiveFolder('my')">
<div :class="getFolderClass('my')">
<MsIcon type="icon-icon_folder_filled1" class="folder-icon" />

4
frontend/src/views/project-management/projectAndPermission/index.vue
View File

@ -1,10 +1,10 @@
<template>
<div class="wrapper flex min-h-[500px]" :style="{ height: 'calc(100vh - 90px)' }">
<div class="wrapper flex min-h-[500px]" :style="{ height: 'calc(100vh - 74px)' }">
<MsMenuPanel
:title="t('project.permission.projectAndPermission')"
:default-key="currentKey"
:menu-list="menuList"
class="mr-[16px] w-[208px] min-w-[208px] bg-white p-[24px]"
class="mr-[16px] w-[208px] min-w-[208px] bg-white p-[16px]"
@toggle-menu="toggleMenu"
/>
<MsCard simple :other-width="290" :min-width="700" :loading="isLoading">

4
frontend/src/views/project-management/taskCenter/component/taskCom.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="box h-full">
<div class="box">
<div class="left" :class="getStyleClass()">
<div class="item" :class="[activeTask === 'real' ? 'active' : '']" @click="toggleTask('real')">
{{ t('project.taskCenter.realTimeTask') }}
@ -91,7 +91,7 @@
}
function getStyleClass() {
return props.mode === 'modal' ? ['p-0', 'pt-[24px]', 'pr-[24px]'] : ['p-[24px]'];
return props.mode === 'modal' ? ['p-0', 'pt-[16px]', 'pr-[16px]'] : ['p-[16px]'];
}
const listName = computed(() => {

2
frontend/src/views/setting/organization/serviceIntegration/components/serviceList.vue
View File

@ -20,7 +20,7 @@
<a-scrollbar
:style="{
overflow: 'auto',
height: `calc(100vh - ${collapseHeight} - 220px)`,
height: `calc(100vh - ${collapseHeight} - 196px)`,
}"
>
<div v-if="filterList.length" class="list">

4
frontend/src/views/setting/organization/serviceIntegration/index.vue
View File

@ -134,11 +134,11 @@
},
]);
const isCollapse = ref<boolean>(false);
const collapseHeight = ref<string>('72px');
const collapseHeight = ref<string>('56px');
const changeHandler = (activeKey: (string | number)[]) => {
isCollapse.value = activeKey.length > 0;
collapseHeight.value = activeKey.length > 0 ? '158px' : '72px';
collapseHeight.value = activeKey.length > 0 ? '152px' : '56px';
};
const jumpHandler = (links: SkipTitle) => {

11
frontend/src/views/setting/organization/usergroup/orgUserGroup.vue
View File

@ -1,7 +1,9 @@
<template>
<div class="card">
<!-- <div class="card"> -->
<MsCard simple no-content-padding>
<MsSplitBox v-model:width="leftWidth" @expand-change="handleCollapse">
<template #first>
<div class="mr-1">
<UserGroupLeft
ref="ugLeftRef"
:add-permission="['ORGANIZATION_USER_ROLE:READ+ADD']"
@ -10,9 +12,10 @@
@handle-select="handleSelect"
@add-user-success="handleAddMember"
/>
</div>
</template>
<template #second>
<div class="p-[24px]">
<div class="p-[16px]">
<div class="flex flex-row items-center justify-between">
<a-tooltip :content="currentUserGroupItem.name">
<div class="one-line-text max-w-[300px] font-medium">{{ currentUserGroupItem.name }}</div>
@ -61,7 +64,8 @@
</div>
</template>
</MsSplitBox>
</div>
</MsCard>
<!-- </div> -->
</template>
<script lang="ts" setup>
@ -71,6 +75,7 @@
import { computed, nextTick, onMounted, provide, ref, watchEffect } from 'vue';
import { useRouter } from 'vue-router';
import MsCard from '@/components/pure/ms-card/index.vue';
import MsSplitBox from '@/components/pure/ms-split-box/index.vue';
import AuthTable from '@/components/business/ms-user-group-comp/authTable.vue';
import UserGroupLeft from '@/components/business/ms-user-group-comp/msUserGroupLeft.vue';

6
frontend/src/views/setting/system/authorizedManagement/components/expireAlert.vue
View File

@ -1,5 +1,5 @@
<template>
<div v-expire class="mb-4">
<div v-expire class="mb-4" :class="props.styleClass">
<a-alert type="warning">{{
licenseStore.expiredDays >= 0 && licenseStore.expiredDays <= 30
? t('system.authorized.LicenseExpirationPromptLessThanThirty', { day: licenseStore.expiredDays })
@ -16,6 +16,10 @@
const licenseStore = useLicenseStore();
const { t } = useI18n();
const props = defineProps<{
styleClass?: string[];
}>();
</script>
<style scoped></style>

2
frontend/src/views/setting/system/log/components/logCards.vue
View File

@ -601,7 +601,7 @@
@apply bg-white;
margin-top: 16px;
padding: 24px;
padding: 16px;
border-radius: var(--border-radius-large);
.log-card-header {
@apply flex items-center justify-between;

1
frontend/src/views/setting/system/pluginManager/index.vue
View File

@ -38,7 +38,6 @@
.wrapper {
/* position: relative; */
width: 100%;
height: calc(100vh - 138px);
min-height: 500px;
}
</style>

4
frontend/src/views/setting/system/taskCenter/index.vue
View File

@ -1,8 +1,6 @@
<template>
<MsCard simple no-content-padding>
<div class="p-4 pb-0">
<ExpireAlert />
</div>
<MsCard simple no-content-padding>
<TaskCenter group="system" />
</MsCard>
</template>

4
frontend/src/views/setting/system/usergroup/systemUserGroup.vue
View File

@ -12,9 +12,9 @@
/>
</template>
<template #second>
<div class="flex h-full flex-col overflow-hidden pt-[24px]">
<div class="flex h-full flex-col overflow-hidden pt-[16px]">
<ExpireAlert class="px-4" />
<div class="mb-4 flex flex-row items-center justify-between px-[24px]">
<div class="mb-4 flex flex-row items-center justify-between px-[16px]">
<a-tooltip :content="currentUserGroupItem.name">
<div class="one-line-text max-w-[300px] font-medium">{{ currentUserGroupItem.name }}</div>
</a-tooltip>