@qlover/create-app 0.7.15 → 0.8.0

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} />;
+}

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

@@ -1,18 +1,22 @@
-import ThemeSwitcher from '@/uikit/components/ThemeSwitcher';
-import LocaleLink from '@/uikit/components/LocaleLink';
-import LanguageSwitcher from '@/uikit/components/LanguageSwitcher';
+import { IOCIdentifier } from '@config/IOCIdentifier';
 import { PublicAssetsPath } from '@/base/cases/PublicAssetsPath';
-import { IOC } from '@/core/IOC';
-import LogoutButton from './LogoutButton';
+import { LanguageSwitcher } from '@/uikit/components/LanguageSwitcher';
+import { LocaleLink } from '@/uikit/components/LocaleLink';
+import { ThemeSwitcher } from '@/uikit/components/ThemeSwitcher';
+import { LogoutButton } from './LogoutButton';
+import { useIOC } from '../hooks/useIOC';
 
-export default function BaseHeader({
+export function BaseHeader({
   showLogoutButton
 }: {
   showLogoutButton?: boolean;
 }) {
+  const AppConfig = useIOC(IOCIdentifier.AppConfig);
+  const publicAssetsPath = useIOC(PublicAssetsPath);
+
   return (
     <header
-      data-testid="base-header"
+      data-testid="BaseHeader"
       className="h-14 bg-secondary border-b border-border sticky top-0 z-50"
     >
       <div className="flex items-center justify-between h-full px-4 mx-auto max-w-7xl">
@@ -22,16 +26,16 @@ export default function BaseHeader({
             className="flex items-center hover:opacity-80 transition-opacity"
           >
             <img
-              data-testid="base-header-logo"
-              src={IOC(PublicAssetsPath).getPath('/logo.svg')}
+              data-testid="BaseHeader-logo"
+              src={publicAssetsPath.getPath('/logo.svg')}
               alt="logo"
               className="h-8 w-auto"
             />
             <span
-              data-testid="base-header-app-name"
+              data-testid="BaseHeader-app-name"
               className="ml-2 text-lg font-semibold text-text"
             >
-              {IOC('AppConfig').appName}
+              {AppConfig.appName}
             </span>
           </LocaleLink>
         </div>

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

@@ -1,18 +1,21 @@
-import { PropsWithChildren } from 'react';
-import { RouteMeta } from '@/base/types/Page';
+import type { RouteMeta } from '@/base/types/Page';
 import { BaseRoutePageContext } from '@/uikit/contexts/BaseRouteContext';
-import { useDocumentTitle } from '@/uikit/hooks/useDocumentTitle';
-import { IOC } from '@/core/IOC';
-import { useTranslation } from 'react-i18next';
+import { BaseRouteSeo } from './BaseRouteSeo';
+import type { PropsWithChildren } from 'react';
 
-export default function BaseRouteProvider(props: PropsWithChildren<RouteMeta>) {
-  const { t } = useTranslation();
-
-  useDocumentTitle(props.title ? t(props.title) : IOC('AppConfig').appName);
+export function BaseRouteProvider(props: PropsWithChildren<RouteMeta>) {
+  const { children, ..._props } = props;
 
   return (
-    <BaseRoutePageContext.Provider value={props}>
-      {props.children}
+    <BaseRoutePageContext.Provider
+      data-testid="BaseRouteProvider"
+      value={_props}
+    >
+      {typeof _props.i18nInterface === 'object' &&
+        _props.i18nInterface != null &&
+        Object.keys(_props.i18nInterface).length > 0 && <BaseRouteSeo />}
+
+      {children}
     </BaseRoutePageContext.Provider>
   );
 }

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

@@ -0,0 +1,18 @@
+import type { PageI18nInterface } from '@config/i18n/PageI18nInterface';
+import { ClientSeo } from './ClientSeo';
+import { useBaseRoutePage } from '../contexts/BaseRouteContext';
+
+export function BaseRouteSeo() {
+  const { i18nInterface } = useBaseRoutePage();
+
+  if (!i18nInterface) {
+    return null;
+  }
+
+  return (
+    <ClientSeo
+      data-testid="BaseRouteSeo"
+      i18nInterface={i18nInterface as unknown as PageI18nInterface}
+    />
+  );
+}

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

@@ -0,0 +1,13 @@
+'use client';
+import { clientIOC } from '@/core/clientIoc/ClientIOC';
+import { IOCContext } from '../contexts/IOCContext';
+
+export function BootstrapsProvider(props: { children: React.ReactNode }) {
+  const IOC = clientIOC.create();
+
+  return (
+    <IOCContext.Provider data-testid="BootstrapsProvider" value={IOC}>
+      {props.children}
+    </IOCContext.Provider>
+  );
+}