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-07-19 11:32:39 +08:00 committed by 刘瑞斌
parent 025965b4ee
commit aaf949113e
4 changed files with 52 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,29 +1,31 @@
<template> <template>
<div class="relative h-full"> <a-spin style="display: block" :loading="props.loading">
<div class="card-header"> <div class="relative h-full">
<div class="back-btn" @click="back"><icon-arrow-left /></div> <div class="card-header">
<div class="text-[var(--color-text-000)]">{{ props.title }}</div> <div class="back-btn" @click="back"><icon-arrow-left /></div>
</div> <div class="text-[var(--color-text-000)]">{{ props.title }}</div>
<a-divider class="my-[16px]" /> </div>
<a-scrollbar class="mt-[16px]" style="overflow-y: auto; height: calc(100vh - 256px)"> <a-divider class="my-[16px]" />
<slot></slot> <a-scrollbar class="mt-[16px]" style="overflow-y: auto; height: calc(100vh - 256px)">
</a-scrollbar> <slot></slot>
<div </a-scrollbar>
v-if="!hideFooter" <div
class="relative z-10 m-[0_-24px_-24px] flex justify-end gap-[16px] p-[24px] shadow-[0_-1px_4px_rgba(2,2,2,0.1)]" v-if="!hideFooter"
> class="relative z-10 m-[0_-24px_-24px] flex justify-end gap-[16px] p-[24px] shadow-[0_-1px_4px_rgba(2,2,2,0.1)]"
<div class="ml-0 mr-auto"> >
<slot name="footerLeft"></slot> <div class="ml-0 mr-auto">
<slot name="footerLeft"></slot>
</div>
<slot name="footerRight">
<a-button type="secondary" @click="back">{{ t('mscard.defaultCancelText') }}</a-button>
<a-button v-if="!props.hideContinue" type="secondary" @click="emit('saveAndContinue')">
{{ t('mscard.defaultSaveAndContinueText') }}
</a-button>
<a-button type="primary" @click="emit('save')">{{ t('mscard.defaultConfirm') }}</a-button>
</slot>
</div> </div>
<slot name="footerRight">
<a-button type="secondary" @click="back">{{ t('mscard.defaultCancelText') }}</a-button>
<a-button v-if="!props.hideContinue" type="secondary" @click="emit('saveAndContinue')">
{{ t('mscard.defaultSaveAndContinueText') }}
</a-button>
<a-button type="primary" @click="emit('save')">{{ t('mscard.defaultConfirm') }}</a-button>
</slot>
</div> </div>
</div> </a-spin>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -36,6 +38,7 @@
hideContinue?: boolean; hideContinue?: boolean;
handleBack?: () => void; handleBack?: () => void;
hideFooter?: boolean; hideFooter?: boolean;
loading?: boolean;
}>(), }>(),
{ {
hideContinue: false, hideContinue: false,

21
frontend/src/components/pure/ms-description/index.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<a-descriptions :data="props.descriptions" size="large" :column="1"> <a-descriptions :data="(props.descriptions as unknown as DescData[])" size="large" :column="1">
<a-descriptions-item v-for="item of props.descriptions" :key="item.label" :label="item.label"> <a-descriptions-item v-for="item of props.descriptions" :key="item.label" :label="item.label">
<template v-if="item.isTag"> <template v-if="item.isTag">
<a-tag <a-tag
v-for="tag of item.value.split(',')" v-for="tag of item.value"
:key="tag" :key="tag"
color="var(--color-text-n8)" color="var(--color-text-n8)"
class="mr-[8px] font-normal !text-[var(--color-text-1)]" class="mr-[8px] font-normal !text-[var(--color-text-1)]"
@ -11,19 +11,32 @@
{{ tag }} {{ tag }}
</a-tag> </a-tag>
</template> </template>
<div v-else>{{ item.value }}</div> <a-button v-else-if="item.isButton" type="text" @click="handleItemClick(item)">{{ item.value }}</a-button>
<div v-else>
{{ item.value }}
</div>
</a-descriptions-item> </a-descriptions-item>
</a-descriptions> </a-descriptions>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import type { DescData } from '@arco-design/web-vue';
export interface Description { export interface Description {
label: string; label: string;
value: string; value: (string | number) | (string | number)[];
isTag?: boolean; isTag?: boolean;
isButton?: boolean;
onClick?: () => void;
} }
const props = defineProps<{ descriptions: Description[] }>(); const props = defineProps<{ descriptions: Description[] }>();
function handleItemClick(item: Description) {
if (typeof item.onClick === 'function') {
item.onClick();
}
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

3
frontend/src/components/pure/ms-drawer/index.vue
View File

@ -7,6 +7,7 @@
:class="props.mask ? '' : 'ms-drawer-no-mask'" :class="props.mask ? '' : 'ms-drawer-no-mask'"
@ok="handleOk" @ok="handleOk"
@cancel="handleCancel" @cancel="handleCancel"
@close="handleCancel"
> >
<template #title> <template #title>
<slot name="title"> <slot name="title">
@ -37,11 +38,13 @@
titleTagColor?: string; titleTagColor?: string;
descriptions?: Description[]; descriptions?: Description[];
footer?: boolean; footer?: boolean;
mask?: boolean;
[key: string]: any; [key: string]: any;
} }
const props = withDefaults(defineProps<DrawerProps>(), { const props = withDefaults(defineProps<DrawerProps>(), {
footer: true, footer: true,
mask: true,
}); });
const emit = defineEmits(['update:visible']); const emit = defineEmits(['update:visible']);

8
frontend/src/components/pure/navbar/index.vue
View File

@ -198,8 +198,12 @@
const projectList: Ref<ProjectListItem[]> = ref([]); const projectList: Ref<ProjectListItem[]> = ref([]);
onBeforeMount(async () => { onBeforeMount(async () => {
const res = await getProjectList(appStore.getCurrentOrgId); try {
projectList.value = res; const res = await getProjectList(appStore.getCurrentOrgId);
projectList.value = res;
} catch (error) {
console.log(error);
}
}); });
const showProjectSelect = computed(() => { const showProjectSelect = computed(() => {