cfel-base-components 0.0.25 → 1.0.1

package/config/webpack.base.js

@@ -14,7 +14,16 @@ module.exports = {
                     }
                 ],
                 exclude: /node_modules/, // 只解析 src 目录下的文件
-            }
+            },
+            {
+                test: /\.module\.less$/, // 匹配以 .module.less 结尾的文件
+                use: [
+                    'style-loader', // 将样式注入到页面中
+                    'css-loader',   // 处理 CSS 文件
+                    'less-loader',  // 处理 LESS 文件
+                ],
+                exclude: /node_modules/, // 只解析 src 目录下的文件
+            },
         ]
     }
 }; 

package/demo/src/index.jsx

@@ -1,37 +1,19 @@
 import React from "react"
 import { createRoot } from 'react-dom/client';
-import './index.scss';
-import Layout from '../../src/components/layout';
-import Account from '../../src/components/account';
-import AccountInfo from '../../src/components/accountinfo';
-import Role from '../../src/components/role';
-import RoleInfo from '../../src/components/roleinfo';
-
-
+import style from './index.module.less';
 
+import './index.scss';
+import PageContainer from '../../src/components/base-component/PageContainer';
+// import Layout from '../../src/components/layout';
+// import Account from '../../src/components/universal-pages/account';
+// import AccountInfo from '../../src/components/universal-pages/accountInfo';
+// import Role from '../../src/components/universal-pages/role';
+// import RoleInfo from '../../src/components/universal-pages/roleInfo';
 
 const App = () => {
-    return (
-        // < Layout appName="123123" productCode="lios-iot-wifi"
-        //     user={{
-        //         name: "\u5434\u6668\u61CB\uFF08\u592A\u4E00\uFF09",
-        //         avatar: "https:\/\/static-legacy.dingtalk.com\/media\/lQLPM5AkqOufBy7NAyDNAyCwJZ592czMOC4EeIgNJAAGAA_800_800.png",
-        //         tenantName: "\u8FDC\u822A\u8DE8\u56FD\u63A7\u80A1\u96C6\u56E2",
-        //         role:["超级管理员","超管","子管理员","超级管理员","超级管理员123","子管理员","超级管理员","超级管理员123","子管理员","超级管理员","超级管理员123超级管理员123超级管理员123超级管理员123","子管理员"]
-        //         // role:["超级管理员"]
-        //     }}
-        // >
-        // </Layout >
-        <>
-            
-            {/* <Account></Account> */}
-
-            {/* <AccountInfo /> */}
-            {/* <Role ></Role> */}
-
-            <RoleInfo/>
-        </>
-    );
+    return <PageContainer className={"aaa"}>
+        123
+    </PageContainer>
 }
 const container = document.getElementById('root');
 const root = createRoot(container);

package/demo/src/index.module.less

@@ -0,0 +1,3 @@
+.aaa {
+    background: red;
+}

package/demo/src/index.scss

@@ -1,60 +1,3 @@
-.container {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    margin-top: 30px;
-    font-size: 14px;
-    font-weight: bold;
-    color: #333;
-    .text {
-        display: flex;
-        align-items: center;
-        p:nth-child(2) {
-            color: #f00;
-        }
-    }
-    .normal {
-        display: flex;
-        align-items: center;
-        margin-top: 10px;
-        p:nth-child(2) {
-            width: 100px;
-            height: 32px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            border: 1px solid #ccc;
-        }
-    }
-    .style1 {
-        display: flex;
-        align-items: center;
-        margin-top: 10px;
-        p:nth-child(2) {
-            width: 100px;
-            height: 32px;
-            border: 1px solid #ccc;
-        }
-    }
-    .style2 {
-        display: flex;
-        align-items: center;
-        margin-top: 10px;
-        p:nth-child(2) {
-            width: 70px;
-            height: 32px;
-            border: 1px solid #ccc;
-        }
-    }
-    .style3 {
-        display: flex;
-        align-items: center;
-        margin-top: 10px;
-        p:nth-child(2) {
-            width: 40px;
-            height: 32px;
-            border: 1px solid #ccc;
-        }
-    }
+.bbb {
+    background: cyan;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cfel-base-components",
-  "version": "0.0.25",
+  "version": "1.0.1",
   "description": "cfel-base-components",
   "main": "/src/index.tsx",
   "types": "src/index.d.ts",
@@ -21,10 +21,15 @@
     "@babel/preset-env": "^7.22.5",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
+    "@types/lodash": "^4.14.195",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
+    "axios": "^1.4.0",
     "babel-loader": "^8.2.5",
+    "classnames": "^2.3.2",
     "css-loader": "^6.8.1",
+    "less-loader": "^11.1.3",
+    "lodash": "^4.17.21",
     "mini-css-extract-plugin": "^2.7.6",
     "node-sass": "^9.0.0",
     "postcss": "^8.4.24",
@@ -38,14 +43,14 @@
     "webpack": "^5.88.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",
-    "webpack-merge": "^5.9.0",
-    "axios": "^1.4.0",
-    "lodash": "^4.17.21",
-    "@types/lodash": "^4.14.195"
+    "webpack-merge": "^5.9.0"
   },
   "peerDependencies": {
     "@ant-design/icons": "^5.1.4",
     "@ant-design/pro-components": "^2.6.12",
     "antd": "^5.5.2"
+  },
+  "dependencies": {
+    "dayjs": "^1.11.9"
   }
 }

package/src/components/base-component/PageContainer/index.module.less

@@ -0,0 +1,13 @@
+.page-container {
+  position: relative;
+  background: white;
+  border-radius: 8px;
+  flex: 1;
+
+  .foot-empower {
+    text-align: center;
+    color: #ccc;
+    font-size: 12px;
+    padding: 4px;
+  }
+}

package/src/components/base-component/PageContainer/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import classnames from 'classnames/bind';
+import styles from "./index.module.less"
+const cx = classnames.bind(styles);
+
+export default function PageContainer({
+  className,
+  children,
+  ...restFileds
+}: any) {
+  return (
+    <div
+      className={cx({
+        "page-container": true,
+        [className]: true,
+      })}
+      {...restFileds}
+    >
+      <div>
+        {children}
+      </div>
+
+      <div className={cx("foot-empower")}>
+        ©{new Date().getFullYear() || ''} 橙蜂而来{' '}
+      </div>
+    </div>
+  )
+}

package/src/components/base-component/Pagination/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Pagination, PaginationProps } from 'antd';
+import classnames from 'classnames/bind';
+import styles from "./index.module.less"
+const cx = classnames.bind(styles);
+
+export default function PaginationComponent({
+  className,
+  ...restFileds
+}: PaginationProps | any) {
+  return (<Pagination
+    className={cx({
+      pagination: true,
+      [className]: true
+    })}
+    showQuickJumper
+    showSizeChanger
+    showTotal={(total) => `共 ${total} 条`}
+    {...restFileds}
+  />
+  )
+}

package/src/components/base-component/ProTable/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import {
+  ProTable,
+  ProTableProps
+} from '@ant-design/pro-components';
+import classnames from 'classnames/bind';
+import styles from "./index.module.less"
+const cx = classnames.bind(styles);
+
+export default function ProTableComponent({
+  className,
+  ...restFileds
+}: ProTableProps<any, any> | any) {
+  return (
+    <ProTable
+      className={cx({
+        "pro-table": true,
+        [className]: true
+      })}
+      search={false}
+      pagination={false}
+      scroll={{
+        x: 'max-content'
+      }}
+      {...restFileds}
+    />
+  )
+
+}

package/src/components/base-component/QueryFilter/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import {
+  QueryFilter,
+  QueryFilterProps
+} from '@ant-design/pro-components';
+import classnames from 'classnames/bind';
+import styles from "./index.module.less"
+const cx = classnames.bind(styles);
+
+export default function PaginationComponent({
+  className,
+  ...restFileds
+}: QueryFilterProps<any> | any) {
+  return (
+    <QueryFilter
+      className={cx({
+        "query-filter": true,
+        [className]: true,
+      })}
+      layout="vertical"
+      {...restFileds}
+    />
+  )
+}

package/src/components/layout/index.scss

@@ -162,7 +162,7 @@ body {
     width: 100%;
     height: calc(100vh - 48px);
     overflow-y: auto;
-    padding: 16px 16px 5px;
+    padding: 16px 16px 0;
     display: flex;
     flex-direction: column;
 }

package/src/components/{account → universal-pages/account}/api.ts

@@ -1,4 +1,4 @@
-import request from "../../apiRequest/config"
+import request from "../../../apiRequest/config"
 
 //分页查询账号
 export const accountPage= (data?: any) => {

package/src/components/{account → universal-pages/account}/index.tsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useRef, useState } from 'react';
-import useTableHooks from "../../hooks/useTableHooks"
-import PageContainer from '../PageContainer';
-import QueryFilter from '../QueryFilter';
-import ProTable from '../ProTable';
-import Pagination from '../Pagination';
-import { ProFormText,} from '@ant-design/pro-components';
+import PageContainer from '../../base-component/PageContainer';
+import QueryFilter from '../../base-component/QueryFilter';
+import ProTable from '../../base-component/ProTable';
+import Pagination from '../../base-component/Pagination';
+import { ProFormText, } from '@ant-design/pro-components';
 import { Space, } from 'antd';
 import { get } from 'lodash';
-import { timeFormatter } from '../../utils';
+import { timeFormatter } from '../../../utils';
+import useTableHooks from "../../../hooks/useTableHooks"
 import { accountPage } from "./api"
 
 import "./index.scss"
@@ -18,7 +18,7 @@ export interface AccountProps {
 
 export default function Account({
   historyAction
-}:AccountProps) {
+}: AccountProps) {
   const searchFormRef: any = useRef()
 
   useEffect(() => {
@@ -89,8 +89,8 @@ export default function Account({
       fixed: 'right',
       width: 80,
       render: (rowdata: any) => (
-         
-       <Space>
+
+        <Space>
           <a
             onClick={() => {
               historyAction?.push({

package/src/components/{accountInfo → universal-pages/accountInfo}/api.ts

@@ -1,4 +1,4 @@
-import request from "../../apiRequest/config"
+import request from "../../../apiRequest/config"
 
 //按账号id查询账号信息
 export const getAccount= (data?: any) => {

package/src/components/{accountInfo → universal-pages/accountInfo}/index.tsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useRef, useState } from 'react';
-import useTableHooks from "../../hooks/useTableHooks"
-import Pagecontainer from '../PageContainer';
-import ProTable from '../ProTable';
-import Pagination from '../Pagination';
+import PageContainer from '../../base-component/PageContainer';
+import QueryFilter from '../../base-component/QueryFilter';
+import ProTable from '../../base-component/ProTable';
+import Pagination from '../../base-component/Pagination';
 import { get } from 'lodash';
 import { Modal, Button, Divider, Descriptions, Space, message, Avatar } from 'antd';
 import { UserOutlined } from '@ant-design/icons';
 import EditAccountDrawer from './EditAccountDrawer/index'
-import { timeFormatter, getUrlParams } from '../../utils';
+import { timeFormatter, getUrlParams } from '../../../utils';
 import {
   getAccount,
   pageBoundRoles,
@@ -175,7 +175,7 @@ export default function AccountInfo() {
     })
   }
   return (
-    <Pagecontainer>
+    <PageContainer>
       <Divider orientation="left">
         <Avatar
           style={{ backgroundColor: '#1677ff', marginRight: '8px' }}
@@ -222,7 +222,7 @@ export default function AccountInfo() {
         roleCheckData={roleCheckData} //当前角色选中数据
         isBoundRolesFunc={isBoundRolesFunc}
       ></EditAccountDrawer>
-    </Pagecontainer>
+    </PageContainer>
   )
 
 }

package/src/components/{role → universal-pages/role}/api.ts

@@ -1,4 +1,4 @@
-import request from "../../apiRequest/config"
+import request from "../../../apiRequest/config"
 
 export const pageRequest = (data?: any) => {
     return request.post("/api/permission/role/page.json", { ...data })

package/src/components/{role → universal-pages/role}/index.tsx

@@ -1,16 +1,16 @@
 import React, { useEffect, useRef } from 'react';
-import useTableHooks from "../../hooks/useTableHooks"
+import useTableHooks from "../../../hooks/useTableHooks"
 
-import PageContainer from '../PageContainer';
-import QueryFilter from '../QueryFilter';
-import ProTable from '../ProTable';
-import Pagination from '../Pagination';
+import PageContainer from '../../base-component/PageContainer';
+import QueryFilter from '../../base-component/QueryFilter';
+import ProTable from '../../base-component/ProTable';
+import Pagination from '../../base-component/Pagination';
 import { get } from 'lodash';
 import { Space, } from 'antd';
 import { pageRequest, } from "./api"
 
 import { ProFormText, } from '@ant-design/pro-components';
-import { timeFormatter } from '../../utils';
+import { timeFormatter } from '../../../utils';
 
 import "./index.scss"
 export interface RoleProps {
@@ -19,7 +19,7 @@ export interface RoleProps {
 
 export default function Role({
   historyAction
-}:RoleProps) {
+}: RoleProps) {
   const searchFormRef: any = useRef()
 
   useEffect(() => {
@@ -67,7 +67,7 @@ export default function Role({
       width: 80,
       fixed: "right",
       render: (rowdata: any,) => <Space>
-        <a  onClick={() => {
+        <a onClick={() => {
           historyAction?.push({
             pathname: `/role-info`,
             search: `?roleCode=${rowdata.roleCode}`,

package/src/components/{roleInfo → universal-pages/roleInfo}/api.ts

@@ -1,4 +1,4 @@
-import request from "../../apiRequest/config"
+import request from "../../../apiRequest/config"
 
 //根据角色分页查询绑定的账号
 export const pageBoundAccounts= (data?: any) => {

package/src/components/universal-pages/roleInfo/index.scss

@@ -0,0 +1,3 @@
+.basicInfoWrap {
+  padding: 0 24px
+}

package/src/components/{roleInfo → universal-pages/roleInfo}/index.tsx

@@ -1,15 +1,15 @@
 import React, { useEffect, useRef, useState } from 'react';
-import useTableHooks from "../../hooks/useTableHooks"
+import useTableHooks from "../../../hooks/useTableHooks"
 
-import PageContainer from '../PageContainer';
-import QueryFilter from '../QueryFilter';
-import ProTable from '../ProTable';
-import Pagination from '../Pagination';
+import PageContainer from '../../base-component/PageContainer';
+import QueryFilter from '../../base-component/QueryFilter';
+import ProTable from '../../base-component/ProTable';
+import Pagination from '../../base-component/Pagination';
 import { get } from 'lodash';
 import { ProFormText, } from '@ant-design/pro-components';
 import { Button, Divider, Modal, Descriptions, Space, message } from 'antd';
 import EditAccountDrawer from './EditAccountDrawer/index'
-import { timeFormatter, getUrlParams } from '../../utils';
+import { timeFormatter, getUrlParams } from '../../../utils';
 import {
   pageBoundAccounts,
   roleBoundAccounts,
@@ -19,7 +19,7 @@ import {
 } from './api'
 import "./index.scss"
 
-export default function RoleInfo(){
+export default function RoleInfo() {
   const searchFormRef: any = useRef()
   const [roleCode, setRoleCode] = useState('')
   const [roleInfo, setRoleInfo]: any = useState({})
@@ -190,8 +190,8 @@ export default function RoleInfo(){
     searchFormRef.current = { ...values }
     execute({ "roleCode": roleCode })
   }
-  return(
-<PageContainer>
+  return (
+    <PageContainer>
       <Divider orientation="left">{roleInfo?.roleName || "-"}</Divider>
       <Descriptions className="basicInfoWrap">
         <Descriptions.Item label="角色名称">{roleInfo?.roleName || ''}</Descriptions.Item>

package/src/index.d.ts

@@ -3,4 +3,11 @@ declare module '*.scss' {
     export default content;
 }
 
-export * from './index';
+declare module '*.module.less' {
+    const content: any;
+    export default content;
+}
+
+declare module '*.less'
+
+// export * from './index';

package/src/index.tsx

@@ -1,12 +1,13 @@
 import LiosLayout, { LiosLayoutlProps } from './components/layout'
-import PageContainer from './components/PageContainer'
-import QueryFilter from './components/QueryFilter'
-import ProTable from './components/ProTable'
-import Pagination from './components/Pagination'
-import Account from './components/account'
-import AccountInfo from './components/accountInfo'
-import Role from './components/role'
-import RoleInfo from './components/roleInfo'
+
+import PageContainer from './components/base-component/PageContainer'
+import QueryFilter from './components/base-component/QueryFilter'
+import ProTable from './components/base-component/ProTable'
+import Pagination from './components/base-component/Pagination'
+import Account from './components/universal-pages/account'
+import AccountInfo from './components/universal-pages/accountInfo'
+import Role from './components/universal-pages/role'
+import RoleInfo from './components/universal-pages/roleInfo'
 import request from './apiRequest/config'
 import iotRequest from './apiRequest/iotConfig'
 import { getUrlParams, downloadFile, timeFormatter } from './utils/index'
@@ -17,10 +18,12 @@ export {
     QueryFilter,
     ProTable,
     Pagination,
+
     Account,
     AccountInfo,
     Role,
     RoleInfo,
+    
     request,
     iotRequest,
     getUrlParams, 

package/.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-    "typescript.tsdk": "node_modules/typescript/lib"
-}

package/src/.umi/core/helmet.ts

@@ -1,10 +0,0 @@
-// @ts-nocheck
-// This file is generated by Umi automatically
-// DO NOT CHANGE IT MANUALLY!
-import React from 'react';
-import { HelmetProvider } from '/Users/wujingang/Desktop/workspace/base-components/node_modules/@umijs/renderer-react';
-import { context } from './helmetContext';
-
-export const innerProvider = (container) => {
-  return React.createElement(HelmetProvider, { context }, container);
-}

package/src/.umi/core/helmetContext.ts

@@ -1,4 +0,0 @@
-// @ts-nocheck
-// This file is generated by Umi automatically
-// DO NOT CHANGE IT MANUALLY!
-export const context = {};

package/src/components/PageContainer/index.scss

@@ -1,13 +0,0 @@
-.page-container {
-    background: white;
-    border-radius: 8px;
-    flex: 1;
-    position: relative;
-  }
-  .page-footEmpower {
-    text-align: center;
-    color: #b6b6b6;
-    font-size: 10px;
-    padding: 4px 0px;
-  }
-  

package/src/components/PageContainer/index.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import "./index.scss"
-
-
-export default function PageContainer({
-  className,
-  children,
-  ...restFileds
-}: any) {
-  return (
-    <>
-      <div
-        className={`page-container ${className}`}
-        {...restFileds}
-      >
-        {children}
-      </div>
-      <div className="page-footEmpower">
-        ©{new Date().getFullYear() || ''} 橙蜂而来{' '}
-      </div>
-    </>)
-}

package/src/components/Pagination/index.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { Pagination, PaginationProps } from 'antd';
-import "./index.scss"
-
-export default function PaginationComponent (props: PaginationProps){
-  const { className } = props
-  return (
-    <div
-      className={`pagination ${className}`}
-    >
-      <Pagination
-        showQuickJumper
-        showSizeChanger
-        showTotal={(total) => `共 ${total} 条`}
-        {...props}
-      />
-    </div>
-  )
-
-}

package/src/components/ProTable/index.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import {
-  ProTable,
-  ProTableProps
-} from '@ant-design/pro-components';
-import "./index.scss"
-
-export default function ProTableComponent (props: ProTableProps<any,any>){
-  const { className } = props
-  return (
-    <ProTable
-      className={`protable ${className}`}
-      search={false}
-      pagination={false}
-      scroll={{
-        x: 'max-content'
-      }}
-      {...props}
-    />
-  )
-
-}

package/src/components/QueryFilter/index.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import {
-  QueryFilter,
-  QueryFilterProps
-} from '@ant-design/pro-components';
-import "./index.scss"
-
-
-
-export default function PaginationComponent (props: QueryFilterProps<any>){
-  const { className } = props
-  return (
-    <QueryFilter
-      className={`queryfilter ${className}`}
-      layout="vertical"
-      {...props}
-    />
-  )
-
-}

package/src/components/button/index.tsx

@@ -1,16 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import "./index.scss"
-interface WidthAutoLabelProps {
-    children: string;  // 要绘制的文本
-}
-
-/**
- * 文本宽度自适应标签组件
- * @param props
- * @constructor
- */
-const Button = (props: WidthAutoLabelProps) => {
-  return <div className='aaa-button'>123</div>
-}
-
-export default Button;

package/src/components/roleInfo/index.scss

@@ -1,3 +0,0 @@
-.basicInfoWrap{
-    padding:0 24px
-  }

package/src/components/widthAutoLabelProps/index.tsx

@@ -1,54 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-
-interface WidthAutoLabelProps {
-    children: string;  // 要绘制的文本
-}
-
-/**
- * 文本宽度自适应标签组件
- * @param props
- * @constructor
- */
-const WidthAutoLabel = (props: WidthAutoLabelProps) => {
-    const { children = '' } = props;
-    const ref = useRef<any>(null);
-
-    useEffect(() => {
-        drawText();
-    }, [children]);
-
-
-    const drawText = () => {
-        let canvas = ref.current;
-        if (!canvas) {
-            return;
-        }
-        let parentNode = canvas.parentNode;
-        if (!parentNode) {
-            return;
-        }
-        const { fontSize, fontStyle, fontWeight, fontFamily } = getComputedStyle(parentNode, null);
-        const { clientWidth, clientHeight } = parentNode;
-        canvas.width = clientWidth;
-        canvas.height = clientHeight;
-        let ctx = canvas.getContext("2d");
-        // 设置文本样式
-        ctx.font = `${fontStyle} ${fontWeight} ${fontSize} ${fontFamily}`;
-        ctx.textBaseline = 'top';
-        let y = Math.ceil((clientHeight - Number(fontSize.replace('px', ''))) / 2);
-        let x = 0;
-        // 居中显示
-        const { width: textWidth } = ctx.measureText(children);
-        if (textWidth < clientWidth) {
-            x = (clientWidth - textWidth) / 2;
-        }
-        // 绘制文本
-        ctx.fillText(children, x, y, clientWidth);
-    }
-
-    return (
-        <canvas ref={ref}></canvas>
-    )
-}
-
-export default WidthAutoLabel;