{"_id":"@adomtheme/dict-tel","_rev":"2-134f013e71a7a9fc28ce5f23cbd8343d","name":"@adomtheme/dict-tel","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.1":{"name":"@adomtheme/dict-tel","version":"0.0.1","author":"","license":"ISC","_id":"@adomtheme/dict-tel@0.0.1","maintainers":[{"name":"wujian666","email":"sunboyjian@126.com"}],"dist":{"shasum":"bd4edb9653793da25b371b41f77ef5211e30a31b","tarball":"https://registry.npmjs.org/@adomtheme/dict-tel/-/dict-tel-0.0.1.tgz","fileCount":22,"integrity":"sha512-hTjdLbOI0B5/4Hs99A6On9GJ3+oV4FhXPKuOv2GZkOpMPqjCt9U9uC/eZGL3E4CCJbao+fCv3fYA5fHWN15PfA==","signatures":[{"sig":"MEYCIQDlk45LlbBrdbQtRbDna3IBRZsu78nLOlRS/dCgWM2f8AIhAJBc0YigDgSP7qxLJ0xeaIkETfXCJgUwzIVdKQ4LkTaM","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":81577},"main":"js/theme.js","module":"js/theme.js","gitHead":"80d574b26849f7ed260179fa95a1f3da7b103ec7","_npmUser":{"name":"wujian666","email":"sunboyjian@126.com"},"repository":{"url":"","type":"git"},"_npmVersion":"8.19.4","description":"本工程覆盖 antd3/4 组件变量实现换肤，并提供变量到项目工程使用，主要生产以下文件。","directories":{},"_nodeVersion":"16.20.2","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/dict-tel_0.0.1_1756204839234_0.18853812458007058","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@adomtheme/dict-tel","version":"0.0.2","description":"本工程覆盖 antd3/4 组件变量实现换肤，并提供变量到项目工程使用，主要生产以下文件。","main":"js/theme.js","module":"js/theme.js","repository":{"type":"git","url":""},"author":"","license":"ISC","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"gitHead":"657b3cbb4e9e8c9b1f86e412513687ab09e1d6a1","_id":"@adomtheme/dict-tel@0.0.2","_nodeVersion":"16.20.2","_npmVersion":"8.19.4","dist":{"integrity":"sha512-4eKTV3kvLwS6iAagzAHCQ0m7MGqZEBdI1k9eSj04RGiU+AJJ3CD47Mm0xF8mrs5dtSOd/YGBcaN0fF/DHutSnQ==","shasum":"b4955bba5535fbf97f2a6c975c72c6793458efcc","tarball":"https://registry.npmjs.org/@adomtheme/dict-tel/-/dict-tel-0.0.2.tgz","fileCount":22,"unpackedSize":89215,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCUQQWsBwZl5uO8hMA+233hhEGPzviUVU6f6FbN4z/OwAIhAKiZNJKaQ3KAEnsoiQNqt1t2SK5+daaHhscsr7SKtWjH"}]},"_npmUser":{"name":"wujian666","email":"sunboyjian@126.com"},"directories":{},"maintainers":[{"name":"wujian666","email":"sunboyjian@126.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/dict-tel_0.0.2_1756277014473_0.22666817096530534"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-26T10:40:39.152Z","modified":"2025-08-27T06:43:34.857Z","0.0.1":"2025-08-26T10:40:39.429Z","0.0.2":"2025-08-27T06:43:34.662Z"},"license":"ISC","repository":{"type":"git","url":""},"description":"本工程覆盖 antd3/4 组件变量实现换肤，并提供变量到项目工程使用，主要生产以下文件。","maintainers":[{"name":"wujian666","email":"sunboyjian@126.com"}],"readme":"# 简介\r\n\r\n本工程覆盖 antd3/4 组件变量实现换肤，并提供变量到项目工程使用，主要生产以下文件。\r\n\r\n- modalWidth.js // 导出的弹窗或抽屉宽度变量，方便统一控制页面弹窗及抽屉宽度\r\n- theme.js // 用于导入到 webpack 配置文件的 lessOptions-->modifyVars 实现组件换肤\r\n- theme.less // 针对于使用 less 的工程项目提供的 less 变量，在工程内全局引入，并在编写样式时使用其内部变量\r\n- theme.scss // 针对于使用 scss 的工程项目提供的 scss 变量，在工程内全局引入，并在编写样式时使用其内部变量\r\n\r\n# 安装配置\r\n\r\n先安装本工程包，对应项目的中找到 webpack.config.js 文件，给 antd 组件库引入包里的的 theme.js,实现组件换肤。这是你应该就能正常使用里面的变量了。\r\n\r\n```\r\n+ import theme from '@adomtheme/dict-tel';\r\n\r\nmodule.exports = {\r\n  rules: [{\r\n    test: /\\.less$/,\r\n    use: [{\r\n      loader: 'style-loader',\r\n    }, {\r\n      loader: 'css-loader', // translates CSS into CommonJS\r\n    }, {\r\n      loader: 'less-loader', // compiles Less to CSS\r\n+     options: {\r\n+       lessOptions: { // 如果使用less-loader@5，请移除 lessOptions 这一级直接配置选项。\r\n+         modifyVars: theme,\r\n+         javascriptEnabled: true,\r\n+       },\r\n+     },\r\n    }],\r\n    // ...other rules\r\n  }],\r\n  // ...other config\r\n}\r\n```\r\n\r\numi3/4 工程则直接替换配置的 theme 即可\r\n\r\n```\r\n+ import theme from '@adomtheme/dict-tel';\r\n\r\n// .umirc.js 或 config/config.js\r\nexport default {\r\n  theme,\r\n}\r\n\r\n```\r\n\r\n如果项目使用的是 scss 编写样式，则需要全局导入 scss/less 变量\r\n先安装 sass-resources-loader\r\n\r\n```\r\n+ import themeScss from '@adomtheme/dict-tel/scss/theme.scss';\r\n\r\nmodule: {\r\n  rules: [\r\n    // Apply loader\r\n    {\r\n      test: /\\.scss$/,\r\n      use: [\r\n        'style-loader',\r\n        'css-loader',\r\n        'postcss-loader',\r\n        'sass-loader',\r\n        {\r\n          loader: 'sass-resources-loader',\r\n          options: {\r\n            resources: [themeScss]\r\n          },\r\n        },\r\n      ],\r\n    },\r\n  ],\r\n},\r\n```\r\n\r\n# 变量使用规则\r\n\r\n变量内提供色板，文字大小，移入等效果变量值，需要按规则使用\r\n\r\n1. 文字/图标颜色\r\n\r\n```\r\n'heading-color': 标题,\r\n'text-color': 正文,\r\n'text-color-paragraph': 段落,\r\n'text-color-secondary': 说明,\r\n'disabled-color': 禁用文字,\r\n\r\n// 反色文字，深色背景中使用\r\n'text-color-inverse': 标题,\r\n'text-color-dark': 正文,\r\n'text-color-paragraph-dark': 段落,\r\n'text-color-secondary-dark': 说明,\r\n'disabled-color-dark': 禁用文字,\r\n\r\n```\r\n\r\n2. 行移入或活动颜色\r\n\r\n```\r\n'item-hover-bg': 移入行,\r\n'item-active-bg': 活动/选中行,\r\n```\r\n\r\n3. 背景填充\r\n\r\n```\r\n'color-fill-1': 白色填充\r\n'color-fill-2': 亮灰色填充\r\n'color-fill-3': 灰色填充或禁用背景\r\n'color-fill-4': 暗灰色填充或标签背景\r\n'color-fill-5': 图标或反色标签背景\r\n'modal-mask-bg': 遮罩背景\r\n\r\n```\r\n\r\n4. 边线\r\n\r\n```\r\n'color-line-1': 较浅的轮廓线(页面卡片)\r\n'color-line-2': 分割线,较重的轮廓线\r\n'color-line-3': 按钮,表单空间边框,分割器\r\n'color-line-4': 加重的线条,线条悬浮\r\n\r\n```\r\n\r\n5. 间距\r\n\r\n```\r\n// 区块内元素间距使用以下变量：\r\nspace-xxs: 2px;\r\nspace-xs: 4px;\r\nspace-sm: 8px;\r\nspace-md: 12px;\r\nspace-lg: 16px;\r\nspace-xl: 20px;\r\nspace-xxl: 24px;\r\n\r\n// 页面一级区块(容器)的内容间距\r\n'box-padding-base': 容器默认内间距,\r\n'box-padding-sm': 容器小号内间距,\r\n```\r\n\r\n6. 页面间距,页面最外层的 wraper 间距\r\n\r\n```\r\n'page-space': '0 40px 16px 40px',\r\n```\r\n\r\n7. 文字大小\r\n\r\n```\r\n'font-size-sm': 小号文字\r\n'font-size-md': 中号文字\r\n'font-size-base': 默认文字(比中号大或相等)\r\n'font-size-lg': 大号文字\r\n'font-weight': 字重(一般是500)\r\n'heading-1-size': 对应H1标签\r\n'heading-2-size': 对应H2标签\r\n'heading-3-size': 对应H3标签\r\n'heading-4-size': 对应H4标签\r\n'heading-5-size': 对应H5标签\r\n'heading-6-size': 对应H6标签\r\n\r\n```\r\n\r\n9. 尺寸,多用于高度设置，如果宽高一致可以宽高同时使用\r\n\r\n```\r\n'size-xs'\r\n'size-sm'\r\n'size-md'\r\n'size-base'\r\n'size-lg'\r\n'size-xl'\r\n```\r\n\r\n10. 圆角\r\n\r\n```\r\nborder-radius-base\r\nborder-radius-lg\r\nborder-radius-md\r\nborder-radius-sm\r\nborder-radius-round(50%)\r\nbox-border-radius: 页面所有区块的圆角\r\n```\r\n\r\n11. 阴影投影\r\n\r\n```\r\nbox-shadow-1: 轻微变化、抬起\r\nbox-shadow-2: 抓起、拖拽的物体\r\nbox-shadow-3: 鼠标移入后抬起的物体\r\nbox-shadow-4: 弹出的物体、包括抽屉、弹窗、浮层\r\n```\r\n\r\n12. 组件高度(按钮,文本框等高度)\r\n    需要自己实现组件时使用\r\n\r\n```\r\nheight-base\r\nheight-lg\r\nheight-sm\r\n```\r\n\r\n13. 色板使用\r\n    提供了色板使用，每个色值分 1-10 级，可根据需要自行组合使用。需要实现情景内容交互效果，大原则如下：\r\n    颜色色板：red，volcano，orange，gold，yellow，lime，green，cyan，blue，geekblue，purple，magenta，pink\r\n    情景色板：primary(主色)，info，success，warning，error，highlight\r\n\r\n**使用场景：**\r\n背景色：xxx-1\r\n移入文字颜色: xxx-5\r\n默认文字颜色: xxx-6\r\n点击文字颜色: xxx-7\r\n如：\r\n\r\n```\r\n.box {\r\n  color: @blue-6;\r\n  background-color: @blue-1;\r\n  &:hover {\r\n    color: @blue-5;\r\n  }\r\n  &:active {\r\n    color: @blue-7;\r\n  }\r\n}\r\n\r\n```\r\n\r\n> 这里只做示例参考，具体选值由 UI 确定\r\n\r\n14. 弹窗宽度\r\n    为了方便统一弹窗及抽屉的宽度控制，统一由包引入宽度,如下面使用\r\n    /bin/default/modalWidth 文件内容\r\n\r\n```\r\nconst modalWidths = {\r\n  xs: '256px',\r\n  sm: '500px',\r\n  md: '768px',\r\n  lg: '1000px',\r\n  xl: '80%',\r\n};\r\n```\r\n\r\n使用方法\r\n\r\n```\r\nimport React from 'react';\r\nimport { Modal } from 'antd';\r\n+ import modalWidth from '@adomtheme/dict-tel/js/modalWidth';\r\n\r\nconst Demo = () => {\r\n  return (\r\n    <Modal title=\"测试弹窗\" width={modalWidth?.md}>111</Modal>\r\n  )\r\n}\r\n\r\n15. 公共组件样式\r\n\r\n\r\nfishx 和 umi项目可以在global.less 加入\r\n\r\n@import '~@adomtheme/dict/index.less';\r\n\r\ncra项目可以在app.js中 \r\n\r\nimport '~@adomtheme/dict/index.less';\r\n\r\n\r\n```\r\n","readmeFilename":"readme.md"}