manager/orion-visor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🔨 统一前端卡片风格.

Browse Source
This commit is contained in:
lijiahangmax
2025-10-07 14:27:19 +08:00
parent 2103698417
commit 773d95207f
18 changed files with 47 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
orion-visor-ui/src/assets/style/arco-extends.less
View File

@@ -95,7 +95,7 @@
// 标准卡片
.general-card {
border-radius: 4px;
border-radius: 8px;
border: none;
& > .arco-card-header {

52
orion-visor-ui/src/assets/style/global.less
View File

@@ -14,58 +14,6 @@ body {
-webkit-font-smoothing: antialiased;
}
// -- echarts
.echarts-tooltip-diy {
background: linear-gradient(304.17deg,
rgba(253, 254, 255, 0.6) -6.04%,
rgba(244, 247, 252, 0.6) 85.2%) !important;
border: none !important;
backdrop-filter: blur(10px) !important;
/* Note: backdrop-filter has minimal browser support */
border-radius: 6px !important;
.content-panel {
display: flex;
justify-content: space-between;
padding: 0 9px;
background: rgba(255, 255, 255, 0.8);
width: 164px;
height: 32px;
line-height: 32px;
box-shadow: 6px 0 20px rgba(34, 87, 188, 0.1);
border-radius: 4px;
margin-bottom: 4px;
}
.tooltip-title {
margin: 0 0 10px 0;
}
p {
margin: 0;
}
.tooltip-title,
.tooltip-value {
font-size: 13px;
line-height: 15px;
display: flex;
align-items: center;
text-align: right;
color: #1D2129;
font-weight: bold;
}
.tooltip-item-icon {
display: inline-block;
margin-right: 8px;
width: 10px;
height: 10px;
border-radius: 50%;
}
}
// flex
.flex-center {
display: flex;

6
orion-visor-ui/src/assets/style/layout.less
View File

@@ -162,8 +162,8 @@
height: 100%;
display: flex;
flex-direction: column;
border-radius: 4px;
border: 1px solid var(--color-neutral-3);
border-radius: 8px;
//border: 1px solid var(--color-neutral-3);
transition-property: all;
& > .arco-card-header {
@@ -230,7 +230,7 @@
// -- card
.simple-card {
background: var(--color-bg-2);
border-radius: 4px;
border-radius: 8px;
}
// -- doption

24
orion-visor-ui/src/components/exec/log/panel/exec-host.vue
View File

@@ -27,7 +27,19 @@
</div>
<!-- 状态 -->
<div class="exec-host-item-status">
<a-tag :color="getDictValue(execHostStatusKey, item.status, 'execColor')">
<!-- 执行结果 -->
<a-tag v-if="item.exitCode || item.exitCode === 0"
class="exit-code-tag"
title="exitCode"
:color="item.exitCode === 0 ? 'rgb(var(--arcoblue-4))' : 'rgb(var(--orangered-4))'">
<template #icon>
<icon-check v-if="item.exitCode === 0" />
<icon-exclamation v-else />
</template>
<span class="exit-code-value">{{ item.exitCode }}</span>
</a-tag>
<!-- 执行状态 -->
<a-tag v-else :color="getDictValue(execHostStatusKey, item.status, 'execColor')">
{{ getDictValue(execHostStatusKey, item.status) }}
</a-tag>
</div>
@@ -141,8 +153,16 @@
&-status {
display: flex;
justify-content: flex-end;
}
gap: 8px;
:deep(.exit-code-tag .arco-tag-icon) {
color: #FFFFFF;
}
.exit-code-value {
font-weight: 600;
}
}
}
</style>

2
orion-visor-ui/src/components/exec/log/panel/log-item.vue
View File

@@ -15,7 +15,7 @@
<!-- exitCode -->
<a-tag v-if="host.exitCode || host.exitCode === 0"
:color="host.exitCode === 0 ? 'arcoblue' : 'orangered'"
title="exit code">
title="exitCode">
<template #icon>
<icon-check v-if="host.exitCode === 0" />
<icon-exclamation v-else />

2
orion-visor-ui/src/components/view/card-list/components/card-header.vue
View File

@@ -179,7 +179,7 @@
&-wrapper {
background: var(--color-bg-2);
padding: 0 12px;
border-radius: 4px;
border-radius: 8px;
.card-list-info {
height: var(--header-info-height);

4
orion-visor-ui/src/utils/is.ts
View File

@@ -12,6 +12,10 @@ export function isString(obj: any): obj is string {
return opt.call(obj) === '[object String]';
}
export function isBoolean(obj: any): obj is boolean {
return opt.call(obj) === '[object Boolean]';
}
export function isNumber(obj: any): obj is number {
return opt.call(obj) === '[object Number]' && obj === obj; // eslint-disable-line
}

2
orion-visor-ui/src/views/dashboard/workplace/index.vue
View File

@@ -98,7 +98,7 @@
:deep(.card) {
padding: 16px 20px;
border-radius: 4px;
border-radius: 8px;
background-color: var(--color-bg-2);
&-title {

2
orion-visor-ui/src/views/exec/batch-upload/components/upload-panel.vue
View File

@@ -301,7 +301,7 @@
.panel-item {
height: 100%;
padding: 16px;
border-radius: 4px;
border-radius: 8px;
margin-right: 16px;
position: relative;
background: var(--color-bg-2);

2
orion-visor-ui/src/views/exec/exec-command/components/exec-command-panel.vue
View File

@@ -295,7 +295,7 @@
.exec-form-container, .exec-command-container, .exec-history-container {
background: var(--color-bg-2);
border-radius: 4px;
border-radius: 8px;
height: 100%;
padding: 16px;
position: relative;

4
orion-visor-ui/src/views/monitor/alarm-event/components/alarm-event-table-base.vue
View File

@@ -229,8 +229,8 @@
// 获取指标名称
const getMetricsField = (metricsId: number, field: string) => {
return (monitorMetrics as Array<MetricsQueryResponse>).find(m => m.id === metricsId)?.[field];
};
return (monitorMetrics as Array<MetricsQueryResponse> || []).find(m => m.id === metricsId)?.[field];
};
// 提取标签
const extraTags = (record: AlarmEventQueryResponse) => {

2
orion-visor-ui/src/views/monitor/alarm-event/components/alarm-event-table.vue
View File

@@ -48,7 +48,7 @@
allow-clear />
</a-form-item>
<!-- 数据集 -->
<a-form-item field="metricsId" label="数据集">
<a-form-item field="metricsMeasurement" label="数据集">
<a-select v-model="formModel.metricsMeasurement"
:options="toOptions(MetricsMeasurementKey)"
placeholder="数据集"

4
orion-visor-ui/src/views/monitor/alarm-policy/components/alarm-policy-form-modal.vue
View File

@@ -30,8 +30,8 @@
placeholder="请输入策略描述"
allow-clear />
</a-form-item>
<!-- 通知模板 -->
<a-form-item field="notifyIdList" label="通知模板">
<!-- 通知渠道 -->
<a-form-item field="notifyIdList" label="通知渠道">
<notify-template-selector v-model="formModel.notifyIdList"
biz-type="ALARM"
multiple

2
orion-visor-ui/src/views/monitor/alarm-rule/components/alarm-rule-table.vue
View File

@@ -203,7 +203,7 @@
// 获取指标名称
const getMetricsField = (metricsId: number, field: string) => {
return (monitorMetrics as Array<MetricsQueryResponse>).find(m => m.id === metricsId)?.[field];
return (monitorMetrics as Array<MetricsQueryResponse> || []).find(m => m.id === metricsId)?.[field];
};
// 切换规则开关

2
orion-visor-ui/src/views/monitor/monitor-detail/compoments/alarm-event-tab.vue
View File

@@ -41,7 +41,7 @@
allow-clear />
</a-form-item>
<!-- 数据集 -->
<a-form-item field="metricsId" label="数据集">
<a-form-item field="metricsMeasurement" label="数据集">
<a-select v-model="formModel.metricsMeasurement"
:options="toOptions(MetricsMeasurementKey)"
placeholder="数据集"

3
orion-visor-ui/src/views/system/dict-value/components/dict-value-form-modal.vue
View File

@@ -177,6 +177,9 @@
if (type === ValueType.BOOLEAN) {
extraValue.value[nameKey] = false;
continue;
} else if (type === ValueType.STRING) {
extraValue.value[nameKey] = '';
continue;
}
formRef.value.setFields({
[nameKey]: {

2
orion-visor-ui/src/views/system/setting/index.vue
View File

@@ -90,7 +90,7 @@
padding: 16px;
display: flex;
flex-direction: column;
border-radius: 4px;
border-radius: 8px;
}
:deep(.arco-tabs-nav-tab-list) {

2
orion-visor-ui/src/views/user/info/index.vue
View File

@@ -117,7 +117,7 @@
padding: 16px;
display: flex;
flex-direction: column;
border-radius: 4px;
border-radius: 8px;
}
:deep(.arco-tabs-nav-tab-list) {