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

feat(组件): 样式调整&页面设置

This commit is contained in:
baiqi 2023-08-10 17:06:28 +08:00 committed by 刘瑞斌
parent b0e44cb2fb
commit fb81ab845a
17 changed files with 78 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/api/requrls/setting/config.ts
View File

@ -25,10 +25,10 @@ export const GetAuthDetailUrl = '/system/authsource/get';
// 删除认证源
export const DeleteAuthUrl = '/system/authsource/delete';
// 获取系统主页左上角图片
export const GetTitleImgUrl = `${import.meta.env.VITE_API_BASE_URL}/display/get/title`;
export const GetTitleImgUrl = `${import.meta.env.VITE_API_BASE_URL}/base-display/get/logo-platform`;
// 获取登录 logo
export const GetLoginLogoUrl = `${import.meta.env.VITE_API_BASE_URL}/display/get/loginLogo`;
export const GetLoginLogoUrl = `${import.meta.env.VITE_API_BASE_URL}/base-display/get/login-logo`;
// 获取登录大图
export const GetLoginImageUrl = `${import.meta.env.VITE_API_BASE_URL}/display/get/loginImage`;
export const GetLoginImageUrl = `${import.meta.env.VITE_API_BASE_URL}/base-display/get/login-image`;
// 获取平台标签图标
export const GetPlatformIconUrl = `${import.meta.env.VITE_API_BASE_URL}/display/get/icon`;
export const GetPlatformIconUrl = `${import.meta.env.VITE_API_BASE_URL}/base-display/get/icon`;

15
frontend/src/assets/style/arco-reset.less
View File

@ -41,20 +41,26 @@
padding: 24px;
.arco-modal-header {
@apply h-auto border-b-0 p-0;
@apply h-auto items-baseline border-b-0 p-0;
margin-bottom: 16px;
.arco-modal-title {
@apply flex items-center font-semibold;
@apply flex items-baseline font-semibold;
max-width: calc(100% - 16px);
font-size: 14px;
.arco-modal-title-icon {
@apply flex items-center;
@apply relative;
top: 3px;
.arco-icon {
font-size: 20px;
}
}
}
.arco-modal-close-btn {
@apply ml-0;
}
}
.arco-modal-body {
color: var(--color-text-2);
@ -176,6 +182,9 @@
.arco-input-wrapper,
.arco-textarea-wrapper,
.arco-input-tag,
.arco-picker,
.arco-select-view,
.arco-select-view-single,
.arco-select {
border: 1px solid var(--color-text-input-border);
background-color: var(--color-text-fff) !important;

2
frontend/src/components/pure/ms-card/index.vue
View File

@ -19,7 +19,7 @@
class="pr-[5px]"
:style="{
overflow: 'auto',
width: `calc(100vw - ${menuWidth}px - 48px)`,
width: `calc(100vw - ${menuWidth}px - 58px)`,
height: props.autoHeight ? 'auto' : `calc(100vh - ${cardOverHeight}px)`,
}"
>

3
frontend/src/components/pure/ms-table/base-table.vue
View File

@ -50,7 +50,7 @@
{{ t('system.user.tableEnable') }}
</div>
<div v-else class="flex items-center text-[var(--color-text-4)]">
<icon-stop class="mr-[2px]" />
<MsIcon type="icon-icon_disable" class="mr-[2px]" />
{{ t('system.user.tableDisable') }}
</div>
</template>
@ -118,6 +118,7 @@
import MsPagination from '@/components/pure/ms-pagination/index';
import type { TableData } from '@arco-design/web-vue';
import ColumnSelector from './columnSelector.vue';
import MsIcon from '@/components/pure/ms-icon-font/index.vue';
const batchleft = ref('10px');
const { t } = useI18n();

2
frontend/src/layout/default-layout.vue
View File

@ -97,7 +97,7 @@
const route = useRoute();
const permission = usePermission();
const innerLogo = computed(() => (props.isPreview ? innerProps.value.logo : GetTitleImgUrl));
const innerLogo = computed(() => (props.isPreview && innerProps.value.logo ? innerProps.value.logo : GetTitleImgUrl));
const innerName = computed(() => (props.isPreview ? innerProps.value.name : appStore.pageConfig.platformName));
const navbarHeight = `56px`;

1
frontend/src/locale/en-US/index.ts
View File

@ -38,6 +38,7 @@ export default {
'menu.settings.system.resourcePoolDetail': 'Add resource pool',
'menu.settings.system.resourcePoolEdit': 'Edit resource pool',
'menu.settings.system.parameter': 'System parameter',
'menu.settings.system.log': 'Log',
'navbar.action.locale': 'Switch to English',
...sys,
...localeSettings,

1
frontend/src/locale/zh-CN/index.ts
View File

@ -38,6 +38,7 @@ export default {
'menu.settings.system.resourcePoolDetail': '添加资源池',
'menu.settings.system.resourcePoolEdit': '编辑资源池',
'menu.settings.system.parameter': '系统参数',
'menu.settings.system.log': '日志',
'navbar.action.locale': '切换为中文',
...sys,
...localeSettings,

1
frontend/src/main.ts
View File

@ -8,7 +8,6 @@ import router from './router';
import store from './store';
import { setupI18n } from './locale';
import directive from './directive';
import './mock';
import App from './App.vue';
// eslint-disable-next-line import/no-unresolved
import 'virtual:svg-icons-register';

13
frontend/src/utils/index.ts
View File

@ -133,3 +133,16 @@ export function desensitize(str: string): string {
return str.replace(/./g, '*');
}
/**
* 对话框标题动态内容字符限制
* @param str 标题的动态内容
* @returns 转化后的字符串
*/
export function characterLimit(str?: string): string {
if (!str) return '';
if (str.length <= 20) {
return str;
}
return `${str.slice(0, 20 - 3)}...`;
}

2
frontend/src/views/login/components/login-form.vue
View File

@ -77,7 +77,7 @@
}>();
const innerLogo = computed(() => {
return props.isPreview ? props.logo : GetLoginLogoUrl;
return props.isPreview && props.logo ? props.logo : GetLoginLogoUrl;
});
const innerSlogan = computed(() => {

13
frontend/src/views/setting/organization/member/index.vue
View File

@ -89,16 +89,6 @@
</a-select>
</a-tooltip>
</template>
<template #enable="{ record }">
<div v-if="record.enable" class="flex items-center">
<icon-check-circle-fill class="mr-[2px] text-[rgb(var(--success-6))]" />
{{ t('organization.member.tableEnable') }}
</div>
<div v-else class="flex items-center text-[var(--color-text-4)]">
<icon-stop class="mr-[2px]" />
{{ t('organization.member.tableDisable') }}
</div>
</template>
<template #action="{ record }">
<MsButton @click="addOrEditMember('edit', record)">{{ t('organization.member.edit') }}</MsButton>
<MsButton @click="deleteMember(record)">{{ t('organization.member.remove') }}</MsButton>
@ -155,6 +145,7 @@
LinkItem,
BatchAddProjectModel,
} from '@/models/setting/member';
import { characterLimit } from '@/utils';
const tableStore = useTableStore();
const { t } = useI18n();
@ -265,7 +256,7 @@
const deleteMember = (record: MemberItem) => {
openModal({
type: 'warning',
title: t('organization.member.deleteMemberTip', { name: record.name }),
title: t('organization.member.deleteMemberTip', { name: characterLimit(record.name) }),
content: '',
okText: t('organization.member.deleteMemberConfirm'),
cancelText: t('organization.member.deleteMemberCancel'),

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

@ -10,16 +10,6 @@
<template #name="{ record }">
<a-button type="text" @click="openAuthDetail(record)">{{ record.name }}</a-button>
</template>
<template #enable="{ record }">
<div v-if="record.enable" class="flex items-center">
<icon-check-circle-fill class="mr-[2px] text-[rgb(var(--success-6))]" />
{{ t('system.config.auth.enable') }}
</div>
<div v-else class="flex items-center text-[var(--color-text-4)]">
<icon-stop class="mr-[2px]" />
{{ t('system.config.auth.disable') }}
</div>
</template>
<template #action="{ record }">
<MsButton @click="editAuth(record)">{{ t('system.config.auth.edit') }}</MsButton>
<MsButton v-if="record.enable" @click="disabledAuth(record)">
@ -511,6 +501,7 @@
} from '@/api/modules/setting/config';
import MsFormItemSub from '@/components/bussiness/ms-form-item-sub/index.vue';
import { scrollIntoView } from '@/utils/dom';
import { characterLimit } from '@/utils';
import type { FormInstance, ValidatedError } from '@arco-design/web-vue';
import type { MsTableColumn } from '@/components/pure/ms-table/type';
@ -587,7 +578,7 @@
async function enableAuth(record: any) {
openModal({
type: 'info',
title: t('system.config.auth.enableTipTitle', { name: record.name }),
title: t('system.config.auth.enableTipTitle', { name: characterLimit(record.name) }),
content: t('system.config.auth.enableTipContent'),
okText: t('system.config.auth.enableConfirm'),
cancelText: t('system.config.auth.cancel'),
@ -624,7 +615,7 @@
function disabledAuth(record: any) {
openModal({
type: 'info',
title: t('system.config.auth.disableTipTitle', { name: record.name }),
title: t('system.config.auth.disableTipTitle', { name: characterLimit(record.name) }),
content: t('system.config.auth.disableTipContent'),
okText: t('system.config.auth.disableConfirm'),
cancelText: t('system.config.auth.cancel'),
@ -661,7 +652,7 @@
function delAuth(record: any) {
openModal({
type: 'warning',
title: t('system.config.auth.deleteTipTitle', { name: record.name }),
title: t('system.config.auth.deleteTipTitle', { name: characterLimit(record.name) }),
content: t('system.config.auth.deleteTipContent'),
okText: t('system.config.auth.deleteConfirm'),
cancelText: t('system.config.auth.cancel'),

14
frontend/src/views/setting/system/config/components/pageConfig.vue
View File

@ -60,8 +60,12 @@
</div>
<!-- 登录页预览实际渲染 DOM，按三种屏幕尺寸缩放 -->
<div :class="['page-preview', isLoginPageFullscreen ? 'full-preview' : 'normal-preview']">
<banner :banner="pageConfig.loginImage[0]?.url || defaultBanner" is-preview />
<loginForm :slogan="pageConfig.slogan" :logo="pageConfig.loginLogo[0]?.url" is-preview />
<banner :banner="pageConfig.loginImage[0]?.url || defaultLoginImage" is-preview />
<loginForm
:slogan="pageConfig.slogan"
:logo="pageConfig.loginLogo[0]?.url || defaultLoginLogo"
is-preview
/>
</div>
</div>
<div class="config-form">
@ -213,7 +217,7 @@
]"
>
<defaultLayout
:logo="pageConfig.logoPlatform[0]?.url"
:logo="pageConfig.logoPlatform[0]?.url || defaultPlatformLogo"
:name="pageConfig.platformName"
class="overflow-hidden"
is-preview
@ -319,7 +323,9 @@
import type { FormInstance, ValidatedError } from '@arco-design/web-vue';
const defaultBanner = `${import.meta.env.BASE_URL}images/login-banner.jpg`;
const defaultLoginImage = `${import.meta.env.BASE_URL}images/login-banner.jpg`;
const defaultLoginLogo = `${import.meta.env.BASE_URL}images/login-logo.svg`;
const defaultPlatformLogo = `${import.meta.env.BASE_URL}images/MS-full-logo.svg`;
const { t } = useI18n();
const { currentLocale } = useLocale();
const appStore = useAppStore();

5
frontend/src/views/setting/system/pluginManager/components/pluginTable.vue
View File

@ -165,6 +165,7 @@
} from '@/models/setting/plugin';
import dayjs from 'dayjs';
import TableExpand from './tableExpand.vue';
import { characterLimit } from '@/utils';
const { t } = useI18n();
const visitedKey = 'doNotShowAgain';
@ -236,7 +237,7 @@
function deletePlugin(record: any) {
openModal({
type: 'warning',
title: t('system.plugin.deletePluginTip', { name: record.name }),
title: t('system.plugin.deletePluginTip', { name: characterLimit(record.name) }),
content: '',
okText: t('system.plugin.deletePluginConfirm'),
cancelText: t('system.plugin.pluginCancel'),
@ -293,7 +294,7 @@
const disableHandler = (record: PluginItem) => {
openModal({
type: 'info',
title: t('system.plugin.disablePluginTip', { name: record.name }),
title: t('system.plugin.disablePluginTip', { name: characterLimit(record.name) }),
content: t('system.plugin.disablePluginContent'),
okText: t('system.plugin.disablePluginConfirm'),
cancelText: t('system.plugin.pluginCancel'),

15
frontend/src/views/setting/system/resourcePool/index.vue
View File

@ -17,16 +17,6 @@
<template #name="{ record }">
<a-button type="text" @click="showPoolDetail(record)">{{ record.name }}</a-button>
</template>
<template #enable="{ record }">
<div v-if="record.enable" class="flex items-center">
<icon-check-circle-fill class="mr-[2px] text-[rgb(var(--success-6))]" />
{{ t('system.resourcePool.tableEnable') }}
</div>
<div v-else class="flex items-center text-[var(--color-text-4)]">
<icon-stop class="mr-[2px]" />
{{ t('system.resourcePool.tableDisable') }}
</div>
</template>
<template #action="{ record }">
<MsButton @click="editPool(record)">{{ t('system.resourcePool.editPool') }}</MsButton>
<MsButton v-if="record.enable" @click="disabledPool(record)">{{
@ -78,6 +68,7 @@
import JobTemplateDrawer from './components/jobTemplateDrawer.vue';
import { TableKeyEnum } from '@/enums/tableEnum';
import { useTableStore } from '@/store';
import { characterLimit } from '@/utils';
import type { Description } from '@/components/pure/ms-description/index.vue';
import type { MsTableColumn } from '@/components/pure/ms-table/type';
@ -186,7 +177,7 @@
function disabledPool(record: any) {
openModal({
type: 'warning',
title: t('system.resourcePool.disablePoolTip', { name: record.name }),
title: t('system.resourcePool.disablePoolTip', { name: characterLimit(record.name) }),
content: t('system.resourcePool.disablePoolContent'),
okText: t('system.resourcePool.disablePoolConfirm'),
cancelText: t('system.resourcePool.disablePoolCancel'),
@ -223,7 +214,7 @@
function deletePool(record: any) {
openModal({
type: 'warning',
title: t('system.resourcePool.deletePoolTip', { name: record.name }),
title: t('system.resourcePool.deletePoolTip', { name: characterLimit(record.name) }),
content: t('system.resourcePool.deletePoolContentUsed'),
okText: t('system.resourcePool.deletePoolConfirm'),
cancelText: t('system.resourcePool.deletePoolCancel'),

36
frontend/src/views/setting/system/user/index.vue
View File

@ -48,14 +48,14 @@
<a-tag
v-for="org of record.userRoleList.slice(0, 2)"
:key="org.id"
class="mr-[4px] border-[rgb(var(--primary-5))] bg-transparent !text-[rgb(var(--primary-5))]"
:class="['mr-[4px]', 'bg-transparent', record.enable ? 'enableTag' : 'disableTag']"
bordered
>
{{ org.name }}
</a-tag>
<a-tag
v-show="record.organizationList.length > 2"
class="mr-[4px] border-[rgb(var(--primary-5))] bg-transparent !text-[rgb(var(--primary-5))]"
:class="['mr-[4px]', 'bg-transparent', record.enable ? 'enableTag' : 'disableTag']"
bordered
>
+{{ record.organizationList.length - 2 }}
@ -63,16 +63,6 @@
</div>
</a-tooltip>
</template>
<template #enable="{ record }">
<div v-if="record.enable" class="flex items-center">
<icon-check-circle-fill class="mr-[2px] text-[rgb(var(--success-6))]" />
{{ t('system.user.tableEnable') }}
</div>
<div v-else class="flex items-center text-[var(--color-text-4)]">
<icon-stop class="mr-[2px]" />
{{ t('system.user.tableDisable') }}
</div>
</template>
<template #action="{ record }">
<template v-if="!record.enable">
<MsButton @click="enableUser(record)">{{ t('system.user.enable') }}</MsButton>
@ -243,13 +233,14 @@
import MsUpload from '@/components/pure/ms-upload/index.vue';
import { TableKeyEnum } from '@/enums/tableEnum';
import { useTableStore } from '@/store';
import MsCard from '@/components/pure/ms-card/index.vue';
import { characterLimit } from '@/utils';
import type { FormInstance, ValidatedError, FileItem } from '@arco-design/web-vue';
import type { MsTableColumn, BatchActionParams } from '@/components/pure/ms-table/type';
import type { ActionsItem } from '@/components/pure/ms-table-more-action/types';
import type { SimpleUserInfo, SystemRole, UserListItem } from '@/models/setting/user';
import type { FormItemModel, MsBatchFormInstance } from '@/components/bussiness/ms-batch-form/types';
import MsCard from '@/components/pure/ms-card/index.vue';
const { t } = useI18n();
@ -326,7 +317,7 @@
* 重置密码
*/
function resetPassword(record: any, isbatch?: boolean) {
let title = t('system.user.resetPswTip', { name: record?.name });
let title = t('system.user.resetPswTip', { name: characterLimit(record?.name) });
let userIdList = [record?.id];
if (isbatch) {
title = t('system.user.batchResetPswTip', { count: tableSelected.value.length });
@ -357,7 +348,7 @@
* 禁用用户
*/
function disabledUser(record: any, isbatch?: boolean) {
let title = t('system.user.disableUserTip', { name: record?.name });
let title = t('system.user.disableUserTip', { name: characterLimit(record?.name) });
let userIdList = [record?.id];
if (isbatch) {
title = t('system.user.batchDisableUserTip', { count: tableSelected.value.length });
@ -402,7 +393,7 @@
* 启用用户
*/
function enableUser(record: any, isbatch?: boolean) {
let title = t('system.user.enableUserTip', { name: record?.name });
let title = t('system.user.enableUserTip', { name: characterLimit(record?.name) });
let userIdList = [record?.id];
if (isbatch) {
title = t('system.user.batchEnableUserTip', { count: tableSelected.value.length });
@ -444,7 +435,7 @@
* 删除用户
*/
function deleteUser(record: any, isbatch?: boolean) {
let title = t('system.user.deleteUserTip', { name: record?.name });
let title = t('system.user.deleteUserTip', { name: characterLimit(record?.name) });
let userIdList = [record?.id];
if (isbatch) {
title = t('system.user.batchDeleteUserTip', { count: tableSelected.value.length });
@ -936,4 +927,13 @@
}
</script>
<style lang="less" scoped></style>
<style lang="less" scoped>
.disableTag {
border-color: rgb(var(--primary-3));
color: rgb(var(--primary-3));
}
.enableTag {
border-color: rgb(var(--primary-5));
color: rgb(var(--primary-5));
}
</style>

3
frontend/src/views/setting/system/usergroup/components/index.vue
View File

@ -71,6 +71,7 @@
import popconfirm from './popconfirm.vue';
import useUserGroupStore from '@/store/modules/setting/usergroup';
import { getUserGroupList, updateOrAddUserGroup, deleteUserGroup } from '@/api/modules/setting/usergroup';
import { characterLimit } from '@/utils';
const { t } = useI18n();
@ -156,7 +157,7 @@
} else {
openModal({
type: 'warning',
title: t('system.userGroup.isDeleteUserGroup', { name: store.currentName }),
title: t('system.userGroup.isDeleteUserGroup', { name: characterLimit(store.currentName) }),
content: t('system.userGroup.beforeDeleteUserGroup'),
okText: t('system.userGroup.confirmDelete'),
cancelText: t('system.userGroup.cancel'),