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> <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"> <div class="group-auth-table">
<a-table <a-table
:span-method="dataSpanMethod" :span-method="dataSpanMethod"
@ -488,7 +488,7 @@
.group-auth-table { .group-auth-table {
@apply flex-1 overflow-hidden; @apply flex-1 overflow-hidden;
padding: 0 24px; padding: 0 16px;
:deep(.arco-table-container) { :deep(.arco-table-container) {
border-top: 1px solid var(--color-text-n8) !important; border-top: 1px solid var(--color-text-n8) !important;
border-left: 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> <template>
<div class="flex flex-col px-[24px] pb-[24px]"> <div class="flex flex-col px-[16px] pb-[16px]">
<div class="sticky top-0 z-[999] bg-white pb-[8px] pt-[24px]"> <div class="sticky top-0 z-[999] bg-white pb-[8px] pt-[16px]">
<a-input-search <a-input-search
:placeholder="t('system.userGroup.searchHolder')" :placeholder="t('system.userGroup.searchHolder')"
allow-clear allow-clear

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

@ -1,5 +1,5 @@
<template> <template>
<div class="px-[24px]"> <div class="px-[16px]">
<MsBaseTable v-bind="propsRes" v-on="propsEvent"> <MsBaseTable v-bind="propsRes" v-on="propsEvent">
<template v-if="hasAnyPermission(props.updatePermission || [])" #quickCreate> <template v-if="hasAnyPermission(props.updatePermission || [])" #quickCreate>
<MsConfirmUserSelector :ok-loading="okLoading" v-bind="userSelectorProps" @confirm="handleAddMember" /> <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', 'relative',
props.isFullscreen || isFullScreen ? 'ms-card--fullScreen' : '', props.isFullscreen || isFullScreen ? 'ms-card--fullScreen' : '',
props.autoHeight ? '' : 'h-full min-h-[500px]', 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.noBottomRadius ? 'ms-card--noBottomRadius' : '',
!props.hideFooter && !props.simple ? 'pb-[24px]' : '', !props.hideFooter && !props.simple ? 'pb-[24px]' : '',
]" ]"
@ -36,7 +36,7 @@
</div> </div>
</div> </div>
</a-scrollbar> </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" /> <a-divider v-if="!props.simple && !props.hideDivider" class="mb-[16px] mt-0" />
</div> </div>
<div class="ms-card-container"> <div class="ms-card-container">
@ -195,7 +195,7 @@
&--noContentPadding { &--noContentPadding {
border-radius: var(--border-radius-large); border-radius: var(--border-radius-large);
.ms-card-header { .ms-card-header {
padding: 24px 24px 16px; padding: 16px;
} }
.arco-divider { .arco-divider {
@apply mb-0; @apply mb-0;

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

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

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

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

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

@ -59,7 +59,7 @@
</div> </div>
<a-spin <a-spin
:loading="props.loading" :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 <edit
v-if="props.isEdit && activeResponseType === 'content' && innerResponseDefinition" v-if="props.isEdit && activeResponseType === 'content' && innerResponseDefinition"

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

@ -1,6 +1,6 @@
<template> <template>
<div :class="['p-[8px_16px]', props.class]"> <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="flex items-center"> </div>
<div class="items-right flex gap-[8px]"> <div class="items-right flex gap-[8px]">
<a-input-search <a-input-search

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

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

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

@ -1,113 +1,116 @@
<template> <template>
<MsCard simple no-content-padding> <MsCard simple no-content-padding>
<div class="flex items-center border-b border-[var(--color-text-n8)] p-[8px_24px]"> <MsSplitBox>
<a-button v-permission="['FUNCTIONAL_CASE:READ+ADD']" type="primary" @click="caseDetail"> <template #first>
{{ t('caseManagement.featureCase.creatingCase') }} <div class="p-[16px] pb-0">
</a-button> <div class="feature-case h-[100%]">
<a-button v-permission="['FUNCTIONAL_CASE:READ+IMPORT']" class="mx-3" type="outline" @click="importCase('Excel')"> <div class="mb-[16px] flex justify-between">
{{ t('caseManagement.featureCase.importExcel') }} <a-input
</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="feature-case h-[100%]">
<a-input-search
v-model:model-value="groupKeyword" v-model:model-value="groupKeyword"
:placeholder="t('caseManagement.featureCase.searchTip')" :placeholder="t('caseManagement.caseReview.folderSearchPlaceholder')"
allow-clear allow-clear
class="mb-[16px]" :max-length="255"
></a-input-search> />
<div class="case h-[38px]"> <a-dropdown position="br">
<div class="flex items-center" :class="getActiveClass('all')" @click="setActiveFolder('all')"> <a-button class="ml-2" type="primary">
<MsIcon type="icon-icon_folder_filled1" class="folder-icon" /> {{ t('common.newCreate') }}
<div class="folder-name mx-[4px]">{{ t('caseManagement.featureCase.allCase') }}</div> </a-button>
<div class="folder-count">({{ modulesCount.all || 0 }})</div></div <template #content>
> <a-doption v-permission="['FUNCTIONAL_CASE:READ+ADD']" @click="caseDetail">{{
<div class="ml-auto flex items-center"> t('caseManagement.featureCase.creatingCase')
<a-tooltip }}</a-doption>
:content=" <a-doption v-permission="['FUNCTIONAL_CASE:READ+IMPORT']" @click="importCase('Excel')">{{
isExpandAll ? t('project.fileManagement.collapseAll') : t('project.fileManagement.expandAll') t('caseManagement.featureCase.importExcel')
" }}</a-doption>
> </template>
<MsButton type="icon" status="secondary" class="!mr-0 p-[4px]" @click="expandHandler"> </a-dropdown>
<MsIcon :type="isExpandAll ? 'icon-icon_folder_collapse1' : 'icon-icon_folder_expansion1'" />
</MsButton>
</a-tooltip>
<MsPopConfirm
v-if="hasAnyPermission(['FUNCTIONAL_CASE:READ+ADD'])"
ref="confirmRef"
v-model:visible="addSubVisible"
:is-delete="false"
:title="t('caseManagement.featureCase.addSubModule')"
:all-names="rootModulesName"
:loading="confirmLoading"
:ok-text="t('common.confirm')"
:field-config="{
placeholder: t('caseManagement.featureCase.addGroupTip'),
}"
@confirm="confirmHandler"
>
<MsButton type="icon" class="!mr-0 p-[2px]">
<MsIcon
type="icon-icon_create_planarity"
size="18"
class="text-[rgb(var(--primary-5))] hover:text-[rgb(var(--primary-4))]"
/>
</MsButton>
</MsPopConfirm>
</div>
</div>
<a-divider class="my-[8px]" />
<FeatureCaseTree
ref="caseTreeRef"
v-model:selected-keys="selectedKeys"
v-model:group-keyword="groupKeyword"
:all-names="rootModulesName"
:active-folder="activeFolder"
:is-expand-all="isExpandAll"
:modules-count="modulesCount"
:is-modal="false"
@case-node-select="caseNodeSelect"
@init="setRootModules"
@drag-update="dragUpdate"
></FeatureCaseTree>
</div> </div>
</div>
<div class="flex-1"> <div class="case h-[38px]">
<a-divider class="!my-0 !mb-0" /> <div class="flex items-center" :class="getActiveClass('all')" @click="setActiveFolder('all')">
<div class="case"> <MsIcon type="icon-icon_folder_filled1" class="folder-icon" />
<div <div class="folder-name mx-[4px]">{{ t('caseManagement.featureCase.allCase') }}</div>
class="flex items-center px-[20px]" <div class="folder-count">({{ modulesCount.all || 0 }})</div></div
:class="getActiveClass('recycle')"
@click="setActiveFolder('recycle')"
> >
<MsIcon type="icon-icon_delete-trash_outlined" class="folder-icon" /> <div class="ml-auto flex items-center">
<div class="folder-name mx-[4px]">{{ t('caseManagement.featureCase.recycle') }}</div> <a-tooltip
<div class="folder-count">({{ recycleModulesCount.all || 0 }})</div> :content="
isExpandAll ? t('project.fileManagement.collapseAll') : t('project.fileManagement.expandAll')
"
>
<MsButton type="icon" status="secondary" class="!mr-0 p-[4px]" @click="expandHandler">
<MsIcon :type="isExpandAll ? 'icon-icon_folder_collapse1' : 'icon-icon_folder_expansion1'" />
</MsButton>
</a-tooltip>
<MsPopConfirm
v-if="hasAnyPermission(['FUNCTIONAL_CASE:READ+ADD'])"
ref="confirmRef"
v-model:visible="addSubVisible"
:is-delete="false"
:title="t('caseManagement.featureCase.addSubModule')"
:all-names="rootModulesName"
:loading="confirmLoading"
:ok-text="t('common.confirm')"
:field-config="{
placeholder: t('caseManagement.featureCase.addGroupTip'),
}"
@confirm="confirmHandler"
>
<MsButton type="icon" class="!mr-0 p-[2px]">
<MsIcon
type="icon-icon_create_planarity"
size="18"
class="text-[rgb(var(--primary-5))] hover:text-[rgb(var(--primary-4))]"
/>
</MsButton>
</MsPopConfirm>
</div> </div>
</div> </div>
</div> <a-divider class="my-[8px]" />
</template> <FeatureCaseTree
<template #second> ref="caseTreeRef"
<div class="p-[8px_24px]"> v-model:selected-keys="selectedKeys"
<CaseTable v-model:group-keyword="groupKeyword"
ref="caseTableRef" :all-names="rootModulesName"
:active-folder="activeFolder" :active-folder="activeFolder"
:offspring-ids="offspringIds" :is-expand-all="isExpandAll"
:active-folder-type="activeCaseType"
:modules-count="modulesCount" :modules-count="modulesCount"
@init="initModulesCount" :is-modal="false"
@import="importCase" @case-node-select="caseNodeSelect"
></CaseTable> @init="setRootModules"
@drag-update="dragUpdate"
></FeatureCaseTree>
</div> </div>
</template> </div>
</MsSplitBox> <div class="flex-1">
</div> <a-divider class="!my-0 !mb-0" />
<div class="case">
<div
class="flex items-center px-[20px]"
:class="getActiveClass('recycle')"
@click="setActiveFolder('recycle')"
>
<MsIcon type="icon-icon_delete-trash_outlined" class="folder-icon" />
<div class="folder-name mx-[4px]">{{ t('caseManagement.featureCase.recycle') }}</div>
<div class="folder-count">({{ recycleModulesCount.all || 0 }})</div>
</div>
</div>
</div>
</template>
<template #second>
<div class="p-[16px_16px]">
<CaseTable
ref="caseTableRef"
:active-folder="activeFolder"
:offspring-ids="offspringIds"
:active-folder-type="activeCaseType"
:modules-count="modulesCount"
@init="initModulesCount"
@import="importCase"
></CaseTable>
</div>
</template>
</MsSplitBox>
</MsCard> </MsCard>
<!-- </div> --> <!-- </div> -->
<ExportExcelModal <ExportExcelModal
@ -411,47 +414,42 @@
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.pageWrap { .case {
min-width: 1000px; padding: 8px 4px;
border-radius: var(--border-radius-large); border-radius: var(--border-radius-small);
@apply bg-white; @apply flex cursor-pointer items-center justify-between;
.case { &:hover {
padding: 8px 4px; background-color: rgb(var(--primary-1));
border-radius: var(--border-radius-small); }
@apply flex cursor-pointer items-center justify-between; .folder-icon {
&:hover { margin-right: 4px;
background-color: rgb(var(--primary-1)); color: var(--color-text-4);
} }
.folder-icon { .folder-name {
margin-right: 4px; color: var(--color-text-1);
color: var(--color-text-4); }
} .folder-count {
.folder-name { margin-left: 4px;
color: var(--color-text-1); color: var(--color-text-4);
} }
.case-active {
.folder-icon,
.folder-name,
.folder-count { .folder-count {
margin-left: 4px; color: rgb(var(--primary-5));
color: var(--color-text-4);
} }
.case-active { }
.folder-icon, .back {
.folder-name, margin-right: 8px;
.folder-count { width: 20px;
color: rgb(var(--primary-5)); height: 20px;
} border: 1px solid #ffffff;
} background: linear-gradient(90deg, rgb(var(--primary-9)) 3.36%, #ffffff 100%);
.back { box-shadow: 0 0 7px rgb(15 0 78 / 9%);
margin-right: 8px; .arco-icon {
width: 20px; color: rgb(var(--primary-5));
height: 20px;
border: 1px solid #ffffff;
background: linear-gradient(90deg, rgb(var(--primary-9)) 3.36%, #ffffff 100%);
box-shadow: 0 0 7px rgb(15 0 78 / 9%);
.arco-icon {
color: rgb(var(--primary-5));
}
@apply flex cursor-pointer items-center rounded-full;
} }
@apply flex cursor-pointer items-center rounded-full;
} }
} }
.recycle { .recycle {

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

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

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

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

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

@ -1,42 +1,31 @@
<template> <template>
<MsCard simple no-content-padding> <MsCard simple no-content-padding>
<div class="flex items-center justify-between border-b border-[var(--color-text-n8)] p-[8px_24px]"> <MsSplitBox>
<a-button v-permission="['CASE_REVIEW:READ+ADD']" type="primary" @click="goCreateReview"> <template #first>
{{ t('caseManagement.caseReview.create') }} <div class="p-[16px]">
</a-button> <ModuleTree
<a-radio-group v-model:model-value="showType" type="button" class="file-show-type"> ref="folderTreeRef"
<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]">
<ModuleTree
ref="folderTreeRef"
:show-type="showType"
:modules-count="modulesCount"
:is-expand-all="true"
@folder-node-select="handleFolderNodeSelect"
@init="initModuleTree"
/>
</div>
</template>
<template #second>
<ReviewTable
:active-folder="activeFolderId"
:module-tree="moduleTree"
:tree-path-map="moduleTreePathMap"
:show-type="showType" :show-type="showType"
:offspring-ids="offspringIds" :modules-count="modulesCount"
@go-create="goCreateReview" :is-expand-all="true"
@init="initModuleCount" @folder-node-select="handleFolderNodeSelect"
@init="initModuleTree"
@create="goCreateReview"
/> />
</template> </div>
</MsSplitBox> </template>
</div> <template #second>
<ReviewTable
v-model:show-type="showType"
:active-folder="activeFolderId"
:module-tree="moduleTree"
:tree-path-map="moduleTreePathMap"
:offspring-ids="offspringIds"
@go-create="goCreateReview"
@init="initModuleCount"
/>
</template>
</MsSplitBox>
</MsCard> </MsCard>
</template> </template>

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

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

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

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

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

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

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

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

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

@ -1,5 +1,5 @@
<template> <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"> <div class="header">
<a-button v-permission="['PROJECT_FILE_MANAGEMENT:READ+ADD']" type="primary" @click="handleAddClick"> <a-button v-permission="['PROJECT_FILE_MANAGEMENT:READ+ADD']" type="primary" @click="handleAddClick">
{{ t('project.fileManagement.addFile') }} {{ t('project.fileManagement.addFile') }}

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

@ -2,7 +2,7 @@
<div class="page"> <div class="page">
<MsSplitBox> <MsSplitBox>
<template #first> <template #first>
<div class="p-[24px]"> <div class="p-[16px]">
<div class="folder" @click="setActiveFolder('my')"> <div class="folder" @click="setActiveFolder('my')">
<div :class="getFolderClass('my')"> <div :class="getFolderClass('my')">
<MsIcon type="icon-icon_folder_filled1" class="folder-icon" /> <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> <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 <MsMenuPanel
:title="t('project.permission.projectAndPermission')" :title="t('project.permission.projectAndPermission')"
:default-key="currentKey" :default-key="currentKey"
:menu-list="menuList" :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" @toggle-menu="toggleMenu"
/> />
<MsCard simple :other-width="290" :min-width="700" :loading="isLoading"> <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> <template>
<div class="box h-full"> <div class="box">
<div class="left" :class="getStyleClass()"> <div class="left" :class="getStyleClass()">
<div class="item" :class="[activeTask === 'real' ? 'active' : '']" @click="toggleTask('real')"> <div class="item" :class="[activeTask === 'real' ? 'active' : '']" @click="toggleTask('real')">
{{ t('project.taskCenter.realTimeTask') }} {{ t('project.taskCenter.realTimeTask') }}
@ -91,7 +91,7 @@
} }
function getStyleClass() { 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(() => { const listName = computed(() => {

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

@ -20,7 +20,7 @@
<a-scrollbar <a-scrollbar
:style="{ :style="{
overflow: 'auto', overflow: 'auto',
height: `calc(100vh - ${collapseHeight} - 220px)`, height: `calc(100vh - ${collapseHeight} - 196px)`,
}" }"
> >
<div v-if="filterList.length" class="list"> <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 isCollapse = ref<boolean>(false);
const collapseHeight = ref<string>('72px'); const collapseHeight = ref<string>('56px');
const changeHandler = (activeKey: (string | number)[]) => { const changeHandler = (activeKey: (string | number)[]) => {
isCollapse.value = activeKey.length > 0; isCollapse.value = activeKey.length > 0;
collapseHeight.value = activeKey.length > 0 ? '158px' : '72px'; collapseHeight.value = activeKey.length > 0 ? '152px' : '56px';
}; };
const jumpHandler = (links: SkipTitle) => { const jumpHandler = (links: SkipTitle) => {

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

@ -1,18 +1,21 @@
<template> <template>
<div class="card"> <!-- <div class="card"> -->
<MsCard simple no-content-padding>
<MsSplitBox v-model:width="leftWidth" @expand-change="handleCollapse"> <MsSplitBox v-model:width="leftWidth" @expand-change="handleCollapse">
<template #first> <template #first>
<UserGroupLeft <div class="mr-1">
ref="ugLeftRef" <UserGroupLeft
:add-permission="['ORGANIZATION_USER_ROLE:READ+ADD']" ref="ugLeftRef"
:update-permission="['ORGANIZATION_USER_ROLE:READ+UPDATE']" :add-permission="['ORGANIZATION_USER_ROLE:READ+ADD']"
:is-global-disable="true" :update-permission="['ORGANIZATION_USER_ROLE:READ+UPDATE']"
@handle-select="handleSelect" :is-global-disable="true"
@add-user-success="handleAddMember" @handle-select="handleSelect"
/> @add-user-success="handleAddMember"
/>
</div>
</template> </template>
<template #second> <template #second>
<div class="p-[24px]"> <div class="p-[16px]">
<div class="flex flex-row items-center justify-between"> <div class="flex flex-row items-center justify-between">
<a-tooltip :content="currentUserGroupItem.name"> <a-tooltip :content="currentUserGroupItem.name">
<div class="one-line-text max-w-[300px] font-medium">{{ currentUserGroupItem.name }}</div> <div class="one-line-text max-w-[300px] font-medium">{{ currentUserGroupItem.name }}</div>
@ -61,7 +64,8 @@
</div> </div>
</template> </template>
</MsSplitBox> </MsSplitBox>
</div> </MsCard>
<!-- </div> -->
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -71,6 +75,7 @@
import { computed, nextTick, onMounted, provide, ref, watchEffect } from 'vue'; import { computed, nextTick, onMounted, provide, ref, watchEffect } from 'vue';
import { useRouter } from 'vue-router'; 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 MsSplitBox from '@/components/pure/ms-split-box/index.vue';
import AuthTable from '@/components/business/ms-user-group-comp/authTable.vue'; import AuthTable from '@/components/business/ms-user-group-comp/authTable.vue';
import UserGroupLeft from '@/components/business/ms-user-group-comp/msUserGroupLeft.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> <template>
<div v-expire class="mb-4"> <div v-expire class="mb-4" :class="props.styleClass">
<a-alert type="warning">{{ <a-alert type="warning">{{
licenseStore.expiredDays >= 0 && licenseStore.expiredDays <= 30 licenseStore.expiredDays >= 0 && licenseStore.expiredDays <= 30
? t('system.authorized.LicenseExpirationPromptLessThanThirty', { day: licenseStore.expiredDays }) ? t('system.authorized.LicenseExpirationPromptLessThanThirty', { day: licenseStore.expiredDays })
@ -16,6 +16,10 @@
const licenseStore = useLicenseStore(); const licenseStore = useLicenseStore();
const { t } = useI18n(); const { t } = useI18n();
const props = defineProps<{
styleClass?: string[];
}>();
</script> </script>
<style scoped></style> <style scoped></style>

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

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

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

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

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

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

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

@ -12,9 +12,9 @@
/> />
</template> </template>
<template #second> <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" /> <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"> <a-tooltip :content="currentUserGroupItem.name">
<div class="one-line-text max-w-[300px] font-medium">{{ currentUserGroupItem.name }}</div> <div class="one-line-text max-w-[300px] font-medium">{{ currentUserGroupItem.name }}</div>
</a-tooltip> </a-tooltip>