修改卡片列表样式.

This commit is contained in:
lijiahang
2023-10-18 10:35:22 +08:00
parent f13395f351
commit 9a05b303bd
19 changed files with 124 additions and 92 deletions

View File

@@ -7,29 +7,26 @@ package com.orion.ops.framework.common.constant;
* @version 1.0.0
* @since 2023/6/23 18:49
*/
public class Const implements com.orion.lang.constant.Const {
public interface Const extends com.orion.lang.constant.Const, ConstField {
private Const() {
}
Integer NOT_DELETE = 0;
public static final Integer NOT_DELETE = 0;
Integer IS_DELETED = 1;
public static final Integer IS_DELETED = 1;
int BEARER_PREFIX_LEN = 7;
public static final int BEARER_PREFIX_LEN = 7;
int MD5_LEN = 32;
public static final int MD5_LEN = 32;
String UNKNOWN = "未知";
public static final String UNKNOWN = "未知";
String INTRANET_IP = "内网IP";
public static final String INTRANET_IP = "内网IP";
Long ROOT_MENU_ID = 0L;
public static final Long ROOT_MENU_ID = 0L;
Integer DEFAULT_SORT = 10;
public static final Integer DEFAULT_SORT = 10;
Long NONE_ID = -1L;
public static final Long NONE_ID = -1L;
public static final Integer DEFAULT_VERSION = 1;
Integer DEFAULT_VERSION = 1;
}

View File

@@ -0,0 +1,34 @@
package com.orion.ops.framework.common.constant;
/**
* 字段常量
*
* @author Jiahang Li
* @version 1.0.0
* @since 2023/10/17 12:44
*/
public interface ConstField {
String ID = "id";
String KEY = "key";
String CODE = "code";
String NAME = "name";
String TITLE = "title";
String VALUE = "value";
String LABEL = "label";
String TYPE = "type";
String COLOR = "color";
String STATUS = "status";
String REL_ID = "relId";
}

View File

@@ -1,5 +1,7 @@
package com.orion.ops.framework.biz.operator.log.core.constant;
import com.orion.ops.framework.common.constant.ConstField;
/**
* 操作日志常量
*
@@ -7,32 +9,12 @@ package com.orion.ops.framework.biz.operator.log.core.constant;
* @version 1.0.0
* @since 2023/10/10 19:00
*/
public interface OperatorLogKeys {
String ID = "id";
public interface OperatorLogKeys extends ConstField {
String ID_LIST = "idList";
String KEY = "key";
String CODE = "code";
String NAME = "name";
String USERNAME = "username";
String TITLE = "title";
String VALUE = "value";
String LABEL = "label";
String TYPE = "type";
String STATUS = "status";
String STATUS_NAME = "statusName";
String REL_ID = "relId";
}

View File

@@ -65,16 +65,17 @@ public class CodeGenerator {
.build(),
Template.create("dict_key", "字典配置项", "dict")
.cache("dict:keys", "字典配置项")
.expire(1, TimeUnit.HOURS)
.expire(1, TimeUnit.DAYS)
.vue("system", "dict-key")
.enums("value_type")
.names("STRING", "NUMBER", "BOOLEAN", "COLOR")
.label("字符串", "", "布尔值", "颜色")
.names("STRING", "INTEGER", "DECIMAL", "BOOLEAN", "COLOR")
.label("字符串", "整数", "", "布尔值", "颜色")
.build(),
Template.create("dict_value", "字典配置值", "dict")
.cache("dict:value:{}", "字典配置值 ${key}")
.expire(1, TimeUnit.HOURS)
.expire(1, TimeUnit.DAYS)
.vue("system", "dict-value")
.enableRowSelection()
.build(),
};
// jdbc 配置 - 使用配置文件

View File

@@ -9,6 +9,7 @@ import com.orion.lang.utils.ansi.style.AnsiFont;
import com.orion.lang.utils.ansi.style.color.AnsiForeground;
import com.orion.lang.utils.awt.Clipboards;
import com.orion.lang.utils.reflect.Fields;
import com.orion.ops.framework.common.constant.Const;
import com.orion.ops.module.infra.enums.UserStatusEnum;
import java.util.List;
@@ -47,8 +48,8 @@ public class EnumGenerator {
MultiLinkedHashMap<String, String, Object> result = MultiLinkedHashMap.create();
for (Enum<?> e : constants) {
String name = e.name();
result.put(name, "value", valueFunction.apply((E) e));
result.put(name, "label", labelFunction.apply((E) e));
result.put(name, Const.VALUE, valueFunction.apply((E) e));
result.put(name, Const.LABEL, labelFunction.apply((E) e));
for (String field : fields) {
result.put(name, field, Fields.getFieldValue(e, field));
}

View File

@@ -466,9 +466,9 @@ public class VelocityTemplateEngine extends AbstractTemplateEngine {
enumInfo.put(name, field, value);
}
// 检查是否有 value
if (!meta.getFields().contains("value")) {
if (!meta.getFields().contains(Const.VALUE)) {
// 没有 value 用 name
enumInfo.put(name, "value", name);
enumInfo.put(name, Const.VALUE, name);
}
}
enumMap.put(tableField.getPropertyName(), new EnumMeta(meta.getClassName(), meta.getComment(), enumInfo));

View File

@@ -3,6 +3,7 @@ package com.orion.ops.launch.generator.template;
import com.orion.lang.utils.Enums;
import com.orion.lang.utils.collect.Lists;
import com.orion.lang.utils.reflect.Fields;
import com.orion.ops.framework.common.constant.Const;
import java.util.List;
import java.util.stream.Collectors;
@@ -113,7 +114,7 @@ public class EnumsTemplate extends VueTemplate {
* @return this
*/
public EnumsTemplate label(Object... labels) {
return this.values("label", labels);
return this.values(Const.LABEL, labels);
}
/**
@@ -124,7 +125,7 @@ public class EnumsTemplate extends VueTemplate {
* @return this
*/
public EnumsTemplate value(Object... values) {
return this.values("value", values);
return this.values(Const.VALUE, values);
}
/**
@@ -134,7 +135,7 @@ public class EnumsTemplate extends VueTemplate {
* @return this
*/
public EnumsTemplate color(Object... colors) {
return this.values("color", colors);
return this.values(Const.COLOR, colors);
}
/**
@@ -144,7 +145,7 @@ public class EnumsTemplate extends VueTemplate {
* @return this
*/
public EnumsTemplate status(Object... status) {
return this.values("status", status);
return this.values(Const.STATUS, status);
}
}

View File

@@ -2,7 +2,6 @@
<card-list v-model:searchValue="formModel.searchValue"
search-input-placeholder="输入xxx"
create-card-position="head"
:card-height="172"
:loading="loading"
:fieldConfig="fieldConfig"
:list="list"

View File

@@ -1,5 +1,5 @@
<template>
<a-drawer :visible="visible"
<a-drawer v-model:visible="visible"
:title="title"
:width="430"
:mask-closable="false"

View File

@@ -1,5 +1,5 @@
<template>
<a-modal :visible="visible"
<a-modal v-model:visible="visible"
body-class="modal-form"
title-align="start"
:title="title"

View File

@@ -67,7 +67,26 @@
}
.card-list-item {
height: 100%;
display: flex;
flex-direction: column;
border-radius: 4px;
border: 1px solid var(--color-neutral-3);
transition-property: all;
& > .arco-card-header {
padding: 16px 16px 8px 16px;
border: none;
.arco-card-header-title {
font-size: 15px;
}
}
& > .arco-card-body {
padding: 0 16px 16px 16px;
flex-grow: 1;
}
}
.card-list-item:hover {

View File

@@ -98,7 +98,8 @@
<a-spin class="card-list-layout-body" :loading="loading">
<!-- 卡片列表 -->
<a-row v-if="list.length !== 0"
:gutter="cardLayoutGutter">
:gutter="cardLayoutGutter"
align="stretch">
<!-- 添加卡片 -->
<a-col v-permission="addPermission"
v-if="createCardPosition === 'head'"
@@ -118,18 +119,17 @@
<a-dropdown trigger="contextMenu" alignPoint>
<!-- 卡片 -->
<a-card :class="[
'general-card',
'card-list-item',
item.disabled === true ? 'card-list-item-disabled' : undefined,
!!cardClass ? cardClass : undefined
]"
:style="{ height: `${cardHeight}px` }"
:body-style="{ height: 'calc(100% - 58px)' }"
'card-list-item',
item.disabled === true ? 'card-list-item-disabled' : undefined,
!!cardClass ? cardClass : undefined
]"
:style="{ height: cardHeight }"
:bordered="false"
:hoverable="true"
:body-style="cardBodyStyle"
@contextmenu.prevent="() => false"
@click="emits('click',item, index)"
@dblclick="emits('dblclick',item, index)">
@click="emits('click', item, index)"
@dblclick="emits('dblclick', item, index)">
<!-- 标题 -->
<template #title>
<slot name="title" :record="item" :index="index" :key="item[key]" />
@@ -188,6 +188,8 @@
<template v-else>
<slot name="card" :record="item" :index="index" :key="item[key]" />
</template>
<!-- 卡片底部 -->
<slot name="cardFooter" :record="item" :index="index" :key="item[key]" />
</a-card>
<!-- 右键菜单 -->
<template v-if="contextMenu" #content>
@@ -206,9 +208,7 @@
</a-row>
<!-- 空列表 -->
<template v-else>
<a-card class="general-card empty-list-card"
:style="{ height: `${cardHeight * 2 + 16}px` }"
:body-style="{ height: '100%' }">
<a-card class="general-card empty-list-card">
<a-empty class="empty-list-card-body" description="暂无数据" />
</a-card>
</template>
@@ -272,8 +272,12 @@
type: Object as PropType<CardFieldConfig>,
default: () => []
},
cardHeight: Number,
cardHeight: {
type: String,
default: () => '100%'
},
cardClass: String,
cardBodyStyle: Object,
contextMenu: {
type: Boolean,
default: () => true
@@ -297,7 +301,11 @@
},
createCardPosition: {
type: String as PropType<CardPosition>,
default: () => '暂无数据 点击此处进行创建'
default: () => false
},
addPermission: {
type: Array as PropType<String[]>,
default: () => []
},
cardLayoutGutter: {
type: [Number, Array] as PropType<Number> |
@@ -306,10 +314,6 @@
PropType<Array<ResponsiveValue>>,
default: () => [16, 16]
},
addPermission: {
type: Array as PropType<String[]>,
default: () => []
},
cardLayoutCols: {
type: Object as PropType<ColResponsiveValue>,
default: () => {
@@ -336,8 +340,8 @@
setup(props: { cardHeight: any; createCardDescription: any; }) {
return () => {
return h(compile(`
<a-card class="general-card card-list-item create-card"
:style="{ height: '${props.cardHeight}px' }"
<a-card class="card-list-item create-card"
:style="{ height: '${props.cardHeight}' }"
:body-style="{ height: '100%' }"
:bordered="false"
:hoverable="true">
@@ -480,32 +484,29 @@
.empty-list-card {
&-body {
height: 100%;
height: calc(100vh - @top-height - 140px);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0;
}
}
.fields-container {
height: 100%;
overflow-y: auto;
.field-label {
color: var(--color-text-3);
word-break: break-all;
white-space: pre-wrap;
padding-right: 8px;
font-size: 14px;
font-size: 12px;
font-weight: 500;
user-select: none;
}
.field-value {
color: var(--color-text-1);
color: var(--gray-8);
word-break: break-all;
white-space: pre-wrap;
padding-right: 8px;

View File

@@ -6,9 +6,9 @@
</template>
</a-button>
</div>
<a-drawer title="偏好设置"
<a-drawer v-model:visible="visible"
title="偏好设置"
:width="300"
:visible="visible"
:footer="false"
:unmount-on-close="true"
@cancel="() => setVisible(false)">

View File

@@ -1,8 +1,7 @@
<template>
<card-list v-model:searchValue="formModel.searchValue"
search-input-placeholder="输入id/名称/用户名"
search-input-placeholder="输入 id / 名称 / 用户名"
create-card-position="head"
:card-height="184"
:loading="loading"
:fieldConfig="fieldConfig"
:list="list"

View File

@@ -1,8 +1,7 @@
<template>
<card-list v-model:searchValue="formModel.searchValue"
search-input-placeholder="输入id/名称"
search-input-placeholder="输入 id / 名称"
create-card-position="head"
:card-height="148"
:loading="loading"
:fieldConfig="fieldConfig"
:list="list"

View File

@@ -1,6 +1,6 @@
<template>
<a-drawer class="drawer-body-padding-0"
:visible="visible"
<a-drawer v-model:visible="visible"
class="drawer-body-padding-0"
:title="title"
:width="470"
:mask-closable="false"

View File

@@ -1,8 +1,7 @@
<template>
<card-list v-model:searchValue="formModel.searchValue"
search-input-placeholder="输入id/名称/标签/地址"
search-input-placeholder="输入 id / 名称 / 编码 / 地址"
create-card-position="head"
:card-height="214"
:loading="loading"
:fieldConfig="fieldConfig"
:list="list"
@@ -32,7 +31,7 @@
</template>
<!-- 标签 -->
<template #tags="{ record }">
<a-space v-if="record.tags" wrap>
<a-space v-if="record.tags" wrap style="margin-bottom: -8px;">
<a-tag v-for="tag in record.tags"
:key="tag.id"
:color="dataColor(tag.name, tagColor)">

View File

@@ -1,7 +1,7 @@
<template>
<a-drawer class="drawer-body-padding-0"
<a-drawer v-model:visible="visible"
class="drawer-body-padding-0"
:width="420"
:visible="visible"
:esc-to-close="false"
:mask-closable="false"
:unmount-on-close="true"

View File

@@ -1,9 +1,9 @@
import { CardField, CardFieldConfig } from '@/types/card';
const fieldConfig = {
rowGap: '12px',
rowGap: '10px',
labelSpan: 8,
minHeight: '24px',
minHeight: '22px',
fields: [
{
label: 'id',