@ditari/bsui 5.1.23 → 5.1.25
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/card/Card.cjs +8 -2
- package/dist/cjs/components/card/Card.cjs.map +1 -1
- package/dist/cjs/components/card/Card.d.ts +11 -1
- package/dist/cjs/components/card/style.cjs +20 -8
- package/dist/cjs/components/card/style.cjs.map +1 -1
- package/dist/cjs/components/layout/Show.cjs +30 -6
- package/dist/cjs/components/layout/Show.cjs.map +1 -1
- package/dist/cjs/components/layout/Show.d.ts +9 -0
- package/dist/cjs/components/layout/components/layout/HeaderLayout.vue2.cjs +1 -1
- package/dist/cjs/components/layout/components/layout/HeaderLayout.vue2.cjs.map +1 -1
- package/dist/cjs/components/table/Table.cjs +40 -9
- package/dist/cjs/components/table/Table.cjs.map +1 -1
- package/dist/cjs/components/table-form/TableFormItem.cjs +18 -7
- package/dist/cjs/components/table-form/TableFormItem.cjs.map +1 -1
- package/dist/cjs/components/table-form/style.cjs +82 -50
- package/dist/cjs/components/table-form/style.cjs.map +1 -1
- package/dist/cjs/components/table-form/style.d.ts +0 -3
- package/dist/esm/components/card/Card.d.ts +11 -1
- package/dist/esm/components/card/Card.mjs +8 -2
- package/dist/esm/components/card/Card.mjs.map +1 -1
- package/dist/esm/components/card/style.mjs +20 -8
- package/dist/esm/components/card/style.mjs.map +1 -1
- package/dist/esm/components/layout/Show.d.ts +9 -0
- package/dist/esm/components/layout/Show.mjs +30 -6
- package/dist/esm/components/layout/Show.mjs.map +1 -1
- package/dist/esm/components/layout/components/layout/HeaderLayout.vue2.mjs +1 -1
- package/dist/esm/components/layout/components/layout/HeaderLayout.vue2.mjs.map +1 -1
- package/dist/esm/components/table/Table.mjs +40 -9
- package/dist/esm/components/table/Table.mjs.map +1 -1
- package/dist/esm/components/table-form/TableFormItem.mjs +18 -7
- package/dist/esm/components/table-form/TableFormItem.mjs.map +1 -1
- package/dist/esm/components/table-form/style.d.ts +0 -3
- package/dist/esm/components/table-form/style.mjs +82 -50
- package/dist/esm/components/table-form/style.mjs.map +1 -1
- package/dist/types/components/card/Card.d.ts +11 -1
- package/dist/types/components/card/Card.d.ts.map +1 -1
- package/dist/types/components/card/style.d.ts.map +1 -1
- package/dist/types/components/layout/Show.d.ts +9 -0
- package/dist/types/components/layout/Show.d.ts.map +1 -1
- package/dist/types/components/table/Table.d.ts.map +1 -1
- package/dist/types/components/table-form/TableFormItem.d.ts.map +1 -1
- package/dist/types/components/table-form/style.d.ts +0 -3
- package/dist/types/components/table-form/style.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -55,7 +55,6 @@ const _TableFormItem = /* @__PURE__ */ vue.defineComponent({
|
|
|
55
55
|
const modelState = vue.computed(() => formContext == null ? void 0 : formContext.model.value);
|
|
56
56
|
const styles = style.useFormItemStyle(stylesConfig.value, token);
|
|
57
57
|
const colSpan = vue.computed(() => {
|
|
58
|
-
console.log(formContext == null ? void 0 : formContext.span.value);
|
|
59
58
|
return props.span || 24;
|
|
60
59
|
});
|
|
61
60
|
const fieldValue = vue.computed(() => {
|
|
@@ -84,14 +83,26 @@ const _TableFormItem = /* @__PURE__ */ vue.defineComponent({
|
|
|
84
83
|
const renderContent = () => {
|
|
85
84
|
var _a;
|
|
86
85
|
const colCls = getPrefixCls("content");
|
|
86
|
+
const rawChildren = slots.default ? slots.default() : [];
|
|
87
|
+
const hasComponent = rawChildren.some((v) => typeof v.type === "object");
|
|
88
|
+
let content;
|
|
89
|
+
let useDisplayWrapper = false;
|
|
87
90
|
if (isReadonly.value) {
|
|
88
|
-
|
|
89
|
-
"class":
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
91
|
+
content = vue.createVNode("span", {
|
|
92
|
+
"class": styles.textWrapperClass,
|
|
93
|
+
"title": String((_a = fieldValue.value) != null ? _a : "")
|
|
94
|
+
}, [fieldValue.value]);
|
|
95
|
+
useDisplayWrapper = true;
|
|
96
|
+
} else if (!hasComponent) {
|
|
97
|
+
content = rawChildren;
|
|
98
|
+
useDisplayWrapper = true;
|
|
99
|
+
} else {
|
|
100
|
+
content = rawChildren;
|
|
101
|
+
useDisplayWrapper = false;
|
|
93
102
|
}
|
|
94
|
-
return
|
|
103
|
+
return useDisplayWrapper ? vue.createVNode("div", {
|
|
104
|
+
"class": css.cx(styles.valueDisplayClass, colCls)
|
|
105
|
+
}, [content]) : content;
|
|
95
106
|
};
|
|
96
107
|
return () => {
|
|
97
108
|
let _slot;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableFormItem.cjs","sources":["../../../../src/components/table-form/TableFormItem.tsx"],"sourcesContent":["import { computed, defineComponent, inject } from \"vue\";\r\nimport { Col, FormItem } from \"ant-design-vue\";\r\n\r\nimport { tableFormItemProps } from \"./interface\";\r\nimport { useFormItemStyle } from \"./style\";\r\nimport {\r\n FormContextKey,\r\n TableFormContext\r\n} from \"./TableForm\";\r\nimport { useDicStore } from \"@ditari/store\";\r\nimport { cx } from \"@emotion/css\";\r\n\r\nimport {\r\n useAntdToken,\r\n useDesign\r\n} from \"../../hooks/useDesign\";\r\n\r\nimport { withInstall } from \"../../utils/withInstall\";\r\n\r\n/**\r\n * 辅助函数:根据路径数组和对象获取深层值\r\n * @param obj 数据对象\r\n * @param pathName 字段路径,例如 'user.name'\r\n */\r\nconst getDeepValue = (\r\n obj: Record<string, unknown>,\r\n pathName: string\r\n): unknown => {\r\n if (!obj || !pathName) {\r\n return undefined;\r\n }\r\n\r\n // 将 'user.name' 转换为 ['user', 'name']\r\n const path = pathName.split(\".\");\r\n let current: unknown = obj;\r\n\r\n for (const segment of path) {\r\n // 使用类型守卫和断言来安全地访问嵌套属性\r\n if (\r\n current &&\r\n typeof current === \"object\" &&\r\n segment in (current as Record<string, unknown>)\r\n ) {\r\n current = (current as Record<string, unknown>)[\r\n segment\r\n ];\r\n } else {\r\n return undefined;\r\n }\r\n }\r\n return current;\r\n};\r\n\r\nconst _TableFormItem = defineComponent({\r\n name: \"DTableFormItem\",\r\n props: tableFormItemProps,\r\n setup(props, { slots, attrs }) {\r\n const formContext = inject<TableFormContext | null>(\r\n FormContextKey,\r\n null\r\n );\r\n const { getPrefixCls } = useDesign(\r\n \"table-form-item-col\"\r\n );\r\n const token = useAntdToken();\r\n const { getDicTextByValue } = useDicStore();\r\n\r\n if (!formContext) {\r\n console.error(\r\n \"DTableFormItem must be used inside a DTableForm component.\"\r\n );\r\n }\r\n\r\n // ⭐️ 从 Context 获取只读状态\r\n const isReadonly = computed(\r\n () => formContext?.isReadonly.value ?? false\r\n );\r\n const stylesConfig = computed(\r\n () => formContext?.stylesConfig.value\r\n );\r\n const modelState = computed(\r\n () => formContext?.model.value\r\n );\r\n const styles = useFormItemStyle(\r\n stylesConfig.value!,\r\n token\r\n );\r\n\r\n // ⭐️ 1. 获取并计算 Col 的 span 值\r\n const colSpan = computed(() => {\r\n console.log(formContext?.span.value);\r\n // 如果成功注入上下文,则使用父组件计算的 span\r\n // 否则默认使用 24 (占满一行,安全回退)\r\n return props.span || 24;\r\n });\r\n\r\n // ⭐️ 2. 计算当前 FormItem 绑定的值\r\n const fieldValue = computed(() => {\r\n const formatFn = props.format;\r\n const dicName = props.dicName;\r\n\r\n // 使用 Record<string, unknown> 替换 any\r\n const model = modelState.value as Record<\r\n string,\r\n unknown\r\n >;\r\n const name = attrs.name as string;\r\n\r\n // 确保 model 存在且 name 存在\r\n if (!model || !name) {\r\n return \"\";\r\n }\r\n\r\n // 使用辅助函数获取深层嵌套的值\r\n let value = getDeepValue(model, name);\r\n\r\n // 如果值是 undefined, null 或空字符串,显示一个占位符或空\r\n if (\r\n value === undefined ||\r\n value === null ||\r\n value === \"\"\r\n ) {\r\n return \"-\";\r\n }\r\n\r\n if (formatFn) {\r\n return formatFn?.(value, name);\r\n }\r\n if (dicName && !Array.isArray(value)) {\r\n return getDicTextByValue(dicName, value as string);\r\n }\r\n\r\n // 简单处理数组:如果是数组,转换为逗号分隔的字符串\r\n if (Array.isArray(value)) {\r\n // value 是 Array<unknown>,.join() 会将其转换为字符串\r\n value = value.join(\", \");\r\n }\r\n\r\n // 转换为字符串进行显示\r\n return String(value);\r\n });\r\n\r\n // ⭐️ 3. 条件渲染内容\r\n const renderContent = () => {\r\n const colCls = getPrefixCls(\"content\");\r\n if (isReadonly.value) {\r\n // 只读模式:显示值\r\n return (\r\n <div class={cx(styles.valueDisplayClass, colCls)}>\r\n <span class={styles.textWrapperClass}>\r\n {fieldValue.value}\r\n </span>\r\n </div>\r\n );\r\n }\r\n\r\n // 编辑模式:渲染默认插槽内容 (表单元素)\r\n return slots.default?.();\r\n };\r\n\r\n return () => {\r\n const rootCls = getPrefixCls();\r\n // ⭐️ 2. 将计算得到的 colSpan 应用到 Col 组件上\r\n return (\r\n <Col\r\n span={colSpan.value}\r\n class={cx(rootCls, styles.cellBorderStyle)}\r\n >\r\n {/* 在只读模式下,我们不需要 FormItem 来管理校验状态 */}\r\n <FormItem {...attrs}>{renderContent()}</FormItem>\r\n </Col>\r\n );\r\n };\r\n }\r\n});\r\n\r\nexport const TableFormItem = withInstall(_TableFormItem);\r\n"],"names":["_isSlot","s","Object","prototype","toString","call","_isVNode","getDeepValue","obj","pathName","undefined","path","split","current","segment","_TableFormItem","defineComponent","name","props","tableFormItemProps","setup","slots","attrs","formContext","inject","FormContextKey","getPrefixCls","useDesign","token","useAntdToken","getDicTextByValue","useDicStore","console","error","isReadonly","computed","value","stylesConfig","modelState","model","styles","useFormItemStyle","colSpan","log","span","fieldValue","formatFn","format","dicName","Array","isArray","join","String","renderContent","colCls","_createVNode","cx","valueDisplayClass","textWrapperClass","default","_slot","rootCls","Col","cellBorderStyle","FormItem","TableFormItem","withInstall"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TableFormItem.cjs","sources":["../../../../src/components/table-form/TableFormItem.tsx"],"sourcesContent":["import { computed, defineComponent, inject } from \"vue\";\r\nimport { Col, FormItem } from \"ant-design-vue\";\r\n\r\nimport { tableFormItemProps } from \"./interface\";\r\nimport { useFormItemStyle } from \"./style\";\r\nimport {\r\n FormContextKey,\r\n TableFormContext\r\n} from \"./TableForm\";\r\nimport { useDicStore } from \"@ditari/store\";\r\nimport { cx } from \"@emotion/css\";\r\n\r\nimport {\r\n useAntdToken,\r\n useDesign\r\n} from \"../../hooks/useDesign\";\r\n\r\nimport { withInstall } from \"../../utils/withInstall\";\r\n\r\n/**\r\n * 辅助函数:根据路径数组和对象获取深层值\r\n * @param obj 数据对象\r\n * @param pathName 字段路径,例如 'user.name'\r\n */\r\nconst getDeepValue = (\r\n obj: Record<string, unknown>,\r\n pathName: string\r\n): unknown => {\r\n if (!obj || !pathName) {\r\n return undefined;\r\n }\r\n\r\n // 将 'user.name' 转换为 ['user', 'name']\r\n const path = pathName.split(\".\");\r\n let current: unknown = obj;\r\n\r\n for (const segment of path) {\r\n // 使用类型守卫和断言来安全地访问嵌套属性\r\n if (\r\n current &&\r\n typeof current === \"object\" &&\r\n segment in (current as Record<string, unknown>)\r\n ) {\r\n current = (current as Record<string, unknown>)[\r\n segment\r\n ];\r\n } else {\r\n return undefined;\r\n }\r\n }\r\n return current;\r\n};\r\n\r\nconst _TableFormItem = defineComponent({\r\n name: \"DTableFormItem\",\r\n props: tableFormItemProps,\r\n setup(props, { slots, attrs }) {\r\n const formContext = inject<TableFormContext | null>(\r\n FormContextKey,\r\n null\r\n );\r\n const { getPrefixCls } = useDesign(\r\n \"table-form-item-col\"\r\n );\r\n const token = useAntdToken();\r\n const { getDicTextByValue } = useDicStore();\r\n\r\n if (!formContext) {\r\n console.error(\r\n \"DTableFormItem must be used inside a DTableForm component.\"\r\n );\r\n }\r\n\r\n // ⭐️ 从 Context 获取只读状态\r\n const isReadonly = computed(\r\n () => formContext?.isReadonly.value ?? false\r\n );\r\n const stylesConfig = computed(\r\n () => formContext?.stylesConfig.value\r\n );\r\n const modelState = computed(\r\n () => formContext?.model.value\r\n );\r\n const styles = useFormItemStyle(\r\n stylesConfig.value!,\r\n token\r\n );\r\n\r\n // ⭐️ 1. 获取并计算 Col 的 span 值\r\n const colSpan = computed(() => {\r\n // 如果成功注入上下文,则使用父组件计算的 span\r\n // 否则默认使用 24 (占满一行,安全回退)\r\n return props.span || 24;\r\n });\r\n\r\n // ⭐️ 2. 计算当前 FormItem 绑定的值\r\n const fieldValue = computed(() => {\r\n const formatFn = props.format;\r\n const dicName = props.dicName;\r\n\r\n // 使用 Record<string, unknown> 替换 any\r\n const model = modelState.value as Record<\r\n string,\r\n unknown\r\n >;\r\n const name = attrs.name as string;\r\n\r\n // 确保 model 存在且 name 存在\r\n if (!model || !name) {\r\n return \"\";\r\n }\r\n\r\n // 使用辅助函数获取深层嵌套的值\r\n let value = getDeepValue(model, name);\r\n\r\n // 如果值是 undefined, null 或空字符串,显示一个占位符或空\r\n if (\r\n value === undefined ||\r\n value === null ||\r\n value === \"\"\r\n ) {\r\n return \"-\";\r\n }\r\n\r\n if (formatFn) {\r\n return formatFn?.(value, name);\r\n }\r\n if (dicName && !Array.isArray(value)) {\r\n return getDicTextByValue(dicName, value as string);\r\n }\r\n\r\n // 简单处理数组:如果是数组,转换为逗号分隔的字符串\r\n if (Array.isArray(value)) {\r\n // value 是 Array<unknown>,.join() 会将其转换为字符串\r\n value = value.join(\", \");\r\n }\r\n\r\n // 转换为字符串进行显示\r\n return String(value);\r\n });\r\n\r\n const renderContent = () => {\r\n const colCls = getPrefixCls(\"content\");\r\n // 1. 先获取插槽内容并展平(处理 Fragment)\r\n const rawChildren = slots.default\r\n ? slots.default()\r\n : [];\r\n\r\n // 简单的判定:是否包含“真正”的组件节点\r\n // v.type 为 object 时通常是 defineComponent 定义的组件\r\n const hasComponent = rawChildren.some(\r\n v => typeof v.type === \"object\"\r\n );\r\n\r\n // 2. 确定最终显示的内容\r\n let content;\r\n let useDisplayWrapper = false;\r\n\r\n if (isReadonly.value) {\r\n // 只读模式:显示计算出的值\r\n content = (\r\n <span\r\n class={styles.textWrapperClass}\r\n title={String(fieldValue.value ?? \"\")}\r\n >\r\n {fieldValue.value}\r\n </span>\r\n );\r\n useDisplayWrapper = true;\r\n } else if (!hasComponent) {\r\n // 非只读,但没有组件(纯文本、span等):显示插槽内容\r\n content = rawChildren;\r\n useDisplayWrapper = true;\r\n } else {\r\n // 包含 Input 等组件:直接渲染插槽\r\n content = rawChildren;\r\n useDisplayWrapper = false;\r\n }\r\n\r\n // 3. 根据判定结果决定是否套用 padding 层\r\n return useDisplayWrapper ? (\r\n <div class={cx(styles.valueDisplayClass, colCls)}>\r\n {content}\r\n </div>\r\n ) : (\r\n content\r\n );\r\n };\r\n\r\n return () => {\r\n const rootCls = getPrefixCls();\r\n // ⭐️ 2. 将计算得到的 colSpan 应用到 Col 组件上\r\n return (\r\n <Col\r\n span={colSpan.value}\r\n class={cx(rootCls, styles.cellBorderStyle)}\r\n >\r\n {/* 在只读模式下,我们不需要 FormItem 来管理校验状态 */}\r\n <FormItem {...attrs}>{renderContent()}</FormItem>\r\n </Col>\r\n );\r\n };\r\n }\r\n});\r\n\r\nexport const TableFormItem = withInstall(_TableFormItem);\r\n"],"names":["_isSlot","s","Object","prototype","toString","call","_isVNode","getDeepValue","obj","pathName","undefined","path","split","current","segment","_TableFormItem","defineComponent","name","props","tableFormItemProps","setup","slots","attrs","formContext","inject","FormContextKey","getPrefixCls","useDesign","token","useAntdToken","getDicTextByValue","useDicStore","console","error","isReadonly","computed","value","stylesConfig","modelState","model","styles","useFormItemStyle","colSpan","span","fieldValue","formatFn","format","dicName","Array","isArray","join","String","renderContent","colCls","rawChildren","default","hasComponent","some","v","type","content","useDisplayWrapper","_createVNode","textWrapperClass","cx","valueDisplayClass","_slot","rootCls","Col","cellBorderStyle","FormItem","TableFormItem","withInstall"],"mappings":"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"}
|
|
@@ -10,111 +10,143 @@ const useFormItemStyle = (styles, _token) => {
|
|
|
10
10
|
borderColor,
|
|
11
11
|
focusBorderColor
|
|
12
12
|
} = styles;
|
|
13
|
-
const
|
|
14
|
-
const
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
}
|
|
13
|
+
const token = _token.value;
|
|
14
|
+
const horizontalPadding = `${token.paddingSM}px`;
|
|
15
|
+
const textColor = token.colorText;
|
|
16
|
+
const focusStyle = `
|
|
17
|
+
outline: 1px solid ${focusBorderColor} !important;
|
|
18
|
+
outline-offset: -1px !important;
|
|
19
|
+
z-index: 1;
|
|
20
|
+
position: relative;
|
|
21
|
+
`;
|
|
22
|
+
const errorStyle = `
|
|
23
|
+
outline: 1px solid ${token.colorError} !important;
|
|
24
|
+
outline-offset: -1px !important;
|
|
25
|
+
z-index: 1;
|
|
26
|
+
position: relative;
|
|
18
27
|
`;
|
|
19
28
|
return {
|
|
20
29
|
cellBorderStyle: css.css`
|
|
21
|
-
//min-height: ${rowHeight}px;
|
|
22
|
-
/* 现有单元格边框 */
|
|
23
30
|
border-right: 1px solid ${borderColor};
|
|
24
31
|
border-bottom: 1px solid ${borderColor};
|
|
32
|
+
overflow: hidden;
|
|
33
|
+
position: relative;
|
|
25
34
|
|
|
26
35
|
.ant-form-item {
|
|
27
|
-
height: 100%;
|
|
28
36
|
margin-bottom: 0 !important;
|
|
29
|
-
|
|
37
|
+
height: 100%;
|
|
30
38
|
.ant-form-item-row {
|
|
31
39
|
height: 100%;
|
|
32
40
|
|
|
33
41
|
.ant-form-item-label {
|
|
34
|
-
height: 100%;
|
|
42
|
+
//height: 100%;
|
|
35
43
|
border-right: 1px solid ${borderColor};
|
|
36
44
|
background-color: ${labelBgColor};
|
|
37
|
-
|
|
45
|
+
display: flex;
|
|
46
|
+
align-items: center;
|
|
47
|
+
justify-content: flex-end;
|
|
38
48
|
& > label {
|
|
39
|
-
height: ${rowHeight}px;
|
|
40
49
|
}
|
|
41
50
|
}
|
|
42
51
|
|
|
43
52
|
.ant-form-item-control-input {
|
|
44
|
-
height:
|
|
45
|
-
|
|
53
|
+
min-height: ${rowHeight}px;
|
|
46
54
|
.ant-form-item-control-input-content {
|
|
47
55
|
display: flex;
|
|
48
56
|
align-items: center;
|
|
49
57
|
height: 100%;
|
|
50
58
|
|
|
51
|
-
|
|
52
|
-
margin-left: 10px;
|
|
53
|
-
}
|
|
54
|
-
|
|
59
|
+
// 基础组件宽高
|
|
55
60
|
input,
|
|
56
61
|
.ant-picker,
|
|
57
62
|
.ant-select,
|
|
58
63
|
.ant-input-number,
|
|
59
|
-
.ant-
|
|
64
|
+
.ant-select-selector,
|
|
65
|
+
.ant-input-number-input-wrap,
|
|
66
|
+
.ant-mentions textarea {
|
|
60
67
|
width: 100%;
|
|
61
|
-
height:
|
|
68
|
+
height: ${rowHeight}px;
|
|
62
69
|
}
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
height: 100%;
|
|
70
|
+
|
|
71
|
+
.ant-mentions textarea {
|
|
72
|
+
line-height: ${rowHeight}px;
|
|
67
73
|
}
|
|
68
74
|
}
|
|
69
75
|
}
|
|
70
76
|
|
|
77
|
+
// ⭐️ 统一重置:移除 AntD 默认边框和阴影,设置直角
|
|
71
78
|
.ant-input,
|
|
72
79
|
.ant-select-selector,
|
|
73
80
|
.ant-input-number,
|
|
74
|
-
.ant-picker
|
|
75
|
-
|
|
76
|
-
border
|
|
81
|
+
.ant-picker,
|
|
82
|
+
.ant-mentions {
|
|
83
|
+
border: 0 !important;
|
|
84
|
+
box-shadow: none !important;
|
|
85
|
+
border-radius: 0 !important;
|
|
86
|
+
background: transparent !important;
|
|
87
|
+
transition: none !important;
|
|
88
|
+
}
|
|
77
89
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
90
|
+
// ⭐️ 只有在获取焦点时才添加边框(使用 outline)
|
|
91
|
+
// 1. 普通 Input
|
|
92
|
+
.ant-input:focus,
|
|
93
|
+
.ant-mentions textarea:focus {
|
|
94
|
+
${focusStyle}
|
|
95
|
+
}
|
|
96
|
+
// 2. Select (AntD 聚焦类在 selector 上)
|
|
97
|
+
.ant-select-focused .ant-select-selector {
|
|
98
|
+
${focusStyle}
|
|
99
|
+
}
|
|
100
|
+
// 3. DatePicker
|
|
101
|
+
.ant-picker-focused {
|
|
102
|
+
${focusStyle}
|
|
103
|
+
}
|
|
104
|
+
// 4. InputNumber (外层容器聚焦)
|
|
105
|
+
.ant-input-number-focused {
|
|
106
|
+
${focusStyle}
|
|
85
107
|
}
|
|
86
108
|
|
|
87
|
-
|
|
88
|
-
.ant-
|
|
89
|
-
|
|
109
|
+
// 修正 InputNumber 内部结构线
|
|
110
|
+
.ant-input-number-handler-wrap {
|
|
111
|
+
border-left: 0;
|
|
112
|
+
background: transparent;
|
|
90
113
|
}
|
|
91
114
|
|
|
92
|
-
|
|
93
|
-
|
|
115
|
+
// 文本居中处理
|
|
116
|
+
.ant-select-selector {
|
|
117
|
+
padding: 0 ${horizontalPadding} !important;
|
|
118
|
+
display: flex !important;
|
|
119
|
+
align-items: center !important;
|
|
120
|
+
}
|
|
121
|
+
.ant-input,
|
|
122
|
+
.ant-input-number-input,
|
|
123
|
+
.ant-mentions textarea {
|
|
124
|
+
padding: 0 ${horizontalPadding} !important;
|
|
94
125
|
}
|
|
95
126
|
}
|
|
96
127
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
128
|
+
// ⭐️ 错误状态的处理
|
|
129
|
+
&.ant-form-item-has-error {
|
|
130
|
+
.ant-input,
|
|
131
|
+
.ant-select-selector,
|
|
132
|
+
.ant-input-number,
|
|
133
|
+
.ant-picker {
|
|
134
|
+
${errorStyle}
|
|
135
|
+
}
|
|
102
136
|
}
|
|
103
137
|
}
|
|
104
138
|
`,
|
|
105
139
|
valueDisplayClass: css.css`
|
|
106
140
|
width: 100%;
|
|
107
|
-
height: 100%;
|
|
108
141
|
display: flex;
|
|
109
|
-
padding-left: 11px;
|
|
110
142
|
align-items: center;
|
|
143
|
+
padding-left: ${horizontalPadding};
|
|
144
|
+
color: ${textColor};
|
|
145
|
+
box-sizing: border-box;
|
|
111
146
|
`,
|
|
112
|
-
// 内部元素:实现文本溢出
|
|
113
147
|
textWrapperClass: css.css`
|
|
114
|
-
|
|
115
|
-
flex-grow: 1; /* 占据可用空间 */
|
|
148
|
+
flex-grow: 1;
|
|
116
149
|
min-width: 0;
|
|
117
|
-
|
|
118
150
|
white-space: nowrap;
|
|
119
151
|
overflow: hidden;
|
|
120
152
|
text-overflow: ellipsis;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.cjs","sources":["../../../../src/components/table-form/style.ts"],"sourcesContent":["import { ComputedRef } from \"vue\";\r\n\r\nimport { StylesConfig } from \"./interface\";\r\nimport { css } from \"@emotion/css\";\r\nimport type { GlobalToken } from \"ant-design-vue/es/theme/interface\";\r\n\r\
|
|
1
|
+
{"version":3,"file":"style.cjs","sources":["../../../../src/components/table-form/style.ts"],"sourcesContent":["import { ComputedRef } from \"vue\";\r\n\r\nimport { StylesConfig } from \"./interface\";\r\nimport { css } from \"@emotion/css\";\r\nimport type { GlobalToken } from \"ant-design-vue/es/theme/interface\";\r\n\r\nexport const useFormItemStyle = (\r\n styles: StylesConfig,\r\n _token: ComputedRef<GlobalToken>\r\n) => {\r\n const {\r\n rowHeight,\r\n labelBgColor,\r\n borderColor,\r\n focusBorderColor\r\n } = styles;\r\n const token = _token.value;\r\n\r\n const horizontalPadding = `${token.paddingSM}px`;\r\n const textColor = token.colorText;\r\n\r\n // ⭐️ 核心聚焦样式:使用 outline 确保覆盖在所有子组件(如加减按钮)之上\r\n const focusStyle = `\r\n outline: 1px solid ${focusBorderColor} !important;\r\n outline-offset: -1px !important;\r\n z-index: 1;\r\n position: relative;\r\n `;\r\n\r\n // 错误样式\r\n const errorStyle = `\r\n outline: 1px solid ${token.colorError} !important;\r\n outline-offset: -1px !important;\r\n z-index: 1;\r\n position: relative;\r\n `;\r\n\r\n return {\r\n cellBorderStyle: css`\r\n border-right: 1px solid ${borderColor};\r\n border-bottom: 1px solid ${borderColor};\r\n overflow: hidden;\r\n position: relative;\r\n\r\n .ant-form-item {\r\n margin-bottom: 0 !important;\r\n height: 100%;\r\n .ant-form-item-row {\r\n height: 100%;\r\n\r\n .ant-form-item-label {\r\n //height: 100%;\r\n border-right: 1px solid ${borderColor};\r\n background-color: ${labelBgColor};\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-end;\r\n & > label {\r\n }\r\n }\r\n\r\n .ant-form-item-control-input {\r\n min-height: ${rowHeight}px;\r\n .ant-form-item-control-input-content {\r\n display: flex;\r\n align-items: center;\r\n height: 100%;\r\n\r\n // 基础组件宽高\r\n input,\r\n .ant-picker,\r\n .ant-select,\r\n .ant-input-number,\r\n .ant-select-selector,\r\n .ant-input-number-input-wrap,\r\n .ant-mentions textarea {\r\n width: 100%;\r\n height: ${rowHeight}px;\r\n }\r\n\r\n .ant-mentions textarea {\r\n line-height: ${rowHeight}px;\r\n }\r\n }\r\n }\r\n\r\n // ⭐️ 统一重置:移除 AntD 默认边框和阴影,设置直角\r\n .ant-input,\r\n .ant-select-selector,\r\n .ant-input-number,\r\n .ant-picker,\r\n .ant-mentions {\r\n border: 0 !important;\r\n box-shadow: none !important;\r\n border-radius: 0 !important;\r\n background: transparent !important;\r\n transition: none !important;\r\n }\r\n\r\n // ⭐️ 只有在获取焦点时才添加边框(使用 outline)\r\n // 1. 普通 Input\r\n .ant-input:focus,\r\n .ant-mentions textarea:focus {\r\n ${focusStyle}\r\n }\r\n // 2. Select (AntD 聚焦类在 selector 上)\r\n .ant-select-focused .ant-select-selector {\r\n ${focusStyle}\r\n }\r\n // 3. DatePicker\r\n .ant-picker-focused {\r\n ${focusStyle}\r\n }\r\n // 4. InputNumber (外层容器聚焦)\r\n .ant-input-number-focused {\r\n ${focusStyle}\r\n }\r\n\r\n // 修正 InputNumber 内部结构线\r\n .ant-input-number-handler-wrap {\r\n border-left: 0;\r\n background: transparent;\r\n }\r\n\r\n // 文本居中处理\r\n .ant-select-selector {\r\n padding: 0 ${horizontalPadding} !important;\r\n display: flex !important;\r\n align-items: center !important;\r\n }\r\n .ant-input,\r\n .ant-input-number-input,\r\n .ant-mentions textarea {\r\n padding: 0 ${horizontalPadding} !important;\r\n }\r\n }\r\n\r\n // ⭐️ 错误状态的处理\r\n &.ant-form-item-has-error {\r\n .ant-input,\r\n .ant-select-selector,\r\n .ant-input-number,\r\n .ant-picker {\r\n ${errorStyle}\r\n }\r\n }\r\n }\r\n `,\r\n\r\n valueDisplayClass: css`\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n padding-left: ${horizontalPadding};\r\n color: ${textColor};\r\n box-sizing: border-box;\r\n `,\r\n\r\n textWrapperClass: css`\r\n flex-grow: 1;\r\n min-width: 0;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n `\r\n };\r\n};\r\n"],"names":["css"],"mappings":";;;;;AAMO,MAAM,gBAAA,GAAmB,CAC9B,MAAA,EACA,MAAA,KACG;AACH,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,GACF,GAAI,MAAA;AACJ,EAAA,MAAM,QAAQ,MAAA,CAAO,KAAA;AAErB,EAAA,MAAM,iBAAA,GAAoB,CAAA,EAAG,KAAA,CAAM,SAAS,CAAA,EAAA,CAAA;AAC5C,EAAA,MAAM,YAAY,KAAA,CAAM,SAAA;AAGxB,EAAA,MAAM,UAAA,GAAa;AAAA,uBAAA,EACI,gBAAgB,CAAA;AAAA;AAAA;AAAA;AAAA,EAAA,CAAA;AAOvC,EAAA,MAAM,UAAA,GAAa;AAAA,uBAAA,EACI,MAAM,UAAU,CAAA;AAAA;AAAA;AAAA;AAAA,EAAA,CAAA;AAMvC,EAAA,OAAO;AAAA,IACL,eAAA,EAAiBA,OAAA;AAAA,8BAAA,EACW,WAAW,CAAA;AAAA,+BAAA,EACV,WAAW,CAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA,oCAAA,EAYN,WAAW,CAAA;AAAA,8BAAA,EACjB,YAAY,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA,wBAAA,EASlB,SAAS,CAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAA,EAeT,SAAS,CAAA;AAAA;;AAAA;AAAA,6BAAA,EAIJ,SAAS,CAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA,YAAA,EAsB1B,UAAU;AAAA;AAAA;AAAA;AAAA,YAAA,EAIV,UAAU;AAAA;AAAA;AAAA;AAAA,YAAA,EAIV,UAAU;AAAA;AAAA;AAAA;AAAA,YAAA,EAIV,UAAU;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA,uBAAA,EAWC,iBAAiB,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAA,EAOjB,iBAAiB,CAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAA,EAU5B,UAAU;AAAA;AAAA;AAAA;AAAA,IAAA,CAAA;AAAA,IAMpB,iBAAA,EAAmBA,OAAA;AAAA;AAAA;AAAA;AAAA,oBAAA,EAID,iBAAiB,CAAA;AAAA,aAAA,EACxB,SAAS,CAAA;AAAA;AAAA,IAAA,CAAA;AAAA,IAIpB,gBAAA,EAAkBA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,GAOpB;AACF;;;;"}
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
import { ComputedRef } from "vue";
|
|
2
2
|
import { StylesConfig } from "./interface";
|
|
3
3
|
import type { GlobalToken } from "ant-design-vue/es/theme/interface";
|
|
4
|
-
/**
|
|
5
|
-
* 表单项样式
|
|
6
|
-
*/
|
|
7
4
|
export declare const useFormItemStyle: (styles: StylesConfig, _token: ComputedRef<GlobalToken>) => {
|
|
8
5
|
cellBorderStyle: string;
|
|
9
6
|
valueDisplayClass: string;
|
|
@@ -1,6 +1,16 @@
|
|
|
1
1
|
export declare const Card: import("../../utils/withInstall").SFCWithInstall<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
2
2
|
title: StringConstructor;
|
|
3
|
+
headerBordered: {
|
|
4
|
+
type: BooleanConstructor;
|
|
5
|
+
default: boolean;
|
|
6
|
+
};
|
|
3
7
|
}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
4
8
|
title: StringConstructor;
|
|
5
|
-
|
|
9
|
+
headerBordered: {
|
|
10
|
+
type: BooleanConstructor;
|
|
11
|
+
default: boolean;
|
|
12
|
+
};
|
|
13
|
+
}>> & Readonly<{}>, {
|
|
14
|
+
headerBordered: boolean;
|
|
15
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
|
|
6
16
|
//# sourceMappingURL=Card.d.ts.map
|
|
@@ -8,7 +8,11 @@ import { withInstall } from '../../utils/withInstall.mjs';
|
|
|
8
8
|
const _Card = /* @__PURE__ */ defineComponent({
|
|
9
9
|
name: "DCard",
|
|
10
10
|
props: {
|
|
11
|
-
title: String
|
|
11
|
+
title: String,
|
|
12
|
+
headerBordered: {
|
|
13
|
+
type: Boolean,
|
|
14
|
+
default: false
|
|
15
|
+
}
|
|
12
16
|
},
|
|
13
17
|
setup(props, {
|
|
14
18
|
slots
|
|
@@ -30,7 +34,9 @@ const _Card = /* @__PURE__ */ defineComponent({
|
|
|
30
34
|
return createVNode("div", {
|
|
31
35
|
"class": cx(rootCls, styles.container)
|
|
32
36
|
}, [createVNode("div", {
|
|
33
|
-
"class": cx(headerWrapperCls, styles.header
|
|
37
|
+
"class": cx(headerWrapperCls, styles.header, {
|
|
38
|
+
border: props.headerBordered
|
|
39
|
+
})
|
|
34
40
|
}, [createVNode("div", {
|
|
35
41
|
"class": cx(headerCls, styles.headerLeft)
|
|
36
42
|
}, [slots.icon && createVNode("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.mjs","sources":["../../../../src/components/card/Card.tsx"],"sourcesContent":["// components/card/index.tsx\r\nimport { defineComponent } from \"vue\";\r\n\r\nimport { useStyle } from \"./style\";\r\nimport { cx } from \"@emotion/css\"; // 引入 cx\r\n\r\nimport { useDesign } from \"../../hooks/useDesign\"; // 引入我们刚才写的 hook\r\n\r\nimport { withInstall } from \"../../utils/withInstall\";\r\n\r\nconst _Card = defineComponent({\r\n name: \"DCard\",\r\n props: {\r\n title: String\r\n },\r\n setup(props, { slots }) {\r\n // 初始化 Design Hook,传入组件名 'card'\r\n const { getPrefixCls } = useDesign(\"card\");\r\n\r\n // 初始化 Emotion 样式\r\n const styles = useStyle();\r\n\r\n return () => {\r\n // 生成语义化类名\r\n const rootCls = getPrefixCls();\r\n const headerWrapperCls = getPrefixCls(\"head-wrapper\");\r\n const headerCls = getPrefixCls(\"head\");\r\n const headerExctraCls = getPrefixCls(\"extra\");\r\n const iconCls = getPrefixCls(\"icon\");\r\n const titleCls = getPrefixCls(\"title\");\r\n const actionCls = getPrefixCls(\"action\");\r\n const bodyCls = getPrefixCls(\"body\");\r\n\r\n return (\r\n <div class={cx(rootCls, styles.container)}>\r\n {/* Header 区域 */}\r\n <div
|
|
1
|
+
{"version":3,"file":"Card.mjs","sources":["../../../../src/components/card/Card.tsx"],"sourcesContent":["// components/card/index.tsx\r\nimport { defineComponent } from \"vue\";\r\n\r\nimport { useStyle } from \"./style\";\r\nimport { cx } from \"@emotion/css\"; // 引入 cx\r\n\r\nimport { useDesign } from \"../../hooks/useDesign\"; // 引入我们刚才写的 hook\r\n\r\nimport { withInstall } from \"../../utils/withInstall\";\r\n\r\nconst _Card = defineComponent({\r\n name: \"DCard\",\r\n props: {\r\n title: String,\r\n headerBordered: {\r\n type: Boolean,\r\n default: false\r\n }\r\n },\r\n setup(props, { slots }) {\r\n // 初始化 Design Hook,传入组件名 'card'\r\n const { getPrefixCls } = useDesign(\"card\");\r\n\r\n // 初始化 Emotion 样式\r\n const styles = useStyle();\r\n\r\n return () => {\r\n // 生成语义化类名\r\n const rootCls = getPrefixCls();\r\n const headerWrapperCls = getPrefixCls(\"head-wrapper\");\r\n const headerCls = getPrefixCls(\"head\");\r\n const headerExctraCls = getPrefixCls(\"extra\");\r\n const iconCls = getPrefixCls(\"icon\");\r\n const titleCls = getPrefixCls(\"title\");\r\n const actionCls = getPrefixCls(\"action\");\r\n const bodyCls = getPrefixCls(\"body\");\r\n\r\n return (\r\n <div class={cx(rootCls, styles.container)}>\r\n {/* Header 区域 */}\r\n <div\r\n class={cx(headerWrapperCls, styles.header, {\r\n border: props.headerBordered\r\n })}\r\n >\r\n <div class={cx(headerCls, styles.headerLeft)}>\r\n {slots.icon && (\r\n <div class={cx(iconCls, styles.icon)}>\r\n {slots.icon()}\r\n </div>\r\n )}\r\n <div\r\n class={cx(titleCls, styles.header_title)}\r\n >\r\n {props.title}\r\n </div>\r\n </div>\r\n {slots.extra && (\r\n <div class={cx(headerExctraCls)}>\r\n {slots.extra()}\r\n </div>\r\n )}\r\n </div>\r\n {/*action*/}\r\n {slots.action && (\r\n <div class={cx(actionCls, styles.action)}>\r\n {slots.action()}\r\n </div>\r\n )}\r\n\r\n {/* Body 区域 */}\r\n <div class={cx(bodyCls, styles.body)}>\r\n {slots.default?.()}\r\n </div>\r\n </div>\r\n );\r\n };\r\n }\r\n});\r\n\r\nexport const Card = withInstall(_Card);\r\n"],"names":["_Card","defineComponent","name","props","title","String","headerBordered","type","Boolean","default","setup","slots","getPrefixCls","useDesign","styles","useStyle","rootCls","headerWrapperCls","headerCls","headerExctraCls","iconCls","titleCls","actionCls","bodyCls","_createVNode","cx","container","header","border","headerLeft","icon","header_title","extra","action","body","Card","withInstall"],"mappings":"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"}
|
|
@@ -2,41 +2,53 @@ import { css } from '@emotion/css';
|
|
|
2
2
|
|
|
3
3
|
"use strict";
|
|
4
4
|
const useStyle = () => {
|
|
5
|
+
const paddingBase = "10px";
|
|
6
|
+
const borderColor = "rgba(5, 5, 5, 0.06)";
|
|
5
7
|
return {
|
|
6
8
|
container: css`
|
|
7
9
|
display: flex;
|
|
8
10
|
flex-direction: column;
|
|
9
11
|
background-color: #fff;
|
|
12
|
+
|
|
13
|
+
overflow: hidden; /* 确保子元素边框不溢出圆角 */
|
|
10
14
|
`,
|
|
11
15
|
header: css`
|
|
12
16
|
display: flex;
|
|
13
|
-
padding:
|
|
17
|
+
padding: ${paddingBase};
|
|
14
18
|
align-items: center;
|
|
15
19
|
justify-content: space-between;
|
|
16
|
-
border-
|
|
20
|
+
transition: border-color 0.3s; /* 增加平滑感 */
|
|
21
|
+
|
|
22
|
+
&.border {
|
|
23
|
+
border-bottom: 1px solid ${borderColor};
|
|
24
|
+
}
|
|
17
25
|
`,
|
|
18
26
|
headerLeft: css`
|
|
19
27
|
display: flex;
|
|
20
28
|
align-items: center;
|
|
29
|
+
min-width: 0; /* 配合 ellipsis 必须加这行 */
|
|
21
30
|
`,
|
|
22
31
|
header_title: css`
|
|
23
|
-
|
|
24
|
-
|
|
32
|
+
font-weight: 600; /* 标题加粗 */
|
|
33
|
+
color: rgba(0, 0, 0, 0.88);
|
|
25
34
|
white-space: nowrap;
|
|
35
|
+
overflow: hidden;
|
|
36
|
+
text-overflow: ellipsis; /* 标题过长自动省略号,比单纯截断更友好 */
|
|
26
37
|
`,
|
|
27
|
-
// 可选:如果你需要对 icon 容器做特殊处理(例如防止图标被压缩)
|
|
28
38
|
icon: css`
|
|
29
|
-
margin-right:
|
|
39
|
+
margin-right: 8px; /* 间距稍大一点 */
|
|
30
40
|
display: inline-flex;
|
|
31
41
|
align-items: center;
|
|
32
|
-
flex-shrink: 0;
|
|
42
|
+
flex-shrink: 0;
|
|
43
|
+
font-size: 16px; /* 统一图标大小 */
|
|
33
44
|
`,
|
|
34
45
|
action: css`
|
|
35
|
-
padding:
|
|
46
|
+
padding: ${paddingBase};
|
|
36
47
|
`,
|
|
37
48
|
body: css`
|
|
38
49
|
display: flex;
|
|
39
50
|
flex-direction: column;
|
|
51
|
+
flex: 1; /* 让 body 自动撑开 */
|
|
40
52
|
`
|
|
41
53
|
};
|
|
42
54
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","sources":["../../../../src/components/card/style.ts"],"sourcesContent":["import { css } from \"@emotion/css\";\r\n\r\nexport const useStyle = () => {\r\n return {\r\n container: css`\r\n display: flex;\r\n flex-direction: column;\r\n background-color: #fff;\r\n `,\r\n header: css`\r\n display: flex;\r\n padding:
|
|
1
|
+
{"version":3,"file":"style.mjs","sources":["../../../../src/components/card/style.ts"],"sourcesContent":["import { css } from \"@emotion/css\";\r\n\r\nexport const useStyle = () => {\r\n // 建议定义一组内部变量,或者从主题 hook 中获取\r\n const paddingBase = \"10px\"; // 稍微大一点的内边距看起来更有质感\r\n const borderColor = \"rgba(5, 5, 5, 0.06)\"; // AntD 5 风格的淡色边框\r\n\r\n return {\r\n container: css`\r\n display: flex;\r\n flex-direction: column;\r\n background-color: #fff;\r\n\r\n overflow: hidden; /* 确保子元素边框不溢出圆角 */\r\n `,\r\n header: css`\r\n display: flex;\r\n padding: ${paddingBase};\r\n align-items: center;\r\n justify-content: space-between;\r\n transition: border-color 0.3s; /* 增加平滑感 */\r\n\r\n &.border {\r\n border-bottom: 1px solid ${borderColor};\r\n }\r\n `,\r\n headerLeft: css`\r\n display: flex;\r\n align-items: center;\r\n min-width: 0; /* 配合 ellipsis 必须加这行 */\r\n `,\r\n header_title: css`\r\n font-weight: 600; /* 标题加粗 */\r\n color: rgba(0, 0, 0, 0.88);\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis; /* 标题过长自动省略号,比单纯截断更友好 */\r\n `,\r\n icon: css`\r\n margin-right: 8px; /* 间距稍大一点 */\r\n display: inline-flex;\r\n align-items: center;\r\n flex-shrink: 0;\r\n font-size: 16px; /* 统一图标大小 */\r\n `,\r\n action: css`\r\n padding: ${paddingBase};\r\n `,\r\n body: css`\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1; /* 让 body 自动撑开 */\r\n `\r\n };\r\n};\r\n"],"names":[],"mappings":";;;AAEO,MAAM,WAAW,MAAM;AAE5B,EAAA,MAAM,WAAA,GAAc,MAAA;AACpB,EAAA,MAAM,WAAA,GAAc,qBAAA;AAEpB,EAAA,OAAO;AAAA,IACL,SAAA,EAAW,GAAA;AAAA;AAAA;AAAA;;AAAA;AAAA,IAAA,CAAA;AAAA,IAOX,MAAA,EAAQ,GAAA;AAAA;AAAA,eAAA,EAEK,WAAW,CAAA;AAAA;AAAA;AAAA;;AAAA;AAAA,iCAAA,EAMO,WAAW,CAAA;AAAA;AAAA,IAAA,CAAA;AAAA,IAG1C,UAAA,EAAY,GAAA;AAAA;AAAA;AAAA;AAAA,IAAA,CAAA;AAAA,IAKZ,YAAA,EAAc,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA,CAAA;AAAA,IAOd,IAAA,EAAM,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA,CAAA;AAAA,IAON,MAAA,EAAQ,GAAA;AAAA,eAAA,EACK,WAAW,CAAA;AAAA,IAAA,CAAA;AAAA,IAExB,IAAA,EAAM,GAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,GAKR;AACF;;;;"}
|
|
@@ -11,6 +11,10 @@ declare const show: import("vue").DefineComponent<import("vue").ExtractPropTypes
|
|
|
11
11
|
type: StringConstructor;
|
|
12
12
|
default: string;
|
|
13
13
|
};
|
|
14
|
+
fullHeight: {
|
|
15
|
+
type: BooleanConstructor;
|
|
16
|
+
default: boolean;
|
|
17
|
+
};
|
|
14
18
|
}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
15
19
|
close: {
|
|
16
20
|
type: BooleanConstructor;
|
|
@@ -24,10 +28,15 @@ declare const show: import("vue").DefineComponent<import("vue").ExtractPropTypes
|
|
|
24
28
|
type: StringConstructor;
|
|
25
29
|
default: string;
|
|
26
30
|
};
|
|
31
|
+
fullHeight: {
|
|
32
|
+
type: BooleanConstructor;
|
|
33
|
+
default: boolean;
|
|
34
|
+
};
|
|
27
35
|
}>> & Readonly<{}>, {
|
|
28
36
|
loading: boolean;
|
|
29
37
|
close: boolean;
|
|
30
38
|
loadingText: string;
|
|
39
|
+
fullHeight: boolean;
|
|
31
40
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
32
41
|
export default show;
|
|
33
42
|
//# sourceMappingURL=Show.d.ts.map
|
|
@@ -23,6 +23,11 @@ const getProps = () => {
|
|
|
23
23
|
loadingText: {
|
|
24
24
|
type: String,
|
|
25
25
|
default: "\u6B63\u5728\u8BF7\u6C42..."
|
|
26
|
+
},
|
|
27
|
+
// 新增属性:是否撑满高度
|
|
28
|
+
fullHeight: {
|
|
29
|
+
type: Boolean,
|
|
30
|
+
default: false
|
|
26
31
|
}
|
|
27
32
|
};
|
|
28
33
|
};
|
|
@@ -63,6 +68,11 @@ const show = /* @__PURE__ */ defineComponent({
|
|
|
63
68
|
const {
|
|
64
69
|
y
|
|
65
70
|
} = useWindowScroll();
|
|
71
|
+
const containerStyle = computed(() => ({
|
|
72
|
+
height: "100%",
|
|
73
|
+
display: "flex",
|
|
74
|
+
flexDirection: "column"
|
|
75
|
+
}));
|
|
66
76
|
const pageHeaderStyle = computed(() => css`
|
|
67
77
|
position: sticky;
|
|
68
78
|
top: ${layout.value.headerHeight}px;
|
|
@@ -70,6 +80,7 @@ const show = /* @__PURE__ */ defineComponent({
|
|
|
70
80
|
padding: 0;
|
|
71
81
|
transition: all 0.3s;
|
|
72
82
|
background-color: ${token.value.colorBgLayout};
|
|
83
|
+
flex-shrink: 0; /* 确保头部不被压缩 */
|
|
73
84
|
|
|
74
85
|
${y.value > 0 ? "box-shadow:0 10px 10px rgba(0, 0, 0, 0.15);" : ""}
|
|
75
86
|
.ant-page-header-back {
|
|
@@ -93,6 +104,14 @@ const show = /* @__PURE__ */ defineComponent({
|
|
|
93
104
|
padding: 10px 10px
|
|
94
105
|
${slots.bottomFooter ? "50px" : "0"};
|
|
95
106
|
background: ${token.value.colorBgLayout};
|
|
107
|
+
|
|
108
|
+
/* 关键逻辑:如果 fullHeight 为 true,则填充剩余空间 */
|
|
109
|
+
${props.fullHeight ? `
|
|
110
|
+
flex: 1;
|
|
111
|
+
overflow: auto;
|
|
112
|
+
display: flex;
|
|
113
|
+
flex-direction: column;
|
|
114
|
+
` : ""}
|
|
96
115
|
`);
|
|
97
116
|
const footerStyle = computed(() => css`
|
|
98
117
|
position: fixed;
|
|
@@ -129,13 +148,20 @@ const show = /* @__PURE__ */ defineComponent({
|
|
|
129
148
|
return createVNode("div", {
|
|
130
149
|
"class": cx(rootCls),
|
|
131
150
|
"style": {
|
|
132
|
-
display: !loading.value ? "block" : "none"
|
|
151
|
+
display: !loading.value ? "block" : "none",
|
|
152
|
+
height: props.fullHeight ? "100%" : "auto"
|
|
133
153
|
}
|
|
134
154
|
}, [createVNode(Watermark, {
|
|
135
|
-
"content": watermarkContent.value
|
|
155
|
+
"content": watermarkContent.value,
|
|
156
|
+
"style": {
|
|
157
|
+
height: props.fullHeight ? "100%" : "auto"
|
|
158
|
+
}
|
|
136
159
|
}, {
|
|
137
160
|
default: () => [createVNode(Flex, {
|
|
138
|
-
"vertical": true
|
|
161
|
+
"vertical": true,
|
|
162
|
+
"style": {
|
|
163
|
+
height: props.fullHeight ? "100%" : "auto"
|
|
164
|
+
}
|
|
139
165
|
}, {
|
|
140
166
|
default: () => {
|
|
141
167
|
var _a, _b;
|
|
@@ -189,9 +215,7 @@ const show = /* @__PURE__ */ defineComponent({
|
|
|
189
215
|
}, null)])]);
|
|
190
216
|
}
|
|
191
217
|
return () => createVNode("div", {
|
|
192
|
-
"style":
|
|
193
|
-
height: "100%"
|
|
194
|
-
}
|
|
218
|
+
"style": containerStyle.value
|
|
195
219
|
}, [showContent(), loadingContent()]);
|
|
196
220
|
}
|
|
197
221
|
});
|