feat(theme): darkTheme (#34438)
Co-authored-by: baiqi <qi.bai@fit2cloud.com>
This commit is contained in:
MeterSphere Bot
GitHub
parent
19536bdb23
commit
3c01fbf17c
|
|
@ -20,7 +20,7 @@
|
|||
import { getQueryVariable, getUrlParameterWidthRegExp } from '@/utils';
|
||||
import { setLoginExpires, setLongType, setToken } from '@/utils/auth';
|
||||
import { getLocalStorage, setLocalStorage } from '@/utils/local-storage';
|
||||
import { setFavicon, watchStyle, watchTheme } from '@/utils/theme';
|
||||
import { setFavicon } from '@/utils/theme';
|
||||
|
||||
import { getLarkCallback, getLarkSuiteCallback, getPublicKeyRequest } from './api/modules/user';
|
||||
import { hasAnyPermission } from './utils/permission';
|
||||
|
|
@ -42,9 +42,6 @@
|
|||
}
|
||||
});
|
||||
|
||||
// 初始化平台风格和主题色
|
||||
watchStyle(appStore.pageConfig.style, appStore.pageConfig);
|
||||
watchTheme(appStore.pageConfig.theme, appStore.pageConfig);
|
||||
setFavicon(GetPlatformIconUrl);
|
||||
|
||||
onBeforeMount(async () => {
|
||||
|
|
|
|||
|
|
@ -17,6 +17,10 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.arco-table-td {
|
||||
border-color: var(--color-text-n9);
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
.ms-table-row-disabled {
|
||||
td:not(.arco-table-col-fixed-right, .arco-table-checkbox),
|
||||
&:hover,
|
||||
|
|
@ -26,13 +30,33 @@
|
|||
background-color: var(--color-text-n8) !important;
|
||||
}
|
||||
}
|
||||
.arco-table-header,
|
||||
.arco-table-tr,
|
||||
.arco-table-th {
|
||||
background-color: var(--color-text-fff);
|
||||
}
|
||||
.arco-table-th {
|
||||
border-color: var(--color-text-n8) !important;
|
||||
}
|
||||
.arco-table-td,
|
||||
.arco-table-scroll-y {
|
||||
border-color: var(--color-text-n8) !important;
|
||||
}
|
||||
|
||||
/** Tabs 组件样式 **/
|
||||
.arco-tabs,
|
||||
.arco-tabs-nav {
|
||||
border-color: var(--color-text-n8);
|
||||
}
|
||||
.arco-tabs-nav-add-btn {
|
||||
font-size: var(--font-size-body-3);
|
||||
}
|
||||
.arco-tabs-tab {
|
||||
padding: 12px 0 !important;
|
||||
color: var(--color-text-2);
|
||||
&-active {
|
||||
color: rgb(var(--primary-5));
|
||||
}
|
||||
&:hover {
|
||||
.arco-tabs-tab-title::before {
|
||||
background-color: inherit !important;
|
||||
|
|
@ -58,9 +82,10 @@
|
|||
@apply overflow-hidden;
|
||||
}
|
||||
.arco-modal {
|
||||
@apply overflow-hidden bg-white;
|
||||
@apply overflow-hidden;
|
||||
|
||||
padding: 24px;
|
||||
background-color: var(--color-text-fff);
|
||||
.arco-modal-header {
|
||||
@apply h-auto items-baseline border-b-0 p-0;
|
||||
|
||||
|
|
@ -298,6 +323,7 @@
|
|||
.arco-select {
|
||||
width: 100%;
|
||||
border: 1px solid var(--color-text-n8);
|
||||
border-color: var(--color-text-n8) !important;
|
||||
background-color: var(--color-text-fff);
|
||||
&:not(
|
||||
:disabled,
|
||||
|
|
@ -308,16 +334,19 @@
|
|||
.arco-picker-disabled
|
||||
):hover {
|
||||
border-color: rgb(var(--primary-5)) !important;
|
||||
background-color: white;
|
||||
}
|
||||
input::placeholder {
|
||||
color: var(--color-text-brand);
|
||||
background-color: var(--color-text-fff);
|
||||
}
|
||||
}
|
||||
input::placeholder {
|
||||
color: var(--color-text-brand) !important;
|
||||
}
|
||||
.arco-select-view-multiple.arco-select-view-size-medium {
|
||||
overflow: hidden; // 防止多选输入过多，撑开
|
||||
height: 32px;
|
||||
}
|
||||
.arco-select-view-prefix {
|
||||
color: var(--color-text-brand) !important;
|
||||
}
|
||||
.arco-input-tag-disabled,
|
||||
.arco-select-view-disabled,
|
||||
.arco-textarea-disabled,
|
||||
|
|
@ -379,12 +408,11 @@
|
|||
}
|
||||
.arco-input-prepend,
|
||||
.arco-input-append {
|
||||
@apply bg-white;
|
||||
background-color: var(--color-text-fff);
|
||||
.arco-input-number-step-button {
|
||||
@apply !bg-white;
|
||||
|
||||
border: 1px solid var(--color-text-n8) !important;
|
||||
border-radius: var(--border-radius-small) !important;
|
||||
background-color: var(--color-text-fff) !important;
|
||||
.btn-outline-sec-hover();
|
||||
.btn-outline-sec-active();
|
||||
&:disabled {
|
||||
|
|
@ -430,14 +458,14 @@
|
|||
.arco-input-wrapper:not(.arco-input-disabled),
|
||||
.arco-select-view:not(.arco-select-view-disabled),
|
||||
.arco-textarea-wrapper:not(.arco-textarea-disabled) {
|
||||
background: white;
|
||||
background: var(--color-text-fff);
|
||||
}
|
||||
}
|
||||
.arco-input-wrapper:not(.arco-input-disabled),
|
||||
.arco-select-view:not(.arco-select-view-disabled),
|
||||
.arco-textarea-wrapper:not(.arco-textarea-disabled) {
|
||||
border-color: var(--color-text-input-border);
|
||||
background: white;
|
||||
background: var(--color-text-fff);
|
||||
}
|
||||
}
|
||||
.arco-form-item-message {
|
||||
|
|
@ -493,10 +521,11 @@
|
|||
.arco-checkbox-disabled.arco-checkbox-checked,
|
||||
.arco-checkbox-disabled.arco-checkbox-checked:hover {
|
||||
.arco-checkbox-icon {
|
||||
@apply bg-white text-white;
|
||||
@apply text-white;
|
||||
|
||||
border-color: var(--color-text-input-border) !important;
|
||||
background: var(--color-text-n8) !important;
|
||||
background-color: var(--color-text-fff);
|
||||
&::after {
|
||||
background-color: var(--color-text-4);
|
||||
}
|
||||
|
|
@ -522,9 +551,8 @@
|
|||
line-height: 20px;
|
||||
}
|
||||
.arco-radio-checked {
|
||||
@apply bg-white;
|
||||
|
||||
color: rgb(var(--primary-5));
|
||||
background-color: var(--color-text-fff);
|
||||
}
|
||||
}
|
||||
.arco-radio-group-size-medium {
|
||||
|
|
@ -547,12 +575,11 @@
|
|||
}
|
||||
.arco-radio-checked:not(.arco-radio-disabled) {
|
||||
.arco-radio-icon {
|
||||
@apply !bg-white;
|
||||
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
border: 1px solid rgb(var(--primary-6));
|
||||
background-color: var(--color-text-fff) !important;
|
||||
line-height: 16px;
|
||||
&::after {
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
|
|
@ -703,9 +730,8 @@
|
|||
margin: 1px;
|
||||
}
|
||||
.arco-radio-checked {
|
||||
@apply bg-white;
|
||||
|
||||
color: rgb(var(--primary-5));
|
||||
background-color: var(--color-text-fff);
|
||||
}
|
||||
}
|
||||
.arco-radio-checked.arco-radio-disabled {
|
||||
|
|
@ -719,12 +745,11 @@
|
|||
}
|
||||
.arco-radio-checked:not(.arco-radio-disabled) {
|
||||
.arco-radio-icon {
|
||||
@apply !bg-white;
|
||||
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
border: 1px solid rgb(var(--primary-6));
|
||||
background-color: var(--color-text-fff) !important;
|
||||
line-height: 16px;
|
||||
&::after {
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
|
|
@ -745,6 +770,9 @@
|
|||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
.arco-popover-popup-content {
|
||||
border-color: var(--color-text-n8);
|
||||
}
|
||||
|
||||
/** 链接 **/
|
||||
.arco-link-status-normal {
|
||||
|
|
@ -867,6 +895,8 @@
|
|||
/** tooltip **/
|
||||
.arco-tooltip-content {
|
||||
@apply break-all;
|
||||
|
||||
color: var(--color-text-fff);
|
||||
}
|
||||
.arco-trigger-arrow {
|
||||
border-bottom-right-radius: var(--border-radius-mini) !important;
|
||||
|
|
@ -930,3 +960,15 @@
|
|||
flex-direction: row;
|
||||
margin: 12px;
|
||||
}
|
||||
|
||||
/** 分割线 **/
|
||||
.arco-divider-horizontal,
|
||||
.arco-divider-vertical {
|
||||
border-color: var(--color-text-n8);
|
||||
}
|
||||
|
||||
/** 级联选择器 **/
|
||||
.arco-cascader-panel,
|
||||
.arco-cascader-panel-column {
|
||||
border-color: var(--color-text-n8) !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -129,6 +129,7 @@ body {
|
|||
.arco-trigger-popup-wrapper {
|
||||
.arco-popover-popup-content {
|
||||
padding: 4px 8px;
|
||||
border-color: var(--color-text-n8);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -26,10 +26,9 @@
|
|||
}
|
||||
.btn-outline-primary-disabled() {
|
||||
&:disabled {
|
||||
@apply !bg-white;
|
||||
|
||||
border: 1px solid rgb(var(--primary-3)) !important;
|
||||
color: rgb(var(--primary-3)) !important;
|
||||
background-color: var(--color-text-fff) !important;
|
||||
}
|
||||
}
|
||||
.btn-outline-sec-hover() {
|
||||
|
|
@ -42,7 +41,7 @@
|
|||
.btn-outline-sec-default() {
|
||||
border-color: var(--color-text-brand) !important;
|
||||
color: var(--color-text-1) !important;
|
||||
background-color: white !important;
|
||||
background-color: var(--color-text-fff) !important;
|
||||
}
|
||||
.btn-outline-sec-active() {
|
||||
&:not(:disabled):active {
|
||||
|
|
@ -53,10 +52,9 @@
|
|||
}
|
||||
.btn-outline-sec-disabled() {
|
||||
&:disabled {
|
||||
@apply !bg-white;
|
||||
|
||||
border: 1px solid var(--color-text-input-border) !important;
|
||||
color: var(--color-text-4) !important;
|
||||
background-color: var(--color-text-fff) !important;
|
||||
}
|
||||
}
|
||||
.btn-outline-danger-default() {
|
||||
|
|
@ -79,10 +77,9 @@
|
|||
}
|
||||
.btn-outline-danger-disabled() {
|
||||
&:disabled {
|
||||
@apply !bg-white;
|
||||
|
||||
border: 1px solid rgb(var(--danger-2)) !important;
|
||||
color: rgb(var(--danger-2));
|
||||
background-color: var(--color-text-fff) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -216,6 +213,7 @@
|
|||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
transition: box-shadow 0.1s cubic-bezier(0, 0, 1, 1);
|
||||
content: '';
|
||||
|
|
@ -231,6 +229,7 @@
|
|||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
transition: box-shadow 0.1s cubic-bezier(0, 0, 1, 1);
|
||||
content: '';
|
||||
|
|
|
|||
|
|
@ -399,7 +399,7 @@
|
|||
@apply rounded;
|
||||
}
|
||||
.dragChosenClass {
|
||||
background: white;
|
||||
background: var(--color-text-fff);
|
||||
opacity: 1 !important;
|
||||
@apply rounded;
|
||||
.minus {
|
||||
|
|
|
|||
|
|
@ -115,8 +115,9 @@
|
|||
<style scoped lang="less">
|
||||
.commentWrapper {
|
||||
z-index: 101;
|
||||
background-color: var(--color-text-fff);
|
||||
box-shadow: 1px -1px 4px rgba(2 2 2 / 10%);
|
||||
@apply absolute bottom-0 w-full bg-white px-4 py-4;
|
||||
@apply absolute bottom-0 w-full px-4 py-4;
|
||||
}
|
||||
:deep(.rich-wrapper) {
|
||||
.halo-rich-text-editor {
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
@apply overflow-x-auto;
|
||||
.ms-scroll-bar();
|
||||
tr {
|
||||
background: white !important;
|
||||
background: var(--color-text-fff) !important;
|
||||
th,
|
||||
td {
|
||||
padding: 8px;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div v-if="!innerExpand" class="w-[32%] min-w-[260px] max-w-[42%] flex-1 bg-white p-3 pl-0">
|
||||
<div v-if="!innerExpand" class="w-[32%] min-w-[260px] max-w-[42%] flex-1 bg-[var(--color-text-fff)] p-3 pl-0">
|
||||
<div class="mb-2 flex w-full items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<span v-if="innerExpand" class="collapsebtn mr-1 flex items-center justify-center" @click="expandedHandler">
|
||||
|
|
@ -178,8 +178,9 @@ StandardJMeterEngine.stopThreadNow(ctx.getThread().getThreadName());
|
|||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
@apply cursor-pointer;
|
||||
|
||||
background: var(--color-text-n8) !important;
|
||||
@apply cursor-pointer bg-white;
|
||||
}
|
||||
.expand {
|
||||
width: 16px;
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<div class="flex h-full w-full">
|
||||
<div class="flex h-full w-[180px] flex-col bg-white">
|
||||
<div class="flex h-full w-[180px] flex-col bg-[var(--color-text-fff)]">
|
||||
<a-menu class="ms-message-menu" :default-selected-keys="[defaultModule]" @menu-item-click="clickModule">
|
||||
<a-menu-item :key="'all'">
|
||||
<div class="flex items-center justify-between">
|
||||
|
|
@ -473,7 +473,7 @@
|
|||
<style lang="less">
|
||||
.ms-drawer {
|
||||
.ms-message-menu {
|
||||
@apply bg-white;
|
||||
background-color: var(--color-text-fff);
|
||||
.arco-menu-inner {
|
||||
padding: 16px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -69,8 +69,9 @@
|
|||
width: 150px;
|
||||
max-height: 192px;
|
||||
border-radius: var(--border-radius-medium);
|
||||
background-color: var(--color-text-fff);
|
||||
box-shadow: 0 -1px 4px rgb(2 2 2 / 10%);
|
||||
@apply overflow-y-auto overflow-x-hidden bg-white;
|
||||
@apply overflow-y-auto overflow-x-hidden;
|
||||
.ms-scroll-bar();
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
</MsButton>
|
||||
</a-tooltip>
|
||||
<template #content>
|
||||
<div class="w-[440px] rounded bg-white p-[16px] shadow-[0_0_10px_rgba(0,0,0,0.05)]">
|
||||
<div class="w-[440px] rounded bg-[var(--color-text-fff)] p-[16px] shadow-[0_0_10px_rgba(0,0,0,0.05)]">
|
||||
<ReviewSubmit
|
||||
:review-pass-rule="reviewPassRule"
|
||||
:select-node="selectNode"
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
<div v-if="hasEditPermission" class="flex items-center gap-[12px] bg-white py-[16px]">
|
||||
<div v-if="hasEditPermission" class="flex items-center gap-[12px] bg-[var(--color-text-fff)] py-[16px]">
|
||||
<a-button
|
||||
v-permission="['FUNCTIONAL_CASE:READ+UPDATE']"
|
||||
type="primary"
|
||||
|
|
|
|||
|
|
@ -246,7 +246,7 @@
|
|||
padding: 8px;
|
||||
border: 1px solid var(--color-text-n8);
|
||||
border-radius: var(--border-radius-small);
|
||||
background-color: white;
|
||||
background-color: var(--color-text-fff);
|
||||
&:hover {
|
||||
@apply relative;
|
||||
|
||||
|
|
|
|||
|
|
@ -134,7 +134,7 @@
|
|||
padding: 8px;
|
||||
border: 1px solid var(--color-text-n8);
|
||||
border-radius: var(--border-radius-small);
|
||||
background-color: white;
|
||||
background-color: var(--color-text-fff);
|
||||
&:hover {
|
||||
@apply relative;
|
||||
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
<MsIcon type="icon-icon_play-round_filled" class="text-[var(--color-text-4)]" />
|
||||
</MsButton>
|
||||
<template #content>
|
||||
<div class="w-[440px] rounded bg-white p-[16px] shadow-[0_0_10px_rgba(0,0,0,0.05)]">
|
||||
<div class="w-[440px] rounded bg-[var(--color-text-fff)] p-[16px] shadow-[0_0_10px_rgba(0,0,0,0.05)]">
|
||||
<ExecuteSubmit
|
||||
:select-node="selectNode"
|
||||
:tree-type="props.treeType"
|
||||
|
|
|
|||
|
|
@ -217,7 +217,7 @@
|
|||
</template>
|
||||
</template>
|
||||
</a-form>
|
||||
<div v-if="hasEditPermission" class="flex items-center gap-[12px] bg-white pb-[16px]">
|
||||
<div v-if="hasEditPermission" class="flex items-center gap-[12px] bg-[var(--color-text-fff)] pb-[16px]">
|
||||
<a-button type="primary" :loading="loading" @click="handleConfigSave">
|
||||
{{ t('common.save') }}
|
||||
</a-button>
|
||||
|
|
|
|||
|
|
@ -667,7 +667,7 @@
|
|||
|
||||
<style lang="less">
|
||||
.ms-params-input-setting-trigger {
|
||||
@apply bg-white;
|
||||
background-color: var(--color-text-fff);
|
||||
.ms-params-input-setting-trigger-content {
|
||||
padding: 16px;
|
||||
width: 480px;
|
||||
|
|
|
|||
|
|
@ -388,11 +388,10 @@
|
|||
background-color: var(--color-text-n9);
|
||||
}
|
||||
.api-item {
|
||||
@apply bg-white;
|
||||
|
||||
padding: 16px 0;
|
||||
height: 335px;
|
||||
border-radius: var(--border-radius-small);
|
||||
background-color: var(--color-text-fff);
|
||||
.api-item-label {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
|
|
|
|||
|
|
@ -316,9 +316,10 @@
|
|||
margin-bottom: 16px;
|
||||
}
|
||||
.check-icon {
|
||||
@apply absolute right-0 rounded-full bg-white;
|
||||
@apply absolute right-0 rounded-full;
|
||||
|
||||
bottom: 22px;
|
||||
background-color: var(--color-text-fff);
|
||||
}
|
||||
:deep(.ms-description-item-value) {
|
||||
-webkit-line-clamp: unset !important;
|
||||
|
|
|
|||
|
|
@ -266,10 +266,11 @@
|
|||
gap: 16px;
|
||||
}
|
||||
.platform-card {
|
||||
@apply w-full bg-white;
|
||||
@apply w-full;
|
||||
|
||||
padding: 16px;
|
||||
border-radius: var(--border-radius-small);
|
||||
background-color: var(--color-text-fff);
|
||||
:deep(.arco-form-item-label) {
|
||||
color: var(--color-text-4) !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,9 +3,10 @@
|
|||
@apply relative;
|
||||
}
|
||||
.ms-select-inner-all {
|
||||
@apply absolute top-0 flex h-full w-full items-center bg-white;
|
||||
@apply absolute top-0 flex h-full w-full items-center;
|
||||
|
||||
color: var(--color-text-1);
|
||||
background-color: var(--color-text-fff);
|
||||
}
|
||||
}
|
||||
.arco-select-view-single {
|
||||
|
|
|
|||
|
|
@ -139,13 +139,14 @@
|
|||
}
|
||||
}
|
||||
.ms-thumbnail-card-more {
|
||||
@apply invisible absolute bg-white;
|
||||
@apply invisible absolute;
|
||||
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
z-index: 1;
|
||||
padding: 4px;
|
||||
border-radius: var(--border-radius-small);
|
||||
background-color: var(--color-text-fff);
|
||||
&:hover {
|
||||
color: rgb(var(--primary-5));
|
||||
background-color: rgb(var(--primary-1));
|
||||
|
|
|
|||
|
|
@ -186,7 +186,7 @@
|
|||
width: calc(50% - 34px);
|
||||
height: v-bind(height);
|
||||
.arco-transfer-view-header {
|
||||
@apply bg-white;
|
||||
background-color: var(--color-text-fff);
|
||||
}
|
||||
.arco-transfer-view-body {
|
||||
.ms-tree-container {
|
||||
|
|
|
|||
|
|
@ -526,7 +526,7 @@
|
|||
.arco-tree-node-plus-icon {
|
||||
border: 1px solid var(--color-text-4);
|
||||
border-radius: var(--border-radius-mini);
|
||||
background-color: white;
|
||||
background-color: var(--color-text-fff);
|
||||
&::after,
|
||||
&::before {
|
||||
background-color: var(--color-text-4);
|
||||
|
|
@ -612,7 +612,7 @@
|
|||
.arco-tree-node-plus-icon {
|
||||
border: 1px solid rgb(var(--primary-5));
|
||||
border-radius: var(--border-radius-mini);
|
||||
background-color: white;
|
||||
background-color: var(--color-text-fff);
|
||||
&::after,
|
||||
&::before {
|
||||
background-color: rgb(var(--primary-5));
|
||||
|
|
|
|||
|
|
@ -417,6 +417,10 @@
|
|||
@apply flex-1 overflow-hidden;
|
||||
|
||||
padding: 0 16px 16px;
|
||||
div,
|
||||
span {
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
:deep(.arco-table-container) {
|
||||
border-top: 1px solid var(--color-text-n8) !important;
|
||||
border-left: 1px solid var(--color-text-n8) !important;
|
||||
|
|
@ -436,7 +440,7 @@
|
|||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 24px;
|
||||
background-color: #ffffff;
|
||||
background-color: var(--color-text-fff);
|
||||
box-shadow: 0 -1px 4px rgb(2 2 2 / 10%);
|
||||
gap: 16px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="flex flex-col px-[16px] pb-[16px]">
|
||||
<div class="sticky top-0 z-[999] bg-white pb-[8px] pt-[16px]">
|
||||
<div class="sticky top-0 z-[999] bg-[var(--color-text-fff)] pb-[8px] pt-[16px]">
|
||||
<a-input-search
|
||||
:placeholder="t('system.userGroup.searchHolder')"
|
||||
allow-clear
|
||||
|
|
|
|||
|
|
@ -1,30 +0,0 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<form-create v-model="value" v-model:api="fApi" :rule="rule" :option="option"></form-create>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
|
||||
const value = ref({});
|
||||
const fApi = ref({});
|
||||
const rule = reactive([
|
||||
{
|
||||
type: 'input',
|
||||
field: 'goods_name',
|
||||
title: '商品名称',
|
||||
},
|
||||
{
|
||||
type: 'datePicker',
|
||||
field: 'created_at',
|
||||
title: '创建时间',
|
||||
},
|
||||
]);
|
||||
const option = {
|
||||
onSubmit(formData: any) {
|
||||
// eslint-disable-next-line no-alert
|
||||
alert(JSON.stringify(formData));
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -74,8 +74,9 @@
|
|||
height: 40px;
|
||||
border-radius: 6px;
|
||||
color: rgb(var(--primary-6));
|
||||
background-color: var(--color-text-fff);
|
||||
box-shadow: 0 3px 14px 2px rgba(0 0 0/ 5%);
|
||||
@apply flex cursor-pointer items-center justify-center bg-white font-medium;
|
||||
@apply flex cursor-pointer items-center justify-center font-medium;
|
||||
}
|
||||
.back-button-top {
|
||||
transform: rotate(180deg);
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
<a-scrollbar v-if="!props.simple" :style="{ overflow: 'auto' }">
|
||||
<div class="ms-card-header" :style="props.headerMinWidth ? { minWidth: `${props.headerMinWidth}px` } : {}">
|
||||
<slot name="headerLeft">
|
||||
<div class="font-medium text-[var(--color-text-000)]">{{ props.title }}</div>
|
||||
<div class="font-medium text-[var(--color-text-1)]">{{ props.title }}</div>
|
||||
<div class="text-[var(--color-text-4)]">{{ props.subTitle }}</div>
|
||||
</slot>
|
||||
<div class="ml-auto flex items-center">
|
||||
|
|
@ -202,9 +202,10 @@
|
|||
|
||||
<style lang="less" scoped>
|
||||
.ms-card {
|
||||
@apply relative overflow-hidden bg-white;
|
||||
@apply relative overflow-hidden;
|
||||
|
||||
border-radius: var(--border-radius-large);
|
||||
background-color: var(--color-text-fff);
|
||||
box-shadow: 0 0 10px rgb(120 56 135 / 5%);
|
||||
&--noContentPadding {
|
||||
border-radius: var(--border-radius-large);
|
||||
|
|
@ -240,18 +241,18 @@
|
|||
@apply relative;
|
||||
}
|
||||
.ms-card-footer {
|
||||
@apply fixed flex justify-between bg-white;
|
||||
@apply fixed flex justify-between;
|
||||
|
||||
right: 16px;
|
||||
bottom: 0;
|
||||
z-index: 100;
|
||||
padding: 24px;
|
||||
border-bottom: 0;
|
||||
background-color: var(--color-text-fff);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #00000000), var(--tw-ring-shadow, 0 0 #00000000), var(--tw-shadow);
|
||||
|
||||
--tw-shadow: 0 -1px 4px rgb(2 2 2 / 10%);
|
||||
--tw-shadow-colored: 0 -1px 4px var(--tw-shadow-color);
|
||||
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #00000000), var(--tw-ring-shadow, 0 0 #00000000), var(--tw-shadow);
|
||||
}
|
||||
}
|
||||
.ms-card--fullScreen {
|
||||
|
|
|
|||
|
|
@ -72,6 +72,7 @@
|
|||
import { codeCharset } from '@/config/apiTest';
|
||||
import useFullScreen from '@/hooks/useFullScreen';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
import useAppStore from '@/store/modules/app';
|
||||
import { decodeStringToCharset } from '@/utils';
|
||||
|
||||
import './userWorker';
|
||||
|
|
@ -85,6 +86,7 @@
|
|||
props: editorProps,
|
||||
emits: ['update:modelValue', 'change'],
|
||||
setup(props, { emit, slots }) {
|
||||
const appStore = useAppStore();
|
||||
const { t } = useI18n();
|
||||
// 编辑器实例，每次调用组件都会创建独立的实例
|
||||
let editor: monaco.editor.IStandaloneCodeEditor;
|
||||
|
|
@ -170,6 +172,17 @@
|
|||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => appStore.isDarkTheme,
|
||||
(val) => {
|
||||
if (val) {
|
||||
editor.updateOptions({ theme: 'vs-dark' });
|
||||
} else {
|
||||
editor.updateOptions({ theme: currentTheme.value });
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const setEditBoxBg = () => {
|
||||
const codeBgEl = document.querySelector('.monaco-editor-background');
|
||||
if (codeBgEl) {
|
||||
|
|
@ -300,7 +313,7 @@
|
|||
contextmenu: !props.readOnly, // 只读模式下禁用右键菜单
|
||||
...props,
|
||||
language: props.language.toLowerCase(),
|
||||
theme: currentTheme.value,
|
||||
theme: appStore.isDarkTheme ? 'vs-dark' : currentTheme.value,
|
||||
lineNumbersMinChars: 3,
|
||||
lineDecorationsWidth: 0,
|
||||
tabSize: 2,
|
||||
|
|
|
|||
|
|
@ -116,7 +116,7 @@
|
|||
<template v-if="item.showCopy">
|
||||
<MsButton
|
||||
v-if="item.copyTimer !== null && item.copyTimer !== undefined"
|
||||
class="absolute bottom-0 right-0 bg-white pl-[16px] !text-[rgb(var(--success-6))]"
|
||||
class="absolute bottom-0 right-0 bg-[var(--color-text-fff)] pl-[16px] !text-[rgb(var(--success-6))]"
|
||||
type="text"
|
||||
>
|
||||
<MsIcon type="icon-icon_succeed_filled" class="mr-[4px]"></MsIcon>
|
||||
|
|
@ -124,7 +124,7 @@
|
|||
</MsButton>
|
||||
<MsButton
|
||||
v-else
|
||||
class="absolute bottom-0 right-0 bg-white pl-[16px]"
|
||||
class="absolute bottom-0 right-0 bg-[var(--color-text-fff)] pl-[16px]"
|
||||
type="text"
|
||||
@click="copyValue(item)"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -276,9 +276,8 @@
|
|||
|
||||
<style lang="less">
|
||||
.arco-drawer {
|
||||
@apply bg-white;
|
||||
|
||||
max-width: 100vw;
|
||||
background-color: var(--color-text-fff);
|
||||
.arco-drawer-header {
|
||||
display: flex;
|
||||
height: 56px;
|
||||
|
|
@ -314,6 +313,7 @@
|
|||
}
|
||||
}
|
||||
.arco-drawer-footer {
|
||||
border-color: var(--color-text-n8);
|
||||
border-bottom: 1px solid var(--color-text-n8);
|
||||
}
|
||||
}
|
||||
|
|
@ -353,7 +353,7 @@
|
|||
|
||||
z-index: 200;
|
||||
width: 8px;
|
||||
background-color: var(--color-neutral-3);
|
||||
background-color: var(--color-text-n8);
|
||||
cursor: col-resize;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -317,7 +317,7 @@
|
|||
&.active,
|
||||
&:hover {
|
||||
color: rgb(var(--primary-5));
|
||||
background-color: rgb(var(--primary-1));
|
||||
background-color: rgb(var(--primary-2));
|
||||
.ms-editable-tab-close-button {
|
||||
@apply visible;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -641,7 +641,7 @@
|
|||
}
|
||||
.arco-table-tr-checked {
|
||||
.arco-table-td {
|
||||
background-color: white;
|
||||
background-color: var(--color-text-fff);
|
||||
}
|
||||
}
|
||||
.arco-scrollbar-track-direction-horizontal {
|
||||
|
|
@ -700,7 +700,7 @@
|
|||
}
|
||||
:deep(.ms-table-row-disabled) {
|
||||
td {
|
||||
background-color: white !important;
|
||||
background-color: var(--color-text-fff) !important;
|
||||
}
|
||||
.arco-btn-icon {
|
||||
border-color: var(--color-text-n8);
|
||||
|
|
|
|||
|
|
@ -112,14 +112,15 @@
|
|||
|
||||
<style lang="less">
|
||||
.ms-minder-editor-header {
|
||||
@apply absolute z-10 flex items-center bg-white;
|
||||
@apply absolute z-10 flex items-center;
|
||||
|
||||
top: 16px;
|
||||
right: 4px;
|
||||
gap: 8px;
|
||||
padding: 4px 8px;
|
||||
border-radius: var(--border-radius-small);
|
||||
background-color: var(--color-text-fff);
|
||||
box-shadow: 0 4px 10px -1px rgb(100 100 102 / 15%);
|
||||
gap: 8px;
|
||||
.ms-minder-editor-header-icon-button {
|
||||
@apply !mr-0;
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
</Navigator>
|
||||
<div
|
||||
v-if="currentTreePath?.length > 0"
|
||||
class="absolute left-[50%] top-[16px] z-[9] w-[60%] translate-x-[-50%] overflow-hidden bg-white p-[8px]"
|
||||
class="absolute left-[50%] top-[16px] z-[9] w-[60%] translate-x-[-50%] overflow-hidden bg-[var(--color-text-fff)] p-[8px]"
|
||||
>
|
||||
<a-menu v-model:selected-keys="selectedBreadcrumbKeys" mode="horizontal" class="ms-minder-breadcrumb">
|
||||
<a-menu-item v-for="(crumb, i) of currentTreePath" :key="crumb.id" @click="switchNode(crumb, i)">
|
||||
|
|
@ -52,6 +52,7 @@
|
|||
import Navigator from './navigator.vue';
|
||||
|
||||
import useLeaveUnSaveTip from '@/hooks/useLeaveUnSaveTip';
|
||||
import useAppStore from '@/store/modules/app';
|
||||
import useMinderStore from '@/store/modules/components/minder-editor';
|
||||
import { findNodePathByKey, mapTree, replaceNodeInTree } from '@/utils';
|
||||
|
||||
|
|
@ -93,6 +94,7 @@
|
|||
(e: 'floatMenuClose'): void;
|
||||
}>();
|
||||
|
||||
const appStore = useAppStore();
|
||||
const minderStore = useMinderStore();
|
||||
const { setIsSave } = useLeaveUnSaveTip({
|
||||
leaveContent: 'ms.minders.leaveUnsavedTip',
|
||||
|
|
@ -126,12 +128,16 @@
|
|||
window.minder = window.km;
|
||||
window.minderEditor = editor;
|
||||
window.minder.moveEnable = props.moveEnable;
|
||||
|
||||
if (appStore.isDarkTheme) {
|
||||
window.minder.setDefaultOptions({
|
||||
defaultTheme: 'wire',
|
||||
});
|
||||
window.minder.refresh();
|
||||
}
|
||||
window.minder.forceRemoveNode = () => {
|
||||
markDeleteNode(window.minder);
|
||||
window.minder.execCommand('RemoveNode');
|
||||
};
|
||||
|
||||
emit('afterMount');
|
||||
}
|
||||
|
||||
|
|
@ -310,6 +316,17 @@
|
|||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => appStore.isDarkTheme,
|
||||
(val) => {
|
||||
if (val) {
|
||||
window.minder.useTheme('wire');
|
||||
} else {
|
||||
window.minder.useTheme('fresh-purple');
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
minderStore.setMinderUnsaved(false);
|
||||
});
|
||||
|
|
@ -322,7 +339,9 @@
|
|||
@apply !absolute;
|
||||
}
|
||||
.ms-minder-container {
|
||||
@apply relative h-full overflow-hidden !bg-white;
|
||||
@apply relative h-full overflow-hidden;
|
||||
|
||||
background-color: var(--color-text-fff) !important;
|
||||
}
|
||||
.ms-minder-dropdown {
|
||||
.arco-dropdown-list-wrapper {
|
||||
|
|
@ -330,9 +349,13 @@
|
|||
}
|
||||
}
|
||||
.ms-minder-breadcrumb {
|
||||
@apply bg-white p-0;
|
||||
@apply p-0;
|
||||
|
||||
background-color: var(--color-text-fff);
|
||||
.arco-menu-inner {
|
||||
@apply bg-white p-0;
|
||||
@apply p-0;
|
||||
|
||||
background-color: var(--color-text-fff);
|
||||
.arco-menu-item {
|
||||
@apply relative p-0;
|
||||
|
||||
|
|
@ -356,14 +379,15 @@
|
|||
}
|
||||
.arco-menu-item,
|
||||
.arco-menu-overflow-sub-menu {
|
||||
@apply ml-0 bg-white;
|
||||
@apply ml-0;
|
||||
|
||||
color: var(--color-text-4);
|
||||
background-color: var(--color-text-fff);
|
||||
}
|
||||
.arco-menu-selected {
|
||||
color: rgb(var(--primary-4));
|
||||
&:hover {
|
||||
@apply !bg-white;
|
||||
background-color: var(--color-text-fff) !important;
|
||||
}
|
||||
}
|
||||
.arco-menu-pop::after,
|
||||
|
|
|
|||
|
|
@ -386,10 +386,11 @@
|
|||
<style lang="less">
|
||||
.ms-minder-shortcut-trigger {
|
||||
.arco-trigger-content {
|
||||
@apply w-auto bg-white;
|
||||
@apply w-auto;
|
||||
|
||||
padding: 16px;
|
||||
border-radius: var(--border-radius-small);
|
||||
background-color: var(--color-text-fff);
|
||||
box-shadow: 0 4px 10px -1px rgb(100 100 102 / 15%);
|
||||
.ms-minder-shortcut-trigger-list {
|
||||
@apply grid grid-cols-2;
|
||||
|
|
@ -433,11 +434,12 @@
|
|||
left: 6px;
|
||||
box-shadow: 0 4px 10px -1px rgb(100 100 102 / 15%);
|
||||
.ms-minder-navigator-bar {
|
||||
@apply flex w-auto items-center bg-white;
|
||||
@apply flex w-auto items-center;
|
||||
|
||||
padding: 4px 8px;
|
||||
gap: 8px;
|
||||
border-radius: var(--border-radius-small);
|
||||
background-color: var(--color-text-fff);
|
||||
gap: 8px;
|
||||
.ms-minder-navigator-bar-icon-button {
|
||||
@apply !mr-0;
|
||||
&:hover {
|
||||
|
|
@ -458,7 +460,7 @@
|
|||
}
|
||||
}
|
||||
.ms-minder-navigator-previewer {
|
||||
@apply absolute cursor-crosshair bg-white;
|
||||
@apply absolute cursor-crosshair;
|
||||
|
||||
bottom: 36px;
|
||||
left: 45px;
|
||||
|
|
@ -467,6 +469,7 @@
|
|||
width: 240px;
|
||||
height: 160px;
|
||||
border-radius: var(--border-radius-small);
|
||||
background-color: var(--color-text-fff);
|
||||
box-shadow: 0 5px 5px -3px rgb(0 0 0 / 10%), 0 8px 10px 1px rgb(0 0 0 / 6%), 0 3px 14px 2px rgb(0 0 0 / 5%);
|
||||
transition: -webkit-transform 0.7s 0.1s ease;
|
||||
transition: transform 0.7s 0.1s ease;
|
||||
|
|
@ -474,7 +477,7 @@
|
|||
@apply cursor-grabbing;
|
||||
}
|
||||
:deep(svg) {
|
||||
background-color: white !important;
|
||||
background-color: var(--color-text-fff) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -352,12 +352,13 @@
|
|||
<style lang="less">
|
||||
.ms-minder-node-float-menu {
|
||||
.arco-trigger-content {
|
||||
@apply flex w-auto flex-1 items-center bg-white;
|
||||
@apply flex w-auto flex-1 items-center;
|
||||
|
||||
padding: 4px 8px;
|
||||
gap: 8px;
|
||||
border-radius: var(--border-radius-small);
|
||||
background-color: var(--color-text-fff);
|
||||
box-shadow: 0 4px 10px -1px rgb(100 100 102 / 15%);
|
||||
gap: 8px;
|
||||
}
|
||||
.ms-minder-node-float-menu-icon-button {
|
||||
@apply !mr-0;
|
||||
|
|
|
|||
|
|
@ -234,9 +234,10 @@
|
|||
.ms-minder-editor-container {
|
||||
@apply relative flex h-full w-full;
|
||||
.ms-minder-editor-extra {
|
||||
@apply flex flex-col overflow-hidden bg-white;
|
||||
@apply flex flex-col overflow-hidden;
|
||||
|
||||
width: 0;
|
||||
background-color: var(--color-text-fff);
|
||||
transition: all 300ms ease-in-out;
|
||||
:deep(.ms-tab--button-item) {
|
||||
flex: 1;
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ type EditMenuProps = {
|
|||
tagEnable: boolean;
|
||||
progressEnable: boolean;
|
||||
moveEnable: boolean;
|
||||
[key: string]: any;
|
||||
};
|
||||
|
||||
type Runtime = {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
@apply absolute bottom-0 left-0 right-0 top-0 block bg-transparent;
|
||||
}
|
||||
.km-editor > .receiver {
|
||||
@apply pointer-events-none absolute left-0 top-0 box-border w-auto select-text overflow-hidden break-words break-all border-none bg-white opacity-0 outline-none;
|
||||
@apply pointer-events-none absolute left-0 top-0 box-border w-auto select-text overflow-hidden break-words break-all border-none opacity-0 outline-none;
|
||||
|
||||
z-index: -1000;
|
||||
margin-top: -5px;
|
||||
|
|
@ -17,6 +17,7 @@
|
|||
max-width: 300px;
|
||||
min-height: 1.4em;
|
||||
font-size: 14px;
|
||||
background-color: var(--color-text-fff);
|
||||
box-shadow: 0 0 20px;
|
||||
line-height: 1.4em;
|
||||
&.debug {
|
||||
|
|
@ -25,9 +26,10 @@
|
|||
outline: 1px solid green;
|
||||
}
|
||||
&.input {
|
||||
@apply bg-white opacity-100 outline-none;
|
||||
@apply opacity-100 outline-none;
|
||||
|
||||
z-index: 999;
|
||||
background-color: var(--color-text-fff);
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@
|
|||
&-active {
|
||||
border-color: rgb(var(--primary-5)) !important;
|
||||
color: rgb(var(--primary-5)) !important;
|
||||
background-color: rgb(var(--primary-1)) !important;
|
||||
background-color: var(--color-text-fff) !important;
|
||||
}
|
||||
}
|
||||
&-simple {
|
||||
|
|
|
|||
|
|
@ -609,6 +609,8 @@
|
|||
.ms-scroll-bar();
|
||||
|
||||
justify-content: start !important;
|
||||
border-color: var(--color-text-n8);
|
||||
background-color: var(--color-text-fff);
|
||||
}
|
||||
> p:first-child {
|
||||
margin-top: 0;
|
||||
|
|
@ -633,6 +635,8 @@
|
|||
}
|
||||
:deep(.editor-content) {
|
||||
.ms-scroll-bar();
|
||||
|
||||
background: var(--color-text-fff);
|
||||
& + div[data-tippy-root] {
|
||||
transform: translate(60%) !important;
|
||||
}
|
||||
|
|
@ -645,7 +649,7 @@
|
|||
table {
|
||||
tr,
|
||||
th {
|
||||
background: white !important;
|
||||
background: var(--color-text-fff) !important;
|
||||
}
|
||||
tr {
|
||||
th,
|
||||
|
|
|
|||
|
|
@ -90,10 +90,9 @@
|
|||
max-height: 220px;
|
||||
border-radius: 4px;
|
||||
color: block;
|
||||
background-color: var(--color-text-fff);
|
||||
box-shadow: 0 0 0 1px rgba(0 0 0 / 5%), 0 10px 20px rgba(0 0 0 / 10%);
|
||||
.ms-scroll-bar();
|
||||
|
||||
@apply bg-white;
|
||||
}
|
||||
.item {
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
padding-left: 0;
|
||||
}
|
||||
.radio-item {
|
||||
@apply flex cursor-pointer items-center bg-white;
|
||||
@apply flex cursor-pointer items-center;
|
||||
|
||||
padding-left: 8px;
|
||||
width: 186px;
|
||||
|
|
@ -34,6 +34,7 @@
|
|||
border: 1px solid;
|
||||
border-color: var(--color-text-n8);
|
||||
border-radius: var(--border-radius-small);
|
||||
background-color: var(--color-text-fff);
|
||||
&:hover {
|
||||
border-color: rgb(var(--primary-5));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -248,7 +248,9 @@
|
|||
}
|
||||
.ms-split-box--vertical {
|
||||
.ms-split-box--bottom {
|
||||
@apply h-full bg-white;
|
||||
@apply h-full;
|
||||
|
||||
background-color: var(--color-text-fff);
|
||||
}
|
||||
.vertical-expand-line {
|
||||
@apply relative flex items-center justify-center bg-transparent;
|
||||
|
|
|
|||
|
|
@ -1064,6 +1064,35 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
:deep(.arco-table-header) {
|
||||
background-color: var(--color-text-fff);
|
||||
.arco-table-th {
|
||||
background-color: var(--color-text-fff);
|
||||
}
|
||||
}
|
||||
:deep(.arco-table-body) {
|
||||
background-color: var(--color-text-fff);
|
||||
.arco-table-td {
|
||||
border-bottom: 1px solid var(--color-text-n8);
|
||||
color: var(--color-text-1);
|
||||
background-color: var(--color-text-fff);
|
||||
}
|
||||
}
|
||||
:deep(.arco-table-border .arco-table-scroll-y) {
|
||||
border-right: 1px solid var(--color-text-n8) !important;
|
||||
border-bottom: 1px solid var(--color-text-n8) !important;
|
||||
}
|
||||
:deep(.arco-table-border .arco-table-tr .arco-table-th) {
|
||||
border-bottom: 1px solid var(--color-text-n8) !important;
|
||||
}
|
||||
:deep(.arco-table-tr):hover {
|
||||
background-color: rgb(var(--primary-1)) !important;
|
||||
.arco-table-td,
|
||||
.arco-table-td.arco-table-col-fixed-left::before,
|
||||
.arco-table-td.arco-table-col-fixed-right::before {
|
||||
background-color: rgb(var(--primary-1)) !important;
|
||||
}
|
||||
}
|
||||
:deep(.arco-table-th):hover {
|
||||
.arco-table-column-handle {
|
||||
@apply inline-block;
|
||||
|
|
@ -1073,7 +1102,7 @@
|
|||
padding: 4px 0;
|
||||
width: 2px;
|
||||
height: 24px;
|
||||
background-color: var(--color-text-n8);
|
||||
background-color: var(--color-text-n9);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
|
@ -1107,7 +1136,7 @@
|
|||
top: 39px;
|
||||
z-index: 11;
|
||||
padding: 14px 16px;
|
||||
background-color: var(--color-text-n9);
|
||||
background-color: var(--color-text-fff);
|
||||
}
|
||||
}
|
||||
:deep(.arco-table-operation) {
|
||||
|
|
@ -1165,7 +1194,6 @@
|
|||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-text-n8) !important;
|
||||
@apply bg-white;
|
||||
}
|
||||
:deep(.expand) {
|
||||
width: 16px;
|
||||
|
|
@ -1184,7 +1212,7 @@
|
|||
height: 16px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
background: var(--color-text-fff);
|
||||
}
|
||||
}
|
||||
.not-expanded-border {
|
||||
|
|
@ -1203,14 +1231,14 @@
|
|||
}
|
||||
}
|
||||
:deep(.arco-table-col-sorted) {
|
||||
@apply bg-white;
|
||||
background: var(--color-text-fff);
|
||||
}
|
||||
:deep(.arco-table-cell-with-sorter) {
|
||||
@apply !p-0;
|
||||
|
||||
margin: 8px 16px;
|
||||
&:hover {
|
||||
@apply bg-white;
|
||||
background: var(--color-text-fff);
|
||||
}
|
||||
.arco-table-sorter {
|
||||
.arco-table-sorter-icon {
|
||||
|
|
@ -1293,6 +1321,7 @@
|
|||
@apply overflow-hidden;
|
||||
|
||||
max-width: 300px;
|
||||
border-color: var(--color-text-n8);
|
||||
.arco-table-filters-content-list {
|
||||
@apply overflow-y-auto;
|
||||
.ms-scroll-bar();
|
||||
|
|
|
|||
|
|
@ -191,4 +191,7 @@
|
|||
@apply overflow-y-auto;
|
||||
.ms-scroll-bar();
|
||||
}
|
||||
.arco-table-filters-bottom {
|
||||
border-color: var(--color-text-n8);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
>
|
||||
<slot name="icon"></slot>
|
||||
<a-tooltip :disabled="props.tooltipDisabled">
|
||||
<div :class="`one-line-text ${props.maxWidth || '144px'}`">
|
||||
<div :class="`one-line-text max-w-[${props.maxWidth || '144px'}]`">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<template v-if="$slots.tooltipContent" #content>
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
// 计算标签的颜色和背景颜色
|
||||
const typeList: Record<string, any> = {
|
||||
dark: {
|
||||
'color': 'white',
|
||||
'color': 'var(--color-text-fff)',
|
||||
'border-color': 'rgb(var(--#{}-5))',
|
||||
'background': 'rgb(var(--#{}-5))',
|
||||
},
|
||||
|
|
@ -95,7 +95,7 @@
|
|||
},
|
||||
default: {
|
||||
'color': 'var(--color-text-1)',
|
||||
'background': props.theme !== 'outline' ? 'var(--color-text-n8)' : 'white',
|
||||
'background': props.theme !== 'outline' ? 'var(--color-text-n8)' : 'var(--color-text-fff)',
|
||||
'border-color':
|
||||
props.theme === 'lightOutLine' || props.theme === 'outline'
|
||||
? 'var(--color-text-input-border)'
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div>
|
||||
<div
|
||||
v-if="props.mode === 'remote' && props.showTab"
|
||||
class="sticky top-[0] z-[9999] mb-[8px] flex justify-between bg-white"
|
||||
class="sticky top-[0] z-[9999] mb-[8px] flex justify-between bg-[var(--color-text-fff)]"
|
||||
>
|
||||
<a-radio-group v-model:model-value="fileListTab" type="button" size="small">
|
||||
<a-radio value="all">{{ `${t('ms.upload.all')} (${innerFileList.length})` }}</a-radio>
|
||||
|
|
|
|||
|
|
@ -253,12 +253,13 @@
|
|||
|
||||
@apply flex flex-col items-center justify-center;
|
||||
.ms-upload-icon-box {
|
||||
@apply rounded-full bg-white;
|
||||
@apply rounded-full;
|
||||
|
||||
margin-bottom: 16px;
|
||||
padding: 8px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-color: var(--color-text-fff);
|
||||
.ms-upload-icon {
|
||||
@apply h-full w-full bg-cover bg-no-repeat;
|
||||
&--default {
|
||||
|
|
|
|||
|
|
@ -146,6 +146,18 @@
|
|||
</template>
|
||||
</a-dropdown>
|
||||
</li>
|
||||
<li>
|
||||
<a-tooltip :content="t('settings.themeColor')" position="br">
|
||||
<a-switch v-model:model-value="isSun" size="small" @change="handleSunChange">
|
||||
<template #checked-icon>
|
||||
<icon-sun-fill />
|
||||
</template>
|
||||
<template #unchecked-icon>
|
||||
<icon-moon-fill />
|
||||
</template>
|
||||
</a-switch>
|
||||
</a-tooltip>
|
||||
</li>
|
||||
<li>
|
||||
<a-dropdown trigger="click" position="br" @select="changeLanguage as any">
|
||||
<a-tooltip :content="t('settings.language')" position="br">
|
||||
|
|
@ -194,6 +206,7 @@
|
|||
import useGlobalStore from '@/store/modules/global';
|
||||
import useUserStore from '@/store/modules/user';
|
||||
import { getFirstRouteNameByPermission, hasAnyPermission } from '@/utils/permission';
|
||||
import { setDarkTheme, watchStyle, watchTheme } from '@/utils/theme';
|
||||
|
||||
import { GlobalEventNameEnum } from '@/enums/commonEnum';
|
||||
|
||||
|
|
@ -311,6 +324,29 @@
|
|||
messageCenterVisible.value = true;
|
||||
}
|
||||
|
||||
const isSun = ref(!appStore.isDarkTheme);
|
||||
|
||||
watch(
|
||||
() => appStore.isDarkTheme,
|
||||
(val) => {
|
||||
if (val) {
|
||||
// 暗黑模式
|
||||
setDarkTheme();
|
||||
} else {
|
||||
// 初始化平台风格和主题色
|
||||
watchStyle(appStore.pageConfig.style, appStore.pageConfig);
|
||||
watchTheme(appStore.pageConfig.theme, appStore.pageConfig);
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
|
||||
function handleSunChange(val: string | number | boolean) {
|
||||
appStore.setDarkTheme(!val);
|
||||
}
|
||||
|
||||
function changeLanguage(locale: LocaleType) {
|
||||
// 修改当前用户的语言
|
||||
updateLanguage({ language: locale });
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
export default {
|
||||
'settings.title': 'Settings',
|
||||
'settings.themeColor': 'Theme Color',
|
||||
'settings.themeColor': 'Switch between light/dark mode',
|
||||
'settings.content': 'Content Setting',
|
||||
'settings.search': 'Search',
|
||||
'settings.language': 'Language',
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
export default {
|
||||
'settings.title': '页面配置',
|
||||
'settings.themeColor': '主题色',
|
||||
'settings.themeColor': '切换亮色/暗色模式',
|
||||
'settings.content': '内容区域',
|
||||
'settings.search': '搜索',
|
||||
'settings.language': '语言',
|
||||
|
|
|
|||
|
|
@ -72,6 +72,7 @@ const useAppStore = defineStore('app', {
|
|||
envList: [],
|
||||
currentEnvConfig: undefined,
|
||||
fileMaxSize: 50,
|
||||
isDarkTheme: false,
|
||||
}),
|
||||
|
||||
getters: {
|
||||
|
|
@ -422,9 +423,12 @@ const useAppStore = defineStore('app', {
|
|||
setFileMaxSize(size: number) {
|
||||
this.fileMaxSize = size;
|
||||
},
|
||||
setDarkTheme(isDarkTheme: boolean) {
|
||||
this.isDarkTheme = isDarkTheme;
|
||||
},
|
||||
},
|
||||
persist: {
|
||||
paths: ['currentOrgId', 'currentProjectId', 'pageConfig', 'menuCollapse'],
|
||||
paths: ['currentOrgId', 'currentProjectId', 'pageConfig', 'menuCollapse', 'isDarkTheme'],
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -46,6 +46,7 @@ export interface AppState {
|
|||
envList: EnvironmentItem[];
|
||||
currentEnvConfig?: EnvConfig; // 当前环境配置信息
|
||||
fileMaxSize: number; // 文件上传最大限制
|
||||
isDarkTheme: boolean; // 是否暗黑模式
|
||||
}
|
||||
|
||||
export interface UploadFileTaskState {
|
||||
|
|
|
|||
|
|
@ -133,7 +133,10 @@ export function watchTheme(val: Theme, pageConfig: PageConfig) {
|
|||
}
|
||||
}
|
||||
|
||||
// 动态设置 favicon
|
||||
/**
|
||||
* 动态设置 favicon
|
||||
* @param url favicon 地址
|
||||
*/
|
||||
export function setFavicon(url: string) {
|
||||
const head = document.querySelector('head');
|
||||
const link = document.createElement('link');
|
||||
|
|
@ -150,3 +153,149 @@ export function setFavicon(url: string) {
|
|||
// 添加新的 favicon
|
||||
head?.appendChild(link);
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置暗黑主题
|
||||
*/
|
||||
export function setDarkTheme() {
|
||||
const styleTag = document.createElement('style');
|
||||
styleTag.id = 'MS-CUSTOM-THEME';
|
||||
let styleStr = ``;
|
||||
const white = Color('#fff');
|
||||
const N1 = Color('#e3e6f3');
|
||||
const N7 = Color('#5b5e6a');
|
||||
const N8 = Color('#434552');
|
||||
const N9 = Color('#2e313d');
|
||||
const N10 = Color('#242633');
|
||||
// 中性色
|
||||
styleStr += `
|
||||
--color-text-1: ${N1.hex()};
|
||||
--color-text-2: #c0c2cf;
|
||||
--color-text-3: #adb0bc;
|
||||
--color-text-4: #9597a4;
|
||||
--color-white: #90929f;
|
||||
--color-text-brand: #787b88;
|
||||
--color-text-input: ${N7.hex()};
|
||||
--color-text-input-border: ${N7.hex()};
|
||||
--color-text-n8: ${N8.hex()};
|
||||
--color-text-n9: ${N9.hex()};
|
||||
--color-text-fff: ${N10.hex()};
|
||||
--color-text-000: #000;
|
||||
--gray-3: ${N8.toString().replace(/rgba?\(|\)/g, '')};
|
||||
`;
|
||||
// 主题色
|
||||
const primary = new Color('#cd3bff');
|
||||
const P = primary.toString().replace(/rgba?\(|\)/g, '');
|
||||
const P1 = getRGBinnerVal(primary.mix(white, 0.25));
|
||||
const P4 = getRGBinnerVal(primary.mix(N10, 0.55));
|
||||
const P5 = getRGBinnerVal(primary.mix(N10, 0.85));
|
||||
const P6 = getRGBinnerVal(primary.mix(N10, 0.75));
|
||||
const P7 = getRGBinnerVal(primary.mix(N10, 0.65));
|
||||
const P0 = getRGBinnerVal(primary.mix(N10, 0.25));
|
||||
styleStr += `
|
||||
--primary-1: ${P7};
|
||||
--primary-2: ${P5};
|
||||
--primary-3: ${P4};
|
||||
--primary-4: ${P1};
|
||||
--primary-5: ${P};
|
||||
--primary-6: ${P};
|
||||
--primary-7: ${P0};
|
||||
--primary-9: ${P6};
|
||||
`;
|
||||
// 红色
|
||||
const red = new Color('#e2324f');
|
||||
const Red = red.toString().replace(/rgba?\(|\)/g, '');
|
||||
const R1 = getRGBinnerVal(red.mix(white, 0.25));
|
||||
const R2 = getRGBinnerVal(red.mix(N10, 0.3));
|
||||
const R3 = getRGBinnerVal(red.mix(N10, 0.55));
|
||||
const R4 = getRGBinnerVal(red.mix(N10, 0.75));
|
||||
const R5 = getRGBinnerVal(red.mix(N10, 0.65));
|
||||
const R0 = getRGBinnerVal(red.mix(N10, 0.25));
|
||||
styleStr += `
|
||||
--danger-1: ${R5};
|
||||
--danger-2: ${R4};
|
||||
--danger-3: ${R3};
|
||||
--danger-4: ${R2};
|
||||
--danger-5: ${R1};
|
||||
--danger-6: ${Red};
|
||||
--danger-7: ${R0};
|
||||
`;
|
||||
// 绿色
|
||||
const green = new Color('#11b671');
|
||||
const Green = green.toString().replace(/rgba?\(|\)/g, '');
|
||||
const G1 = getRGBinnerVal(green.mix(white, 0.25));
|
||||
const G2 = getRGBinnerVal(green.mix(N10, 0.3));
|
||||
const G3 = getRGBinnerVal(green.mix(N10, 0.55));
|
||||
const G4 = getRGBinnerVal(green.mix(N10, 0.75));
|
||||
const G5 = getRGBinnerVal(green.mix(N10, 0.65));
|
||||
const G0 = getRGBinnerVal(green.mix(N10, 0.25));
|
||||
styleStr += `
|
||||
--success-1: ${G5};
|
||||
--success-2: ${G4};
|
||||
--success-3: ${G3};
|
||||
--success-4: ${G2};
|
||||
--success-5: ${G1};
|
||||
--success-6: ${Green};
|
||||
--success-7: ${G0};
|
||||
`;
|
||||
// 蓝色
|
||||
const blue = new Color('#3d8eff');
|
||||
const Blue = blue.toString().replace(/rgba?\(|\)/g, '');
|
||||
const B1 = getRGBinnerVal(blue.mix(white, 0.25));
|
||||
const B2 = getRGBinnerVal(blue.mix(N10, 0.3));
|
||||
const B3 = getRGBinnerVal(blue.mix(N10, 0.55));
|
||||
const B4 = getRGBinnerVal(blue.mix(N10, 0.75));
|
||||
const B5 = getRGBinnerVal(blue.mix(N10, 0.65));
|
||||
const B0 = getRGBinnerVal(blue.mix(N10, 0.25));
|
||||
styleStr += `
|
||||
--link-1: ${B5};
|
||||
--link-2: ${B4};
|
||||
--link-3: ${B3};
|
||||
--link-4: ${B2};
|
||||
--link-5: ${B1};
|
||||
--link-6: ${Blue};
|
||||
--link-7: ${B0};
|
||||
`;
|
||||
// 黄色
|
||||
const yellow = new Color('#edac2c');
|
||||
const Yellow = yellow.toString().replace(/rgba?\(|\)/g, '');
|
||||
const Y1 = getRGBinnerVal(yellow.mix(white, 0.25));
|
||||
const Y2 = getRGBinnerVal(yellow.mix(N10, 0.3));
|
||||
const Y3 = getRGBinnerVal(yellow.mix(N10, 0.55));
|
||||
const Y4 = getRGBinnerVal(yellow.mix(N10, 0.75));
|
||||
const Y5 = getRGBinnerVal(yellow.mix(N10, 0.65));
|
||||
const Y0 = getRGBinnerVal(yellow.mix(N10, 0.25));
|
||||
styleStr += `
|
||||
--waring-1: ${Y5};
|
||||
--waring-2: ${Y4};
|
||||
--waring-3: ${Y3};
|
||||
--waring-4: ${Y2};
|
||||
--waring-5: ${Y1};
|
||||
--waring-6: ${Yellow};
|
||||
--waring-7: ${Y0};
|
||||
`;
|
||||
// 背景色
|
||||
styleStr += `
|
||||
--color-fill-1: ${N9.hex()};
|
||||
--color-fill-2: ${N9.hex()};
|
||||
--color-bg-white: ${N10.hex()};
|
||||
--color-bg-1: ${N10.hex()};
|
||||
--color-bg-2: ${N10.hex()};
|
||||
--color-bg-3: ${N9.hex()};
|
||||
--color-bg-5: ${N9.hex()};
|
||||
--color-tooltip-bg: ${N1.hex()};
|
||||
--color-spin-layer-bg: ${N9.rgb().fade(0.25).toString()};
|
||||
--color-warning-light-1: rgb(${Y5})
|
||||
`;
|
||||
styleTag.innerHTML = `
|
||||
body{
|
||||
${styleStr}
|
||||
}
|
||||
`;
|
||||
// 移除之前的 style 标签（如果有）
|
||||
const prevStyleTag = document.getElementById('MS-CUSTOM-THEME');
|
||||
if (prevStyleTag) {
|
||||
prevStyleTag.remove();
|
||||
}
|
||||
document.body.appendChild(styleTag);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
:self-style="{
|
||||
border: `1px solid ${props.tagBackgroundColor || methodColor}`,
|
||||
color: props.tagTextColor || methodColor,
|
||||
backgroundColor: props.tagBackgroundColor || 'white',
|
||||
backgroundColor: props.tagBackgroundColor || 'var(--color-text-fff)',
|
||||
display: 'flex',
|
||||
}"
|
||||
:size="props.tagSize"
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
:disabled="props.disabled"
|
||||
:item-border="false"
|
||||
class="h-full overflow-hidden rounded-[var(--border-radius-small)] bg-[var(--color-text-n9)] p-[12px]"
|
||||
item-class="mb-[4px] bg-white !p-[4px_8px]"
|
||||
item-class="mb-[4px] bg-[var(--color-text-fff)] !p-[4px_8px]"
|
||||
:item-more-actions="moreActions"
|
||||
active-item-class="!bg-[rgb(var(--primary-1))] text-[rgb(var(--primary-5))]"
|
||||
draggable
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
<div class="flex items-center gap-[4px]">
|
||||
<div
|
||||
:class="`flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-full ${
|
||||
activeItem.id === item.id ? ' bg-white' : 'bg-[var(--color-text-n8)]'
|
||||
activeItem.id === item.id ? ' bg-[var(--color-text-fff)]' : 'bg-[var(--color-text-n8)]'
|
||||
}`"
|
||||
>
|
||||
{{ index + 1 }}
|
||||
|
|
@ -237,7 +237,7 @@
|
|||
:deep(.arco-badge-text) {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-4) !important;
|
||||
background: white !important;
|
||||
background: var(--color-text-fff) !important;
|
||||
box-shadow: 0 0 0 1px var(--color-text-n8);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -21,10 +21,20 @@
|
|||
/>
|
||||
</div>
|
||||
<div v-else-if="expressionForm.extractType === RequestExtractExpressionEnum.JSON_PATH" class="code-container">
|
||||
<MsJsonPathPicker :data="props.response || ''" class="bg-white" @init="initJsonPath" @pick="handlePathPick" />
|
||||
<MsJsonPathPicker
|
||||
:data="props.response || ''"
|
||||
class="bg-[var(--color-text-fff)]"
|
||||
@init="initJsonPath"
|
||||
@pick="handlePathPick"
|
||||
/>
|
||||
</div>
|
||||
<div v-else-if="expressionForm.extractType === RequestExtractExpressionEnum.X_PATH" class="code-container">
|
||||
<MsXPathPicker :xml-string="props.response || ''" class="bg-white" @init="initXpath" @pick="handlePathPick" />
|
||||
<MsXPathPicker
|
||||
:xml-string="props.response || ''"
|
||||
class="bg-[var(--color-text-fff)]"
|
||||
@init="initXpath"
|
||||
@pick="handlePathPick"
|
||||
/>
|
||||
</div>
|
||||
<a-form ref="expressionFormRef" :model="expressionForm" layout="vertical" class="mt-[16px]">
|
||||
<a-form-item
|
||||
|
|
@ -379,7 +389,7 @@
|
|||
background-color: var(--color-text-n9);
|
||||
}
|
||||
.match-result {
|
||||
@apply overflow-y-auto bg-white;
|
||||
@apply overflow-y-auto;
|
||||
.ms-scroll-bar();
|
||||
|
||||
margin-top: 12px;
|
||||
|
|
@ -388,5 +398,6 @@
|
|||
max-height: 300px;
|
||||
border-radius: var(--border-radius-small);
|
||||
color: rgb(var(--primary-5));
|
||||
background-color: var(--color-text-fff);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1241,10 +1241,9 @@
|
|||
|
||||
<style lang="less" scoped>
|
||||
.content-type-trigger-content {
|
||||
@apply bg-white;
|
||||
|
||||
padding: 8px;
|
||||
border-radius: var(--border-radius-small);
|
||||
background-color: var(--color-text-fff);
|
||||
box-shadow: 0 4px 10px -1px rgb(100 100 102 / 15%);
|
||||
}
|
||||
:deep(.ms-form-table-input-number) {
|
||||
|
|
|
|||
|
|
@ -1787,19 +1787,21 @@
|
|||
.ms-scroll-bar();
|
||||
}
|
||||
.sticky-content {
|
||||
@apply sticky bg-white;
|
||||
@apply sticky;
|
||||
|
||||
z-index: 101; // .arco-scrollbar-track是100
|
||||
background-color: var(--color-text-fff);
|
||||
}
|
||||
.request-content-and-response {
|
||||
display: flex;
|
||||
&.vertical {
|
||||
flex-direction: column;
|
||||
.response :deep(.response-head) {
|
||||
@apply sticky bg-white;
|
||||
@apply sticky;
|
||||
|
||||
top: 46px; // 请求参数tab高度(不算border-bottom)
|
||||
z-index: 11;
|
||||
background-color: var(--color-text-fff);
|
||||
}
|
||||
.request-tab-pane {
|
||||
min-height: 400px;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="response-header">
|
||||
<div
|
||||
v-if="isShowLoopControl"
|
||||
class="flex w-full items-center justify-start bg-white pb-[8px] pt-[16px]"
|
||||
class="flex w-full items-center justify-start bg-[var(--color-text-fff)] pb-[8px] pt-[16px]"
|
||||
@click.stop="() => {}"
|
||||
>
|
||||
<MsTab
|
||||
|
|
@ -90,7 +90,7 @@
|
|||
</a-popover>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="activeType === 'SubRequest'" class="flex justify-start bg-white py-4">
|
||||
<div v-if="activeType === 'SubRequest'" class="flex justify-start bg-[var(--color-text-fff)] py-4">
|
||||
<MsPagination
|
||||
v-model:page-size="pageSize"
|
||||
v-model:current="current"
|
||||
|
|
|
|||
|
|
@ -38,10 +38,11 @@
|
|||
|
||||
<style lang="less" scoped>
|
||||
.response-header-pre {
|
||||
@apply h-full overflow-auto bg-white;
|
||||
@apply h-full overflow-auto;
|
||||
.ms-scroll-bar();
|
||||
|
||||
padding: 8px 12px;
|
||||
border-radius: var(--border-radius-small);
|
||||
background-color: var(--color-text-fff);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -160,7 +160,9 @@
|
|||
border: 1px solid var(--color-text-n8);
|
||||
border-top: none;
|
||||
border-radius: 0 0 6px 6px;
|
||||
@apply mb-4 bg-white p-4;
|
||||
@apply mb-4 p-4;
|
||||
|
||||
background-color: var(--color-text-fff);
|
||||
.resContent {
|
||||
height: 38px;
|
||||
border-radius: 6px;
|
||||
|
|
@ -174,7 +176,7 @@
|
|||
z-index: 999999;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background: white;
|
||||
background: var(--color-text-fff);
|
||||
@apply flex items-start justify-between px-4;
|
||||
.menu-title {
|
||||
@apply font-medium;
|
||||
|
|
|
|||
|
|
@ -576,12 +576,13 @@
|
|||
|
||||
<style lang="less" scoped>
|
||||
.import-item {
|
||||
@apply flex cursor-pointer items-center bg-white;
|
||||
@apply flex cursor-pointer items-center;
|
||||
|
||||
padding: 8px;
|
||||
width: 200px;
|
||||
border: 1px solid var(--color-text-n8);
|
||||
border-radius: var(--border-radius-small);
|
||||
background-color: var(--color-text-fff);
|
||||
gap: 6px;
|
||||
}
|
||||
.import-item--active {
|
||||
|
|
|
|||
|
|
@ -243,12 +243,13 @@
|
|||
|
||||
<style scoped lang="less">
|
||||
.import-item {
|
||||
@apply flex cursor-pointer items-center bg-white;
|
||||
@apply flex cursor-pointer items-center;
|
||||
|
||||
padding: 8px;
|
||||
width: 150px;
|
||||
border: 1px solid var(--color-text-n8);
|
||||
border-radius: var(--border-radius-small);
|
||||
background-color: var(--color-text-fff);
|
||||
gap: 6px;
|
||||
}
|
||||
.import-item--active {
|
||||
|
|
|
|||
|
|
@ -239,7 +239,9 @@
|
|||
z-index: 99;
|
||||
padding: 16px;
|
||||
|
||||
@apply flex w-full items-center justify-between bg-white;
|
||||
@apply flex w-full items-center justify-between;
|
||||
|
||||
background-color: var(--color-text-fff);
|
||||
.doc-toggle {
|
||||
max-width: 50%;
|
||||
@apply flex flex-1 items-center gap-2;
|
||||
|
|
|
|||
|
|
@ -179,8 +179,9 @@
|
|||
width: 154px;
|
||||
max-height: 300px;
|
||||
border-radius: var(--border-radius-medium);
|
||||
background-color: var(--color-text-fff);
|
||||
box-shadow: 0 4px 10px -1px rgb(100 100 102 / 15%);
|
||||
@apply overflow-y-auto bg-white;
|
||||
@apply overflow-y-auto;
|
||||
.ms-scroll-bar();
|
||||
}
|
||||
.share-option-title {
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
:self-style="{
|
||||
border: `1px solid ${color}`,
|
||||
color: color,
|
||||
backgroundColor: 'white',
|
||||
backgroundColor: 'var(--color-text-fff)',
|
||||
}"
|
||||
>
|
||||
{{ record.testPlanNum }}
|
||||
|
|
|
|||
|
|
@ -264,12 +264,16 @@
|
|||
}
|
||||
}
|
||||
.recycle {
|
||||
@apply absolute bottom-0 bg-white pb-4;
|
||||
@apply absolute bottom-0 pb-4;
|
||||
|
||||
background-color: var(--color-text-fff);
|
||||
:deep(.arco-divider-horizontal) {
|
||||
margin: 8px 0;
|
||||
}
|
||||
.recycle-bin {
|
||||
@apply bottom-0 flex items-center bg-white;
|
||||
@apply bottom-0 flex items-center;
|
||||
|
||||
background-color: var(--color-text-fff);
|
||||
.recycle-count {
|
||||
margin-left: 4px;
|
||||
color: var(--color-text-4);
|
||||
|
|
|
|||
|
|
@ -436,14 +436,17 @@
|
|||
padding: 0 16px;
|
||||
height: 54px;
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
@apply mb-4 bg-white;
|
||||
background: var(--color-text-fff);
|
||||
@apply mb-4;
|
||||
|
||||
background-color: var(--color-text-fff);
|
||||
}
|
||||
.analyze {
|
||||
@apply mb-4 bg-white;
|
||||
@apply mb-4;
|
||||
|
||||
padding: 16px;
|
||||
border-radius: 4px;
|
||||
background-color: var(--color-text-fff);
|
||||
.request-analyze {
|
||||
@apply flex h-full flex-1 flex-col;
|
||||
.chart-legend {
|
||||
|
|
@ -501,7 +504,7 @@
|
|||
.report-info {
|
||||
padding: 16px;
|
||||
border-radius: 4px;
|
||||
@apply bg-white;
|
||||
background-color: var(--color-text-fff);
|
||||
}
|
||||
}
|
||||
.block-title {
|
||||
|
|
|
|||
|
|
@ -210,13 +210,17 @@
|
|||
padding: 0 16px;
|
||||
height: 54px;
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
@apply mb-4 bg-white;
|
||||
background: var(--color-text-fff);
|
||||
@apply mb-4;
|
||||
|
||||
background-color: var(--color-text-fff);
|
||||
}
|
||||
.analyze {
|
||||
height: 196px;
|
||||
border-radius: 4px;
|
||||
@apply mb-4 flex justify-between bg-white;
|
||||
@apply mb-4 flex justify-between;
|
||||
|
||||
background-color: var(--color-text-fff);
|
||||
.request-analyze {
|
||||
@apply flex h-full flex-1 flex-col p-4;
|
||||
.chart-legend {
|
||||
|
|
@ -266,7 +270,7 @@
|
|||
.report-info {
|
||||
padding: 16px;
|
||||
border-radius: 4px;
|
||||
@apply bg-white;
|
||||
background-color: var(--color-text-fff);
|
||||
}
|
||||
}
|
||||
.block-title {
|
||||
|
|
|
|||
|
|
@ -205,8 +205,10 @@
|
|||
padding: 0 16px;
|
||||
height: 54px;
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
@apply mb-4 bg-white;
|
||||
background: var(--color-text-fff);
|
||||
@apply mb-4;
|
||||
|
||||
background-color: var(--color-text-fff);
|
||||
}
|
||||
.analyze {
|
||||
height: 196px;
|
||||
|
|
@ -217,7 +219,9 @@
|
|||
width: 60%;
|
||||
height: 196px;
|
||||
border-radius: 4px;
|
||||
@apply h-full bg-white;
|
||||
@apply h-full;
|
||||
|
||||
background-color: var(--color-text-fff);
|
||||
.countItem {
|
||||
@apply mr-6 flex items-center;
|
||||
}
|
||||
|
|
@ -235,7 +239,9 @@
|
|||
width: 40%;
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
@apply ml-4 h-full flex-grow bg-white;
|
||||
@apply ml-4 h-full flex-grow;
|
||||
|
||||
background-color: var(--color-text-fff);
|
||||
.chart-legend {
|
||||
.chart-legend-item {
|
||||
@apply grid grid-cols-3;
|
||||
|
|
@ -252,7 +258,7 @@
|
|||
.report-info {
|
||||
padding: 16px;
|
||||
border-radius: 4px;
|
||||
@apply bg-white;
|
||||
background-color: var(--color-text-fff);
|
||||
}
|
||||
}
|
||||
.block-title {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
:self-style="{
|
||||
border: `1px solid ${methodColor}`,
|
||||
color: methodColor,
|
||||
backgroundColor: 'white',
|
||||
backgroundColor: 'var(--color-text-fff)',
|
||||
}"
|
||||
>
|
||||
{{ t('report.detail.script.error') }}
|
||||
|
|
|
|||
|
|
@ -353,8 +353,10 @@
|
|||
padding: 0 16px;
|
||||
height: 54px;
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
@apply mb-4 bg-white;
|
||||
background: var(--color-text-fff);
|
||||
@apply mb-4;
|
||||
|
||||
background-color: var(--color-text-fff);
|
||||
}
|
||||
.analyze {
|
||||
height: 196px;
|
||||
|
|
@ -364,7 +366,9 @@
|
|||
padding: 16px;
|
||||
width: 33%;
|
||||
border-radius: 4px;
|
||||
@apply h-full bg-white;
|
||||
@apply h-full;
|
||||
|
||||
background-color: var(--color-text-fff);
|
||||
}
|
||||
.request-analyze {
|
||||
@apply ml-4 flex-grow;
|
||||
|
|
@ -384,7 +388,7 @@
|
|||
.report-info {
|
||||
padding: 16px;
|
||||
border-radius: 4px;
|
||||
@apply bg-white;
|
||||
background-color: var(--color-text-fff);
|
||||
}
|
||||
}
|
||||
.block-title {
|
||||
|
|
|
|||
|
|
@ -216,17 +216,18 @@
|
|||
margin-top: 4px;
|
||||
}
|
||||
&:hover {
|
||||
background-color: white !important;
|
||||
background-color: var(--color-text-fff) !important;
|
||||
.arco-tree-node-title {
|
||||
background-color: white !important;
|
||||
background-color: var(--color-text-fff) !important;
|
||||
}
|
||||
}
|
||||
.arco-tree-node-title {
|
||||
@apply !cursor-pointer bg-white;
|
||||
@apply !cursor-pointer;
|
||||
|
||||
padding: 8px 4px;
|
||||
background-color: var(--color-text-fff);
|
||||
&:hover {
|
||||
background-color: white !important;
|
||||
background-color: var(--color-text-fff) !important;
|
||||
}
|
||||
.step-node-content {
|
||||
@apply flex w-full flex-1 items-center;
|
||||
|
|
@ -281,7 +282,7 @@
|
|||
}
|
||||
.ms-tree-node-extra {
|
||||
gap: 4px;
|
||||
background-color: white !important;
|
||||
background-color: var(--color-text-fff) !important;
|
||||
}
|
||||
}
|
||||
:deep(.arco-tree-node-selected) {
|
||||
|
|
@ -293,9 +294,9 @@
|
|||
}
|
||||
}
|
||||
:deep(.step-tree-node-focus) {
|
||||
background-color: white !important;
|
||||
background-color: var(--color-text-fff) !important;
|
||||
.arco-tree-node-title {
|
||||
background-color: white;
|
||||
background-color: var(--color-text-fff);
|
||||
}
|
||||
}
|
||||
:deep(.expand) {
|
||||
|
|
@ -309,7 +310,7 @@
|
|||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-text-n8) !important;
|
||||
@apply bg-white;
|
||||
background-color: var(--color-text-fff);
|
||||
}
|
||||
:deep(.arco-table-expand-btn) {
|
||||
width: 16px;
|
||||
|
|
@ -320,17 +321,19 @@
|
|||
}
|
||||
.resContentWrapper {
|
||||
border-radius: 0 0 6px 6px;
|
||||
@apply mb-4 bg-white p-4;
|
||||
@apply mb-4 p-4;
|
||||
|
||||
background-color: var(--color-text-fff);
|
||||
.resContent {
|
||||
height: 38px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
:deep(.ms-tree-container .ms-tree .arco-tree-node .arco-tree-node-title) {
|
||||
background: white;
|
||||
background: var(--color-text-fff);
|
||||
}
|
||||
:deep(.ms-tree-container .ms-tree .arco-tree-node-selected) {
|
||||
background: white;
|
||||
background: var(--color-text-fff);
|
||||
}
|
||||
.line {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -371,17 +371,18 @@
|
|||
margin-top: 4px;
|
||||
}
|
||||
&:hover {
|
||||
background-color: white !important;
|
||||
background-color: var(--color-text-fff) !important;
|
||||
.arco-tree-node-title {
|
||||
background-color: white !important;
|
||||
background-color: var(--color-text-fff) !important;
|
||||
}
|
||||
}
|
||||
.arco-tree-node-title {
|
||||
@apply !cursor-pointer bg-white;
|
||||
@apply !cursor-pointer;
|
||||
|
||||
padding: 8px 4px;
|
||||
background-color: var(--color-text-fff);
|
||||
&:hover {
|
||||
background-color: white !important;
|
||||
background-color: var(--color-text-fff) !important;
|
||||
}
|
||||
.step-node-content {
|
||||
width: calc(100% - 16px);
|
||||
|
|
@ -461,7 +462,7 @@
|
|||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-text-n8) !important;
|
||||
@apply bg-white;
|
||||
background-color: var(--color-text-fff);
|
||||
}
|
||||
:deep(.arco-table-expand-btn) {
|
||||
width: 16px;
|
||||
|
|
@ -472,7 +473,9 @@
|
|||
}
|
||||
.resContentWrapper {
|
||||
border-radius: 0 0 6px 6px;
|
||||
@apply mb-4 bg-white p-4;
|
||||
@apply mb-4 p-4;
|
||||
|
||||
background-color: var(--color-text-fff);
|
||||
.resContent {
|
||||
height: 38px;
|
||||
border-radius: 6px;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
class="report-detail-container"
|
||||
>
|
||||
<div id="report-detail" class="report-detail">
|
||||
<div class="mb-[16px] break-all rounded-[var(--border-radius-small)] bg-white p-[16px]">
|
||||
<div class="mb-[16px] break-all rounded-[var(--border-radius-small)] bg-[var(--color-text-fff)] p-[16px]">
|
||||
{{ reportStepDetail?.name }}
|
||||
</div>
|
||||
<CaseReportCom :detail-info="reportStepDetail" is-export />
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
class="report-detail-container"
|
||||
>
|
||||
<div id="report-detail" class="report-detail">
|
||||
<div class="mb-[16px] break-all rounded-[var(--border-radius-small)] bg-white p-[16px]">
|
||||
<div class="mb-[16px] break-all rounded-[var(--border-radius-small)] bg-[var(--color-text-fff)] p-[16px]">
|
||||
{{ reportStepDetail?.name }}
|
||||
</div>
|
||||
<ScenarioCom :detail-info="reportStepDetail" is-export />
|
||||
|
|
|
|||
|
|
@ -61,14 +61,18 @@
|
|||
padding: 0 16px;
|
||||
height: 54px;
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
@apply mb-4 bg-white;
|
||||
background: var(--color-text-fff);
|
||||
@apply mb-4;
|
||||
|
||||
background-color: var(--color-text-fff);
|
||||
}
|
||||
.analyze {
|
||||
min-height: 196px;
|
||||
max-height: 200px;
|
||||
border-radius: 4px;
|
||||
@apply mb-2 flex justify-between bg-white;
|
||||
@apply mb-2 flex justify-between;
|
||||
|
||||
background-color: var(--color-text-fff);
|
||||
.request-analyze {
|
||||
@apply flex flex-1 flex-col p-4;
|
||||
.chart-legend {
|
||||
|
|
@ -118,7 +122,7 @@
|
|||
.report-info {
|
||||
padding: 16px;
|
||||
border-radius: 4px;
|
||||
@apply bg-white;
|
||||
background-color: var(--color-text-fff);
|
||||
}
|
||||
}
|
||||
.block-title {
|
||||
|
|
|
|||
|
|
@ -325,7 +325,7 @@
|
|||
|
||||
<style lang="less">
|
||||
.scenario-csv-trigger {
|
||||
@apply bg-white;
|
||||
background-color: var(--color-text-fff);
|
||||
.scenario-csv-trigger-content {
|
||||
padding: 16px;
|
||||
width: 400px;
|
||||
|
|
|
|||
|
|
@ -1406,7 +1406,7 @@
|
|||
.exec-btn {
|
||||
margin-right: 12px;
|
||||
:deep(.arco-btn) {
|
||||
color: white !important;
|
||||
color: var(--color-text-fff) !important;
|
||||
background-color: rgb(var(--primary-5)) !important;
|
||||
.btn-base-primary-hover();
|
||||
.btn-base-primary-active();
|
||||
|
|
@ -1430,19 +1430,21 @@
|
|||
.ms-scroll-bar();
|
||||
}
|
||||
.sticky-content {
|
||||
@apply sticky bg-white;
|
||||
@apply sticky;
|
||||
|
||||
z-index: 101;
|
||||
background-color: var(--color-text-fff);
|
||||
}
|
||||
.request-content-and-response {
|
||||
display: flex;
|
||||
&.vertical {
|
||||
flex-direction: column;
|
||||
.response :deep(.response-head) {
|
||||
@apply sticky bg-white;
|
||||
@apply sticky;
|
||||
|
||||
top: 46px; // 请求参数tab高度(不算border-bottom)
|
||||
z-index: 11;
|
||||
background-color: var(--color-text-fff);
|
||||
}
|
||||
.request-tab-pane {
|
||||
min-height: 400px;
|
||||
|
|
|
|||
|
|
@ -1093,7 +1093,7 @@
|
|||
<style lang="less" scoped>
|
||||
.exec-btn {
|
||||
:deep(.arco-btn) {
|
||||
color: white !important;
|
||||
color: var(--color-text-fff) !important;
|
||||
background-color: rgb(var(--primary-5)) !important;
|
||||
.btn-base-primary-hover();
|
||||
.btn-base-primary-active();
|
||||
|
|
@ -1112,19 +1112,21 @@
|
|||
.ms-scroll-bar();
|
||||
}
|
||||
.sticky-content {
|
||||
@apply sticky bg-white;
|
||||
@apply sticky;
|
||||
|
||||
z-index: 101;
|
||||
background-color: var(--color-text-fff);
|
||||
}
|
||||
.request-content-and-response {
|
||||
display: flex;
|
||||
&.vertical {
|
||||
flex-direction: column;
|
||||
.response :deep(.response-head) {
|
||||
@apply sticky bg-white;
|
||||
@apply sticky;
|
||||
|
||||
top: 46px; // 请求参数tab高度(不算border-bottom)
|
||||
z-index: 11;
|
||||
background-color: var(--color-text-fff);
|
||||
}
|
||||
.request-tab-pane {
|
||||
min-height: 400px;
|
||||
|
|
|
|||
|
|
@ -205,12 +205,13 @@
|
|||
|
||||
<style scoped lang="less">
|
||||
.import-item {
|
||||
@apply flex cursor-pointer items-center bg-white;
|
||||
@apply flex cursor-pointer items-center;
|
||||
|
||||
padding: 8px;
|
||||
width: 150px;
|
||||
border: 1px solid var(--color-text-n8);
|
||||
border-radius: var(--border-radius-small);
|
||||
background-color: var(--color-text-fff);
|
||||
gap: 6px;
|
||||
}
|
||||
.import-item--active {
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
</a-tabs>
|
||||
<a-divider :margin="0"></a-divider>
|
||||
<div class="flex h-[calc(100%-49px)]">
|
||||
<div v-show="!isAdvancedSearchMode" class="w-[300px] border-r p-[16px]">
|
||||
<div v-show="!isAdvancedSearchMode" class="w-[300px] border-r border-[var(--color-text-n8)] p-[16px]">
|
||||
<div class="flex flex-col">
|
||||
<div class="mb-[12px] flex items-center gap-[8px] overflow-hidden">
|
||||
<MsProjectSelect
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@
|
|||
border: none;
|
||||
border-radius: var(--border-radius-mini);
|
||||
color: var(--color-text-1);
|
||||
background-color: white;
|
||||
background-color: var(--color-text-fff);
|
||||
line-height: 20px;
|
||||
}
|
||||
.ms-pagination-item-previous {
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
.ms-pagination-item-active {
|
||||
border: 1px solid rgb(var(--primary-5)) !important;
|
||||
color: rgb(var(--primary-5)) !important;
|
||||
background-color: white !important;
|
||||
background-color: var(--color-text-fff) !important;
|
||||
}
|
||||
}
|
||||
.ms-pagination-jumper {
|
||||
|
|
@ -87,7 +87,7 @@
|
|||
background-color: var(--color-text-n8);
|
||||
.ms-pagination-jumper-input {
|
||||
width: 48px;
|
||||
background-color: white;
|
||||
background-color: var(--color-text-fff);
|
||||
input {
|
||||
height: 18px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -110,14 +110,17 @@
|
|||
.arco-popover-content {
|
||||
@apply mt-0 h-full;
|
||||
.response-header-pre {
|
||||
@apply h-full overflow-auto bg-white;
|
||||
.ms-scroll-bar();
|
||||
@apply h-full overflow-auto;
|
||||
|
||||
padding: 8px 12px;
|
||||
border-radius: var(--border-radius-small);
|
||||
background-color: var(--color-text-fff);
|
||||
.ms-scroll-bar();
|
||||
}
|
||||
.response-result {
|
||||
@apply h-full overflow-auto bg-white;
|
||||
@apply h-full overflow-auto;
|
||||
|
||||
background-color: var(--color-text-fff);
|
||||
.ms-scroll-bar();
|
||||
.arco-tabs-tab:first-child {
|
||||
margin-left: 0;
|
||||
|
|
|
|||
|
|
@ -227,15 +227,17 @@
|
|||
margin-left: 0;
|
||||
}
|
||||
.response-header-pre {
|
||||
@apply h-full overflow-auto bg-white;
|
||||
.ms-scroll-bar();
|
||||
@apply h-full overflow-auto;
|
||||
|
||||
padding: 8px 12px;
|
||||
border-radius: var(--border-radius-small);
|
||||
background-color: var(--color-text-fff);
|
||||
.ms-scroll-bar();
|
||||
}
|
||||
.sticky-content {
|
||||
@apply sticky overflow-visible bg-white;
|
||||
@apply sticky overflow-visible;
|
||||
|
||||
z-index: 101;
|
||||
background-color: var(--color-text-fff);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
:self-style="{
|
||||
border: `1px solid ${color}`,
|
||||
color: color,
|
||||
backgroundColor: 'white',
|
||||
backgroundColor: 'var(--color-text-fff)',
|
||||
}"
|
||||
>
|
||||
{{ record.testPlanNum }}
|
||||
|
|
|
|||
|
|
@ -221,12 +221,13 @@
|
|||
|
||||
<style lang="less" scoped>
|
||||
.import-item {
|
||||
@apply flex cursor-pointer items-center bg-white;
|
||||
@apply flex cursor-pointer items-center;
|
||||
|
||||
padding: 8px;
|
||||
width: 200px;
|
||||
border: 1px solid var(--color-text-n8);
|
||||
border-radius: var(--border-radius-small);
|
||||
background-color: var(--color-text-fff);
|
||||
gap: 6px;
|
||||
}
|
||||
.import-item--active {
|
||||
|
|
|
|||
|
|
@ -1384,11 +1384,10 @@
|
|||
|
||||
<style lang="less" scoped>
|
||||
.add-step-btn {
|
||||
@apply bg-white;
|
||||
|
||||
padding: 4px;
|
||||
border: 1px dashed rgb(var(--primary-3));
|
||||
color: rgb(var(--primary-5));
|
||||
background-color: var(--color-text-fff);
|
||||
&:hover,
|
||||
&:focus {
|
||||
border: 1px dashed rgb(var(--primary-5));
|
||||
|
|
@ -1422,9 +1421,10 @@
|
|||
}
|
||||
}
|
||||
.arco-tree-node-title {
|
||||
@apply !cursor-pointer bg-white;
|
||||
@apply !cursor-pointer;
|
||||
|
||||
padding: 8px 4px;
|
||||
background-color: var(--color-text-fff);
|
||||
&:hover {
|
||||
background-color: var(--color-text-n9) !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -773,7 +773,7 @@
|
|||
.pageWrap {
|
||||
height: calc(100% - 50px);
|
||||
border-radius: var(--border-radius-large);
|
||||
@apply bg-white;
|
||||
background-color: var(--color-text-fff);
|
||||
}
|
||||
.case {
|
||||
padding: 8px 4px;
|
||||
|
|
@ -814,12 +814,16 @@
|
|||
}
|
||||
}
|
||||
.recycle {
|
||||
@apply absolute bottom-0 bg-white pb-4;
|
||||
@apply absolute bottom-0 pb-4;
|
||||
|
||||
background-color: var(--color-text-fff);
|
||||
:deep(.arco-divider-horizontal) {
|
||||
margin: 8px 0;
|
||||
}
|
||||
.recycle-bin {
|
||||
@apply bottom-0 flex items-center bg-white;
|
||||
@apply bottom-0 flex items-center;
|
||||
|
||||
background-color: var(--color-text-fff);
|
||||
.recycle-count {
|
||||
margin-left: 4px;
|
||||
color: var(--color-text-4);
|
||||
|
|
|
|||
|
|
@ -112,7 +112,7 @@
|
|||
.pageWrap {
|
||||
height: calc(100% - 65px);
|
||||
border-radius: var(--border-radius-large);
|
||||
@apply bg-white;
|
||||
background-color: var(--color-text-fff);
|
||||
.case {
|
||||
padding: 8px 4px;
|
||||
border-radius: var(--border-radius-small);
|
||||
|
|
@ -153,12 +153,16 @@
|
|||
}
|
||||
}
|
||||
.recycle {
|
||||
@apply absolute bottom-0 bg-white pb-4;
|
||||
@apply absolute bottom-0 pb-4;
|
||||
|
||||
background-color: var(--color-text-fff);
|
||||
:deep(.arco-divider-horizontal) {
|
||||
margin: 8px 0;
|
||||
}
|
||||
.recycle-bin {
|
||||
@apply bottom-0 flex items-center bg-white;
|
||||
@apply bottom-0 flex items-center;
|
||||
|
||||
background-color: var(--color-text-fff);
|
||||
.recycle-count {
|
||||
margin-left: 4px;
|
||||
color: var(--color-text-4);
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<icon-close-circle-fill :size="68" />
|
||||
</template>
|
||||
</a-empty>
|
||||
<div v-else class="form-box w-1/3 rounded-[12px] bg-white">
|
||||
<div v-else class="form-box w-1/3 rounded-[12px] bg-[var(--color-text-fff)]">
|
||||
<div class="form-box-title">{{ t('invite.title') }}</div>
|
||||
<a-form
|
||||
ref="registerFormRef"
|
||||
|
|
|
|||
|
|
@ -105,7 +105,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<template #default>
|
||||
<div ref="wrapperRef" class="bg-white">
|
||||
<div ref="wrapperRef" class="bg-[var(--color-text-fff)]">
|
||||
<div class="header relative h-[48px] pl-2">
|
||||
<MsTab
|
||||
v-model:active-key="activeTab"
|
||||
|
|
|
|||
|
|
@ -146,13 +146,16 @@
|
|||
|
||||
<style scoped lang="less">
|
||||
.outerWrapper {
|
||||
background-color: var(--color-text-fff);
|
||||
box-shadow: 0 6px 15px rgba(120 56 135/ 5%);
|
||||
@apply rounded bg-white;
|
||||
@apply rounded;
|
||||
.innerWrapper {
|
||||
background: var(--color-bg-3);
|
||||
@apply rounded p-6;
|
||||
.logo-img {
|
||||
@apply mr-3 flex items-center bg-white;
|
||||
@apply mr-3 flex items-center;
|
||||
|
||||
background-color: var(--color-text-fff);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -136,8 +136,8 @@
|
|||
</div>
|
||||
</template>
|
||||
<template #default="{ detail, loading }">
|
||||
<div ref="wrapperRef" class="bg-white">
|
||||
<div class="header relative h-[48px] border-b pl-2">
|
||||
<div ref="wrapperRef" class="bg-[var(--color-text-fff)]">
|
||||
<div class="header relative h-[48px] border-b border-[var(--color-text-n8)] pl-2">
|
||||
<div class="max-w-[calc(100%-100px)]">
|
||||
<MsTab
|
||||
v-model:active-key="activeTab"
|
||||
|
|
|
|||
|
|
@ -158,13 +158,16 @@
|
|||
|
||||
<style scoped lang="less">
|
||||
.outerWrapper {
|
||||
background-color: var(--color-text-fff);
|
||||
box-shadow: 0 6px 15px rgba(120 56 135/ 5%);
|
||||
@apply rounded bg-white;
|
||||
@apply rounded;
|
||||
.innerWrapper {
|
||||
background: var(--color-bg-3);
|
||||
@apply rounded p-6;
|
||||
.logo-img {
|
||||
@apply mr-3 flex items-center bg-white;
|
||||
@apply mr-3 flex items-center;
|
||||
|
||||
background-color: var(--color-text-fff);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -912,7 +912,7 @@
|
|||
min-width: 1000px;
|
||||
height: calc(100vh - 126px);
|
||||
border-radius: var(--border-radius-large);
|
||||
@apply bg-white;
|
||||
background-color: var(--color-text-fff);
|
||||
.back {
|
||||
margin-right: 8px;
|
||||
width: 20px;
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue