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

frontend/src/assets/style/global.less

@@ -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;
+  }
+}

frontend/src/components/business/ms-menu/index.vue

@@ -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
+              <a-tooltip content={currentOrgName.value} position="right">
-                ? orgTrigger(element, menuSwitchOrgVisible, () => (
+                <div
-                    <div
+                  class={collapsed.value ? 'hidden' : 'current-org-tag'} // 菜单折叠时隐藏切换组织按钮
-                      class={collapsed.value ? 'hidden' : '!bg-transparent'} // 菜单折叠时隐藏切换组织按钮
+                >
-                      onMouseenter={() => {
+                  {currentOrgName.value.substring(0, 1)}
-                        mouseEnterTimer = setTimeout(() => {
+                </div>
-                          menuSwitchOrgVisible.value = true;
+              </a-tooltip>
-                        }, 500);
-                      }}
-                      onMouseleave={() => {
-                        clearTimeout(mouseEnterTimer);
-                      }}
-                    >
-                      <MsIcon type="icon-icon_switch_outlined" class="text-[var(--color-text-4)]" />
-                    </div>
-                  ))
-                : ''}
             </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>

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

@@ -51,17 +51,16 @@
               v-if="item.hasRequired"
               :content="t(record.required ? 'msFormTable.paramRequired' : 'msFormTable.paramNotRequired')"
             >
-              <MsButton
+              <div
-                type="icon"
+                class="ms-form-table-required-button"
                 :class="[
-                  record.required ? '!text-[rgb(var(--danger-5))]' : '!text-[var(--color-text-brand)]',
+                  record.required ? 'ms-form-table-required-button--required' : '',
-                  '!mr-[4px] !p-[4px]',
+                  props.disabled ? 'ms-form-table-required-button--disabled' : '',
                 ]"
-                :size="item.size || 'medium'"
+                @click="toggleRequired(record, rowIndex, column)"
-                @click="toggleRequired(record, rowIndex, item)"
               >
-                <div>*</div>
+                <article>*</article>
-              </MsButton>
+              </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);

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

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

frontend/src/views/api-test/components/paramTable.vue

@@ -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
+        <div
-          :disabled="props.disabledExceptParam"
+          class="ms-form-table-required-button"
-          type="icon"
           :class="[
-            record.required ? '!text-[rgb(var(--danger-5))]' : '!text-[var(--color-text-brand)]',
+            record.required ? 'ms-form-table-required-button--required' : '',
-            '!mr-[4px] !p-[4px]',
+            props.disabledExceptParam || props.disabledParamValue ? 'ms-form-table-required-button--disabled' : '',
           ]"
           @click="toggleRequired(record, rowIndex)"
         >
-          <div>*</div>
+          <article>*</article>
-        </MsButton>
+        </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
+        <div
-          type="icon"
+          class="ms-form-table-required-button"
           :class="[
-            record.required ? '!text-[rgb(var(--danger-5))]' : '!text-[var(--color-text-brand)]',
+            record.required ? 'ms-form-table-required-button--required' : '',
-            '!mr-[4px] !p-[4px]',
+            props.disabledExceptParam || props.disabledParamValue ? 'ms-form-table-required-button--disabled' : '',
           ]"
-          :disabled="props.disabledExceptParam"
           @click="toggleRequired(record, rowIndex)"
         >
-          <div>*</div>
+          <article>*</article>
-        </MsButton>
+        </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');

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

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

frontend/src/views/setting/system/config/components/authConfig.vue

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