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

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;

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

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" />

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;

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',

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': '操作',

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"

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

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,

View File

@ -1,27 +1,31 @@
<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]">
<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> <MsSplitBox>
<template #first> <template #first>
<div class="p-[8px_24px] pb-0"> <div class="p-[16px] pb-0">
<div class="feature-case h-[100%]"> <div class="feature-case h-[100%]">
<a-input-search <div class="mb-[16px] flex justify-between">
<a-input
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> />
<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="case h-[38px]">
<div class="flex items-center" :class="getActiveClass('all')" @click="setActiveFolder('all')"> <div class="flex items-center" :class="getActiveClass('all')" @click="setActiveFolder('all')">
<MsIcon type="icon-icon_folder_filled1" class="folder-icon" /> <MsIcon type="icon-icon_folder_filled1" class="folder-icon" />
@ -94,7 +98,7 @@
</div> </div>
</template> </template>
<template #second> <template #second>
<div class="p-[8px_24px]"> <div class="p-[16px_16px]">
<CaseTable <CaseTable
ref="caseTableRef" ref="caseTableRef"
:active-folder="activeFolder" :active-folder="activeFolder"
@ -107,7 +111,6 @@
</div> </div>
</template> </template>
</MsSplitBox> </MsSplitBox>
</div>
</MsCard> </MsCard>
<!-- </div> --> <!-- </div> -->
<ExportExcelModal <ExportExcelModal
@ -411,10 +414,6 @@
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.pageWrap {
min-width: 1000px;
border-radius: var(--border-radius-large);
@apply bg-white;
.case { .case {
padding: 8px 4px; padding: 8px 4px;
border-radius: var(--border-radius-small); border-radius: var(--border-radius-small);
@ -453,7 +452,6 @@
@apply flex cursor-pointer items-center rounded-full; @apply flex cursor-pointer items-center rounded-full;
} }
} }
}
.recycle { .recycle {
@apply absolute bottom-0 bg-white pb-4; @apply absolute bottom-0 bg-white pb-4;
:deep(.arco-divider-horizontal) { :deep(.arco-divider-horizontal) {

View File

@ -1,12 +1,17 @@
<template> <template>
<div> <div>
<div class="mb-[16px] flex justify-between">
<a-input <a-input
v-model:model-value="moduleKeyword" v-model:model-value="moduleKeyword"
:placeholder="t('caseManagement.caseReview.folderSearchPlaceholder')" :placeholder="t('caseManagement.caseReview.folderSearchPlaceholder')"
allow-clear allow-clear
class="mb-[16px]"
: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();

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();
} }

View File

@ -1,19 +1,8 @@
<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]">
<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> <MsSplitBox>
<template #first> <template #first>
<div class="px-[24px] py-[16px]"> <div class="p-[16px]">
<ModuleTree <ModuleTree
ref="folderTreeRef" ref="folderTreeRef"
:show-type="showType" :show-type="showType"
@ -21,22 +10,22 @@
:is-expand-all="true" :is-expand-all="true"
@folder-node-select="handleFolderNodeSelect" @folder-node-select="handleFolderNodeSelect"
@init="initModuleTree" @init="initModuleTree"
@create="goCreateReview"
/> />
</div> </div>
</template> </template>
<template #second> <template #second>
<ReviewTable <ReviewTable
v-model:show-type="showType"
:active-folder="activeFolderId" :active-folder="activeFolderId"
:module-tree="moduleTree" :module-tree="moduleTree"
:tree-path-map="moduleTreePathMap" :tree-path-map="moduleTreePathMap"
:show-type="showType"
:offspring-ids="offspringIds" :offspring-ids="offspringIds"
@go-create="goCreateReview" @go-create="goCreateReview"
@init="initModuleCount" @init="initModuleCount"
/> />
</template> </template>
</MsSplitBox> </MsSplitBox>
</div>
</MsCard> </MsCard>
</template> </template>

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;

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;

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;

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

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') }}

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" />

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">

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(() => {

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">

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) => {

View File

@ -1,7 +1,9 @@
<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>
<div class="mr-1">
<UserGroupLeft <UserGroupLeft
ref="ugLeftRef" ref="ugLeftRef"
:add-permission="['ORGANIZATION_USER_ROLE:READ+ADD']" :add-permission="['ORGANIZATION_USER_ROLE:READ+ADD']"
@ -10,9 +12,10 @@
@handle-select="handleSelect" @handle-select="handleSelect"
@add-user-success="handleAddMember" @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';

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>

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;

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>

View File

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

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>