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

style(工作台): 修复工作台卡片取消切换模式改为宽度自适应

This commit is contained in:
xinxin.wu 2024-11-25 18:07:32 +08:00 committed by 刘瑞斌
parent 75b73c6152
commit 0a037a2f3b
8 changed files with 35 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/views/workbench/homePage/components/apiCount.vue
View File

@ -22,8 +22,12 @@
</div> </div>
</div> </div>
<div class="my-[16px]"> <div class="my-[16px]">
<TabCard :content-tab-list="apiCountTabList" not-has-padding hidden-border min-width="296px"> <div class="flex gap-[16px]">
<template #item="{ item: tabItem }"> <div
v-for="tabItem of apiCountTabList"
:key="tabItem.label"
:class="`flex-1 ${tabItem.value === 'complete' ? 'min-w-[300px]' : 'min-w-[197px]'}`"
>
<PassRatePie <PassRatePie
:tooltip-text="tabItem.tooltip" :tooltip-text="tabItem.tooltip"
:options="tabItem.options" :options="tabItem.options"
@ -32,8 +36,8 @@
:has-permission="hasPermission" :has-permission="hasPermission"
:value-list="tabItem.valueList" :value-list="tabItem.valueList"
/> />
</template> </div>
</TabCard> </div>
<div class="h-[148px]"> <div class="h-[148px]">
<MsChart :options="apiCountOptions" /> <MsChart :options="apiCountOptions" />
</div> </div>
@ -52,7 +56,6 @@
import MsSelect from '@/components/business/ms-select'; import MsSelect from '@/components/business/ms-select';
import CardSkeleton from './cardSkeleton.vue'; import CardSkeleton from './cardSkeleton.vue';
import PassRatePie from './passRatePie.vue'; import PassRatePie from './passRatePie.vue';
import TabCard from './tabCard.vue';
import { workApiCountCoverRage, workApiCountDetail } from '@/api/modules/workbench'; import { workApiCountCoverRage, workApiCountDetail } from '@/api/modules/workbench';
import { useI18n } from '@/hooks/useI18n'; import { useI18n } from '@/hooks/useI18n';

26
frontend/src/views/workbench/homePage/components/caseCount.vue
View File

@ -22,19 +22,18 @@
</div> </div>
</div> </div>
<div class="mt-[16px]"> <div class="mt-[16px]">
<TabCard :content-tab-list="caseCountTabList" not-has-padding hidden-border min-width="270px"> <div class="flex gap-[16px]">
<template #item="{ item: tabItem }"> <div v-for="tabItem of caseCountTabList" :key="tabItem.label" class="flex-1">
<div class="w-full"> <PassRatePie
<PassRatePie :options="tabItem.options"
:options="tabItem.options" :tooltip-text="tabItem.tooltip"
:tooltip-text="tabItem.tooltip" :size="60"
:size="60" :value-list="tabItem.valueList"
:value-list="tabItem.valueList" :has-permission="hasPermission"
:has-permission="hasPermission" />
/> </div>
</div> </div>
</template>
</TabCard>
<div class="h-[148px]"> <div class="h-[148px]">
<MsChart :options="caseCountOptions" /> <MsChart :options="caseCountOptions" />
</div> </div>
@ -53,7 +52,6 @@
import MsSelect from '@/components/business/ms-select'; import MsSelect from '@/components/business/ms-select';
import CardSkeleton from './cardSkeleton.vue'; import CardSkeleton from './cardSkeleton.vue';
import PassRatePie from './passRatePie.vue'; import PassRatePie from './passRatePie.vue';
import TabCard from './tabCard.vue';
import { workCaseCountDetail } from '@/api/modules/workbench'; import { workCaseCountDetail } from '@/api/modules/workbench';
import { useI18n } from '@/hooks/useI18n'; import { useI18n } from '@/hooks/useI18n';

2
frontend/src/views/workbench/homePage/components/defectMemberBar.vue
View File

@ -26,7 +26,7 @@
allow-clear allow-clear
allow-search allow-search
:search-keys="['label']" :search-keys="['label']"
class="!w-[200px]" class="!w-[220px]"
:prefix="t('workbench.homePage.staff')" :prefix="t('workbench.homePage.staff')"
:multiple="true" :multiple="true"
:has-all-select="true" :has-all-select="true"

2
frontend/src/views/workbench/homePage/components/overview.vue
View File

@ -15,7 +15,7 @@
value-key="id" value-key="id"
label-key="name" label-key="name"
:search-keys="['name']" :search-keys="['name']"
class="!w-[200px]" class="!w-[230px]"
:prefix="t('workbench.homePage.project')" :prefix="t('workbench.homePage.project')"
:multiple="true" :multiple="true"
:has-all-select="true" :has-all-select="true"

2
frontend/src/views/workbench/homePage/components/overviewMember.vue
View File

@ -29,7 +29,7 @@
value-key="value" value-key="value"
label-key="label" label-key="label"
:search-keys="['label']" :search-keys="['label']"
class="!w-[200px]" class="!w-[220px]"
:prefix="t('workbench.homePage.staff')" :prefix="t('workbench.homePage.staff')"
:multiple="true" :multiple="true"
:has-all-select="true" :has-all-select="true"

4
frontend/src/views/workbench/homePage/components/passRatePie.vue
View File

@ -13,7 +13,7 @@
</div> </div>
<div class="pass-rate-title flex-1"> <div class="pass-rate-title flex-1">
<div v-for="item of props.valueList" :key="item.label" class="flex-1"> <div v-for="item of props.valueList" :key="item.label" class="flex-1">
<div class="mb-[8px] text-[var(--color-text-4)]">{{ item.label }}</div> <div class="one-line-text mb-[8px] text-[var(--color-text-4)]">{{ item.label }}</div>
<div class="pass-rate-count">{{ hasPermission ? addCommasToNumber(item.value as number) : '-' }}</div> <div class="pass-rate-count">{{ hasPermission ? addCommasToNumber(item.value as number) : '-' }}</div>
</div> </div>
</div> </div>
@ -21,8 +21,6 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue';
import MsChart from '@/components/pure/chart/index.vue'; import MsChart from '@/components/pure/chart/index.vue';
import { useI18n } from '@/hooks/useI18n'; import { useI18n } from '@/hooks/useI18n';

22
frontend/src/views/workbench/homePage/components/testPlanCount.vue
View File

@ -22,18 +22,16 @@
</div> </div>
</div> </div>
<div class="mt-[16px]"> <div class="mt-[16px]">
<TabCard :content-tab-list="testPlanTabList" not-has-padding hidden-border min-width="290px"> <div class="flex gap-[16px]">
<template #item="{ item: tabItem }"> <div v-for="tabItem of testPlanTabList" :key="tabItem.label" class="flex-1">
<div class="w-full"> <PassRatePie
<PassRatePie :has-permission="hasPermission"
:has-permission="hasPermission" :options="tabItem.options"
:options="tabItem.options" :size="60"
:size="60" :value-list="tabItem.valueList"
:value-list="tabItem.valueList" />
/> </div>
</div> </div>
</template>
</TabCard>
<div class="h-[148px]"> <div class="h-[148px]">
<MsChart :options="testPlanCountOptions" /> <MsChart :options="testPlanCountOptions" />
</div> </div>

2
frontend/src/views/workbench/homePage/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div :class="`work-bench-content ${defaultWorkList.length ? 'min-w-[1000px]' : ''}`"> <div :class="`work-bench-content ${defaultWorkList.length ? 'min-w-[1200px]' : ''}`">
<div class="header-setting pb-[4px]"> <div class="header-setting pb-[4px]">
<div <div
class="setting sticky top-0 z-[999] mb-[-16px] flex items-center justify-between bg-[var(--color-bg-3)] pb-[16px]" class="setting sticky top-0 z-[999] mb-[-16px] flex items-center justify-between bg-[var(--color-bg-3)] pb-[16px]"