cfel-base-components 0.0.1

package/.babelrc

@@ -0,0 +1,7 @@
+{
+    "presets": [
+        "@babel/preset-env",
+        "@babel/preset-react",
+        "@babel/preset-typescript"
+    ]
+}

package/config/webpack.base.js

@@ -0,0 +1,20 @@
+module.exports = {
+    resolve: {
+        // 定义 import 引用时可省略的文件后缀名
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+    },
+    module: {
+        rules: [
+            {
+                // 编译处理 js 和 jsx 文件
+                test: /(\.js(x?))|(\.ts(x?))$/,
+                use: [
+                    {
+                        loader: 'babel-loader'
+                    }
+                ],
+                exclude: /node_modules/, // 只解析 src 目录下的文件
+            }
+        ]
+    },
+}; 

package/config/webpack.dev.config.js

@@ -0,0 +1,62 @@
+const path = require('path');
+const { merge } = require('webpack-merge');
+const baseConfig = require('./webpack.base.js'); // 公共配置
+
+const devConfig = {
+    mode: 'development', // 开发模式
+    entry: path.join(__dirname, "../demo/src/index.jsx"), // 入口，处理资源文件的依赖关系
+    output: {
+        path: path.join(__dirname, "../demo/src/"),
+        filename: "dev.js",
+    },
+    module: {
+        rules: [
+            {
+                test: /.s[ac]ss$/,
+                exclude: /.min.css$/,
+                use: [
+                    { loader: 'style-loader' },
+                    {
+                        loader: 'css-loader',
+                        options: {
+                            modules: {
+                                mode: "global"
+                            }
+                        }
+                    },
+                    {
+                        loader: 'postcss-loader',
+                        options: {
+                            postcssOptions: {
+                                plugins: [
+                                    [
+                                        'postcss-preset-env',
+                                        {
+                                            // 其他选项
+                                        },
+                                    ],
+                                ],
+                            },
+                        },
+                    },
+                    { loader: 'sass-loader' }
+                ]
+            },
+            {
+                test: /.min.css$/,
+                use: [
+                    { loader: 'style-loader' },
+                    { loader: 'css-loader' }
+                ]
+            }
+        ]
+    },
+    devServer: {
+        static: path.join(__dirname, '../demo/src/'),
+        compress: true,
+        host: '127.0.0.1',
+        port: 8686, // 启动端口
+        open: true // 打开浏览器
+    },
+};
+module.exports = merge(devConfig, baseConfig); // 合并配置

package/config/webpack.prod.config.js

@@ -0,0 +1,70 @@
+const path = require('path');
+const { merge } = require('webpack-merge');
+const baseConfig = require('./webpack.base.js'); // 引用公共的配置
+const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 用于将组件的css打包成单独的文件输出到`lib`目录中
+
+const prodConfig = {
+    mode: 'production', // 生产模式
+    entry: path.join(__dirname, "../src/index.tsx"),
+    output: {
+        path: path.join(__dirname, "../lib/"),
+        filename: "index.js",
+        libraryTarget: 'umd', // 采用通用模块定义
+        libraryExport: 'default', // 兼容 ES6 Module、CommonJS 和 AMD 模块规范
+    },
+    module: {
+        rules: [
+            {
+                test: /.s[ac]ss$/,
+                exclude: /.min.css$/,
+                use: [
+                    { loader: MiniCssExtractPlugin.loader },
+                    {
+                        loader: 'css-loader',
+                        options: {
+                            modules: {
+                                mode: "global"
+                            }
+                        }
+                    },
+                    {
+                        loader: 'postcss-loader',
+                        options: {
+                            postcssOptions: {
+                                plugins: [
+                                    [
+                                        'postcss-preset-env',
+                                        {
+                                            // 其他选项
+                                        },
+                                    ],
+                                ],
+                            },
+                        },
+                    },
+                    { loader: 'sass-loader' }
+                ]
+            }
+        ]
+    },
+    plugins: [
+        new MiniCssExtractPlugin({
+            filename: "index.min.css" // 提取后的css的文件名
+        })
+    ],
+    externals: { // 定义外部依赖，避免把react和react-dom打包进去
+        react: {
+            root: "React",
+            commonjs2: "react",
+            commonjs: "react",
+            amd: "react"
+        },
+        "react-dom": {
+            root: "ReactDOM",
+            commonjs2: "react-dom",
+            commonjs: "react-dom",
+            amd: "react-dom"
+        }
+    },
+};
+module.exports = merge(prodConfig, baseConfig); // 合并配置

package/demo/src/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>text-width-auto-label</title>
+    <style>
+        html, body, p {
+            margin: 0;
+            padding: 0;
+        }
+    </style>
+</head>
+<body>
+    <div id="root"></div>
+    <script src="dev.js"></script>
+</body>
+</html>

package/demo/src/index.jsx

@@ -0,0 +1,30 @@
+import React from "react"
+import { createRoot } from 'react-dom/client';
+import { WidthAutoLabel } from '../../src/index'; // 引入组件
+import './index.scss';
+// import WidthAutoLabel from 'text-width-auto-label';
+
+const App = () => {
+    return (
+        <div className="container">
+            <div className="text">
+                <p>示例文本：</p><p>文本宽度自适应标签组件</p>
+            </div>
+            <div className="normal">
+                <p>宽度100px：</p><p>文本宽度自适应标签组件</p>
+            </div>
+            <div className="style1">
+                <p>宽度100px：</p><p><WidthAutoLabel>文本宽度自适应标签组件</WidthAutoLabel></p>
+            </div>
+            <div className="style2">
+                <p>宽度80px：</p><p><WidthAutoLabel>文本宽度自适应标签组件</WidthAutoLabel></p>
+            </div>
+            <div className="style3">
+                <p>宽度50px：</p><p><WidthAutoLabel>文本宽度自适应标签组件</WidthAutoLabel></p>
+            </div>
+        </div>
+    );
+}
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(<App />);

package/demo/src/index.scss

@@ -0,0 +1,60 @@
+.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;
+        }
+    }
+}

package/lib/index.js

@@ -0,0 +1 @@
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"));else if("function"==typeof define&&define.amd)define(["react"],t);else{var r="object"==typeof exports?t(require("react")):t(e.React);for(var o in r)("object"==typeof exports?exports:e)[o]=r[o]}}(self,(e=>(()=>{"use strict";var t={787:t=>{t.exports=e}},r={};var o={};return function e(o){var f=r[o];if(void 0!==f)return f.exports;var p=r[o]={exports:{}};return t[o](p,p.exports,e),p.exports}(787),o.default})()));

package/lib/index.min.css

@@ -0,0 +1,2 @@
+.aaa-button{color:red}
+

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "cfel-base-components",
+  "version": "0.0.1",
+  "description": "cfel-base-components",
+  "main": "/src/index.tsx",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "webpack-dev-server --config config/webpack.dev.config.js",
+    "build": "webpack --config config/webpack.prod.config.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@codeup.aliyun.com:644a10bf88aef0db4b8c1edc/front/base-components.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/cli": "^7.22.5",
+    "@babel/core": "^7.22.5",
+    "@babel/preset-env": "^7.22.5",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.5",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
+    "babel-loader": "^8.2.5",
+    "css-loader": "^6.8.1",
+    "mini-css-extract-plugin": "^2.7.6",
+    "node-sass": "^9.0.0",
+    "postcss": "^8.4.24",
+    "postcss-loader": "^7.3.3",
+    "postcss-preset-env": "^8.5.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sass-loader": "^13.3.2",
+    "style-loader": "^3.3.3",
+    "ts-loader": "^9.4.4",
+    "webpack": "^5.88.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1",
+    "webpack-merge": "^5.9.0"
+  }
+}

package/src/components/button/index.scss

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

package/src/components/button/index.tsx

@@ -0,0 +1,16 @@
+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/widthAutoLabelProps/index.tsx

@@ -0,0 +1,54 @@
+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;

package/src/index.d.ts

@@ -0,0 +1,4 @@
+declare module '*.scss' { 
+    const content: any; 
+    export default content; 
+}

package/src/index.tsx

@@ -0,0 +1,8 @@
+import WidthAutoLabel from './components/widthAutoLabelProps'
+import Button from './components/button'
+
+
+export {
+    WidthAutoLabel,
+    Button
+}