@vue-start/pro 0.5.47 → 0.5.49

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.5.49
+
+- refactor: ProTheme 支持自模块使用；新增模式（暗黑）；
+- feat: 新增 ProAppConfigDrawer appConfig 设置组件；
+
+# 0.5.48
+
+- perf: ProLayout 非 tabs 模式下 keep-live 规则支持；
+- feat: ProCurdListPage 组件；
+- feat: ProCurdPageFormConnect 组件（modal 模式拓展）；
+- feat: ProCurdModule 复合组件；
+- perf: ProCurd 新增 title 属性，支持 modal 模式弹出组件标题拼接；
+- perf: ProTable operate 项支持 routeOpts 路由跳转配置；
+
 # 0.5.46
 
 - perf: ProLayout 左侧菜单添加 key；

package/dist/index.css

@@ -22,6 +22,11 @@
   --pro-color-border: #dcdfe6;
   --pro-color-border-light: #e4e7ed;
   --pro-color-bg: #ffffff;
+  --pro-color-bg-light: #f8f8f8;
+  --pro-color-mode: #ffffff;
+  --pro-color-mode-rgb: 255, 255, 255;
+  --pro-color-mode-reverse: #000000;
+  --pro-color-mode-reverse-rgb: 0, 0, 0;
   --pro-radius: 4px;
   --pro-radius-lg: 8px;
   --pro-radius-md: 4px;
@@ -49,6 +54,9 @@
   --pro-spacing-7: 28px;
   --pro-spacing-8: 32px;
   --pro-spacing-9: 36px;
+
+  /* 变量声明 - 不报错 */
+  --pro-table-toolbar-hei: 0px;
 }
 
 /********************************** pro-layout ***********************************/
@@ -93,7 +101,7 @@
   height: var(--pro-header-hei);
   display: flex;
   align-items: center;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 3px 0 rgba(var(--pro-color-mode-reverse-rgb), 0.1);
   z-index: 9;
 }
 
@@ -131,6 +139,7 @@
   overflow: auto;
   position: relative;
   box-sizing: border-box;
+  background-color: var(--pro-color-bg-light);
 }
 
 /*vertical*/
@@ -191,7 +200,6 @@
 
 .pro-layout .pro-layout-tabs {
   height: var(--pro-tabs-hei);
-  background-color: white;
   width: calc(100vw - var(--pro-left-menu-wid));
 }
 
@@ -273,6 +281,8 @@
 
 /********************************** pro-search-form ***********************************/
 .pro-search-form {
+  display: flex;
+  flex-wrap: wrap;
 }
 
 .pro-search-form .pro-form-operate {
@@ -285,6 +295,12 @@
   margin-left: 12px;
 }
 
+.pro-search-form .pro-curd-list-search-end {
+  display: flex;
+  flex-direction: row-reverse;
+  flex-grow: 1;
+}
+
 /********************************** pro-form-list ***********************************/
 
 .pro-form-list {
@@ -345,22 +361,34 @@
 /********************************** pro-page ***********************************/
 
 .pro-page {
-  --pro-page-header-hei: 40px;
-  --pro-page-footer-hei: 46px;
+  --pro-page-hei: var(--pro-secion-hei);
+  --pro-page-header-hei: 0px;
+  --pro-page-footer-hei: 0px;
 
-  height: var(--pro-secion-hei);
-  max-height: var(--pro-secion-hei);
+  height: var(--pro-page-hei);
+  max-height: var(--pro-page-hei);
   overflow-y: auto;
   box-sizing: border-box;
 }
 
+.pro-page.has-header {
+  --pro-page-header-hei: 40px;
+}
+
+.pro-page.has-footer {
+  --pro-page-footer-hei: 46px;
+}
+
+/* 子页模式 */
+
 .pro-page-sub {
   position: absolute !important;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
-  /*overflow-y: auto;*/
+  z-index: 9;
+  background-color: var(--pro-color-bg-light);
 }
 
 .pro-page-header {
@@ -372,7 +400,6 @@
 
 .pro-page-header .pro-page-header-back {
   font-size: 16px;
-  color: black;
   cursor: pointer;
   padding-right: 8px;
 }
@@ -383,12 +410,11 @@
 
 .pro-page-header .pro-page-header-title {
   font-size: 16px;
-  color: black;
   margin-right: 12px;
 }
 
 .pro-page-header .pro-page-header-sub-title {
-  color: #00000073;
+  color: var(--pro-color-text-secondary);
 }
 
 .pro-page-header .pro-page-header-space {
@@ -400,6 +426,8 @@
 }
 
 .pro-page .pro-page-content {
+  box-sizing: border-box;
+  min-height: calc(var(--pro-page-hei) - var(--pro-page-header-hei) - var(--pro-page-footer-hei));
 }
 
 .pro-page .pro-page-footer {
@@ -418,10 +446,7 @@
   right: 0;
   left: 0;
   z-index: 1;
-  background-color: white;
-}
-
-.pro-page-fill .pro-page-content {
+  background-color: var(--pro-color-bg-light);
 }
 
 .pro-page-fill .pro-page-footer {
@@ -430,7 +455,44 @@
   right: 0;
   left: 0;
   z-index: 1;
-  background-color: white;
+  background-color: var(--pro-color-bg-light);
+}
+
+/********************************** curd-list ***********************************/
+.pro-page.curd-list {
+}
+
+.pro-page.curd-list .pro-page-content {
+  height: calc(100% - var(--pro-page-header-hei));
+}
+
+.pro-page.curd-list .pro-curd-list {
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.pro-page.curd-list .pro-curd-list .curd-list-grow {
+  flex-grow: 1;
+}
+
+.pro-page.curd-list .pro-curd-list .pro-table {
+  overflow: hidden;
+}
+
+.pro-page.curd-list .pro-curd-list .pro-table .el-table {
+  height: calc(100% - var(--pro-table-toolbar-hei));
+}
+
+.pro-page.curd-list .pro-curd-list.has-pagination .pro-list-pagination {
+  height: var(--pro-page-footer-hei);
+  min-height: var(--pro-page-footer-hei);
+}
+
+.pro-curd-list .pro-list-pagination {
+  display: flex;
 }
 
 /********************************** pro-tip ***********************************/
@@ -498,3 +560,76 @@
 .pro-drawer .el-drawer__footer {
   padding: 16px;
 }
+
+/***************************** pro-app-config ***********************************/
+.pro-app-config_form .el-form-item {
+  margin-bottom: 8px;
+}
+
+.pro-app-config_form .el-form-item__label {
+  padding: 0 !important;
+}
+
+.pro-app-config_form_title .el-form-item__content {
+  justify-content: center;
+}
+
+.pro-app-config_form .el-form-item__content {
+  flex-direction: row-reverse;
+}
+
+.pro-app-config_form_layout {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+}
+
+.pro-app-config_form_layout > div {
+  border-radius: 4px;
+  height: 80px;
+  background-color: rgba(var(--pro-color-mode-reverse-rgb), 0.04);
+  cursor: pointer;
+  position: relative;
+  box-sizing: border-box;
+}
+
+.pro-app-config_form_layout > div.selected {
+  border: 2px solid var(--pro-color-primary);
+}
+
+.pro-app-config_form_layout > div > div {
+  position: absolute;
+  background-color: rgba(var(--pro-color-mode-reverse-rgb), 0.4);
+}
+
+.pro-app-config_form_layout .top {
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 20%;
+  border-radius: 2px 2px 0 0;
+}
+
+.pro-app-config_form_layout .left {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 30%;
+  border-radius: 2px 0 0 2px;
+}
+
+.pro-app-config_form_layout > div:nth-child(1) .left {
+  top: 20% !important;
+  background-color: rgba(var(--pro-color-mode-reverse-rgb), 0.2) !important;
+}
+
+.pro-app-config_form_layout > div:nth-child(4) .left {
+  top: 20% !important;
+}
+
+.pro-app-config_btm {
+  display: flex;
+  justify-content: center;
+  padding: 16px 0;
+}