@qlover/create-app 0.7.15 → 0.9.0

package/dist/templates/react-app/src/styles/css/antd-themes/menu/_default.css

@@ -0,0 +1,108 @@
+/* custom variables - for antd and custom css */
+html,
+.fe-theme {
+  &.ant-menu-css-var {
+    /* 基础尺寸 */
+    --fe-menu-dropdown-width: 160px;
+    --fe-menu-z-index-popup: 1050;
+    --fe-menu-radius-item: 8px;
+    --fe-menu-item-border-radius: 8px;
+    --fe-menu-radius-sub-menu-item: 4px;
+    --fe-menu-sub-menu-item-border-radius: 4px;
+    --fe-menu-item-margin-inline: 4px;
+    --fe-menu-item-margin-block: 4px;
+    --fe-menu-item-padding-inline: 16px;
+    --fe-menu-item-height: 40px;
+    --fe-menu-item-width: calc(100% - 8px);
+    --fe-menu-collapsed-width: 80px;
+
+    /* 文字颜色 */
+    --fe-menu-color-item-text: rgb(var(--text-primary));
+    --fe-menu-item-color: rgb(var(--text-primary));
+    --fe-menu-color-item-text-hover: rgb(var(--text-primary));
+    --fe-menu-item-hover-color: rgb(var(--text-primary));
+    --fe-menu-color-group-title: rgb(var(--text-secondary));
+    --fe-menu-group-title-color: rgb(var(--text-secondary));
+    --fe-menu-color-item-text-disabled: rgb(var(--text-disabled));
+    --fe-menu-item-disabled-color: rgb(var(--text-disabled));
+
+    /* 选中和激活状态 */
+    --fe-menu-color-item-text-selected: rgb(var(--color-brand));
+    --fe-menu-item-selected-color: rgb(var(--color-brand));
+    --fe-menu-sub-menu-item-selected-color: rgb(var(--color-brand));
+    --fe-menu-color-item-text-selected-horizontal: rgb(var(--color-brand));
+    --fe-menu-horizontal-item-selected-color: rgb(var(--color-brand));
+
+    /* 背景颜色 */
+    --fe-menu-color-item-bg: rgb(var(--color-bg-base));
+    --fe-menu-item-bg: rgb(var(--color-bg-base));
+    --fe-menu-color-item-bg-hover: rgba(var(--text-primary), 0.06);
+    --fe-menu-item-hover-bg: rgba(var(--text-primary), 0.06);
+    --fe-menu-color-item-bg-active: rgba(var(--text-primary), 0.06);
+    --fe-menu-item-active-bg: rgba(var(--color-brand), 0.1);
+    --fe-menu-color-sub-item-bg: rgba(var(--text-primary), 0.02);
+    --fe-menu-sub-menu-item-bg: rgba(var(--text-primary), 0.02);
+    --fe-menu-color-item-bg-selected: rgba(var(--color-brand), 0.1);
+    --fe-menu-item-selected-bg: rgba(var(--color-brand), 0.1);
+    --fe-menu-popup-bg: rgb(var(--color-bg-base));
+
+    /* 水平菜单特殊样式 */
+    --fe-menu-color-item-text-hover-horizontal: rgb(var(--color-brand));
+    --fe-menu-horizontal-item-hover-color: rgb(var(--color-brand));
+    --fe-menu-color-item-bg-selected-horizontal: transparent;
+    --fe-menu-horizontal-item-selected-bg: transparent;
+    --fe-menu-horizontal-item-border-radius: 0px;
+    --fe-menu-horizontal-item-hover-bg: transparent;
+    --fe-menu-horizontal-line-height: 46px;
+
+    /* 激活条样式 */
+    --fe-menu-color-active-bar-width: 0px;
+    --fe-menu-active-bar-width: 0px;
+    --fe-menu-color-active-bar-height: 2px;
+    --fe-menu-active-bar-height: 2px;
+    --fe-menu-color-active-bar-border-size: 1px;
+    --fe-menu-active-bar-border-width: 1px;
+
+    /* 图标样式 */
+    --fe-menu-icon-size: 14px;
+    --fe-menu-icon-margin-inline-end: 10px;
+    --fe-menu-collapsed-icon-size: 16px;
+
+    /* 分组标题样式 */
+    --fe-menu-group-title-font-size: 14px;
+    --fe-menu-group-title-line-height: 1.5714285714285714;
+
+    /* 危险项样式 */
+    --fe-menu-color-danger-item-text: var(--fe-color-error);
+    --fe-menu-danger-item-color: var(--fe-color-error);
+    --fe-menu-color-danger-item-text-hover: var(--fe-color-error);
+    --fe-menu-danger-item-hover-color: var(--fe-color-error);
+    --fe-menu-color-danger-item-text-selected: var(--fe-color-error);
+    --fe-menu-danger-item-selected-color: var(--fe-color-error);
+    --fe-menu-color-danger-item-bg-active: rgba(var(--fe-color-error), 0.1);
+    --fe-menu-danger-item-active-bg: rgba(var(--fe-color-error), 0.1);
+    --fe-menu-color-danger-item-bg-selected: rgba(var(--fe-color-error), 0.1);
+    --fe-menu-danger-item-selected-bg: rgba(var(--fe-color-error), 0.1);
+
+    /* 暗色主题特殊样式 */
+    --fe-menu-dark-item-disabled-color: rgba(255, 255, 255, 0.25);
+    --fe-menu-dark-item-color: rgba(255, 255, 255, 0.65);
+    --fe-menu-dark-danger-item-color: var(--fe-color-error);
+    --fe-menu-dark-item-bg: rgb(15 23 42);
+    --fe-menu-dark-popup-bg: rgb(15 23 42);
+    --fe-menu-dark-sub-menu-item-bg: rgb(30 41 59);
+    --fe-menu-dark-item-selected-color: rgb(255 255 255);
+    --fe-menu-dark-item-selected-bg: rgb(var(--color-brand));
+    --fe-menu-dark-danger-item-selected-bg: var(--fe-color-error);
+    --fe-menu-dark-item-hover-bg: transparent;
+    --fe-menu-dark-group-title-color: rgba(255, 255, 255, 0.65);
+    --fe-menu-dark-item-hover-color: rgb(255 255 255);
+    --fe-menu-dark-danger-item-hover-color: color-mix(
+      in srgb,
+      var(--fe-color-error) 90%,
+      white
+    );
+    --fe-menu-dark-danger-item-selected-color: rgb(255 255 255);
+    --fe-menu-dark-danger-item-active-bg: var(--fe-color-error);
+  }
+}

package/dist/templates/react-app/src/styles/css/antd-themes/menu/dark.css

@@ -0,0 +1,67 @@
+[data-theme='dark'],
+[data-theme='dark'] .fe-theme {
+  &.ant-menu-css-var {
+    /* 文字颜色 */
+    --fe-menu-color-item-text: rgb(var(--text-primary));
+    --fe-menu-item-color: rgb(var(--text-primary));
+    --fe-menu-color-item-text-hover: rgb(var(--text-primary));
+    --fe-menu-item-hover-color: rgb(var(--text-primary));
+    --fe-menu-color-group-title: rgb(var(--text-secondary));
+    --fe-menu-group-title-color: rgb(var(--text-secondary));
+    --fe-menu-color-item-text-disabled: rgb(var(--text-disabled));
+    --fe-menu-item-disabled-color: rgb(var(--text-disabled));
+
+    /* 选中和激活状态 */
+    --fe-menu-color-item-text-selected: rgb(var(--color-brand));
+    --fe-menu-item-selected-color: rgb(var(--color-brand));
+    --fe-menu-sub-menu-item-selected-color: rgb(var(--color-brand));
+    --fe-menu-color-item-text-selected-horizontal: rgb(var(--color-brand));
+    --fe-menu-horizontal-item-selected-color: rgb(var(--color-brand));
+
+    /* 背景颜色 */
+    --fe-menu-color-item-bg: rgb(var(--color-bg-base));
+    --fe-menu-item-bg: rgb(var(--color-bg-base));
+    --fe-menu-color-item-bg-hover: rgba(255 255 255 / 0.08);
+    --fe-menu-item-hover-bg: rgba(255 255 255 / 0.08);
+    --fe-menu-color-item-bg-active: rgba(255 255 255 / 0.08);
+    --fe-menu-item-active-bg: rgba(var(--color-brand), 0.2);
+    --fe-menu-color-sub-item-bg: rgba(255 255 255 / 0.04);
+    --fe-menu-sub-menu-item-bg: rgba(255 255 255 / 0.04);
+    --fe-menu-color-item-bg-selected: rgba(var(--color-brand), 0.2);
+    --fe-menu-item-selected-bg: rgba(var(--color-brand), 0.2);
+    --fe-menu-popup-bg: rgb(var(--color-bg-base));
+
+    /* 危险项样式 */
+    --fe-menu-color-danger-item-text: var(--fe-color-error);
+    --fe-menu-danger-item-color: var(--fe-color-error);
+    --fe-menu-color-danger-item-text-hover: var(--fe-color-error);
+    --fe-menu-danger-item-hover-color: var(--fe-color-error);
+    --fe-menu-color-danger-item-text-selected: var(--fe-color-error);
+    --fe-menu-danger-item-selected-color: var(--fe-color-error);
+    --fe-menu-color-danger-item-bg-active: rgba(var(--fe-color-error), 0.2);
+    --fe-menu-danger-item-active-bg: rgba(var(--fe-color-error), 0.2);
+    --fe-menu-color-danger-item-bg-selected: rgba(var(--fe-color-error), 0.2);
+    --fe-menu-danger-item-selected-bg: rgba(var(--fe-color-error), 0.2);
+
+    /* 暗色主题特殊样式 */
+    --fe-menu-dark-item-disabled-color: rgba(255, 255, 255, 0.25);
+    --fe-menu-dark-item-color: rgba(255, 255, 255, 0.65);
+    --fe-menu-dark-danger-item-color: var(--fe-color-error);
+    --fe-menu-dark-item-bg: rgb(15 23 42);
+    --fe-menu-dark-popup-bg: rgb(15 23 42);
+    --fe-menu-dark-sub-menu-item-bg: rgb(30 41 59);
+    --fe-menu-dark-item-selected-color: rgb(255 255 255);
+    --fe-menu-dark-item-selected-bg: rgb(var(--color-brand));
+    --fe-menu-dark-danger-item-selected-bg: var(--fe-color-error);
+    --fe-menu-dark-item-hover-bg: transparent;
+    --fe-menu-dark-group-title-color: rgba(255, 255, 255, 0.65);
+    --fe-menu-dark-item-hover-color: rgb(255 255 255);
+    --fe-menu-dark-danger-item-hover-color: color-mix(
+      in srgb,
+      var(--fe-color-error) 90%,
+      white
+    );
+    --fe-menu-dark-danger-item-selected-color: rgb(255 255 255);
+    --fe-menu-dark-danger-item-active-bg: var(--fe-color-error);
+  }
+}

package/dist/templates/react-app/src/styles/css/antd-themes/menu/index.css

@@ -0,0 +1,3 @@
+@import './_default.css';
+@import './dark.css';
+@import './pink.css';

package/dist/templates/react-app/src/styles/css/antd-themes/menu/pink.css

@@ -0,0 +1,67 @@
+[data-theme='pink'],
+[data-theme='pink'] .fe-theme {
+  &.ant-menu-css-var {
+    /* 文字颜色 */
+    --fe-menu-color-item-text: var(--ant-color-text);
+    --fe-menu-item-color: var(--ant-color-text);
+    --fe-menu-color-item-text-hover: var(--ant-color-text);
+    --fe-menu-item-hover-color: var(--ant-color-text);
+    --fe-menu-color-group-title: var(--ant-color-text-secondary);
+    --fe-menu-group-title-color: var(--ant-color-text-secondary);
+    --fe-menu-color-item-text-disabled: var(--fe-color-text-disabled);
+    --fe-menu-item-disabled-color: var(--fe-color-text-disabled);
+
+    /* 选中和激活状态 */
+    --fe-menu-color-item-text-selected: var(--fe-color-primary);
+    --fe-menu-item-selected-color: var(--fe-color-primary);
+    --fe-menu-sub-menu-item-selected-color: var(--fe-color-primary);
+    --fe-menu-color-item-text-selected-horizontal: var(--fe-color-primary);
+    --fe-menu-horizontal-item-selected-color: var(--fe-color-primary);
+
+    /* 背景颜色 */
+    --fe-menu-color-item-bg: var(--ant-color-bg-container);
+    --fe-menu-item-bg: var(--ant-color-bg-container);
+    --fe-menu-color-item-bg-hover: rgba(244 114 182 / 0.06);
+    --fe-menu-item-hover-bg: rgba(244 114 182 / 0.06);
+    --fe-menu-color-item-bg-active: rgba(244 114 182 / 0.06);
+    --fe-menu-item-active-bg: var(--fe-color-primary-bg);
+    --fe-menu-color-sub-item-bg: rgba(244 114 182 / 0.02);
+    --fe-menu-sub-menu-item-bg: rgba(244 114 182 / 0.02);
+    --fe-menu-color-item-bg-selected: var(--fe-color-primary-bg);
+    --fe-menu-item-selected-bg: var(--fe-color-primary-bg);
+    --fe-menu-popup-bg: var(--ant-color-bg-container);
+
+    /* 危险项样式 */
+    --fe-menu-color-danger-item-text: var(--fe-color-error);
+    --fe-menu-danger-item-color: var(--fe-color-error);
+    --fe-menu-color-danger-item-text-hover: var(--fe-color-error);
+    --fe-menu-danger-item-hover-color: var(--fe-color-error);
+    --fe-menu-color-danger-item-text-selected: var(--fe-color-error);
+    --fe-menu-danger-item-selected-color: var(--fe-color-error);
+    --fe-menu-color-danger-item-bg-active: rgba(251 113 133 / 0.1);
+    --fe-menu-danger-item-active-bg: rgba(251 113 133 / 0.1);
+    --fe-menu-color-danger-item-bg-selected: rgba(251 113 133 / 0.1);
+    --fe-menu-danger-item-selected-bg: rgba(251 113 133 / 0.1);
+
+    /* 暗色主题特殊样式 */
+    --fe-menu-dark-item-disabled-color: rgba(255, 255, 255, 0.25);
+    --fe-menu-dark-item-color: rgba(255, 255, 255, 0.65);
+    --fe-menu-dark-danger-item-color: var(--fe-color-error);
+    --fe-menu-dark-item-bg: rgb(190 18 60);
+    --fe-menu-dark-popup-bg: rgb(190 18 60);
+    --fe-menu-dark-sub-menu-item-bg: rgb(159 18 57);
+    --fe-menu-dark-item-selected-color: rgb(255 255 255);
+    --fe-menu-dark-item-selected-bg: var(--fe-color-primary);
+    --fe-menu-dark-danger-item-selected-bg: var(--fe-color-error);
+    --fe-menu-dark-item-hover-bg: transparent;
+    --fe-menu-dark-group-title-color: rgba(255, 255, 255, 0.65);
+    --fe-menu-dark-item-hover-color: rgb(255 255 255);
+    --fe-menu-dark-danger-item-hover-color: color-mix(
+      in srgb,
+      var(--fe-color-error) 90%,
+      white
+    );
+    --fe-menu-dark-danger-item-selected-color: rgb(255 255 255);
+    --fe-menu-dark-danger-item-active-bg: var(--fe-color-error);
+  }
+}

package/dist/templates/react-app/src/styles/css/antd-themes/pagination/_default.css

@@ -0,0 +1,34 @@
+/* custom variables - for antd and custom css */
+html,
+.fe-theme .ant-pagination-css-var,
+.fe-theme.ant-pagination {
+  /* Antd Pagination 组件变量 */
+  .ant-pagination-css-var {
+    --fe-pagination-item-bg: rgb(var(--color-bg-base));
+    --fe-pagination-item-size: 32px;
+    --fe-pagination-item-size-sm: 24px;
+    --fe-pagination-item-active-bg: rgb(var(--color-bg-base));
+    --fe-pagination-item-link-bg: rgb(var(--color-bg-base));
+    --fe-pagination-item-active-color-disabled: rgb(var(--text-tertiary));
+    --fe-pagination-item-active-bg-disabled: rgba(var(--text-primary), 0.15);
+    --fe-pagination-item-input-bg: rgb(var(--color-bg-base));
+    --fe-pagination-mini-options-size-changer-top: 0px;
+    --fe-pagination-padding-block: 4px;
+    --fe-pagination-padding-block-sm: 0px;
+    --fe-pagination-padding-block-lg: 7px;
+    --fe-pagination-padding-inline: 11px;
+    --fe-pagination-padding-inline-sm: 7px;
+    --fe-pagination-padding-inline-lg: 11px;
+    --fe-pagination-addon-bg: rgba(var(--text-primary), 0.02);
+    --fe-pagination-active-border-color: rgb(var(--color-brand));
+    --fe-pagination-hover-border-color: rgb(var(--color-brand-hover));
+    --fe-pagination-active-shadow: 0 0 0 2px rgba(var(--color-brand), 0.1);
+    --fe-pagination-error-active-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
+    --fe-pagination-warning-active-shadow: 0 0 0 2px rgba(234, 179, 8, 0.1);
+    --fe-pagination-hover-bg: rgb(var(--color-bg-base));
+    --fe-pagination-active-bg: rgb(var(--color-bg-base));
+    --fe-pagination-input-font-size: 14px;
+    --fe-pagination-input-font-size-lg: 16px;
+    --fe-pagination-input-font-size-sm: 14px;
+  }
+}

package/dist/templates/react-app/src/styles/css/antd-themes/pagination/dark.css

@@ -0,0 +1,31 @@
+[data-theme='dark'],
+[data-theme='dark'] .fe-theme .ant-pagination-css-var,
+[data-theme='dark'] .fe-theme.ant-pagination {
+  /* Antd Pagination 组件变量 */
+  --fe-pagination-item-bg: rgb(var(--color-bg-secondary));
+  --fe-pagination-item-size: 32px;
+  --fe-pagination-item-size-sm: 24px;
+  --fe-pagination-item-active-bg: rgb(var(--color-bg-secondary));
+  --fe-pagination-item-link-bg: rgb(var(--color-bg-secondary));
+  --fe-pagination-item-active-color-disabled: rgb(var(--text-tertiary));
+  --fe-pagination-item-active-bg-disabled: rgba(var(--text-primary), 0.15);
+  --fe-pagination-item-input-bg: rgb(var(--color-bg-secondary));
+  --fe-pagination-mini-options-size-changer-top: 0px;
+  --fe-pagination-padding-block: 4px;
+  --fe-pagination-padding-block-sm: 0px;
+  --fe-pagination-padding-block-lg: 7px;
+  --fe-pagination-padding-inline: 11px;
+  --fe-pagination-padding-inline-sm: 7px;
+  --fe-pagination-padding-inline-lg: 11px;
+  --fe-pagination-addon-bg: rgba(var(--text-primary), 0.02);
+  --fe-pagination-active-border-color: rgb(var(--color-brand));
+  --fe-pagination-hover-border-color: rgb(var(--color-brand-hover));
+  --fe-pagination-active-shadow: 0 0 0 2px rgba(var(--color-brand), 0.2);
+  --fe-pagination-error-active-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
+  --fe-pagination-warning-active-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
+  --fe-pagination-hover-bg: rgb(var(--color-bg-elevated));
+  --fe-pagination-active-bg: rgb(var(--color-bg-elevated));
+  --fe-pagination-input-font-size: 14px;
+  --fe-pagination-input-font-size-lg: 16px;
+  --fe-pagination-input-font-size-sm: 14px;
+}

package/dist/templates/react-app/src/styles/css/antd-themes/pagination/index.css

@@ -0,0 +1,3 @@
+@import './_default.css';
+@import './dark.css';
+@import './pink.css';

package/dist/templates/react-app/src/styles/css/antd-themes/pagination/pink.css

@@ -0,0 +1,36 @@
+[data-theme='pink'],
+[data-theme='pink'] .fe-theme .ant-pagination-css-var,
+[data-theme='pink'] .fe-theme.ant-pagination {
+  /* Antd Pagination 组件变量 */
+  .ant-pagination-css-var {
+    --fe-pagination-item-bg: var(--ant-color-bg-container);
+    --fe-pagination-item-size: 32px;
+    --fe-pagination-item-size-sm: 24px;
+    --fe-pagination-item-active-bg: var(--ant-color-bg-container);
+    --fe-pagination-item-link-bg: var(--ant-color-bg-container);
+    --fe-pagination-item-active-color-disabled: var(
+      --ant-color-text-quaternary
+    );
+    --fe-pagination-item-active-bg-disabled: var(--ant-color-text-quaternary);
+    --fe-pagination-item-input-bg: var(--ant-color-bg-container);
+    --fe-pagination-mini-options-size-changer-top: 0px;
+    --fe-pagination-padding-block: 4px;
+    --fe-pagination-padding-block-sm: 0px;
+    --fe-pagination-padding-block-lg: 7px;
+    --fe-pagination-padding-inline: 11px;
+    --fe-pagination-padding-inline-sm: 7px;
+    --fe-pagination-padding-inline-lg: 11px;
+    --fe-pagination-addon-bg: var(--fe-input-addon-bg);
+    --fe-pagination-active-border-color: var(--fe-color-primary);
+    --fe-pagination-hover-border-color: var(--fe-color-primary-hover);
+    --fe-pagination-active-shadow: 0 0 0 2px var(--fe-color-primary-bg);
+    --fe-pagination-error-active-shadow: 0 0 0 2px rgba(40, 22, 24, 0.1)
+      --fe-pagination-warning-active-shadow: 0 0 0 2px
+      var(--fe-color-warning-bg);
+    --fe-pagination-hover-bg: var(--ant-color-bg-elevated);
+    --fe-pagination-active-bg: var(--ant-color-bg-elevated);
+    --fe-pagination-input-font-size: 14px;
+    --fe-pagination-input-font-size-lg: 16px;
+    --fe-pagination-input-font-size-sm: 14px;
+  }
+}

package/dist/templates/react-app/src/styles/css/antd-themes/table/_default.css

@@ -0,0 +1,44 @@
+/* custom variables - for antd and custom css */
+html,
+.fe-theme {
+  /* Antd Table 组件变量 */
+  .ant-table-css-var {
+    --fe-table-header-bg: rgb(var(--color-bg-elevated));
+    --fe-table-header-color: rgb(var(--text-primary));
+    --fe-table-header-sort-active-bg: rgb(var(--color-bg-secondary));
+    --fe-table-header-sort-hover-bg: rgb(var(--color-bg-secondary));
+    --fe-table-body-sort-bg: rgb(var(--color-bg-elevated));
+    --fe-table-row-hover-bg: rgb(var(--color-bg-secondary));
+    --fe-table-row-selected-bg: rgba(var(--color-brand), 0.1);
+    --fe-table-row-selected-hover-bg: rgba(var(--color-brand-hover), 0.2);
+    --fe-table-row-expanded-bg: rgba(var(--text-primary), 0.02);
+    --fe-table-cell-padding-block: 16px;
+    --fe-table-cell-padding-inline: 16px;
+    --fe-table-cell-padding-block-md: 12px;
+    --fe-table-cell-padding-inline-md: 8px;
+    --fe-table-cell-padding-block-sm: 8px;
+    --fe-table-cell-padding-inline-sm: 8px;
+    --fe-table-border-color: rgb(var(--color-border));
+    --fe-table-header-border-radius: 8px;
+    --fe-table-footer-bg: rgb(var(--color-bg-elevated));
+    --fe-table-footer-color: rgb(var(--text-primary));
+    --fe-table-cell-font-size: 14px;
+    --fe-table-cell-font-size-md: 14px;
+    --fe-table-cell-font-size-sm: 14px;
+    --fe-table-header-split-color: rgb(var(--color-border));
+    --fe-table-fixed-header-sort-active-bg: rgb(var(--color-bg-secondary));
+    --fe-table-header-filter-hover-bg: rgba(var(--text-primary), 0.06);
+    --fe-table-filter-dropdown-menu-bg: rgb(var(--color-bg-base));
+    --fe-table-filter-dropdown-bg: rgb(var(--color-bg-base));
+    --fe-table-expand-icon-bg: rgb(var(--color-bg-base));
+    --fe-table-selection-column-width: 32px;
+    --fe-table-sticky-scroll-bar-bg: rgba(var(--text-primary), 0.25);
+    --fe-table-sticky-scroll-bar-border-radius: 100px;
+    --fe-table-expand-icon-margin-top: 2.5px;
+    --fe-table-header-icon-color: rgb(var(--text-tertiary));
+    --fe-table-header-icon-hover-color: rgb(var(--text-secondary));
+    --fe-table-expand-icon-half-inner: 7px;
+    --fe-table-expand-icon-size: 17px;
+    --fe-table-expand-icon-scale: 0.9411764705882353;
+  }
+}

package/dist/templates/react-app/src/styles/css/antd-themes/table/dark.css

@@ -0,0 +1,43 @@
+[data-theme='dark'],
+[data-theme='dark'] .fe-theme {
+  /* Antd Table 组件变量 */
+  .ant-table-css-var {
+    --fe-table-header-bg: rgb(var(--color-bg-secondary));
+    --fe-table-header-color: rgb(var(--text-primary));
+    --fe-table-header-sort-active-bg: rgb(var(--color-bg-elevated));
+    --fe-table-header-sort-hover-bg: rgb(var(--color-bg-elevated));
+    --fe-table-body-sort-bg: rgb(var(--color-bg-secondary));
+    --fe-table-row-hover-bg: rgb(var(--color-bg-elevated));
+    --fe-table-row-selected-bg: rgba(var(--color-brand), 0.2);
+    --fe-table-row-selected-hover-bg: rgba(var(--color-brand-hover), 0.3);
+    --fe-table-row-expanded-bg: rgba(var(--text-primary), 0.02);
+    --fe-table-cell-padding-block: 16px;
+    --fe-table-cell-padding-inline: 16px;
+    --fe-table-cell-padding-block-md: 12px;
+    --fe-table-cell-padding-inline-md: 8px;
+    --fe-table-cell-padding-block-sm: 8px;
+    --fe-table-cell-padding-inline-sm: 8px;
+    --fe-table-border-color: rgb(var(--color-border));
+    --fe-table-header-border-radius: 8px;
+    --fe-table-footer-bg: rgb(var(--color-bg-secondary));
+    --fe-table-footer-color: rgb(var(--text-primary));
+    --fe-table-cell-font-size: 14px;
+    --fe-table-cell-font-size-md: 14px;
+    --fe-table-cell-font-size-sm: 14px;
+    --fe-table-header-split-color: rgb(var(--color-border));
+    --fe-table-fixed-header-sort-active-bg: rgb(var(--color-bg-elevated));
+    --fe-table-header-filter-hover-bg: rgba(var(--text-primary), 0.06);
+    --fe-table-filter-dropdown-menu-bg: rgb(var(--color-bg-base));
+    --fe-table-filter-dropdown-bg: rgb(var(--color-bg-base));
+    --fe-table-expand-icon-bg: rgb(var(--color-bg-base));
+    --fe-table-selection-column-width: 32px;
+    --fe-table-sticky-scroll-bar-bg: rgba(var(--text-primary), 0.25);
+    --fe-table-sticky-scroll-bar-border-radius: 100px;
+    --fe-table-expand-icon-margin-top: 2.5px;
+    --fe-table-header-icon-color: rgb(var(--text-tertiary));
+    --fe-table-header-icon-hover-color: rgb(var(--text-secondary));
+    --fe-table-expand-icon-half-inner: 7px;
+    --fe-table-expand-icon-size: 17px;
+    --fe-table-expand-icon-scale: 0.9411764705882353;
+  }
+}

package/dist/templates/react-app/src/styles/css/antd-themes/table/index.css

@@ -0,0 +1,3 @@
+@import './_default.css';
+@import './dark.css';
+@import './pink.css';

package/dist/templates/react-app/src/styles/css/antd-themes/table/pink.css

@@ -0,0 +1,43 @@
+[data-theme='pink'],
+[data-theme='pink'] .fe-theme {
+  /* Antd Table 组件变量 */
+  .ant-table-css-var {
+    --fe-table-header-bg: var(--ant-color-bg-container);
+    --fe-table-header-color: var(--ant-color-text);
+    --fe-table-header-sort-active-bg: var(--ant-color-bg-elevated);
+    --fe-table-header-sort-hover-bg: var(--ant-color-bg-elevated);
+    --fe-table-body-sort-bg: var(--ant-color-bg-container);
+    --fe-table-row-hover-bg: var(--ant-color-bg-elevated);
+    --fe-table-row-selected-bg: var(--fe-color-primary-bg);
+    --fe-table-row-selected-hover-bg: rgba(var(--fe-color-primary-hover), 0.2);
+    --fe-table-row-expanded-bg: rgba(var(--ant-color-text), 0.02);
+    --fe-table-cell-padding-block: 16px;
+    --fe-table-cell-padding-inline: 16px;
+    --fe-table-cell-padding-block-md: 12px;
+    --fe-table-cell-padding-inline-md: 8px;
+    --fe-table-cell-padding-block-sm: 8px;
+    --fe-table-cell-padding-inline-sm: 8px;
+    --fe-table-border-color: var(--ant-color-border);
+    --fe-table-header-border-radius: 8px;
+    --fe-table-footer-bg: var(--ant-color-bg-container);
+    --fe-table-footer-color: var(--ant-color-text);
+    --fe-table-cell-font-size: 14px;
+    --fe-table-cell-font-size-md: 14px;
+    --fe-table-cell-font-size-sm: 14px;
+    --fe-table-header-split-color: var(--ant-color-border);
+    --fe-table-fixed-header-sort-active-bg: var(--ant-color-bg-elevated);
+    --fe-table-header-filter-hover-bg: rgba(var(--ant-color-text), 0.06);
+    --fe-table-filter-dropdown-menu-bg: var(--ant-color-bg-container);
+    --fe-table-filter-dropdown-bg: var(--ant-color-bg-container);
+    --fe-table-expand-icon-bg: var(--ant-color-bg-container);
+    --fe-table-selection-column-width: 32px;
+    --fe-table-sticky-scroll-bar-bg: rgba(var(--ant-color-text), 0.25);
+    --fe-table-sticky-scroll-bar-border-radius: 100px;
+    --fe-table-expand-icon-margin-top: 2.5px;
+    --fe-table-header-icon-color: var(--fe-color-icon);
+    --fe-table-header-icon-hover-color: var(--fe-color-icon-hover);
+    --fe-table-expand-icon-half-inner: 7px;
+    --fe-table-expand-icon-size: 17px;
+    --fe-table-expand-icon-scale: 0.9411764705882353;
+  }
+}

package/dist/templates/react-app/src/styles/css/page.css

@@ -11,9 +11,10 @@
   --color-secondary: rgba(var(--color-bg-secondary));
   --color-elevated: rgba(var(--color-bg-elevated));
   --color-text: rgba(var(--text-primary));
+  --color-text-hover: rgba(var(--text-primary-hover));
   --color-text-secondary: rgba(var(--text-secondary));
   --color-text-tertiary: rgba(var(--text-tertiary));
-  --color-border: rgba(var(--color-border));
-  --color-brand: rgba(var(--color-brand));
-  --color-brand-hover: rgba(var(--color-brand-hover));
+  --color-c-border: rgba(var(--color-border));
+  --color-c-brand: rgba(var(--color-brand));
+  --color-c-brand-hover: rgba(var(--color-brand-hover));
 }

package/dist/templates/react-app/src/styles/css/themes/_default.css

@@ -8,6 +8,7 @@
 
     /* 文字颜色 */
     --text-primary: 15 23 42; /* slate-900 */
+    --text-primary-hover: 100 116 139; /* slate-500 */
     --text-secondary: 71 85 105; /* slate-600 */
     --text-tertiary: 100 116 139; /* slate-500 */
 

package/dist/templates/react-app/src/styles/css/themes/dark.css

@@ -8,6 +8,7 @@
 
     /* 文字颜色 */
     --text-primary: 255 255 255;
+    --text-primary-hover: 148 163 184; /* slate-400 */
     --text-secondary: 148 163 184; /* slate-400 */
     --text-tertiary: 100 116 139; /* slate-500 */
 

package/dist/templates/react-app/src/styles/css/themes/pink.css

@@ -8,6 +8,7 @@
 
     /* 文字颜色 */
     --text-primary: 190 18 60; /* rose-700 */
+    --text-primary-hover: 244 63 94; /* rose-500 */
     --text-secondary: 225 29 72; /* rose-600 */
     --text-tertiary: 244 63 94; /* rose-500 */
 

package/dist/templates/react-app/src/styles/css/zIndex.css

@@ -6,4 +6,4 @@
   --zi-select: 1050;
   /* antd message zindex */
   --zi-message: 2010;
-}
+}

package/dist/templates/react-app/src/uikit/bridges/ExecutorPageBridge.ts

@@ -1,16 +1,16 @@
-import { FeApi } from '@/base/apis/feApi/FeApi';
-import cloneDeep from 'lodash/cloneDeep';
+import { RequestState } from '@qlover/corekit-bridge';
 import {
   ExecutorPlugin,
   RequestAdapterResponse,
   RequestAdapterFetchConfig
 } from '@qlover/fe-corekit';
 import { inject, injectable } from 'inversify';
+import cloneDeep from 'lodash/cloneDeep';
+import { FeApi } from '@/base/apis/feApi/FeApi';
 import {
   ExecutorPageBridgeInterface,
   ExecutorPageStateInterface
 } from '@/base/port/ExecutorPageBridgeInterface';
-import { RequestState } from '@/base/cases/RequestState';
 
 class ExecutorPageBridgeState implements ExecutorPageStateInterface {
   helloState = new RequestState();

package/dist/templates/react-app/src/uikit/bridges/JSONStoragePageBridge.ts

@@ -1,8 +1,8 @@
+import { IOCIdentifier } from '@config/IOCIdentifier';
 import { inject, injectable } from 'inversify';
+import random from 'lodash/random';
 import { JSONStoragePageBridgeInterface } from '@/base/port/JSONStoragePageBridgeInterface';
-import { IOCIdentifier } from '@config/IOCIdentifier';
 import type { SyncStorageInterface } from '@qlover/fe-corekit';
-import random from 'lodash/random';
 
 @injectable()
 export class JSONStoragePageBridge extends JSONStoragePageBridgeInterface {

package/dist/templates/react-app/src/uikit/bridges/NavigateBridge.ts

@@ -1,5 +1,5 @@
-import { injectable } from 'inversify';
 import { UIBridgeInterface } from '@qlover/corekit-bridge';
+import { injectable } from 'inversify';
 import { NavigateFunction } from 'react-router-dom';
 
 @injectable()

package/dist/templates/react-app/src/uikit/bridges/RequestPageBridge.ts

@@ -1,13 +1,13 @@
+import { IOCIdentifier } from '@config/IOCIdentifier';
+import { RequestState } from '@qlover/corekit-bridge';
 import { inject, injectable } from 'inversify';
+import { aiHello } from '@/base/apis/AiApi';
 import { FeApi } from '@/base/apis/feApi/FeApi';
 import { UserApi } from '@/base/apis/userApi/UserApi';
-import { aiHello } from '@/base/apis/AiApi';
 import {
   RequestPageBridgeInterface,
   RequestPageStateInterface
 } from '@/base/port/RequestPageBridgeInterface';
-import { RequestState } from '@/base/cases/RequestState';
-import { IOCIdentifier } from '@config/IOCIdentifier';
 import type { LoggerInterface } from '@qlover/logger';
 
 function createDefaultState(): RequestPageStateInterface {

package/dist/templates/react-app/src/uikit/components/AppRouterProvider.tsx

@@ -0,0 +1,35 @@
+import { useStore } from '@brain-toolkit/react-kit';
+import { routerPrefix } from '@config/common';
+import { I } from '@config/IOCIdentifier';
+import { useMemo } from 'react';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import type { ComponentValue } from '@/base/cases/RouterLoader';
+import { RouterLoader } from '@/base/cases/RouterLoader';
+import { RouterRenderComponent } from './RouterRenderComponent';
+import { useIOC } from '../hooks/useIOC';
+
+export function AppRouterProvider(props: { pages: ComponentValue }) {
+  const { pages } = props;
+
+  const routerService = useIOC(I.RouteServiceInterface);
+  const logger = useIOC(I.Logger);
+  const routes = useStore(routerService, (state) => state.routes);
+
+  const routerLoader = useMemo(() => {
+    return new RouterLoader({
+      componentMaps: pages,
+      render: RouterRenderComponent,
+      logger: logger
+    });
+  }, []);
+
+  const routerBase = useMemo(() => {
+    const routeList = routes.map((route) => routerLoader.toRoute(route));
+    const router = createBrowserRouter(routeList, {
+      basename: routerPrefix
+    });
+    return router;
+  }, [routes]);
+
+  return <RouterProvider data-testid="AppRouterProvider" router={routerBase} />;
+}