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

feat: 菜单切换组织调整&接口测试表格必填按钮样式

This commit is contained in:
baiqi 2024-07-15 15:57:21 +08:00 committed by 刘瑞斌
parent 00853b5003
commit b55b3451bf
7 changed files with 85 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/assets/style/global.less
View File

@ -165,3 +165,25 @@ body {
line-height: 16px;
color: var(--color-text-1);
}
/* 表格必填按钮 button */
.ms-form-table-required-button {
@apply flex cursor-pointer items-center justify-center align-middle;
margin-right: 4px;
padding: 0 8px;
height: 24px;
font-size: 12px;
border: 1px solid var(--color-text-n8);
border-radius: var(--border-radius-small);
color: var(--color-text-brand);
&:hover:not(.ms-form-table-required-button--required, .ms-form-table-required-button--disabled) {
color: rgb(var(--primary-7));
}
&--required {
color: rgb(var(--danger-5));
}
&--disabled {
@apply cursor-not-allowed;
}
}

44
frontend/src/components/business/ms-menu/index.vue
View File

@ -408,7 +408,10 @@
);
};
let mouseEnterTimer: NodeJS.Timeout;
const currentOrgName = computed(() => {
const org = originOrgList.value.find((e) => e.id === appStore.currentOrgId);
return org?.name || '';
});
// 渲染菜单项
const renderMenuItem = (element: RouteRecordRaw | null, icon: (() => any) | null) =>
element?.name === SettingRouteEnum.SETTING_ORGANIZATION ? (
@ -421,23 +424,13 @@
) : (
t(element?.meta?.locale || '')
)}
{xPack.value
? orgTrigger(element, menuSwitchOrgVisible, () => (
<div
class={collapsed.value ? 'hidden' : '!bg-transparent'} // 菜单折叠时隐藏切换组织按钮
onMouseenter={() => {
mouseEnterTimer = setTimeout(() => {
menuSwitchOrgVisible.value = true;
}, 500);
}}
onMouseleave={() => {
clearTimeout(mouseEnterTimer);
}}
>
<MsIcon type="icon-icon_switch_outlined" class="text-[var(--color-text-4)]" />
</div>
))
: ''}
<a-tooltip content={currentOrgName.value} position="right">
<div
class={collapsed.value ? 'hidden' : 'current-org-tag'} // 菜单折叠时隐藏切换组织按钮
>
{currentOrgName.value.substring(0, 1)}
</div>
</a-tooltip>
</div>
</a-menu-item>
) : (
@ -672,4 +665,19 @@
color: rgb(var(--primary-5));
background-color: rgb(var(--primary-1));
}
.current-org-tag {
@apply rounded-full text-center align-middle;
top: 24px;
right: -12px;
z-index: 101;
width: 18px;
height: 18px;
font-size: 10px;
border: 1px solid #ffffff;
color: var(--color-text-2);
background: linear-gradient(90deg, rgb(var(--primary-9)) 3.36%, #ffffff 100%);
box-shadow: 0 0 7px rgb(15 0 78 / 9%);
line-height: 14px;
}
</style>

19
frontend/src/components/pure/ms-form-table/index.vue
View File

@ -51,17 +51,16 @@
v-if="item.hasRequired"
:content="t(record.required ? 'msFormTable.paramRequired' : 'msFormTable.paramNotRequired')"
>
<MsButton
type="icon"
<div
class="ms-form-table-required-button"
:class="[
record.required ? '!text-[rgb(var(--danger-5))]' : '!text-[var(--color-text-brand)]',
'!mr-[4px] !p-[4px]',
record.required ? 'ms-form-table-required-button--required' : '',
props.disabled ? 'ms-form-table-required-button--disabled' : '',
]"
:size="item.size || 'medium'"
@click="toggleRequired(record, rowIndex, item)"
@click="toggleRequired(record, rowIndex, column)"
>
<div>*</div>
</MsButton>
<article>*</article>
</div>
</a-tooltip>
<div v-if="item.isNull && item.isNull(record)" class="ms-form-table-td-text">-</div>
<a-input
@ -213,7 +212,6 @@
import { FormInstance } from '@arco-design/web-vue';
import { cloneDeep } from 'lodash-es';
import MsButton from '@/components/pure/ms-button/index.vue';
import MsIcon from '@/components/pure/ms-icon-font/index.vue';
import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
import type { MsTableColumnData } from '@/components/pure/ms-table/type';
@ -459,6 +457,9 @@
}
function toggleRequired(record: Record<string, any>, rowIndex: number, columnConfig: FormTableColumn) {
if (props.disabled) {
return;
}
record.required = !record.required;
emit('formChange', record, columnConfig, rowIndex);
addTableLine(rowIndex, columnConfig.addLineDisabled);

22
frontend/src/components/pure/ms-json-schema/index.vue
View File

@ -56,22 +56,16 @@
v-if="record.id !== 'root'"
:content="t(record.required ? 'apiTestDebug.paramRequired' : 'apiTestDebug.paramNotRequired')"
>
<MsButton
type="button"
class="!mr-[4px] flex items-center justify-center !rounded-[var(--border-radius-small)] border border-[var(--color-text-n8)] !p-0"
size="mini"
:disabled="props.disabled"
<div
class="ms-form-table-required-button"
:class="[
record.required ? 'ms-form-table-required-button--required' : '',
props.disabled ? 'ms-form-table-required-button--disabled' : '',
]"
@click="toggleRequired(record)"
>
<div
class="flex h-[22px] w-[22px] items-center justify-center"
:style="{
color: record.required ? 'rgb(var(--danger-5)) !important' : 'var(--color-text-brand) !important',
}"
>
*
</div>
</MsButton>
<article>*</article>
</div>
</a-tooltip>
<div v-else class="w-[38px]"></div>
<a-select

33
frontend/src/views/api-test/components/paramTable.vue
View File

@ -24,9 +24,9 @@
</div>
</template>
<template #typeTitle="{ columnConfig }">
<div class="flex items-center text-[var(--color-text-3)]">
<div class="flex items-center text-[var(--color-text-3)]" :class="columnConfig.hasRequired ? 'pl-[30px]' : ''">
{{ t((columnConfig.title as string) || 'apiTestDebug.paramType') }}
<a-tooltip :disabled="!columnConfig.typeTitleTooltip" position="right">
<a-tooltip v-if="columnConfig.typeTitleTooltip" :disabled="!columnConfig.typeTitleTooltip" position="right">
<template #content>
<template v-if="Array.isArray(columnConfig.typeTitleTooltip)">
<div v-for="tip of columnConfig.typeTitleTooltip" :key="tip">{{ tip }}</div>
@ -158,17 +158,16 @@
v-if="columnConfig.hasRequired"
:content="t(record.required ? 'apiTestDebug.paramRequired' : 'apiTestDebug.paramNotRequired')"
>
<MsButton
:disabled="props.disabledExceptParam"
type="icon"
<div
class="ms-form-table-required-button"
:class="[
record.required ? '!text-[rgb(var(--danger-5))]' : '!text-[var(--color-text-brand)]',
'!mr-[4px] !p-[4px]',
record.required ? 'ms-form-table-required-button--required' : '',
props.disabledExceptParam || props.disabledParamValue ? 'ms-form-table-required-button--disabled' : '',
]"
@click="toggleRequired(record, rowIndex)"
>
<div>*</div>
</MsButton>
<article>*</article>
</div>
</a-tooltip>
<a-select
v-model:model-value="record.paramType"
@ -400,17 +399,16 @@
v-if="columnConfig.hasRequired"
:content="t(record.required ? 'apiTestDebug.paramRequired' : 'apiTestDebug.paramNotRequired')"
>
<MsButton
type="icon"
<div
class="ms-form-table-required-button"
:class="[
record.required ? '!text-[rgb(var(--danger-5))]' : '!text-[var(--color-text-brand)]',
'!mr-[4px] !p-[4px]',
record.required ? 'ms-form-table-required-button--required' : '',
props.disabledExceptParam || props.disabledParamValue ? 'ms-form-table-required-button--disabled' : '',
]"
:disabled="props.disabledExceptParam"
@click="toggleRequired(record, rowIndex)"
>
<div>*</div>
</MsButton>
<article>*</article>
</div>
</a-tooltip>
<a-input
v-model="record.expectedValue"
@ -937,6 +935,9 @@
);
function toggleRequired(record: Record<string, any>, rowIndex: number) {
if (props.disabledExceptParam || props.disabledParamValue) {
return;
}
record.required = !record.required;
addTableLine(rowIndex);
emitChange('toggleRequired');

1
frontend/src/views/api-test/components/requestComposition/body.vue
View File

@ -306,6 +306,7 @@
title: 'apiTestDebug.paramType',
dataIndex: 'paramType',
slotName: 'paramType',
titleSlotName: 'typeTitle',
hasRequired: true,
options: options.value,
width: 130,

1
frontend/src/views/setting/system/config/components/authConfig.vue
View File

@ -1200,6 +1200,7 @@
showDrawer.value = false;
}
}
authFormRef.value?.resetFields();
loadList();
} catch (error) {
// eslint-disable-next-line no-console