style(工作台): 修复工作台首页自适应样式bug

This commit is contained in:
xinxin.wu 2024-11-19 19:21:07 +08:00 committed by Craftsman
parent 7956aa5b42
commit 4b9fc810c7
14 changed files with 54 additions and 33 deletions

View File

@ -160,7 +160,7 @@
const statusOption = ref<BugOptionItem[]>([]); const statusOption = ref<BugOptionItem[]>([]);
async function initFilterOptions() { async function initFilterOptions() {
const res = await getCustomOptionHeader(appStore.currentProjectId); const res = await getCustomOptionHeader(props.project);
statusOption.value = res.statusOption; statusOption.value = res.statusOption;
const filterOptionsMaps: Record<string, any> = { const filterOptionsMaps: Record<string, any> = {
status: res.statusOption, status: res.statusOption,

View File

@ -1,9 +1,9 @@
<template> <template>
<div class="card-wrapper card-min-height"> <div class="card-wrapper card-min-height">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="title"> <a-tooltip :content="t(props.item.label)" position="tl">
{{ t(props.item.label) }} <div class="title one-line-text"> {{ t(props.item.label) }} </div>
</div> </a-tooltip>
<div> <div>
<MsSelect <MsSelect
v-model:model-value="projectId" v-model:model-value="projectId"
@ -12,7 +12,7 @@
value-key="id" value-key="id"
label-key="name" label-key="name"
:search-keys="['name']" :search-keys="['name']"
class="!w-[240px]" class="!w-[200px]"
:prefix="t('workbench.homePage.project')" :prefix="t('workbench.homePage.project')"
@change="changeProject" @change="changeProject"
> >

View File

@ -1,9 +1,9 @@
<template> <template>
<div class="card-wrapper card-min-height"> <div class="card-wrapper card-min-height">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="title"> <a-tooltip :content="t(props.item.label)" position="tl">
{{ t(props.item.label) }} <div class="title one-line-text"> {{ t(props.item.label) }} </div>
</div> </a-tooltip>
<div> <div>
<MsSelect <MsSelect
v-model:model-value="projectId" v-model:model-value="projectId"
@ -12,7 +12,7 @@
value-key="id" value-key="id"
label-key="name" label-key="name"
:search-keys="['name']" :search-keys="['name']"
class="!w-[240px]" class="!w-[200px]"
:prefix="t('workbench.homePage.project')" :prefix="t('workbench.homePage.project')"
@change="changeProject" @change="changeProject"
> >

View File

@ -1,7 +1,9 @@
<template> <template>
<div class="card-wrapper api-count-wrapper card-min-height"> <div class="card-wrapper api-count-wrapper card-min-height">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="title"> {{ t('workbench.homePage.apiCount') }} </div> <a-tooltip :content="t(props.item.label)" position="tl">
<div class="title one-line-text"> {{ t(props.item.label) }} </div>
</a-tooltip>
<div> <div>
<MsSelect <MsSelect
v-model:model-value="projectId" v-model:model-value="projectId"
@ -10,7 +12,7 @@
value-key="id" value-key="id"
label-key="name" label-key="name"
:search-keys="['name']" :search-keys="['name']"
class="!w-[240px]" class="!w-[200px]"
:prefix="t('workbench.homePage.project')" :prefix="t('workbench.homePage.project')"
@change="changeProject" @change="changeProject"
> >

View File

@ -1,7 +1,9 @@
<template> <template>
<div class="card-wrapper card-min-height"> <div class="card-wrapper card-min-height">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="title"> {{ t('workbench.homePage.useCasesNumber') }} </div> <a-tooltip :content="t(props.item.label)" position="tl">
<div class="title one-line-text"> {{ t(props.item.label) }} </div>
</a-tooltip>
<div> <div>
<MsSelect <MsSelect
v-model:model-value="projectId" v-model:model-value="projectId"
@ -10,7 +12,7 @@
value-key="id" value-key="id"
label-key="name" label-key="name"
:search-keys="['name']" :search-keys="['name']"
class="!w-[240px]" class="!w-[200px]"
:prefix="t('workbench.homePage.project')" :prefix="t('workbench.homePage.project')"
@change="changeProject" @change="changeProject"
> >

View File

@ -1,7 +1,9 @@
<template> <template>
<div class="card-wrapper card-min-height"> <div class="card-wrapper card-min-height">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="title"> {{ t('workbench.homePage.numberOfCaseReviews') }} </div> <a-tooltip :content="t(props.item.label)" position="tl">
<div class="title one-line-text"> {{ t(props.item.label) }} </div>
</a-tooltip>
<div> <div>
<MsSelect <MsSelect
v-model:model-value="projectId" v-model:model-value="projectId"
@ -10,7 +12,7 @@
value-key="id" value-key="id"
label-key="name" label-key="name"
:search-keys="['name']" :search-keys="['name']"
class="!w-[240px]" class="!w-[200px]"
:prefix="t('workbench.homePage.project')" :prefix="t('workbench.homePage.project')"
@change="changeProject" @change="changeProject"
> >

View File

@ -1,7 +1,9 @@
<template> <template>
<div class="card-wrapper card-min-height"> <div class="card-wrapper card-min-height">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="title"> {{ t(props.item.label) }} </div> <a-tooltip :content="t(props.item.label)" position="tl">
<div class="title one-line-text"> {{ t(props.item.label) }} </div>
</a-tooltip>
<div> <div>
<MsSelect <MsSelect
v-model:model-value="projectId" v-model:model-value="projectId"
@ -10,7 +12,7 @@
value-key="id" value-key="id"
label-key="name" label-key="name"
:search-keys="['name']" :search-keys="['name']"
class="!w-[240px]" class="!w-[200px]"
:prefix="t('workbench.homePage.project')" :prefix="t('workbench.homePage.project')"
@change="changeProject" @change="changeProject"
> >

View File

@ -1,7 +1,9 @@
<template> <template>
<div class="card-wrapper"> <div class="card-wrapper">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="title"> {{ t(props.item.label) }} </div> <a-tooltip :content="t(props.item.label)" position="tl">
<div class="title one-line-text"> {{ t(props.item.label) }} </div>
</a-tooltip>
<div class="flex items-center gap-[8px]"> <div class="flex items-center gap-[8px]">
<MsSelect <MsSelect
v-model:model-value="projectId" v-model:model-value="projectId"
@ -10,7 +12,7 @@
value-key="id" value-key="id"
label-key="name" label-key="name"
:search-keys="['name']" :search-keys="['name']"
class="!w-[240px]" class="!w-[200px]"
:prefix="t('workbench.homePage.project')" :prefix="t('workbench.homePage.project')"
@change="changeProject" @change="changeProject"
> >
@ -20,7 +22,7 @@
:options="memberOptions" :options="memberOptions"
:allow-search="false" :allow-search="false"
allow-clear allow-clear
class="!w-[240px]" class="!w-[200px]"
:prefix="t('workbench.homePage.staff')" :prefix="t('workbench.homePage.staff')"
:multiple="true" :multiple="true"
:has-all-select="true" :has-all-select="true"

View File

@ -1,7 +1,9 @@
<template> <template>
<div class="card-wrapper"> <div class="card-wrapper">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="title"> {{ t(props.item.label) }} </div> <a-tooltip :content="t(props.item.label)" position="tl">
<div class="title one-line-text"> {{ t(props.item.label) }} </div>
</a-tooltip>
<div> <div>
<MsSelect <MsSelect
v-model:model-value="innerProjectIds" v-model:model-value="innerProjectIds"
@ -11,7 +13,7 @@
value-key="id" value-key="id"
label-key="name" label-key="name"
:search-keys="['name']" :search-keys="['name']"
class="!w-[240px]" class="!w-[200px]"
:prefix="t('workbench.homePage.project')" :prefix="t('workbench.homePage.project')"
:multiple="true" :multiple="true"
:has-all-select="true" :has-all-select="true"

View File

@ -1,7 +1,9 @@
<template> <template>
<div class="card-wrapper"> <div class="card-wrapper">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="title"> {{ t(props.item.label) }} </div> <a-tooltip :content="t(props.item.label)" position="tl">
<div class="title one-line-text"> {{ t(props.item.label) }} </div>
</a-tooltip>
<div class="flex items-center gap-[8px]"> <div class="flex items-center gap-[8px]">
<MsSelect <MsSelect
v-model:model-value="projectId" v-model:model-value="projectId"
@ -10,7 +12,7 @@
value-key="id" value-key="id"
label-key="name" label-key="name"
:search-keys="['name']" :search-keys="['name']"
class="!w-[240px]" class="!w-[200px]"
:prefix="t('workbench.homePage.project')" :prefix="t('workbench.homePage.project')"
@change="changeProject" @change="changeProject"
> >
@ -22,7 +24,7 @@
allow-clear allow-clear
value-key="value" value-key="value"
label-key="label" label-key="label"
class="!w-[240px]" class="!w-[200px]"
:prefix="t('workbench.homePage.staff')" :prefix="t('workbench.homePage.staff')"
:multiple="true" :multiple="true"
:has-all-select="true" :has-all-select="true"

View File

@ -1,7 +1,9 @@
<template> <template>
<div :class="`card-wrapper ${props.item.fullScreen ? '' : 'card-min-height'}`"> <div :class="`card-wrapper ${props.item.fullScreen ? '' : 'card-min-height'}`">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="title"> {{ t('workbench.homePage.useCasesCount') }} </div> <a-tooltip :content="t(props.item.label)" position="tl">
<div class="title one-line-text"> {{ t(props.item.label) }} </div>
</a-tooltip>
<div> <div>
<MsSelect <MsSelect
v-model:model-value="projectId" v-model:model-value="projectId"
@ -9,7 +11,7 @@
value-key="id" value-key="id"
label-key="name" label-key="name"
:search-keys="['name']" :search-keys="['name']"
class="!w-[240px]" class="!w-[200px]"
:prefix="t('workbench.homePage.project')" :prefix="t('workbench.homePage.project')"
@change="changeProject" @change="changeProject"
> >

View File

@ -1,9 +1,9 @@
<template> <template>
<div class="card-wrapper card-min-height"> <div class="card-wrapper card-min-height">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="title"> <a-tooltip :content="t(props.item.label)" position="tl">
{{ t('workbench.homePage.numberOfTestPlan') }} <div class="title one-line-text"> {{ t(props.item.label) }} </div>
</div> </a-tooltip>
<div> <div>
<MsSelect <MsSelect
v-model:model-value="projectId" v-model:model-value="projectId"
@ -12,7 +12,7 @@
value-key="id" value-key="id"
label-key="name" label-key="name"
:search-keys="['name']" :search-keys="['name']"
class="!w-[240px]" class="!w-[200px]"
:prefix="t('workbench.homePage.project')" :prefix="t('workbench.homePage.project')"
@change="changeProject" @change="changeProject"
> >

View File

@ -1,7 +1,9 @@
<template> <template>
<div class="card-wrapper"> <div class="card-wrapper">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="title"> {{ t(props.item.label) }} </div> <a-tooltip :content="t(props.item.label)" position="tl">
<div class="title one-line-text"> {{ t(props.item.label) }} </div>
</a-tooltip>
<div> <div>
<MsSelect <MsSelect
v-model:model-value="projectId" v-model:model-value="projectId"
@ -10,7 +12,7 @@
value-key="id" value-key="id"
label-key="name" label-key="name"
:search-keys="['name']" :search-keys="['name']"
class="!w-[240px]" class="!w-[200px]"
:prefix="t('workbench.homePage.project')" :prefix="t('workbench.homePage.project')"
@change="changeProject" @change="changeProject"
> >

View File

@ -344,6 +344,9 @@
<style scoped lang="less"> <style scoped lang="less">
.work-bench-content { .work-bench-content {
min-width: 1200px;
@apply overflow-x-auto;
.ms-scroll-bar();
.header-setting { .header-setting {
position: sticky; position: sticky;
top: 0; top: 0;