diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md index 202a1c256..9cbdcf7c5 100644 --- a/CHANGELOG.zh_CN.md +++ b/CHANGELOG.zh_CN.md @@ -7,6 +7,7 @@ - 新增可编辑行示例 - 新增个人页 - 新增表单页 +- 新增详情页 ### 🎫 Chores diff --git a/build/config/lessModifyVars.ts b/build/config/lessModifyVars.ts index 83cf85147..73cbc187e 100644 --- a/build/config/lessModifyVars.ts +++ b/build/config/lessModifyVars.ts @@ -11,8 +11,10 @@ const modifyVars = { 'warning-color': '#EFBD47', // Warning color 'link-color': primaryColor, // Link color 'disabled-color': '#C2C2CC', // Failure color - 'heading-color': '#2C3A61', // Title color - 'text-color': '#2C3A61', // Main text color + 'heading-color': 'rgba(0, 0, 0, 0.85)', // Title color + 'text-color': 'rgba(0, 0, 0, 0.85)', // Main text color + // 'heading-color': '#2C3A61', // Title color + // 'text-color': '#2C3A61', // Main text color 'text-color-secondary ': '#606266', // Subtext color 'background-color-base': '#F0F2F5', // background color 'font-size-base': '14px', // Main font size diff --git a/index.html b/index.html index 5702b863a..9c9dbbdd9 100644 --- a/index.html +++ b/index.html @@ -62,7 +62,7 @@ display: block; margin: 20px auto 0 0; font-size: 30px; - color: #2c3a61; + color: rgba(0, 0, 0, 0.85); } diff --git a/public/resource/img/loading.svg b/public/resource/img/loading.svg index c956a635a..5214fd0cd 100644 --- a/public/resource/img/loading.svg +++ b/public/resource/img/loading.svg @@ -27,7 +27,7 @@ min-width: 100px; margin-top: 4px; font-size: 13px; - color: #2C3A61; + color: rgba(0, 0, 0, 0.85);; text-align: left; } diff --git a/src/api/demo/table.ts b/src/api/demo/table.ts index 2a82768dc..1e10c16a1 100644 --- a/src/api/demo/table.ts +++ b/src/api/demo/table.ts @@ -13,5 +13,8 @@ export function demoListApi(params: DemoParams) { url: Api.DEMO_LIST, method: 'GET', params, + headers: { + ignoreCancelToken: true, + }, }); } diff --git a/src/components/registerGlobComp.ts b/src/components/registerGlobComp.ts index 85d10cf6f..6f278bbd2 100644 --- a/src/components/registerGlobComp.ts +++ b/src/components/registerGlobComp.ts @@ -31,6 +31,7 @@ import { Steps, PageHeader, Result, + Empty, } from 'ant-design-vue'; import { getApp } from '/@/useApp'; @@ -75,5 +76,6 @@ export function registerGlobComp() { .use(Steps) .use(PageHeader) .use(Result) + .use(Empty) .use(Tabs); } diff --git a/src/design/ant/index.less b/src/design/ant/index.less index 13271aae9..3464c4965 100644 --- a/src/design/ant/index.less +++ b/src/design/ant/index.less @@ -7,6 +7,12 @@ width: 100%; } +.collapse-container__body { + > .ant-descriptions { + margin-left: 6px; + } +} + // .ant-form-item-label { // text-align: unset; // } diff --git a/src/design/color.less b/src/design/color.less index 836755ad1..30d82b53d 100644 --- a/src/design/color.less +++ b/src/design/color.less @@ -111,7 +111,7 @@ // ================================= // Main text color -@text-color-base: #2c3a61; +@text-color-base: @text-color; // Label color @text-color-call-out: #606266; diff --git a/src/router/menus/modules/demo/page.ts b/src/router/menus/modules/demo/page.ts index 7f0a7ef3c..6fda9a4cf 100644 --- a/src/router/menus/modules/demo/page.ts +++ b/src/router/menus/modules/demo/page.ts @@ -1,10 +1,3 @@ -/* - * @description: Do not edit - * @author: cxiaoting - * @Date: 2020-11-13 14:00:37 - * @LastEditors: cxiaoting - * @LastEditTime: 2020-11-13 18:07:11 - */ import type { MenuModule } from '/@/router/types.d'; const menu: MenuModule = { orderNo: 20, @@ -36,6 +29,23 @@ const menu: MenuModule = { }, ], }, + { + path: 'desc', + name: '详情页', + tag: { + content: 'new', + }, + children: [ + { + path: 'basic', + name: '基础详情页', + }, + { + path: 'high', + name: '高级详情页', + }, + ], + }, { path: 'result', name: '结果页', diff --git a/src/router/routes/modules/demo/page.ts b/src/router/routes/modules/demo/page.ts index ac70306f5..b720d4109 100644 --- a/src/router/routes/modules/demo/page.ts +++ b/src/router/routes/modules/demo/page.ts @@ -51,6 +51,34 @@ const page: AppRouteModule = { ], }, // =============================form end============================= + // =============================desc start============================= + { + path: '/desc', + name: 'DescPage', + redirect: '/page-demo/desc/basic', + meta: { + title: '详情页', + }, + children: [ + { + path: 'basic', + name: 'DescBasicPage', + component: () => import('/@/views/demo/page/desc/basic/index.vue'), + meta: { + title: '基础详情页', + }, + }, + { + path: 'high', + name: 'DescHighPage', + component: () => import('/@/views/demo/page/desc/high/index.vue'), + meta: { + title: '高级详情页', + }, + }, + ], + }, + // =============================desc end============================= // =============================result start============================= { @@ -81,6 +109,34 @@ const page: AppRouteModule = { }, // =============================result end============================= + // =============================account start============================= + { + path: '/account', + name: 'AccountPage', + redirect: '/page-demo/account/setting', + meta: { + title: '个人页', + }, + children: [ + { + path: 'center', + name: 'AccountCenterPage', + component: () => import('/@/views/demo/page/account/center/index.vue'), + meta: { + title: '个人中心', + }, + }, + { + path: 'setting', + name: 'AccountSettingPage', + component: () => import('/@/views/demo/page/account/setting/index.vue'), + meta: { + title: '个人设置', + }, + }, + ], + }, + // =============================account end============================= // =============================exception start============================= { path: '/exception', @@ -153,35 +209,6 @@ const page: AppRouteModule = { ], }, // =============================exception end============================= - - // =============================account start============================= - { - path: '/account', - name: 'AccountPage', - redirect: '/page-demo/account/setting', - meta: { - title: '个人页', - }, - children: [ - { - path: 'center', - name: 'AccountCenterPage', - component: () => import('/@/views/demo/page/account/center/index.vue'), - meta: { - title: '个人中心', - }, - }, - { - path: 'setting', - name: 'AccountSettingPage', - component: () => import('/@/views/demo/page/account/setting/index.vue'), - meta: { - title: '个人设置', - }, - }, - ], - }, - // =============================account end============================= ], }; diff --git a/src/views/dashboard/analysis/components/GrowCard.vue b/src/views/dashboard/analysis/components/GrowCard.vue index c8fadcc52..0fee2ecce 100644 --- a/src/views/dashboard/analysis/components/GrowCard.vue +++ b/src/views/dashboard/analysis/components/GrowCard.vue @@ -69,7 +69,7 @@ font-family: PingFangSC-Regular; font-size: 16px; letter-spacing: 0; - color: #2c3a61; + color: @text-color-base; opacity: 0.7; } diff --git a/src/views/dashboard/analysis/components/TaskCard.vue b/src/views/dashboard/analysis/components/TaskCard.vue index 9ac0089d7..49fff6f7e 100644 --- a/src/views/dashboard/analysis/components/TaskCard.vue +++ b/src/views/dashboard/analysis/components/TaskCard.vue @@ -108,7 +108,7 @@ font-family: PingFangSC-Medium; font-size: 16px; line-height: 24px; - color: #2c3a61; + color: rgba(0, 0, 0, 0.85); } &__desc { diff --git a/src/views/dashboard/workbench/components/NewsList.vue b/src/views/dashboard/workbench/components/NewsList.vue index 915b7e98f..f0127179a 100644 --- a/src/views/dashboard/workbench/components/NewsList.vue +++ b/src/views/dashboard/workbench/components/NewsList.vue @@ -89,7 +89,7 @@ &__title { font-size: 14px; line-height: 22px; - color: #2c3a61; + color: rgba(0, 0, 0, 0.85); } } } diff --git a/src/views/demo/page/desc/basic/data.tsx b/src/views/demo/page/desc/basic/data.tsx new file mode 100644 index 000000000..290d1de2e --- /dev/null +++ b/src/views/demo/page/desc/basic/data.tsx @@ -0,0 +1,196 @@ +import { DescItem } from '/@/components/Description/index'; +import { BasicColumn } from '/@/components/Table/src/types/table'; +import Button from '/@/components/Button/index.vue'; + +import { Badge } from 'ant-design-vue'; + +export const refundData = { + a1: '1000000000', + a2: '已取货', + a3: '1234123421', + a4: '3214321432', +}; + +export const personData = { + b1: '付小小', + b2: '18100000000', + b3: '菜鸟仓储', + b4: '浙江省杭州市西湖区万塘路18号', + b5: '无', +}; +export const refundSchema: DescItem[] = [ + { + field: 'a1', + label: '取货单号', + }, + { + field: 'a2', + label: '状态', + }, + { + field: 'a3', + label: '销售单号', + }, + { + field: 'a4', + label: '子订单', + }, +]; +export const personSchema: DescItem[] = [ + { + field: 'b1', + label: '用户姓名', + }, + { + field: 'b2', + label: '联系电话', + }, + { + field: 'b3', + label: '常用快递', + }, + { + field: 'b4', + label: '取货地址', + }, + { + field: 'b5', + label: '备注', + }, +]; + +export const refundTableSchema: BasicColumn[] = [ + { + title: '商品编号', + width: 150, + dataIndex: 't1', + customRender: ({ record }) => { + return ( + + ); + }, + }, + { + title: '商品名称', + width: 150, + dataIndex: 't2', + }, + { + title: '商品条码', + width: 150, + dataIndex: 't3', + }, + { + title: '单价 ', + width: 150, + dataIndex: 't4', + }, + { + title: '数量（件） ', + width: 150, + dataIndex: 't5', + }, + { + title: '金额', + width: 150, + dataIndex: 't6', + }, +]; +export const refundTimeTableSchema: BasicColumn[] = [ + { + title: '时间', + width: 150, + dataIndex: 't1', + }, + { + title: '当前进度', + width: 150, + dataIndex: 't2', + }, + { + title: '状态', + width: 150, + dataIndex: 't3', + customRender: ({ record }) => { + return ; + }, + }, + { + title: '操作员ID ', + width: 150, + dataIndex: 't4', + }, + { + title: '耗时', + width: 150, + dataIndex: 't5', + }, +]; + +export const refundTableData: any[] = [ + { + t1: 1234561, + t2: '矿泉水 550ml', + t3: '12421432143214321', + t4: '2.00', + t5: 1, + t6: 2.0, + }, + { + t1: 1234562, + t2: '矿泉水 550ml', + t3: '12421432143214321', + t4: '2.00', + t5: 2, + t6: 2.0, + }, + { + t1: 1234562, + t2: '矿泉水 550ml', + t3: '12421432143214321', + t4: '2.00', + t5: 2, + t6: 2.0, + }, + { + t1: 1234562, + t2: '矿泉水 550ml', + t3: '12421432143214321', + t4: '2.00', + t5: 2, + t6: 2.0, + }, +]; + +export const refundTimeTableData: any[] = [ + { + t1: '2017-10-01 14:10', + t2: '联系客户', + t3: '进行中', + t4: '取货员 ID1234', + t5: '5mins', + }, + { + t1: '2017-10-01 14:10', + t2: '取货员出发', + t3: '成功', + t4: '取货员 ID1234', + t5: '5mins', + }, + { + t1: '2017-10-01 14:10', + t2: '取货员接单', + t3: '成功', + t4: '系统', + t5: '5mins', + }, + { + t1: '2017-10-01 14:10', + t2: '申请审批通过', + t3: '成功', + t4: '用户', + t5: '1h', + }, +]; diff --git a/src/views/demo/page/desc/basic/index.vue b/src/views/demo/page/desc/basic/index.vue new file mode 100644 index 000000000..0472ed14a --- /dev/null +++ b/src/views/demo/page/desc/basic/index.vue @@ -0,0 +1,100 @@ + + + diff --git a/src/views/demo/page/desc/high/data.tsx b/src/views/demo/page/desc/high/data.tsx new file mode 100644 index 000000000..ec7a7c39f --- /dev/null +++ b/src/views/demo/page/desc/high/data.tsx @@ -0,0 +1,65 @@ +import { BasicColumn } from '/@/components/Table/src/types/table'; + +import { Badge } from 'ant-design-vue'; + +export const refundTimeTableSchema: BasicColumn[] = [ + { + title: '时间', + width: 150, + dataIndex: 't1', + }, + { + title: '当前进度', + width: 150, + dataIndex: 't2', + }, + { + title: '状态', + width: 150, + dataIndex: 't3', + customRender: ({ record }) => { + return ; + }, + }, + { + title: '操作员ID ', + width: 150, + dataIndex: 't4', + }, + { + title: '耗时', + width: 150, + dataIndex: 't5', + }, +]; + +export const refundTimeTableData: any[] = [ + { + t1: '2017-10-01 14:10', + t2: '联系客户', + t3: '进行中', + t4: '取货员 ID1234', + t5: '5mins', + }, + { + t1: '2017-10-01 14:10', + t2: '取货员出发', + t3: '成功', + t4: '取货员 ID1234', + t5: '5mins', + }, + { + t1: '2017-10-01 14:10', + t2: '取货员接单', + t3: '成功', + t4: '系统', + t5: '5mins', + }, + { + t1: '2017-10-01 14:10', + t2: '申请审批通过', + t3: '成功', + t4: '用户', + t5: '1h', + }, +]; diff --git a/src/views/demo/page/desc/high/index.vue b/src/views/demo/page/desc/high/index.vue new file mode 100644 index 000000000..97c4d6c5a --- /dev/null +++ b/src/views/demo/page/desc/high/index.vue @@ -0,0 +1,117 @@ + + +