@creekjs/web-components 1.0.0 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@creekjs/web-components",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -16,4 +16,4 @@
     "antd-style": "^3.7.1",
     "zustand": "^5.0.1"
   }
-}
+}

package/src/creek-hooks/useViewportHeight.tsx

@@ -23,7 +23,7 @@ interface UseViewportHeightOptions {
 }
 
 export const useViewportHeight = (options: UseViewportHeightOptions = {}) => {
-  const { bottomOffset = 0, topOffset, margin = 0, minHeight = 0, maxHeight, debug = false, debounceDelay = 16, deps = [], isObserverParent } = options;
+  const { bottomOffset = 0, topOffset, margin = 0, minHeight = 0, maxHeight, debug = false, debounceDelay = 200, deps = [], isObserverParent } = options;
 
   const [viewPortHeight, setHeight] = useState<number | undefined>(undefined);
   let containerRef = useRef<HTMLDivElement| null>(null);
@@ -141,6 +141,8 @@ export const useViewportHeight = (options: UseViewportHeightOptions = {}) => {
     }
   }, [containerRef.current])
 
+  console.log(viewPortHeight, 'viewPortHeight');
+
   return {
     /** 容器引用，需要绑定到目标元素的容器 */
     containerRef,

package/src/creek-layout/HeaderContent/index.tsx

@@ -5,9 +5,6 @@ import { FullScreen } from './FullScreen';
 import { UserInfo } from './UserInfo';
 
 const useStyles = createStyles(({}) => ({
-  headerContentContainer: {
-    color: '#fff',
-  },
   dividerContainer: {
     backgroundColor: '#9b9999',
   },
@@ -16,7 +13,7 @@ const useStyles = createStyles(({}) => ({
 export const HeaderContent = () => {
   const { styles } = useStyles();
   return (
-    <Flex justify="space-between" className={styles.headerContentContainer}>
+    <Flex justify="space-between">
       <span />
       <Space split={<Divider type="vertical" className={styles.dividerContainer} />}>
         <FullScreen />

package/src/creek-layout/index.tsx

@@ -64,13 +64,13 @@ export const CreekLayout = (props: LayoutProps) => {
       }}
       token={{
         header: {
-          colorBgHeader: "#2c2c2c",
-          colorHeaderTitle: "#fff",
-          colorTextMenuSelected: "#fff",
+          colorBgHeader: "#fff",
+          colorHeaderTitle: "rgba(0, 0, 0, 0.80);",
+          colorTextMenuSelected: token.colorPrimary,
           heightLayoutHeader: 48,
         },
         sider: {
-          colorMenuBackground: "#fff",
+          colorMenuBackground: "#f7f8fa",
           colorBgMenuItemSelected: "transparent",
           colorTextMenuActive: token.colorPrimary,
           colorTextMenuSelected: token.colorPrimary,
@@ -78,8 +78,9 @@ export const CreekLayout = (props: LayoutProps) => {
           colorTextMenu: "#333",
         },
         pageContainer: {
-          paddingBlockPageContainerContent: 0,
-          paddingInlinePageContainerContent: 0,
+          paddingBlockPageContainerContent: 20,
+          paddingInlinePageContainerContent: 20,
+          colorBgPageContainer: 'linear-gradient(180deg, #F7F9FF 0%, #FFF 45.59%);'
         },
       }}
       fixSiderbar

package/src/creek-search/CreekSearch.tsx

@@ -48,6 +48,7 @@ export const CreekSearch = <T extends ParamsType>(props: CreekSearchProps<T>) =>
     justify,
   });
 
+  
   return (
     <CreekSearchProvider columns={columns} onSubmit={onSubmit}>
       <div className={classnames(styles.creekSearchContainer, justify === 'end' && styles.creekSearchContainerEnd)}>

package/src/creek-search/CreekSearchContext.tsx

@@ -276,7 +276,7 @@ export const CreekSearchProvider = <T extends ParamsType, U extends ParamsType,
   const inputRef = useRef<any>(null);
 
   // 筛选条件配置
-  const filterOptions = columns?.filter((item) => item.search !== false || item.hideInSearch !== false);
+  const filterOptions = columns?.filter((item) => !(item.search === false || item.hideInSearch === true));
 
   // 获取valueType配置
   const getValueTypeConfig = (valueType?: ProColumnType<T, U>['valueType']) => {

package/src/creek-table/TableViewContent.tsx

@@ -22,10 +22,12 @@ export const TableViewContent = <T extends ParamsType, U extends ParamsType, Val
     const antdPaginationElement = containerRef.current?.querySelector(`.${prefixCls}-pagination`);
     if (antdTableContentElement) {
       const paginationHeight = antdPaginationElement?.clientHeight || 0;
-      const bottomFix = pageFixedBottomConfig?.bottomFix || 8;
-      const tableContentHeight = mainHeight - paginationHeight - 16 - bottomFix;
+      const bottomFix = pageFixedBottomConfig?.bottomFix || 20;
+      const tableContentHeight = mainHeight - paginationHeight - 32 - bottomFix;
       antdTableContentElement.setAttribute('style', `height: ${tableContentHeight}px`);
     }
+  }, {
+    wait: 16
   });
 
   useDeepCompareEffect(() => {

package/src/creek-table/hooks/useAutoAddFilterToColumns.tsx

@@ -19,7 +19,7 @@ export const useAutoAddFilterToColumns = <T extends ParamsType, U extends Params
   columns,
   autoAddFilterForColumn,
 }: UseAutoAddFilterToColumnsProps<T, U, ValueType>): UseAutoAddFilterToColumnsReturn<T, U, ValueType> => {
-  const { hasOptions, setSelectedColumn, filters } = useSearchContext();
+  const { hasOptions, setSelectedColumn, filters, filterOptions } = useSearchContext();
 
   // 管理每列的下拉框状态
   const [filterOpenMap, setFilterOpenMap] = useSafeState<Record<string, boolean>>({});
@@ -48,7 +48,7 @@ export const useAutoAddFilterToColumns = <T extends ParamsType, U extends Params
   // 自动为列添加筛选功能
   const autoAddFilterToColumns = useMemoizedFn((columns: CreekTableProps<T, U, ValueType>['columns'] = []) => {
     return columns.map((column) => {
-      if (hasOptions(column)) {
+      if (hasOptions(column) && filterOptions?.map(item => item.dataIndex).includes(column.dataIndex as string)) {
         const newColumn = { ...column };
         const columnKey = getColumnKey(newColumn as ProColumnType<T, U>);