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

feat(theme): themeStyle

This commit is contained in:
baiqi 2024-11-28 16:02:57 +08:00 committed by 刘瑞斌
parent d8bc26d26b
commit 1067525dfd
4 changed files with 48 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
frontend/src/assets/images/basic_bg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.7 KiB

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

@ -513,9 +513,12 @@
</script> </script>
<style lang="less"> <style lang="less">
.arco-menu-light {
background-color: transparent;
}
.arco-menu-vertical { .arco-menu-vertical {
.menu-wrapper { .menu-wrapper {
background-color: var(--color-bg-3); background-color: var(--color-text-fff);
} }
.arco-menu-inner { .arco-menu-inner {
@apply flex flex-col justify-between; @apply flex flex-col justify-between;

4
frontend/src/views/api-test/scenario/components/scenarioTable.vue
View File

@ -45,7 +45,7 @@
</span> </span>
</template> </template>
<a-tag <a-tag
style="border-color: #00c261; color: #00c261; background-color: transparent" style="border-color: rgb(var(--success-6)); color: rgb(var(--success-6)); background-color: transparent"
bordered bordered
@click="openScheduleModal(record)" @click="openScheduleModal(record)"
>{{ t('apiScenario.schedule.abbreviation') }} >{{ t('apiScenario.schedule.abbreviation') }}
@ -55,7 +55,7 @@
<div v-if="record.scheduleConfig && !record.scheduleConfig.enable" class="float-right"> <div v-if="record.scheduleConfig && !record.scheduleConfig.enable" class="float-right">
<a-tooltip :content="t('apiScenario.schedule.table.tooltip.disable')" position="top"> <a-tooltip :content="t('apiScenario.schedule.table.tooltip.disable')" position="top">
<a-tag <a-tag
style="border-color: #d4d4d8; color: #323233; background-color: transparent" style="border-color: var(--color-text-n8); color: var(--color-text-1); background-color: transparent"
bordered bordered
@click="openScheduleModal(record)" @click="openScheduleModal(record)"
>{{ t('apiScenario.schedule.abbreviation') }} >{{ t('apiScenario.schedule.abbreviation') }}

93
frontend/src/views/project-management/projectAndPermission/basicInfos/index.vue
View File

@ -2,7 +2,7 @@
<div v-if="projectDetail?.deleted" class="mb-6"> <div v-if="projectDetail?.deleted" class="mb-6">
<a-alert type="error">{{ t('project.basicInfo.alertDescription') }}</a-alert> <a-alert type="error">{{ t('project.basicInfo.alertDescription') }}</a-alert>
</div> </div>
<div class="wrapper mb-6 flex justify-between"> <div class="wrapper mb-[16px] flex justify-between border-b border-[var(--color-text-n8)] pb-[16px]">
<span class="font-medium text-[var(--color-text-1)]">{{ t('project.basicInfo.basicInfo') }}</span> <span class="font-medium text-[var(--color-text-1)]">{{ t('project.basicInfo.basicInfo') }}</span>
<a-button <a-button
v-show="!projectDetail?.deleted" v-show="!projectDetail?.deleted"
@ -12,39 +12,44 @@
>{{ t('project.basicInfo.edit') }}</a-button >{{ t('project.basicInfo.edit') }}</a-button
> >
</div> </div>
<div class="project-info mb-6 h-[112px] bg-[var(--color-text-fff)] p-1"> <div class="detail-info mb-[16px] flex items-center gap-[12px]">
<div class="inner-wrapper rounded-md p-4"> <div class="flex items-center rounded-[var(--border-radius-small)] bg-[rgb(var(--primary-1))] p-[9px]">
<div class="detail-info flex flex-col justify-between rounded-md p-4"> <MsIcon type="icon-icon_project" class="text-[rgb(var(--primary-4))]" :size="22" />
<div class="flex items-center"> </div>
<span class="one-line-text mr-1 max-w-[300px] font-medium text-[var(--color-text-1)]">{{ <div class="flex flex-col">
projectDetail?.name <div class="flex items-center">
}}</span> <a-tooltip :content="projectDetail?.name">
<span class="button mr-1" :class="[projectDetail?.deleted ? 'delete-button' : 'enable-button']"> <div class="one-line-text mr-1 max-w-[300px] font-medium text-[var(--color-text-1)]">
{{ projectDetail?.deleted ? t('project.basicInfo.deleted') : t('project.basicInfo.enable') }} {{ projectDetail?.name }}
</span> </div>
</a-tooltip>
<div class="button mr-1" :class="[projectDetail?.deleted ? 'delete-button' : 'enable-button']">
{{ projectDetail?.deleted ? t('project.basicInfo.deleted') : t('project.basicInfo.enable') }}
</div> </div>
<div class="one-line-text text-[12px] text-[--color-text-4]">{{ projectDetail?.description }}</div>
</div> </div>
<a-tooltip v-if="projectDetail?.description" :content="projectDetail?.description">
<div class="one-line-text text-[12px] text-[--color-text-4]">{{ 'projectDetail?.description' }}</div>
</a-tooltip>
</div> </div>
</div> </div>
<div class="ml-1 flex flex-col"> <div class="ml-1 grid grid-cols-2 gap-[16px] rounded-[var(--border-radius-small)] bg-[var(--color-text-n9)] p-[16px]">
<div class="label-item"> <div class="label-item">
<span class="label">{{ t('project.basicInfo.createBy') }}</span> <span class="label">{{ t('project.basicInfo.createBy') }}：</span>
<a-tooltip v-if="translateTextToPX(projectDetail?.createUser) > 300" :content="projectDetail?.createUser"> <a-tooltip v-if="translateTextToPX(projectDetail?.createUser) > 300" :content="projectDetail?.createUser">
<span class="one-line-text" style="max-width: 300px">{{ projectDetail?.createUser }}</span> <span class="one-line-text" style="max-width: 300px">{{ projectDetail?.createUser }}</span>
</a-tooltip> </a-tooltip>
<span v-else>{{ projectDetail?.createUser }}</span> <span v-else>{{ projectDetail?.createUser }}</span>
</div> </div>
<div class="label-item"> <div class="label-item">
<span class="label">{{ t('project.basicInfo.organization') }}</span> <span class="label">{{ t('project.basicInfo.organization') }}：</span>
<MsTag>{{ projectDetail?.organizationName }}</MsTag> <MsTag>{{ projectDetail?.organizationName }}</MsTag>
</div> </div>
<div class="label-item"> <div class="label-item">
<span class="label">{{ t('project.basicInfo.resourcePool') }}</span> <span class="label">{{ t('project.basicInfo.resourcePool') }}：</span>
<MsTag v-for="pool of projectDetail?.resourcePoolList" :key="pool.id">{{ pool.name }}</MsTag> <MsTag v-for="pool of projectDetail?.resourcePoolList" :key="pool.id">{{ pool.name }}</MsTag>
</div> </div>
<div class="label-item"> <div class="label-item">
<span class="label">{{ t('project.basicInfo.createTime') }}</span> <span class="label">{{ t('project.basicInfo.createTime') }}：</span>
<span>{{ dayjs(projectDetail?.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span> <span>{{ dayjs(projectDetail?.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
</div> </div>
</div> </div>
@ -58,6 +63,7 @@
import { inject, onBeforeMount, ref } from 'vue'; import { inject, onBeforeMount, ref } from 'vue';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import MsIcon from '@/components/pure/ms-icon-font/index.vue';
import MsTag from '@/components/pure/ms-tag/ms-tag.vue'; import MsTag from '@/components/pure/ms-tag/ms-tag.vue';
import UpdateProjectModal from './components/updateProjectModal.vue'; import UpdateProjectModal from './components/updateProjectModal.vue';
@ -106,46 +112,31 @@
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.project-info { .detail-info {
border-radius: 4px; .button {
box-shadow: 0 0 10px rgb(120 56 135/5%); padding: 0 4px;
.inner-wrapper { font-size: 12px;
height: 100%; border-radius: 2px;
background: rgb(var(--primary-1)); line-height: 20px;
.detail-info { @apply inline-block;
height: 100%; }
background: url('@/assets/images/basic_bg.png'); .enable-button {
background-size: cover; color: rgb(var(--success-5));
.button { background: rgb(var(--success-1));
font-size: 12px; }
border-radius: 2px; .disabled-button {
line-height: 20px; color: var(--color-text-4);
@apply inline-block px-2 py-1; background: var(--color-text-n8);
} }
.enable-button { .delete-button {
color: rgb(var(--success-5)); color: rgb(var(--danger-5));
background: rgb(var(--success-1)); background: rgb(var(--danger-1));
}
.disabled-button {
color: var(--color-text-4);
background: var(--color-text-n8);
}
.delete-button {
color: rgb(var(--danger-5));
background: rgb(var(--danger-1));
}
}
} }
} }
.label-item { .label-item {
margin-bottom: 16px;
height: 22px; height: 22px;
line-height: 22px; line-height: 22px;
span {
float: left;
}
.label { .label {
margin-right: 16px;
width: 120px; width: 120px;
color: var(--color-text-3); color: var(--color-text-3);
} }